@windoc/react 0.1.0 → 0.2.1

package/dist/index.js

@@ -77,7 +77,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Editor.tsx
-var import_react21 = require("react");
+var import_react12 = require("react");
 
 // src/EditorContext.tsx
 var import_react = require("react");
@@ -178,69 +178,108 @@ function RedoTool() {
 }
 
 // src/toolbar/ColumnTool.tsx
+var import_react4 = require("react");
+
+// src/utils/useDropdown.ts
 var import_react3 = require("react");
+function useDropdown() {
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
+  const [position, setPosition] = (0, import_react3.useState)({ top: 0, left: 0 });
+  const triggerRef = (0, import_react3.useRef)(null);
+  const open = () => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setPosition({ top: rect.bottom + 2, left: rect.left });
+    }
+    setIsOpen(true);
+  };
+  const close = () => setIsOpen(false);
+  const toggle = () => isOpen ? close() : open();
+  const portalStyle = {
+    position: "fixed",
+    top: position.top,
+    left: position.left,
+    zIndex: 9999
+  };
+  (0, import_react3.useEffect)(() => {
+    if (!isOpen) return;
+    const handler = (e) => {
+      if (triggerRef.current && !triggerRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [isOpen]);
+  return { triggerRef, isOpen, toggle, open, close, portalStyle };
+}
+
+// src/utils/DropdownPortal.tsx
+var import_react_dom = require("react-dom");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function DropdownPortal({ isOpen, style, className, children }) {
+  if (!isOpen) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, style, children }),
+    document.body
+  );
+}
+
+// src/toolbar/ColumnTool.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ColumnTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react3.useState)(false);
-  const [currentColumns, setCurrentColumns] = (0, import_react3.useState)(1);
-  const [gap, setGap] = (0, import_react3.useState)(20);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [currentColumns, setCurrentColumns] = (0, import_react4.useState)(1);
+  const [gap, setGap] = (0, import_react4.useState)(20);
   const handleColumn = (col) => {
     editorRef.current?.command.executeColumnCount(col);
     setCurrentColumns(col);
-    setVisible(false);
   };
   const handleGapChange = (value) => {
     const clampedValue = Math.max(0, Math.min(100, value));
     setGap(clampedValue);
     editorRef.current?.command.executeColumnGap(clampedValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "menu-item__column", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "div",
-      {
-        className: `options ${visible ? "visible" : ""}`,
-        onClick: (e) => e.stopPropagation(),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("ul", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
-          ] }),
-          currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "option-divider" }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "option-row", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { children: "Gap (px)" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "input",
-                {
-                  type: "number",
-                  min: 0,
-                  max: 100,
-                  value: gap,
-                  onChange: (e) => handleGapChange(Number(e.target.value)),
-                  onClick: (e) => e.stopPropagation()
-                }
-              )
-            ] })
-          ] })
-        ]
-      }
-    )
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "menu-item__column", ref: triggerRef, onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("ul", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { onClick: () => handleColumn(1), children: "1 Column" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { onClick: () => handleColumn(2), children: "2 Columns" })
+      ] }),
+      currentColumns > 1 && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "option-divider" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "option-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("label", { children: "Gap (px)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "number",
+              min: 0,
+              max: 100,
+              value: gap,
+              onChange: (e) => handleGapChange(Number(e.target.value)),
+              onClick: (e) => e.stopPropagation()
+            }
+          )
+        ] })
+      ] })
+    ] }) })
   ] });
 }
 
 // src/toolbar/TableTool.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function TableTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react4.useState)(false);
