@underverse-ui/underverse 2.0.11 → 2.0.13

package/dist/index.cjs

@@ -84,7 +84,7 @@ var init_form_control_size = __esm({
     };
     formControlLabelClass = "font-medium";
     formControlFixedClass = "min-h-0 overflow-hidden";
-    formControlValueClass = "max-h-full min-w-0 flex-1 truncate whitespace-nowrap";
+    formControlValueClass = "flex h-full items-center min-w-0 flex-1 truncate whitespace-nowrap";
     formControlOutlineClass = "border border-input hover:border-primary/40 focus-visible:outline-none focus-visible:border-ring";
     formControlGroupOutlineClass = "border border-input hover:border-primary/40 focus-within:border-ring";
   }
@@ -5848,17 +5848,60 @@ function getSelectionTableCell(view) {
   const cell = element?.closest?.("th,td");
   return cell instanceof HTMLElement ? cell : null;
 }
-function isRowResizeHotspot(cell, clientX, clientY) {
+function resolveRowResizeTarget(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  return nearBottom && !nearRight;
+  const row = cell.closest("tr");
+  if (!(row instanceof HTMLTableRowElement) || !(cell instanceof HTMLTableCellElement)) {
+    return null;
+  }
+  const distToBottom = Math.abs(clientY - rect.bottom);
+  const distToTop = Math.abs(clientY - rect.top);
+  const distToRight = Math.abs(clientX - rect.right);
+  const distToLeft = Math.abs(clientX - rect.left);
+  if (distToRight <= 3 || distToLeft <= 3) {
+    return null;
+  }
+  if (distToBottom <= TABLE_RESIZE_HIT_ZONE) {
+    return { row, cell };
+  }
+  if (distToTop <= TABLE_RESIZE_HIT_ZONE) {
+    const prevRow = row.previousElementSibling;
+    if (prevRow instanceof HTMLTableRowElement) {
+      const cellIndex = cell.cellIndex;
+      const prevCell = prevRow.children[cellIndex] ?? prevRow.firstElementChild;
+      if (prevCell instanceof HTMLTableCellElement) {
+        return { row: prevRow, cell: prevCell };
+      }
+    }
+  }
+  return null;
 }
-function isColumnResizeHotspot(cell, clientX, clientY) {
+function resolveColumnResizeTarget(cell, clientX, clientY) {
   const rect = cell.getBoundingClientRect();
-  const nearRight = rect.right - clientX <= TABLE_RESIZE_HIT_ZONE;
-  const nearBottom = rect.bottom - clientY <= TABLE_RESIZE_HIT_ZONE;
-  return nearRight && !nearBottom;
+  const row = cell.closest("tr");
+  if (!(row instanceof HTMLTableRowElement) || !(cell instanceof HTMLTableCellElement)) {
+    return null;
+  }
+  const distToRight = Math.abs(clientX - rect.right);
+  const distToLeft = Math.abs(clientX - rect.left);
+  const distToBottom = Math.abs(clientY - rect.bottom);
+  const distToTop = Math.abs(clientY - rect.top);
+  if (distToBottom <= 3 || distToTop <= 3) {
+    return null;
+  }
+  if (distToRight <= TABLE_RESIZE_HIT_ZONE) {
+    return { row, cell };
+  }
+  if (distToLeft <= TABLE_RESIZE_HIT_ZONE) {
+    const prevCell = cell.previousElementSibling;
+    if (prevCell instanceof HTMLTableCellElement) {
+      return { row, cell: prevCell };
+    }
+  }
+  return null;
+}
+function isRowResizeHotspot(cell, clientX, clientY) {
+  return resolveRowResizeTarget(cell, clientX, clientY) !== null;
 }
 function getRelativeBoundaryMetrics(surface, table, row, cell) {
   const surfaceRect = surface.getBoundingClientRect();
@@ -5910,7 +5953,7 @@ function getRelativeSelectedCellsMetrics(surface) {
     height: bottom - top
   };
 }
-var DEFAULT_TABLE_ROW_HEIGHT, MIN_TABLE_ROW_HEIGHT, COLUMN_RESIZE_LINE_THICKNESS, ROW_RESIZE_LINE_THICKNESS, UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, TABLE_RESIZE_HIT_ZONE;
+var DEFAULT_TABLE_ROW_HEIGHT, MIN_TABLE_ROW_HEIGHT, COLUMN_RESIZE_LINE_THICKNESS, ROW_RESIZE_LINE_THICKNESS, UEDITOR_TABLE_LAYOUT_CHANGE_EVENT, isRowResizingGlobal, TABLE_RESIZE_HIT_ZONE;
 var init_table_dom_utils = __esm({
   "src/components/UEditor/table-dom-utils.ts"() {
     "use strict";
@@ -5918,8 +5961,9 @@ var init_table_dom_utils = __esm({
     MIN_TABLE_ROW_HEIGHT = DEFAULT_TABLE_ROW_HEIGHT;
     COLUMN_RESIZE_LINE_THICKNESS = 2;
     ROW_RESIZE_LINE_THICKNESS = 2;
-    UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor-table-layout-change";
-    TABLE_RESIZE_HIT_ZONE = 10;
+    UEDITOR_TABLE_LAYOUT_CHANGE_EVENT = "ueditor:table-layout-change";
+    isRowResizingGlobal = { active: false };
+    TABLE_RESIZE_HIT_ZONE = 5;
   }
 });
 
@@ -6629,6 +6673,18 @@ var init_colors = __esm({
       const automaticColor = colors[0]?.color ?? "";
       const paletteColors = colors.slice(1);
       const customColorSelect = onCustomColorSelect ?? onSelect;
+      const [hexInput, setHexInput] = import_react71.default.useState(currentColor.startsWith("#") ? currentColor : "");
+      import_react71.default.useEffect(() => {
+        setHexInput(currentColor.startsWith("#") ? currentColor : "");
+      }, [currentColor]);
+      const commitHex = (val) => {
+        let formatted = val.trim();
+        if (!formatted) return;
+        if (!formatted.startsWith("#")) formatted = `#${formatted}`;
+        if (/^#([0-9A-F]{3}){1,2}$/i.test(formatted)) {
+          customColorSelect(formatted);
+        }
+      };
       import_react71.default.useEffect(() => {
         const input = colorInputRef.current;
         if (!input) return;
@@ -6640,7 +6696,7 @@ var init_colors = __esm({
         const input = colorInputRef.current;
         if (input) input.value = currentColor.startsWith("#") ? currentColor : "#000000";
       }, [currentColor]);
-      return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "w-56 p-2", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "w-56 p-2", "data-ueditor-keep-open": true, children: [
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "px-1 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
           "button",
@@ -6674,29 +6730,48 @@ var init_colors = __esm({
             children: currentColor === c.color && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Check, { className: cn("h-3.5 w-3.5", getSwatchCheckClass(c.color)) }) })
           }
         ) }, `${c.name}-${c.color}`)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
-          "button",
-          {
-            type: "button",
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => colorInputRef.current?.click(),
-            className: "mt-3 flex h-9 w-full items-center gap-3 rounded-md px-2 text-sm text-foreground transition-colors hover:bg-muted",
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: "h-5 w-5 rounded border border-border",
-                  style: {
-                    background: "linear-gradient(135deg, #ff004c 0%, #fffb00 22%, #00ff66 42%, #00d5ff 62%, #2446ff 78%, #ff00d4 100%)"
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "mt-3 flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "flex h-8 flex-1 items-center gap-1.5 rounded-md border border-input bg-muted/30 px-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+              "span",
+              {
+                className: "h-4 w-4 shrink-0 rounded-[2px] border border-border",
+                style: { backgroundColor: hexInput.startsWith("#") ? hexInput : currentColor.startsWith("#") ? currentColor : "transparent" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+              "input",
+              {
+                type: "text",
+                value: hexInput,
+                onChange: (e) => setHexInput(e.target.value),
+                onBlur: () => commitHex(hexInput),
+                onMouseDown: (e) => e.stopPropagation(),
+                onClick: (e) => e.stopPropagation(),
+                onKeyDown: (e) => {
+                  e.stopPropagation();
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitHex(hexInput);
                   }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "flex-1 text-center", children: t("colors.moreColors") }),
-              /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Palette, { className: "h-4 w-4 text-muted-foreground" })
-            ]
-          }
-        ),
+                },
+                placeholder: "#HEX",
+                className: "h-full w-full bg-transparent text-xs font-mono text-foreground outline-none placeholder:text-muted-foreground"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+            "button",
+            {
+              type: "button",
+              onMouseDown: (e) => e.stopPropagation(),
+              onClick: () => colorInputRef.current?.click(),
+              title: t("colors.moreColors"),
+              className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-input bg-muted/30 text-foreground transition-colors hover:bg-muted",
+              children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_lucide_react50.Palette, { className: "h-4 w-4 text-muted-foreground" })
+            }
+          )
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "input",
           {
@@ -7270,7 +7345,7 @@ var init_toolbar = __esm({
       return button;
     });
     ToolbarButton.displayName = "ToolbarButton";
-    ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { "aria-hidden": "true", className: "mx-1.5 h-7 w-px shrink-0 bg-[rgba(123,129,132,0.24)]" });
+    ToolbarDivider = () => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { "aria-hidden": "true", className: "mx-1 h-5 w-px shrink-0 bg-[rgba(123,129,132,0.24)]" });
     TableInsertGrid = ({
       insertLabel,
       previewTemplate,
@@ -7315,6 +7390,7 @@ var init_toolbar = __esm({
       maxImageFileSize = DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
       allowedImageMimeTypes = DEFAULT_UEDITOR_IMAGE_MIME_TYPES,
       fontFamilies,
+      defaultFontFamily = "Inter",
       fontSizes,
       lineHeights,
       letterSpacings
@@ -7357,9 +7433,9 @@ var init_toolbar = __esm({
       const currentFontSizeLabel = availableFontSizes.find((option) => normalizeStyleValue(option.value) === currentFontSize)?.label ?? "13";
       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 defaultFontFamily = availableFontFamilies[0];
-      const defaultFontFamilyValue = defaultFontFamily?.value ?? "";
-      const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : defaultFontFamily?.label ?? t("toolbar.fontDefault");
+      const defaultFontFamilyOption = availableFontFamilies.find((opt) => normalizeStyleValue(opt.value) === normalizeStyleValue(defaultFontFamily)) ?? availableFontFamilies[0];
+      const defaultFontFamilyValue = defaultFontFamilyOption?.value ?? defaultFontFamily ?? "Inter";
+      const displayedFontFamilyLabel = currentFontFamily ? currentFontFamilyLabel : defaultFontFamilyOption?.label ?? defaultFontFamily ?? t("toolbar.fontDefault");
       const displayedFontFamilyValue = currentFontFamily || defaultFontFamilyValue;
       const displayedFontSizeLabel = currentFontSize ? currentFontSizeLabel : "13";
       const activeFontSize = currentFontSize || "13px";
@@ -7491,7 +7567,7 @@ var init_toolbar = __esm({
         "div",
         {
           role: "toolbar",
-          className: "flex min-h-12 flex-nowrap items-center gap-0.5 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-2 py-2 dark:bg-muted/60",
+          className: "flex min-h-9 flex-nowrap items-center gap-0.5 overflow-x-auto border-b border-[rgba(196,197,213,0.6)] bg-[#F4F4F4] px-1.5 py-1 dark:bg-muted/60",
           children: [
             isFull && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               DropdownMenu,
@@ -7502,9 +7578,9 @@ var init_toolbar = __esm({
                     onClick: () => {
                     },
                     title: t("toolbar.fontFamily"),
-                    className: "h-8 w-44 max-w-44 justify-between gap-2 border border-[rgba(196,197,213,0.6)] bg-white px-2.5 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
+                    className: "h-7 w-40 max-w-40 justify-between gap-1.5 border border-[rgba(196,197,213,0.6)] bg-white px-2 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "min-w-0 flex-1 truncate text-left text-sm font-normal", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
+                      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "min-w-0 flex-1 truncate text-left text-xs font-normal", style: { fontFamily: displayedFontFamilyValue || void 0 }, children: displayedFontFamilyLabel }),
                       /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })
                     ]
                   }
@@ -7531,9 +7607,9 @@ var init_toolbar = __esm({
                     onClick: () => {
                     },
                     title: t("toolbar.fontSize"),
-                    className: "h-8 w-16 justify-between gap-2 border border-[rgba(196,197,213,0.6)] bg-white px-2.5 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
+                    className: "h-7 w-14 justify-between gap-1 border border-[rgba(196,197,213,0.6)] bg-white px-2 text-[#404040] shadow-[0_1px_2px_rgba(0,0,0,0.07)] hover:bg-white hover:text-[#404040] dark:bg-background dark:text-foreground",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "text-sm font-normal leading-none", children: displayedFontSizeLabel }),
+                      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { className: "text-xs font-normal leading-none", children: displayedFontSizeLabel }),
                       /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaChevronDownIcon, { className: "h-3 w-3 shrink-0 text-[#7B8184]" })
                     ]
                   }
@@ -7658,6 +7734,27 @@ var init_toolbar = __esm({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarDivider, {}),
+            (isMediumFull || isFull) && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+              DropdownMenu,
+              {
+                isOpen: isTableMenuOpen,
+                onOpenChange: setIsTableMenuOpen,
+                trigger: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarButton, { onClick: () => {
+                }, title: t("toolbar.table"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaTableIcon, { className: "h-4 w-4" }) }),
+                contentClassName: "p-2 min-w-56",
+                children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+                  TableInsertGrid,
+                  {
+                    insertLabel: t("tableMenu.insertTable"),
+                    previewTemplate: t("tableMenu.gridPreview"),
+                    onInsert: (rows, cols) => {
+                      editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
+                      setIsTableMenuOpen(false);
+                    }
+                  }
+                )
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleBold().run(), active: editor.isActive("bold"), title: t("toolbar.bold"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaBoldIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().toggleItalic().run(), active: editor.isActive("italic"), title: t("toolbar.italic"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaItalicIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
@@ -8128,27 +8225,6 @@ var init_toolbar = __esm({
                 ] })
               }
             ),
-            (isMediumFull || isFull) && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-              DropdownMenu,
-              {
-                isOpen: isTableMenuOpen,
-                onOpenChange: setIsTableMenuOpen,
-                trigger: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarButton, { onClick: () => {
-                }, title: t("toolbar.table"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaTableIcon, { className: "h-4 w-4" }) }),
-                contentClassName: "p-2 min-w-56",
-                children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-                  TableInsertGrid,
-                  {
-                    insertLabel: t("tableMenu.insertTable"),
-                    previewTemplate: t("tableMenu.gridPreview"),
-                    onInsert: (rows, cols) => {
-                      editor.chain().focus().insertTable({ rows, cols, withHeaderRow: true }).run();
-                      setIsTableMenuOpen(false);
-                    }
-                  }
-                )
-              }
-            ),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarDivider, {}),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().undo().run(), disabled: !editor.can().undo(), title: t("toolbar.undo"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaUndoIcon, { className: "h-4 w-4" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ToolbarButton, { onClick: () => editor.chain().focus().redo().run(), disabled: !editor.can().redo(), title: t("toolbar.redo"), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FigmaRedoIcon, { className: "h-4 w-4" }) }),
@@ -8347,7 +8423,7 @@ var init_editor_styles = __esm({
       "[&_.selectedCell]:after:absolute",
       "[&_.selectedCell]:after:inset-0",
       "[&_.selectedCell]:after:z-[2]",
-      "[&_.selectedCell]:after:bg-primary/15",
+      "[&_.selectedCell]:after:bg-primary/8",
       "[&_.selectedCell]:after:pointer-events-none",
       "[&_.column-resize-handle]:pointer-events-auto",
       "[&_.column-resize-handle]:cursor-col-resize",
@@ -8361,17 +8437,10 @@ var init_editor_styles = __esm({
       "[&_.column-resize-handle]:rounded-none",
       "[&_.column-resize-handle]:opacity-0",
       "[&_.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]:after:bg-primary",
+      "[&_.column-resize-handle]:duration-200",
+      "[&_.column-resize-handle]:delay-100",
+      "[&_.column-resize-handle]:ease-out",
+      "[&_.column-resize-handle]:after:hidden",
       "[&_.column-resize-dragging]:min-w-0",
       "[&.resize-cursor]:cursor-col-resize",
       "[&.resize-row-cursor]:cursor-row-resize",
@@ -9046,7 +9115,8 @@ var init_menu_bar = __esm({
       onSave,
       onExport,
       onSourceCode,
-      onPreview
+      onPreview,
+      showPreviewButton = true
     }) => {
       const t = useSmartTranslations("UEditor");
       useSharedEditorUiRenderState(editor);
@@ -9255,7 +9325,7 @@ var init_menu_bar = __esm({
             },
             key
           )),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+          showPreviewButton && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
             "button",
             {
               type: "button",
@@ -36473,6 +36543,15 @@ function edgeCell(view, event, side, handleWidth) {
   const index = map.map.indexOf($cell.pos - start);
   return index % map.width === 0 ? -1 : start + map.map[index - 1];
 }
+var handleHoverTimer = null;
+var pendingHandleCell = -1;
+function clearHandleHoverTimer() {
+  if (handleHoverTimer !== null) {
+    window.clearTimeout(handleHoverTimer);
+    handleHoverTimer = null;
+  }
+  pendingHandleCell = -1;
+}
 function updateHandle(view, value) {
   view.dispatch(view.state.tr.setMeta(import_tables2.columnResizingPluginKey, { setHandle: value }));
 }
@@ -36487,19 +36566,43 @@ function handleMouseMove(view, event, handleWidth, lastColumnResizable) {
     if (event.clientX - left <= handleWidth) cell = edgeCell(view, event, "left", handleWidth);
     else if (right - event.clientX <= handleWidth) cell = edgeCell(view, event, "right", handleWidth);
   }
-  if (cell === pluginState.activeHandle) return;
-  if (!lastColumnResizable && cell !== -1) {
+  if (cell === pluginState.activeHandle) {
+    clearHandleHoverTimer();
+    return;
+  }
+  if (cell === -1) {
+    clearHandleHoverTimer();
+    if (pluginState.activeHandle !== -1) {
+      updateHandle(view, -1);
+    }
+    return;
+  }
+  if (!lastColumnResizable) {
     const $cell = view.state.doc.resolve(cell);
     const table = $cell.node(-1);
     const map = import_tables2.TableMap.get(table);
     const tableStart = $cell.start(-1);
     const nodeAfter = $cell.nodeAfter;
     if (!nodeAfter) return;
-    if (map.colCount($cell.pos - tableStart) + nodeAfter.attrs.colspan - 1 === map.width - 1) return;
+    if (map.colCount($cell.pos - tableStart) + nodeAfter.attrs.colspan - 1 === map.width - 1) {
+      clearHandleHoverTimer();
+      if (pluginState.activeHandle !== -1) {
+        updateHandle(view, -1);
+      }
+      return;
+    }
   }
-  updateHandle(view, cell);
+  if (pendingHandleCell === cell) return;
+  clearHandleHoverTimer();
+  pendingHandleCell = cell;
+  handleHoverTimer = window.setTimeout(() => {
+    handleHoverTimer = null;
+    pendingHandleCell = -1;
+    updateHandle(view, cell);
+  }, 100);
 }
 function handleMouseLeave(view) {
+  clearHandleHoverTimer();
   if (!view.editable) return;
   const pluginState = import_tables2.columnResizingPluginKey.getState(view.state);
   if (pluginState && pluginState.activeHandle > -1 && !pluginState.dragging) {
@@ -36548,7 +36651,7 @@ function getColumnResizeGhost(view) {
     ghost.style.pointerEvents = "none";
     ghost.style.width = "2px";
     ghost.style.backgroundColor = "var(--primary, #2563eb)";
-    ghost.style.opacity = "1";
+    ghost.style.opacity = "0.5";
     ghost.style.borderRadius = "9999px";
     ghost.style.boxShadow = "0 0 0 1px color-mix(in oklch, var(--background, #fff) 80%, transparent)";
     ghost.style.transform = "translateX(-1px)";
@@ -36577,6 +36680,7 @@ function showColumnResizeGhost(view, cell, dragging, width) {
   ghost.style.height = `${rect.height}px`;
 }
 function handleMouseDown(view, event, cellMinWidth) {
+  clearHandleHoverTimer();
   if (!view.editable) return false;
   const win = view.dom.ownerDocument.defaultView ?? window;
   const pluginState = import_tables2.columnResizingPluginKey.getState(view.state);
@@ -36698,6 +36802,7 @@ function dynamicColumnResizing({
 
 // src/components/UEditor/table-align.ts
 init_table_align_utils();
+init_table_dom_utils();
 function normalizeTableAlign(value) {
   if (value === "left" || value === "center" || value === "right") {
     return value;
@@ -36824,6 +36929,38 @@ var UEditorTable = import_extension_table.Table.extend({
           lastColumnResizable: this.options.lastColumnResizable
         })
       ] : [],
+      new import_state7.Plugin({
+        key: new import_state7.PluginKey("tableRowResizeInterceptor"),
+        props: {
+          handleDOMEvents: {
+            mousedown(view, event) {
+              if (event.button !== 0) return false;
+              const target = resolveEventElement(event.target);
+              const cell = target?.closest("th,td");
+              if (cell instanceof HTMLElement && isRowResizeHotspot(cell, event.clientX, event.clientY)) {
+                isRowResizingGlobal.active = true;
+                return true;
+              }
+              return false;
+            },
+            mousemove(_view, event) {
+              if (isRowResizingGlobal.active) {
+                if (event.buttons === 0) {
+                  isRowResizingGlobal.active = false;
+                  return false;
+                }
+                event.preventDefault();
+                return true;
+              }
+              return false;
+            },
+            mouseup() {
+              isRowResizingGlobal.active = false;
+              return false;
+            }
+          }
+        }
+      }),
       (0, import_tables3.tableEditing)({
         allowTableNodeSelection: this.options.allowTableNodeSelection
       }),
@@ -38672,8 +38809,11 @@ function buildUEditorExtensions({
       placeholder,
       emptyEditorClass: "is-editor-empty",
       emptyNodeClass: "is-empty",
-      shouldShow: ({ node, hasTable }) => {
+      shouldShow: ({ editor, node, hasTable, isEmptyDoc }) => {
         const nodeName = node.type.name;
+        if (!isEmptyDoc || editor.state.doc.childCount !== 1) {
+          return false;
+        }
         if (nodeName === "table" || nodeName === "tableCell" || nodeName === "tableHeader") {
           return false;
         }
@@ -39980,7 +40120,11 @@ var CustomBubbleMenu = ({
         setIsVisible(false);
         return;
       }
-      if (!keepOpenRef.current && (context2 === "none" || !view.hasFocus())) {
+      const isInputFocused = () => {
+        const active = document.activeElement;
+        return Boolean(active && (menuRef.current?.contains(active) || active.closest?.("[data-ueditor-keep-open]")));
+      };
+      if (!keepOpenRef.current && !isInputFocused() && (context2 === "none" || !view.hasFocus())) {
         clearShowTimeout();
         setIsVisible(false);
         return;
@@ -40021,7 +40165,8 @@ var CustomBubbleMenu = ({
       }, SHOW_DELAY_MS);
     };
     const handleBlur = () => {
-      if (!keepOpenRef.current) {
+      const isInputFocused = Boolean(document.activeElement && (menuRef.current?.contains(document.activeElement) || document.activeElement.closest?.("[data-ueditor-keep-open]")));
+      if (!keepOpenRef.current && !isInputFocused) {
         clearShowTimeout();
         setIsVisible(false);
       }
@@ -40115,6 +40260,9 @@ var CustomBubbleMenu = ({
           } else if (target?.closest?.("[data-ueditor-keep-open]")) {
             setKeepOpen(true);
           }
+          if (target && target.closest("input, textarea, select")) {
+            return;
+          }
           e.preventDefault();
         },
         children: context === "link" && !keepOpen && !linkInputOpen ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
@@ -43688,7 +43836,7 @@ function createKey(name) {
   keys[name] = 0;
   return name + "$";
 }
-var PluginKey6 = class {
+var PluginKey7 = class {
   /**
   Create a plugin key.
   */
@@ -44120,7 +44268,7 @@ function tableNodeTypes2(schema) {
   }
   return result;
 }
-var tableEditingKey = new PluginKey6("selectingCells");
+var tableEditingKey = new PluginKey7("selectingCells");
 function cellAround2($pos) {
   for (let d = $pos.depth - 1; d > 0; d--) if ($pos.node(d).type.spec.tableRole == "row") return $pos.node(0).resolve($pos.before(d + 1));
   return null;
@@ -44351,7 +44499,7 @@ var CellBookmark = class CellBookmark2 {
     else return Selection.near($headCell, 1);
   }
 };
-var fixTablesKey = new PluginKey6("fix-tables");
+var fixTablesKey = new PluginKey7("fix-tables");
 function convertTableNodeToArrayOfRows(tableNode) {
   const map = TableMap4.get(tableNode);
   const rows = [];
@@ -44829,7 +44977,7 @@ function atEndOfCell(view, axis, dir) {
   }
   return null;
 }
-var columnResizingPluginKey2 = new PluginKey6("tableColumnResizing");
+var columnResizingPluginKey2 = new PluginKey7("tableColumnResizing");
 
 // src/components/UEditor/table-controls.tsx
 var import_lucide_react57 = require("lucide-react");
@@ -45278,6 +45426,8 @@ init_Tooltip();
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var ADD_COLUMN_RAIL_GAP = 4;
 var ADD_ROW_RAIL_GAP = 4;
+var BUTTON_LONG_SIZE = 36;
+var BUTTON_SHORT_SIZE = 14;
 function TableAddRails({
   addColumnVisible,
   addRowVisible,
@@ -45290,10 +45440,10 @@ function TableAddRails({
   quickAddRowLabel
 }) {
   const visibleBounds = getVisibleTableBounds(layout);
-  const columnRailTop = visibleBounds.top;
+  const columnRailTop = visibleBounds.top + Math.max(0, (visibleBounds.height - BUTTON_LONG_SIZE) / 2);
   const columnRailLeft = visibleBounds.right + ADD_COLUMN_RAIL_GAP;
   const rowRailTop = layout.wrapperTop + layout.wrapperHeight + ADD_ROW_RAIL_GAP;
-  const rowRailLeft = visibleBounds.left;
+  const rowRailLeft = visibleBounds.left + Math.max(0, (visibleBounds.width - BUTTON_LONG_SIZE) / 2);
   const showColumnRail = controlsVisible || addColumnVisible;
   const showRowRail = controlsVisible || addRowVisible;
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(import_jsx_runtime97.Fragment, { children: [
@@ -45318,15 +45468,15 @@ function TableAddRails({
             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"
+              "transition-[opacity,transform,colors] duration-200 delay-100 ease-out cursor-pointer hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             style: {
-              top: showColumnRail ? columnRailTop : columnRailTop + Math.max(0, visibleBounds.height / 2 - 24),
+              top: columnRailTop,
               left: columnRailLeft,
-              width: showColumnRail ? 18 : 12,
-              height: showColumnRail ? visibleBounds.height : 48,
+              width: BUTTON_SHORT_SIZE,
+              height: BUTTON_LONG_SIZE,
               opacity: showColumnRail ? 1 : 0,
-              transform: showColumnRail ? "scale(1)" : "scale(0.92)",
+              transform: showColumnRail ? "scale(1)" : "scale(0.85)",
               pointerEvents: showColumnRail ? "auto" : "none"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
@@ -45355,15 +45505,15 @@ function TableAddRails({
             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"
+              "transition-[opacity,transform,colors] duration-200 delay-100 ease-out cursor-pointer hover:bg-accent hover:text-foreground disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             style: {
               top: rowRailTop,
-              left: showRowRail ? rowRailLeft : rowRailLeft + Math.max(0, visibleBounds.width / 2 - 24),
-              width: showRowRail ? visibleBounds.width : 48,
-              height: showRowRail ? 16 : 12,
+              left: rowRailLeft,
+              width: BUTTON_LONG_SIZE,
+              height: BUTTON_SHORT_SIZE,
               opacity: showRowRail ? 1 : 0,
-              transform: showRowRail ? "scale(1)" : "scale(0.92)",
+              transform: showRowRail ? "scale(1)" : "scale(0.85)",
               pointerEvents: showRowRail ? "auto" : "none"
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "text-sm font-medium leading-none", children: "+" })
@@ -45500,7 +45650,7 @@ function TableRowHandles({
                       onStartDrag(rowHandle);
                     },
                     className: cn(
-                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-200 delay-100 ease-out",
                       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: {
@@ -45575,7 +45725,7 @@ function TableColumnHandles({
                       onStartDrag(columnHandle);
                     },
                     className: cn(
-                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-150",
+                      "inline-flex h-6 w-6 items-center justify-center rounded-full transition-[opacity,transform,colors,border,background-color] duration-200 delay-100 ease-out",
                       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: {
@@ -45964,7 +46114,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
   const updateHoverState = import_react77.default.useCallback((event) => {
     const activeLayout = layoutRef.current;
     const surface = containerRef.current;
-    if (!activeLayout || !surface || dragStateRef.current) {
+    if (!activeLayout || !surface || dragStateRef.current || event.buttons !== 0) {
       setHoverState(DEFAULT_TABLE_HOVER_STATE);
       return;
     }
@@ -46098,7 +46248,7 @@ function TableControls({ editor, containerRef, showCellInspector = true }) {
     return result;
   }, [editor, scheduleSyncFromSelection]);
   const canExpandTable = Boolean(layout);
-  const controlsVisible = dragPreview !== null;
+  const controlsVisible = false;
   const tableMenuOpen = openMenuKey === "table";
   const startTableResize = import_react77.default.useCallback((event) => {
     if (event.button !== 0 || dragStateRef.current) return;
@@ -46625,6 +46775,9 @@ function useTableRowResize({
       pendingHeight: startHeight
     };
     showRowGuide(table, row, cell, startHeight);
+    isRowResizingGlobal.active = true;
+    window.getSelection()?.removeAllRanges();
+    document.body.style.userSelect = "none";
     document.body.style.cursor = "row-resize";
     event.preventDefault();
     event.stopPropagation();
@@ -46666,6 +46819,8 @@ function useTableRowResize({
       editor.view.dispatch(tr);
     }
     stateRef.current = null;
+    isRowResizingGlobal.active = false;
+    document.body.style.userSelect = "";
     document.body.style.cursor = "";
     clearHoveredTableCell();
     clearAllTableResizeHover();
@@ -46674,6 +46829,8 @@ function useTableRowResize({
   const cancelResize = import_react78.default.useCallback(() => {
     if (!stateRef.current) return;
     stateRef.current = null;
+    isRowResizingGlobal.active = false;
+    document.body.style.userSelect = "";
     document.body.style.cursor = "";
     clearHoveredTableCell();
     clearAllTableResizeHover();
@@ -46681,6 +46838,8 @@ function useTableRowResize({
   }, [clearAllTableResizeHover, clearHoveredTableCell, scheduleTableLayoutSync]);
   const cleanup = import_react78.default.useCallback(() => {
     stateRef.current = null;
+    isRowResizingGlobal.active = false;
+    document.body.style.userSelect = "";
     document.body.style.cursor = "";
   }, []);
   return {
@@ -46729,11 +46888,21 @@ function useUEditorTableInteractions(editor, editable = true) {
       guide.style.opacity = "0";
     }
   }, [getProseMirrorElement]);
+  const hotspotTimerRef = (0, import_react79.useRef)(null);
+  const activeHotspotKeyRef = (0, import_react79.useRef)(null);
+  const clearHotspotTimer = import_react79.default.useCallback(() => {
+    if (hotspotTimerRef.current !== null) {
+      window.clearTimeout(hotspotTimerRef.current);
+      hotspotTimerRef.current = null;
+    }
+  }, []);
   const clearAllTableResizeHover = import_react79.default.useCallback(() => {
+    clearHotspotTimer();
+    activeHotspotKeyRef.current = null;
     setEditorResizeCursor("");
     hideColumnGuide();
     hideRowGuide();
-  }, [hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
+  }, [clearHotspotTimer, hideColumnGuide, hideRowGuide, setEditorResizeCursor]);
   const updateActiveCellHighlight = import_react79.default.useCallback((cell) => {
     const surface = editorContentRef.current;
     const highlight = activeTableCellHighlightRef.current;
@@ -46872,6 +47041,10 @@ function useUEditorTableInteractions(editor, editable = true) {
       if (syncActiveRowResizeGuide()) {
         return;
       }
+      if (event.buttons !== 0) {
+        clearAllTableResizeHover();
+        return;
+      }
       const target = resolveEventElement(event.target);
       if (!(target instanceof Element)) {
         clearAllTableResizeHover();
@@ -46891,18 +47064,46 @@ function useUEditorTableInteractions(editor, editable = true) {
         clearAllTableResizeHover();
         return;
       }
-      const nearBottom = isRowResizeHotspot(cell, event.clientX, event.clientY);
-      const nearRight = isColumnResizeHotspot(cell, event.clientX, event.clientY);
-      if (nearBottom && cell instanceof HTMLTableCellElement) {
-        hideColumnGuide();
-        showRowGuide(table, row, cell);
+      const rowTarget = resolveRowResizeTarget(cell, event.clientX, event.clientY);
+      const colTarget = resolveColumnResizeTarget(cell, event.clientX, event.clientY);
+      if (rowTarget) {
+        const hotspotKey = `row:${rowTarget.row.rowIndex}-${rowTarget.cell.cellIndex}`;
+        if (activeHotspotKeyRef.current === hotspotKey) {
+          hideColumnGuide();
+          showRowGuide(table, rowTarget.row, rowTarget.cell);
+          return;
+        }
+        if (activeHotspotKeyRef.current !== hotspotKey) {
+          clearHotspotTimer();
+          activeHotspotKeyRef.current = hotspotKey;
+          hotspotTimerRef.current = window.setTimeout(() => {
+            hotspotTimerRef.current = null;
+            hideColumnGuide();
+            showRowGuide(table, rowTarget.row, rowTarget.cell);
+          }, 100);
+        }
         return;
       }
-      if (nearRight && cell instanceof HTMLTableCellElement) {
-        hideRowGuide();
-        showColumnGuide(table, row, cell);
+      if (colTarget) {
+        const hotspotKey = `col:${colTarget.row.rowIndex}-${colTarget.cell.cellIndex}`;
+        if (activeHotspotKeyRef.current === hotspotKey) {
+          hideRowGuide();
+          showColumnGuide(table, colTarget.row, colTarget.cell);
+          return;
+        }
+        if (activeHotspotKeyRef.current !== hotspotKey) {
+          clearHotspotTimer();
+          activeHotspotKeyRef.current = hotspotKey;
+          hotspotTimerRef.current = window.setTimeout(() => {
+            hotspotTimerRef.current = null;
+            hideRowGuide();
+            showColumnGuide(table, colTarget.row, colTarget.cell);
+          }, 100);
+        }
         return;
       }
+      clearHotspotTimer();
+      activeHotspotKeyRef.current = null;
       clearAllTableResizeHover();
     };
     const handleEditorMouseLeave = () => {
@@ -46923,15 +47124,22 @@ function useUEditorTableInteractions(editor, editable = true) {
         clearActiveTableCell();
         return;
       }
-      setActiveTableCell(cell);
-      scheduleActiveCellSync(cell);
       const row = cell.closest("tr");
       const table = cell.closest("table");
       if (!(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) return;
-      if (beginResize(event, table, row, cell)) {
-        suppressActiveCellHighlightRef.current = true;
-        updateActiveCellHighlight(null);
+      const rowTarget = resolveRowResizeTarget(cell, event.clientX, event.clientY);
+      if (rowTarget) {
+        event.preventDefault();
+        event.stopPropagation();
+        window.getSelection()?.removeAllRanges();
+        if (beginResize(event, table, rowTarget.row, rowTarget.cell)) {
+          suppressActiveCellHighlightRef.current = true;
+          updateActiveCellHighlight(null);
+          return;
+        }
       }
+      setActiveTableCell(cell);
+      scheduleActiveCellSync(cell);
     };
     const handlePointerMove = (event) => {
       handleRowResizePointerMove(event);
@@ -47020,8 +47228,9 @@ function useUEditorTableInteractions(editor, editable = true) {
       clearActiveTableCell();
       clearHoveredTableCell();
       clearAllTableResizeHover();
+      clearHotspotTimer();
     };
-  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHoveredTableCell, editable, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, scheduleTableLayoutSync, setActiveTableCell, setHoveredTableCell, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
+  }, [beginResize, cancelResize, cleanupRowResize, clearActiveTableCell, clearAllTableResizeHover, clearHotspotTimer, clearHoveredTableCell, editable, editor, handleRowResizePointerMove, handleRowResizePointerUp, hideColumnGuide, hideRowGuide, isRowResizing, scheduleTableLayoutSync, setActiveTableCell, setHoveredTableCell, showColumnGuide, showRowGuide, syncActiveRowResizeGuide, syncActiveTableCellFromSelection, updateActiveCellHighlight]);
   return {
     editorContentRef,
     tableColumnGuideRef,
@@ -47783,6 +47992,7 @@ var UEditor = import_react84.default.forwardRef(({
   variant = "default",
   rounded = true,
   fontFamilies,
+  defaultFontFamily = "Inter",
   fontSizes,
   lineHeights,
   letterSpacings,
@@ -47791,6 +48001,7 @@ var UEditor = import_react84.default.forwardRef(({
   uploadFileForSave,
   extraExtensions,
   showMenuBar = false,
+  showPreviewButton = true,
   onSave,
   onExport,
   onSourceCode,
@@ -48076,7 +48287,8 @@ var UEditor = import_react84.default.forwardRef(({
               onSave,
               onExport,
               onSourceCode,
-              onPreview
+              onPreview,
+              showPreviewButton
             }
           ) }),
           showToolbar && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
@@ -48089,6 +48301,7 @@ var UEditor = import_react84.default.forwardRef(({
               maxImageFileSize,
               allowedImageMimeTypes,
               fontFamilies,
+              defaultFontFamily,
               fontSizes,
               lineHeights,
               letterSpacings
@@ -48114,6 +48327,7 @@ var UEditor = import_react84.default.forwardRef(({
             },
             className: "relative flex-1 overflow-y-auto",
             style: {
+              fontFamily: defaultFontFamily,
               minHeight: editable ? minHeight : void 0,
               maxHeight
             },
@@ -48123,7 +48337,7 @@ var UEditor = import_react84.default.forwardRef(({
                 {
                   ref: tableColumnGuideRef,
                   "aria-hidden": "true",
-                  className: "pointer-events-none absolute z-20 bg-primary opacity-0 transition-opacity duration-100"
+                  className: "pointer-events-none absolute z-20 bg-primary/50 opacity-0 transition-opacity duration-200 delay-100 ease-out"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
@@ -48131,7 +48345,7 @@ var UEditor = import_react84.default.forwardRef(({
                 {
                   ref: tableRowGuideRef,
                   "aria-hidden": "true",
-                  className: "pointer-events-none absolute z-20 bg-primary opacity-0 transition-opacity duration-100"
+                  className: "pointer-events-none absolute z-20 bg-primary/50 opacity-0 transition-opacity duration-200 delay-100 ease-out"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
@@ -48140,7 +48354,7 @@ var UEditor = import_react84.default.forwardRef(({
                   ref: activeTableCellHighlightRef,
                   "aria-hidden": "true",
                   "data-ueditor-active-cell-highlight": "",
-                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border-2 border-primary bg-primary/10"
+                  className: "pointer-events-none hidden absolute z-20 rounded-[2px] border border-primary/50 bg-primary/5"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(