@underverse-ui/underverse 1.0.73 → 1.0.74

package/dist/index.js

@@ -22487,16 +22487,22 @@ var EmojiList = forwardRef14((props, ref) => {
     ] }) }),
     /* @__PURE__ */ jsxs63("div", { className: "p-3", children: [
       /* @__PURE__ */ jsx74("div", { className: "grid grid-cols-8 gap-1", children: props.items.slice(0, 64).map((item, index) => /* @__PURE__ */ jsx74(
-        "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__ */ jsx74("span", { className: "text-xs font-medium", children: item.name.replace(/_/g, " ") }),
+          children: /* @__PURE__ */ jsx74(
+            "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
       )) }),
@@ -23159,7 +23165,7 @@ var EditorColorPalette = ({
   label
 }) => /* @__PURE__ */ jsxs65("div", { className: "p-2", children: [
   /* @__PURE__ */ jsx76("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider px-2", children: label }),
-  /* @__PURE__ */ jsx76("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ jsxs65(
+  /* @__PURE__ */ jsx76("div", { className: "grid grid-cols-4 gap-1.5 mt-2", children: colors.map((c) => /* @__PURE__ */ jsx76(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx76("span", { className: "text-xs font-medium", children: c.name }), children: /* @__PURE__ */ jsxs65(
     "button",
     {
       type: "button",
@@ -23170,14 +23176,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__ */ jsx76(X18, { className: "w-4 h-4 text-muted-foreground" }),
         c.color === "inherit" && /* @__PURE__ */ jsx76("span", { className: "text-xs font-medium", children: "A" })
       ]
-    },
-    c.name
-  )) })
+    }
+  ) }, c.name)) })
 ] });
 
 // src/components/UEditor/image-commands.ts
@@ -23372,17 +23376,17 @@ var ImageInput = ({ onSubmit, onCancel }) => {
 };
 
 // src/components/UEditor/emoji-picker.tsx
-import { useState as useState43, useMemo as useMemo23, useRef as useRef29, useEffect as useEffect33 } from "react";
-import { Search as Search7, X as X20, Smile as Smile3, Leaf as Leaf2, Utensils as Utensils2, Dumbbell as Dumbbell2, Lightbulb as Lightbulb2, Hash as Hash2, Flag as Flag2 } from "lucide-react";
+import { Dumbbell as Dumbbell2, Flag as Flag2, Hash as Hash2, Leaf as Leaf2, Lightbulb as Lightbulb2, Search as Search7, Smile as Smile3, Utensils as Utensils2, X as X20 } from "lucide-react";
+import { useEffect as useEffect33, useMemo as useMemo23, useRef as useRef29, useState as useState43 } from "react";
 import { jsx as jsx78, jsxs as jsxs67 } from "react/jsx-runtime";
 var CATEGORY_ICONS2 = {
-  "smileys_people": Smile3,
-  "animals_nature": Leaf2,
-  "food_drink": Utensils2,
-  "activity": Dumbbell2,
-  "objects": Lightbulb2,
-  "symbols": Hash2,
-  "flags": Flag2
+  smileys_people: Smile3,
+  animals_nature: Leaf2,
+  food_drink: Utensils2,
+  activity: Dumbbell2,
+  objects: Lightbulb2,
+  symbols: Hash2,
+  flags: Flag2
 };
 var EmojiPicker2 = ({ onSelect, onClose }) => {
   const t = useSmartTranslations("UEditor");
@@ -23396,9 +23400,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) => {
@@ -23466,26 +23468,40 @@ var EmojiPicker2 = ({ onSelect, onClose }) => {
           )
         }
       ),
-      search && /* @__PURE__ */ jsx78(
-        "button",
-        {
-          onClick: () => setSearch(""),
-          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground",
-          children: /* @__PURE__ */ jsx78(X20, { className: "w-4 h-4" })
-        }
-      )
+      search && /* @__PURE__ */ jsx78("button", { onClick: () => setSearch(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx78(X20, { className: "w-4 h-4" }) })
     ] }) }),
