@underverse-ui/underverse 1.0.160 → 1.0.162

package/dist/index.js

@@ -585,6 +585,9 @@ var en_default = {
     loading: "Loading",
     noData: "No data",
     clearFilter: "Clear filter",
+    selectAll: "Select all",
+    default: "Default",
+    other: "Other",
     headerAlign: "Header alignment",
     alignLeft: "Align left",
     alignCenter: "Align center",
@@ -980,6 +983,9 @@ var vi_default = {
     loading: "\u0110ang t\u1EA3i",
     noData: "Kh\xF4ng c\xF3 d\u1EEF li\u1EC7u",
     clearFilter: "X\xF3a b\u1ED9 l\u1ECDc",
+    selectAll: "Ch\u1ECDn t\u1EA5t c\u1EA3",
+    default: "M\u1EB7c \u0111\u1ECBnh",
+    other: "Kh\xE1c",
     headerAlign: "C\u0103n ch\u1EC9nh ti\xEAu \u0111\u1EC1",
     alignLeft: "C\u0103n tr\xE1i",
     alignCenter: "C\u0103n gi\u1EEFa",
@@ -1375,6 +1381,9 @@ var ko_default = {
     loading: "\uB85C\uB529 \uC911",
     noData: "\uB370\uC774\uD130 \uC5C6\uC74C",
     clearFilter: "\uD544\uD130 \uC9C0\uC6B0\uAE30",
+    selectAll: "\uC804\uCCB4 \uC120\uD0DD",
+    default: "\uAE30\uBCF8\uAC12",
+    other: "\uAE30\uD0C0",
     headerAlign: "\uD5E4\uB354 \uC815\uB82C",
     alignLeft: "\uC67C\uCABD \uC815\uB82C",
     alignCenter: "\uAC00\uC6B4\uB370 \uC815\uB82C",
@@ -1770,6 +1779,9 @@ var ja_default = {
     loading: "\u8AAD\u307F\u8FBC\u307F\u4E2D",
     noData: "\u30C7\u30FC\u30BF\u304C\u3042\u308A\u307E\u305B\u3093",
     clearFilter: "\u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u30AF\u30EA\u30A2",
+    selectAll: "\u3059\u3079\u3066\u9078\u629E",
+    default: "\u30C7\u30D5\u30A9\u30EB\u30C8",
+    other: "\u305D\u306E\u4ED6",
     headerAlign: "\u30D8\u30C3\u30C0\u30FC\u914D\u7F6E",
     alignLeft: "\u5DE6\u63C3\u3048",
     alignCenter: "\u4E2D\u592E\u63C3\u3048",
@@ -7593,6 +7605,23 @@ var DropdownMenu = ({
   const itemsRef = React25.useRef([]);
   const [activeIndex, setActiveIndex] = useResettingIndex(open);
   const parentMenu = React25.useContext(DropdownMenuContext);
+  const closeMenu = React25.useCallback(() => {
+    setOpen(false);
+    parentMenu?.closeMenu();
+  }, [parentMenu, setOpen]);
+  const getEnabledMenuItems = React25.useCallback(() => {
+    const menuEl = menuRef.current;
+    if (!menuEl) return [];
+    return Array.from(menuEl.querySelectorAll("[data-dropdown-menu-item]")).filter((el) => !el.disabled);
+  }, []);
+  const focusMenuItem = React25.useCallback((index) => {
+    const enabled = getEnabledMenuItems();
+    const item = enabled[index];
+    if (!item) return;
+    setActiveIndex(index);
+    item.focus();
+    item.scrollIntoView({ block: "nearest" });
+  }, [getEnabledMenuItems, setActiveIndex]);
   useShadCNAnimations();
   React25.useEffect(() => {
     if (!open) return;
@@ -7603,38 +7632,34 @@ var DropdownMenu = ({
       if (!active || !triggerEl || !menuEl) return;
       const isInMenu = menuEl.contains(active);
       const isOnTrigger = triggerEl.contains(active);
-      if (!isInMenu && !isOnTrigger) return;
-      const enabled = itemsRef.current.filter((el) => el && !el.disabled);
+      const enabled = getEnabledMenuItems();
       if (enabled.length === 0) return;
+      const currentIndex = enabled.findIndex((el) => el === active);
+      const baseIndex = currentIndex >= 0 ? currentIndex : activeIndex;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        const next = (activeIndex + 1 + enabled.length) % enabled.length;
-        setActiveIndex(next);
-        enabled[next]?.focus();
+        const next = (baseIndex + 1 + enabled.length) % enabled.length;
+        focusMenuItem(next);
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        const prev = (activeIndex - 1 + enabled.length) % enabled.length;
-        setActiveIndex(prev);
-        enabled[prev]?.focus();
+        const prev = (baseIndex - 1 + enabled.length) % enabled.length;
+        focusMenuItem(prev);
       } else if (e.key === "Home") {
         e.preventDefault();
-        setActiveIndex(0);
-        enabled[0]?.focus();
+        focusMenuItem(0);
       } else if (e.key === "End") {
         e.preventDefault();
-        setActiveIndex(enabled.length - 1);
-        enabled[enabled.length - 1]?.focus();
+        focusMenuItem(enabled.length - 1);
+      } else if (e.key === "Escape" && (isInMenu || isOnTrigger)) {
+        e.preventDefault();
+        closeMenu();
       }
     };
-    document.addEventListener("keydown", handleKeyNav);
+    document.addEventListener("keydown", handleKeyNav, true);
     return () => {
-      document.removeEventListener("keydown", handleKeyNav);
+      document.removeEventListener("keydown", handleKeyNav, true);
     };
-  }, [open, activeIndex, setActiveIndex]);
-  const closeMenu = React25.useCallback(() => {
-    setOpen(false);
-    parentMenu?.closeMenu();
-  }, [parentMenu, setOpen]);
+  }, [open, activeIndex, closeMenu, focusMenuItem, getEnabledMenuItems]);
   const menuContext = React25.useMemo(
     () => ({
       closeMenu,
@@ -7659,6 +7684,7 @@ var DropdownMenu = ({
         onClick: () => handleItemClick(item.onClick),
         disabled: item.disabled,
         role: "menuitem",
+        "data-dropdown-menu-item": "",
         tabIndex: -1,
         style: {
           animationDelay: open ? `${Math.min(index * 20, 200)}ms` : "0ms"
@@ -7694,13 +7720,13 @@ var DropdownMenu = ({
         if (e.key === "ArrowDown") {
           e.preventDefault();
           setOpen(true);
-          requestAnimationFrame(() => itemsRef.current.find((el) => el && !el.disabled)?.focus());
+          requestAnimationFrame(() => focusMenuItem(0));
         } else if (e.key === "ArrowUp") {
           e.preventDefault();
           setOpen(true);
           requestAnimationFrame(() => {
-            const enabled = itemsRef.current.filter((el) => el && !el.disabled);
-            enabled[enabled.length - 1]?.focus();
+            const enabled = getEnabledMenuItems();
+            focusMenuItem(enabled.length - 1);
           });
         } else if (e.key === "Escape") {
           e.preventDefault();
@@ -7751,6 +7777,8 @@ var DropdownMenuItem = ({
       },
       disabled,
       onMouseDown: (e) => e.preventDefault(),
+      "data-dropdown-menu-item": "",
+      tabIndex: -1,
       className: cn(
         "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",
@@ -22909,6 +22937,78 @@ function DataTableBodyRows({
 // src/components/DataTable/components/DataTableHeader.tsx
 import React56 from "react";
 import { Filter as FilterIcon } from "lucide-react";
+
+// src/components/DataTable/utils/colorTag.ts
+function parseColor(color) {
+  if (!color) return null;
+  const c = color.trim().toLowerCase();
+  if (c.startsWith("#")) {
+    let hex = c.substring(1);
+    if (hex.length === 3) {
+      hex = hex.split("").map((char) => char + char).join("");
+    }
+    if (hex.length === 6) {
+      const r = parseInt(hex.substring(0, 2), 16);
+      const g = parseInt(hex.substring(2, 4), 16);
+      const b = parseInt(hex.substring(4, 6), 16);
+      if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+        return [r, g, b];
+      }
+    }
+    return null;
+  }
+  if (c.startsWith("rgb")) {
+    const match = c.match(/rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+    if (match) {
+      const r = parseInt(match[1], 10);
+      const g = parseInt(match[2], 10);
+      const b = parseInt(match[3], 10);
+      if (!isNaN(r) && !isNaN(g) && !isNaN(b)) {
+        return [r, g, b];
+      }
+    }
+    return null;
+  }
+  return null;
+}
+function toRgba(r, g, b, alpha) {
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function getHeaderBgColor(colorTag) {
+  const rgb = parseColor(colorTag);
+  if (!rgb) return colorTag;
+  return toRgba(rgb[0], rgb[1], rgb[2], 1);
+}
+function groupColumnsByColorTag(leafCols, colorGroups) {
+  const groupsMap = /* @__PURE__ */ new Map();
+  const ungrouped = [];
+  for (const col of leafCols) {
+    if (col.colorTag && colorGroups && colorGroups[col.colorTag]) {
+      const tag = col.colorTag;
+      if (!groupsMap.has(tag)) {
+        groupsMap.set(tag, []);
+      }
+      groupsMap.get(tag).push(col);
+    } else {
+      ungrouped.push(col);
+    }
+  }
+  const groups = [];
+  if (colorGroups) {
+    for (const [tag, groupConfig] of Object.entries(colorGroups)) {
+      if (groupsMap.has(tag)) {
+        groups.push({
+          colorTag: tag,
+          label: groupConfig.label,
+          columns: groupsMap.get(tag)
+        });
+      }
+    }
+  }
+  return { groups, ungrouped };
+}
+
+// src/components/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment24, jsx as jsx65, jsxs as jsxs53 } from "react/jsx-runtime";
 function getColumnLabel(title) {
   if (typeof title === "string" || typeof title === "number") {
@@ -23157,6 +23257,7 @@ function DataTableHeader({
     const isAfterFixedLeft = prevCol?.fixed === "left";
     const showBorderLeft = columnDividers && cellIndex > 0 && !isAfterFixedLeft && !col.fixed;
     const isLastCell = cellIndex === row.length - 1;
+    const headerBackgroundColor = isLeaf && col.colorTag ? getHeaderBgColor(col.colorTag) : "var(--muted)";
     return /* @__PURE__ */ jsxs53(
       TableHead,
       {
@@ -23165,6 +23266,7 @@ function DataTableHeader({
         "data-underverse-column-key": isLeaf ? col.key : void 0,
         style: {
           width: col.width,
+          backgroundColor: headerBackgroundColor,
           ...getStickyHeaderCellStyle(headerCell)
         },
         className: cn(
@@ -23241,7 +23343,6 @@ function DataTablePagination({
     result.push(totalPages);
     return result;
   }, [curPage, totalPages]);
-  if (!(totalItems > 0 && totalPages > 1)) return null;
   const controlButtonSize = size === "lg" ? "md" : "sm";
   const navBtnClass = size === "sm" ? "h-6 w-6 p-0 rounded-full" : size === "lg" ? "h-8 w-8 p-0 rounded-full" : "h-7 w-7 p-0 rounded-full";
   const navIconClass = size === "sm" ? "h-3.5 w-3.5" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
@@ -23423,13 +23524,18 @@ function DataTableToolbar({
   setDensity,
   setHeaderAlign,
   labels,
-  t
+  t,
+  columnColorGroups,
+  defaultVisibleKeys
 }) {
   const controlButtonSize = size === "lg" ? "md" : "sm";
   const controlButtonClass = size === "sm" ? "h-7 px-2 text-xs" : size === "lg" ? "h-9 px-3 text-sm" : "h-8 px-2";
   const iconClass = size === "sm" ? "w-3.5 h-3.5 mr-1" : "w-4 h-4 mr-1";
   const captionClass = size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-sm";
   const leafCols = React58.useMemo(() => getLeafColumns(columns), [columns]);
+  const { groups, ungrouped } = React58.useMemo(() => groupColumnsByColorTag(leafCols, columnColorGroups), [leafCols, columnColorGroups]);
+  const handleSelectAll = () => setVisibleCols(leafCols.map((c) => c.key));
+  const handleDefault = () => setVisibleCols(defaultVisibleKeys);
   return /* @__PURE__ */ jsxs55("div", { className: "flex items-center justify-between gap-4 mb-1", children: [
     /* @__PURE__ */ jsx67("div", { className: captionClass + " text-muted-foreground", children: caption }),
     /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2", children: [
@@ -23447,7 +23553,7 @@ function DataTableToolbar({
           ]
         }
       ),
-      enableColumnVisibilityToggle && /* @__PURE__ */ jsx67(
+      enableColumnVisibilityToggle && /* @__PURE__ */ jsxs55(
         DropdownMenu_default,
         {
           trigger: /* @__PURE__ */ jsxs55(Button_default, { variant: "ghost", size: controlButtonSize, className: controlButtonClass, children: [
@@ -23462,19 +23568,49 @@ function DataTableToolbar({
             ) }),
             labels?.columns || t("columns")
           ] }),
-          children: leafCols.map((c) => /* @__PURE__ */ jsxs55(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
-              },
-              children: [
-                /* @__PURE__ */ jsx67("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
-                /* @__PURE__ */ jsx67("span", { className: "truncate", children: c.title })
-              ]
-            },
-            c.key
-          ))
+          children: [
+            /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2 px-2 py-1.5 mb-1", children: [
+              /* @__PURE__ */ jsx67(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleSelectAll, children: labels?.selectAll || t("selectAll") || "Select All" }),
+              /* @__PURE__ */ jsx67(Button_default, { variant: "outline", size: "sm", className: "h-7 text-xs flex-1", onClick: handleDefault, children: labels?.default || t("default") || "Default" })
+            ] }),
+            /* @__PURE__ */ jsxs55("div", { className: "max-h-80 overflow-y-auto min-w-50", children: [
+              groups.length > 0 && groups.map((group) => /* @__PURE__ */ jsxs55(React58.Fragment, { children: [
+                /* @__PURE__ */ jsxs55("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase text-muted-foreground flex items-center gap-2 mt-1 bg-accent/30 sticky top-0 z-10 backdrop-blur-sm", children: [
+                  /* @__PURE__ */ jsx67("span", { className: "w-2.5 h-2.5 rounded-full shadow-sm", style: { backgroundColor: group.colorTag } }),
+                  group.label
+                ] }),
+                group.columns.map((c) => /* @__PURE__ */ jsxs55(
+                  DropdownMenuItem,
+                  {
+                    onClick: () => {
+                      setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                    },
+                    closeOnSelect: false,
+                    children: [
+                      /* @__PURE__ */ jsx67("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
+                      /* @__PURE__ */ jsx67("span", { className: "truncate", children: c.title })
+                    ]
+                  },
+                  c.key
+                ))
+              ] }, group.colorTag)),
+              groups.length > 0 && ungrouped.length > 0 && /* @__PURE__ */ jsx67("div", { className: "px-3 py-1.5 text-[11px] font-semibold uppercase text-muted-foreground mt-1 bg-accent/30 sticky top-0 z-10 backdrop-blur-sm", children: t("other") || "Other" }),
+              ungrouped.map((c) => /* @__PURE__ */ jsxs55(
+                DropdownMenuItem,
+                {
+                  onClick: () => {
+                    setVisibleCols((prev) => prev.includes(c.key) ? prev.filter((k) => k !== c.key) : [...prev, c.key]);
+                  },
+                  closeOnSelect: false,
+                  children: [
+                    /* @__PURE__ */ jsx67("input", { type: "checkbox", className: "mr-2 rounded-md border-border/50", readOnly: true, checked: visibleCols.includes(c.key) }),
+                    /* @__PURE__ */ jsx67("span", { className: "truncate", children: c.title })
+                  ]
+                },
+                c.key
+              ))
+            ] })
+          ]
         }
       ),
       enableHeaderAlignToggle && /* @__PURE__ */ jsx67(
@@ -23770,7 +23906,7 @@ function useStickyColumns(visibleColumns) {
   const getStickyHeaderClass = React63.useCallback(
     (col) => {
       if (!col.fixed) return "";
-      return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50 !bg-muted");
+      return cn("sticky", col.fixed === "left" && "left-0", col.fixed === "right" && "right-0", getBoundaryShadowClass(col), "z-50");
     },
     [getBoundaryShadowClass]
   );
@@ -23975,7 +24111,8 @@ function DataTable({
   estimatedRowHeight,
   overscan = 8,
   enableHeaderAutoFit = true,
-  labels
+  labels,
+  columnColorGroups
 }) {
   const t = useSmartTranslations("Common");
   const [columnWidthOverrides, setColumnWidthOverrides] = React64.useState({});
@@ -23983,6 +24120,9 @@ function DataTable({
     () => applyColumnWidthOverrides(columns, columnWidthOverrides),
     [columnWidthOverrides, columns]
   );
+  const defaultVisibleKeys = React64.useMemo(() => {
+    return getLeafColumns(columnsWithWidthOverrides).filter((col) => col.visible !== false).map((col) => col.key);
+  }, [columnsWithWidthOverrides]);
   const {
     headerAlign,
     setHeaderAlign,
@@ -24123,7 +24263,9 @@ function DataTable({
         setDensity,
         setHeaderAlign,
         labels,
-        t
+        t,
+        columnColorGroups,
+        defaultVisibleKeys
       }
     ),
     /* @__PURE__ */ jsx68(
@@ -24777,7 +24919,7 @@ var CalloutView = ({ node, updateAttributes, selected }) => {
                 children: currentEmoji
               }
             ),
-            children: /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-3 w-64 max-h-[360px] overflow-y-auto p-1", children: [
+            children: /* @__PURE__ */ jsxs62("div", { className: "flex flex-col gap-3 w-64 max-h-90 overflow-y-auto p-1", children: [
               /* @__PURE__ */ jsx76("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider px-1", children: t("callout.selectEmoji") }),
               /* @__PURE__ */ jsx76("div", { className: "h-44 overflow-y-auto border border-border/40 rounded-lg", children: /* @__PURE__ */ jsx76(EmojiPicker2, { onSelect: (emoji) => updateAttributes({ emoji }) }) }),
               /* @__PURE__ */ jsxs62("div", { className: "border-t border-border/50 pt-2 mt-1", children: [
@@ -24961,7 +25103,7 @@ var BookmarkView = ({ node, updateAttributes, selected, editor }) => {
           /* @__PURE__ */ jsx77("div", { className: "h-4 w-5/6 bg-muted-foreground/20 rounded" })
         ] }),
         /* @__PURE__ */ jsx77("div", { className: "h-20 w-32 bg-muted-foreground/20 rounded-lg flex-shrink-0" })
-      ] }) : /* @__PURE__ */ jsxs63("div", { className: "flex flex-col sm:flex-row items-stretch justify-between min-h-[100px]", children: [
+      ] }) : /* @__PURE__ */ jsxs63("div", { className: "flex flex-col sm:flex-row items-stretch justify-between min-h-25", children: [
         /* @__PURE__ */ jsxs63("div", { className: "flex-1 p-4 flex flex-col justify-between gap-1 min-w-0", children: [
           /* @__PURE__ */ jsxs63("div", { className: "flex flex-col gap-1 min-w-0", children: [
             /* @__PURE__ */ jsxs63("span", { className: "text-xs text-muted-foreground font-medium flex items-center gap-1.5 truncate", children: [
@@ -25244,7 +25386,7 @@ var FileCardView = ({ node, selected, editor, updateAttributes }) => {
             /* @__PURE__ */ jsxs64("div", { className: "text-xs text-muted-foreground flex items-center gap-2 mt-0.5", children: [
               fileSize ? /* @__PURE__ */ jsx78("span", { children: formatBytes(fileSize) }) : null,
               isUploading && /* @__PURE__ */ jsx78("span", { className: cn(
-                "font-medium truncate max-w-[200px]",
+                "font-medium truncate max-w-50",
                 uploadError ? "text-destructive" : "text-primary animate-pulse"
               ), children: uploadError ? `${t("fileCard.uploadFailed") || "T\u1EA3i l\xEAn th\u1EA5t b\u1EA1i"}: ${uploadError}` : t("fileCard.uploading") }),
               isUploading && uploadError && /* @__PURE__ */ jsxs64(
@@ -32109,7 +32251,7 @@ var LinkPreviewContent = ({ editor, onEdit }) => {
     editor.chain().focus().unsetLink().run();
   };
   return /* @__PURE__ */ jsxs73("div", { className: "flex items-center gap-1 p-1 max-w-sm", children: [
-    /* @__PURE__ */ jsx87("span", { className: "text-xs text-muted-foreground font-mono px-2 truncate max-w-[180px]", children: url }),
+    /* @__PURE__ */ jsx87("span", { className: "text-xs text-muted-foreground font-mono px-2 truncate max-w-45", children: url }),
     /* @__PURE__ */ jsx87("div", { className: "w-px h-6 bg-border/50 mx-1" }),
     /* @__PURE__ */ jsx87(ToolbarButton, { onClick: handleOpen, title: t("linkPreview.open") || "Open link", children: /* @__PURE__ */ jsx87(ExternalLink3, { className: "w-4 h-4" }) }),
     /* @__PURE__ */ jsx87(ToolbarButton, { onClick: onEdit, title: t("linkPreview.edit") || "Edit link", children: /* @__PURE__ */ jsx87(Edit2, { className: "w-4 h-4" }) }),
@@ -32123,9 +32265,14 @@ var CustomBubbleMenu = ({
 }) => {
   const SHOW_DELAY_MS = 180;
   const BUBBLE_MENU_OFFSET = 16;
+  const BUBBLE_MENU_ESTIMATED_HEIGHT = 44;
   const [isVisible, setIsVisible] = useState48(false);
   const [linkInputOpen, setLinkInputOpen] = useState48(false);
-  const [position, setPosition] = useState48({ top: 0, left: 0 });
+  const [position, setPosition] = useState48({
+    top: 0,
+    left: 0,
+    placement: "top"
+  });
   const menuRef = useRef33(null);
   const keepOpenRef = useRef33(false);
   const showTimeoutRef = useRef33(null);
@@ -32182,12 +32329,18 @@ var CustomBubbleMenu = ({
         return;
       }
       const viewportPadding = 8;
+      const menuHeight = menuRef.current?.getBoundingClientRect().height || BUBBLE_MENU_ESTIMATED_HEIGHT;
+      const editorTop = view.dom.getBoundingClientRect().top;
+      const selectionTop = Math.min(start.top, end.top);
+      const selectionBottom = Math.max(start.bottom, end.bottom);
+      const hasRoomAboveEditor = selectionTop - BUBBLE_MENU_OFFSET - menuHeight >= editorTop + viewportPadding;
+      const placement = hasRoomAboveEditor ? "top" : "bottom";
       const left = Math.min(
         window.innerWidth - viewportPadding,
         Math.max(viewportPadding, (start.left + end.left) / 2)
       );
-      const top = Math.max(viewportPadding, start.top - BUBBLE_MENU_OFFSET);
-      setPosition({ top, left });
+      const top = placement === "top" ? Math.max(viewportPadding, selectionTop - BUBBLE_MENU_OFFSET) : Math.min(window.innerHeight - viewportPadding, selectionBottom + BUBBLE_MENU_OFFSET);
+      setPosition({ top, left, placement });
       if (keepOpenRef.current) {
         clearShowTimeout();
         setIsVisible(true);
@@ -32232,7 +32385,7 @@ var CustomBubbleMenu = ({
         style: {
           top: `${position.top}px`,
           left: `${position.left}px`,
-          transform: "translate(-50%, -100%)"
+          transform: position.placement === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)"
         },
         onMouseDown: (e) => {
           const target = e.target;