@windoc/react 0.2.4 → 0.2.5

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/Editor.tsx
-import { useEffect as useEffect5, useRef as useRef5, useState as useState12 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState21 } from "react";
 
 // src/EditorContext.tsx
 import { createContext, useContext, useEffect, useState } from "react";
@@ -100,60 +100,13 @@ function RedoTool() {
 }
 
 // src/toolbar/ColumnTool.tsx
-import { useState as useState4 } from "react";
-
-// src/utils/useDropdown.ts
-import { useState as useState3, useRef, useEffect as useEffect2 } from "react";
-function useDropdown() {
-  const [isOpen, setIsOpen] = useState3(false);
-  const [position, setPosition] = useState3({ top: 0, left: 0 });
-  const triggerRef = 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
-  };
-  useEffect2(() => {
-    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
-import { createPortal } from "react-dom";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function DropdownPortal({ isOpen, style, className, wrapperClassName, children }) {
-  if (!isOpen) return null;
-  return createPortal(
-    /* @__PURE__ */ jsx5("div", { className: `menu-item menu-item-portal${wrapperClassName ? ` ${wrapperClassName}` : ""}`, style, children: /* @__PURE__ */ jsx5("div", { className, children }) }),
-    document.body
-  );
-}
-
-// src/toolbar/ColumnTool.tsx
-import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
+import { useState as useState3 } from "react";
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
 function ColumnTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
-  const [currentColumns, setCurrentColumns] = useState4(1);
-  const [gap, setGap] = useState4(20);
+  const [isOpen, setIsOpen] = useState3(false);
+  const [currentColumns, setCurrentColumns] = useState3(1);
+  const [gap, setGap] = useState3(20);
   const handleColumn = (col) => {
     editorRef.current?.command.executeColumnCount(col);
     setCurrentColumns(col);
@@ -163,18 +116,18 @@ function ColumnTool() {
     setGap(clampedValue);
     editorRef.current?.command.executeColumnGap(clampedValue);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ jsx6("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
-    /* @__PURE__ */ jsx6(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__column", children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxs("div", { className: "menu-item__column", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ jsx5("span", { className: "select", title: "Column Layout", children: currentColumns === 1 ? "1 Column" : `${currentColumns} Columns` }),
+    /* @__PURE__ */ jsx5("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs("ul", { children: [
-        /* @__PURE__ */ jsx6("li", { onClick: () => handleColumn(1), children: "1 Column" }),
-        /* @__PURE__ */ jsx6("li", { onClick: () => handleColumn(2), children: "2 Columns" })
+        /* @__PURE__ */ jsx5("li", { onClick: () => handleColumn(1), children: "1 Column" }),
+        /* @__PURE__ */ jsx5("li", { onClick: () => handleColumn(2), children: "2 Columns" })
       ] }),
       currentColumns > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx6("div", { className: "option-divider" }),
+        /* @__PURE__ */ jsx5("div", { className: "option-divider" }),
         /* @__PURE__ */ jsxs("div", { className: "option-row", children: [
-          /* @__PURE__ */ jsx6("label", { children: "Gap (px)" }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5("label", { children: "Gap (px)" }),
+          /* @__PURE__ */ jsx5(
             "input",
             {
               type: "number",
@@ -192,16 +145,16 @@ function ColumnTool() {
 }
 
 // src/toolbar/TableTool.tsx
-import { useState as useState5, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState4, useEffect as useEffect2, useRef } from "react";
 import { Table } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function TableTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState5(false);
-  const [hoverRow, setHoverRow] = useState5(0);
-  const [hoverCol, setHoverCol] = useState5(0);
-  const containerRef = useRef2(null);
-  useEffect3(() => {
+  const [visible, setVisible] = useState4(false);
+  const [hoverRow, setHoverRow] = useState4(0);
+  const [hoverCol, setHoverCol] = useState4(0);
+  const containerRef = useRef(null);
+  useEffect2(() => {
     if (!visible) return;
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -222,10 +175,10 @@ function TableTool() {
     setHoverCol(0);
   };
   return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "menu-item__table", title: "Table", children: [
-    /* @__PURE__ */ jsx7(Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx6(Table, { size: 16, onClick: () => setVisible(!visible), style: { cursor: "pointer" } }),
     visible && /* @__PURE__ */ jsxs2("div", { className: "table-dropdown", children: [
-      /* @__PURE__ */ jsx7("div", { className: "table-dropdown-header", children: /* @__PURE__ */ jsx7("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
-      /* @__PURE__ */ jsx7("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ jsx7("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx6("div", { className: "table-dropdown-header", children: /* @__PURE__ */ jsx6("span", { children: hoverRow > 0 ? `${hoverRow} \xD7 ${hoverCol}` : "Insert Table" }) }),
+      /* @__PURE__ */ jsx6("div", { className: "table-dropdown-grid", onClick: handleInsertTable, children: Array.from({ length: 8 }).map((_, rowIdx) => /* @__PURE__ */ jsx6("div", { className: "table-dropdown-row", children: Array.from({ length: 8 }).map((_2, colIdx) => /* @__PURE__ */ jsx6(
         "div",
         {
           className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
@@ -241,7 +194,8 @@ function TableTool() {
 }
 
 // src/toolbar/TitleTool.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var LEVELS = [
   { level: null, label: "Body" },
   { level: "first", label: "Heading 1" },
@@ -253,15 +207,15 @@ var LEVELS = [
 ];
 function TitleTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState5(false);
   const activeLevel = rangeStyle?.level || null;
   const activeLabel = LEVELS.find((l) => l.level === activeLevel)?.label || "Body";
   const handleTitle = (level) => {
     editorRef.current?.command.executeTitle(level);
   };
-  return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ jsx8("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
-    /* @__PURE__ */ jsx8(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__title", children: /* @__PURE__ */ jsx8("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs3("div", { className: "menu-item__title", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ jsx7("span", { className: "select", title: "Toggle Heading", children: activeLabel }),
+    /* @__PURE__ */ jsx7("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx7("ul", { children: LEVELS.map(({ level, label }) => /* @__PURE__ */ jsx7(
       "li",
       {
         className: activeLevel === level ? "active" : "",
@@ -275,22 +229,23 @@ function TitleTool() {
 }
 
 // src/toolbar/FontTool.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var FONTS = [
   { family: "Arial", label: "Sans Serif" },
   { family: "Times New Roman", label: "Serif" }
 ];
 function FontTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState6(false);
   const activeFont = rangeStyle?.font || "Arial";
   const activeLabel = FONTS.find((f) => f.family === activeFont)?.label || activeFont;
   const handleFont = (family) => {
     editorRef.current?.command.executeFont(family);
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ jsx9("span", { className: "select", title: "Font", children: activeLabel }),
-    /* @__PURE__ */ jsx9(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__font", children: /* @__PURE__ */ jsx9("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs4("div", { className: "menu-item__font", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ jsx8("span", { className: "select", title: "Font", children: activeLabel }),
+    /* @__PURE__ */ jsx8("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx8("ul", { children: FONTS.map(({ family, label }) => /* @__PURE__ */ jsx8(
       "li",
       {
         "data-family": family,
@@ -305,18 +260,19 @@ function FontTool() {
 }
 
 // src/toolbar/FontSizeTool.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState7 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "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 { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState7(false);
   const activeSize = rangeStyle?.size ?? 16;
   const handleSize = (size) => {
     editorRef.current?.command.executeSize(size);
   };
-  return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ jsx10("span", { className: "select", title: "Font Size", children: activeSize }),
-    /* @__PURE__ */ jsx10(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__size", children: /* @__PURE__ */ jsx10("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs5("div", { className: "menu-item__size", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ jsx9("span", { className: "select", title: "Font Size", children: activeSize }),
+    /* @__PURE__ */ jsx9("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx9("ul", { children: SIZES.map((size) => /* @__PURE__ */ jsx9(
       "li",
       {
         className: activeSize === size ? "active" : "",
@@ -329,19 +285,20 @@ function FontSizeTool() {
 }
 
 // src/toolbar/LineHeightTool.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState8 } from "react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var LINE_HEIGHTS = ["1.0", "1.15", "1.5", "2.0", "2.5"];
 function LineHeightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState8(false);
   const activeMargin = rangeStyle?.rowMargin ?? 1;
   const activeLabel = Number.isInteger(activeMargin) ? `${activeMargin}.0` : String(activeMargin);
   const handleLineHeight = (value) => {
     editorRef.current?.command.executeRowMargin(Number(value));
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ jsx11("span", { className: "select", title: "Line Height", children: activeLabel }),
-    /* @__PURE__ */ jsx11(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__line-height", children: /* @__PURE__ */ jsx11("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs6("div", { className: "menu-item__line-height", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ jsx10("span", { className: "select", title: "Line Height", children: activeLabel }),
+    /* @__PURE__ */ jsx10("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx10("ul", { children: LINE_HEIGHTS.map((h) => /* @__PURE__ */ jsx10(
       "li",
       {
         className: String(activeMargin) === h || activeLabel === h ? "active" : "",
@@ -354,8 +311,9 @@ function LineHeightTool() {
 }
 
 // src/toolbar/ColorTool.tsx
+import { useState as useState9 } from "react";
 import { Baseline, RotateCcw } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "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"],
@@ -368,7 +326,7 @@ var COLOR_PALETTE = [
 ];
 function ColorTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
+  const [visible, setVisible] = useState9(false);
   const activeColor = rangeStyle?.color || "#000000";
   const handleColor = (color) => {
     editorRef.current?.command.executeColor(color);
@@ -376,16 +334,16 @@ function ColorTool() {
   const handleReset = () => {
     editorRef.current?.command.executeColor(null);
   };
-  return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", ref: triggerRef, title: "Font Color", onClick: toggle, children: [
-    /* @__PURE__ */ jsx12(Baseline, { size: 16 }),
-    /* @__PURE__ */ jsx12("span", { style: { backgroundColor: activeColor } }),
-    /* @__PURE__ */ jsx12("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ jsx12(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__color", children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxs7("div", { className: "menu-item__color", title: "Font Color", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx11(Baseline, { size: 16 }),
+    /* @__PURE__ */ jsx11("span", { style: { backgroundColor: activeColor } }),
+    /* @__PURE__ */ jsx11("input", { id: "color", type: "color", readOnly: true, tabIndex: -1 }),
+    /* @__PURE__ */ jsx11("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ jsxs7("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs7("button", { className: "color-palette-reset", onClick: handleReset, children: [
-        /* @__PURE__ */ jsx12(RotateCcw, { size: 12 }),
+        /* @__PURE__ */ jsx11(RotateCcw, { size: 12 }),
         "Reset"
       ] }),
-      /* @__PURE__ */ jsx12("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ jsx12("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx11("div", { className: "color-palette-grid", children: COLOR_PALETTE.map((row, ri) => /* @__PURE__ */ jsx11("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx11(
         "div",
         {
           className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -400,8 +358,9 @@ function ColorTool() {
 }
 
 // src/toolbar/HighlightTool.tsx
+import { useState as useState10 } from "react";
 import { Highlighter, RotateCcw as RotateCcw2 } from "lucide-react";
-import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "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"],
@@ -414,7 +373,7 @@ var HIGHLIGHT_PALETTE = [
 ];
 function HighlightTool() {
   const { editorRef, rangeStyle } = useEditor();
-  const { triggerRef, isOpen: visible, toggle, portalStyle } = useDropdown();
+  const [visible, setVisible] = useState10(false);
   const activeColor = rangeStyle?.highlight || "";
   const handleColor = (color) => {
     editorRef.current?.command.executeHighlight(color);
@@ -422,16 +381,16 @@ function HighlightTool() {
   const handleReset = () => {
     editorRef.current?.command.executeHighlight(null);
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", ref: triggerRef, title: "Highlight", onClick: toggle, children: [
-    /* @__PURE__ */ jsx13(Highlighter, { size: 16 }),
-    /* @__PURE__ */ jsx13("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
-    /* @__PURE__ */ jsx13("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
-    /* @__PURE__ */ jsx13(DropdownPortal, { isOpen: visible, style: portalStyle, className: "color-palette-dropdown", wrapperClassName: "menu-item__highlight", children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
+  return /* @__PURE__ */ jsxs8("div", { className: "menu-item__highlight", title: "Highlight", onClick: () => setVisible(!visible), children: [
+    /* @__PURE__ */ jsx12(Highlighter, { size: 16 }),
+    /* @__PURE__ */ jsx12("span", { style: { backgroundColor: activeColor || "#ffff00" } }),
+    /* @__PURE__ */ jsx12("input", { id: "highlight", type: "color", readOnly: true, tabIndex: -1 }),
+    /* @__PURE__ */ jsx12("div", { className: "color-palette-dropdown" + (visible ? " visible" : ""), children: /* @__PURE__ */ jsxs8("div", { onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs8("button", { className: "color-palette-reset", onClick: handleReset, children: [
-        /* @__PURE__ */ jsx13(RotateCcw2, { size: 12 }),
+        /* @__PURE__ */ jsx12(RotateCcw2, { size: 12 }),
         "None"
       ] }),
-      /* @__PURE__ */ jsx13("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ jsx13("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx12("div", { className: "color-palette-grid", children: HIGHLIGHT_PALETTE.map((row, ri) => /* @__PURE__ */ jsx12("div", { className: "color-palette-row", children: row.map((color) => /* @__PURE__ */ jsx12(
         "div",
         {
           className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
@@ -447,87 +406,89 @@ function HighlightTool() {
 
 // src/toolbar/BoldTool.tsx
 import { Bold } from "lucide-react";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function BoldTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.bold === true;
-  return /* @__PURE__ */ jsx14("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ jsx14(Bold, { size: 16 }) });
+  return /* @__PURE__ */ jsx13("div", { className: `menu-item__bold ${isActive ? "active" : ""}`, title: `Bold(${isApple ? "\u2318" : "Ctrl"}+B)`, onClick: () => editorRef.current?.command.executeBold(), children: /* @__PURE__ */ jsx13(Bold, { size: 16 }) });
 }
 
 // src/toolbar/ItalicTool.tsx
 import { Italic } from "lucide-react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function ItalicTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.italic === true;
-  return /* @__PURE__ */ jsx15("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ jsx15(Italic, { size: 16 }) });
+  return /* @__PURE__ */ jsx14("div", { className: `menu-item__italic ${isActive ? "active" : ""}`, title: `Italic(${isApple ? "\u2318" : "Ctrl"}+I)`, onClick: () => editorRef.current?.command.executeItalic(), children: /* @__PURE__ */ jsx14(Italic, { size: 16 }) });
 }
 
 // src/toolbar/UnderlineTool.tsx
+import { useState as useState11 } from "react";
 import { Underline as UnderlineIcon } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
 function UnderlineTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState11(false);
   const isActive = rangeStyle?.underline === true;
-  return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, ref: triggerRef, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
-    /* @__PURE__ */ jsx16(UnderlineIcon, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx16("span", { className: "select", onClick: toggle }),
-    /* @__PURE__ */ jsx16(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__underline", children: /* @__PURE__ */ jsx16("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx16("li", { "data-decoration-style": style, onClick: () => {
+  return /* @__PURE__ */ jsxs9("div", { className: `menu-item__underline ${isActive ? "active" : ""}`, title: `Underline(${isApple ? "\u2318" : "Ctrl"}+U)`, children: [
+    /* @__PURE__ */ jsx15(UnderlineIcon, { size: 16, onClick: () => editorRef.current?.command.executeUnderline(), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx15("span", { className: "select", onClick: () => setIsOpen(!isOpen) }),
+    /* @__PURE__ */ jsx15("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx15("ul", { children: STYLES.map((style) => /* @__PURE__ */ jsx15("li", { "data-decoration-style": style, onClick: () => {
       editorRef.current?.command.executeUnderline({ style });
-    }, children: /* @__PURE__ */ jsx16("i", {}) }, style)) }) })
+    }, children: /* @__PURE__ */ jsx15("i", {}) }, style)) }) })
   ] });
 }
 
 // src/toolbar/StrikeoutTool.tsx
 import { Strikethrough } from "lucide-react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function StrikeoutTool() {
   const { editorRef, rangeStyle } = useEditor();
   const isActive = rangeStyle?.strikeout === true;
-  return /* @__PURE__ */ jsx17("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ jsx17(Strikethrough, { size: 16 }) });
+  return /* @__PURE__ */ jsx16("div", { className: `menu-item__strikeout ${isActive ? "active" : ""}`, title: "Strikethrough", onClick: () => editorRef.current?.command.executeStrikeout(), children: /* @__PURE__ */ jsx16(Strikethrough, { size: 16 }) });
 }
 
 // src/toolbar/LeftAlignTool.tsx
 import { AlignLeft } from "lucide-react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function LeftAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = !rangeStyle?.rowFlex || rangeStyle.rowFlex === "left";
-  return /* @__PURE__ */ jsx18("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ jsx18(AlignLeft, { size: 16 }) });
+  return /* @__PURE__ */ jsx17("div", { className: `menu-item__left ${isActive ? "active" : ""}`, title: `Left align(${isApple ? "\u2318" : "Ctrl"}+L)`, onClick: () => editorRef.current?.command.executeRowFlex("left"), children: /* @__PURE__ */ jsx17(AlignLeft, { size: 16 }) });
 }
 
 // src/toolbar/CenterAlignTool.tsx
 import { AlignCenter } from "lucide-react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function CenterAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "center";
-  return /* @__PURE__ */ jsx19("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ jsx19(AlignCenter, { size: 16 }) });
+  return /* @__PURE__ */ jsx18("div", { className: `menu-item__center ${isActive ? "active" : ""}`, title: `Center align(${isApple ? "\u2318" : "Ctrl"}+E)`, onClick: () => editorRef.current?.command.executeRowFlex("center"), children: /* @__PURE__ */ jsx18(AlignCenter, { size: 16 }) });
 }
 
 // src/toolbar/RightAlignTool.tsx
 import { AlignRight } from "lucide-react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function RightAlignTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "right";
-  return /* @__PURE__ */ jsx20("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ jsx20(AlignRight, { size: 16 }) });
+  return /* @__PURE__ */ jsx19("div", { className: `menu-item__right ${isActive ? "active" : ""}`, title: `Right align(${isApple ? "\u2318" : "Ctrl"}+R)`, onClick: () => editorRef.current?.command.executeRowFlex("right"), children: /* @__PURE__ */ jsx19(AlignRight, { size: 16 }) });
 }
 
 // src/toolbar/JustifyTool.tsx
 import { AlignJustify } from "lucide-react";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function JustifyTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
   const isActive = rangeStyle?.rowFlex === "justify" || rangeStyle?.rowFlex === "alignment";
-  return /* @__PURE__ */ jsx21("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ jsx21(AlignJustify, { size: 16 }) });
+  return /* @__PURE__ */ jsx20("div", { className: `menu-item__justify ${isActive ? "active" : ""}`, title: `Distribute(${isApple ? "\u2318" : "Ctrl"}+Shift+J)`, onClick: () => editorRef.current?.command.executeRowFlex("justify"), children: /* @__PURE__ */ jsx20(AlignJustify, { size: 16 }) });
 }
 
 // src/toolbar/ListTool.tsx
+import { useState as useState12 } from "react";
 import { List, ListOrdered, Indent, Outdent } from "lucide-react";
-import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 var OL_PRESETS = [
   { preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
   { preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
@@ -545,22 +506,22 @@ var UL_PRESETS = [
   { preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
 ];
 function PresetCell({ option, onClick }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       onClick,
       className: "list-preset-cell",
       title: option.label,
       children: option.preview.map((item, i) => /* @__PURE__ */ jsxs10("div", { className: "list-preset-line", style: { paddingLeft: `${i * 10}px` }, children: [
-        /* @__PURE__ */ jsx22("span", { className: "list-preset-marker", children: item }),
-        /* @__PURE__ */ jsx22("span", { className: "list-preset-text" })
+        /* @__PURE__ */ jsx21("span", { className: "list-preset-marker", children: item }),
+        /* @__PURE__ */ jsx21("span", { className: "list-preset-text" })
       ] }, i))
     }
   );
 }
 function ListTool() {
   const { editorRef, isApple, rangeStyle } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState12(false);
   const isActive = !!rangeStyle?.listType;
   const handleList = (type, style) => {
     editorRef.current?.command.executeList(type, style);
@@ -577,11 +538,11 @@ function ListTool() {
     e.stopPropagation();
     editorRef.current?.command.executeListOutdent();
   };
-  return /* @__PURE__ */ jsxs10("div", { ref: triggerRef, className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
-    /* @__PURE__ */ jsx22(List, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx22(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__list", children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: `menu-item__list ${isActive ? "active" : ""}`, title: `List(${isApple ? "\u2318" : "Ctrl"}+Shift+U)`, children: [
+    /* @__PURE__ */ jsx21(List, { size: 16, onClick: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx21("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs10("div", { style: { padding: "8px", width: "320px" }, children: [
       /* @__PURE__ */ jsxs10("div", { style: { display: "flex", gap: "4px", marginBottom: "8px" }, children: [
-        /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx21(
           "button",
           {
             onClick: () => handleList("ul", "checkbox"),
@@ -589,15 +550,15 @@ function ListTool() {
             children: "Checkbox"
           }
         ),
-        /* @__PURE__ */ jsx22("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ jsx22(Indent, { size: 14 }) }),
-        /* @__PURE__ */ jsx22("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ jsx22(Outdent, { size: 14 }) })
+        /* @__PURE__ */ jsx21("button", { onClick: handleIndent, className: "list-quick-btn", title: "Indent (Tab)", children: /* @__PURE__ */ jsx21(Indent, { size: 14 }) }),
+        /* @__PURE__ */ jsx21("button", { onClick: handleOutdent, className: "list-quick-btn", title: "Outdent (Shift+Tab)", children: /* @__PURE__ */ jsx21(Outdent, { size: 14 }) })
       ] }),
       /* @__PURE__ */ jsxs10("div", { style: { marginBottom: "8px" }, children: [
         /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
-          /* @__PURE__ */ jsx22(ListOrdered, { size: 12 }),
+          /* @__PURE__ */ jsx21(ListOrdered, { size: 12 }),
           "Ordered List"
         ] }),
-        /* @__PURE__ */ jsx22("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx21("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ jsx21(
           PresetCell,
           {
             option,
@@ -608,10 +569,10 @@ function ListTool() {
       ] }),
       /* @__PURE__ */ jsxs10("div", { children: [
         /* @__PURE__ */ jsxs10("div", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: [
-          /* @__PURE__ */ jsx22(List, { size: 12 }),
+          /* @__PURE__ */ jsx21(List, { size: 12 }),
           "Unordered List"
         ] }),
-        /* @__PURE__ */ jsx22("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx21("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ jsx21(
           PresetCell,
           {
             option,
@@ -626,7 +587,7 @@ function ListTool() {
 
 // src/toolbar/ImageTool.tsx
 import { Image as ImageIcon } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function ImageTool() {
   const { editorRef } = useEditor();
   const handleImageUpload = (e) => {
@@ -648,15 +609,15 @@ function ImageTool() {
     e.target.value = "";
   };
   return /* @__PURE__ */ jsxs11("div", { className: "menu-item__image", onClick: () => document.getElementById("image")?.click(), children: [
-    /* @__PURE__ */ jsx23(ImageIcon, { size: 16 }),
-    /* @__PURE__ */ jsx23("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
+    /* @__PURE__ */ jsx22(ImageIcon, { size: 16 }),
+    /* @__PURE__ */ jsx22("input", { type: "file", id: "image", accept: ".png, .jpg, .jpeg, .svg, .gif", onChange: handleImageUpload })
   ] });
 }
 
 // src/toolbar/SeparatorTool.tsx
-import { useState as useState6 } from "react";
+import { useState as useState13 } from "react";
 import { Minus } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var DASH_STYLES = [
   { label: "Solid", dashArray: [] },
   { label: "Dotted", dashArray: [1, 1] },
@@ -670,22 +631,22 @@ var LINE_WIDTHS = [
 ];
 function SeparatorTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
-  const [selectedWidth, setSelectedWidth] = useState6(1);
+  const [isOpen, setIsOpen] = useState13(false);
+  const [selectedWidth, setSelectedWidth] = useState13(1);
   const lineColor = "#344054";
   const handleSeparator = (dashArray) => {
     editorRef.current?.command.executeSeparator(dashArray, { lineWidth: selectedWidth });
   };
-  return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", ref: triggerRef, title: "Separator", children: [
-    /* @__PURE__ */ jsx24(Minus, { size: 16, onClick: toggle, style: { cursor: "pointer" } }),
-    /* @__PURE__ */ jsx24(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__separator", children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
-      /* @__PURE__ */ jsx24("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs12("div", { className: "menu-item__separator", title: "Separator", children: [
+    /* @__PURE__ */ jsx23(Minus, { size: 16, onClick: () => setIsOpen(!isOpen), style: { cursor: "pointer" } }),
+    /* @__PURE__ */ jsx23("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs12("div", { style: { padding: "8px 10px 10px", width: "200px" }, children: [
+      /* @__PURE__ */ jsx23("ul", { style: { margin: 0, padding: 0, listStyle: "none" }, children: DASH_STYLES.map(({ label, dashArray }) => /* @__PURE__ */ jsxs12(
         "li",
         {
           onClick: () => handleSeparator(dashArray),
           style: { display: "flex", alignItems: "center", gap: "10px", padding: "5px 6px", cursor: "pointer", borderRadius: "4px" },
           children: [
-            /* @__PURE__ */ jsx24("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx23("svg", { style: { flex: 1, minWidth: 0, overflow: "hidden" }, height: "8", children: /* @__PURE__ */ jsx23(
               "line",
               {
                 x1: "0",
@@ -697,14 +658,14 @@ function SeparatorTool() {
                 strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
               }
             ) }),
-            /* @__PURE__ */ jsx24("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
+            /* @__PURE__ */ jsx23("span", { style: { fontSize: "11px", color: "#475467", whiteSpace: "nowrap", flexShrink: 0 }, children: label })
           ]
         },
         label
       )) }),
       /* @__PURE__ */ jsxs12("div", { style: { borderTop: "1px solid #e4e7ec", marginTop: "8px", paddingTop: "8px" }, children: [
-        /* @__PURE__ */ jsx24("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
-        /* @__PURE__ */ jsx24("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx23("div", { style: { fontSize: "11px", color: "#667085", marginBottom: "6px", fontWeight: 500 }, children: "Line Width" }),
+        /* @__PURE__ */ jsx23("div", { style: { display: "flex", gap: "4px" }, children: LINE_WIDTHS.map(({ label, value }) => /* @__PURE__ */ jsx23(
           "button",
           {
             onClick: (e) => {
@@ -732,10 +693,11 @@ function SeparatorTool() {
 }
 
 // src/toolbar/WatermarkTool.tsx
-import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
 function InsertElementTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState14(false);
   const handleHeader = () => {
     if (!editorRef.current) return;
     const options = editorRef.current.command.getOptions();
@@ -745,17 +707,18 @@ function InsertElementTool() {
     }
     editorRef.current.command.executeSetZone("header");
   };
-  return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", ref: triggerRef, onClick: toggle, children: [
-    /* @__PURE__ */ jsx25("i", { title: "Insert Element" }),
-    /* @__PURE__ */ jsx25(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__insert-element", children: /* @__PURE__ */ jsx25("ul", { children: /* @__PURE__ */ jsx25("li", { onClick: handleHeader, children: "Add Header" }) }) })
+  return /* @__PURE__ */ jsxs13("div", { className: "menu-item__insert-element", onClick: () => setIsOpen(!isOpen), children: [
+    /* @__PURE__ */ jsx24("i", { title: "Insert Element" }),
+    /* @__PURE__ */ jsx24("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsx24("ul", { children: /* @__PURE__ */ jsx24("li", { onClick: handleHeader, children: "Add Header" }) }) })
   ] });
 }
 
 // src/toolbar/PageBreakTool.tsx
-import { jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function PageBreakTool() {
   const { editorRef } = useEditor();
-  const { triggerRef, isOpen, toggle, portalStyle } = useDropdown();
+  const [isOpen, setIsOpen] = useState15(false);
   const handlePageBreak = () => {
     editorRef.current?.command.executePageBreak();
   };
@@ -766,13 +729,12 @@ function PageBreakTool() {
     "div",
     {
       className: "menu-item__page-break",
-      ref: triggerRef,
-      onClick: toggle,
+      onClick: () => setIsOpen(!isOpen),
       children: [
-        /* @__PURE__ */ jsx26("i", { title: "Break" }),
-        /* @__PURE__ */ jsx26(DropdownPortal, { isOpen, style: portalStyle, className: "options visible", wrapperClassName: "menu-item__page-break", children: /* @__PURE__ */ jsxs14("ul", { children: [
-          /* @__PURE__ */ jsx26("li", { onClick: handlePageBreak, children: "Page Break" }),
-          /* @__PURE__ */ jsx26("li", { onClick: handleColumnBreak, children: "Column Break" })
+        /* @__PURE__ */ jsx25("i", { title: "Break" }),
+        /* @__PURE__ */ jsx25("div", { className: "options" + (isOpen ? " visible" : ""), children: /* @__PURE__ */ jsxs14("ul", { children: [
+          /* @__PURE__ */ jsx25("li", { onClick: handlePageBreak, children: "Page Break" }),
+          /* @__PURE__ */ jsx25("li", { onClick: handleColumnBreak, children: "Column Break" })
         ] }) })
       ]
     }
@@ -780,116 +742,116 @@ function PageBreakTool() {
 }
 
 // src/EditorToolbar.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function EditorToolbar() {
   return /* @__PURE__ */ jsxs15("div", { className: "menu", "editor-component": "menu", children: [
     /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
-      /* @__PURE__ */ jsx27(UndoTool, {}),
-      /* @__PURE__ */ jsx27(RedoTool, {})
+      /* @__PURE__ */ jsx26(UndoTool, {}),
+      /* @__PURE__ */ jsx26(RedoTool, {})
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(ColumnTool, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(ColumnTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
     /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
-      /* @__PURE__ */ jsx27(PageBreakTool, {}),
-      /* @__PURE__ */ jsx27(SeparatorTool, {})
+      /* @__PURE__ */ jsx26(PageBreakTool, {}),
+      /* @__PURE__ */ jsx26(SeparatorTool, {})
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(TableTool, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(TableTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
     /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
-      /* @__PURE__ */ jsx27(TitleTool, {}),
-      /* @__PURE__ */ jsx27(FontTool, {}),
-      /* @__PURE__ */ jsx27(FontSizeTool, {}),
-      /* @__PURE__ */ jsx27(LineHeightTool, {})
+      /* @__PURE__ */ jsx26(TitleTool, {}),
+      /* @__PURE__ */ jsx26(FontTool, {}),
+      /* @__PURE__ */ jsx26(FontSizeTool, {}),
+      /* @__PURE__ */ jsx26(LineHeightTool, {})
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
     /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
-      /* @__PURE__ */ jsx27(ColorTool, {}),
-      /* @__PURE__ */ jsx27(HighlightTool, {}),
-      /* @__PURE__ */ jsx27(BoldTool, {}),
-      /* @__PURE__ */ jsx27(ItalicTool, {}),
-      /* @__PURE__ */ jsx27(UnderlineTool, {}),
-      /* @__PURE__ */ jsx27(StrikeoutTool, {})
+      /* @__PURE__ */ jsx26(ColorTool, {}),
+      /* @__PURE__ */ jsx26(HighlightTool, {}),
+      /* @__PURE__ */ jsx26(BoldTool, {}),
+      /* @__PURE__ */ jsx26(ItalicTool, {}),
+      /* @__PURE__ */ jsx26(UnderlineTool, {}),
+      /* @__PURE__ */ jsx26(StrikeoutTool, {})
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
     /* @__PURE__ */ jsxs15("div", { className: "menu-item", children: [
-      /* @__PURE__ */ jsx27(LeftAlignTool, {}),
-      /* @__PURE__ */ jsx27(CenterAlignTool, {}),
-      /* @__PURE__ */ jsx27(RightAlignTool, {}),
-      /* @__PURE__ */ jsx27(JustifyTool, {})
+      /* @__PURE__ */ jsx26(LeftAlignTool, {}),
+      /* @__PURE__ */ jsx26(CenterAlignTool, {}),
+      /* @__PURE__ */ jsx26(RightAlignTool, {}),
+      /* @__PURE__ */ jsx26(JustifyTool, {})
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(ListTool, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-divider" }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(ImageTool, {}) }),
-    /* @__PURE__ */ jsx27("div", { className: "menu-item", children: /* @__PURE__ */ jsx27(InsertElementTool, {}) })
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(ListTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-divider" }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(ImageTool, {}) }),
+    /* @__PURE__ */ jsx26("div", { className: "menu-item", children: /* @__PURE__ */ jsx26(InsertElementTool, {}) })
   ] });
 }
 
 // src/footer/CatalogToggleTool.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function CatalogToggleTool() {
   const { handleToggleCatalogAction } = useFooter();
-  return /* @__PURE__ */ jsx28("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ jsx28("i", {}) });
+  return /* @__PURE__ */ jsx27("div", { className: "catalog-mode", title: "Catalog", onClick: handleToggleCatalogAction, children: /* @__PURE__ */ jsx27("i", {}) });
 }
 
 // src/footer/PageModeTool.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useState as useState16 } from "react";
+import { jsx as jsx28, jsxs as jsxs16 } from "react/jsx-runtime";
 function PageModeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState7(false);
+  const [visible, setVisible] = useState16(false);
   const handlePageMode = (mode) => {
     editorRef.current?.command.executePageMode(mode);
     setVisible(false);
   };
   return /* @__PURE__ */ jsxs16("div", { className: "page-mode", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ jsx29("i", { title: "Page Mode" }),
-    /* @__PURE__ */ jsx29("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs16("ul", { children: [
-      /* @__PURE__ */ jsx29("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
-      /* @__PURE__ */ jsx29("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
+    /* @__PURE__ */ jsx28("i", { title: "Page Mode" }),
+    /* @__PURE__ */ jsx28("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs16("ul", { children: [
+      /* @__PURE__ */ jsx28("li", { onClick: () => handlePageMode("paging"), className: "active", children: "Paging" }),
+      /* @__PURE__ */ jsx28("li", { onClick: () => handlePageMode("continuity"), children: "Continuity" })
     ] }) })
   ] });
 }
 
 // src/footer/FooterStatus.tsx
-import { Fragment as Fragment2, jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 function FooterStatus() {
   const { pageNoList, pageNo, pageSize, wordCount, rowNo, colNo } = useFooter();
   return /* @__PURE__ */ jsxs17(Fragment2, { children: [
     /* @__PURE__ */ jsxs17("span", { children: [
       "Visible Pages: ",
-      /* @__PURE__ */ jsx30("span", { className: "page-no-list", children: pageNoList })
+      /* @__PURE__ */ jsx29("span", { className: "page-no-list", children: pageNoList })
     ] }),
-    /* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
     /* @__PURE__ */ jsxs17("span", { children: [
       "Pages: ",
-      /* @__PURE__ */ jsx30("span", { className: "page-no", children: pageNo }),
+      /* @__PURE__ */ jsx29("span", { className: "page-no", children: pageNo }),
       "/",
-      /* @__PURE__ */ jsx30("span", { className: "page-size", children: pageSize })
+      /* @__PURE__ */ jsx29("span", { className: "page-size", children: pageSize })
     ] }),
-    /* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
     /* @__PURE__ */ jsxs17("span", { children: [
       "Words: ",
-      /* @__PURE__ */ jsx30("span", { className: "word-count", children: wordCount })
+      /* @__PURE__ */ jsx29("span", { className: "word-count", children: wordCount })
     ] }),
-    /* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
     /* @__PURE__ */ jsxs17("span", { children: [
       "Row: ",
-      /* @__PURE__ */ jsx30("span", { className: "row-no", children: rowNo })
+      /* @__PURE__ */ jsx29("span", { className: "row-no", children: rowNo })
     ] }),
-    /* @__PURE__ */ jsx30("span", { className: "footer-divider" }),
+    /* @__PURE__ */ jsx29("span", { className: "footer-divider" }),
     /* @__PURE__ */ jsxs17("span", { children: [
       "Column: ",
-      /* @__PURE__ */ jsx30("span", { className: "col-no", children: colNo })
+      /* @__PURE__ */ jsx29("span", { className: "col-no", children: colNo })
     ] })
   ] });
 }
 
 // src/footer/EditorModeTool.tsx
-import { useState as useState8, useRef as useRef3 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { useState as useState17, useRef as useRef2 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var MODE_LIST = [
   { mode: "edit", name: "Edit Mode" },
   { mode: "clean", name: "Clean Mode" },
@@ -901,8 +863,8 @@ var MODE_LIST = [
 ];
 function EditorModeTool() {
   const { editorRef } = useEditor();
-  const [editorMode, setEditorMode] = useState8("Edit Mode");
-  const modeIndexRef = useRef3(0);
+  const [editorMode, setEditorMode] = useState17("Edit Mode");
+  const modeIndexRef = useRef2(0);
   const handleModeChange = () => {
     modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
     const { name, mode } = MODE_LIST[modeIndexRef.current];
@@ -919,14 +881,14 @@ function EditorModeTool() {
       }
     });
   };
-  return /* @__PURE__ */ jsx31("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
+  return /* @__PURE__ */ jsx30("div", { className: "editor-mode", title: "Click to change mode", onClick: handleModeChange, children: editorMode });
 }
 
 // src/footer/PageScaleMinusTool.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function PageScaleMinusTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ jsx32("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ jsx32("i", {}) });
+  return /* @__PURE__ */ jsx31("div", { className: "page-scale-minus", title: "Zoom Out (Ctrl+-)", onClick: () => editorRef.current?.command.executePageScaleMinus(), children: /* @__PURE__ */ jsx31("i", {}) });
 }
 
 // src/footer/PageScalePercentageTool.tsx
@@ -941,15 +903,15 @@ function PageScalePercentageTool() {
 }
 
 // src/footer/PageScaleAddTool.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function PageScaleAddTool() {
   const { editorRef } = useEditor();
-  return /* @__PURE__ */ jsx33("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ jsx33("i", {}) });
+  return /* @__PURE__ */ jsx32("div", { className: "page-scale-add", title: "Zoom In (Ctrl+=)", onClick: () => editorRef.current?.command.executePageScaleAdd(), children: /* @__PURE__ */ jsx32("i", {}) });
 }
 
 // src/footer/PaperSizeTool.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useState as useState18 } from "react";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var SIZES2 = [
   { label: "A4", width: 794, height: 1123, active: true },
   { label: "A2", width: 1593, height: 2251 },
@@ -958,38 +920,38 @@ var SIZES2 = [
 ];
 function PaperSizeTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState9(false);
+  const [visible, setVisible] = useState18(false);
   const handlePaperSize = (width, height) => {
     editorRef.current?.command.executePaperSize(width, height);
     setVisible(false);
   };
   return /* @__PURE__ */ jsxs19("div", { className: "paper-size", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ jsx34("i", { title: "Paper Type" }),
-    /* @__PURE__ */ jsx34("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx34("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ jsx34("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
+    /* @__PURE__ */ jsx33("i", { title: "Paper Type" }),
+    /* @__PURE__ */ jsx33("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsx33("ul", { children: SIZES2.map(({ label, width, height, active }) => /* @__PURE__ */ jsx33("li", { onClick: () => handlePaperSize(width, height), className: active ? "active" : "", children: label }, label)) }) })
   ] });
 }
 
 // src/footer/PaperDirectionTool.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState19 } from "react";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 function PaperDirectionTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState10(false);
+  const [visible, setVisible] = useState19(false);
   const handlePaperDirection = (direction) => {
     editorRef.current?.command.executePaperDirection(direction);
     setVisible(false);
   };
   return /* @__PURE__ */ jsxs20("div", { className: "paper-direction", onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ jsx35("i", { title: "Paper Direction" }),
-    /* @__PURE__ */ jsx35("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs20("ul", { children: [
-      /* @__PURE__ */ jsx35("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
-      /* @__PURE__ */ jsx35("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
+    /* @__PURE__ */ jsx34("i", { title: "Paper Direction" }),
+    /* @__PURE__ */ jsx34("div", { className: `options ${visible ? "visible" : ""}`, children: /* @__PURE__ */ jsxs20("ul", { children: [
+      /* @__PURE__ */ jsx34("li", { onClick: () => handlePaperDirection("vertical"), className: "active", children: "Portrait" }),
+      /* @__PURE__ */ jsx34("li", { onClick: () => handlePaperDirection("horizontal"), children: "Landscape" })
     ] }) })
   ] });
 }
 
 // src/footer/PaperMarginTool.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function PaperMarginTool() {
   const { editorRef } = useEditor();
   const handlePaperMargin = async () => {
@@ -1022,11 +984,11 @@ function PaperMarginTool() {
       }
     });
   };
-  return /* @__PURE__ */ jsx36("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ jsx36("i", {}) });
+  return /* @__PURE__ */ jsx35("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ jsx35("i", {}) });
 }
 
 // src/footer/FullscreenTool.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function FullscreenTool() {
   const handleFullscreen = () => {
     if (!document.fullscreenElement) {
@@ -1035,11 +997,11 @@ function FullscreenTool() {
       document.exitFullscreen();
     }
   };
-  return /* @__PURE__ */ jsx37("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ jsx37("i", {}) });
+  return /* @__PURE__ */ jsx36("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ jsx36("i", {}) });
 }
 
 // src/footer/EditorOptionTool.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function EditorOptionTool() {
   const { editorRef } = useEditor();
   const handleEditorOption = async () => {
@@ -1067,12 +1029,12 @@ function EditorOptionTool() {
       }
     });
   };
-  return /* @__PURE__ */ jsx38("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ jsx38("i", {}) });
+  return /* @__PURE__ */ jsx37("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ jsx37("i", {}) });
 }
 
 // src/footer/WatermarkFooterTool.tsx
-import { useState as useState11, useRef as useRef4, useEffect as useEffect4, useCallback } from "react";
-import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState20, useRef as useRef3, useEffect as useEffect3, useCallback } from "react";
+import { Fragment as Fragment3, jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 var COLOR_PALETTE2 = [
   ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
   ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
@@ -1084,21 +1046,21 @@ var FONTS2 = [
 ];
 function WatermarkFooterTool() {
   const { editorRef } = useEditor();
-  const [visible, setVisible] = useState11(false);
-  const [tab, setTab] = useState11("text");
-  const containerRef = useRef4(null);
-  const panelRef = useRef4(null);
-  const fileInputRef = useRef4(null);
-  const [text, setText] = useState11("WATERMARK");
-  const [font, setFont] = useState11("Arial");
-  const [color, setColor] = useState11("#AEB5C0");
-  const [opacity, setOpacity] = useState11(30);
-  const [rotation, setRotation] = useState11(-45);
-  const [inFront, setInFront] = useState11(false);
-  const [imageData, setImageData] = useState11("");
-  const [imgWidth, setImgWidth] = useState11(200);
-  const [imgHeight, setImgHeight] = useState11(200);
-  useEffect4(() => {
+  const [visible, setVisible] = useState20(false);
+  const [tab, setTab] = useState20("text");
+  const containerRef = useRef3(null);
+  const panelRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const [text, setText] = useState20("WATERMARK");
+  const [font, setFont] = useState20("Arial");
+  const [color, setColor] = useState20("#AEB5C0");
+  const [opacity, setOpacity] = useState20(30);
+  const [rotation, setRotation] = useState20(-45);
+  const [inFront, setInFront] = useState20(false);
+  const [imageData, setImageData] = useState20("");
+  const [imgWidth, setImgWidth] = useState20(200);
+  const [imgHeight, setImgHeight] = useState20(200);
+  useEffect3(() => {
     if (!visible) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -1108,7 +1070,7 @@ function WatermarkFooterTool() {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [visible]);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!visible || !panelRef.current) return;
     const el = panelRef.current;
     el.style.right = "";
@@ -1179,25 +1141,25 @@ function WatermarkFooterTool() {
     setVisible(false);
   };
   return /* @__PURE__ */ jsxs21("div", { className: "watermark-footer", ref: containerRef, onClick: () => setVisible(!visible), children: [
-    /* @__PURE__ */ jsx39("i", { title: "Watermark" }),
+    /* @__PURE__ */ jsx38("i", { title: "Watermark" }),
     visible && /* @__PURE__ */ jsxs21("div", { className: "watermark-footer-panel", ref: panelRef, onClick: (e) => e.stopPropagation(), children: [
       /* @__PURE__ */ jsxs21("div", { className: "wm-panel-tabs", children: [
-        /* @__PURE__ */ jsx39("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
-        /* @__PURE__ */ jsx39("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
+        /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "text" ? "active" : ""}`, onClick: () => setTab("text"), children: "Text" }),
+        /* @__PURE__ */ jsx38("button", { className: `wm-panel-tab ${tab === "image" ? "active" : ""}`, onClick: () => setTab("image"), children: "Image" })
       ] }),
       /* @__PURE__ */ jsxs21("div", { className: "wm-panel-body", children: [
         tab === "text" ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx39("label", { children: "Text" }),
-            /* @__PURE__ */ jsx39("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
+            /* @__PURE__ */ jsx38("label", { children: "Text" }),
+            /* @__PURE__ */ jsx38("input", { type: "text", value: text, onChange: (e) => setText(e.target.value), placeholder: "Watermark text" })
           ] }),
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx39("label", { children: "Font" }),
-            /* @__PURE__ */ jsx39("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ jsx39("option", { value: f.family, children: f.label }, f.family)) })
+            /* @__PURE__ */ jsx38("label", { children: "Font" }),
+            /* @__PURE__ */ jsx38("select", { value: font, onChange: (e) => setFont(e.target.value), children: FONTS2.map((f) => /* @__PURE__ */ jsx38("option", { value: f.family, children: f.label }, f.family)) })
           ] }),
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx39("label", { children: "Color" }),
-            /* @__PURE__ */ jsx39("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx38("label", { children: "Color" }),
+            /* @__PURE__ */ jsx38("div", { className: "wm-panel-colors", children: COLOR_PALETTE2.flat().map((c) => /* @__PURE__ */ jsx38(
               "div",
               {
                 className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
@@ -1209,22 +1171,22 @@ function WatermarkFooterTool() {
           ] })
         ] }) : /* @__PURE__ */ jsxs21(Fragment3, { children: [
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-            /* @__PURE__ */ jsx39("label", { children: "Image" }),
+            /* @__PURE__ */ jsx38("label", { children: "Image" }),
             /* @__PURE__ */ jsxs21("div", { style: { display: "flex", alignItems: "center", gap: "6px" }, children: [
-              /* @__PURE__ */ jsx39("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
-              /* @__PURE__ */ jsx39("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
-              imageData && /* @__PURE__ */ jsx39("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
+              /* @__PURE__ */ jsx38("button", { className: "wm-panel-upload", onClick: () => fileInputRef.current?.click(), children: "Choose File" }),
+              /* @__PURE__ */ jsx38("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: handleFileUpload }),
+              imageData && /* @__PURE__ */ jsx38("span", { style: { fontSize: "11px", color: "#667085" }, children: "Loaded" })
             ] })
           ] }),
-          imageData && /* @__PURE__ */ jsx39("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx39("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx39("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
+          imageData && /* @__PURE__ */ jsx38("div", { className: "wm-panel-field", children: /* @__PURE__ */ jsx38("div", { className: "wm-panel-preview", children: /* @__PURE__ */ jsx38("img", { src: imageData, alt: "preview", style: { maxWidth: "100%", maxHeight: "48px", objectFit: "contain" } }) }) }),
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field-row", children: [
             /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ jsx39("label", { children: "W" }),
-              /* @__PURE__ */ jsx39("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
+              /* @__PURE__ */ jsx38("label", { children: "W" }),
+              /* @__PURE__ */ jsx38("input", { type: "number", value: imgWidth, min: 10, onChange: (e) => setImgWidth(Number(e.target.value)) })
             ] }),
             /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field wm-panel-field-half", children: [
-              /* @__PURE__ */ jsx39("label", { children: "H" }),
-              /* @__PURE__ */ jsx39("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
+              /* @__PURE__ */ jsx38("label", { children: "H" }),
+              /* @__PURE__ */ jsx38("input", { type: "number", value: imgHeight, min: 10, onChange: (e) => setImgHeight(Number(e.target.value)) })
             ] })
           ] })
         ] }),
@@ -1236,7 +1198,7 @@ function WatermarkFooterTool() {
               "%"
             ] })
           ] }),
-          /* @__PURE__ */ jsx39("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
+          /* @__PURE__ */ jsx38("input", { type: "range", min: 0, max: 100, value: opacity, onChange: (e) => setOpacity(Number(e.target.value)), className: "wm-panel-slider" })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
           /* @__PURE__ */ jsxs21("label", { children: [
@@ -1246,50 +1208,50 @@ function WatermarkFooterTool() {
               "\xB0"
             ] })
           ] }),
-          /* @__PURE__ */ jsx39("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
+          /* @__PURE__ */ jsx38("input", { type: "range", min: -90, max: 90, value: rotation, onChange: (e) => setRotation(Number(e.target.value)), className: "wm-panel-slider" })
         ] }),
         /* @__PURE__ */ jsxs21("div", { className: "wm-panel-field", children: [
-          /* @__PURE__ */ jsx39("label", { children: "Position" }),
+          /* @__PURE__ */ jsx38("label", { children: "Position" }),
           /* @__PURE__ */ jsxs21("div", { className: "wm-panel-toggle", children: [
-            /* @__PURE__ */ jsx39("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
-            /* @__PURE__ */ jsx39("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
+            /* @__PURE__ */ jsx38("button", { className: !inFront ? "active" : "", onClick: () => setInFront(false), children: "Behind" }),
+            /* @__PURE__ */ jsx38("button", { className: inFront ? "active" : "", onClick: () => setInFront(true), children: "In Front" })
           ] })
         ] })
       ] }),
       /* @__PURE__ */ jsxs21("div", { className: "wm-panel-actions", children: [
-        /* @__PURE__ */ jsx39("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
-        /* @__PURE__ */ jsx39("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
+        /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-delete", onClick: handleDelete, children: "Remove" }),
+        /* @__PURE__ */ jsx38("button", { className: "wm-panel-btn-apply", onClick: handleApply, children: "Apply" })
       ] })
     ] })
   ] });
 }
 
 // src/EditorFooter.tsx
-import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs22 } from "react/jsx-runtime";
 function EditorFooter() {
   return /* @__PURE__ */ jsxs22("div", { className: "footer", "editor-component": "footer", children: [
     /* @__PURE__ */ jsxs22("div", { children: [
-      /* @__PURE__ */ jsx40(CatalogToggleTool, {}),
-      /* @__PURE__ */ jsx40(PageModeTool, {}),
-      /* @__PURE__ */ jsx40(FooterStatus, {})
+      /* @__PURE__ */ jsx39(CatalogToggleTool, {}),
+      /* @__PURE__ */ jsx39(PageModeTool, {}),
+      /* @__PURE__ */ jsx39(FooterStatus, {})
     ] }),
-    /* @__PURE__ */ jsx40(EditorModeTool, {}),
+    /* @__PURE__ */ jsx39(EditorModeTool, {}),
     /* @__PURE__ */ jsxs22("div", { children: [
-      /* @__PURE__ */ jsx40(PageScaleMinusTool, {}),
-      /* @__PURE__ */ jsx40(PageScalePercentageTool, {}),
-      /* @__PURE__ */ jsx40(PageScaleAddTool, {}),
-      /* @__PURE__ */ jsx40(PaperSizeTool, {}),
-      /* @__PURE__ */ jsx40(PaperDirectionTool, {}),
-      /* @__PURE__ */ jsx40(PaperMarginTool, {}),
-      /* @__PURE__ */ jsx40(WatermarkFooterTool, {}),
-      /* @__PURE__ */ jsx40(FullscreenTool, {}),
-      /* @__PURE__ */ jsx40(EditorOptionTool, {})
+      /* @__PURE__ */ jsx39(PageScaleMinusTool, {}),
+      /* @__PURE__ */ jsx39(PageScalePercentageTool, {}),
+      /* @__PURE__ */ jsx39(PageScaleAddTool, {}),
+      /* @__PURE__ */ jsx39(PaperSizeTool, {}),
+      /* @__PURE__ */ jsx39(PaperDirectionTool, {}),
+      /* @__PURE__ */ jsx39(PaperMarginTool, {}),
+      /* @__PURE__ */ jsx39(WatermarkFooterTool, {}),
+      /* @__PURE__ */ jsx39(FullscreenTool, {}),
+      /* @__PURE__ */ jsx39(EditorOptionTool, {})
     ] })
   ] });
 }
 
 // src/Editor.tsx
-import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 function Editor({
   defaultValue,
   options: userOptions,
@@ -1304,7 +1266,7 @@ function Editor({
   style,
   onDrop: userOnDrop
 }) {
-  return /* @__PURE__ */ jsx41(FooterProvider, { children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(FooterProvider, { children: /* @__PURE__ */ jsx40(
     EditorInner,
     {
       defaultValue,
@@ -1336,9 +1298,9 @@ function EditorInner({
   style,
   onDrop: userOnDrop
 }) {
-  const containerRef = useRef5(null);
-  const editorRef = useRef5(null);
-  const [rangeStyle, setRangeStyle] = useState12(null);
+  const containerRef = useRef4(null);
+  const editorRef = useRef4(null);
+  const [rangeStyle, setRangeStyle] = useState21(null);
   const {
     setPageNoList,
     setPageNo,
@@ -1348,7 +1310,7 @@ function EditorInner({
     setColNo,
     setPageScale
   } = useFooter();
-  useEffect5(() => {
+  useEffect4(() => {
     let instance = null;
     const initEditor = async () => {
       if (!containerRef.current) return;
@@ -1485,10 +1447,10 @@ function EditorInner({
     e.dataTransfer.dropEffect = "copy";
   };
   return /* @__PURE__ */ jsxs23(EditorProvider, { editorRef, rangeStyle, children: [
-    toolbar && !renderToolbar && /* @__PURE__ */ jsx41(EditorToolbar, {}),
+    toolbar && !renderToolbar && /* @__PURE__ */ jsx40(EditorToolbar, {}),
     renderToolbar,
     children,
-    /* @__PURE__ */ jsx41(
+    /* @__PURE__ */ jsx40(
       "div",
       {
         className: className ?? "editor",
@@ -1498,7 +1460,7 @@ function EditorInner({
         onDragOver: handleDragOver
       }
     ),
-    footer && !renderFooter && /* @__PURE__ */ jsx41(EditorFooter, {}),
+    footer && !renderFooter && /* @__PURE__ */ jsx40(EditorFooter, {}),
     renderFooter
   ] });
 }