@underverse-ui/underverse 1.0.72 → 1.0.74

package/dist/index.cjs

@@ -20506,46 +20506,52 @@ function DataTableHeader({
       const titleContent = /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cn("font-medium whitespace-nowrap select-text", headerTitleClass), children: col.title }),
         col.sortable && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-          "button",
+          Tooltip,
           {
-            className: cn(
-              "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
-              sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
-            ),
-            onClick: () => {
-              setCurPage(1);
-              setSort((current) => {
-                if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
-                if (current.order === "asc") return { key: col.key, order: "desc" };
-                return null;
-              });
-            },
-            "aria-label": "Sort",
-            title: `Sort by ${String(col.title)}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "path",
-                {
-                  d: "M7 8l3-3 3 3",
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                "path",
-                {
-                  d: "M7 12l3 3 3-3",
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  strokeLinecap: "round",
-                  strokeLinejoin: "round",
-                  opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
-                }
-              )
-            ] })
+            placement: "top",
+            content: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-xs font-medium", children: `Sort by ${String(col.title)}` }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+              "button",
+              {
+                className: cn(
+                  "p-1 rounded-lg transition-all duration-200 hover:bg-accent",
+                  sort?.key === col.key ? "opacity-100 bg-accent" : "opacity-60 hover:opacity-100"
+                ),
+                onClick: () => {
+                  setCurPage(1);
+                  setSort((current) => {
+                    if (!current || current.key !== col.key) return { key: col.key, order: "asc" };
+                    if (current.order === "asc") return { key: col.key, order: "desc" };
+                    return null;
+                  });
+                },
+                "aria-label": "Sort",
+                children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("svg", { viewBox: "0 0 20 20", fill: "none", className: cn("inline-block", sortIconClass), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "path",
+                    {
+                      d: "M7 8l3-3 3 3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      opacity: sort?.key === col.key && sort.order === "asc" ? 1 : 0.4
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                    "path",
+                    {
+                      d: "M7 12l3 3 3-3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      opacity: sort?.key === col.key && sort.order === "desc" ? 1 : 0.4
+                    }
+                  )
+                ] })
+              }
+            )
           }
         )
       ] });
@@ -20553,18 +20559,24 @@ function DataTableHeader({
         Popover,
         {
           placement: "bottom-start",
-          trigger: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-            "button",
+          trigger: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            Tooltip,
             {
-              className: cn(
-                "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
-                filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
-              ),
-              "aria-label": "Filter",
-              title: `Filter by ${String(col.title)}`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react35.Filter, { className: "w-4 h-4" })
+              placement: "top",
+              content: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "text-xs font-medium", children: `Filter by ${String(col.title)}` }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+                "button",
+                {
+                  className: cn(
+                    "p-1.5 rounded-lg transition-all duration-200 hover:bg-accent",
+                    filters[col.key] ? "bg-accent text-primary" : "text-muted-foreground"
+                  ),
+                  "aria-label": "Filter",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react35.Filter, { className: "w-4 h-4" })
+                }
+              )
             }
-          ),
+          ) }),
           children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "p-3 w-64 space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "text-sm font-medium", children: col.title }),
@@ -22632,16 +22644,22 @@ var EmojiList = (0, import_react44.forwardRef)((props, ref) => {
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "p-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "grid grid-cols-8 gap-1", children: props.items.slice(0, 64).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-        "button",
+        Tooltip,
         {
-          type: "button",
-          onClick: () => props.command(item),
-          className: cn(
-            "w-9 h-9 flex items-center justify-center rounded-lg text-xl transition-colors",
-            selectedIndex === index ? "bg-primary/10 ring-2 ring-primary/30" : "hover:bg-accent"
-          ),
-          title: item.name.replace(/_/g, " "),
-          children: item.emoji
+          placement: "top",
+          content: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "text-xs font-medium", children: item.name.replace(/_/g, " ") }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => props.command(item),
+              className: cn(
+                "w-9 h-9 flex items-center justify-center rounded-lg text-xl transition-colors",
+                selectedIndex === index ? "bg-primary/10 ring-2 ring-primary/30" : "hover:bg-accent"
+              ),
+              children: item.emoji
+            }
+          )
         },
         item.name
       )) }),
@@ -23267,7 +23285,7 @@ var EditorColorPalette = ({
   label
 }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "p-2", children: [
   /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
-  /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "button",
     {
       type: "button",
@@ -23278,14 +23296,12 @@ var EditorColorPalette = ({
         currentColor === c.color ? "border-primary ring-2 ring-primary/20" : "border-border/50 hover:border-primary/50"
       ),
       style: { backgroundColor: c.color || "transparent" },
-      title: c.name,
       children: [
         c.color === "" && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_lucide_react42.X, { className: "w-4 h-4 text-muted-foreground" }),
         c.color === "inherit" && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-xs font-medium", children: "A" })
       ]
-    },
-    c.name
-  )) })
+    }
+  ) }, c.name)) })
 ] });
 
 // src/components/UEditor/image-commands.ts
@@ -23480,17 +23496,17 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 };
 
 // src/components/UEditor/emoji-picker.tsx
-var import_react49 = require("react");
 var import_lucide_react44 = require("lucide-react");
+var import_react49 = require("react");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var CATEGORY_ICONS2 = {
-  "smileys_people": import_lucide_react44.Smile,
-  "animals_nature": import_lucide_react44.Leaf,
-  "food_drink": import_lucide_react44.Utensils,
-  "activity": import_lucide_react44.Dumbbell,
-  "objects": import_lucide_react44.Lightbulb,
-  "symbols": import_lucide_react44.Hash,
-  "flags": import_lucide_react44.Flag
+  smileys_people: import_lucide_react44.Smile,
+  animals_nature: import_lucide_react44.Leaf,
+  food_drink: import_lucide_react44.Utensils,
+  activity: import_lucide_react44.Dumbbell,
+  objects: import_lucide_react44.Lightbulb,
+  symbols: import_lucide_react44.Hash,
+  flags: import_lucide_react44.Flag
 };
 var EmojiPicker2 = ({ onSelect, onClose }) => {
   const t = useSmartTranslations("UEditor");
@@ -23504,9 +23520,7 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
     const query = search.toLowerCase();
     return EMOJI_LIST.map((category) => ({
       ...category,
-      emojis: category.emojis.filter(
-        (emoji) => emoji.name.toLowerCase().includes(query) || emoji.emoji.includes(search)
-      )
+      emojis: category.emojis.filter((emoji) => emoji.name.toLowerCase().includes(query) || emoji.emoji.includes(search))
     })).filter((category) => category.emojis.length > 0);
   }, [search]);
   const handleEmojiClick = (emoji) => {
@@ -23574,26 +23588,40 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
           )
         }
       ),
-      search && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-        "button",
-        {
-          onClick: () => setSearch(""),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react44.X, { className: "w-4 h-4" })
-        }
-      )
+      search && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { onClick: () => setSearch(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_lucide_react44.X, { className: "w-4 h-4" }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-      "div",
-      {
-        ref: scrollContainerRef,
-        className: "overflow-y-auto px-3 py-2 shrink",
-        style: { height: "20rem" },
-        children: search ? (
-          // Search Results
-          filteredCategories.length > 0 ? filteredCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "mb-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 sticky top-0 bg-card py-1", children: category.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref: scrollContainerRef, className: "overflow-y-auto px-3 py-2 shrink", style: { height: "20rem" }, children: search ? (
+      // Search Results
+      filteredCategories.length > 0 ? filteredCategories.map((category) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "mb-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 sticky top-0 bg-card py-1", children: category.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: emoji.name.replace(/_/g, " ") }), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          "button",
+          {
+            onClick: () => handleEmojiClick(emoji.emoji),
+            className: cn(
+              "w-9 h-9 flex items-center justify-center rounded-lg",
+              "text-2xl hover:bg-accent transition-colors",
+              "focus:outline-none focus:ring-2 focus:ring-primary/20"
+            ),
+            children: emoji.emoji
+          }
+        ) }, emoji.name)) })
+      ] }, category.id)) : /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-sm font-medium text-muted-foreground", children: t("emojiPicker.noResults") }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: t("emojiPicker.tryDifferentSearch") })
+      ] })
+    ) : (
+      // All Categories - Messenger Style
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+        "div",
+        {
+          ref: (el) => {
+            categoryRefs.current[category.id] = el;
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 sticky top-0 bg-card py-1 z-10", children: category.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: emoji.name.replace(/_/g, " ") }), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               "button",
               {
                 onClick: () => handleEmojiClick(emoji.emoji),
@@ -23602,47 +23630,14 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
                   "text-2xl hover:bg-accent transition-colors",
                   "focus:outline-none focus:ring-2 focus:ring-primary/20"
                 ),
-                title: emoji.name.replace(/_/g, " "),
                 children: emoji.emoji
-              },
-              emoji.name
-            )) })
-          ] }, category.id)) : /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-sm font-medium text-muted-foreground", children: t("emojiPicker.noResults") }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-xs text-muted-foreground mt-1", children: t("emojiPicker.tryDifferentSearch") })
-          ] })
-        ) : (
-          // All Categories - Messenger Style
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
-            "div",
-            {
-              ref: (el) => {
-                categoryRefs.current[category.id] = el;
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2 sticky top-0 bg-card py-1 z-10", children: category.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-                  "button",
-                  {
-                    onClick: () => handleEmojiClick(emoji.emoji),
-                    className: cn(
-                      "w-9 h-9 flex items-center justify-center rounded-lg",
-                      "text-2xl hover:bg-accent transition-colors",
-                      "focus:outline-none focus:ring-2 focus:ring-primary/20"
-                    ),
-                    title: emoji.name.replace(/_/g, " "),
-                    children: emoji.emoji
-                  },
-                  emoji.name
-                )) })
-              ]
-            },
-            category.id
-          )) })
-        )
-      }
-    ),
+              }
+            ) }, emoji.name)) })
+          ]
+        },
+        category.id
+      )) })
+    ) }),
     !search && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "flex items-center justify-around px-2 py-2 border-t bg-muted/30 shrink-0", children: EMOJI_LIST.map((category) => {
       const IconComponent = CATEGORY_ICONS2[category.id] || import_lucide_react44.Smile;
       return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -23653,8 +23648,7 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
             "p-2 rounded-lg transition-colors",
             activeCategory === category.id ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground hover:bg-accent"
           ),
-          title: category.name,
-          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(IconComponent, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tooltip, { placement: "top", content: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "text-xs font-medium", children: category.name }), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(IconComponent, { className: "w-5 h-5" }) }) })
         },
         category.id
       );
@@ -29130,12 +29124,23 @@ function buildLayout(editor, surface, cell) {
   }
   const surfaceRect = surface.getBoundingClientRect();
   const tableRect = table.getBoundingClientRect();
+  const wrapperElement = table.closest(".tableWrapper");
+  const wrapper = wrapperElement instanceof HTMLElement ? wrapperElement : null;
+  const wrapperRect = wrapper?.getBoundingClientRect() ?? tableRect;
   const tableLeft = tableRect.left - surfaceRect.left + surface.scrollLeft;
   const tableTop = tableRect.top - surfaceRect.top + surface.scrollTop;
   const avgRowHeight = metricOrFallback(tableRect.height / rows.length, FALLBACK_TABLE_ROW_HEIGHT);
   const avgColumnWidth = metricOrFallback(tableRect.width / referenceCells.length, FALLBACK_TABLE_COLUMN_WIDTH);
   const tableWidth = metricOrFallback(tableRect.width, avgColumnWidth * referenceCells.length);
   const tableHeight = metricOrFallback(tableRect.height, avgRowHeight * rows.length);
+  const wrapperLeft = wrapperRect.left - surfaceRect.left + surface.scrollLeft;
+  const wrapperTop = wrapperRect.top - surfaceRect.top + surface.scrollTop;
+  const wrapperWidth = metricOrFallback(wrapperRect.width, tableWidth);
+  const wrapperHeight = metricOrFallback(wrapperRect.height, tableHeight);
+  const viewportWidth = metricOrFallback(wrapper?.clientWidth ?? wrapperRect.width, tableWidth);
+  const viewportHeight = metricOrFallback(wrapper?.clientHeight ?? wrapperRect.height, tableHeight);
+  const verticalScrollbarWidth = Math.max(0, Math.round(wrapperWidth - viewportWidth));
+  const horizontalScrollbarHeight = Math.max(0, Math.round(wrapperHeight - viewportHeight));
   const rowHandles = rows.map((tableRow, index) => {
     const rowRect = tableRow.getBoundingClientRect();
     const anchorCell = tableRow.cells.item(0) ?? cornerCell;
@@ -29170,6 +29175,14 @@ function buildLayout(editor, surface, cell) {
     tableTop,
     tableWidth,
     tableHeight,
+    wrapperLeft,
+    wrapperTop,
+    wrapperWidth,
+    wrapperHeight,
+    viewportWidth,
+    viewportHeight,
+    horizontalScrollbarHeight,
+    verticalScrollbarWidth,
     avgRowHeight,
     avgColumnWidth,
     rowHandles,
@@ -29212,6 +29225,7 @@ function TableControls({ editor, containerRef }) {
   const [layout, setLayout] = import_react52.default.useState(null);
   const [dragPreview, setDragPreview] = import_react52.default.useState(null);
   const [hoverState, setHoverState] = import_react52.default.useState(DEFAULT_HOVER_STATE);
+  const [openMenuKey, setOpenMenuKey] = import_react52.default.useState(null);
   const layoutRef = import_react52.default.useRef(null);
   const dragStateRef = import_react52.default.useRef(null);
   import_react52.default.useEffect(() => {
@@ -29253,11 +29267,21 @@ function TableControls({ editor, containerRef }) {
     const surfaceRect = surface.getBoundingClientRect();
     const relativeX = event.clientX - surfaceRect.left + surface.scrollLeft;
     const relativeY = event.clientY - surfaceRect.top + surface.scrollTop;
-    const rowHandleIndex = activeLayout.rowHandles.find((rowHandle) => relativeX >= activeLayout.tableLeft - ROW_HANDLE_HOVER_WIDTH && relativeX <= activeLayout.tableLeft && Math.abs(relativeY - rowHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
-    const columnHandleIndex = activeLayout.columnHandles.find((columnHandle) => relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop && Math.abs(relativeX - columnHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
-    const menuVisible = relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
-    const addColumnVisible = relativeX >= activeLayout.tableLeft + activeLayout.tableWidth && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + activeLayout.tableHeight;
-    const addRowVisible = relativeY >= activeLayout.tableTop + activeLayout.tableHeight && relativeY <= activeLayout.tableTop + activeLayout.tableHeight + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth;
+    const targetElement = resolveElement(event.target);
+    const directRowHandle = targetElement?.closest?.("[data-row-handle-index]");
+    const directColumnHandle = targetElement?.closest?.("[data-column-handle-index]");
+    const directTableMenu = targetElement?.closest?.("[data-table-control='table-menu']");
+    const directAddColumn = targetElement?.closest?.("[data-table-control='add-column']");
+    const directAddRow = targetElement?.closest?.("[data-table-control='add-row']");
+    const directRowHandleIndex = directRowHandle instanceof HTMLElement ? Number.parseInt(directRowHandle.dataset.rowHandleIndex ?? "", 10) : Number.NaN;
+    const directColumnHandleIndex = directColumnHandle instanceof HTMLElement ? Number.parseInt(directColumnHandle.dataset.columnHandleIndex ?? "", 10) : Number.NaN;
+    const visibleTableWidth2 = Math.min(activeLayout.tableWidth, activeLayout.viewportWidth);
+    const visibleTableHeight2 = Math.min(activeLayout.tableHeight, activeLayout.viewportHeight);
+    const rowHandleIndex = Number.isFinite(directRowHandleIndex) ? directRowHandleIndex : activeLayout.rowHandles.find((rowHandle) => relativeX >= activeLayout.tableLeft - ROW_HANDLE_HOVER_WIDTH && relativeX <= activeLayout.tableLeft && Math.abs(relativeY - rowHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
+    const columnHandleIndex = Number.isFinite(directColumnHandleIndex) ? directColumnHandleIndex : activeLayout.columnHandles.find((columnHandle) => relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop && Math.abs(relativeX - columnHandle.center) <= HANDLE_HOVER_RADIUS)?.index ?? null;
+    const menuVisible = Boolean(directTableMenu) || relativeX >= activeLayout.tableLeft - MENU_HOVER_PADDING && relativeX <= activeLayout.tableLeft + 42 && relativeY >= activeLayout.tableTop - COLUMN_HANDLE_HOVER_HEIGHT && relativeY <= activeLayout.tableTop + MENU_HOVER_PADDING;
+    const addColumnVisible = Boolean(directAddColumn) || relativeX >= activeLayout.wrapperLeft + visibleTableWidth2 && relativeX <= activeLayout.wrapperLeft + visibleTableWidth2 + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.wrapperTop && relativeY <= activeLayout.wrapperTop + visibleTableHeight2;
+    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.wrapperTop + activeLayout.wrapperHeight && relativeY <= activeLayout.wrapperTop + activeLayout.wrapperHeight + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.wrapperLeft && relativeX <= activeLayout.wrapperLeft + visibleTableWidth2;
     setHoverState((prev) => {
       if (prev.menuVisible === menuVisible && prev.addColumnVisible === addColumnVisible && prev.addRowVisible === addRowVisible && prev.rowHandleIndex === rowHandleIndex && prev.columnHandleIndex === columnHandleIndex) {
         return prev;
@@ -29295,6 +29319,7 @@ function TableControls({ editor, containerRef }) {
     proseMirror.addEventListener("mouseover", handleMouseOver);
     proseMirror.addEventListener("mouseleave", handleMouseLeave);
     proseMirror.addEventListener("focusin", handleFocusIn);
+    surface.addEventListener("mouseover", handleSurfaceMouseMove);
     surface.addEventListener("mousemove", handleSurfaceMouseMove);
     surface.addEventListener("scroll", refreshCurrentLayout, { passive: true });
     window.addEventListener("resize", refreshCurrentLayout);
@@ -29305,6 +29330,7 @@ function TableControls({ editor, containerRef }) {
       proseMirror.removeEventListener("mouseover", handleMouseOver);
       proseMirror.removeEventListener("mouseleave", handleMouseLeave);
       proseMirror.removeEventListener("focusin", handleFocusIn);
+      surface.removeEventListener("mouseover", handleSurfaceMouseMove);
       surface.removeEventListener("mousemove", handleSurfaceMouseMove);
       surface.removeEventListener("scroll", refreshCurrentLayout);
       window.removeEventListener("resize", refreshCurrentLayout);
@@ -29402,6 +29428,9 @@ function TableControls({ editor, containerRef }) {
   }, [runAtCornerCell, syncFromSelection]);
   const canExpandTable = Boolean(layout);
   const controlsVisible = dragPreview !== null;
+  const tableMenuOpen = openMenuKey === "table";
+  const getRowMenuKey = import_react52.default.useCallback((index) => `row:${index}`, []);
+  const getColumnMenuKey = import_react52.default.useCallback((index) => `column:${index}`, []);
   import_react52.default.useEffect(() => {
     const handleMouseMove = (event) => {
       const dragState = dragStateRef.current;
@@ -29605,62 +29634,77 @@ function TableControls({ editor, containerRef }) {
   const menuLeft = Math.max(8, layout.tableLeft);
   const rowHandleLeft = Math.max(8, layout.tableLeft - 66);
   const columnHandleTop = Math.max(8, layout.tableTop - 14);
-  const columnRailTop = layout.tableTop;
-  const columnRailLeft = layout.tableLeft + layout.tableWidth + 8;
-  const rowRailTop = layout.tableTop + layout.tableHeight + 8;
-  const rowRailLeft = layout.tableLeft;
+  const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
+  const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
+  const columnRailTop = layout.wrapperTop;
+  const columnRailLeft = layout.wrapperLeft + visibleTableWidth + 8;
+  const rowRailTop = layout.wrapperTop + layout.wrapperHeight + 8;
+  const rowRailLeft = layout.wrapperLeft;
   const expandPreviewWidth = dragPreview?.kind === "add-column" ? layout.tableWidth + dragPreview.previewCols * layout.avgColumnWidth : layout.tableWidth;
   const expandPreviewHeight = dragPreview?.kind === "add-row" ? layout.tableHeight + dragPreview.previewRows * layout.avgRowHeight : layout.tableHeight;
   const dragStatusText = dragPreview?.kind === "row" ? `${t("tableMenu.dragRow")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "column" ? `${t("tableMenu.dragColumn")} ${dragPreview.originIndex + 1} -> ${dragPreview.targetIndex + 1}` : dragPreview?.kind === "add-row" ? `+${dragPreview.previewRows}R` : dragPreview?.kind === "add-column" ? `+${dragPreview.previewCols}C` : null;
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
     layout.rowHandles.map((rowHandle) => {
-      const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index;
+      const menuKey = getRowMenuKey(rowHandle.index);
+      const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index || openMenuKey === menuKey;
       if (!visible) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "div",
         {
           className: "absolute z-30",
+          "data-row-handle-index": rowHandle.index,
           style: {
             top: Math.max(8, rowHandle.center - 12),
             left: rowHandleLeft
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-            DropdownMenu,
+            Tooltip,
             {
               placement: "right",
-              items: getRowHandleMenuItems(rowHandle),
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-                "button",
+              content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                DropdownMenu,
                 {
-                  type: "button",
-                  "aria-label": `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
-                  title: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
-                  onMouseDown: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    dragStateRef.current = {
-                      kind: "row",
-                      originIndex: rowHandle.index,
-                      targetIndex: rowHandle.index,
-                      anchorPos: rowHandle.cellPos
-                    };
-                    setDragPreview({
-                      kind: "row",
-                      originIndex: rowHandle.index,
-                      targetIndex: rowHandle.index,
-                      targetStart: rowHandle.start,
-                      targetSize: rowHandle.size
-                    });
-                    document.body.style.cursor = "grabbing";
+                  placement: "right",
+                  isOpen: openMenuKey === menuKey,
+                  onOpenChange: (open) => {
+                    setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
                   },
-                  className: cn(
-                    "inline-flex h-6 w-6 items-center justify-center rounded-full",
-                    "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-                    "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripVertical, { className: "h-3.5 w-3.5" })
+                  items: getRowHandleMenuItems(rowHandle),
+                  trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setOpenMenuKey(null);
+                        dragStateRef.current = {
+                          kind: "row",
+                          originIndex: rowHandle.index,
+                          targetIndex: rowHandle.index,
+                          anchorPos: rowHandle.cellPos
+                        };
+                        setDragPreview({
+                          kind: "row",
+                          originIndex: rowHandle.index,
+                          targetIndex: rowHandle.index,
+                          targetStart: rowHandle.start,
+                          targetSize: rowHandle.size
+                        });
+                        document.body.style.cursor = "grabbing";
+                      },
+                      className: cn(
+                        "inline-flex h-6 w-6 items-center justify-center rounded-full",
+                        "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                        "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripVertical, { className: "h-3.5 w-3.5" })
+                    }
+                  )
                 }
-              )
+              ) })
             }
           )
         },
@@ -29668,147 +29712,187 @@ function TableControls({ editor, containerRef }) {
       );
     }),
     layout.columnHandles.map((columnHandle) => {
-      const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index;
+      const menuKey = getColumnMenuKey(columnHandle.index);
+      const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index || openMenuKey === menuKey;
       if (!visible) return null;
       return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "div",
         {
           className: "absolute z-30",
+          "data-column-handle-index": columnHandle.index,
           style: {
             top: columnHandleTop,
             left: Math.max(8, columnHandle.center - 12)
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-            DropdownMenu,
+            Tooltip,
             {
-              placement: "bottom-start",
-              items: getColumnHandleMenuItems(columnHandle),
-              trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-                "button",
+              placement: "top",
+              content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                DropdownMenu,
                 {
-                  type: "button",
-                  "aria-label": `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
-                  title: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
-                  onMouseDown: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    dragStateRef.current = {
-                      kind: "column",
-                      originIndex: columnHandle.index,
-                      targetIndex: columnHandle.index,
-                      anchorPos: columnHandle.cellPos
-                    };
-                    setDragPreview({
-                      kind: "column",
-                      originIndex: columnHandle.index,
-                      targetIndex: columnHandle.index,
-                      targetStart: columnHandle.start,
-                      targetSize: columnHandle.size
-                    });
-                    document.body.style.cursor = "grabbing";
+                  placement: "bottom-start",
+                  isOpen: openMenuKey === menuKey,
+                  onOpenChange: (open) => {
+                    setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
                   },
-                  className: cn(
-                    "inline-flex h-6 w-6 items-center justify-center rounded-full",
-                    "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-                    "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
-                  ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripHorizontal, { className: "h-3.5 w-3.5" })
+                  items: getColumnHandleMenuItems(columnHandle),
+                  trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        setOpenMenuKey(null);
+                        dragStateRef.current = {
+                          kind: "column",
+                          originIndex: columnHandle.index,
+                          targetIndex: columnHandle.index,
+                          anchorPos: columnHandle.cellPos
+                        };
+                        setDragPreview({
+                          kind: "column",
+                          originIndex: columnHandle.index,
+                          targetIndex: columnHandle.index,
+                          targetStart: columnHandle.start,
+                          targetSize: columnHandle.size
+                        });
+                        document.body.style.cursor = "grabbing";
+                      },
+                      className: cn(
+                        "inline-flex h-6 w-6 items-center justify-center rounded-full",
+                        "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                        "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.GripHorizontal, { className: "h-3.5 w-3.5" })
+                    }
+                  )
                 }
-              )
+              ) })
             }
           )
         },
         `column-handle-${columnHandle.index}`
       );
     }),
