@underverse-ui/underverse 1.0.127 → 1.0.128

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.127",
+  "version": "1.0.128",
   "sourceEntry": "src/index.ts",
   "totalExports": 232,
   "exports": [

package/dist/index.cjs

@@ -7404,7 +7404,7 @@ var DropdownMenuItem = ({
     disabled,
     onMouseDown: (e) => e.preventDefault(),
     className: cn(
-      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group",
+      "flex w-full items-center gap-2 px-3 py-2 text-sm rounded-lg transition-colors group cursor-pointer",
       "hover:bg-accent hover:text-accent-foreground",
       "focus:bg-accent focus:text-accent-foreground focus:outline-none",
       "disabled:opacity-50 disabled:cursor-not-allowed",
@@ -25456,7 +25456,6 @@ function buildUEditorExtensions({
 
 // src/components/UEditor/toolbar.tsx
 var import_react49 = __toESM(require("react"), 1);
-var import_react_dom8 = require("react-dom");
 var import_react50 = require("@tiptap/react");
 var import_lucide_react44 = require("lucide-react");
 
@@ -25951,7 +25950,7 @@ var ToolbarButton = import_react49.default.forwardRef(({ onClick, onMouseDown, a
       onClick,
       disabled,
       className: cn(
-        "flex items-center justify-center w-8 h-8 rounded-md transition-colors duration-150",
+        "flex items-center justify-center w-7 h-7 rounded-md transition-colors duration-150 cursor-pointer",
         "gap-0.5 [&_svg+svg]:-ml-1",
         "hover:bg-accent",
         "focus:outline-none focus:ring-2 focus:ring-primary/20",
@@ -26030,11 +26029,6 @@ var EditorToolbar = ({
   const fileInputRef = (0, import_react49.useRef)(null);
   const [isUploadingImage, setIsUploadingImage] = (0, import_react49.useState)(false);
   const [imageUploadError, setImageUploadError] = (0, import_react49.useState)(null);
-  const [fontSizeDraft, setFontSizeDraft] = (0, import_react49.useState)("");
-  const [isFontSizeMenuOpen, setIsFontSizeMenuOpen] = (0, import_react49.useState)(false);
-  const [fontSizeMenuPosition, setFontSizeMenuPosition] = (0, import_react49.useState)({ top: 0, left: 0 });
-  const fontSizeControlRef = (0, import_react49.useRef)(null);
-  const fontSizeMenuRef = (0, import_react49.useRef)(null);
   const isImageSelected = editor.isActive("image");
   const imageAttrs = editor.getAttributes("image");
   const tableAttrs = editor.getAttributes("table");
@@ -26060,53 +26054,6 @@ var EditorToolbar = ({
   const currentLineHeightLabel = availableLineHeights.find((option) => normalizeStyleValue(option.value) === currentLineHeight)?.label ?? t("toolbar.lineHeightDefault");
   const currentLetterSpacingLabel = availableLetterSpacings.find((option) => normalizeStyleValue(option.value) === currentLetterSpacing)?.label ?? t("toolbar.letterSpacingDefault");
   const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : availableFontFamilies[0]?.label ?? t("toolbar.fontDefault");
-  import_react49.default.useEffect(() => {
-    if (document.activeElement === fontSizeControlRef.current?.querySelector("input")) return;
-    setFontSizeDraft(currentFontSize.replace(/px$/i, "") || "16");
-  }, [currentFontSize]);
-  const applyFontSizeDraft = () => {
-    const normalized = fontSizeDraft.trim();
-    if (!normalized) {
-      editor.chain().focus().unsetFontSize().run();
-      return;
-    }
-    const parsed = Number.parseFloat(normalized);
-    if (!Number.isFinite(parsed) || parsed <= 0) return;
-    const clamped = Math.min(96, Math.max(8, parsed));
-    editor.chain().focus().setFontSize(`${clamped}px`).run();
-    setFontSizeDraft(String(clamped));
-  };
-  const updateFontSizeMenuPosition = import_react49.default.useCallback(() => {
-    const rect = fontSizeControlRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    setFontSizeMenuPosition({
-      top: Math.round(rect.bottom + 4),
-      left: Math.round(rect.left)
-    });
-  }, []);
-  const toggleFontSizeMenu = () => {
-    updateFontSizeMenuPosition();
-    setIsFontSizeMenuOpen((open) => !open);
-  };
-  import_react49.default.useEffect(() => {
-    if (!isFontSizeMenuOpen) return;
-    updateFontSizeMenuPosition();
-    const handlePointerDown = (event) => {
-      const target = event.target;
-      if (fontSizeControlRef.current?.contains(target)) return;
-      if (fontSizeMenuRef.current?.contains(target)) return;
-      setIsFontSizeMenuOpen(false);
-    };
-    const handleLayoutChange = () => updateFontSizeMenuPosition();
-    document.addEventListener("mousedown", handlePointerDown);
-    window.addEventListener("resize", handleLayoutChange);
-    window.addEventListener("scroll", handleLayoutChange, true);
-    return () => {
-      document.removeEventListener("mousedown", handlePointerDown);
-      window.removeEventListener("resize", handleLayoutChange);
-      window.removeEventListener("scroll", handleLayoutChange, true);
-    };
-  }, [isFontSizeMenuOpen, updateFontSizeMenuPosition]);
   const insertImageFiles = async (files) => {
     if (files.length === 0) return;
     setIsUploadingImage(true);
@@ -26146,21 +26093,11 @@ var EditorToolbar = ({
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-          "button",
-          {
-            type: "button",
-            "aria-label": t("toolbar.fontFamily"),
-            className: cn(
-              "flex h-8 min-w-34 max-w-42 items-center justify-between gap-2 rounded-full border border-border/60 bg-muted/30 px-2.5 text-xs text-foreground",
-              "transition-colors hover:bg-accent focus:outline-none focus:ring-2 focus:ring-primary/20"
-            ),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "truncate", children: displayedFontFamilyLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
-            ]
-          }
-        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.fontFamily"), className: "px-1.5 w-auto gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Baseline, { className: "w-4 h-4" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
+        ] }),
         contentClassName: "max-h-80 overflow-y-auto min-w-56 p-2",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -26178,102 +26115,55 @@ var EditorToolbar = ({
               label: option.label,
               onClick: () => editor.chain().focus().setFontFamily(option.value).run(),
               active: normalizeStyleValue(option.value) === currentFontFamily,
-              className: "font-medium "
+              className: "font-medium"
             },
             option.value
           ))
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
-        "div",
-        {
-          ref: fontSizeControlRef,
-          "aria-label": t("toolbar.fontSize"),
-          className: cn(
-            "flex h-8 min-w-14 items-center overflow-hidden rounded-full border border-border/60 bg-muted/30 text-xs font-semibold text-foreground",
-            "transition-colors focus-within:ring-2 focus-within:ring-primary/20"
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+      DropdownMenu,
+      {
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
+        }, title: t("toolbar.fontSize"), className: "px-1.5 w-auto gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronsUpDown, { className: "h-3 w-3 text-muted-foreground", strokeWidth: 2.5 }),
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "text-xs font-bold leading-none", children: "A" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
+        ] }),
+        contentClassName: "max-h-80 overflow-y-auto min-w-32 p-2",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            DropdownMenuItem,
+            {
+              icon: import_lucide_react44.Type,
+              label: t("toolbar.sizeDefault"),
+              onClick: () => editor.chain().focus().unsetFontSize().run(),
+              active: !currentFontSize
+            }
           ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-              "input",
-              {
-                type: "number",
-                min: 8,
-                max: 96,
-                step: 1,
-                value: fontSizeDraft,
-                onChange: (e) => setFontSizeDraft(e.target.value),
-                onBlur: applyFontSizeDraft,
-                onMouseDown: (e) => e.stopPropagation(),
-                onClick: (e) => e.stopPropagation(),
-                onKeyDown: (e) => {
-                  e.stopPropagation();
-                  if (e.key === "Enter") {
-                    e.preventDefault();
-                    applyFontSizeDraft();
-                  }
-                },
-                "aria-label": t("toolbar.fontSize"),
-                className: "h-full w-8 bg-transparent px-0.5 text-center text-xs font-semibold outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-              "button",
-              {
-                type: "button",
-                "aria-label": t("toolbar.fontSize"),
-                "aria-expanded": isFontSizeMenuOpen,
-                onClick: toggleFontSizeMenu,
-                className: "flex h-full w-5 items-center justify-center text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
-                children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3.5 w-3.5" })
-              }
-            )
-          ]
-        }
-      ),
-      isFontSizeMenuOpen && typeof document !== "undefined" && (0, import_react_dom8.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-          "div",
-          {
-            ref: fontSizeMenuRef,
-            className: "fixed z-[10000] max-h-64 w-12 overflow-y-auto rounded-md border border-border/70 bg-popover p-0.5 text-popover-foreground shadow-md",
-            style: { top: fontSizeMenuPosition.top, left: fontSizeMenuPosition.left },
-            children: availableFontSizes.map((option) => {
-              const active = normalizeStyleValue(option.value) === currentFontSize;
-              return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onMouseDown: (e) => e.preventDefault(),
-                  onClick: () => {
-                    editor.chain().focus().setFontSize(option.value).run();
-                    setFontSizeDraft(option.label);
-                    setIsFontSizeMenuOpen(false);
-                  },
-                  className: cn(
-                    "flex h-6 w-full items-center justify-center rounded text-xs leading-none transition-colors",
-                    active ? "bg-primary/15 text-primary" : "text-foreground hover:bg-accent hover:text-accent-foreground"
-                  ),
-                  children: option.label
-                },
-                option.value
-              );
-            })
-          }
-        ),
-        document.body
-      )
-    ] }),
+          availableFontSizes.map((option) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            DropdownMenuItem,
+            {
+              label: option.label,
+              onClick: () => editor.chain().focus().setFontSize(option.value).run(),
+              active: normalizeStyleValue(option.value) === currentFontSize
+            },
+            option.value
+          ))
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       DropdownMenu,
       {
-        contentClassName: "p-2",
+        contentClassName: "p-1",
         trigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(ToolbarButton, { onClick: () => {
-        }, title: t("toolbar.textStyle"), className: "px-2 w-auto gap-1", children: [
+        }, title: t("toolbar.textStyle"), className: "px-1.5 w-auto gap-0.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.Type, { className: "w-4 h-4" }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "w-3 h-3" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ChevronDown, { className: "h-3 w-3 text-muted-foreground" })
         ] }),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -26326,7 +26216,7 @@ var EditorToolbar = ({
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowUp, { className: "w-3 h-3" }),
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowDown, { className: "w-3 h-3" })
         ] }),