-    /* @__PURE__ */ jsx78(
-      "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__ */ jsxs67("div", { className: "mb-4", children: [
-            /* @__PURE__ */ jsx78("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__ */ jsx78("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ jsx78(
+    /* @__PURE__ */ jsx78("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__ */ jsxs67("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx78("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__ */ jsx78("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ jsx78(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium", children: emoji.name.replace(/_/g, " ") }), children: /* @__PURE__ */ jsx78(
+          "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__ */ jsxs67("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
+        /* @__PURE__ */ jsx78("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
+        /* @__PURE__ */ jsx78("div", { className: "text-sm font-medium text-muted-foreground", children: t("emojiPicker.noResults") }),
+        /* @__PURE__ */ jsx78("div", { className: "text-xs text-muted-foreground mt-1", children: t("emojiPicker.tryDifferentSearch") })
+      ] })
+    ) : (
+      // All Categories - Messenger Style
+      /* @__PURE__ */ jsx78("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => /* @__PURE__ */ jsxs67(
+        "div",
+        {
+          ref: (el) => {
+            categoryRefs.current[category.id] = el;
+          },
+          children: [
+            /* @__PURE__ */ jsx78("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__ */ jsx78("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ jsx78(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium", children: emoji.name.replace(/_/g, " ") }), children: /* @__PURE__ */ jsx78(
               "button",
               {
                 onClick: () => handleEmojiClick(emoji.emoji),
@@ -23494,47 +23510,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__ */ jsxs67("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
-            /* @__PURE__ */ jsx78("div", { className: "text-4xl mb-2", children: "\u{1F50D}" }),
-            /* @__PURE__ */ jsx78("div", { className: "text-sm font-medium text-muted-foreground", children: t("emojiPicker.noResults") }),
-            /* @__PURE__ */ jsx78("div", { className: "text-xs text-muted-foreground mt-1", children: t("emojiPicker.tryDifferentSearch") })
-          ] })
-        ) : (
-          // All Categories - Messenger Style
-          /* @__PURE__ */ jsx78("div", { className: "space-y-4", children: EMOJI_LIST.map((category) => /* @__PURE__ */ jsxs67(
-            "div",
-            {
-              ref: (el) => {
-                categoryRefs.current[category.id] = el;
-              },
-              children: [
-                /* @__PURE__ */ jsx78("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__ */ jsx78("div", { className: "grid grid-cols-9 gap-1", children: category.emojis.map((emoji) => /* @__PURE__ */ jsx78(
-                  "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__ */ jsx78("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] || Smile3;
       return /* @__PURE__ */ jsx78(
@@ -23545,8 +23528,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__ */ jsx78(IconComponent, { className: "w-5 h-5" })
+          children: /* @__PURE__ */ jsx78(Tooltip, { placement: "top", content: /* @__PURE__ */ jsx78("span", { className: "text-xs font-medium", children: category.name }), children: /* @__PURE__ */ jsx78("span", { className: "inline-flex", children: /* @__PURE__ */ jsx78(IconComponent, { className: "w-5 h-5" }) }) })
         },
         category.id
       );
@@ -29049,12 +29031,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;
@@ -29089,6 +29082,14 @@ function buildLayout(editor, surface, cell) {
     tableTop,
     tableWidth,
     tableHeight,
+    wrapperLeft,
+    wrapperTop,
+    wrapperWidth,
+    wrapperHeight,
+    viewportWidth,
+    viewportHeight,
+    horizontalScrollbarHeight,
+    verticalScrollbarWidth,
     avgRowHeight,
     avgColumnWidth,
     rowHandles,
@@ -29181,11 +29182,13 @@ function TableControls({ editor, containerRef }) {
     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.tableLeft + activeLayout.tableWidth && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth + ADD_COLUMN_HOVER_WIDTH && relativeY >= activeLayout.tableTop && relativeY <= activeLayout.tableTop + activeLayout.tableHeight;
-    const addRowVisible = Boolean(directAddRow) || relativeY >= activeLayout.tableTop + activeLayout.tableHeight && relativeY <= activeLayout.tableTop + activeLayout.tableHeight + ADD_ROW_HOVER_HEIGHT && relativeX >= activeLayout.tableLeft && relativeX <= activeLayout.tableLeft + activeLayout.tableWidth;
+    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;
@@ -29538,10 +29541,12 @@ 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;
@@ -29560,47 +29565,53 @@ function TableControls({ editor, containerRef }) {
             left: rowHandleLeft
           },
           children: /* @__PURE__ */ jsx81(
-            DropdownMenu,
+            Tooltip,
             {
               placement: "right",
-              isOpen: openMenuKey === menuKey,
-              onOpenChange: (open) => {
-                setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
-              },
-              items: getRowHandleMenuItems(rowHandle),
-              trigger: /* @__PURE__ */ jsx81(
-                "button",
+              content: /* @__PURE__ */ jsx81("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
+              children: /* @__PURE__ */ jsx81("span", { className: "inline-flex", children: /* @__PURE__ */ jsx81(
+                DropdownMenu,
                 {
-                  type: "button",
-                  "aria-label": `${t("tableMenu.dragRow")} ${rowHandle.index + 1}`,
-                  title: `${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";
+                  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__ */ jsx81(GripVertical3, { className: "h-3.5 w-3.5" })
+                  items: getRowHandleMenuItems(rowHandle),
+                  trigger: /* @__PURE__ */ jsx81(
+                    "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__ */ jsx81(GripVertical3, { className: "h-3.5 w-3.5" })
+                    }
+                  )
                 }
-              )
+              ) })
             }
           )
         },
@@ -29621,47 +29632,53 @@ function TableControls({ editor, containerRef }) {
             left: Math.max(8, columnHandle.center - 12)
           },
           children: /* @__PURE__ */ jsx81(
-            DropdownMenu,
+            Tooltip,
             {
-              placement: "bottom-start",
-              isOpen: openMenuKey === menuKey,
-              onOpenChange: (open) => {
-                setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
-              },
-              items: getColumnHandleMenuItems(columnHandle),
-              trigger: /* @__PURE__ */ jsx81(
-                "button",
+              placement: "top",
+              content: /* @__PURE__ */ jsx81("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
+              children: /* @__PURE__ */ jsx81("span", { className: "inline-flex", children: /* @__PURE__ */ jsx81(
+                DropdownMenu,
                 {
-                  type: "button",
-                  "aria-label": `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}`,
-                  title: `${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";
+                  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__ */ jsx81(GripHorizontal, { className: "h-3.5 w-3.5" })
+                  items: getColumnHandleMenuItems(columnHandle),
+                  trigger: /* @__PURE__ */ jsx81(
+                    "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__ */ jsx81(GripHorizontal, { className: "h-3.5 w-3.5" })
+                    }
+                  )
                 }
-              )
+              ) })
             }
           )
         },
@@ -29678,93 +29695,111 @@ function TableControls({ editor, containerRef }) {
           left: menuLeft
         },
         children: /* @__PURE__ */ jsx81(
-          DropdownMenu,
+          Tooltip,
           {
-            placement: "bottom-start",
-            isOpen: tableMenuOpen,
-            onOpenChange: (open) => {
-              setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
-            },
-            items: menuItems,
-            trigger: /* @__PURE__ */ jsx81(
-              "button",
+            placement: "top",
+            content: /* @__PURE__ */ jsx81("span", { className: "text-xs font-medium", children: t("tableMenu.openControls") }),
+            children: /* @__PURE__ */ jsx81("span", { className: "inline-flex", children: /* @__PURE__ */ jsx81(
+              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__ */ jsx81(MoreHorizontal2, { className: "h-4 w-4" })
+                placement: "bottom-start",
+                isOpen: tableMenuOpen,
+                onOpenChange: (open) => {
+                  setOpenMenuKey((prev) => open ? "table" : prev === "table" ? null : prev);
+                },
+                items: menuItems,
+                trigger: /* @__PURE__ */ jsx81(
+                  "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__ */ jsx81(MoreHorizontal2, { className: "h-4 w-4" })
+                  }
+                )
               }
-            )
+            ) })
           }
         )
       }
     ),
     (controlsVisible || hoverState.addColumnVisible) && /* @__PURE__ */ jsx81(
-      "button",
+      Tooltip,
       {
-        type: "button",
-        "data-table-control": "add-column",
-        "aria-label": t("tableMenu.quickAddColumnAfter"),
-        title: 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: layout.tableHeight
-        },
-        children: /* @__PURE__ */ jsx81("span", { className: "text-sm font-medium leading-none", children: "+" })
+        placement: "right",
+        content: /* @__PURE__ */ jsx81("span", { className: "text-xs font-medium", children: t("tableMenu.quickAddColumnAfter") }),
+        children: /* @__PURE__ */ jsx81(
+          "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__ */ jsx81("span", { className: "text-sm font-medium leading-none", children: "+" })
+          }
+        )
       }
     ),
     (controlsVisible || hoverState.addRowVisible) && /* @__PURE__ */ jsx81(
-      "button",
+      Tooltip,
       {
-        type: "button",
-        "data-table-control": "add-row",
-        "aria-label": t("tableMenu.quickAddRowAfter"),
-        title: 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: layout.tableWidth,
-          height: 16
-        },
-        children: /* @__PURE__ */ jsx81("span", { className: "text-sm font-medium leading-none", children: "+" })
+        placement: "bottom",
+        content: /* @__PURE__ */ jsx81("span", { className: "text-xs font-medium", children: t("tableMenu.quickAddRowAfter") }),
+        children: /* @__PURE__ */ jsx81(
+          "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__ */ jsx81("span", { className: "text-sm font-medium leading-none", children: "+" })
+          }
+        )
       }
     ),
     dragPreview?.kind === "row" && /* @__PURE__ */ jsxs71(Fragment27, { children: [
@@ -30118,7 +30153,20 @@ var UEditor = React75.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",
@@ -30143,15 +30191,22 @@ var UEditor = React75.forwardRef(({
           "[&_.column-resize-handle]:bottom-[-1px]",
           "[&_.column-resize-handle]:right-[-5px]",
           "[&_.column-resize-handle]:z-10",
-          "[&_.column-resize-handle]:bg-primary/65",
           "[&_.column-resize-handle]:w-2.5",
-          "[&_.column-resize-handle]:rounded-full",
+          "[&_.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",