-    (controlsVisible || hoverState.menuVisible) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    (controlsVisible || hoverState.menuVisible || tableMenuOpen) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         className: "absolute z-30",
+        "data-table-control": "table-menu",
         style: {
           top: menuTop,
           left: menuLeft
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          DropdownMenu,
+          Tooltip,
           {
-            placement: "bottom-start",
-            items: menuItems,
-            trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-              "button",
+            placement: "top",
+            content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.openControls") }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              DropdownMenu,
               {
-                type: "button",
-                "aria-label": t("tableMenu.openControls"),
-                title: t("tableMenu.openControls"),
-                onMouseDown: (event) => event.preventDefault(),
-                className: cn(
-                  "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full",
-                  "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
-                  "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.MoreHorizontal, { className: "h-4 w-4" })
+                placement: "bottom-start",
+                isOpen: tableMenuOpen,
+                onOpenChange: (open) => {
+                  setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
+                },
+                items: menuItems,
+                trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": t("tableMenu.openControls"),
+                    onMouseDown: (event) => event.preventDefault(),
+                    className: cn(
+                      "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-full",
+                      "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur",
+                      "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react47.MoreHorizontal, { className: "h-4 w-4" })
+                  }
+                )
               }
-            )
+            ) })
           }
         )
       }
     ),
     (controlsVisible || hoverState.addColumnVisible) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      "button",
