@underverse-ui/underverse 1.0.72 → 1.0.73

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.72",
+  "version": "1.0.73",
   "sourceEntry": "src/index.ts",
   "totalExports": 221,
   "exports": [

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 }),
@@ -29212,6 +29224,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 +29266,19 @@ 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 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;
     setHoverState((prev) => {
       if (prev.menuVisible === menuVisible && prev.addColumnVisible === addColumnVisible && prev.addRowVisible === addRowVisible && prev.rowHandleIndex === rowHandleIndex && prev.columnHandleIndex === columnHandleIndex) {
         return prev;
@@ -29295,6 +29316,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 +29327,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 +29425,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;
@@ -29614,12 +29640,14 @@ function TableControls({ editor, containerRef }) {
   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
@@ -29628,6 +29656,10 @@ function TableControls({ editor, containerRef }) {
             DropdownMenu,
             {
               placement: "right",
+              isOpen: openMenuKey === menuKey,
+              onOpenChange: (open) => {
+                setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
+              },
               items: getRowHandleMenuItems(rowHandle),
               trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "button",
@@ -29638,6 +29670,7 @@ function TableControls({ editor, containerRef }) {
                   onMouseDown: (event) => {
                     event.preventDefault();
                     event.stopPropagation();
+                    setOpenMenuKey(null);
                     dragStateRef.current = {
                       kind: "row",
                       originIndex: rowHandle.index,
@@ -29668,12 +29701,14 @@ 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)
@@ -29682,6 +29717,10 @@ function TableControls({ editor, containerRef }) {
             DropdownMenu,
             {
               placement: "bottom-start",
+              isOpen: openMenuKey === menuKey,
+              onOpenChange: (open) => {
+                setOpenMenuKey((prev) => open ? menuKey : prev === menuKey ? null : prev);
+              },
               items: getColumnHandleMenuItems(columnHandle),
               trigger: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "button",
@@ -29692,6 +29731,7 @@ function TableControls({ editor, containerRef }) {
                   onMouseDown: (event) => {
                     event.preventDefault();
                     event.stopPropagation();
+                    setOpenMenuKey(null);
                     dragStateRef.current = {
                       kind: "column",
                       originIndex: columnHandle.index,
@@ -29721,10 +29761,11 @@ function TableControls({ editor, containerRef }) {
         `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
@@ -29733,6 +29774,10 @@ function TableControls({ editor, containerRef }) {
           DropdownMenu,
           {
             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",
@@ -29757,11 +29802,13 @@ function TableControls({ editor, containerRef }) {
       "button",
       {
         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 });
@@ -29786,11 +29833,13 @@ function TableControls({ editor, containerRef }) {
       "button",
       {
         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 });
@@ -30182,8 +30231,13 @@ 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]:absolute",
+          "[&_.column-resize-handle]:top-[-1px]",
+          "[&_.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",
+          "[&_.column-resize-handle]:w-2.5",
           "[&_.column-resize-handle]:rounded-full",
           "[&_.column-resize-handle]:opacity-0",
           "[&_.column-resize-handle]:shadow-sm",