-        contentClassName: "max-h-72 overflow-y-auto p-2",
+        contentClassName: "max-h-72 overflow-y-auto p-1",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
@@ -26357,7 +26247,7 @@ var EditorToolbar = ({
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowLeft, { className: "w-3 h-3" }),
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_lucide_react44.ArrowRight, { className: "w-3 h-3" })
         ] }),
-        contentClassName: "max-h-72 overflow-y-auto p-2",
+        contentClassName: "max-h-72 overflow-y-auto p-1",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
             DropdownMenuItem,
@@ -26913,7 +26803,7 @@ var EditorToolbar = ({
 // src/components/UEditor/menus.tsx
 var import_react51 = require("react");
 var import_react52 = require("@tiptap/react");
-var import_react_dom9 = require("react-dom");
+var import_react_dom8 = require("react-dom");
 var import_lucide_react45 = require("lucide-react");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var FloatingSlashCommandMenu = ({ editor, onClose }) => {
@@ -27361,7 +27251,7 @@ var CustomBubbleMenu = ({
     };
   }, [editor]);
   if (!isVisible) return null;
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
@@ -27417,7 +27307,7 @@ var CustomFloatingMenu = ({ editor }) => {
     };
   }, [editor]);
   if (!isVisible) return null;
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
@@ -31999,15 +31889,12 @@ var FALLBACK_TABLE_COLUMN_WIDTH = 160;
 var MENU_HOVER_PADDING = 18;
 var ROW_HANDLE_HOVER_WIDTH = 28;
 var COLUMN_HANDLE_HOVER_HEIGHT = 28;