-  const [hoverRow, setHoverRow] = (0, import_react4.useState)(0);
-  const [hoverCol, setHoverCol] = (0, import_react4.useState)(0);
-  const containerRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react5.useState)(false);
+  const [hoverRow, setHoverRow] = (0, import_react5.useState)(0);
+  const [hoverCol, setHoverCol] = (0, import_react5.useState)(0);
+  const containerRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -260,11 +299,11 @@ function TableTool() {
     setHoverRow(0);
     setHoverCol(0);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "table-dropdown", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
+    visible && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "table-dropdown", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "table-dropdown-header", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
@@ -280,8 +319,7 @@ function TableTool() {
 }
 
 // src/toolbar/TitleTool.tsx
-var import_react5 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var LEVELS = [
   { level: null, label: "Body" },
   { level: "first", label: "Heading 1" },
@@ -293,16 +331,15 @@ var LEVELS = [
 ];
 function TitleTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react5.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const activeLevel = rangeStyle?.level || null;
   const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
   const handleTitle = (level) => {
     editorRef.current?.command.executeTitle(level);
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "menu-item__title", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__title", ref: triggerRef, onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -316,24 +353,22 @@ function TitleTool() {
 }
 
 // src/toolbar/FontTool.tsx
-var import_react6 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FONTS = [
   { family: "Arial", label: "Sans Serif" },
   { family: "Times New Roman", label: "Serif" }
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react6.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const activeFont = rangeStyle?.font || "Arial";
   const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
   const handleFont = (family) => {
     editorRef.current?.command.executeFont(family);
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "menu-item__font", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__font", ref: triggerRef, onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font", children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "li",
       {
         "data-family": family,
@@ -348,20 +383,18 @@ function FontTool() {
 }
 
 // src/toolbar/FontSizeTool.tsx
-var import_react7 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var SIZES = [56, 48, 34, 32, 29, 24, 21, 20, 18, 16, 14, 12, 10, 8];
 function FontSizeTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react7.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const activeSize = rangeStyle?.size ?? 16;
   const handleSize = (size) => {
     editorRef.current?.command.executeSize(size);
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "menu-item__size", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__size", ref: triggerRef, onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Font Size", children: activeSize }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: SIZES.map((size) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -374,21 +407,19 @@ function FontSizeTool() {
 }
 
 // src/toolbar/LineHeightTool.tsx
-var import_react8 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
 function LineHeightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react8.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const activeMargin = rangeStyle?.rowMargin ?? 1;
   const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
   const handleLineHeight = (value) => {
     editorRef.current?.command.executeRowMargin(Number(value));
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "menu-item__line-height", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__line-height", ref: triggerRef, onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "select", title: "Line Height", children: activeLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -401,9 +432,8 @@ function LineHeightTool() {
 }
 
 // src/toolbar/ColorTool.tsx
-var import_react9 = require("react");
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var COLOR_PALETTE = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
@@ -416,37 +446,24 @@ var COLOR_PALETTE = [
 ];
 function ColorTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react9.useState)(false);
-  const containerRef = (0, import_react9.useRef)(null);
+  const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
   const activeColor = rangeStyle?.color || "#000000";
-  (0, import_react9.useEffect)(() => {
-    if (!visible) return;
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [visible]);
   const handleColor = (color) => {
     editorRef.current?.command.executeColor(color);
-    setVisible(false);
   };
   const handleReset = () => {
     editorRef.current?.command.executeColor(null);
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "menu-item__color", ref: containerRef, title: "Font Color", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Baseline, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { style: { backgroundColor: activeColor } }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "color-palette-dropdown", onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__color", ref: triggerRef, title: "Font Color", onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.Baseline, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor } }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react4.RotateCcw, { size: 12 }),
         "Reset"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "div",
         {
           className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -456,14 +473,13 @@ function ColorTool() {
         },
         color
       )) }, ri)) })
-    ] })
+    ] }) })
   ] });
 }
 
 // src/toolbar/HighlightTool.tsx
-var import_react10 = require("react");
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var HIGHLIGHT_PALETTE = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
@@ -476,37 +492,24 @@ var HIGHLIGHT_PALETTE = [
 ];
 function HighlightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react10.useState)(false);
-  const containerRef = (0, import_react10.useRef)(null);
+  const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
   const activeColor = rangeStyle?.highlight || "";