+      Tooltip,
       {
-        type: "button",
-        "aria-label": t("tableMenu.quickAddColumnAfter"),
-        title: t("tableMenu.quickAddColumnAfter"),
-        onMouseDown: (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          if (!canExpandTable) return;
-          dragStateRef.current = { kind: "add-column", previewCols: 1 };
-          setDragPreview({ kind: "add-column", previewCols: 1 });
-          document.body.style.cursor = "ew-resize";
-        },
-        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-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
-        ),
-        style: {
-          top: columnRailTop,
-          left: columnRailLeft,
-          width: 18,
-          height: layout.tableHeight
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
+        placement: "right",
+        content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.quickAddColumnAfter") }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-table-control": "add-column",
+            "aria-label": t("tableMenu.quickAddColumnAfter"),
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setOpenMenuKey(null);
+              if (!canExpandTable) return;
+              dragStateRef.current = { kind: "add-column", previewCols: 1 };
+              setDragPreview({ kind: "add-column", previewCols: 1 });
+              document.body.style.cursor = "ew-resize";
+            },
+            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-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            style: {
+              top: columnRailTop,
+              left: columnRailLeft,
+              width: 18,
+              height: visibleTableHeight
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
+          }
+        )
       }
     ),
     (controlsVisible || hoverState.addRowVisible) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      "button",