-var ROW_HANDLE_GUTTER = 20;
 var TABLE_MENU_TOP_OFFSET = 10;
-var COLUMN_HANDLE_TOP_OFFSET = 8;
 var ADD_COLUMN_RAIL_GAP = 4;
 var ADD_ROW_RAIL_GAP = 4;
 var ADD_COLUMN_HOVER_WIDTH = 24;
 var ADD_ROW_HOVER_HEIGHT = 24;
 var HANDLE_HOVER_RADIUS = 14;
-var IDLE_HANDLE_OPACITY = "0.4";
 var IDLE_HANDLE_SCALE = "0.78";
 var DEFAULT_HOVER_STATE = {
   menuVisible: false,
@@ -32619,8 +32506,8 @@ function TableControls({ editor, containerRef }) {
   }
   const menuTop = Math.max(8, layout.tableTop - TABLE_MENU_TOP_OFFSET);
   const menuLeft = Math.max(8, layout.tableLeft);
-  const rowHandleLeft = Math.max(8, layout.tableLeft - ROW_HANDLE_GUTTER);
-  const columnHandleTop = Math.max(8, layout.tableTop - COLUMN_HANDLE_TOP_OFFSET);
+  const rowHandleLeft = layout.tableLeft - 12;
+  const columnHandleTop = layout.tableTop - 12;
   const visibleTableWidth = Math.min(layout.tableWidth, layout.viewportWidth);
   const visibleTableHeight = Math.min(layout.tableHeight, layout.viewportHeight);
   const columnRailTop = layout.tableTop;
@@ -32633,7 +32520,9 @@ function TableControls({ editor, containerRef }) {
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
     layout.rowHandles.map((rowHandle) => {
       const menuKey = getRowMenuKey(rowHandle.index);
+      const isActive = rowHandle.index === layout.activeRowIndex;
       const visible = controlsVisible || hoverState.rowHandleIndex === rowHandle.index || openMenuKey === menuKey;
+      const isShown = visible || isActive;
       return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         "div",
         {
@@ -32647,7 +32536,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "right",
-              disabled: openMenuKey === menuKey,
+              disabled: openMenuKey === menuKey || !visible && isActive,
               content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragRow")} ${rowHandle.index + 1}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                 DropdownMenu,
@@ -32684,16 +32573,15 @@ function TableControls({ editor, containerRef }) {
                         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",
-                        "cursor-grab active:cursor-grabbing",
-                        "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                        "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                        visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
                       ),
                       style: {
-                        opacity: visible ? 1 : Number(IDLE_HANDLE_OPACITY),
-                        transform: visible ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`
+                        opacity: isShown ? 1 : 0,
+                        transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
+                        pointerEvents: isShown ? "auto" : "none"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripVertical, { className: "h-3.5 w-3.5" })
+                      children: visible ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripVertical, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "h-3 w-1 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                     }
                   )
                 }
@@ -32706,7 +32594,9 @@ function TableControls({ editor, containerRef }) {
     }),
     layout.columnHandles.map((columnHandle) => {
       const menuKey = getColumnMenuKey(columnHandle.index);
+      const isActive = columnHandle.index === layout.activeColumnIndex;
       const visible = controlsVisible || hoverState.columnHandleIndex === columnHandle.index || openMenuKey === menuKey;
+      const isShown = visible || isActive;
       return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         "div",
         {
@@ -32720,7 +32610,7 @@ function TableControls({ editor, containerRef }) {
             Tooltip,
             {
               placement: "top",
-              disabled: openMenuKey === menuKey,
+              disabled: openMenuKey === menuKey || !visible && isActive,
               content: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs font-medium", children: `${t("tableMenu.dragColumn")} ${columnHandle.index + 1}` }),
               children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                 DropdownMenu,
@@ -32757,16 +32647,15 @@ function TableControls({ editor, containerRef }) {
                         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",
-                        "cursor-grab active:cursor-grabbing",
-                        "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
+                        "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                        visible ? "border border-border/70 bg-background/95 text-muted-foreground shadow-sm backdrop-blur hover:bg-accent hover:text-foreground cursor-grab active:cursor-grabbing" : "border-transparent bg-transparent cursor-pointer"
                       ),
                       style: {
-                        opacity: visible ? 1 : Number(IDLE_HANDLE_OPACITY),
-                        transform: visible ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`
+                        opacity: isShown ? 1 : 0,
+                        transform: isShown ? "scale(1)" : `scale(${IDLE_HANDLE_SCALE})`,
+                        pointerEvents: isShown ? "auto" : "none"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripHorizontal, { className: "h-3.5 w-3.5" })
+                      children: visible ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.GripHorizontal, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "h-1 w-3 rounded-full bg-muted-foreground/50 hover:bg-muted-foreground" })
                     }
                   )
                 }