-  (0, import_react10.useEffect)(() => {
-    if (!visible) return;
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [visible]);
   const handleColor = (color) => {
     editorRef.current?.command.executeHighlight(color);
-    setVisible(false);
   };
   const handleReset = () => {
     editorRef.current?.command.executeHighlight(null);
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "menu-item__highlight", ref: containerRef, title: "Highlight", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "color-palette-dropdown", onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "menu-item__highlight", ref: triggerRef, title: "Highlight", onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.Highlighter, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: "color-palette-reset", onClick: handleReset, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react5.RotateCcw, { size: 12 }),
         "None"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "div",
         {
           className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -516,96 +519,93 @@ function HighlightTool() {
         },
         color
       )) }, ri)) })
-    ] })
+    ] }) })
   ] });
 }
 
 // src/toolbar/BoldTool.tsx
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function BoldTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.bold === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Bold, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Bold, { size: 16 }) });
 }
 
 // src/toolbar/ItalicTool.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function ItalicTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.italic === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react7.Italic, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Italic, { size: 16 }) });
 }
 
 // src/toolbar/UnderlineTool.tsx
-var import_react11 = require("react");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
 function UnderlineTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react11.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const isActive = rangeStyle?.underline === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "select", onClick: () => setVisible(!visible) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { "data-decoration-style": style, onClick: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, ref: triggerRef, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Underline, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "select", onClick: toggle }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", { children: STYLES.map((style) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
-      setVisible(false);
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {}) }, style)) }) })
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("i", {}) }, style)) }) })
   ] });
 }
 
 // src/toolbar/StrikeoutTool.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function StrikeoutTool() {
   const { editorRef, rangeStyle } = useEditor();
   const isActive = rangeStyle?.strikeout === true;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react9.Strikethrough, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react9.Strikethrough, { size: 16 }) });
 }
 
 // src/toolbar/LeftAlignTool.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function LeftAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react10.AlignLeft, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react10.AlignLeft, { size: 16 }) });
 }
 
 // src/toolbar/CenterAlignTool.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CenterAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "center";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react11.AlignCenter, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.AlignCenter, { size: 16 }) });
 }
 
 // src/toolbar/RightAlignTool.tsx
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function RightAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "right";
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react12.AlignRight, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react12.AlignRight, { size: 16 }) });
 }
 
 // src/toolbar/JustifyTool.tsx
 var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function JustifyTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react13.AlignJustify, { size: 16 }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react13.AlignJustify, { size: 16 }) });
 }
 
 // src/toolbar/ListTool.tsx
-var import_react12 = require("react");
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var OL_PRESETS = [
   { preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
   { preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
@@ -623,56 +623,29 @@ var UL_PRESETS = [
   { preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
 ];
 function PresetCell({ option, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       onClick,
       className: "list-preset-cell",
       title: option.label,
-      children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "list-preset-marker", children: item }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "list-preset-text" })
+      children: option.preview.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "list-preset-marker", children: item }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "list-preset-text" })
       ] }, i))
     }
   );
 }
 function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const [visible, setVisible] = (0, import_react12.useState)(false);
