@windoc/react 0.1.0

package/dist/index.js

@@ -0,0 +1,1661 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BoldTool: () => BoldTool,
+  CatalogToggleTool: () => CatalogToggleTool,
+  CenterAlignTool: () => CenterAlignTool,
+  ColorTool: () => ColorTool,
+  ColumnTool: () => ColumnTool,
+  Editor: () => Editor,
+  EditorFooter: () => EditorFooter,
+  EditorModeTool: () => EditorModeTool,
+  EditorOptionTool: () => EditorOptionTool,
+  EditorProvider: () => EditorProvider,
+  EditorToolbar: () => EditorToolbar,
+  FontSizeTool: () => FontSizeTool,
+  FontTool: () => FontTool,
+  FooterProvider: () => FooterProvider,
+  FooterStatus: () => FooterStatus,
+  FullscreenTool: () => FullscreenTool,
+  HighlightTool: () => HighlightTool,
+  ImageTool: () => ImageTool,
+  ItalicTool: () => ItalicTool,
+  JustifyTool: () => JustifyTool,
+  LeftAlignTool: () => LeftAlignTool,
+  LineHeightTool: () => LineHeightTool,
+  ListTool: () => ListTool,
+  PageBreakTool: () => PageBreakTool,
+  PageModeTool: () => PageModeTool,
+  PageScaleAddTool: () => PageScaleAddTool,
+  PageScaleMinusTool: () => PageScaleMinusTool,
+  PageScalePercentageTool: () => PageScalePercentageTool,
+  PaperDirectionTool: () => PaperDirectionTool,
+  PaperMarginTool: () => PaperMarginTool,
+  PaperSizeTool: () => PaperSizeTool,
+  RedoTool: () => RedoTool,
+  RightAlignTool: () => RightAlignTool,
+  SeparatorTool: () => SeparatorTool,
+  StrikeoutTool: () => StrikeoutTool,
+  TableTool: () => TableTool,
+  TitleTool: () => TitleTool,
+  UnderlineTool: () => UnderlineTool,
+  UndoTool: () => UndoTool,
+  WatermarkFooterTool: () => WatermarkFooterTool,
+  WatermarkTool: () => InsertElementTool,
+  useEditor: () => useEditor,
+  useFooter: () => useFooter
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Editor.tsx
+var import_react21 = require("react");
+
+// src/EditorContext.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var EditorContext = (0, import_react.createContext)(null);
+function EditorProvider({
+  editorRef,
+  rangeStyle,
+  children
+}) {
+  const [isApple, setIsApple] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setIsApple(/Mac OS X/.test(navigator.userAgent));
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorContext.Provider, { value: { editorRef, isApple, rangeStyle }, children });
+}
+function useEditor() {
+  const ctx = (0, import_react.useContext)(EditorContext);
+  if (!ctx) throw new Error("useEditor must be used within EditorProvider");
+  return ctx;
+}
+
+// src/FooterContext.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FooterContext = (0, import_react2.createContext)(null);
+function FooterProvider({
+  handleToggleCatalogAction,
+  children
+}) {
+  const [pageNoList, setPageNoList] = (0, import_react2.useState)("1");
+  const [pageNo, setPageNo] = (0, import_react2.useState)(1);
+  const [pageSize, setPageSize] = (0, import_react2.useState)(1);
+  const [wordCount, setWordCount] = (0, import_react2.useState)(0);
+  const [rowNo, setRowNo] = (0, import_react2.useState)(0);
+  const [colNo, setColNo] = (0, import_react2.useState)(0);
+  const [pageScale, setPageScale] = (0, import_react2.useState)(100);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FooterContext.Provider, { value: {
+    pageNoList,
+    pageNo,
+    pageSize,
+    wordCount,
+    rowNo,
+    colNo,
+    pageScale,
+    setPageNoList,
+    setPageNo,
+    setPageSize,
+    setWordCount,
+    setRowNo,
+    setColNo,
+    setPageScale,
+    handleToggleCatalogAction
+  }, children });
+}
+function useFooter() {
+  const ctx = (0, import_react2.useContext)(FooterContext);
+  if (!ctx) throw new Error("useFooter must be used within FooterProvider");
+  return ctx;
+}
+
+// src/toolbar/UndoTool.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function UndoTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isDisabled = rangeStyle ? !rangeStyle.undo : true;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: `menu-item__undo${isDisabled ? " disabled" : ""}`,
+      title: `Undo(${isApple ? "\u2318" : "Ctrl"}+Z)`,
+      onClick: () => {
+        if (!isDisabled) editorRef.current?.command.executeUndo();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Undo, { size: 16 })
+    }
+  );
+}
+
+// src/toolbar/RedoTool.tsx
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function RedoTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const isDisabled = rangeStyle ? !rangeStyle.redo : true;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      className: `menu-item__redo${isDisabled ? " disabled" : ""}`,
+      title: `Redo(${isApple ? "\u2318" : "Ctrl"}+Y)`,
+      onClick: () => {
+        if (!isDisabled) editorRef.current?.command.executeRedo();
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Redo, { size: 16 })
+    }
+  );
+}
+
+// src/toolbar/ColumnTool.tsx
+var import_react3 = require("react");
+var import_jsx_runtime5 = 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 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()
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/toolbar/TableTool.tsx
+var import_react4 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime6 = 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)(() => {
+    if (!visible) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setVisible(false);
+        setHoverRow(0);
+        setHoverCol(0);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [visible]);
+  const handleInsertTable = () => {
+    if (hoverRow > 0 && hoverCol > 0) {
+      editorRef.current?.command.executeInsertTable(hoverRow, hoverCol);
+    }
+    setVisible(false);
+    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)(
+        "div",
+        {
+          className: `table-dropdown-cell ${rowIdx < hoverRow && colIdx < hoverCol ? "active" : ""}`,
+          onMouseEnter: () => {
+            setHoverRow(rowIdx + 1);
+            setHoverCol(colIdx + 1);
+          }
+        },
+        colIdx
+      )) }, rowIdx)) })
+    ] })
+  ] });
+}
+
+// src/toolbar/TitleTool.tsx
+var import_react5 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var LEVELS = [
+  { level: null, label: "Body" },
+  { level: "first", label: "Heading 1" },
+  { level: "second", label: "Heading 2" },
+  { level: "third", label: "Heading 3" },
+  { level: "fourth", label: "Heading 4" },
+  { level: "fifth", label: "Heading 5" },
+  { level: "sixth", label: "Heading 6" }
+];
+function TitleTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = (0, import_react5.useState)(false);
+  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)(
+      "li",
+      {
+        className: activeLevel === level ? "active" : "",
+        ...level ? { "data-level": level } : {},
+        onClick: () => handleTitle(level),
+        children: label
+      },
+      label
+    )) }) })
+  ] });
+}
+
+// src/toolbar/FontTool.tsx
+var import_react6 = require("react");
+var import_jsx_runtime8 = 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 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)(
+      "li",
+      {
+        "data-family": family,
+        className: activeFont === family ? "active" : "",
+        style: { fontFamily: family },
+        onClick: () => handleFont(family),
+        children: label
+      },
+      family
+    )) }) })
+  ] });
+}
+
+// src/toolbar/FontSizeTool.tsx
+var import_react7 = require("react");
+var import_jsx_runtime9 = 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 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)(
+      "li",
+      {
+        className: activeSize === size ? "active" : "",
+        onClick: () => handleSize(size),
+        children: size
+      },
+      size
+    )) }) })
+  ] });
+}
+
+// src/toolbar/LineHeightTool.tsx
+var import_react8 = require("react");
+var import_jsx_runtime10 = 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 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)(
+      "li",
+      {
+        className: String(activeMargin) === h || activeLabel === h ? "active" : "",
+        onClick: () => handleLineHeight(h),
+        children: h
+      },
+      h
+    )) }) })
+  ] });
+}
+
+// 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 COLOR_PALETTE = [
+  ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
+  ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
+  ["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"],
+  ["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
+  ["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"],
+  ["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"],
+  ["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"],
+  ["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"]
+];
+function ColorTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = (0, import_react9.useState)(false);
+  const containerRef = (0, import_react9.useRef)(null);
+  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 }),
+        "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)(
+        "div",
+        {
+          className: `color-palette-swatch${activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
+          style: { backgroundColor: color },
+          onClick: () => handleColor(color),
+          title: color
+        },
+        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 HIGHLIGHT_PALETTE = [
+  ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc", "#d9d9d9", "#efefef", "#f3f3f3", "#ffffff"],
+  ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff", "#4a86e8", "#0000ff", "#9900ff", "#ff00ff"],
+  ["#e6b8af", "#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#c9daf8", "#cfe2f3", "#d9d2e9", "#ead1dc"],
+  ["#dd7e6b", "#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#a4c2f4", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
+  ["#cc4125", "#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6d9eeb", "#6fa8dc", "#8e7cc3", "#c27ba0"],
+  ["#a61c00", "#cc0000", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3c78d8", "#3d85c6", "#674ea7", "#a64d79"],
+  ["#85200c", "#990000", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#1155cc", "#0b5394", "#351c75", "#741b47"],
+  ["#5b0f00", "#660000", "#783f04", "#7f6000", "#274e13", "#0c343d", "#1c4587", "#073763", "#20124d", "#4c1130"]
+];
+function HighlightTool() {
+  const { editorRef, rangeStyle } = useEditor();
+  const [visible, setVisible] = (0, import_react10.useState)(false);
+  const containerRef = (0, import_react10.useRef)(null);
+  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 }),
+        "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)(
+        "div",
+        {
+          className: `color-palette-swatch${activeColor && activeColor.toLowerCase() === color.toLowerCase() ? " active" : ""}`,
+          style: { backgroundColor: color },
+          onClick: () => handleColor(color),
+          title: color
+        },
+        color
+      )) }, ri)) })
+    ] })
+  ] });
+}
+
+// src/toolbar/BoldTool.tsx
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime13 = 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 }) });
+}
+
+// src/toolbar/ItalicTool.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime14 = 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 }) });
+}
+
+// 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 STYLES = ["solid", "double", "dashed", "dotted", "wavy"];
+function UnderlineTool() {
+  const { editorRef, isApple, rangeStyle } = useEditor();
+  const [visible, setVisible] = (0, import_react11.useState)(false);
+  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: () => {
+      editorRef.current?.command.executeUnderline({ style });
+      setVisible(false);
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {}) }, style)) }) })
+  ] });
+}
+
+// src/toolbar/StrikeoutTool.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime16 = 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 }) });
+}
+
+// src/toolbar/LeftAlignTool.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime17 = 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 }) });
+}
+
+// src/toolbar/CenterAlignTool.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime18 = 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 }) });
+}
+
+// src/toolbar/RightAlignTool.tsx
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime19 = 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 }) });
+}
+
+// src/toolbar/JustifyTool.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime20 = 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 }) });
+}
+
+// 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 OL_PRESETS = [
+  { preset: "olDefault", label: "Default", preview: ["1.", "a.", "i."] },
+  { preset: "olParen", label: "Parenthesis", preview: ["1)", "a)", "i)"] },
+  { preset: "olOutline", label: "Outline", preview: ["1.", "1.1.", "1.1.1."] },
+  { preset: "olUpperA", label: "Upper Alpha", preview: ["A.", "a.", "i."] },
+  { preset: "olRoman", label: "Roman", preview: ["I.", "A.", "1."] },
+  { preset: "olZeroPad", label: "Zero Pad", preview: ["01.", "a.", "i."] }
+];
+var UL_PRESETS = [
+  { preset: "ulDefault", label: "Default", preview: ["\u25CF", "\u25CB", "\u25A0"] },
+  { preset: "ulDiamond", label: "Diamond", preview: ["\u25C6", "\u27A4", "\u25A0"] },
+  { preset: "ulHollowSq", label: "Hollow Square", preview: ["\u25A1", "\u25A1", "\u25A1"] },
+  { preset: "ulArrow", label: "Arrow", preview: ["\u2192", "\u25C6", "\u25CF"] },
+  { preset: "ulStar", label: "Star", preview: ["\u2605", "\u25CB", "\u25A0"] },
+  { preset: "ulCheckArr", label: "Check Arrow", preview: ["\u27A4", "\u25CB", "\u25A0"] }
+];
+function PresetCell({ option, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.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" })
+      ] }, 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 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();
+    editorRef.current?.command.executeListIndent();
+  };
+  const handleOutdent = (e) => {
+    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)(
+          "button",
+          {
+            onClick: () => handleList("ul", "checkbox"),
+            className: "list-quick-btn",
+            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_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 }),
+          "Ordered List"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: OL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          PresetCell,
+          {
+            option,
+            onClick: () => handlePreset("ol", option.preset)
+          },
+          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 }),
+          "Unordered List"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "list-preset-grid", children: UL_PRESETS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          PresetCell,
+          {
+            option,
+            onClick: () => handlePreset("ul", option.preset)
+          },
+          option.preset
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/toolbar/ImageTool.tsx
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ImageTool() {
+  const { editorRef } = useEditor();
+  const handleImageUpload = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => {
+      const img = new Image();
+      img.src = reader.result;
+      img.onload = () => {
+        editorRef.current?.command.executeImage({
+          value: reader.result,
+          width: img.width,
+          height: img.height
+        });
+      };
+    };
+    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 })
+  ] });
+}
+
+// src/toolbar/SeparatorTool.tsx
+var import_react13 = require("react");
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var DASH_STYLES = [
+  { label: "Solid", dashArray: [] },
+  { label: "Dotted", dashArray: [1, 1] },
+  { label: "Dashed", dashArray: [3, 1] },
+  { label: "Long Dash", dashArray: [4, 4] }
+];
+var LINE_WIDTHS = [
+  { label: "Thin", value: 1 },
+  { label: "Medium", value: 2 },
+  { label: "Thick", value: 4 }
+];
+function SeparatorTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = (0, import_react13.useState)(false);
+  const [selectedWidth, setSelectedWidth] = (0, import_react13.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)(
+        "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)(
+              "line",
+              {
+                x1: "0",
+                y1: "4",
+                x2: "100%",
+                y2: "4",
+                stroke: lineColor,
+                strokeWidth: selectedWidth,
+                strokeDasharray: dashArray.length ? dashArray.join(",") : "none"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.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)(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              setSelectedWidth(value);
+            },
+            style: {
+              flex: 1,
+              padding: "3px 6px",
+              fontSize: "11px",
+              border: `1px solid ${selectedWidth === value ? "#3b82f6" : "#d0d5dd"}`,
+              borderRadius: "4px",
+              background: selectedWidth === value ? "#eff6ff" : "#fff",
+              color: selectedWidth === value ? "#3b82f6" : "#475467",
+              cursor: "pointer",
+              fontWeight: selectedWidth === value ? 600 : 400
+            },
+            children: label
+          },
+          value
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/toolbar/WatermarkTool.tsx
+var import_react14 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function InsertElementTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = (0, import_react14.useState)(false);
+  const handleHeader = () => {
+    if (!editorRef.current) return;
+    const options = editorRef.current.command.getOptions();
+    if (options.header.disabled) {
+      options.header.disabled = false;
+      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" }) }) })
+  ] });
+}
+
+// src/toolbar/PageBreakTool.tsx
+var import_react15 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function PageBreakTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = (0, import_react15.useState)(false);
+  const handlePageBreak = () => {
+    editorRef.current?.command.executePageBreak();
+    setVisible(false);
+  };
+  const handleColumnBreak = () => {
+    editorRef.current?.command.executeColumnBreak();
+    setVisible(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    "div",
+    {
+      className: "menu-item__page-break",
+      onClick: () => setVisible(!visible),
+      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" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/EditorToolbar.tsx
+var import_jsx_runtime26 = 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, {})
+    ] }),
+    /* @__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_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_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_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_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, {}) })
+  ] });
+}
+
+// src/footer/CatalogToggleTool.tsx
+var import_jsx_runtime27 = 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", {}) });
+}
+
+// src/footer/PageModeTool.tsx
+var import_react16 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function PageModeTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = (0, import_react16.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" })
+    ] }) })
+  ] });
+}
+
+// src/footer/FooterStatus.tsx
+var import_jsx_runtime29 = 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: [
+      "Visible Pages: ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.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: [
+      "Pages: ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "page-no", children: pageNo }),
+      "/",
+      /* @__PURE__ */ (0, import_jsx_runtime29.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: [
+      "Words: ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.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: [
+      "Row: ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.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: [
+      "Column: ",
+      /* @__PURE__ */ (0, import_jsx_runtime29.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 MODE_LIST = [
+  { mode: "edit", name: "Edit Mode" },
+  { mode: "clean", name: "Clean Mode" },
+  { mode: "readonly", name: "Read-only Mode" },
+  { mode: "form", name: "Form Mode" },
+  { mode: "print", name: "Print Mode" },
+  { mode: "design", name: "Design Mode" },
+  { mode: "graffiti", name: "Graffiti Mode" }
+];
+function EditorModeTool() {
+  const { editorRef } = useEditor();
+  const [editorMode, setEditorMode] = (0, import_react17.useState)("Edit Mode");
+  const modeIndexRef = (0, import_react17.useRef)(0);
+  const handleModeChange = () => {
+    modeIndexRef.current = modeIndexRef.current === MODE_LIST.length - 1 ? 0 : modeIndexRef.current + 1;
+    const { name, mode } = MODE_LIST[modeIndexRef.current];
+    setEditorMode(name);
+    editorRef.current?.command.executeMode(mode);
+    const isReadonly = mode === "readonly";
+    const enableMenuList = ["search", "print"];
+    document.querySelectorAll(".menu-item>div").forEach((dom) => {
+      const menu = dom.dataset.menu;
+      if (isReadonly && (!menu || !enableMenuList.includes(menu))) {
+        dom.classList.add("disable");
+      } else {
+        dom.classList.remove("disable");
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime30.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");
+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", {}) });
+}
+
+// src/footer/PageScalePercentageTool.tsx
+var import_jsx_runtime32 = 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: [
+    pageScale,
+    "%"
+  ] });
+}
+
+// src/footer/PageScaleAddTool.tsx
+var import_jsx_runtime33 = 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", {}) });
+}
+
+// src/footer/PaperSizeTool.tsx
+var import_react18 = require("react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var SIZES2 = [
+  { label: "A4", width: 794, height: 1123, active: true },
+  { label: "A2", width: 1593, height: 2251 },
+  { label: "A3", width: 1125, height: 1593 },
+  { label: "A5", width: 565, height: 796 }
+];
+function PaperSizeTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = (0, import_react18.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)) }) })
+  ] });
+}
+
+// src/footer/PaperDirectionTool.tsx
+var import_react19 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function PaperDirectionTool() {
+  const { editorRef } = useEditor();
+  const [visible, setVisible] = (0, import_react19.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" })
+    ] }) })
+  ] });
+}
+
+// src/footer/PaperMarginTool.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function PaperMarginTool() {
+  const { editorRef } = useEditor();
+  const handlePaperMargin = async () => {
+    if (!editorRef.current) return;
+    const { Dialog } = await import("@windoc/core");
+    const [topMargin, rightMargin, bottomMargin, leftMargin] = editorRef.current.command.getPaperMargin();
+    new Dialog({
+      title: "Page Margins",
+      data: [
+        { type: "text", label: "Top Margin", name: "top", required: true, value: `${topMargin}`, placeholder: "Please enter top margin" },
+        { type: "text", label: "Bottom Margin", name: "bottom", required: true, value: `${bottomMargin}`, placeholder: "Please enter bottom margin" },
+        { type: "text", label: "Left Margin", name: "left", required: true, value: `${leftMargin}`, placeholder: "Please enter left margin" },
+        { type: "text", label: "Right Margin", name: "right", required: true, value: `${rightMargin}`, placeholder: "Please enter right margin" }
+      ],
+      onConfirm: (payload) => {
+        const top = payload.find((p) => p.name === "top")?.value;
+        if (!top) return;
+        const bottom = payload.find((p) => p.name === "bottom")?.value;
+        if (!bottom) return;
+        const left = payload.find((p) => p.name === "left")?.value;
+        if (!left) return;
+        const right = payload.find((p) => p.name === "right")?.value;
+        if (!right) return;
+        editorRef.current?.command.executeSetPaperMargin([
+          Number(top),
+          Number(right),
+          Number(bottom),
+          Number(left)
+        ]);
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "paper-margin", title: "Page Margins", onClick: handlePaperMargin, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("i", {}) });
+}
+
+// src/footer/FullscreenTool.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function FullscreenTool() {
+  const handleFullscreen = () => {
+    if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "fullscreen", title: "Fullscreen", onClick: handleFullscreen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("i", {}) });
+}
+
+// src/footer/EditorOptionTool.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function EditorOptionTool() {
+  const { editorRef } = useEditor();
+  const handleEditorOption = async () => {
+    if (!editorRef.current) return;
+    const { Dialog } = await import("@windoc/core");
+    const options = editorRef.current.command.getOptions();
+    new Dialog({
+      title: "Editor Configuration",
+      data: [
+        {
+          type: "textarea",
+          name: "option",
+          width: 350,
+          height: 300,
+          required: true,
+          value: JSON.stringify(options, null, 2),
+          placeholder: "Please enter editor configuration"
+        }
+      ],
+      onConfirm: (payload) => {
+        const newOptionValue = payload.find((p) => p.name === "option")?.value;
+        if (!newOptionValue) return;
+        const newOption = JSON.parse(newOptionValue);
+        editorRef.current?.command.executeUpdateOptions(newOption);
+      }
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "editor-option", title: "Editor Settings", onClick: handleEditorOption, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("i", {}) });
+}
+
+// src/footer/WatermarkFooterTool.tsx
+var import_react20 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var COLOR_PALETTE2 = [
+  ["#000000", "#434343", "#666666", "#999999", "#b7b7b7", "#cccccc"],
+  ["#980000", "#ff0000", "#ff9900", "#ffff00", "#00ff00", "#00ffff"],
+  ["#4a86e8", "#0000ff", "#9900ff", "#ff00ff", "#e6b8af", "#f4cccc"]
+];
+var FONTS2 = [
+  { family: "Arial", label: "Sans Serif" },
+  { family: "Times New Roman", label: "Serif" }
+];
+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)(() => {
+    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_react20.useEffect)(() => {
+    if (!visible || !panelRef.current) return;
+    const el = panelRef.current;
+    el.style.right = "";
+    el.style.left = "";
+    const rect = el.getBoundingClientRect();
+    if (rect.right > window.innerWidth) {
+      el.style.left = "unset";
+      el.style.right = "0";
+    }
+    if (rect.left < 0) {
+      el.style.left = `${-rect.left + 4}px`;
+    }
+  }, [visible]);
+  const handleFileUpload = (0, import_react20.useCallback)((e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      setImageData(result);
+      const img = new Image();
+      img.onload = () => {
+        const maxDim = 300;
+        let w = img.naturalWidth;
+        let h = img.naturalHeight;
+        if (w > maxDim || h > maxDim) {
+          const ratio = Math.min(maxDim / w, maxDim / h);
+          w = Math.round(w * ratio);
+          h = Math.round(h * ratio);
+        }
+        setImgWidth(w);
+        setImgHeight(h);
+      };
+      img.src = result;
+    };
+    reader.readAsDataURL(file);
+  }, []);
+  const handleApply = () => {
+    if (!editorRef.current) return;
+    if (tab === "text") {
+      if (!text.trim()) return;
+      editorRef.current.command.executeAddWatermark({
+        data: text,
+        type: "text",
+        color,
+        opacity: opacity / 100,
+        size: 120,
+        font,
+        rotation,
+        inFront
+      });
+    } else {
+      if (!imageData) return;
+      editorRef.current.command.executeAddWatermark({
+        data: imageData,
+        type: "image",
+        opacity: opacity / 100,
+        rotation,
+        inFront,
+        width: imgWidth,
+        height: imgHeight
+      });
+    }
+    setVisible(false);
+  };
+  const handleDelete = () => {
+    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" })
+      ] }),
+      /* @__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_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_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)(
+              "div",
+              {
+                className: `wm-panel-color ${color.toLowerCase() === c.toLowerCase() ? "active" : ""}`,
+                style: { backgroundColor: c },
+                onClick: () => setColor(c)
+              },
+              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" })
+            ] })
+          ] }),
+          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)) })
+            ] }),
+            /* @__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_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
+            "Opacity ",
+            /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsxs)("div", { className: "wm-panel-field", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("label", { children: [
+            "Rotation ",
+            /* @__PURE__ */ (0, import_jsx_runtime39.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_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_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" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/EditorFooter.tsx
+var import_jsx_runtime40 = 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, {})
+    ] }),
+    /* @__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, {})
+    ] })
+  ] });
+}
+
+// src/Editor.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function Editor({
+  defaultValue,
+  options: userOptions,
+  onChange,
+  onReady,
+  toolbar = true,
+  footer = true,
+  renderToolbar,
+  renderFooter,
+  children,
+  className,
+  style,
+  onDrop: userOnDrop
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FooterProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    EditorInner,
+    {
+      defaultValue,
+      options: userOptions,
+      onChange,
+      onReady,
+      toolbar,
+      footer,
+      renderToolbar,
+      renderFooter,
+      className,
+      style,
+      onDrop: userOnDrop,
+      children
+    }
+  ) });
+}
+function EditorInner({
+  defaultValue,
+  options: userOptions,
+  onChange,
+  onReady,
+  toolbar = true,
+  footer = true,
+  renderToolbar,
+  renderFooter,
+  children,
+  className,
+  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 {
+    setPageNoList,
+    setPageNo,
+    setPageSize,
+    setWordCount,
+    setRowNo,
+    setColNo,
+    setPageScale
+  } = useFooter();
+  (0, import_react21.useEffect)(() => {
+    let instance = null;
+    const initEditor = async () => {
+      if (!containerRef.current) return;
+      const {
+        default: EditorClass,
+        KeyMap,
+        EditorMode,
+        EditorZone,
+        ElementType,
+        Dialog,
+        Signature
+      } = await import("@windoc/core");
+      const data = defaultValue ?? { main: [] };
+      instance = new EditorClass(
+        containerRef.current,
+        data,
+        userOptions ?? {}
+      );
+      editorRef.current = instance;
+      instance.listener.rangeStyleChange = (payload) => {
+        setRangeStyle(payload);
+        const rangeContext = instance?.command.getRangeContext();
+        if (rangeContext) {
+          setRowNo(rangeContext.startRowNo + 1);
+          setColNo(rangeContext.startColNo + 1);
+        }
+      };
+      instance.listener.visiblePageNoListChange = (payload) => {
+        setPageNoList(payload.map((i) => i + 1).join(", "));
+      };
+      instance.listener.pageSizeChange = (payload) => {
+        setPageSize(payload);
+      };
+      instance.listener.intersectionPageNoChange = (payload) => {
+        setPageNo(payload + 1);
+      };
+      instance.listener.pageScaleChange = (payload) => {
+        setPageScale(Math.floor(payload * 10 * 10));
+      };
+      instance.listener.contentChange = async () => {
+        const count2 = await instance?.command.getWordCount();
+        setWordCount(count2 || 0);
+        if (onChange) {
+          const value = instance?.command.getValue();
+          if (value) onChange(value);
+        }
+      };
+      instance.register.shortcutList([
+        {
+          key: KeyMap.P,
+          mod: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePrint();
+          }
+        },
+        {
+          key: KeyMap.MINUS,
+          ctrl: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePageScaleMinus();
+          }
+        },
+        {
+          key: KeyMap.EQUAL,
+          ctrl: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePageScaleAdd();
+          }
+        },
+        {
+          key: KeyMap.ZERO,
+          ctrl: true,
+          isGlobal: true,
+          callback: (command) => {
+            command.executePageScaleRecovery();
+          }
+        }
+      ]);
+      instance.register.contextMenuList([
+        {
+          name: "Signature",
+          icon: "signature",
+          when: (payload) => {
+            return !payload.isReadonly && payload.editorTextFocus;
+          },
+          callback: (command) => {
+            new Signature({
+              onConfirm(payload) {
+                if (!payload) return;
+                const { value, width, height } = payload;
+                if (!value || !width || !height) return;
+                command.executeInsertElementList([
+                  { value, width, height, type: ElementType.IMAGE }
+                ]);
+              }
+            });
+          }
+        },
+        {
+          name: "Format Cleanup",
+          icon: "word-tool",
+          when: (payload) => !payload.isReadonly,
+          callback: (command) => {
+            command.executeWordTool();
+          }
+        }
+      ]);
+      const closeDropdowns = (evt) => {
+        const visibleDom = document.querySelector(".visible");
+        if (!visibleDom || visibleDom.contains(evt.target)) return;
+        visibleDom.classList.remove("visible");
+      };
+      window.addEventListener("click", closeDropdowns, { capture: true });
+      const count = await instance.command.getWordCount();
+      setWordCount(count || 0);
+      onReady?.(instance);
+    };
+    initEditor();
+    return () => {
+      instance?.destroy();
+    };
+  }, []);
+  const handleDrop = (e) => {
+    e.preventDefault();
+    if (userOnDrop && editorRef.current) {
+      userOnDrop(e, editorRef.current);
+    }
+  };
+  const handleDragOver = (e) => {
+    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, {}),
+    renderToolbar,
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: className ?? "editor",
+        style: style ?? { flex: 1, minHeight: 0, overflow: "auto" },
+        ref: containerRef,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver
+      }
+    ),
+    footer && !renderFooter && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorFooter, {}),
+    renderFooter
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BoldTool,
+  CatalogToggleTool,
+  CenterAlignTool,
+  ColorTool,
+  ColumnTool,
+  Editor,
+  EditorFooter,
+  EditorModeTool,
+  EditorOptionTool,
+  EditorProvider,
+  EditorToolbar,
+  FontSizeTool,
+  FontTool,
+  FooterProvider,
+  FooterStatus,
+  FullscreenTool,
+  HighlightTool,
+  ImageTool,
+  ItalicTool,
+  JustifyTool,
+  LeftAlignTool,
+  LineHeightTool,
+  ListTool,
+  PageBreakTool,
+  PageModeTool,
+  PageScaleAddTool,
+  PageScaleMinusTool,
+  PageScalePercentageTool,
+  PaperDirectionTool,
+  PaperMarginTool,
+  PaperSizeTool,
+  RedoTool,
+  RightAlignTool,
+  SeparatorTool,
+  StrikeoutTool,
+  TableTool,
+  TitleTool,
+  UnderlineTool,
+  UndoTool,
+  WatermarkFooterTool,
+  WatermarkTool,
+  useEditor,
+  useFooter
+});
+//# sourceMappingURL=index.js.map