+      Tooltip,
       {
-        type: "button",
-        "aria-label": t("tableMenu.quickAddRowAfter"),
-        title: t("tableMenu.quickAddRowAfter"),
-        onMouseDown: (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          if (!canExpandTable) return;
-          dragStateRef.current = { kind: "add-row", previewRows: 1 };
-          setDragPreview({ kind: "add-row", previewRows: 1 });
-          document.body.style.cursor = "ns-resize";
-        },
-        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-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
-        ),
-        style: {
-          top: rowRailTop,
-          left: rowRailLeft,
-          width: layout.tableWidth,
-          height: 16
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
+        placement: "bottom",
+        content: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-xs font-medium", children: t("tableMenu.quickAddRowAfter") }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-table-control": "add-row",
+            "aria-label": t("tableMenu.quickAddRowAfter"),
+            onMouseDown: (event) => {
+              event.preventDefault();
+              event.stopPropagation();
+              setOpenMenuKey(null);
+              if (!canExpandTable) return;
+              dragStateRef.current = { kind: "add-row", previewRows: 1 };
+              setDragPreview({ kind: "add-row", previewRows: 1 });
+              document.body.style.cursor = "ns-resize";
+            },
+            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-150 hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
+            ),
+            style: {
+              top: rowRailTop,
+              left: rowRailLeft,
+              width: visibleTableWidth,
+              height: 16
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
+          }
+        )
       }
     ),
     dragPreview?.kind === "row" && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