-  const containerRef = (0, import_react12.useRef)(null);
-  const optionsRef = (0, import_react12.useRef)(null);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const isActive = !!rangeStyle?.listType;
-  (0, import_react12.useEffect)(() => {
-    if (!visible) return;
-    const handler = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setVisible(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [visible]);
-  (0, import_react12.useEffect)(() => {
-    if (!visible || !optionsRef.current) return;
-    const el = optionsRef.current;
-    el.style.left = "";
-    el.style.right = "";
-    const rect = el.getBoundingClientRect();
-    if (rect.right > window.innerWidth) {
-      const overflow = rect.right - window.innerWidth + 8;
-      el.style.left = `-${overflow}px`;
-    } else if (rect.left < 0) {
-      el.style.left = `${-rect.left + 8}px`;
-    }
-  }, [visible]);
   const handleList = (type, style) => {
     editorRef.current?.command.executeList(type, style);
-    setVisible(false);
   };
   const handlePreset = (type, preset) => {
     const style = type === "ol" ? "decimal" : "disc";
     editorRef.current?.command.executeListWithPreset(type, style, preset);
-    setVisible(false);
   };
   const handleIndent = (e) => {
     e.stopPropagation();
@@ -682,11 +655,11 @@ function ListTool() {
     e.stopPropagation();
     editorRef.current?.command.executeListOutdent();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: containerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { ref: optionsRef, className: `options ${visible ? "visible" : ""}`, style: { padding: "8px", width: "320px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: triggerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.List, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { padding: "8px", width: "320px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             onClick: () => handleList("ul", "checkbox"),
@@ -694,15 +667,15 @@ function ListTool() {
             children: "Checkbox"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Indent, { size: 14 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.Outdent, { size: 14 }) })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Indent, { size: 14 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.Outdent, { size: 14 }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { marginBottom: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.ListOrdered, { size: 12 }),
           "Ordered List"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           PresetCell,
           {
             option,
@@ -711,12 +684,12 @@ function ListTool() {
           option.preset
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react14.List, { size: 12 }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react14.List, { size: 12 }),
           "Unordered List"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           PresetCell,
           {
             option,
@@ -725,13 +698,13 @@ function ListTool() {
           option.preset
         )) })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 
 // src/toolbar/ImageTool.tsx
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ImageTool() {
   const { editorRef } = useEditor();
   const handleImageUpload = (e) => {
@@ -752,16 +725,16 @@ function ImageTool() {
     };
     e.target.value = "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react15.Image, { size: 16 }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react15.Image, { size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
   ] });
 }
 
 // src/toolbar/SeparatorTool.tsx
-var import_react13 = require("react");
+var import_react6 = require("react");
 var import_lucide_react16 = require("lucide-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var DASH_STYLES = [
   { label: "Solid", dashArray: [] },
   { label: "Dotted", dashArray: [1, 1] },
@@ -775,23 +748,22 @@ var LINE_WIDTHS = [
 ];
 function SeparatorTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react13.useState)(false);
-  const [selectedWidth, setSelectedWidth] = (0, import_react13.useState)(1);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [selectedWidth, setSelectedWidth] = (0, import_react6.useState)(1);
   const lineColor = "#344054";
   const handleSeparator = (dashArray) => {
     editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "menu-item__separator", title: "Separator", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react16.Minus, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `options ${visible ? "visible" : ""}`, style: { padding: "8px 10px 10px", width: "200px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__separator", ref: triggerRef, title: "Separator", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react16.Minus, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "li",
         {
           onClick: () => handleSeparator(dashArray),
           style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "line",
               {
                 x1: "0",
@@ -803,14 +775,14 @@ function SeparatorTool() {
                 strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
           ]
         },
         label
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "button",
           {
             onClick: (e) => {
@@ -833,16 +805,15 @@ function SeparatorTool() {
           value
         )) })
       ] })
-    ] })
+    ] }) })
   ] });
 }
 
 // src/toolbar/WatermarkTool.tsx
