@underverse-ui/underverse 2.0.28 → 2.0.30

package/dist/{chunk-QYFXYDBK.js → chunk-57BKIC6J.js}

@@ -1,12 +1,13 @@
 import {
   EmojiGridButton,
   formatEmojiCountLabel
-} from "./chunk-LRIRY4DG.js";
+} from "./chunk-5W63IHIN.js";
 import {
   COLUMN_RESIZE_LINE_THICKNESS,
   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,42 +28,72 @@ import {
   applyImageLayout,
   applyImageWidthPreset,
   applyTableAlignment,
+  buildTableFormulaDependencyGraph,
+  clampResponsiveTableWidthBp,
   clearTableColumnAt,
   clearTableRowAt,
+  deleteResponsiveColumnLayout,
   deleteSelectedImage,
   dispatchTableLayoutChange,
   duplicateTableColumnAt,
   duplicateTableRowAt,
+  evaluateBasicTableFormula,
   expandTableFromCell,
   findTableNodeInfoFromState,
   findTableRowNodeInfo,
+  formatBasisPointsAsPercentage,
+  formatFormulaError,
+  formatTableFormulaDisplayValue,
+  getAffectedTableFormulaLabels,
   getDefaultFontSizes,
   getDefaultLineHeights,
+  getLegacyTableColumnWeights,
+  getLogicalTableColumnCount,
   getRelativeBoundaryMetrics,
   getRelativeCellMetrics,
   getRelativeSelectedCellsMetrics,
+  getResponsiveTableOffsetBp,
+  getResponsiveTableWidthBp,
   getSelectionTableCell,
+  getTableCellRangeLabels,
+  getTableColumnRatios,
+  getTableFormulaRecalculationOrder,
+  getTableFormulaReferences,
+  indexToColumnName,
+  insertResponsiveColumnLayout,
   isCrossRealmElement,
   isCrossRealmHTMLElement,
   isCrossRealmNode,
   isCrossRealmTable,
   isCrossRealmTableCell,
   isCrossRealmTableRow,
+  isDraftTableFormula,
   isPointOverRenderedText,
   isRowResizeHotspot,
   isRowResizingGlobal,
   isSafeUEditorUrl,
   mergeTableCellsPreservingColumnWidths,
+  moveResponsiveColumnRatio,
+  normalizeColumnRatios,
   normalizeStyleValue,
+  normalizeTableFormula,
+  normalizeTableWidthMode,
+  parseColumnRatios,
+  parsePercentageToBasisPoints,
+  parseTableCellRange,
   resetImageSize,
   resolveColumnResizeTarget,
   resolveEventElement,
+  resolveResponsiveTableOffsetBp,
   resolveRowResizeTarget,
+  rewriteTableNodeFormulaReferencesForDeletion,
+  rewriteTableNodeFormulaReferencesForInsertion,
+  rewriteTableNodeFormulaReferencesForMove,
   runTableCommandAtCellPos,
   sanitizeUEditorUrl,
   useEditorColors,
   useSharedEditorUiRenderState
-} from "./chunk-KTOXCD6J.js";
+} from "./chunk-37MHVJMV.js";
 import {
   Tooltip,
   UEditorPortalProvider,
@@ -71,7 +103,7 @@ import {
   resolveUEditorPortalContainer,
   useSmartTranslations,
   useUEditorPortalContainerGetter
-} from "./chunk-A4GUPKHM.js";
+} from "./chunk-ZP7F4ZD7.js";
 
 // src/components/UEditor/prepare-content-for-save.ts
 var MIME_EXTENSION_MAP = {
@@ -124,16 +156,16 @@ function createFileFromDataImageUrl(dataUrl, index) {
   const name = `ueditor-image-${index + 1}.${extension}`;
   return new File([bytes], name, { type: parsed.mime });
 }
-function normalizeUploadResult(result) {
+function normalizeUploadResult(result, kind) {
   if (typeof result === "string") {
-    const url2 = sanitizeUEditorUrl(result, "image");
+    const url2 = sanitizeUEditorUrl(result, kind);
     if (!url2) throw new Error("Upload handler returned an empty URL.");
     return { url: url2 };
   }
   if (!result || typeof result !== "object") {
     throw new Error("Upload handler returned invalid result.");
   }
-  const url = typeof result.url === "string" ? sanitizeUEditorUrl(result.url, "image") : "";
+  const url = typeof result.url === "string" ? sanitizeUEditorUrl(result.url, kind) : "";
   if (!url) throw new Error("Upload handler object result is missing `url`.");
   const { url: _ignoredUrl, ...rest } = result;
   const meta = Object.keys(rest).length > 0 ? rest : void 0;
@@ -188,11 +220,13 @@ function normalizeImageUrl(url) {
 }
 function replaceSrcInTag(match, nextSrc) {
   if (!match.srcAttr) return match.tag;
-  const { start, end, quote } = match.srcAttr;
-  const escaped = quote === '"' ? nextSrc.replace(/"/g, """) : quote === "'" ? nextSrc.replace(/'/g, "'") : nextSrc;
-  const srcAttr = quote ? `src=${quote}${escaped}${quote}` : `src=${escaped}`;
+  const { start, end } = match.srcAttr;
+  const srcAttr = `src="${escapeHtmlAttribute(nextSrc)}"`;
   return `${match.tag.slice(0, start)}${srcAttr}${match.tag.slice(end)}`;
 }
+function escapeHtmlAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
 function collectImgTagMatches(html) {
   const matches = [];
   const imgRegex = /<img\b[^>]*>/gi;
@@ -310,13 +344,14 @@ function collectFileCardMatches(html) {
 }
 function replaceFileCardAttrs(tag, nextUrl) {
   let result = tag;
+  const escapedUrl = escapeHtmlAttribute(nextUrl);
   const hrefRegex = /(\bhref\s*=\s*)(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+)/i;
   const dataSrcRegex = /(\bdata-src\s*=\s*)(?:"[^"]*"|'[^']*'|[^\s"'=<>`]+)/i;
   if (hrefRegex.test(result)) {
-    result = result.replace(hrefRegex, `$1"${nextUrl}"`);
+    result = result.replace(hrefRegex, `$1"${escapedUrl}"`);
   }
   if (dataSrcRegex.test(result)) {
-    result = result.replace(dataSrcRegex, `$1"${nextUrl}"`);
+    result = result.replace(dataSrcRegex, `$1"${escapedUrl}"`);
   }
   return result;
 }
@@ -386,7 +421,7 @@ async function prepareUEditorContentForSave({
           try {
             const file = createFileFromDataImageUrl(candidate.src, candidate.index);
             const uploadResult = await uploadImageForSave(file);
-            const normalized = normalizeUploadResult(uploadResult);
+            const normalized = normalizeUploadResult(uploadResult, "image");
             return { candidate, file, ...normalized };
           } catch (error) {
             return { candidate, error: getErrorReason(error) };
@@ -433,7 +468,7 @@ async function prepareUEditorContentForSave({
           try {
             const file = createFileFromDataUrl(candidate.src, candidate.fileName);
             const uploadResult = await uploadFn(file);
-            const normalized = normalizeUploadResult(uploadResult);
+            const normalized = normalizeUploadResult(uploadResult, "file");
             return { candidate, file, ...normalized };
           } catch (error) {
             return { candidate, error: getErrorReason(error) };
@@ -486,7 +521,7 @@ async function prepareUEditorContentForSave({
 }
 
 // src/components/UEditor/UEditor.tsx
-import React15, { useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useMemo as useMemo2, useRef as useRef10 } from "react";
+import React17, { useEffect as useEffect10, useImperativeHandle as useImperativeHandle4, useMemo as useMemo2, useRef as useRef10 } from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/UEditor/extensions.ts
@@ -521,7 +556,7 @@ import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import React from "react";
 import { jsx } from "react/jsx-runtime";
 var LazyBaseEmojiPicker = React.lazy(async () => {
-  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-NV3GQYWI.js");
+  const { EmojiPicker: EmojiPicker2 } = await import("./EmojiPicker-ISJ6RXYG.js");
   return { default: EmojiPicker2 };
 });
 var EmojiPicker = ({ onSelect }) => {
@@ -558,7 +593,8 @@ var CalloutView = ({ node, updateAttributes, selected }) => {
               "button",
               {
                 type: "button",
-                className: "flex items-center justify-center text-2xl h-9 w-9 hover:bg-muted-foreground/10 active:scale-95 rounded-lg transition-all focus:outline-none",
+                "aria-label": t("callout.selectEmoji"),
+                className: "flex items-center justify-center text-2xl h-9 w-9 hover:bg-muted-foreground/10 active:scale-95 rounded-lg transition-[background-color,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
                 children: currentEmoji
               }
             ),
@@ -572,9 +608,11 @@ var CalloutView = ({ node, updateAttributes, selected }) => {
                   {
                     type: "button",
                     title: col.name,
+                    "aria-label": `${t("callout.backgroundColor")}: ${col.name}`,
+                    "aria-pressed": currentBgColor === col.color,
                     onClick: () => updateAttributes({ backgroundColor: col.color }),
                     className: cn(
-                      "h-6 w-6 rounded-full border transition-all active:scale-90 hover:scale-105",
+                      "h-6 w-6 rounded-full border transition-[transform,border-color,box-shadow] active:scale-90 hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
                       currentBgColor === col.color ? "border-primary ring-2 ring-primary/30" : "border-border/60"
                     ),
                     style: { backgroundColor: col.color }
@@ -1062,12 +1100,13 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
     e.preventDefault();
     e.stopPropagation();
     if (!safeSrc) return;
-    const link = document.createElement("a");
+    const ownerDocument = editor.view.dom.ownerDocument;
+    const link = ownerDocument.createElement("a");
     link.href = safeSrc;
     link.download = fileName || "download";
-    document.body.appendChild(link);
+    ownerDocument.body.appendChild(link);
     link.click();
-    document.body.removeChild(link);
+    ownerDocument.body.removeChild(link);
   };
   const hasInlineUpload = safeSrc.startsWith("data:") && Boolean(uploadFn);
   const handleRetryUpload = (event) => {
@@ -1081,18 +1120,19 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
     NodeViewWrapper3,
     {
       className: cn(
-        "my-4 flex items-center justify-between rounded-xl border border-border/60 bg-card p-4 hover:bg-muted/15 transition-all duration-200 cursor-pointer select-none",
+        "my-4 flex items-center justify-between rounded-xl border border-border/60 bg-card p-4 hover:bg-muted/15 transition-[background-color,border-color,box-shadow] duration-200 select-none",
         selected && "ring-2 ring-primary/45 border-primary/20 shadow-sm"
       ),
-      onClick: handleDownload,
+      role: "group",
+      "aria-label": fileName || t("fileCard.unnamed"),
       children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-3.5 min-w-0", children: [
-          /* @__PURE__ */ jsx4("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary flex-shrink-0", children: /* @__PURE__ */ jsx4(FileIcon, { className: "h-6 w-6" }) }),
+          /* @__PURE__ */ jsx4("div", { className: "flex h-11 w-11 items-center justify-center rounded-lg bg-primary/10 text-primary flex-shrink-0", children: /* @__PURE__ */ jsx4(FileIcon, { "aria-hidden": "true", className: "h-6 w-6" }) }),
           /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsx4("div", { className: "text-sm font-semibold text-foreground truncate break-all", children: fileName || t("fileCard.unnamed") }),
             /* @__PURE__ */ jsxs3("div", { className: "text-xs text-muted-foreground flex items-center gap-2 mt-0.5", children: [
               fileSize ? /* @__PURE__ */ jsx4("span", { children: formatBytes(fileSize) }) : null,
-              hasInlineUpload && /* @__PURE__ */ jsx4("span", { className: cn(
+              hasInlineUpload && /* @__PURE__ */ jsx4("span", { "aria-live": "polite", className: cn(
                 "font-medium truncate max-w-50",
                 uploadError ? "text-destructive" : "text-primary animate-pulse"
               ), children: uploadError ? `${t("fileCard.uploadFailed") || "T\u1EA3i l\xEAn th\u1EA5t b\u1EA1i"}: ${uploadError}` : t("fileCard.uploading") }),
@@ -1103,7 +1143,7 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
                   onClick: handleRetryUpload,
                   className: "inline-flex items-center gap-1 rounded-md border border-destructive/30 px-1.5 py-0.5 text-[11px] font-medium text-destructive hover:bg-destructive/10",
                   children: [
-                    /* @__PURE__ */ jsx4(RefreshCw2, { className: "h-3 w-3" }),
+                    /* @__PURE__ */ jsx4(RefreshCw2, { "aria-hidden": "true", className: "h-3 w-3" }),
                     t("fileCard.retryUpload")
                   ]
                 }
@@ -1116,8 +1156,9 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
           {
             type: "button",
             onClick: handleDownload,
-            className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted active:scale-95 transition-all focus:outline-none",
-            children: /* @__PURE__ */ jsx4(Download, { className: "h-4 w-4" })
+            "aria-label": t("fileCard.download").replace("{name}", fileName || t("fileCard.unnamed")),
+            className: "flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted active:scale-95 transition-[color,background-color,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            children: /* @__PURE__ */ jsx4(Download, { "aria-hidden": "true", className: "h-4 w-4" })
           }
         )
       ]
@@ -1375,6 +1416,7 @@ import { Node as Node5, mergeAttributes as mergeAttributes5 } from "@tiptap/core
 import { ReactNodeViewRenderer as ReactNodeViewRenderer5 } from "@tiptap/react";
 
 // src/components/UEditor/FormRadioView.tsx
+import { useId } from "react";
 import { NodeViewWrapper as NodeViewWrapper5 } from "@tiptap/react";
 import { Settings } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
@@ -1383,6 +1425,8 @@ var FormRadioView = ({ node, updateAttributes, editor, selected }) => {
   const isChecked = !!node.attrs.checked;
   const isEditable = editor.isEditable;
   const groupName = node.attrs.name || "radio-group";
+  const groupInputId = useId();
+  const radioLabel = `${t("menubar.formRadio")} \u2014 ${node.attrs.value || groupName}`;
   const handleSelect = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1408,6 +1452,7 @@ var FormRadioView = ({ node, updateAttributes, editor, selected }) => {
           {
             role: "radio",
             "aria-checked": isChecked,
+            "aria-label": radioLabel,
             tabIndex: isEditable ? 0 : -1,
             onClick: handleSelect,
             onKeyDown: handleKeyDown2,
@@ -1436,17 +1481,21 @@ var FormRadioView = ({ node, updateAttributes, editor, selected }) => {
               "button",
               {
                 type: "button",
+                "aria-label": t("radio.editGroup") || "Edit Group",
                 className: "p-0.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors outline-none cursor-pointer",
                 title: t("radio.editGroup") || "Edit Group",
                 children: /* @__PURE__ */ jsx6(Settings, { className: "w-3.5 h-3.5" })
               }
             ),
             children: /* @__PURE__ */ jsxs4("div", { className: "p-3 w-52 flex flex-col gap-2 bg-card border rounded-xl shadow-lg text-card-foreground", children: [
-              /* @__PURE__ */ jsx6("label", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("radio.groupName") || "Group Name" }),
+              /* @__PURE__ */ jsx6("label", { htmlFor: groupInputId, className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("radio.groupName") || "Group Name" }),
               /* @__PURE__ */ jsx6(
                 "input",
                 {
                   type: "text",
+                  id: groupInputId,
+                  name: "radio-group-name",
+                  autoComplete: "off",
                   value: groupName,
                   onChange: (e) => updateAttributes({ name: e.target.value }),
                   className: `w-full rounded-lg bg-background px-2 py-1.5 text-sm text-foreground ${formControlOutlineClass}`
@@ -1461,6 +1510,12 @@ var FormRadioView = ({ node, updateAttributes, editor, selected }) => {
 };
 
 // src/components/UEditor/form-radio.ts
+var formRadioIdSequence = 0;
+function createFormRadioId() {
+  formRadioIdSequence += 1;
+  const randomId = globalThis.crypto?.randomUUID?.();
+  return randomId ? `rad-${randomId}` : `rad-${Date.now().toString(36)}-${formRadioIdSequence.toString(36)}`;
+}
 var FormRadio = Node5.create({
   name: "formRadio",
   group: "inline",
@@ -1493,7 +1548,7 @@ var FormRadio = Node5.create({
       },
       id: {
         default: null,
-        parseHTML: (element) => element.getAttribute("data-id") || element.getAttribute("id") || `rad-${Math.random().toString(36).substring(2, 9)}`,
+        parseHTML: (element) => element.getAttribute("data-id") || element.getAttribute("id") || createFormRadioId(),
         renderHTML: (attributes) => {
           if (!attributes.id) return {};
           return {
@@ -1552,10 +1607,15 @@ var FormRadio = Node5.create({
       setFormRadio: (attributes) => ({ commands }) => {
         return commands.insertContent({
           type: this.name,
-          attrs: attributes
+          attrs: {
+            ...attributes,
+            id: attributes?.id || createFormRadioId(),
+            name: attributes?.name || "radio-group"
+          }
         });
       },
       checkFormRadio: (id) => ({ tr, dispatch }) => {
+        if (!id) return false;
         if (!dispatch) return true;
         let targetGroupName = "";
         let targetPos = -1;
@@ -1607,7 +1667,7 @@ import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { Extension } from "@tiptap/core";
 import { Suggestion } from "@tiptap/suggestion";
 import { ReactRenderer } from "@tiptap/react";
-import React4, { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef2 } from "react";
+import React5, { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef2 } from "react";
 import {
   FileCode,
   Heading1,
@@ -1692,9 +1752,9 @@ var DEFAULT_MESSAGES = {
   formRadioDesc: "Insert an interactive radio button field"
 };
 function useResettingIndex(resetToken) {
-  const [state, setState] = React4.useState({ resetToken, index: 0 });
+  const [state, setState] = React5.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = React4.useCallback((nextIndex) => {
+  const setSelectedIndex = React5.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -1910,7 +1970,7 @@ function buildSlashCommandItems({
       title: messages.formRadio,
       description: messages.formRadioDesc,
       command: run(({ editor, range }) => {
-        getCommandChain(editor, range).setFormRadio({ name: `radio-group-${Math.random().toString(36).substring(2, 6)}` }).run();
+        getCommandChain(editor, range).setFormRadio().run();
       })
     }
   ].filter((item) => {
@@ -1922,6 +1982,7 @@ function buildSlashCommandItems({
 var SlashCommandList = forwardRef((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useResettingIndex(props.items);
   const listRef = useRef2(null);
+  const listId = React5.useId();
   useEffect3(() => {
     const selectedElement = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`);
     selectedElement?.scrollIntoView({ block: "nearest" });
@@ -1952,41 +2013,56 @@ var SlashCommandList = forwardRef((props, ref) => {
     }
   }));
   if (props.items.length === 0) {
-    return /* @__PURE__ */ jsx7("div", { className: "w-72 p-4 text-center text-sm text-muted-foreground", children: props.messages.noResults });
+    return /* @__PURE__ */ jsx7("div", { role: "status", className: "w-72 p-4 text-center text-sm text-muted-foreground", children: props.messages.noResults });
   }
-  return /* @__PURE__ */ jsxs5("div", { ref: listRef, className: "w-72 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-2xl shadow-lg", children: [
-    /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx7("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: props.messages.basicBlocks }) }),
-    /* @__PURE__ */ jsx7("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ jsxs5(
-      "button",
-      {
-        type: "button",
-        "data-index": index,
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => props.command(item),
-        className: cn(
-          "flex items-center w-full px-3 py-2.5 rounded-lg transition-colors group",
-          selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
-        ),
-        children: [
-          /* @__PURE__ */ jsx7(
-            "div",
-            {
-              className: cn(
-                "flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
-                selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: listRef,
+      id: listId,
+      role: "listbox",
+      "aria-label": props.messages.basicBlocks,
+      "aria-activedescendant": `${listId}-option-${selectedIndex}`,
+      className: "w-72 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-2xl shadow-lg",
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: "px-3 py-2 border-b", children: /* @__PURE__ */ jsx7("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: props.messages.basicBlocks }) }),
+        /* @__PURE__ */ jsx7("div", { className: "p-1", children: props.items.map((item, index) => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            id: `${listId}-option-${index}`,
+            role: "option",
+            "aria-selected": selectedIndex === index,
+            tabIndex: -1,
+            "data-index": index,
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => props.command(item),
+            className: cn(
+              "flex items-center w-full px-3 py-2.5 rounded-lg transition-colors group",
+              selectedIndex === index ? "bg-accent" : "hover:bg-accent/50"
+            ),
+            children: [
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center justify-center w-10 h-10 rounded-lg mr-3 transition-colors",
+                    selectedIndex === index ? "bg-primary/10" : "bg-muted/50 group-hover:bg-muted"
+                  ),
+                  children: /* @__PURE__ */ jsx7(item.icon, { "aria-hidden": "true", className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
+                }
               ),
-              children: /* @__PURE__ */ jsx7(item.icon, { className: cn("w-5 h-5", selectedIndex === index ? "text-primary" : "text-muted-foreground") })
-            }
-          ),
-          /* @__PURE__ */ jsxs5("div", { className: "text-left", children: [
-            /* @__PURE__ */ jsx7("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: item.title }),
-            /* @__PURE__ */ jsx7("div", { className: "text-xs text-muted-foreground", children: item.description })
-          ] })
-        ]
-      },
-      item.title
-    )) })
-  ] });
+              /* @__PURE__ */ jsxs5("div", { className: "text-left", children: [
+                /* @__PURE__ */ jsx7("div", { className: cn("text-sm font-medium", selectedIndex === index && "text-primary"), children: item.title }),
+                /* @__PURE__ */ jsx7("div", { className: "text-xs text-muted-foreground", children: item.description })
+              ] })
+            ]
+          },
+          item.title
+        )) })
+      ]
+    }
+  );
 });
 SlashCommandList.displayName = "SlashCommandList";
 var SlashCommand = Extension.create({
@@ -2070,13 +2146,13 @@ import { Extension as Extension2 } from "@tiptap/core";
 import { Suggestion as Suggestion2 } from "@tiptap/suggestion";
 import { ReactRenderer as ReactRenderer2 } from "@tiptap/react";
 import { PluginKey as PluginKey2 } from "@tiptap/pm/state";
-import React5, { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2 } from "react";
+import React6, { forwardRef as forwardRef2, useImperativeHandle as useImperativeHandle2 } from "react";
 import { Smile } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function useResettingIndex2(resetToken) {
-  const [state, setState] = React5.useState({ resetToken, index: 0 });
+  const [state, setState] = React6.useState({ resetToken, index: 0 });
   const selectedIndex = Object.is(state.resetToken, resetToken) ? state.index : 0;
-  const setSelectedIndex = React5.useCallback((nextIndex) => {
+  const setSelectedIndex = React6.useCallback((nextIndex) => {
     setState((prev) => {
       const prevIndex = Object.is(prev.resetToken, resetToken) ? prev.index : 0;
       return {
@@ -2090,6 +2166,7 @@ function useResettingIndex2(resetToken) {
 var EmojiList = forwardRef2((props, ref) => {
   const t = useSmartTranslations("UEditor");
   const [selectedIndex, setSelectedIndex] = useResettingIndex2(props.items);
+  const listId = React6.useId();
   const showingCountLabel = formatEmojiCountLabel(t("emojiSuggestion.showingCount"), 64, props.items.length);
   useImperativeHandle2(ref, () => ({
     onKeyDown: (keyProps) => {
@@ -2122,28 +2199,42 @@ var EmojiList = forwardRef2((props, ref) => {
     }
   }));
   if (props.items.length === 0) {
-    return /* @__PURE__ */ jsx8("div", { className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border/50 rounded-2xl shadow-lg", children: t("emojiSuggestion.noResults") });
-  }
-  return /* @__PURE__ */ jsxs6("div", { className: "w-80 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-2xl shadow-lg", children: [
-    /* @__PURE__ */ jsx8("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx8(Smile, { className: "w-4 h-4 text-primary" }),
-      /* @__PURE__ */ jsx8("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("emojiSuggestion.title") })
-    ] }) }),
-    /* @__PURE__ */ jsxs6("div", { className: "p-3", children: [
-      /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-8 gap-1", children: props.items.slice(0, 64).map((item, index) => /* @__PURE__ */ jsx8(
-        EmojiGridButton,
-        {
-          emoji: item.emoji,
-          name: item.name,
-          onClick: () => props.command(item),
-          active: selectedIndex === index,
-          className: "text-xl"
-        },
-        item.name
-      )) }),
-      props.items.length > 64 && /* @__PURE__ */ jsx8("div", { className: "mt-2 text-xs text-center text-muted-foreground", children: showingCountLabel })
-    ] })
-  ] });
+    return /* @__PURE__ */ jsx8("div", { role: "status", className: "w-80 p-4 text-center text-sm text-muted-foreground bg-card border border-border/50 rounded-2xl shadow-lg", children: t("emojiSuggestion.noResults") });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      id: listId,
+      role: "listbox",
+      "aria-label": t("emojiSuggestion.title"),
+      "aria-activedescendant": `${listId}-option-${selectedIndex}`,
+      className: "w-80 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-2xl shadow-lg",
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8(Smile, { className: "w-4 h-4 text-primary" }),
+          /* @__PURE__ */ jsx8("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("emojiSuggestion.title") })
+        ] }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "p-3", children: [
+          /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-8 gap-1", children: props.items.slice(0, 64).map((item, index) => /* @__PURE__ */ jsx8(
+            EmojiGridButton,
+            {
+              id: `${listId}-option-${index}`,
+              role: "option",
+              "aria-selected": selectedIndex === index,
+              tabIndex: -1,
+              emoji: item.emoji,
+              name: item.name,
+              onClick: () => props.command(item),
+              active: selectedIndex === index,
+              className: "text-xl"
+            },
+            item.name
+          )) }),
+          props.items.length > 64 && /* @__PURE__ */ jsx8("div", { className: "mt-2 text-xs text-center text-muted-foreground", children: showingCountLabel })
+        ] })
+      ]
+    }
+  );
 });
 EmojiList.displayName = "EmojiList";
 var allEmojiItemsPromise = null;
@@ -2233,7 +2324,7 @@ import { Extension as Extension3 } from "@tiptap/core";
 import { Suggestion as Suggestion3 } from "@tiptap/suggestion";
 import { ReactRenderer as ReactRenderer3 } from "@tiptap/react";
 import { PluginKey as PluginKey3 } from "@tiptap/pm/state";
-import React6, { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle3 } from "react";
+import React7, { forwardRef as forwardRef3, useImperativeHandle as useImperativeHandle3 } from "react";
 import { Sigma } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var FORMULA_FUNCTIONS = [
@@ -2288,8 +2379,9 @@ function isFormulaFunctionSuggestionQuery(query) {
 }
 var FormulaSuggestionList = forwardRef3((props, ref) => {
   const t = useSmartTranslations("UEditor");
-  const [selectedIndex, setSelectedIndex] = React6.useState(0);
-  React6.useEffect(() => {
+  const [selectedIndex, setSelectedIndex] = React7.useState(0);
+  const listId = React7.useId();
+  React7.useEffect(() => {
     setSelectedIndex(0);
   }, [props.items]);
   useImperativeHandle3(ref, () => ({
@@ -2314,32 +2406,46 @@ var FormulaSuggestionList = forwardRef3((props, ref) => {
     }
   }));
   if (props.items.length === 0) {
-    return /* @__PURE__ */ jsx9("div", { className: "w-72 p-3 text-sm text-muted-foreground bg-card border border-border/50 rounded-lg shadow-lg", children: t("formulaSuggestion.noResults") });
-  }
-  return /* @__PURE__ */ jsxs7("div", { className: "w-72 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-lg shadow-lg", children: [
-    /* @__PURE__ */ jsx9("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx9(Sigma, { className: "w-4 h-4 text-primary" }),
-      /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("formulaSuggestion.title") })
-    ] }) }),
-    /* @__PURE__ */ jsx9("div", { className: "p-1.5", children: props.items.map((item, index) => /* @__PURE__ */ jsxs7(
-      "button",
-      {
-        type: "button",
-        className: `w-full rounded-md px-2.5 py-2 text-left transition-colors ${selectedIndex === index ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"}`,
-        onMouseEnter: () => setSelectedIndex(index),
-        onMouseDown: (event) => event.preventDefault(),
-        onClick: () => props.command(item),
-        children: [
-          /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsx9("span", { className: "font-mono text-sm font-semibold", children: item.name }),
-            /* @__PURE__ */ jsx9("span", { className: "font-mono text-xs text-muted-foreground", children: item.signature })
-          ] }),
-          /* @__PURE__ */ jsx9("div", { className: "mt-0.5 text-xs text-muted-foreground", children: t(item.descriptionKey) })
-        ]
-      },
-      item.name
-    )) })
-  ] });
+    return /* @__PURE__ */ jsx9("div", { role: "status", className: "w-72 p-3 text-sm text-muted-foreground bg-card border border-border/50 rounded-lg shadow-lg", children: t("formulaSuggestion.noResults") });
+  }
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      id: listId,
+      role: "listbox",
+      "aria-label": t("formulaSuggestion.title"),
+      "aria-activedescendant": `${listId}-option-${selectedIndex}`,
+      className: "w-72 max-h-80 overflow-y-auto bg-card border border-border/50 rounded-lg shadow-lg",
+      children: [
+        /* @__PURE__ */ jsx9("div", { className: "px-3 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx9(Sigma, { className: "w-4 h-4 text-primary" }),
+          /* @__PURE__ */ jsx9("span", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: t("formulaSuggestion.title") })
+        ] }) }),
+        /* @__PURE__ */ jsx9("div", { className: "p-1.5", children: props.items.map((item, index) => /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            type: "button",
+            id: `${listId}-option-${index}`,
+            role: "option",
+            "aria-selected": selectedIndex === index,
+            tabIndex: -1,
+            className: `w-full rounded-md px-2.5 py-2 text-left transition-colors ${selectedIndex === index ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"}`,
+            onMouseEnter: () => setSelectedIndex(index),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => props.command(item),
+            children: [
+              /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-3", children: [
+                /* @__PURE__ */ jsx9("span", { className: "font-mono text-sm font-semibold", children: item.name }),
+                /* @__PURE__ */ jsx9("span", { className: "font-mono text-xs text-muted-foreground", children: item.signature })
+              ] }),
+              /* @__PURE__ */ jsx9("div", { className: "mt-0.5 text-xs text-muted-foreground", children: t(item.descriptionKey) })
+            ]
+          },
+          item.name
+        )) })
+      ]
+    }
+  );
 });
 FormulaSuggestionList.displayName = "FormulaSuggestionList";
 function insertFormulaFunction(editor, range, item) {
@@ -3339,8 +3445,18 @@ 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,
+  addRowAfter as addRowAfterCommand,
+  addRowBefore as addRowBeforeCommand,
+  deleteColumn as deleteColumnCommand,
+  deleteRow as deleteRowCommand,
+  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 +3477,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 +3489,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 +3498,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 +3512,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 +3580,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 +3682,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 +3734,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 +3826,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 +3864,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 +3907,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 +3997,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 +4009,94 @@ 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, rewriteFormulas) {
+  const tableInfo = findTableNodeInfoFromState(state);
+  if (!tableInfo) {
+    return command(state, dispatch);
+  }
+  let rect;
+  try {
+    rect = selectedRect(state);
+  } catch {
+    return false;
+  }
+  const responsive = normalizeTableWidthMode(tableInfo.node.attrs.widthMode) === "responsive";
+  const nextLayout = responsive ? updateLayout({
+    widthBp: getResponsiveTableWidthBp(tableInfo.node),
+    columnRatios: getTableColumnRatios(tableInfo.node)
+  }, rect) : null;
+  return command(state, dispatch ? (transaction) => {
+    let nextTable = transaction.doc.nodeAt(tableInfo.pos);
+    if (nextTable?.type.name === "table" && nextLayout && 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)
+        )
+      });
+      nextTable = transaction.doc.nodeAt(tableInfo.pos);
+    }
+    if (nextTable?.type.name === "table") {
+      const rewrittenTable = rewriteFormulas(nextTable, rect);
+      if (rewrittenTable !== nextTable) {
+        transaction.replaceWith(tableInfo.pos, tableInfo.pos + nextTable.nodeSize, rewrittenTable);
+      }
+    }
+    dispatch(transaction);
+  } : void 0);
+}
+function runRowStructureCommand(state, dispatch, command, rewriteFormulas) {
+  const tableInfo = findTableNodeInfoFromState(state);
+  if (!tableInfo) return command(state, dispatch);
+  let rect;
+  try {
+    rect = selectedRect(state);
+  } catch {
+    return false;
+  }
+  return command(state, dispatch ? (transaction) => {
+    const nextTable = transaction.doc.nodeAt(tableInfo.pos);
+    if (nextTable?.type.name === "table") {
+      const rewrittenTable = rewriteFormulas(nextTable, rect);
+      if (rewrittenTable !== nextTable) {
+        transaction.replaceWith(tableInfo.pos, tableInfo.pos + nextTable.nodeSize, rewrittenTable);
+      }
+    }
+    dispatch(transaction);
+  } : void 0);
+}
 var UEditorTable = Table2.extend({
   addGlobalAttributes() {
     return [
@@ -3816,10 +4114,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 +4180,117 @@ 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
+          ),
+          (tableNode, rect) => rewriteTableNodeFormulaReferencesForInsertion(tableNode, "column", rect.left)
+        );
+      },
+      addColumnAfter: () => ({ state, dispatch }) => {
+        return runResponsiveColumnStructureCommand(
+          state,
+          dispatch,
+          addColumnAfterCommand,
+          (layout, rect) => insertResponsiveColumnLayout(
+            layout.widthBp,
+            layout.columnRatios,
+            rect.right,
+            rect.right - 1
+          ),
+          (tableNode, rect) => rewriteTableNodeFormulaReferencesForInsertion(tableNode, "column", rect.right)
+        );
+      },
+      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;
+          },
+          (tableNode, rect) => rewriteTableNodeFormulaReferencesForDeletion(
+            tableNode,
+            "column",
+            rect.left,
+            rect.right - rect.left
+          )
+        );
+      },
+      addRowBefore: () => ({ state, dispatch }) => runRowStructureCommand(
+        state,
+        dispatch,
+        addRowBeforeCommand,
+        (tableNode, rect) => rewriteTableNodeFormulaReferencesForInsertion(tableNode, "row", rect.top)
+      ),
+      addRowAfter: () => ({ state, dispatch }) => runRowStructureCommand(
+        state,
+        dispatch,
+        addRowAfterCommand,
+        (tableNode, rect) => rewriteTableNodeFormulaReferencesForInsertion(tableNode, "row", rect.bottom)
+      ),
+      deleteRow: () => ({ state, dispatch }) => runRowStructureCommand(
+        state,
+        dispatch,
+        deleteRowCommand,
+        (tableNode, rect) => rewriteTableNodeFormulaReferencesForDeletion(
+          tableNode,
+          "row",
+          rect.top,
+          rect.bottom - rect.top
+        )
+      ),
       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 +4309,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 +4386,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;
@@ -3930,7 +4431,7 @@ var UEditorTable = Table2.extend({
 var table_align_default = UEditorTable;
 
 // src/components/UEditor/CodeBlockView.tsx
-import React8, { useState as useState4 } from "react";
+import React9, { useState as useState4 } from "react";
 import { NodeViewWrapper as NodeViewWrapper7, NodeViewContent as NodeViewContent2 } from "@tiptap/react";
 import { Check as Check2, Copy, ChevronDown } from "lucide-react";
 import { Fragment, jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -3957,10 +4458,11 @@ var CodeBlockView = ({
 }) => {
   const [copied, setCopied] = useState4(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState4(false);
-  const timeoutRef = React8.useRef(null);
+  const timeoutRef = React9.useRef(null);
+  const t = useSmartTranslations("UEditor");
   const currentLangValue = node.attrs.language || "text";
   const currentLangLabel = LANGUAGES.find((lang) => lang.value === currentLangValue)?.label || "Plain Text";
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -3994,10 +4496,12 @@ var CodeBlockView = ({
               {
                 type: "button",
                 onClick: () => setIsDropdownOpen(!isDropdownOpen),
-                className: "flex items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted active:scale-95 transition-all focus:outline-none",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isDropdownOpen,
+                className: "flex items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground hover:bg-muted active:scale-95 transition-[color,background-color,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
                 children: [
                   currentLangLabel,
-                  /* @__PURE__ */ jsx11(ChevronDown, { className: "h-3 w-3" })
+                  /* @__PURE__ */ jsx11(ChevronDown, { "aria-hidden": "true", className: "h-3 w-3" })
                 ]
               }
             ),
@@ -4009,10 +4513,12 @@ var CodeBlockView = ({
                   onClick: () => setIsDropdownOpen(false)
                 }
               ),
-              /* @__PURE__ */ jsx11("div", { className: "absolute right-0 mt-1 max-h-56 w-36 overflow-y-auto rounded-lg border border-border/50 bg-popover p-1 shadow-lg z-30 [scrollbar-width:thin] animate-in fade-in-0 zoom-in-95", children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx11("div", { role: "listbox", "aria-label": currentLangLabel, className: "absolute right-0 mt-1 max-h-56 w-36 overflow-y-auto rounded-lg border border-border/50 bg-popover p-1 shadow-lg z-30 [scrollbar-width:thin] animate-in fade-in-0 zoom-in-95 motion-reduce:animate-none", children: LANGUAGES.map((lang) => /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
+                  role: "option",
+                  "aria-selected": currentLangValue === lang.value,
                   onClick: () => {
                     updateAttributes({ language: lang.value });
                     setIsDropdownOpen(false);
@@ -4032,9 +4538,10 @@ var CodeBlockView = ({
             {
               type: "button",
               onClick: handleCopy,
-              className: "flex h-7 w-7 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted active:scale-95 transition-all focus:outline-none",
-              title: "Copy code",
-              children: copied ? /* @__PURE__ */ jsx11(Check2, { className: "h-3.5 w-3.5 text-success animate-in fade-in-0 zoom-in-75" }) : /* @__PURE__ */ jsx11(Copy, { className: "h-3.5 w-3.5" })
+              "aria-label": t("menubar.copy"),
+              className: "flex h-7 w-7 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground hover:text-foreground hover:bg-muted active:scale-95 transition-[color,background-color,transform] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              title: t("menubar.copy"),
+              children: copied ? /* @__PURE__ */ jsx11(Check2, { "aria-hidden": "true", className: "h-3.5 w-3.5 text-success animate-in fade-in-0 zoom-in-75 motion-reduce:animate-none" }) : /* @__PURE__ */ jsx11(Copy, { "aria-hidden": "true", className: "h-3.5 w-3.5" })
             }
           )
         ]
@@ -4237,529 +4744,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";
-
-// src/components/UEditor/table-formula.ts
-var CELL_ADDRESS_RE = /^([A-Z]+)([1-9]\d*)$/i;
-var CELL_RANGE_RE = /^([A-Z]+[1-9]\d*):([A-Z]+[1-9]\d*)$/i;
-var SUPPORTED_FUNCTIONS = /* @__PURE__ */ new Set(["SUM", "AVG", "MIN", "MAX", "COUNT"]);
-function columnNameToIndex(columnName) {
-  const normalized = columnName.trim().toUpperCase();
-  if (!/^[A-Z]+$/.test(normalized)) {
-    return -1;
-  }
-  let index = 0;
-  for (const char of normalized) {
-    index = index * 26 + char.charCodeAt(0) - 64;
-  }
-  return index - 1;
-}
-function indexToColumnName(index) {
-  if (!Number.isInteger(index) || index < 0) {
-    return "";
-  }
-  let value = index + 1;
-  let name = "";
-  while (value > 0) {
-    const remainder = (value - 1) % 26;
-    name = String.fromCharCode(65 + remainder) + name;
-    value = Math.floor((value - 1) / 26);
-  }
-  return name;
-}
-function parseTableCellAddress(input) {
-  const match = input.trim().match(CELL_ADDRESS_RE);
-  if (!match) {
-    return null;
-  }
-  const column = columnNameToIndex(match[1] ?? "");
-  const row = Number.parseInt(match[2] ?? "", 10) - 1;
-  if (column < 0 || row < 0) {
-    return null;
-  }
-  return {
-    column,
-    row,
-    label: `${indexToColumnName(column)}${row + 1}`
-  };
-}
-function parseTableCellRange(input) {
-  const match = input.trim().match(CELL_RANGE_RE);
-  if (!match) {
-    return null;
-  }
-  const from = parseTableCellAddress(match[1] ?? "");
-  const to = parseTableCellAddress(match[2] ?? "");
-  if (!from || !to) {
-    return null;
-  }
-  return { from, to };
-}
-function getTableCellRangeLabels(range) {
-  const startColumn = Math.min(range.from.column, range.to.column);
-  const endColumn = Math.max(range.from.column, range.to.column);
-  const startRow = Math.min(range.from.row, range.to.row);
-  const endRow = Math.max(range.from.row, range.to.row);
-  const labels = [];
-  for (let row = startRow; row <= endRow; row += 1) {
-    for (let column = startColumn; column <= endColumn; column += 1) {
-      labels.push(`${indexToColumnName(column)}${row + 1}`);
-    }
-  }
-  return labels;
-}
-function normalizeTableFormula(formula) {
-  return formula.trim().replace(/^=/, "").trim();
-}
-function isDraftTableFormula(formula) {
-  const normalized = normalizeTableFormula(formula);
-  if (!normalized) return true;
-  let depth = 0;
-  for (const char of normalized) {
-    if (char === "(") depth += 1;
-    if (char === ")") depth -= 1;
-    if (depth < 0) return false;
-  }
-  if (depth > 0) return true;
-  if (/^[A-Z]+\(\s*\)$/i.test(normalized)) return true;
-  if (/[+\-*/,(]\s*$/.test(normalized)) return true;
-  return false;
-}
-function formatFormulaError(error) {
-  return `#${error.toUpperCase()}`;
-}
-function normalizeTableNumberFormat(format) {
-  return format === "text" || format === "number" || format === "currency" || format === "percent" || format === "date" ? format : "text";
-}
-function formatTableFormulaDisplayValue(value, numberFormat) {
-  const stringValue = String(value);
-  if (stringValue.startsWith("#")) {
-    return stringValue;
-  }
-  const normalizedFormat = normalizeTableNumberFormat(numberFormat);
-  if (normalizedFormat === "text") {
-    return stringValue;
-  }
-  const numericValue = typeof value === "number" ? value : Number.parseFloat(stringValue.replace(/,/g, ""));
-  if (!Number.isFinite(numericValue)) {
-    return stringValue;
-  }
-  if (normalizedFormat === "number") {
-    return new Intl.NumberFormat("en-US", { maximumFractionDigits: 6 }).format(numericValue);
-  }
-  if (normalizedFormat === "currency") {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      maximumFractionDigits: 2
-    }).format(numericValue);
-  }
-  if (normalizedFormat === "percent") {
-    return new Intl.NumberFormat("en-US", {
-      style: "percent",
-      maximumFractionDigits: 2
-    }).format(numericValue);
-  }
-  const excelEpochMs = Date.UTC(1899, 11, 30);
-  const date = new Date(excelEpochMs + numericValue * 24 * 60 * 60 * 1e3);
-  if (Number.isNaN(date.getTime())) {
-    return stringValue;
-  }
-  return new Intl.DateTimeFormat("en-US", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    timeZone: "UTC"
-  }).format(date);
-}
-function getTableFormulaReferences(formula) {
-  const normalized = normalizeTableFormula(formula);
-  if (!normalized) return [];
-  const tokens = tokenizeFormula(normalized);
-  if (!tokens) return [];
-  const references = /* @__PURE__ */ new Set();
-  for (const token of tokens) {
-    if (token.type === "cell") {
-      references.add(token.value);
-    } else if (token.type === "range") {
-      const range = parseTableCellRange(token.value);
-      if (!range) continue;
-      for (const label of getTableCellRangeLabels(range)) {
-        references.add(label);
-      }
-    }
-  }
-  return Array.from(references);
-}
-function buildTableFormulaDependencyGraph(cells) {
-  const dependencies = /* @__PURE__ */ new Map();
-  const dependents = /* @__PURE__ */ new Map();
-  const formulas = /* @__PURE__ */ new Map();
-  for (const cell of cells) {
-    const label = cell.label.toUpperCase();
-    formulas.set(label, cell.formula);
-    dependencies.set(label, new Set(getTableFormulaReferences(cell.formula)));
-    if (!dependents.has(label)) {
-      dependents.set(label, /* @__PURE__ */ new Set());
-    }
-  }
-  for (const [label, refs] of dependencies) {
-    for (const ref of refs) {
-      if (!dependents.has(ref)) {
-        dependents.set(ref, /* @__PURE__ */ new Set());
-      }
-      dependents.get(ref)?.add(label);
-    }
-  }
-  return { dependencies, dependents, formulas };
-}
-function getTableFormulaCircularReferences(graph) {
-  const circular = /* @__PURE__ */ new Set();
-  const visited = /* @__PURE__ */ new Set();
-  const finishOrder = [];
-  for (const startLabel of graph.formulas.keys()) {
-    if (visited.has(startLabel)) continue;
-    visited.add(startLabel);
-    const stack = [
-      {
-        label: startLabel,
-        references: Array.from(graph.dependencies.get(startLabel) ?? []).filter((ref) => graph.formulas.has(ref)),
-        nextIndex: 0
-      }
-    ];
-    while (stack.length > 0) {
-      const frame = stack[stack.length - 1];
-      if (!frame) break;
-      const reference = frame.references[frame.nextIndex];
-      if (reference) {
-        frame.nextIndex += 1;
-        if (!visited.has(reference)) {
-          visited.add(reference);
-          stack.push({
-            label: reference,
-            references: Array.from(graph.dependencies.get(reference) ?? []).filter((ref) => graph.formulas.has(ref)),
-            nextIndex: 0
-          });
-        }
-        continue;
-      }
-      stack.pop();
-      finishOrder.push(frame.label);
-    }
-  }
-  const assigned = /* @__PURE__ */ new Set();
-  for (let index = finishOrder.length - 1; index >= 0; index -= 1) {
-    const startLabel = finishOrder[index];
-    if (!startLabel || assigned.has(startLabel)) continue;
-    const component = [];
-    const stack = [startLabel];
-    assigned.add(startLabel);
-    while (stack.length > 0) {
-      const label = stack.pop();
-      if (!label) continue;
-      component.push(label);
-      for (const dependent of graph.dependents.get(label) ?? []) {
-        if (!graph.formulas.has(dependent) || assigned.has(dependent)) continue;
-        assigned.add(dependent);
-        stack.push(dependent);
-      }
-    }
-    if (component.length > 1) {
-      for (const label of component) circular.add(label);
-    } else {
-      const label = component[0];
-      if (label && graph.dependencies.get(label)?.has(label)) circular.add(label);
-    }
-  }
-  return circular;
-}
-function getTableFormulaRecalculationOrder(graph) {
-  const circular = getTableFormulaCircularReferences(graph);
-  const visiting = /* @__PURE__ */ new Set();
-  const visited = /* @__PURE__ */ new Set();
-  const order = [];
-  for (const startLabel of graph.formulas.keys()) {
-    if (visited.has(startLabel) || circular.has(startLabel)) continue;
-    const stack = [];
-    const push = (label) => {
-      visiting.add(label);
-      stack.push({
-        label,
-        references: Array.from(graph.dependencies.get(label) ?? []).filter((ref) => graph.formulas.has(ref) && !circular.has(ref)),
-        nextIndex: 0
-      });
-    };
-    push(startLabel);
-    while (stack.length > 0) {
-      const frame = stack[stack.length - 1];
-      if (!frame) break;
-      const reference = frame.references[frame.nextIndex];
-      if (reference) {
-        frame.nextIndex += 1;
-        if (!visited.has(reference) && !visiting.has(reference)) {
-          push(reference);
-        }
-        continue;
-      }
-      stack.pop();
-      visiting.delete(frame.label);
-      visited.add(frame.label);
-      order.push(frame.label);
-    }
-  }
-  return { order, circular };
-}
-function getAffectedTableFormulaLabels(graph, changedLabels) {
-  const affected = /* @__PURE__ */ new Set();
-  const queue = Array.from(changedLabels, (label) => label.toUpperCase());
-  for (const label of queue) {
-    if (graph.formulas.has(label)) {
-      affected.add(label);
-    }
-  }
-  for (let index = 0; index < queue.length; index += 1) {
-    const label = queue[index];
-    if (!label) continue;
-    for (const dependent of graph.dependents.get(label) ?? []) {
-      if (affected.has(dependent)) continue;
-      affected.add(dependent);
-      queue.push(dependent);
-    }
-  }
-  return affected;
-}
-function evaluateBasicTableFormula(formula, getCellValue) {
-  const normalized = normalizeTableFormula(formula);
-  if (!normalized) {
-    return { value: null, error: "empty" };
-  }
-  const tokens = tokenizeFormula(normalized);
-  if (!tokens) {
-    return { value: null, error: "invalid-formula" };
-  }
-  const parser = new FormulaParser(tokens, getCellValue);
-  const result = parser.parseExpression();
-  if (result.error) {
-    return result;
-  }
-  if (!parser.isComplete()) {
-    return { value: null, error: "invalid-formula" };
-  }
-  return result;
-}
-function tokenizeFormula(formula) {
-  const tokens = [];
-  let index = 0;
-  while (index < formula.length) {
-    const char = formula[index];
-    if (!char) break;
-    if (/\s/.test(char)) {
-      index += 1;
-      continue;
-    }
-    if (char === "," || char === "+" || char === "-" || char === "*" || char === "/" || char === "(" || char === ")") {
-      if (char === ",") tokens.push({ type: "comma", value: char });
-      else if (char === "(" || char === ")") tokens.push({ type: "paren", value: char });
-      else tokens.push({ type: "operator", value: char });
-      index += 1;
-      continue;
-    }
-    const numberMatch = formula.slice(index).match(/^(?:\d+(?:\.\d*)?|\.\d+)/);
-    if (numberMatch?.[0]) {
-      const value = Number.parseFloat(numberMatch[0]);
-      if (!Number.isFinite(value)) return null;
-      tokens.push({ type: "number", value });
-      index += numberMatch[0].length;
-      continue;
-    }
-    const identifierMatch = formula.slice(index).match(/^[A-Z]+[1-9]\d*(?::[A-Z]+[1-9]\d*)?|^[A-Z]+/i);
-    if (identifierMatch?.[0]) {
-      const value = identifierMatch[0].toUpperCase();
-      if (CELL_RANGE_RE.test(value)) tokens.push({ type: "range", value });
-      else if (parseTableCellAddress(value)) tokens.push({ type: "cell", value });
-      else if (SUPPORTED_FUNCTIONS.has(value)) tokens.push({ type: "function", value });
-      else return null;
-      index += identifierMatch[0].length;
-      continue;
-    }
-    return null;
-  }
-  return tokens;
-}
-function toFiniteFormulaResult(value) {
-  return Number.isFinite(value) ? { value, error: null } : { value: null, error: "invalid-formula" };
-}
-function parseTableCellNumericValue(value) {
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? value : null;
-  }
-  let normalized = String(value ?? "").trim();
-  if (!normalized || normalized.startsWith("#")) return null;
-  const isPercent = normalized.endsWith("%");
-  if (isPercent) normalized = normalized.slice(0, -1).trim();
-  const currencyMatch = normalized.match(/^([+-]?)\$(.+)$/);
-  if (currencyMatch) {
-    normalized = `${currencyMatch[1] ?? ""}${currencyMatch[2] ?? ""}`.trim();
-  }
-  const groupedNumber = /^[+-]?\d{1,3}(?:,\d{3})+(?:\.\d*)?(?:[eE][+-]?\d+)?$/;
-  const plainNumber = /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:[eE][+-]?\d+)?$/;
-  if (!groupedNumber.test(normalized) && !plainNumber.test(normalized)) return null;
-  const parsed = Number(normalized.replace(/,/g, ""));
-  if (!Number.isFinite(parsed)) return null;
-  return isPercent ? parsed / 100 : parsed;
-}
-var FormulaParser = class {
-  constructor(tokens, getCellValue) {
-    this.tokens = tokens;
-    this.getCellValue = getCellValue;
-    this.index = 0;
-  }
-  isComplete() {
-    return this.index >= this.tokens.length;
-  }
-  parseExpression() {
-    let left = this.parseTerm();
-    while (!left.error) {
-      const operator = this.peekOperator(["+", "-"]);
-      if (!operator) break;
-      this.index += 1;
-      const right = this.parseTerm();
-      if (right.error) return right;
-      left = toFiniteFormulaResult(operator.value === "+" ? left.value + right.value : left.value - right.value);
-    }
-    return left;
-  }
-  parseTerm() {
-    let left = this.parseFactor();
-    while (!left.error) {
-      const operator = this.peekOperator(["*", "/"]);
-      if (!operator) break;
-      this.index += 1;
-      const right = this.parseFactor();
-      if (right.error) return right;
-      if (operator.value === "/" && right.value === 0) {
-        return { value: null, error: "division-by-zero" };
-      }
-      left = toFiniteFormulaResult(operator.value === "*" ? left.value * right.value : left.value / right.value);
-    }
-    return left;
-  }
-  parseFactor() {
-    const token = this.tokens[this.index];
-    if (!token) {
-      return { value: null, error: "invalid-formula" };
-    }
-    if (token.type === "operator" && (token.value === "-" || token.value === "+")) {
-      this.index += 1;
-      const value = this.parseFactor();
-      if (value.error) return value;
-      return toFiniteFormulaResult(token.value === "-" ? -value.value : value.value);
-    }
-    if (token.type === "number") {
-      this.index += 1;
-      return { value: token.value, error: null };
-    }
-    if (token.type === "cell") {
-      this.index += 1;
-      return this.readCellNumber(token.value);
-    }
-    if (token.type === "function") {
-      return this.parseFunction(token.value);
-    }
-    if (token.type === "paren" && token.value === "(") {
-      this.index += 1;
-      const value = this.parseExpression();
-      if (value.error) return value;
-      if (!this.consumeParen(")")) {
-        return { value: null, error: "invalid-formula" };
-      }
-      return value;
-    }
-    return { value: null, error: "invalid-formula" };
-  }
-  parseFunction(name) {
-    this.index += 1;
-    if (!this.consumeParen("(")) {
-      return { value: null, error: "invalid-formula" };
-    }
-    const values = [];
-    while (true) {
-      const token = this.tokens[this.index];
-      if (!token) {
-        return { value: null, error: "invalid-formula" };
-      }
-      if (token.type === "range") {
-        this.index += 1;
-        const range = parseTableCellRange(token.value);
-        if (!range) return { value: null, error: "invalid-reference" };
-        for (const label of getTableCellRangeLabels(range)) {
-          if (name === "COUNT") {
-            const cellValue2 = this.readOptionalCellNumber(label);
-            if (cellValue2 != null) values.push(cellValue2);
-            continue;
-          }
-          const cellValue = this.readOptionalCellNumber(label);
-          if (cellValue != null) values.push(cellValue);
-        }
-      } else if (token.type === "cell") {
-        this.index += 1;
-        const cellValue = this.readOptionalCellNumber(token.value);
-        if (cellValue != null) values.push(cellValue);
-      } else {
-        const value = this.parseExpression();
-        if (value.error) return value;
-        values.push(value.value);
-      }
-      if (this.consumeComma()) {
-        continue;
-      }
-      if (this.consumeParen(")")) {
-        break;
-      }
-      return { value: null, error: "invalid-formula" };
-    }
-    if (name === "SUM") return toFiniteFormulaResult(values.reduce((sum, value) => sum + value, 0));
-    if (name === "AVG") {
-      return values.length > 0 ? toFiniteFormulaResult(values.reduce((sum, value) => sum + value, 0) / values.length) : { value: null, error: "division-by-zero" };
-    }
-    if (name === "MIN") return toFiniteFormulaResult(values.length > 0 ? Math.min(...values) : 0);
-    if (name === "MAX") return toFiniteFormulaResult(values.length > 0 ? Math.max(...values) : 0);
-    if (name === "COUNT") return { value: values.length, error: null };
-    return { value: null, error: "invalid-formula" };
-  }
-  readCellNumber(label) {
-    const parsed = parseTableCellNumericValue(this.getCellValue(label));
-    if (parsed == null) {
-      return { value: null, error: "invalid-reference" };
-    }
-    return { value: parsed, error: null };
-  }
-  readOptionalCellNumber(label) {
-    return parseTableCellNumericValue(this.getCellValue(label));
-  }
-  peekOperator(operators) {
-    const token = this.tokens[this.index];
-    return token?.type === "operator" && operators.includes(token.value) ? token : null;
-  }
-  consumeComma() {
-    if (this.tokens[this.index]?.type !== "comma") {
-      return false;
-    }
-    this.index += 1;
-    return true;
-  }
-  consumeParen(value) {
-    const token = this.tokens[this.index];
-    if (token?.type !== "paren" || token.value !== value) {
-      return false;
-    }
-    this.index += 1;
-    return true;
-  }
-};
-
-// src/components/UEditor/table-formula-commands.ts
+import { TextSelection as TextSelection2 } from "@tiptap/pm/state";
+import { selectedRect as selectedRect2, setCellAttr, TableMap as TableMap2 } from "@tiptap/pm/tables";
 var UEDITOR_TABLE_FORMULA_RECALCULATE_META = "ueditorTableFormulaRecalculate";
 var TABLE_FORMULA_PLAN_CACHE_LIMIT = 50;
 var tableFormulaPlanCache = /* @__PURE__ */ new Map();
@@ -4891,7 +4877,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 +5007,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 +5207,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,
@@ -5639,6 +5625,7 @@ function buildUEditorExtensions({
   maxImageFileSize,
   allowedImageMimeTypes,
   fallbackToDataUrl,
+  onImageUploadError,
   editable = true,
   fetchMetadata
 }) {
@@ -5706,7 +5693,8 @@ function buildUEditorExtensions({
       insertMode: imageInsertMode,
       ...maxImageFileSize !== void 0 ? { maxFileSize: maxImageFileSize } : {},
       ...allowedImageMimeTypes ? { allowedMimeTypes: allowedImageMimeTypes } : {},
-      ...fallbackToDataUrl !== void 0 ? { fallbackToDataUrl } : {}
+      ...fallbackToDataUrl !== void 0 ? { fallbackToDataUrl } : {},
+      onError: onImageUploadError
     }),
     TextStyle,
     font_family_default,
@@ -5819,7 +5807,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 +5878,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();
@@ -7149,6 +7137,8 @@ var CustomBubbleMenu = ({
     editor.on("transaction", schedulePositionUpdate);
     editor.on("focus", schedulePositionUpdate);
     editor.on("blur", handleBlur);
+    editorWindow?.addEventListener("resize", schedulePositionUpdate);
+    editorWindow?.addEventListener("scroll", schedulePositionUpdate, true);
     updatePositionRef.current = updatePosition;
     schedulePositionUpdate();
     return () => {
@@ -7159,6 +7149,8 @@ var CustomBubbleMenu = ({
       editor.off("transaction", schedulePositionUpdate);
       editor.off("focus", schedulePositionUpdate);
       editor.off("blur", handleBlur);
+      editorWindow?.removeEventListener("resize", schedulePositionUpdate);
+      editorWindow?.removeEventListener("scroll", schedulePositionUpdate, true);
     };
   }, [editor, editorDocument, editorWindow]);
   useEffect5(() => {
@@ -7292,12 +7284,16 @@ var CustomFloatingMenu = ({ editor }) => {
     editor.on("transaction", schedulePositionUpdate);
     editor.on("focus", schedulePositionUpdate);
     editor.on("blur", handleBlur);
+    editorWindow?.addEventListener("resize", schedulePositionUpdate);
+    editorWindow?.addEventListener("scroll", schedulePositionUpdate, true);
     schedulePositionUpdate();
     return () => {
       if (animationFrameId !== null) editorWindow?.cancelAnimationFrame(animationFrameId);
       editor.off("transaction", schedulePositionUpdate);
       editor.off("focus", schedulePositionUpdate);
       editor.off("blur", handleBlur);
+      editorWindow?.removeEventListener("resize", schedulePositionUpdate);
+      editorWindow?.removeEventListener("scroll", schedulePositionUpdate, true);
     };
   }, [editor, editorWindow]);
   if (!isVisible || !portalContainer) return null;
@@ -7356,7 +7352,7 @@ var CharacterCountDisplay = ({ editor, maxCharacters }) => {
 };
 
 // src/components/UEditor/table-controls.tsx
-import React10 from "react";
+import React11 from "react";
 
 // node_modules/prosemirror-model/dist/index.js
 function findDiffStart(a, b, pos) {
@@ -10008,7 +10004,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 +10073,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 +10093,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 +10179,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 +10189,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 +10308,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 +10808,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 +10900,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 +11325,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 +11342,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 +11382,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 +11417,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 +11515,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);
@@ -11836,7 +11832,8 @@ function buildTableControlLayout(editor, surface, cell) {
     avgRowHeight,
     avgColumnWidth,
     rowHandles,
-    columnHandles
+    columnHandles,
+    widthMode: normalizeTableWidthMode(tableInfo.node.attrs.widthMode)
   };
 }
 
@@ -12011,6 +12008,8 @@ function TableAddRails({
   layout,
   onStartAddColumn,
   onStartAddRow,
+  onAddColumn,
+  onAddRow,
   quickAddColumnLabel,
   quickAddRowLabel
 }) {
@@ -12033,17 +12032,16 @@ function TableAddRails({
             type: "button",
             "data-table-control": "add-column",
             "aria-label": quickAddColumnLabel,
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              if (!canExpandTable) return;
-              onStartAddColumn();
+            tabIndex: showColumnRail ? 0 : -1,
+            onPointerDown: onStartAddColumn,
+            onClick: (event) => {
+              if (event.detail === 0 && canExpandTable) onAddColumn();
             },
             disabled: !canExpandTable,
             className: cn(
               "absolute z-30 inline-flex items-center justify-center rounded-md",
               "border border-border/70 bg-muted/40 text-muted-foreground shadow-sm backdrop-blur",
-              "transition-[opacity,transform,colors] duration-200 delay-100 ease-out cursor-pointer hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+              "transition-[opacity,transform,color,border-color,background-color] duration-200 delay-100 ease-out motion-reduce:transition-none cursor-pointer hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             style: {
               top: columnRailTop,
@@ -12070,17 +12068,16 @@ function TableAddRails({
             type: "button",
             "data-table-control": "add-row",
             "aria-label": quickAddRowLabel,
-            onMouseDown: (event) => {
-              event.preventDefault();
-              event.stopPropagation();
-              if (!canExpandTable) return;
-              onStartAddRow();
+            tabIndex: showRowRail ? 0 : -1,
+            onPointerDown: onStartAddRow,
+            onClick: (event) => {
+              if (event.detail === 0 && canExpandTable) onAddRow();
             },
             disabled: !canExpandTable,
             className: cn(
               "absolute z-30 inline-flex items-center justify-center rounded-md",
               "border border-border/70 bg-muted/40 text-muted-foreground shadow-sm backdrop-blur",
-              "transition-[opacity,transform,colors] duration-200 delay-100 ease-out cursor-pointer hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+              "transition-[opacity,transform,color,border-color,background-color] duration-200 delay-100 ease-out motion-reduce:transition-none cursor-pointer hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             style: {
               top: rowRailTop,
@@ -12173,6 +12170,7 @@ function TableRowHandles({
   getMenuItems,
   hoverRowHandleIndex,
   onOpenMenuChange,
+  onMove,
   onStartDrag,
   openMenuKey,
   rowDragLabel,
@@ -12213,13 +12211,16 @@ function TableRowHandles({
                   {
                     type: "button",
                     "aria-label": `${rowDragLabel} ${rowHandle.index + 1}`,
-                    onMouseDown: (event) => {
+                    tabIndex: visible ? 0 : -1,
+                    onPointerDown: (event) => onStartDrag(event, rowHandle),
+                    onKeyDown: (event) => {
+                      if (!event.altKey || event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
                       event.preventDefault();
                       event.stopPropagation();
-                      onStartDrag(rowHandle);
+                      onMove(rowHandle, event.key === "ArrowUp" ? -1 : 1);
                     },
                     className: cn(
-                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-200 delay-100 ease-out",
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,color,border-color,background-color] duration-200 delay-100 ease-out motion-reduce:transition-none",
                       visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
                     ),
                     style: {
@@ -12230,7 +12231,7 @@ function TableRowHandles({
                       // selection near the first character of a table cell.
                       pointerEvents: visible ? "auto" : "none"
                     },
-                    children: visible ? /* @__PURE__ */ jsx16(GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx16("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
+                    children: visible ? /* @__PURE__ */ jsx16(GripVertical, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx16("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                   }
                 )
               }
@@ -12251,6 +12252,7 @@ function TableColumnHandles({
   getMenuItems,
   hoverColumnHandleIndex,
   onOpenMenuChange,
+  onMove,
   onStartDrag,
   openMenuKey
 }) {
@@ -12288,13 +12290,16 @@ function TableColumnHandles({
                   {
                     type: "button",
                     "aria-label": `${columnDragLabel} ${columnHandle.index + 1}`,
-                    onMouseDown: (event) => {
+                    tabIndex: visible ? 0 : -1,
+                    onPointerDown: (event) => onStartDrag(event, columnHandle),
+                    onKeyDown: (event) => {
+                      if (!event.altKey || event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
                       event.preventDefault();
                       event.stopPropagation();
-                      onStartDrag(columnHandle);
+                      onMove(columnHandle, event.key === "ArrowLeft" ? -1 : 1);
                     },
                     className: cn(
-                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-200 delay-100 ease-out",
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,color,border-color,background-color] duration-200 delay-100 ease-out motion-reduce:transition-none",
                       visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
                     ),
                     style: {
@@ -12302,7 +12307,7 @@ function TableColumnHandles({
                       transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
                       pointerEvents: visible ? "auto" : "none"
                     },
-                    children: visible ? /* @__PURE__ */ jsx16(GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx16("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
+                    children: visible ? /* @__PURE__ */ jsx16(GripHorizontal, { "aria-hidden": "true", className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx16("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                   }
                 )
               }
@@ -12317,7 +12322,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",
@@ -12325,11 +12330,30 @@ 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 formatTableResizeDimensionLabel({
+  width,
+  height,
+  widthBp,
+  widthMode,
+  viewportWidth
+}) {
+  const widthLabel = widthMode === "responsive" ? formatBasisPointsAsPercentage(
+    widthBp ?? Math.max(1, width) / Math.max(1, viewportWidth) * TABLE_WIDTH_BASIS_POINTS
+  ) : `${Math.round(width)}px`;
+  return `${widthLabel} \xD7 ${Math.round(height)}px`;
+}
 function TableResizeHandles({
   active,
   ctrlHint,
   frameRef,
   layout,
+  onFitWidth,
+  onKeyboardResize,
   onStartResize,
   resizeBothLabel
 }) {
@@ -12350,6 +12374,38 @@ 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"),
+              onKeyDown: (event) => onKeyboardResize(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"),
+              onKeyDown: (event) => onKeyboardResize(event, "right")
+            }
+          )
+        ] }) : null,
         /* @__PURE__ */ jsx17(
           "button",
           {
@@ -12362,7 +12418,12 @@ 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,
+            onClick: (event) => {
+              if (event.detail === 0) onFitWidth(event);
+            },
+            onPointerDown: (event) => onStartResize(event, "both"),
+            onKeyDown: (event) => onKeyboardResize(event, "both"),
             children: /* @__PURE__ */ jsx17(MoveDiagonal2, { "aria-hidden": "true", className: "h-3.5 w-3.5", strokeWidth: 2.25 })
           }
         ),
@@ -12373,7 +12434,12 @@ function TableResizeHandles({
             "aria-live": "polite",
             "data-table-resize-dimensions": "",
             className: "absolute bottom-2 right-2 rounded bg-foreground/85 px-1.5 py-0.5 text-[10px] font-medium text-background shadow-sm",
-            children: `${Math.round(layout.tableWidth)} \xD7 ${Math.round(layout.tableHeight)}`
+            children: formatTableResizeDimensionLabel({
+              width: layout.tableWidth,
+              height: layout.tableHeight,
+              widthMode: layout.widthMode,
+              viewportWidth: layout.viewportWidth
+            })
           }
         ) : null
       ]
@@ -12424,7 +12490,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);
@@ -12433,13 +12499,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
     ),
@@ -12449,7 +12518,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({
@@ -12457,12 +12531,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,
@@ -12475,22 +12551,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);
@@ -12499,9 +12609,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,
@@ -12544,9 +12677,12 @@ 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 clamp2(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
 function nearestIndex(centers, position) {
   let bestIndex = 0;
   let bestDistance = Number.POSITIVE_INFINITY;
@@ -12577,21 +12713,21 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
   const t = useSmartTranslations("UEditor");
   const editorDocument = editor.view.dom.ownerDocument;
   const editorWindow = editorDocument.defaultView;
-  const [layout, setLayout] = React10.useState(null);
-  const [dragPreview, setDragPreview] = React10.useState(null);
-  const [tableResizeActive, setTableResizeActive] = React10.useState(false);
-  const [hoverState, setHoverState] = React10.useState(DEFAULT_TABLE_HOVER_STATE);
-  const [openMenuKey, setOpenMenuKey] = React10.useState(null);
-  const layoutRef = React10.useRef(null);
-  const dragStateRef = React10.useRef(null);
-  const syncFrameRef = React10.useRef(null);
-  const layoutRefreshFrameRef = React10.useRef(null);
-  const tableResizeFrameRef = React10.useRef(null);
-  const tableResizePreviewFrameRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const [layout, setLayout] = React11.useState(null);
+  const [dragPreview, setDragPreview] = React11.useState(null);
+  const [tableResizeActive, setTableResizeActive] = React11.useState(false);
+  const [hoverState, setHoverState] = React11.useState(DEFAULT_TABLE_HOVER_STATE);
+  const [openMenuKey, setOpenMenuKey] = React11.useState(null);
+  const layoutRef = React11.useRef(null);
+  const dragStateRef = React11.useRef(null);
+  const syncFrameRef = React11.useRef(null);
+  const layoutRefreshFrameRef = React11.useRef(null);
+  const tableResizeFrameRef = React11.useRef(null);
+  const tableResizePreviewFrameRef = React11.useRef(null);
+  React11.useEffect(() => {
     layoutRef.current = layout;
   }, [layout]);
-  const syncFromCell = React10.useCallback((cell) => {
+  const syncFromCell = React11.useCallback((cell) => {
     const surface = containerRef.current;
     if (!surface || !cell) {
       layoutRef.current = null;
@@ -12602,10 +12738,10 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     layoutRef.current = nextLayout;
     setLayout(nextLayout);
   }, [containerRef, editor]);
-  const syncFromSelection = React10.useCallback(() => {
+  const syncFromSelection = React11.useCallback(() => {
     syncFromCell(getSelectedCell(editor));
   }, [editor, syncFromCell]);
-  const scheduleSyncFromSelection = React10.useCallback(() => {
+  const scheduleSyncFromSelection = React11.useCallback(() => {
     if (syncFrameRef.current !== null) return;
     if (!editorWindow) return;
     syncFrameRef.current = editorWindow.requestAnimationFrame(() => {
@@ -12613,13 +12749,13 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       syncFromSelection();
     });
   }, [editorWindow, syncFromSelection]);
-  React10.useEffect(() => () => {
+  React11.useEffect(() => () => {
     if (syncFrameRef.current !== null) {
       editorWindow?.cancelAnimationFrame(syncFrameRef.current);
       syncFrameRef.current = null;
     }
   }, [editorWindow]);
-  const refreshCurrentLayout = React10.useCallback(() => {
+  const refreshCurrentLayout = React11.useCallback(() => {
     const currentLayout = layoutRef.current;
     if (!currentLayout) return;
     const surface = containerRef.current;
@@ -12634,7 +12770,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     layoutRef.current = nextLayout;
     setLayout(nextLayout);
   }, [containerRef, editor]);
-  const scheduleCurrentLayoutRefresh = React10.useCallback(() => {
+  const scheduleCurrentLayoutRefresh = React11.useCallback(() => {
     if (!layoutRef.current || layoutRefreshFrameRef.current !== null) return;
     if (!editorWindow) return;
     layoutRefreshFrameRef.current = editorWindow.requestAnimationFrame(() => {
@@ -12642,31 +12778,42 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       refreshCurrentLayout();
     });
   }, [editorWindow, refreshCurrentLayout]);
-  React10.useEffect(() => () => {
+  React11.useEffect(() => () => {
     if (layoutRefreshFrameRef.current !== null) {
       editorWindow?.cancelAnimationFrame(layoutRefreshFrameRef.current);
       layoutRefreshFrameRef.current = null;
     }
   }, [editorWindow]);
-  const updateTableResizePreview = React10.useCallback((dimensions) => {
+  const updateTableResizePreview = React11.useCallback((dimensions) => {
     const frame = tableResizeFrameRef.current;
     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}`;
+    if (dimensionsLabel && activeLayout) {
+      dimensionsLabel.textContent = formatTableResizeDimensionLabel({
+        width: dimensions.width,
+        height: dimensions.height,
+        widthBp: dimensions.widthBp,
+        widthMode: activeLayout.widthMode,
+        viewportWidth: activeLayout.viewportWidth
+      });
     }
   }, []);
-  const resetTableResizePreview = React10.useCallback(() => {
+  const resetTableResizePreview = React11.useCallback(() => {
     const activeLayout = layoutRef.current;
     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(() => {
+  const clearDrag = React11.useCallback(() => {
     const dragState = dragStateRef.current;
     if (dragState?.kind === "resize-table") {
       try {
@@ -12686,7 +12833,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     resetTableResizePreview();
     setDocumentCursor(editorDocument, "");
   }, [editorDocument, editorWindow, resetTableResizePreview]);
-  const updateHoverState = React10.useCallback((event) => {
+  const updateHoverState = React11.useCallback((event) => {
     const activeLayout = layoutRef.current;
     const surface = containerRef.current;
     if (!activeLayout || !surface || dragStateRef.current || event.buttons !== 0) {
@@ -12702,7 +12849,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       return areTableHoverStatesEqual(prev, nextState) ? prev : nextState;
     });
   }, [containerRef]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     const proseMirror = editor.view.dom;
     const surface = containerRef.current;
     if (!surface) return void 0;
@@ -12789,37 +12936,37 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       editor.off("update", scheduleCurrentLayoutRefresh);
     };
   }, [clearDrag, containerRef, editor, editorWindow, scheduleCurrentLayoutRefresh, scheduleSyncFromSelection, syncFromCell, syncFromSelection, updateHoverState]);
-  const runAtCellPos = React10.useCallback((cellPos, command, options) => {
+  const runAtCellPos = React11.useCallback((cellPos, command, options) => {
     const result = runTableCommandAtCellPos(editor, cellPos, command);
     if (options?.sync !== false) {
       scheduleSyncFromSelection();
     }
     return result;
   }, [editor, scheduleSyncFromSelection]);
-  const runAtActiveCell = React10.useCallback((command, options) => {
+  const runAtActiveCell = React11.useCallback((command, options) => {
     return runAtCellPos(layoutRef.current?.cellPos ?? null, command, options);
   }, [runAtCellPos]);
-  const duplicateRowAt = React10.useCallback((rowIndex, cellPos) => {
+  const duplicateRowAt = React11.useCallback((rowIndex, cellPos) => {
     const result = duplicateTableRowAt(editor, rowIndex, cellPos);
     scheduleSyncFromSelection();
     return result;
   }, [editor, scheduleSyncFromSelection]);
-  const clearRowAt = React10.useCallback((rowIndex, cellPos) => {
+  const clearRowAt = React11.useCallback((rowIndex, cellPos) => {
     const result = clearTableRowAt(editor, rowIndex, cellPos);
     scheduleSyncFromSelection();
     return result;
   }, [editor, scheduleSyncFromSelection]);
-  const duplicateColumnAt = React10.useCallback((columnIndex, cellPos) => {
+  const duplicateColumnAt = React11.useCallback((columnIndex, cellPos) => {
     const result = duplicateTableColumnAt(editor, columnIndex, cellPos);
     scheduleSyncFromSelection();
     return result;
   }, [editor, scheduleSyncFromSelection]);
-  const clearColumnAt = React10.useCallback((columnIndex, cellPos) => {
+  const clearColumnAt = React11.useCallback((columnIndex, cellPos) => {
     const result = clearTableColumnAt(editor, columnIndex, cellPos);
     scheduleSyncFromSelection();
     return result;
   }, [editor, scheduleSyncFromSelection]);
-  const expandTableBy = React10.useCallback((rows, cols) => {
+  const expandTableBy = React11.useCallback((rows, cols) => {
     const activeCellPos = layoutRef.current?.cellPos ?? editor.state.selection.from;
     const result = expandTableFromCell(editor, activeCellPos, rows, cols);
     scheduleSyncFromSelection();
@@ -12828,7 +12975,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 = React11.useCallback((event, edge) => {
     if (event.button !== 0 || dragStateRef.current) return;
     const activeLayout = layoutRef.current;
     if (!activeLayout) return;
@@ -12836,7 +12983,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       editor,
       activeLayout.cellPos,
       activeLayout.tableWidth,
-      activeLayout.tableHeight
+      activeLayout.tableHeight,
+      activeLayout.viewportWidth
     );
     if (!snapshot) return;
     event.preventDefault();
@@ -12858,25 +13006,89 @@ 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 startAddColumnDrag = React10.useCallback(() => {
+  const fitTableToEditorWidth = React11.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 resizeTableWithKeyboard = React11.useCallback((event, edge) => {
+    const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
+    const vertical = event.key === "ArrowUp" || event.key === "ArrowDown";
+    if (!horizontal && !vertical || edge !== "both" && !horizontal) 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 step = event.shiftKey ? 20 : 5;
+    const dimensions = resolveTableResizeDimensions({
+      deltaX: event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0,
+      deltaY: event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0,
+      edge,
+      lockAxis: false,
+      preserveRatio: false,
+      snapshot
+    });
+    if (applyTableSize(editor, snapshot, dimensions, { widthMode: snapshot.widthMode })) {
+      scheduleSyncFromSelection();
+    }
+  }, [editor, scheduleSyncFromSelection]);
+  const startAddColumnDrag = React11.useCallback((event) => {
+    if (event.button !== 0 || dragStateRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
     setOpenMenuKey(null);
     dragStateRef.current = { kind: "add-column", previewCols: 1 };
     setDragPreview({ kind: "add-column", previewCols: 1 });
     setDocumentCursor(editorDocument, "ew-resize");
   }, [editorDocument]);
-  const startAddRowDrag = React10.useCallback(() => {
+  const startAddRowDrag = React11.useCallback((event) => {
+    if (event.button !== 0 || dragStateRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
     setOpenMenuKey(null);
     dragStateRef.current = { kind: "add-row", previewRows: 1 };
     setDragPreview({ kind: "add-row", previewRows: 1 });
     setDocumentCursor(editorDocument, "ns-resize");
   }, [editorDocument]);
-  const startRowDrag = React10.useCallback((rowHandle) => {
+  const startRowDrag = React11.useCallback((event, rowHandle) => {
+    if (event.button !== 0 || dragStateRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
     setOpenMenuKey(null);
     dragStateRef.current = {
       kind: "row",
@@ -12893,7 +13105,10 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     });
     setDocumentCursor(editorDocument, "grabbing");
   }, [editorDocument]);
-  const startColumnDrag = React10.useCallback((columnHandle) => {
+  const startColumnDrag = React11.useCallback((event, columnHandle) => {
+    if (event.button !== 0 || dragStateRef.current) return;
+    event.preventDefault();
+    event.stopPropagation();
     setOpenMenuKey(null);
     dragStateRef.current = {
       kind: "column",
@@ -12910,9 +13125,62 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     });
     setDocumentCursor(editorDocument, "grabbing");
   }, [editorDocument]);
-  React10.useEffect(() => {
+  const moveRowWithKeyboard = React11.useCallback((rowHandle, direction) => {
+    const targetIndex = clamp2(rowHandle.index + direction, 0, (layoutRef.current?.rowHandles.length ?? 1) - 1);
+    if (targetIndex === rowHandle.index) return;
+    const tableInfo = findTableInfo(editor, rowHandle.cellPos);
+    moveTableRow({
+      from: rowHandle.index,
+      to: targetIndex,
+      pos: rowHandle.cellPos,
+      select: true
+    })(editor.state, (transaction) => {
+      const nextTable = tableInfo ? transaction.doc.nodeAt(tableInfo.pos) : null;
+      if (tableInfo && nextTable?.type.name === "table") {
+        const rewrittenTable = rewriteTableNodeFormulaReferencesForMove(nextTable, "row", rowHandle.index, targetIndex);
+        if (rewrittenTable !== nextTable) {
+          transaction.replaceWith(tableInfo.pos, tableInfo.pos + nextTable.nodeSize, rewrittenTable);
+        }
+      }
+      editor.view.dispatch(transaction);
+    });
+    scheduleSyncFromSelection();
+  }, [editor, scheduleSyncFromSelection]);
+  const moveColumnWithKeyboard = React11.useCallback((columnHandle, direction) => {
+    const targetIndex = clamp2(columnHandle.index + direction, 0, (layoutRef.current?.columnHandles.length ?? 1) - 1);
+    if (targetIndex === columnHandle.index) return;
+    const tableInfo = findTableInfo(editor, columnHandle.cellPos);
+    const responsiveRatios = tableInfo && normalizeTableWidthMode(tableInfo.node.attrs.widthMode) === "responsive" ? moveResponsiveColumnRatio(getTableColumnRatios(tableInfo.node), columnHandle.index, targetIndex) : null;
+    moveTableColumn({
+      from: columnHandle.index,
+      to: targetIndex,
+      pos: columnHandle.cellPos,
+      select: true
+    })(editor.state, (transaction) => {
+      if (tableInfo && responsiveRatios) {
+        const nextTable2 = transaction.doc.nodeAt(tableInfo.pos);
+        if (nextTable2?.type.name === "table") {
+          transaction.setNodeMarkup(tableInfo.pos, void 0, {
+            ...nextTable2.attrs,
+            widthMode: "responsive",
+            columnRatios: responsiveRatios
+          });
+        }
+      }
+      const nextTable = tableInfo ? transaction.doc.nodeAt(tableInfo.pos) : null;
+      if (tableInfo && nextTable?.type.name === "table") {
+        const rewrittenTable = rewriteTableNodeFormulaReferencesForMove(nextTable, "column", columnHandle.index, targetIndex);
+        if (rewrittenTable !== nextTable) {
+          transaction.replaceWith(tableInfo.pos, tableInfo.pos + nextTable.nodeSize, rewrittenTable);
+        }
+      }
+      editor.view.dispatch(transaction);
+    });
+    scheduleSyncFromSelection();
+  }, [editor, scheduleSyncFromSelection]);
+  React11.useEffect(() => {
     if (!editorWindow) return;
-    const handleMouseMove2 = (event) => {
+    const handlePointerMove = (event) => {
       const dragState = dragStateRef.current;
       const activeLayout = layoutRef.current;
       const surface = containerRef.current;
@@ -12965,25 +13233,70 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       setDragPreview({ kind: "add-row", previewRows });
       setDocumentCursor(editorDocument, "ns-resize");
     };
-    const handleMouseUp = () => {
+    const handlePointerUp = () => {
       const dragState = dragStateRef.current;
       if (!dragState || dragState.kind === "resize-table") return;
       if (dragState.kind === "row" && dragState.originIndex !== dragState.targetIndex) {
+        const tableInfo = findTableInfo(editor, dragState.anchorPos);
         moveTableRow({
           from: dragState.originIndex,
           to: dragState.targetIndex,
           pos: dragState.anchorPos,
           select: true
-        })(editor.state, editor.view.dispatch);
+        })(editor.state, (transaction) => {
+          const nextTable = tableInfo ? transaction.doc.nodeAt(tableInfo.pos) : null;
+          if (tableInfo && nextTable?.type.name === "table") {
+            const rewrittenTable = rewriteTableNodeFormulaReferencesForMove(
+              nextTable,
+              "row",
+              dragState.originIndex,
+              dragState.targetIndex
+            );
+            if (rewrittenTable !== nextTable) {
+              transaction.replaceWith(tableInfo.pos, tableInfo.pos + nextTable.nodeSize, rewrittenTable);
+            }
+          }
+          editor.view.dispatch(transaction);
+        });
         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 nextTable2 = transaction.doc.nodeAt(tableInfo.pos);
+            if (nextTable2?.type.name === "table") {
+              transaction.setNodeMarkup(tableInfo.pos, void 0, {
+                ...nextTable2.attrs,
+                widthMode: "responsive",
+                columnRatios: responsiveRatios
+              });
+            }
+          }
+          const nextTable = tableInfo ? transaction.doc.nodeAt(tableInfo.pos) : null;
+          if (tableInfo && nextTable?.type.name === "table") {
+            const rewrittenTable = rewriteTableNodeFormulaReferencesForMove(
+              nextTable,
+              "column",
+              dragState.originIndex,
+              dragState.targetIndex
+            );
+            if (rewrittenTable !== nextTable) {
+              transaction.replaceWith(tableInfo.pos, tableInfo.pos + nextTable.nodeSize, rewrittenTable);
+            }
+          }
+          editor.view.dispatch(transaction);
+        });
         scheduleSyncFromSelection();
       }
       if (dragState.kind === "add-row") {
@@ -12994,20 +13307,23 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       }
       clearDrag();
     };
-    const unsubscribeMouseMove = subscribeSharedGlobalEvent(
+    const unsubscribePointerMove = subscribeSharedGlobalEvent(
       editorWindow,
-      "mousemove",
-      handleMouseMove2
+      "pointermove",
+      handlePointerMove,
+      { passive: false }
     );
-    const unsubscribeMouseUp = subscribeSharedGlobalEvent(editorWindow, "mouseup", handleMouseUp);
+    const unsubscribePointerUp = subscribeSharedGlobalEvent(editorWindow, "pointerup", handlePointerUp);
+    const unsubscribePointerCancel = subscribeSharedGlobalEvent(editorWindow, "pointercancel", clearDrag);
     const unsubscribeBlur = subscribeSharedGlobalEvent(editorWindow, "blur", clearDrag);
     return () => {
-      unsubscribeMouseMove();
-      unsubscribeMouseUp();
+      unsubscribePointerMove();
+      unsubscribePointerUp();
+      unsubscribePointerCancel();
       unsubscribeBlur();
     };
   }, [clearDrag, containerRef, editor, editorDocument, editorWindow, expandTableBy, scheduleSyncFromSelection]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!editorWindow) return;
     const handlePointerMove = (event) => {
       const dragState = dragStateRef.current;
@@ -13017,6 +13333,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) {
@@ -13028,7 +13345,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) => {
@@ -13039,7 +13356,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();
@@ -13072,7 +13394,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       }
     };
   }, [clearDrag, editor, editorDocument, editorWindow, scheduleSyncFromSelection, updateTableResizePreview]);
-  const openCellInspector = React10.useCallback(() => {
+  const openCellInspector = React11.useCallback(() => {
     const cellPos = layoutRef.current?.cellPos;
     if (!showCellInspector || cellPos == null) return;
     const didSelect = editor.commands.setCellSelection({
@@ -13084,7 +13406,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       if (!editor.isDestroyed) editor.view.focus();
     });
   }, [editor, editorWindow, showCellInspector]);
-  const menuItems = React10.useMemo(() => {
+  const menuItems = React11.useMemo(() => {
     if (!layout) return [];
     return [
       ...showCellInspector ? [{
@@ -13157,7 +13479,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       }
     ];
   }, [editor, layout, openCellInspector, runAtActiveCell, showCellInspector, t]);
-  const getRowHandleMenuItems = React10.useCallback((rowHandle) => [
+  const getRowHandleMenuItems = React11.useCallback((rowHandle) => [
     {
       label: t("tableMenu.addRowBefore"),
       icon: ArrowUp,
@@ -13185,7 +13507,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
       destructive: true
     }
   ], [clearRowAt, duplicateRowAt, runAtCellPos, t]);
-  const getColumnHandleMenuItems = React10.useCallback((columnHandle) => [
+  const getColumnHandleMenuItems = React11.useCallback((columnHandle) => [
     {
       label: t("tableMenu.addColumnBefore"),
       icon: ArrowLeft,
@@ -13220,7 +13542,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,
       {
@@ -13231,6 +13553,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         onOpenMenuChange: (menuKey, open) => {
           setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
         },
+        onMove: moveRowWithKeyboard,
         onStartDrag: startRowDrag,
         openMenuKey,
         rowDragLabel: t("tableMenu.dragRow"),
@@ -13251,6 +13574,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         onOpenMenuChange: (menuKey, open) => {
           setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
         },
+        onMove: moveColumnWithKeyboard,
         onStartDrag: startColumnDrag,
         openMenuKey
       }
@@ -13277,6 +13601,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         ctrlHint: t("tableMenu.resizeCtrlHint"),
         frameRef: tableResizeFrameRef,
         layout,
+        onFitWidth: fitTableToEditorWidth,
+        onKeyboardResize: resizeTableWithKeyboard,
         onStartResize: startTableResize,
         resizeBothLabel: t("tableMenu.resizeBoth")
       }
@@ -13291,6 +13617,8 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
         layout,
         onStartAddColumn: startAddColumnDrag,
         onStartAddRow: startAddRowDrag,
+        onAddColumn: () => expandTableBy(0, 1),
+        onAddRow: () => expandTableBy(1, 0),
         quickAddColumnLabel: t("tableMenu.quickAddColumnAfter"),
         quickAddRowLabel: t("tableMenu.quickAddRowAfter")
       }
@@ -13308,10 +13636,10 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
 }
 
 // src/components/UEditor/use-table-interactions.ts
-import React12, { useEffect as useEffect6, useRef as useRef6 } from "react";
+import React13, { useEffect as useEffect6, useRef as useRef6 } from "react";
 
 // src/components/UEditor/use-table-row-resize.ts
-import React11, { useRef as useRef5 } from "react";
+import React12, { useRef as useRef5 } from "react";
 function setRowResizeBodyState(ownerDocument, active) {
   ownerDocument.body.style.userSelect = active ? "none" : "";
   ownerDocument.body.style.cursor = active ? "row-resize" : "";
@@ -13325,15 +13653,15 @@ function useTableRowResize({
   scheduleTableLayoutSync
 }) {
   const stateRef = useRef5(null);
-  const syncActiveGuide = React11.useCallback(() => {
+  const syncActiveGuide = React12.useCallback(() => {
     const state = stateRef.current;
     if (!state) return false;
     setHoveredTableCell(state.cellElement);
     showRowGuide(state.tableElement, state.rowElement, state.cellElement, state.pendingHeight);
     return true;
   }, [setHoveredTableCell, showRowGuide]);
-  const isResizing = React11.useCallback(() => stateRef.current !== null, []);
-  const beginResize = React11.useCallback((event, table, row, cell) => {
+  const isResizing = React12.useCallback(() => stateRef.current !== null, []);
+  const beginResize = React12.useCallback((event, table, row, cell) => {
     if (!editor || !isRowResizeHotspot(cell, event.clientX, event.clientY)) {
       return false;
     }
@@ -13362,7 +13690,7 @@ function useTableRowResize({
     event.stopPropagation();
     return true;
   }, [editor, setHoveredTableCell, showRowGuide]);
-  const handlePointerMove = React11.useCallback((event) => {
+  const handlePointerMove = React12.useCallback((event) => {
     const state = stateRef.current;
     if (!state) return;
     const nextHeight = Math.max(
@@ -13379,7 +13707,7 @@ function useTableRowResize({
     setRowResizeBodyState(state.rowElement.ownerDocument, true);
     showRowGuide(state.tableElement, state.rowElement, state.cellElement, nextHeight);
   }, [showRowGuide]);
-  const handlePointerUp = React11.useCallback((event) => {
+  const handlePointerUp = React12.useCallback((event) => {
     if (!editor) return;
     const state = stateRef.current;
     if (!state) return;
@@ -13404,7 +13732,7 @@ function useTableRowResize({
     clearAllTableResizeHover();
     scheduleTableLayoutSync();
   }, [clearAllTableResizeHover, clearHoveredTableCell, editor, scheduleTableLayoutSync]);
-  const cancelResize = React11.useCallback(() => {
+  const cancelResize = React12.useCallback(() => {
     const state = stateRef.current;
     if (!state) return;
     stateRef.current = null;
@@ -13414,7 +13742,7 @@ function useTableRowResize({
     clearAllTableResizeHover();
     scheduleTableLayoutSync();
   }, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
-  const cleanup = React11.useCallback(() => {
+  const cleanup = React12.useCallback(() => {
     const editorDocument = stateRef.current?.rowElement.ownerDocument ?? editor?.view.dom.ownerDocument;
     stateRef.current = null;
     isRowResizingGlobal.active = false;
@@ -13443,16 +13771,16 @@ function useUEditorTableInteractions(editor, editable = true) {
   const activeTableCellRef = useRef6(null);
   const suppressActiveCellHighlightRef = useRef6(false);
   const tableLayoutSyncFrameRef = useRef6(null);
-  const getProseMirrorElement = React12.useCallback(() => {
+  const getProseMirrorElement = React13.useCallback(() => {
     return editorContentRef.current?.querySelector(".ProseMirror");
   }, []);
-  const setEditorResizeCursor = React12.useCallback((cursor) => {
+  const setEditorResizeCursor = React13.useCallback((cursor) => {
     const proseMirror = getProseMirrorElement();
     if (proseMirror) {
       proseMirror.style.cursor = cursor;
     }
   }, [getProseMirrorElement]);
-  const hideColumnGuide = React12.useCallback(() => {
+  const hideColumnGuide = React13.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-cursor");
     getProseMirrorElement()?.classList.remove("resize-cursor");
     const guide = tableColumnGuideRef.current;
@@ -13460,7 +13788,7 @@ function useUEditorTableInteractions(editor, editable = true) {
       guide.style.opacity = "0";
     }
   }, [getProseMirrorElement]);
-  const hideRowGuide = React12.useCallback(() => {
+  const hideRowGuide = React13.useCallback(() => {
     editorContentRef.current?.classList.remove("resize-row-cursor");
     getProseMirrorElement()?.classList.remove("resize-row-cursor");
     const guide = tableRowGuideRef.current;
@@ -13470,21 +13798,21 @@ function useUEditorTableInteractions(editor, editable = true) {
   }, [getProseMirrorElement]);
   const hotspotTimerRef = useRef6(null);
   const activeHotspotKeyRef = useRef6(null);
-  const clearHotspotTimer = React12.useCallback(() => {
+  const clearHotspotTimer = React13.useCallback(() => {
     if (hotspotTimerRef.current !== null) {
       const realm = editorContentRef.current?.ownerDocument.defaultView;
       realm?.clearTimeout(hotspotTimerRef.current);
       hotspotTimerRef.current = null;
     }
   }, []);
-  const clearAllTableResizeHover = React12.useCallback(() => {
+  const clearAllTableResizeHover = React13.useCallback(() => {
     clearHotspotTimer();
     activeHotspotKeyRef.current = null;
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
   }, [clearHotspotTimer, hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
-  const updateActiveCellHighlight = React12.useCallback((cell) => {
+  const updateActiveCellHighlight = React13.useCallback((cell) => {
     const surface = editorContentRef.current;
     const highlight = activeTableCellHighlightRef.current;
     if (!highlight) return;
@@ -13499,7 +13827,7 @@ function useUEditorTableInteractions(editor, editable = true) {
     highlight.style.width = `${metrics.width}px`;
     highlight.style.height = `${metrics.height}px`;
   }, []);
-  const scheduleTableLayoutSync = React12.useCallback(() => {
+  const scheduleTableLayoutSync = React13.useCallback(() => {
     if (!activeTableCellRef.current || tableLayoutSyncFrameRef.current !== null) return;
     const realm = editorContentRef.current?.ownerDocument.defaultView;
     if (!realm) return;
@@ -13511,7 +13839,7 @@ function useUEditorTableInteractions(editor, editable = true) {
       editorContentRef.current?.dispatchEvent(new realm.CustomEvent(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT));
     });
   }, [updateActiveCellHighlight]);
-  const setActiveTableCell = React12.useCallback((cell) => {
+  const setActiveTableCell = React13.useCallback((cell) => {
     if (activeTableCellRef.current === cell) {
       updateActiveCellHighlight(cell);
       return;
@@ -13519,17 +13847,17 @@ function useUEditorTableInteractions(editor, editable = true) {
     activeTableCellRef.current = cell;
     updateActiveCellHighlight(activeTableCellRef.current);
   }, [updateActiveCellHighlight]);
-  const clearActiveTableCell = React12.useCallback(() => {
+  const clearActiveTableCell = React13.useCallback(() => {
     activeTableCellRef.current = null;
     updateActiveCellHighlight(null);
   }, [updateActiveCellHighlight]);
-  const setHoveredTableCell = React12.useCallback((cell) => {
+  const setHoveredTableCell = React13.useCallback((cell) => {
     hoveredTableCellRef.current = cell;
   }, []);
-  const clearHoveredTableCell = React12.useCallback(() => {
+  const clearHoveredTableCell = React13.useCallback(() => {
     hoveredTableCellRef.current = null;
   }, []);
-  const showColumnGuide = React12.useCallback((table, row, cell) => {
+  const showColumnGuide = React13.useCallback((table, row, cell) => {
     const surface = editorContentRef.current;
     const guide = tableColumnGuideRef.current;
     if (!surface || !guide) return;
@@ -13543,7 +13871,7 @@ function useUEditorTableInteractions(editor, editable = true) {
     getProseMirrorElement()?.classList.add("resize-cursor");
     setEditorResizeCursor("col-resize");
   }, [getProseMirrorElement, setEditorResizeCursor]);
-  const showRowGuide = React12.useCallback((table, row, cell, previewHeight) => {
+  const showRowGuide = React13.useCallback((table, row, cell, previewHeight) => {
     const surface = editorContentRef.current;
     const guide = tableRowGuideRef.current;
     if (!surface || !guide) return;
@@ -13575,7 +13903,7 @@ function useUEditorTableInteractions(editor, editable = true) {
     clearAllTableResizeHover,
     scheduleTableLayoutSync
   });
-  const syncActiveTableCellFromSelection = React12.useCallback(() => {
+  const syncActiveTableCellFromSelection = React13.useCallback(() => {
     if (!editor) return;
     if (!editor.isFocused) {
       clearActiveTableCell();
@@ -13830,7 +14158,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();
@@ -13908,7 +14236,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;
@@ -13916,7 +14244,7 @@ function cancelFormulaEditing(view) {
 function getReferenceInsertionPrefix(view, cellContentStart, insertionPos) {
   const textBeforeCursor = view.state.doc.textBetween(cellContentStart, insertionPos, "", "");
   const isInsideFunctionArguments = /[A-Z]+\([^)]*$/i.test(textBeforeCursor);
-  const followsReference = /[A-Z]+[1-9]\d*(?::[A-Z]+[1-9]\d*)?\s*$/i.test(textBeforeCursor);
+  const followsReference = /\$?[A-Z]+\$?[1-9]\d*(?::\$?[A-Z]+\$?[1-9]\d*)?\s*$/i.test(textBeforeCursor);
   return isInsideFunctionArguments && followsReference ? "," : "";
 }
 function findTableForPos(view, pos) {
@@ -13985,7 +14313,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,
@@ -14022,7 +14350,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();
@@ -14467,7 +14795,7 @@ function TableFormulaBar({ editor }) {
 }
 
 // src/components/UEditor/use-editor-output.ts
-import * as React14 from "react";
+import * as React15 from "react";
 function normalizeDebounceMs(value) {
   return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
 }
@@ -14477,18 +14805,18 @@ function useUEditorOutput({
   onJsonChange,
   outputDebounceMs
 }) {
-  const callbacksRef = React14.useRef({
+  const callbacksRef = React15.useRef({
     onChange,
     onHtmlChange,
     onJsonChange
   });
-  const pendingEditorRef = React14.useRef(null);
-  const timeoutRef = React14.useRef(null);
+  const pendingEditorRef = React15.useRef(null);
+  const timeoutRef = React15.useRef(null);
   const debounceMs = normalizeDebounceMs(outputDebounceMs);
-  React14.useLayoutEffect(() => {
+  React15.useLayoutEffect(() => {
     callbacksRef.current = { onChange, onHtmlChange, onJsonChange };
   }, [onChange, onHtmlChange, onJsonChange]);
-  const flushOutputUpdates = React14.useCallback(() => {
+  const flushOutputUpdates = React15.useCallback(() => {
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -14506,7 +14834,7 @@ function useUEditorOutput({
       callbacks.onJsonChange(editor.getJSON());
     }
   }, []);
-  const scheduleOutputUpdate = React14.useCallback((editor) => {
+  const scheduleOutputUpdate = React15.useCallback((editor) => {
     const callbacks = callbacksRef.current;
     if (!callbacks.onChange && !callbacks.onHtmlChange && !callbacks.onJsonChange) return;
     pendingEditorRef.current = editor;
@@ -14520,32 +14848,98 @@ function useUEditorOutput({
     }
     timeoutRef.current = setTimeout(flushOutputUpdates, debounceMs);
   }, [debounceMs, flushOutputUpdates]);
-  React14.useEffect(() => {
+  React15.useEffect(() => {
     if (!pendingEditorRef.current || timeoutRef.current === null) return;
     clearTimeout(timeoutRef.current);
     timeoutRef.current = debounceMs === 0 ? null : setTimeout(flushOutputUpdates, debounceMs);
     if (debounceMs === 0) flushOutputUpdates();
   }, [debounceMs, flushOutputUpdates]);
-  React14.useEffect(() => () => {
+  React15.useEffect(() => () => {
+    flushOutputUpdates();
     if (timeoutRef.current !== null) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
     }
     pendingEditorRef.current = null;
-  }, []);
+  }, [flushOutputUpdates]);
   return {
     flushOutputUpdates,
     scheduleOutputUpdate
   };
 }
 
+// src/components/UEditor/use-wide-table-layout.ts
+import React16 from "react";
+function useWideTableLayout(editor, enabled, widthBoundaryRef, editorShellRef, editorSurfaceRef) {
+  React16.useLayoutEffect(() => {
+    const boundary = widthBoundaryRef.current;
+    const shell = editorShellRef.current;
+    const surface = editorSurfaceRef.current;
+    if (!editor || !boundary || !shell || !surface) return;
+    const editorDocument = editor.view.dom.ownerDocument;
+    const editorWindow = editorDocument.defaultView;
+    if (!editorWindow) return;
+    const editorDom = editor.view.dom;
+    let frame = 0;
+    const resetWidths = () => {
+      shell.style.removeProperty("width");
+      editorDom.style.removeProperty("width");
+    };
+    const sync = () => {
+      frame = 0;
+      resetWidths();
+      if (!enabled || editor.isDestroyed) return;
+      const boundaryWidth = boundary.getBoundingClientRect().width || boundary.clientWidth;
+      const surfaceWidth = surface.getBoundingClientRect().width || surface.clientWidth;
+      if (boundaryWidth <= 0 || surfaceWidth <= 0) return;
+      editorDom.style.width = `${surfaceWidth}px`;
+      const shellRect = shell.getBoundingClientRect();
+      let requiredWidth = boundaryWidth;
+      editorDom.querySelectorAll("table").forEach((table) => {
+        const tableRect = table.getBoundingClientRect();
+        if (tableRect.width > 0) {
+          requiredWidth = Math.max(requiredWidth, tableRect.right - shellRect.left + 32);
+          return;
+        }
+        const widthBp = Number(table.getAttribute("data-table-width-bp"));
+        if (Number.isFinite(widthBp) && widthBp > 1e4) {
+          requiredWidth = Math.max(requiredWidth, surfaceWidth * widthBp / 1e4 + 32);
+        }
+      });
+      if (requiredWidth <= boundaryWidth + 1) {
+        editorDom.style.removeProperty("width");
+        return;
+      }
+      shell.style.width = `${Math.ceil(requiredWidth)}px`;
+    };
+    const schedule = () => {
+      if (frame) editorWindow.cancelAnimationFrame(frame);
+      frame = editorWindow.requestAnimationFrame(sync);
+    };
+    const resizeObserver = typeof editorWindow.ResizeObserver === "function" ? new editorWindow.ResizeObserver(schedule) : null;
+    resizeObserver?.observe(boundary);
+    editor.on("transaction", schedule);
+    surface.addEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, schedule);
+    editorWindow.addEventListener("resize", schedule);
+    schedule();
+    return () => {
+      if (frame) editorWindow.cancelAnimationFrame(frame);
+      resizeObserver?.disconnect();
+      editor.off("transaction", schedule);
+      surface.removeEventListener(UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, schedule);
+      editorWindow.removeEventListener("resize", schedule);
+      resetWidths();
+    };
+  }, [editor, editorShellRef, editorSurfaceRef, enabled, widthBoundaryRef]);
+}
+
 // 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-CFIWMBAA.js");
+var LazyMenuBar = React17.lazy(async () => {
+  const { MenuBar } = await import("./menu-bar-DPCNNUX5.js");
   return { default: MenuBar };
 });
-var UEditor = React15.forwardRef(({
+var UEditor = React17.forwardRef(({
   getPortalContainer,
   content = "",
   onChange,
@@ -14559,7 +14953,11 @@ var UEditor = React15.forwardRef(({
   maxImageFileSize,
   allowedImageMimeTypes,
   fallbackToDataUrl,
+  onImageUploadError,
   placeholder,
+  ariaLabel,
+  ariaLabelledBy,
+  ariaDescribedBy,
   className,
   editable = true,
   autofocus = false,
@@ -14571,6 +14969,7 @@ var UEditor = React15.forwardRef(({
   maxCharacters,
   minHeight = "200px",
   maxHeight = "auto",
+  expandWideTables = true,
   variant = "default",
   rounded = true,
   fontFamilies,
@@ -14598,8 +14997,10 @@ var UEditor = React15.forwardRef(({
   const editorInstanceRef = useRef10(null);
   const formulaRangePickRef = useRef10(null);
   const formulaRangeSurfaceRef = useRef10(null);
-  const [formulaRangeHighlight, setFormulaRangeHighlight] = React15.useState(null);
-  const [isMenuBarVisible, setIsMenuBarVisible] = React15.useState(showMenuBar);
+  const [formulaRangeHighlight, setFormulaRangeHighlight] = React17.useState(null);
+  const [isMenuBarVisible, setIsMenuBarVisible] = React17.useState(showMenuBar);
+  const widthBoundaryRef = useRef10(null);
+  const editorShellRef = useRef10(null);
   useEffect10(() => {
     setIsMenuBarVisible(showMenuBar);
   }, [showMenuBar]);
@@ -14609,7 +15010,7 @@ var UEditor = React15.forwardRef(({
     onJsonChange,
     outputDebounceMs
   });
-  const scheduleFormulaRecalculate = React15.useCallback((editor2, options) => {
+  const scheduleFormulaRecalculate = React17.useCallback((editor2, options) => {
     if (editor2.isDestroyed || scheduledFormulaRecalculateRef.current) return;
     if (!options?.force && isEditingTableFormulaText(editor2)) return;
     scheduledFormulaRecalculateRef.current = true;
@@ -14643,14 +15044,15 @@ var UEditor = React15.forwardRef(({
         maxImageFileSize,
         allowedImageMimeTypes,
         fallbackToDataUrl,
+        onImageUploadError,
         editable,
         fetchMetadata
       }),
       ...extraExtensions ?? []
     ],
-    [getPortalContainer, effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, editable, fetchMetadata, extraExtensions]
+    [getPortalContainer, effectivePlaceholder, t, maxCharacters, uploadImage, resolvedUploadFile, imageInsertMode, maxImageFileSize, allowedImageMimeTypes, fallbackToDataUrl, onImageUploadError, editable, fetchMetadata, extraExtensions]
   );
-  const syncFormulaRangeHighlight = React15.useCallback((pickState) => {
+  const syncFormulaRangeHighlight = React17.useCallback((pickState) => {
     const container = formulaRangeSurfaceRef.current;
     setFormulaRangeHighlight(container && pickState ? getFormulaRangePickHighlight(container, pickState) : null);
   }, []);
@@ -14722,9 +15124,6 @@ var UEditor = React15.forwardRef(({
             clearSelectedTableCellFormula(activeEditor);
             return true;
           }
-          if (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "ArrowDown") {
-            event.stopPropagation();
-          }
           return false;
         },
         click: (view, event) => {
@@ -14744,7 +15143,11 @@ var UEditor = React15.forwardRef(({
         }
       },
       attributes: {
-        class: UEDITOR_PROSEMIRROR_CLASS_NAME
+        class: UEDITOR_PROSEMIRROR_CLASS_NAME,
+        role: editable ? "textbox" : "document",
+        ...editable ? { "aria-multiline": "true" } : { "aria-readonly": "true" },
+        ...ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : { "aria-label": ariaLabel ?? t("accessibility.editorLabel") },
+        ...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : null
       }
     },
     onUpdate: ({ editor: editor2, transaction, appendedTransactions }) => {
@@ -14790,23 +15193,28 @@ var UEditor = React15.forwardRef(({
     apply: t("tableMenu.apply"),
     cancel: t("imageInput.cancelBtn")
   });
+  useWideTableLayout(editor, expandWideTables, widthBoundaryRef, editorShellRef, editorContentRef);
   useImperativeHandle4(
     ref,
     () => ({
       editor,
       prepareContentForSave: async ({ throwOnError = false } = {}) => {
-        if (!inFlightPrepareRef.current) {
-          const htmlSnapshot = editor?.getHTML() ?? content ?? "";
-          inFlightPrepareRef.current = prepareUEditorContentForSave({
+        const htmlSnapshot = editor?.getHTML() ?? content ?? "";
+        if (!inFlightPrepareRef.current || inFlightPrepareRef.current.html !== htmlSnapshot) {
+          let trackedPromise;
+          trackedPromise = prepareUEditorContentForSave({
             html: htmlSnapshot,
             uploadImageForSave,
             uploadFileForSave,
             uploadConcurrency: uploadImageConcurrency
           }).finally(() => {
-            inFlightPrepareRef.current = null;
+            if (inFlightPrepareRef.current?.promise === trackedPromise) {
+              inFlightPrepareRef.current = null;
+            }
           });
+          inFlightPrepareRef.current = { html: htmlSnapshot, promise: trackedPromise };
         }
-        const result = await inFlightPrepareRef.current;
+        const result = await inFlightPrepareRef.current.promise;
         if (throwOnError && result.errors.length > 0) {
           throw new UEditorPrepareContentForSaveError(result);
         }
@@ -14845,15 +15253,18 @@ var UEditor = React15.forwardRef(({
     return /* @__PURE__ */ jsx20(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ jsx20(
       "div",
       {
+        role: "status",
+        "aria-live": "polite",
         className: cn("w-full border bg-background flex items-center justify-center text-muted-foreground", className),
         style: { minHeight },
         children: t("loading")
       }
     ) });
   }
-  return /* @__PURE__ */ jsx20(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsx20(UEditorPortalProvider, { getPortalContainer, children: /* @__PURE__ */ jsx20("div", { ref: widthBoundaryRef, "data-ueditor-width-boundary": "", className: "w-full", children: /* @__PURE__ */ jsxs17(
     "div",
     {
+      ref: editorShellRef,
       className: cn(
         "group relative flex flex-col text-card-foreground",
         editable ? [
@@ -14868,7 +15279,7 @@ var UEditor = React15.forwardRef(({
       ),
       children: [
         editable && (showMenuBar || showToolbar || showBubbleMenu) ? /* @__PURE__ */ jsxs17(EditorUiRenderStateProvider, { editor, children: [
-          isMenuBarVisible && /* @__PURE__ */ jsx20(React15.Suspense, { fallback: null, children: /* @__PURE__ */ jsx20(
+          isMenuBarVisible && /* @__PURE__ */ jsx20(React17.Suspense, { fallback: null, children: /* @__PURE__ */ jsx20(
             LazyMenuBar,
             {
               editor,
@@ -14877,6 +15288,8 @@ var UEditor = React15.forwardRef(({
               imageInsertMode,
               maxImageFileSize,
               allowedImageMimeTypes,
+              onImageUploadError,
+              fallbackToDataUrl,
               onSave,
               onExport,
               onSourceCode,
@@ -14895,6 +15308,8 @@ var UEditor = React15.forwardRef(({
               imageInsertMode,
               maxImageFileSize,
               allowedImageMimeTypes,
+              onImageUploadError,
+              fallbackToDataUrl,
               fontFamilies,
               defaultFontFamily,
               fontSizes,
@@ -14920,7 +15335,10 @@ var UEditor = React15.forwardRef(({
               editorContentRef.current = node;
               formulaRangeSurfaceRef.current = node;
             },
-            className: "relative flex-1 overflow-y-auto",
+            className: cn(
+              "relative flex-1 overflow-y-auto",
+              expandWideTables && "[&_.tableWrapper]:!overflow-visible [&_.tableWrapper]:!pb-0"
+            ),
             style: {
               fontFamily: defaultFontFamily,
               minHeight: editable ? minHeight : void 0,
@@ -14999,7 +15417,7 @@ var UEditor = React15.forwardRef(({
         showFooter && showCharacterCount && /* @__PURE__ */ jsx20(CharacterCountDisplay, { editor, maxCharacters })
       ]
     }
-  ) });
+  ) }) });
 });
 UEditor.displayName = "UEditor";
 var UEditor_default = UEditor;
@@ -15011,4 +15429,4 @@ export {
   prepareUEditorContentForSave,
   UEditor_default
 };
-//# sourceMappingURL=chunk-QYFXYDBK.js.map
+//# sourceMappingURL=chunk-57BKIC6J.js.map