@@ -30162,7 +30246,20 @@ var UEditor = import_react53.default.forwardRef(({
           "[&_pre]:text-[#d4d4d4]!",
           "[&_pre_code]:bg-transparent!",
           "[&_.tableWrapper]:overflow-x-auto",
+          "[&_.tableWrapper]:pb-1.5",
           "[&_.tableWrapper]:select-text",
+          "[&_.tableWrapper]:[scrollbar-width:thin]",
+          "[&_.tableWrapper]:[scrollbar-color:hsl(var(--border))_transparent]",
+          "[&_.tableWrapper::-webkit-scrollbar]:h-2",
+          "[&_.tableWrapper::-webkit-scrollbar]:w-2",
+          "[&_.tableWrapper::-webkit-scrollbar-track]:rounded-full",
+          "[&_.tableWrapper::-webkit-scrollbar-track]:bg-transparent",
+          "[&_.tableWrapper::-webkit-scrollbar-thumb]:rounded-full",
+          "[&_.tableWrapper::-webkit-scrollbar-thumb]:border",
+          "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-solid",
+          "[&_.tableWrapper::-webkit-scrollbar-thumb]:border-transparent",
+          "[&_.tableWrapper::-webkit-scrollbar-thumb]:bg-border/70",
+          "[&_.tableWrapper::-webkit-scrollbar-thumb:hover]:bg-muted-foreground/45",
           "[&_table]:table-fixed",
           "[&_table]:overflow-hidden",
           "[&_table]:select-text",
@@ -30182,15 +30279,27 @@ var UEditor = import_react53.default.forwardRef(({
           "[&_.selectedCell]:after:pointer-events-none",
           "[&_.column-resize-handle]:pointer-events-auto",
           "[&_.column-resize-handle]:cursor-col-resize",
-          "[&_.column-resize-handle]:bg-primary/65",
-          "[&_.column-resize-handle]:w-2",
-          "[&_.column-resize-handle]:rounded-full",
+          "[&_.column-resize-handle]:absolute",
+          "[&_.column-resize-handle]:top-[-1px]",
+          "[&_.column-resize-handle]:bottom-[-1px]",
+          "[&_.column-resize-handle]:right-[-5px]",
+          "[&_.column-resize-handle]:z-10",
+          "[&_.column-resize-handle]:w-2.5",
+          "[&_.column-resize-handle]:bg-transparent",
+          "[&_.column-resize-handle]:rounded-none",
           "[&_.column-resize-handle]:opacity-0",
-          "[&_.column-resize-handle]:shadow-sm",
-          "[&_.column-resize-handle]:transition-[opacity,background-color,box-shadow]",
+          "[&_.column-resize-handle]:transition-opacity",
+          "[&_.column-resize-handle]:after:absolute",
+          "[&_.column-resize-handle]:after:top-0",
+          "[&_.column-resize-handle]:after:bottom-0",
+          "[&_.column-resize-handle]:after:left-1/2",
+          "[&_.column-resize-handle]:after:w-0.5",
+          "[&_.column-resize-handle]:after:-translate-x-1/2",
+          "[&_.column-resize-handle]:after:rounded-full",
+          "[&_.column-resize-handle]:after:bg-primary/75",
+          "[&_.column-resize-handle]:after:content-['']",
           "[&.resize-cursor_.column-resize-handle]:opacity-100",
-          "[&.resize-cursor_.column-resize-handle]:bg-primary",
-          "[&.resize-cursor_.column-resize-handle]:shadow-md",
+          "[&.resize-cursor_.column-resize-handle]:after:bg-primary",
           "[&.resize-cursor]:cursor-col-resize",
           "[&.resize-row-cursor]:cursor-row-resize",
           "[&_img.ProseMirror-selectednode]:ring-2",