-var import_react14 = require("react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function InsertElementTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react14.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const handleHeader = () => {
     if (!editorRef.current) return;
     const options = editorRef.current.command.getOptions();
@@ -851,38 +822,35 @@ function InsertElementTool() {
       editorRef.current.command.executeForceUpdate();
     }
     editorRef.current.command.executeSetZone("header");
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "menu-item__insert-element", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("i", { title: "Insert Element" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "menu-item__insert-element", ref: triggerRef, onClick: toggle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Insert Element" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("ul", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
 // src/toolbar/PageBreakTool.tsx
-var import_react15 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function PageBreakTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react15.useState)(false);
+  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
   const handlePageBreak = () => {
     editorRef.current?.command.executePageBreak();
-    setVisible(false);
   };
   const handleColumnBreak = () => {
     editorRef.current?.command.executeColumnBreak();
-    setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "div",
     {
       className: "menu-item__page-break",
-      onClick: () => setVisible(!visible),
+      ref: triggerRef,
+      onClick: toggle,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("i", { title: "Break" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("i", { title: "Break" }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handlePageBreak, children: "Page Break" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })
       ]
     }
@@ -890,116 +858,116 @@ function PageBreakTool() {
 }
 
 // src/EditorToolbar.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function EditorToolbar() {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu", "editor-component": "menu", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UndoTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RedoTool, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu", "editor-component": "menu", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UndoTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RedoTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColumnTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PageBreakTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SeparatorTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColumnTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PageBreakTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SeparatorTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TableTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TitleTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FontTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FontSizeTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LineHeightTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TableTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TitleTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FontTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(FontSizeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LineHeightTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ColorTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HighlightTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BoldTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ItalicTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(UnderlineTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(StrikeoutTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ColorTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HighlightTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(BoldTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ItalicTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UnderlineTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StrikeoutTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "menu-item", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(LeftAlignTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CenterAlignTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RightAlignTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(JustifyTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "menu-item", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LeftAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CenterAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RightAlignTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(JustifyTool, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ListTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ImageTool, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(InsertElementTool, {}) })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ListTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ImageTool, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "menu-item", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InsertElementTool, {}) })
   ] });
 }
 
 // src/footer/CatalogToggleTool.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function CatalogToggleTool() {
   const { handleToggleCatalogAction } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", {}) });
 }
 
 // src/footer/PageModeTool.tsx
-var import_react16 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function PageModeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react16.useState)(false);
+  const [visible, setVisible] = (0, import_react7.useState)(false);
   const handlePageMode = (mode) => {
     editorRef.current?.command.executePageMode(mode);
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("i", { title: "Page Mode" }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("i", { title: "Page Mode" }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
     ] }) })
   ] });
 }
 
 // src/footer/FooterStatus.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function FooterStatus() {
   const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
       "Visible Pages: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no-list", children: pageNoList })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "page-no-list", children: pageNoList })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
       "Pages: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no", children: pageNo }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "page-no", children: pageNo }),
       "/",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-size", children: pageSize })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "page-size", children: pageSize })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
       "Words: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "word-count", children: wordCount })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "word-count", children: wordCount })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
       "Row: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "row-no", children: rowNo })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "row-no", children: rowNo })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "footer-divider" }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "footer-divider" }),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { children: [
       "Column: ",
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "col-no", children: colNo })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "col-no", children: colNo })
     ] })
   ] });
 }
 
 // src/footer/EditorModeTool.tsx
-var import_react17 = require("react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
   { mode: "clean", name: "Clean Mode" },
@@ -1011,8 +979,8 @@ var MODE_LIST = [
 ];
 function EditorModeTool() {
   const { editorRef } = useEditor();
-  const [editorMode, setEditorMode] = (0, import_react17.useState)("Edit Mode");
-  const modeIndexRef = (0, import_react17.useRef)(0);
+  const [editorMode, setEditorMode] = (0, import_react8.useState)("Edit Mode");
+  const modeIndexRef = (0, import_react8.useRef)(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -1029,37 +997,37 @@ function EditorModeTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
 }
 
 // src/footer/PageScaleMinusTool.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function PageScaleMinusTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("i", {}) });
 }
 
 // src/footer/PageScalePercentageTool.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function PageScalePercentageTool() {
   const { editorRef } = useEditor();
   const { pageScale } = useFooter();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "page-scale-percentage", title: "Zoom Level", onClick: () => editorRef.current?.command.executePageScaleRecovery(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "page-scale-percentage", title: "Zoom Level", onClick: () => editorRef.current?.command.executePageScaleRecovery(), children: [
     pageScale,
     "%"
   ] });
 }
 
 // src/footer/PageScaleAddTool.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function PageScaleAddTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", {}) });
 }
 
 // src/footer/PaperSizeTool.tsx