@@ -32814,8 +32703,9 @@ function TableControls({ editor, containerRef }) {
                       "transition-[opacity,transform,colors] duration-150 hover:bg-accent hover:text-foreground"
                     ),
                     style: {
-                      opacity: controlsVisible || hoverState.menuVisible || tableMenuOpen ? 1 : 0.5,
-                      transform: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "scale(1)" : "scale(0.82)"
+                      opacity: controlsVisible || hoverState.menuVisible || tableMenuOpen ? 1 : 0,
+                      transform: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "scale(1)" : "scale(0.82)",
+                      pointerEvents: controlsVisible || hoverState.menuVisible || tableMenuOpen ? "auto" : "none"
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_lucide_react46.MoreHorizontal, { className: "h-4 w-4" })
                   }
@@ -32857,8 +32747,9 @@ function TableControls({ editor, containerRef }) {
               left: columnRailLeft,
               width: controlsVisible || hoverState.addColumnVisible ? 18 : 12,
               height: controlsVisible || hoverState.addColumnVisible ? visibleTableHeight : 48,
-              opacity: controlsVisible || hoverState.addColumnVisible ? 1 : 0.45,
-              transform: controlsVisible || hoverState.addColumnVisible ? "scale(1)" : "scale(0.92)"
+              opacity: controlsVisible || hoverState.addColumnVisible ? 1 : 0,
+              transform: controlsVisible || hoverState.addColumnVisible ? "scale(1)" : "scale(0.92)",
+              pointerEvents: controlsVisible || hoverState.addColumnVisible ? "auto" : "none"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
           }
@@ -32896,8 +32787,9 @@ function TableControls({ editor, containerRef }) {
               left: controlsVisible || hoverState.addRowVisible ? rowRailLeft : rowRailLeft + Math.max(0, visibleTableWidth / 2 - 24),
               width: controlsVisible || hoverState.addRowVisible ? visibleTableWidth : 48,
               height: controlsVisible || hoverState.addRowVisible ? 16 : 12,
-              opacity: controlsVisible || hoverState.addRowVisible ? 1 : 0.45,
-              transform: controlsVisible || hoverState.addRowVisible ? "scale(1)" : "scale(0.92)"
+              opacity: controlsVisible || hoverState.addRowVisible ? 1 : 0,
+              transform: controlsVisible || hoverState.addRowVisible ? "scale(1)" : "scale(0.92)",
+              pointerEvents: controlsVisible || hoverState.addRowVisible ? "auto" : "none"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
           }