-var import_react18 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var SIZES2 = [
   { label: "A4", width: 794, height: 1123, active: true },
   { label: "A2", width: 1593, height: 2251 },
@@ -1068,38 +1036,38 @@ var SIZES2 = [
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react18.useState)(false);
+  const [visible, setVisible] = (0, import_react9.useState)(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { title: "Paper Type" }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { title: "Paper Type" }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
   ] });
 }
 
 // src/footer/PaperDirectionTool.tsx
-var import_react19 = require("react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_react10 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react19.useState)(false);
+  const [visible, setVisible] = (0, import_react10.useState)(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { title: "Paper Direction" }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", { title: "Paper Direction" }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("ul", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
     ] }) })
   ] });
 }
 
 // src/footer/PaperMarginTool.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function PaperMarginTool() {
   const { editorRef } = useEditor();
   const handlePaperMargin = async () => {
@@ -1132,11 +1100,11 @@ function PaperMarginTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", {}) });
 }
 
 // src/footer/FullscreenTool.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function FullscreenTool() {
   const handleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -1145,11 +1113,11 @@ function FullscreenTool() {
       document.exitFullscreen();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {}) });
 }
 
 // src/footer/EditorOptionTool.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function EditorOptionTool() {
   const { editorRef } = useEditor();
   const handleEditorOption = async () => {
@@ -1177,12 +1145,12 @@ function EditorOptionTool() {
       }
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", {}) });
 }
 
 // src/footer/WatermarkFooterTool.tsx
-var import_react20 = require("react");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_react11 = require("react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var COLOR_PALETTE2 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
@@ -1194,21 +1162,21 @@ var FONTS2 = [
 ];
 function WatermarkFooterTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = (0, import_react20.useState)(false);
-  const [tab, setTab] = (0, import_react20.useState)("text");
-  const containerRef = (0, import_react20.useRef)(null);
-  const panelRef = (0, import_react20.useRef)(null);
-  const fileInputRef = (0, import_react20.useRef)(null);
-  const [text, setText] = (0, import_react20.useState)("WATERMARK");
-  const [font, setFont] = (0, import_react20.useState)("Arial");
-  const [color, setColor] = (0, import_react20.useState)("#AEB5C0");
-  const [opacity, setOpacity] = (0, import_react20.useState)(30);
-  const [rotation, setRotation] = (0, import_react20.useState)(-45);
-  const [inFront, setInFront] = (0, import_react20.useState)(false);
-  const [imageData, setImageData] = (0, import_react20.useState)("");
-  const [imgWidth, setImgWidth] = (0, import_react20.useState)(200);
-  const [imgHeight, setImgHeight] = (0, import_react20.useState)(200);
-  (0, import_react20.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react11.useState)(false);
+  const [tab, setTab] = (0, import_react11.useState)("text");
+  const containerRef = (0, import_react11.useRef)(null);
+  const panelRef = (0, import_react11.useRef)(null);
+  const fileInputRef = (0, import_react11.useRef)(null);
+  const [text, setText] = (0, import_react11.useState)("WATERMARK");
+  const [font, setFont] = (0, import_react11.useState)("Arial");
+  const [color, setColor] = (0, import_react11.useState)("#AEB5C0");
+  const [opacity, setOpacity] = (0, import_react11.useState)(30);
+  const [rotation, setRotation] = (0, import_react11.useState)(-45);
+  const [inFront, setInFront] = (0, import_react11.useState)(false);
+  const [imageData, setImageData] = (0, import_react11.useState)("");
+  const [imgWidth, setImgWidth] = (0, import_react11.useState)(200);
+  const [imgHeight, setImgHeight] = (0, import_react11.useState)(200);
+  (0, import_react11.useEffect)(() => {
     if (!visible) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1218,7 +1186,7 @@ function WatermarkFooterTool() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [visible]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!visible || !panelRef.current) return;
     const el = panelRef.current;
     el.style.right = "";
@@ -1232,7 +1200,7 @@ function WatermarkFooterTool() {
       el.style.left = `${-rect.left + 4}px`;
     }
   }, [visible]);
-  const handleFileUpload = (0, import_react20.useCallback)((e) => {
+  const handleFileUpload = (0, import_react11.useCallback)((e) => {
     const file = e.target.files?.[0];
     if (!file) return;
     const reader = new FileReader();
@@ -1288,26 +1256,26 @@ function WatermarkFooterTool() {
     editorRef.current?.command.executeDeleteWatermark();
     setVisible(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("i", { title: "Watermark" }),
-    visible && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-tabs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("i", { title: "Watermark" }),
+    visible && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-tabs", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-body", children: [
-        tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Text" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-body", children: [
+        tab === "text" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Text" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Font" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("option", { value: f.family, children: f.label }, f.family)) })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Font" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: f.family, children: f.label }, f.family)) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Color" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Color" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               "div",
               {
                 className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
@@ -1317,89 +1285,89 @@ function WatermarkFooterTool() {
               c
             )) })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Image" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
-              imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Image" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
+              imageData && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
             ] })
           ] }),
-          imageData && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "W" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
+          imageData && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "wm-panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "wm-panel-preview", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "W" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "H" }),
-              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field wm-panel-field-half", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "H" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { children: [
             "Opacity ",
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "wm-panel-value", children: [
               opacity,
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("label", { children: [
             "Rotation ",
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "wm-panel-value", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "wm-panel-value", children: [
               rotation,
               "\xB0"
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("label", { children: "Position" }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-toggle", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
-            /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { children: "Position" }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-toggle", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "wm-panel-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "wm-panel-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
       ] })
     ] })
   ] });
 }
 
 // src/EditorFooter.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function EditorFooter() {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "footer", "editor-component": "footer", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CatalogToggleTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageModeTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FooterStatus, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "footer", "editor-component": "footer", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CatalogToggleTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageModeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FooterStatus, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EditorModeTool, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageScaleMinusTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageScalePercentageTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PageScaleAddTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaperSizeTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaperDirectionTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PaperMarginTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(WatermarkFooterTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FullscreenTool, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EditorOptionTool, {})
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorModeTool, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageScaleMinusTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageScalePercentageTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PageScaleAddTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaperSizeTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaperDirectionTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(PaperMarginTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WatermarkFooterTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FullscreenTool, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorOptionTool, {})
     ] })
   ] });
 }
 
 // src/Editor.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Editor({
   defaultValue,
   options: userOptions,
@@ -1414,7 +1382,7 @@ function Editor({
   style,
   onDrop: userOnDrop
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     EditorInner,
     {
       defaultValue,
@@ -1446,9 +1414,9 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  const containerRef = (0, import_react21.useRef)(null);
-  const editorRef = (0, import_react21.useRef)(null);
-  const [rangeStyle, setRangeStyle] = (0, import_react21.useState)(null);
+  const containerRef = (0, import_react12.useRef)(null);
+  const editorRef = (0, import_react12.useRef)(null);
+  const [rangeStyle, setRangeStyle] = (0, import_react12.useState)(null);
   const {
     setPageNoList,
     setPageNo,
@@ -1458,7 +1426,7 @@ function EditorInner({
     setColNo,
     setPageScale
   } = useFooter();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let instance = null;
     const initEditor = async () => {
       if (!containerRef.current) return;
@@ -1594,11 +1562,11 @@ function EditorInner({
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(EditorProvider, { editorRef, rangeStyle, children: [
-    toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorToolbar, {}),
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(EditorProvider, { editorRef, rangeStyle, children: [
+    toolbar && !renderToolbar && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorToolbar, {}),
     renderToolbar,
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
       "div",
       {
         className: className ?? "editor",
@@ -1608,7 +1576,7 @@ function EditorInner({
         onDragOver: handleDragOver
       }
     ),
-    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorFooter, {}),
+    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorFooter, {}),
     renderFooter
   ] });
 }