@yurikilian/lex4 0.1.2 → 0.2.0

package/dist/lex4-editor.js

@@ -1,6 +1,9 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useContext, useReducer, useState, useRef, useMemo, useCallback, useEffect, forwardRef, createElement } from "react";
-import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $selectAll, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_DOWN_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL } from "lexical";
+import React, { createContext, useContext, useReducer, useState, useRef, useMemo, useCallback, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
+import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $selectAll, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_DOWN_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $applyNodeReplacement, DecoratorNode, createCommand, $insertNodes, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode } from "@lexical/list";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
@@ -1131,33 +1134,53 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$m = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold = createLucideIcon("bold", __iconNode$j);
+const Bold = createLucideIcon("bold", __iconNode$m);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$l = [
+  [
+    "path",
+    { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
+  ],
+  [
+    "path",
+    {
+      d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",
+      key: "e1hn23"
+    }
+  ]
+];
+const Braces = createLucideIcon("braces", __iconNode$l);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$k = [
   ["line", { x1: "15", x2: "15", y1: "12", y2: "18", key: "1p7wdc" }],
   ["line", { x1: "12", x2: "18", y1: "15", y2: "15", key: "1nscbv" }],
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const CopyPlus = createLucideIcon("copy-plus", __iconNode$i);
+const CopyPlus = createLucideIcon("copy-plus", __iconNode$k);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [
+const __iconNode$j = [
   [
     "path",
     {
@@ -1167,65 +1190,65 @@ const __iconNode$h = [
   ],
   ["path", { d: "m5.082 11.09 8.828 8.828", key: "1wx5vj" }]
 ];
-const Eraser = createLucideIcon("eraser", __iconNode$h);
+const Eraser = createLucideIcon("eraser", __iconNode$j);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$i = [
   ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
   ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
   ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
   ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
 ];
-const Hash = createLucideIcon("hash", __iconNode$g);
+const Hash = createLucideIcon("hash", __iconNode$i);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$h = [
   ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
   ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
   ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
 ];
-const Italic = createLucideIcon("italic", __iconNode$f);
+const Italic = createLucideIcon("italic", __iconNode$h);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$g = [
   ["path", { d: "M21 5H11", key: "us1j55" }],
   ["path", { d: "M21 12H11", key: "wd7e0v" }],
   ["path", { d: "M21 19H11", key: "saa85w" }],
   ["path", { d: "m7 8-4 4 4 4", key: "o5hrat" }]
 ];
-const ListIndentDecrease = createLucideIcon("list-indent-decrease", __iconNode$e);
+const ListIndentDecrease = createLucideIcon("list-indent-decrease", __iconNode$g);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$f = [
   ["path", { d: "M21 5H11", key: "us1j55" }],
   ["path", { d: "M21 12H11", key: "wd7e0v" }],
   ["path", { d: "M21 19H11", key: "saa85w" }],
   ["path", { d: "m3 8 4 4-4 4", key: "1a3j6y" }]
 ];
-const ListIndentIncrease = createLucideIcon("list-indent-increase", __iconNode$d);
+const ListIndentIncrease = createLucideIcon("list-indent-increase", __iconNode$f);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$e = [
   ["path", { d: "M11 5h10", key: "1cz7ny" }],
   ["path", { d: "M11 12h10", key: "1438ji" }],
   ["path", { d: "M11 19h10", key: "11t30w" }],
@@ -1233,14 +1256,14 @@ const __iconNode$c = [
   ["path", { d: "M4 9h2", key: "r1h2o0" }],
   ["path", { d: "M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02", key: "xtkcd5" }]
 ];
-const ListOrdered = createLucideIcon("list-ordered", __iconNode$c);
+const ListOrdered = createLucideIcon("list-ordered", __iconNode$e);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$d = [
   ["path", { d: "M3 5h.01", key: "18ugdj" }],
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
   ["path", { d: "M3 19h.01", key: "noohij" }],
@@ -1248,29 +1271,53 @@ const __iconNode$b = [
   ["path", { d: "M8 12h13", key: "1za7za" }],
   ["path", { d: "M8 19h13", key: "m83p4d" }]
 ];
-const List = createLucideIcon("list", __iconNode$b);
+const List = createLucideIcon("list", __iconNode$d);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$a = [
+const __iconNode$c = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const PanelRight = createLucideIcon("panel-right", __iconNode$a);
+const PanelRight = createLucideIcon("panel-right", __iconNode$c);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$b = [
   ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
   ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
 ];
-const Redo2 = createLucideIcon("redo-2", __iconNode$9);
+const Redo2 = createLucideIcon("redo-2", __iconNode$b);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$a = [
+  ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
+  ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
+  ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
+  ["path", { d: "M8 16H3v5", key: "1cv678" }]
+];
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$a);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search = createLucideIcon("search", __iconNode$9);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -1378,14 +1425,122 @@ const __iconNode = [
   ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
 ];
 const X = createLucideIcon("x", __iconNode);
+const DEFAULT_TRANSLATIONS = {
+  toolbar: {
+    undo: "Undo",
+    redo: "Redo",
+    bold: "Bold (Ctrl+B)",
+    italic: "Italic (Ctrl+I)",
+    underline: "Underline (Ctrl+U)",
+    strikethrough: "Strikethrough",
+    alignLeft: "Align Left",
+    alignCenter: "Align Center",
+    alignRight: "Align Right",
+    justify: "Justify",
+    numberedList: "Numbered List",
+    bulletList: "Bullet List",
+    indent: "Indent",
+    outdent: "Outdent",
+    openHistory: "Open History",
+    closeHistory: "Close History"
+  },
+  history: {
+    title: "History",
+    subtitle: "Word-style session history (last 100 actions)",
+    empty: "No history yet.",
+    clearHistory: "Clear History",
+    actions: {
+      enabledHeadersFooters: "Enabled headers and footers",
+      disabledHeadersFooters: "Disabled headers and footers",
+      copiedHeaderToAll: "Copied header to all pages",
+      copiedFooterToAll: "Copied footer to all pages",
+      clearedHeader: "Cleared header",
+      clearedFooter: "Cleared footer",
+      clearedAllHeaders: "Cleared all headers",
+      clearedAllFooters: "Cleared all footers",
+      pageCounterSet: "Page counter set to {{value}}",
+      boldApplied: "Bold applied",
+      italicApplied: "Italic applied",
+      underlineApplied: "Underline applied",
+      strikethroughApplied: "Strikethrough applied",
+      alignedLeft: "Aligned left",
+      alignedCenter: "Aligned center",
+      alignedRight: "Aligned right",
+      justifiedText: "Justified text",
+      insertedNumberedList: "Inserted numbered list",
+      insertedBulletList: "Inserted bullet list",
+      indentedContent: "Indented content",
+      outdentedContent: "Outdented content",
+      fontChanged: "Font changed to {{value}}",
+      fontSizeChanged: "Font size changed to {{value}}pt"
+    }
+  },
+  variables: {
+    title: "Variables",
+    available: "{{count}} available",
+    refreshVariables: "Refresh variables",
+    searchPlaceholder: "Search variables...",
+    noVariablesFound: "No variables found",
+    insertVariable: "Insert variable {{key}}",
+    openPanel: "Open Variables",
+    closePanel: "Close Variables"
+  },
+  header: {
+    placeholder: "Header"
+  },
+  footer: {
+    placeholder: "Footer"
+  },
+  sidebar: {
+    close: "Close sidebar"
+  }
+};
+function deepMerge(target, source) {
+  if (typeof target !== "object" || target === null) {
+    return source ?? target;
+  }
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceVal = source[key];
+    const targetVal = target[key];
+    if (sourceVal !== void 0 && typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal) && typeof targetVal === "object" && targetVal !== null) {
+      result[key] = deepMerge(targetVal, sourceVal);
+    } else if (sourceVal !== void 0) {
+      result[key] = sourceVal;
+    }
+  }
+  return result;
+}
+const TranslationsContext = createContext(DEFAULT_TRANSLATIONS);
+function useTranslations() {
+  return useContext(TranslationsContext);
+}
+function interpolate(template, params) {
+  return template.replace(
+    /\{\{(\w+)\}\}/g,
+    (_, key) => String(params[key] ?? `{{${key}}}`)
+  );
+}
+const TranslationsProvider = ({
+  translations,
+  children
+}) => {
+  const merged = useMemo(
+    () => translations ? deepMerge(DEFAULT_TRANSLATIONS, translations) : DEFAULT_TRANSLATIONS,
+    [translations]
+  );
+  return /* @__PURE__ */ jsx(TranslationsContext.Provider, { value: merged, children });
+};
 const EditorSidebar = ({
   title,
   subtitle,
   open,
   onClose,
   headerActions,
+  testId = "editor-sidebar",
   children
 }) => {
+  const t = useTranslations();
   if (!open) {
     return null;
   }
@@ -1393,7 +1548,7 @@ const EditorSidebar = ({
     "aside",
     {
       className: "flex h-full w-[320px] shrink-0 flex-col border-l border-gray-200 bg-white",
-      "data-testid": "editor-sidebar",
+      "data-testid": testId,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between border-b border-gray-200 px-3 py-2.5", children: [
           /* @__PURE__ */ jsxs("div", { children: [
@@ -1409,7 +1564,7 @@ const EditorSidebar = ({
                 className: "flex h-6 w-6 items-center justify-center rounded text-gray-400\n                         transition-colors hover:bg-gray-100 hover:text-gray-600",
                 "data-testid": "close-editor-sidebar",
                 onClick: onClose,
-                "aria-label": "Close sidebar",
+                "aria-label": t.sidebar.close,
                 children: /* @__PURE__ */ jsx(X, { size: 14 })
               }
             )
@@ -1437,13 +1592,14 @@ const HistorySidebar = () => {
     jumpToHistoryEntry: jumpToHistoryEntry2,
     setHistorySidebarOpen
   } = useDocument();
+  const t = useTranslations();
   const visibleEntries = historyEntries.slice().reverse();
   const headerActions = /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      title: "Clear History",
-      "aria-label": "Clear History",
+      title: t.history.clearHistory,
+      "aria-label": t.history.clearHistory,
       onMouseDown: (e) => e.preventDefault(),
       onClick: () => clearHistory("manual"),
       className: "flex h-6 w-6 items-center justify-center rounded text-gray-400\n                 transition-colors hover:bg-gray-100 hover:text-gray-600",
@@ -1454,17 +1610,18 @@ const HistorySidebar = () => {
   return /* @__PURE__ */ jsx(
     EditorSidebar,
     {
-      title: "History",
-      subtitle: "Word-style session history (last 100 actions)",
+      title: t.history.title,
+      subtitle: t.history.subtitle,
       open: historySidebarOpen,
       onClose: () => setHistorySidebarOpen(false),
       headerActions,
+      testId: "history-sidebar",
       children: visibleEntries.length === 0 ? /* @__PURE__ */ jsx(
         "div",
         {
           className: "px-3 py-4 text-xs text-gray-500",
           "data-testid": "history-empty",
-          children: "No history yet."
+          children: t.history.empty
         }
       ) : /* @__PURE__ */ jsx("ol", { className: "divide-y divide-gray-100", "data-testid": "history-entry-list", children: visibleEntries.map((entry, reversedIndex) => {
         const actualIndex = historyEntries.length - reversedIndex - 1;
@@ -1655,7 +1812,81 @@ const ActionIconButton = ({ title, icon, onClick, disabled, testId }) => /* @__P
   }
 );
 const ActionDivider = () => /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-gray-300/60" });
+function resolveExtensions(extensions) {
+  const resolved = {
+    nodes: [],
+    bodyPlugins: [],
+    toolbarItems: [],
+    sidePanels: [],
+    providers: [],
+    themeOverrides: {},
+    handleFactories: []
+  };
+  for (const ext of extensions) {
+    if (ext.nodes) resolved.nodes.push(...ext.nodes);
+    if (ext.bodyPlugins) resolved.bodyPlugins.push(...ext.bodyPlugins);
+    if (ext.toolbarItems) resolved.toolbarItems.push(...ext.toolbarItems);
+    if (ext.sidePanel) resolved.sidePanels.push(ext.sidePanel);
+    if (ext.provider) resolved.providers.push(ext.provider);
+    if (ext.themeOverrides) {
+      resolved.themeOverrides = { ...resolved.themeOverrides, ...ext.themeOverrides };
+    }
+    if (ext.handleMethods) resolved.handleFactories.push(ext.handleMethods);
+  }
+  return resolved;
+}
+const EMPTY_RESOLVED = {
+  nodes: [],
+  bodyPlugins: [],
+  toolbarItems: [],
+  sidePanels: [],
+  providers: [],
+  themeOverrides: {},
+  handleFactories: []
+};
+const ExtensionResolvedContext = createContext(EMPTY_RESOLVED);
+const ExtensionProvider = ({ extensions, children }) => {
+  const resolved = useMemo(
+    () => extensions && extensions.length > 0 ? resolveExtensions(extensions) : EMPTY_RESOLVED,
+    [extensions]
+  );
+  let wrapped = /* @__PURE__ */ jsx(Fragment, { children });
+  for (let i = resolved.providers.length - 1; i >= 0; i--) {
+    const Provider = resolved.providers[i];
+    wrapped = /* @__PURE__ */ jsx(Provider, { children: wrapped });
+  }
+  return /* @__PURE__ */ jsx(ExtensionResolvedContext.Provider, { value: resolved, children: wrapped });
+};
+function useExtensions() {
+  return useContext(ExtensionResolvedContext);
+}
+const ExtensionStateContext = createContext(null);
+const ExtensionStateProvider = ({ children }) => {
+  const stateRef = useRef({});
+  return /* @__PURE__ */ jsx(ExtensionStateContext.Provider, { value: stateRef, children });
+};
+function useExtensionState() {
+  const stateRef = useContext(ExtensionStateContext);
+  return {
+    get: (key) => stateRef == null ? void 0 : stateRef.current[key],
+    set: (key, value) => {
+      if (stateRef) stateRef.current[key] = value;
+    }
+  };
+}
+function useExtensionContext(getDocument, getActiveEditor) {
+  const stateRef = useContext(ExtensionStateContext);
+  return useMemo(() => ({
+    getDocument,
+    getActiveEditor,
+    getExtensionState: (key) => stateRef == null ? void 0 : stateRef.current[key],
+    setExtensionState: (key, value) => {
+      if (stateRef) stateRef.current[key] = value;
+    }
+  }), [getDocument, getActiveEditor, stateRef]);
+}
 const SUPPORTED_FONTS = [
+  "Inter",
   "Times New Roman",
   "Arial",
   "Calibri",
@@ -1674,6 +1905,42 @@ function applyFontFamily(editor, fontFamily) {
     }
   });
 }
+const SUPPORTED_FONT_SIZES = [
+  8,
+  9,
+  10,
+  11,
+  12,
+  14,
+  16,
+  18,
+  20,
+  24,
+  28,
+  32,
+  36,
+  48,
+  72
+];
+function applyFontSize(editor, size) {
+  editor.update(() => {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return;
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      if ($isTextNode(node)) {
+        const existing = node.getStyle();
+        const updated = mergeFontSize(existing, size);
+        node.setStyle(updated);
+      }
+    }
+  });
+}
+function mergeFontSize(existingStyle, size) {
+  const stripped = existingStyle.replace(/font-size:\s*[^;]+;?\s*/g, "").trim();
+  const sizeDecl = `font-size: ${size}pt`;
+  return stripped ? `${stripped}; ${sizeDecl}` : sizeDecl;
+}
 function toggleFormat(editor, format) {
   editor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
 }
@@ -1721,6 +1988,8 @@ const Toolbar = () => {
     setHistorySidebarOpen,
     undo
   } = useDocument();
+  const { toolbarItems } = useExtensions();
+  const t = useTranslations();
   const withBodySelection = useCallback(
     (editor, action) => {
       editor.update(() => {
@@ -1758,7 +2027,7 @@ const Toolbar = () => {
   );
   const handleToggle = (enabled) => {
     runToolbarAction(
-      enabled ? "Enabled headers and footers" : "Disabled headers and footers",
+      enabled ? t.history.actions.enabledHeadersFooters : t.history.actions.disabledHeadersFooters,
       () => {
         dispatch({ type: "SET_HEADER_FOOTER_ENABLED", enabled });
       }
@@ -1766,114 +2035,123 @@ const Toolbar = () => {
   };
   const handleCopyHeaderToAll = () => {
     if (activePageId) {
-      runToolbarAction("Copied header to all pages", () => {
+      runToolbarAction(t.history.actions.copiedHeaderToAll, () => {
         dispatch({ type: "COPY_HEADER_TO_ALL", sourcePageId: activePageId });
       });
     }
   };
   const handleCopyFooterToAll = () => {
     if (activePageId) {
-      runToolbarAction("Copied footer to all pages", () => {
+      runToolbarAction(t.history.actions.copiedFooterToAll, () => {
         dispatch({ type: "COPY_FOOTER_TO_ALL", sourcePageId: activePageId });
       });
     }
   };
   const handleClearHeader = () => {
     if (activePageId) {
-      runToolbarAction("Cleared header", () => {
+      runToolbarAction(t.history.actions.clearedHeader, () => {
         dispatch({ type: "CLEAR_HEADER", pageId: activePageId });
       });
     }
   };
   const handleClearFooter = () => {
     if (activePageId) {
-      runToolbarAction("Cleared footer", () => {
+      runToolbarAction(t.history.actions.clearedFooter, () => {
         dispatch({ type: "CLEAR_FOOTER", pageId: activePageId });
       });
     }
   };
-  const handleClearAllHeaders = () => runToolbarAction("Cleared all headers", () => {
+  const handleClearAllHeaders = () => runToolbarAction(t.history.actions.clearedAllHeaders, () => {
     dispatch({ type: "CLEAR_ALL_HEADERS" });
   });
-  const handleClearAllFooters = () => runToolbarAction("Cleared all footers", () => {
+  const handleClearAllFooters = () => runToolbarAction(t.history.actions.clearedAllFooters, () => {
     dispatch({ type: "CLEAR_ALL_FOOTERS" });
   });
   const handlePageCounterModeChange = useCallback((mode) => {
-    runToolbarAction(`Page counter set to ${mode}`, () => {
+    runToolbarAction(interpolate(t.history.actions.pageCounterSet, { value: mode }), () => {
       dispatch({ type: "SET_PAGE_COUNTER_MODE", mode });
     });
-  }, [dispatch, runToolbarAction]);
+  }, [dispatch, runToolbarAction, t.history.actions.pageCounterSet]);
   const handleBold = useCallback(() => {
     debug("toolbar", `bold (globalSelection=${globalSelectionActive}, editors=${editorRegistry.all().length}, hasEditor=${!!activeEditor})`);
-    runToolbarAction("Bold applied", () => {
+    runToolbarAction(t.history.actions.boldApplied, () => {
       applyToBodyEditors(toggleBold);
     });
-  }, [activeEditor, applyToBodyEditors, editorRegistry, globalSelectionActive, runToolbarAction]);
+  }, [activeEditor, applyToBodyEditors, editorRegistry, globalSelectionActive, runToolbarAction, t.history.actions.boldApplied]);
   const handleItalic = useCallback(() => {
     debug("toolbar", `italic (globalSelection=${globalSelectionActive}, hasEditor=${!!activeEditor})`);
-    runToolbarAction("Italic applied", () => {
+    runToolbarAction(t.history.actions.italicApplied, () => {
       applyToBodyEditors(toggleItalic);
     });
-  }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction]);
+  }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction, t.history.actions.italicApplied]);
   const handleUnderline = useCallback(() => {
     debug("toolbar", `underline (globalSelection=${globalSelectionActive}, hasEditor=${!!activeEditor})`);
-    runToolbarAction("Underline applied", () => {
+    runToolbarAction(t.history.actions.underlineApplied, () => {
       applyToBodyEditors(toggleUnderline);
     });
-  }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction]);
+  }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction, t.history.actions.underlineApplied]);
   const handleStrikethrough = useCallback(() => {
     debug("toolbar", `strikethrough (globalSelection=${globalSelectionActive}, hasEditor=${!!activeEditor})`);
-    runToolbarAction("Strikethrough applied", () => {
+    runToolbarAction(t.history.actions.strikethroughApplied, () => {
       applyToBodyEditors(toggleStrikethrough);
     });
-  }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction]);
+  }, [activeEditor, applyToBodyEditors, globalSelectionActive, runToolbarAction, t.history.actions.strikethroughApplied]);
   const handleAlignLeft = useCallback(() => {
-    runToolbarAction("Aligned left", () => {
+    runToolbarAction(t.history.actions.alignedLeft, () => {
       applyToBodyEditors((editor) => setAlignment(editor, "left"));
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.alignedLeft]);
   const handleAlignCenter = useCallback(() => {
-    runToolbarAction("Aligned center", () => {
+    runToolbarAction(t.history.actions.alignedCenter, () => {
       applyToBodyEditors((editor) => setAlignment(editor, "center"));
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.alignedCenter]);
   const handleAlignRight = useCallback(() => {
-    runToolbarAction("Aligned right", () => {
+    runToolbarAction(t.history.actions.alignedRight, () => {
       applyToBodyEditors((editor) => setAlignment(editor, "right"));
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.alignedRight]);
   const handleAlignJustify = useCallback(() => {
-    runToolbarAction("Justified text", () => {
+    runToolbarAction(t.history.actions.justifiedText, () => {
       applyToBodyEditors((editor) => setAlignment(editor, "justify"));
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.justifiedText]);
   const handleListNumber = useCallback(() => {
-    runToolbarAction("Inserted numbered list", () => {
+    runToolbarAction(t.history.actions.insertedNumberedList, () => {
       applyToBodyEditors((editor) => insertList(editor, "number"));
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedNumberedList]);
   const handleListBullet = useCallback(() => {
-    runToolbarAction("Inserted bullet list", () => {
+    runToolbarAction(t.history.actions.insertedBulletList, () => {
       applyToBodyEditors((editor) => insertList(editor, "bullet"));
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.insertedBulletList]);
   const handleIndent = useCallback(() => {
-    runToolbarAction("Indented content", () => {
+    runToolbarAction(t.history.actions.indentedContent, () => {
       applyToBodyEditors(indentContent);
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.indentedContent]);
   const handleOutdent = useCallback(() => {
-    runToolbarAction("Outdented content", () => {
+    runToolbarAction(t.history.actions.outdentedContent, () => {
       applyToBodyEditors(outdentContent);
     });
-  }, [applyToBodyEditors, runToolbarAction]);
+  }, [applyToBodyEditors, runToolbarAction, t.history.actions.outdentedContent]);
   const handleFontChange = useCallback(
     (e) => {
-      runToolbarAction(`Font changed to ${e.target.value}`, () => {
+      runToolbarAction(interpolate(t.history.actions.fontChanged, { value: e.target.value }), () => {
         applyToBodyEditors((editor) => applyFontFamily(editor, e.target.value));
       });
     },
-    [applyToBodyEditors, runToolbarAction]
+    [applyToBodyEditors, runToolbarAction, t.history.actions.fontChanged]
+  );
+  const handleFontSizeChange = useCallback(
+    (e) => {
+      const size = parseInt(e.target.value, 10);
+      runToolbarAction(interpolate(t.history.actions.fontSizeChanged, { value: String(size) }), () => {
+        applyToBodyEditors((editor) => applyFontSize(editor, size));
+      });
+    },
+    [applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
   );
   return /* @__PURE__ */ jsx(
     "div",
@@ -1885,7 +2163,7 @@ const Toolbar = () => {
           /* @__PURE__ */ jsx(
             ToolbarIconButton,
             {
-              title: "Undo",
+              title: t.toolbar.undo,
               testId: "btn-undo",
               disabled: !canUndo,
               onClick: undo,
@@ -1895,7 +2173,7 @@ const Toolbar = () => {
           /* @__PURE__ */ jsx(
             ToolbarIconButton,
             {
-              title: "Redo",
+              title: t.toolbar.redo,
               testId: "btn-redo",
               disabled: !canRedo,
               onClick: redo,
@@ -1909,31 +2187,41 @@ const Toolbar = () => {
           {
             className: "h-7 rounded border border-gray-200 bg-white px-2 text-xs text-gray-700\n                     focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
             "data-testid": "font-selector",
-            defaultValue: "Arial",
+            defaultValue: "Inter",
             onChange: handleFontChange,
             children: SUPPORTED_FONTS.map((font) => /* @__PURE__ */ jsx("option", { value: font, style: { fontFamily: font }, children: font }, font))
           }
         ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            className: "h-7 w-16 rounded border border-gray-200 bg-white px-1 text-xs text-gray-700\n                     focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
+            "data-testid": "font-size-selector",
+            defaultValue: "12",
+            onChange: handleFontSizeChange,
+            children: SUPPORTED_FONT_SIZES.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+          }
+        ),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "format-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Bold (Ctrl+B)", testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Italic (Ctrl+I)", testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Underline (Ctrl+U)", testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsx(Underline, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Strikethrough", testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) })
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsx(Underline, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "align-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Align Left", testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsx(TextAlignStart, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Align Center", testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Align Right", testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Justify", testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsx(TextAlignJustify, { size: 15 }) })
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsx(TextAlignStart, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsx(TextAlignJustify, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "list-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Numbered List", testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsx(ListOrdered, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Bullet List", testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsx(List, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Indent", testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsx(ListIndentIncrease, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: "Outdent", testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsx(ListIndentDecrease, { size: 15 }) })
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsx(ListOrdered, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsx(ListIndentIncrease, { size: 15 }) }),
+          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsx(ListIndentDecrease, { size: 15 }) })
         ] }),
         /* @__PURE__ */ jsx(Divider, {}),
         /* @__PURE__ */ jsx(
@@ -1960,10 +2248,14 @@ const Toolbar = () => {
             }
           )
         ] }),
+        toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          toolbarItems.map((ToolbarItem, idx) => /* @__PURE__ */ jsx(ToolbarItem, {}, idx))
+        ] }),
         /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
           ToolbarIconButton,
           {
-            title: historySidebarOpen ? "Close History" : "Open History",
+            title: historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
             testId: "toggle-history-sidebar",
             active: historySidebarOpen,
             onClick: () => setHistorySidebarOpen(!historySidebarOpen),
@@ -2266,12 +2558,13 @@ const lexicalTheme = {
   },
   quote: "border-l-4 border-gray-300 pl-4 italic text-gray-600"
 };
-function createEditorConfig(mode, pageId) {
+const DEFAULT_NODES = [HeadingNode, QuoteNode, ListNode, ListItemNode];
+function createEditorConfig(mode, pageId, extraNodes = [], themeOverrides = {}) {
   const namespace = pageId ? `lex4-${mode}-${pageId}` : `lex4-${mode}`;
   return {
     namespace,
-    theme: lexicalTheme,
-    nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode],
+    theme: { ...lexicalTheme, ...themeOverrides },
+    nodes: [...DEFAULT_NODES, ...extraNodes],
     onError: (error) => {
       console.error(`[Lex4 ${mode} editor error]`, error);
     }
@@ -2849,11 +3142,12 @@ const PageBody = ({
   onMoveToNextPage,
   readOnly = false
 }) => {
+  const { nodes, bodyPlugins, themeOverrides } = useExtensions();
   const config = useMemo(
     () => {
       var _a, _b;
       const baseConfig = {
-        ...createEditorConfig("body", pageId),
+        ...createEditorConfig("body", pageId, nodes, themeOverrides),
         editable: !readOnly
       };
       if (initialBodyState) {
@@ -2867,7 +3161,7 @@ const PageBody = ({
       return baseConfig;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally only use initialBodyState at mount time
-    [pageId, readOnly]
+    [pageId, readOnly, nodes, themeOverrides]
   );
   const handleChange = useCallback(
     (editorState) => {
@@ -2923,6 +3217,7 @@ const PageBody = ({
           }
         ),
         /* @__PURE__ */ jsx(OverflowPlugin, { onOverflow: handleOverflow }),
+        bodyPlugins.map((Plugin, idx) => /* @__PURE__ */ jsx(Plugin, {}, idx)),
         /* @__PURE__ */ jsx(OnChangePlugin, { onChange: handleChange, ignoreSelectionChange: true })
       ] })
     }
@@ -2992,16 +3287,18 @@ const PageHeader = ({
   onHeaderChange
 }) => {
   const hasPageCounter = !!pageCounterLabel;
+  const { nodes, themeOverrides } = useExtensions();
+  const t = useTranslations();
   const config = useMemo(
     () => {
-      const baseConfig = createEditorConfig("header", pageId);
+      const baseConfig = createEditorConfig("header", pageId, nodes, themeOverrides);
       if (initialHeaderState) {
         return { ...baseConfig, editorState: JSON.stringify(initialHeaderState) };
       }
       return baseConfig;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- syncVersion forces remount via key, only used at init
-    [pageId]
+    [pageId, nodes, themeOverrides]
   );
   const contentRef = useRef(null);
   const handleChange = useCallback(
@@ -3027,7 +3324,7 @@ const PageHeader = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "lex4-page-header border-b border-dashed border-gray-200 relative flex-shrink-0",
+      className: "lex4-page-header bg-blue-50/60 border-t-2 border-t-blue-200 border-b border-dashed border-blue-100 relative flex-shrink-0",
       style: { maxHeight: MAX_HEADER_HEIGHT_PX, overflow: "clip" },
       "data-testid": `page-header-${pageId}`,
       children: [
@@ -3042,7 +3339,7 @@ const PageHeader = ({
                   className: `outline-none p-2 text-sm text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
                 }
               ),
-              placeholder: /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 text-sm ${hasPageCounter ? "pr-24" : ""}`, children: "Header" }),
+              placeholder: /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 text-sm ${hasPageCounter ? "pr-24" : ""}`, children: t.header.placeholder }),
               ErrorBoundary: LexicalErrorBoundary
             }
           ),
@@ -3070,16 +3367,18 @@ const PageFooter = ({
   onFooterChange
 }) => {
   const hasPageCounter = !!pageCounterLabel;
+  const { nodes, themeOverrides } = useExtensions();
+  const t = useTranslations();
   const config = useMemo(
     () => {
-      const baseConfig = createEditorConfig("footer", pageId);
+      const baseConfig = createEditorConfig("footer", pageId, nodes, themeOverrides);
       if (initialFooterState) {
         return { ...baseConfig, editorState: JSON.stringify(initialFooterState) };
       }
       return baseConfig;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps -- syncVersion forces remount via key, only used at init
-    [pageId]
+    [pageId, nodes, themeOverrides]
   );
   const contentRef = useRef(null);
   const handleChange = useCallback(
@@ -3105,7 +3404,7 @@ const PageFooter = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "lex4-page-footer border-t border-dashed border-gray-200 relative flex-shrink-0",
+      className: "lex4-page-footer bg-blue-50/60 border-b-2 border-b-blue-200 border-t border-dashed border-blue-100 relative flex-shrink-0",
       style: { maxHeight: MAX_FOOTER_HEIGHT_PX, overflow: "clip" },
       "data-testid": `page-footer-${pageId}`,
       children: [
@@ -3120,7 +3419,7 @@ const PageFooter = ({
                   className: `outline-none p-2 text-sm text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
                 }
               ),
-              placeholder: /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 text-sm ${hasPageCounter ? "pr-24" : ""}`, children: "Footer" }),
+              placeholder: /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 text-sm ${hasPageCounter ? "pr-24" : ""}`, children: t.footer.placeholder }),
               ErrorBoundary: LexicalErrorBoundary
             }
           ),
@@ -3186,7 +3485,7 @@ const PageView = React.memo(({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "lex4-page bg-white shadow-sm flex flex-col",
+      className: "lex4-page bg-white shadow-xl flex flex-col",
       style: {
         width: A4_WIDTH_PX,
         height: A4_HEIGHT_PX,
@@ -3522,6 +3821,7 @@ const EditorChrome = ({
     undo,
     redo
   } = useDocument();
+  const { sidePanels } = useExtensions();
   const rootRef = useRef(null);
   const selectionBufferRef = useRef(null);
   const clearGlobalSelection = useCallback(() => {
@@ -3663,35 +3963,63 @@ const EditorChrome = ({
           }
         ),
         /* @__PURE__ */ jsx(Toolbar, {}),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-200", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-700", children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(DocumentView, {}) }),
+          sidePanels.map((Panel, idx) => /* @__PURE__ */ jsx(Panel, {}, idx)),
           /* @__PURE__ */ jsx(HistorySidebar, {})
         ] })
       ]
     }
   );
 };
-const Lex4Editor = ({
+const EditorWithHandle = forwardRef(({ captureHistoryShortcutsOnWindow, className }, ref) => {
+  const { document: doc, activeEditor } = useDocument();
+  const { handleFactories } = useExtensions();
+  const getDocument = useCallback(() => doc, [doc]);
+  const getActiveEditor = useCallback(() => activeEditor, [activeEditor]);
+  const extensionCtx = useExtensionContext(getDocument, getActiveEditor);
+  useImperativeHandle(ref, () => {
+    const handle = {};
+    for (const factory of handleFactories) {
+      const methods = factory(extensionCtx);
+      Object.assign(handle, methods);
+    }
+    return handle;
+  }, [extensionCtx, handleFactories]);
+  return /* @__PURE__ */ jsx(
+    EditorChrome,
+    {
+      captureHistoryShortcutsOnWindow,
+      className
+    }
+  );
+});
+EditorWithHandle.displayName = "EditorWithHandle";
+const Lex4Editor = forwardRef(({
   captureHistoryShortcutsOnWindow = true,
   initialDocument,
   onDocumentChange,
+  extensions,
+  translations,
   className
-}) => {
-  return /* @__PURE__ */ jsx(
+}, ref) => {
+  return /* @__PURE__ */ jsx(TranslationsProvider, { translations, children: /* @__PURE__ */ jsx(ExtensionStateProvider, { children: /* @__PURE__ */ jsx(ExtensionProvider, { extensions, children: /* @__PURE__ */ jsx(
     DocumentProvider,
     {
       initialDocument,
       onDocumentChange,
       children: /* @__PURE__ */ jsx(
-        EditorChrome,
+        EditorWithHandle,
         {
+          ref,
           captureHistoryShortcutsOnWindow,
           className
         }
       )
     }
-  );
-};
+  ) }) }) });
+});
+Lex4Editor.displayName = "Lex4Editor";
 function useOverflowDetection(bodyHeight, onOverflow, debounceMs = 100) {
   const timerRef = useRef(null);
   const observerRef = useRef(null);
@@ -3757,18 +4085,702 @@ function useHeaderFooter(maxHeight, onHeightChange) {
   }, []);
   return { attachRef };
 }
+const AST_VERSION = "1.0.0";
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+const IS_STRIKETHROUGH = 4;
+const IS_UNDERLINE = 8;
+function decodeFormatBitmask(format) {
+  const marks = {};
+  if (format & IS_BOLD) marks.bold = true;
+  if (format & IS_ITALIC) marks.italic = true;
+  if (format & IS_UNDERLINE) marks.underline = true;
+  if (format & IS_STRIKETHROUGH) marks.strikethrough = true;
+  return marks;
+}
+function extractFontFamily(style) {
+  const match = style.match(/font-family:\s*([^;]+)/);
+  return match ? match[1].trim().replace(/['"]/g, "") : void 0;
+}
+function extractFontSizePt(style) {
+  const match = style.match(/font-size:\s*(\d+(?:\.\d+)?)\s*pt/);
+  return match ? parseFloat(match[1]) : void 0;
+}
+function buildTextMarks(format, style) {
+  const formatMarks = decodeFormatBitmask(format);
+  const fontFamily = style ? extractFontFamily(style) : void 0;
+  const fontSize = style ? extractFontSizePt(style) : void 0;
+  const marks = {
+    ...formatMarks,
+    ...fontFamily ? { fontFamily } : {},
+    ...fontSize ? { fontSize } : {}
+  };
+  return Object.keys(marks).length > 0 ? marks : void 0;
+}
+function mapInlineNode(node) {
+  switch (node.type) {
+    case "text":
+      return mapTextNode(node);
+    case "variable-node":
+      return mapVariableNode(node);
+    case "linebreak":
+      return mapLineBreak();
+    default:
+      return { type: "text", text: "" };
+  }
+}
+function mapTextNode(node) {
+  const marks = buildTextMarks(node.format, node.style);
+  return {
+    type: "text",
+    text: node.text,
+    ...marks ? { marks } : {}
+  };
+}
+function mapVariableNode(node) {
+  return {
+    type: "variable",
+    key: node.variableKey
+  };
+}
+function mapLineBreak() {
+  return { type: "linebreak" };
+}
+function mapInlineNodes(nodes) {
+  return nodes.map(mapInlineNode);
+}
+const ALIGN_LEFT = 1;
+const ALIGN_CENTER = 2;
+const ALIGN_RIGHT = 3;
+const ALIGN_JUSTIFY = 4;
+function decodeAlignment(format) {
+  if (typeof format === "string") {
+    if (["left", "center", "right", "justify"].includes(format)) {
+      return format;
+    }
+    return void 0;
+  }
+  if (typeof format !== "number" || format === 0) return void 0;
+  switch (format) {
+    case ALIGN_LEFT:
+      return "left";
+    case ALIGN_CENTER:
+      return "center";
+    case ALIGN_RIGHT:
+      return "right";
+    case ALIGN_JUSTIFY:
+      return "justify";
+    default:
+      return void 0;
+  }
+}
+function mapBlockNode(node) {
+  switch (node.type) {
+    case "paragraph":
+      return mapParagraph(node);
+    case "heading":
+      return mapHeading(node);
+    case "list":
+      return mapList(node);
+    case "quote":
+      return mapBlockQuote(node);
+    default:
+      return {
+        type: "paragraph",
+        children: mapInlineChildren(node)
+      };
+  }
+}
+function mapParagraph(node) {
+  const alignment = decodeAlignment(node.format);
+  const indent = node.indent && node.indent > 0 ? node.indent : void 0;
+  return {
+    type: "paragraph",
+    ...alignment ? { alignment } : {},
+    ...indent ? { indent } : {},
+    children: mapInlineChildren(node)
+  };
+}
+function mapHeading(node) {
+  var _a;
+  const alignment = decodeAlignment(node.format);
+  const tagMatch = (_a = node.tag) == null ? void 0 : _a.match(/^h(\d)$/);
+  const level = tagMatch ? parseInt(tagMatch[1], 10) : 1;
+  return {
+    type: "heading",
+    level,
+    ...alignment ? { alignment } : {},
+    children: mapInlineChildren(node)
+  };
+}
+function mapList(node) {
+  const listType = node.listType === "number" ? "ordered" : "unordered";
+  const items = (node.children ?? []).filter((c) => c.type === "listitem").map(mapListItem);
+  return {
+    type: "list",
+    listType,
+    items
+  };
+}
+function mapListItem(node) {
+  const inlineChildren = [];
+  let nestedList;
+  for (const child of node.children ?? []) {
+    if (child.type === "list") {
+      nestedList = mapList(child);
+    } else {
+      const mapped = mapInlineNodes([child]);
+      inlineChildren.push(...mapped);
+    }
+  }
+  return {
+    type: "list-item",
+    children: inlineChildren,
+    ...nestedList ? { nestedList } : {}
+  };
+}
+function mapBlockQuote(node) {
+  return {
+    type: "blockquote",
+    children: mapInlineChildren(node)
+  };
+}
+function mapInlineChildren(node) {
+  if (!node.children || node.children.length === 0) return [];
+  return mapInlineNodes(node.children);
+}
+function mapBlockNodes(nodes) {
+  return nodes.map(mapBlockNode);
+}
+function mapEditorStateToContent(state) {
+  if (!state || !state.root || !state.root.children) {
+    return null;
+  }
+  const blocks = mapBlockNodes(state.root.children);
+  return { blocks };
+}
+function mapEditorStateToBlocks(state) {
+  if (!state || !state.root || !state.root.children) {
+    return [];
+  }
+  return mapBlockNodes(state.root.children);
+}
+const MARGIN_MM = Math.round(PAGE_MARGIN_PX / PX_PER_MM * 10) / 10;
+function serializeDocument(document2, variableDefinitions = []) {
+  const pages = document2.pages.map(
+    (page, index) => serializePage(page, index)
+  );
+  const metadata = buildMetadata(variableDefinitions);
+  return {
+    version: AST_VERSION,
+    page: {
+      format: "A4",
+      widthMm: 210,
+      heightMm: 297,
+      margins: {
+        topMm: MARGIN_MM,
+        rightMm: MARGIN_MM,
+        bottomMm: MARGIN_MM,
+        leftMm: MARGIN_MM
+      }
+    },
+    headerFooter: {
+      enabled: document2.headerFooterEnabled,
+      pageCounterMode: document2.pageCounterMode,
+      defaultHeader: document2.pages.length > 0 ? mapEditorStateToContent(document2.pages[0].headerState) : null,
+      defaultFooter: document2.pages.length > 0 ? mapEditorStateToContent(document2.pages[0].footerState) : null
+    },
+    pages,
+    metadata
+  };
+}
+function serializePage(page, pageIndex) {
+  return {
+    pageIndex,
+    body: mapEditorStateToBlocks(page.bodyState),
+    header: mapEditorStateToContent(page.headerState),
+    footer: mapEditorStateToContent(page.footerState)
+  };
+}
+function buildMetadata(variableDefinitions) {
+  const variables = {};
+  for (const def of variableDefinitions) {
+    variables[def.key] = {
+      key: def.key,
+      label: def.label,
+      ...def.description ? { description: def.description } : {},
+      ...def.valueType ? { valueType: def.valueType } : {},
+      ...def.group ? { group: def.group } : {}
+    };
+  }
+  return { variables };
+}
+function buildSavePayload(ast, options) {
+  return {
+    document: ast,
+    ...(options == null ? void 0 : options.exportTarget) ? { exportTarget: options.exportTarget } : {},
+    ...(options == null ? void 0 : options.documentId) ? { documentId: options.documentId } : {},
+    ...(options == null ? void 0 : options.metadata) ? { metadata: options.metadata } : {}
+  };
+}
+function serializeDocumentJson(ast) {
+  return JSON.stringify(ast, null, 2);
+}
+function astExtension() {
+  return {
+    name: "ast",
+    handleMethods: (ctx) => {
+      const getDefinitions = () => {
+        return ctx.getExtensionState("variableDefinitions") ?? [];
+      };
+      return {
+        getDocumentAst: () => {
+          const doc = ctx.getDocument();
+          return serializeDocument(doc, getDefinitions());
+        },
+        getDocumentJson: () => {
+          const doc = ctx.getDocument();
+          const ast = serializeDocument(doc, getDefinitions());
+          return serializeDocumentJson(ast);
+        },
+        buildSavePayload: (options) => {
+          const doc = ctx.getDocument();
+          const ast = serializeDocument(doc, getDefinitions());
+          return buildSavePayload(ast, options);
+        }
+      };
+    }
+  };
+}
+class VariableNode extends DecoratorNode {
+  constructor(variableKey, key) {
+    super(key);
+    __publicField(this, "__variableKey");
+    this.__variableKey = variableKey;
+  }
+  static getType() {
+    return "variable-node";
+  }
+  static clone(node) {
+    return new VariableNode(node.__variableKey, node.__key);
+  }
+  getVariableKey() {
+    return this.__variableKey;
+  }
+  // -- Serialization --
+  static importJSON(serializedNode) {
+    return $createVariableNode(serializedNode.variableKey);
+  }
+  exportJSON() {
+    return {
+      type: "variable-node",
+      version: 1,
+      variableKey: this.__variableKey
+    };
+  }
+  // -- DOM --
+  createDOM() {
+    const span = document.createElement("span");
+    span.className = "lex4-variable";
+    span.setAttribute("data-variable-key", this.__variableKey);
+    span.setAttribute("data-testid", `variable-${this.__variableKey}`);
+    span.contentEditable = "false";
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  exportDOM() {
+    const span = document.createElement("span");
+    span.setAttribute("data-variable-key", this.__variableKey);
+    span.textContent = `{{${this.__variableKey}}}`;
+    return { element: span };
+  }
+  static importDOM() {
+    return null;
+  }
+  // -- Behavior --
+  isInline() {
+    return true;
+  }
+  isKeyboardSelectable() {
+    return true;
+  }
+  getTextContent() {
+    return `{{${this.__variableKey}}}`;
+  }
+  // -- Rendering --
+  decorate() {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "lex4-variable-chip inline-flex items-center rounded bg-white px-1.5 py-0.5\n                   text-xs font-medium text-blue-700 border border-blue-300 select-none\n                   cursor-default whitespace-nowrap mx-0.5",
+        "data-testid": `variable-chip-${this.__variableKey}`,
+        title: this.__variableKey,
+        children: `{{${this.__variableKey}}}`
+      }
+    );
+  }
+}
+function $createVariableNode(variableKey) {
+  return $applyNodeReplacement(new VariableNode(variableKey));
+}
+function $isVariableNode(node) {
+  return node instanceof VariableNode;
+}
+const INSERT_VARIABLE_COMMAND = createCommand("INSERT_VARIABLE");
+const VariablePlugin = () => {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_VARIABLE_COMMAND,
+      (variableKey) => {
+        editor.update(() => {
+          const selection = $getSelection();
+          if (!$isRangeSelection(selection)) return;
+          const variableNode = $createVariableNode(variableKey);
+          $insertNodes([variableNode]);
+        });
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+};
+const EMPTY_CONTEXT = {
+  definitions: [],
+  refreshDefinitions: () => {
+  },
+  getDefinition: () => void 0
+};
+const VariableContext = createContext(EMPTY_CONTEXT);
+const VariableProvider = ({
+  initialDefinitions = [],
+  children
+}) => {
+  const [definitions, setDefinitions] = useState(initialDefinitions);
+  const refresh = useCallback((newDefinitions) => {
+    setDefinitions(newDefinitions);
+  }, []);
+  const getDefinition = useCallback(
+    (key) => {
+      return definitions.find((d) => d.key === key);
+    },
+    [definitions]
+  );
+  const value = useMemo(
+    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
+    [definitions, refresh, getDefinition]
+  );
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value, children });
+};
+function useVariables() {
+  return useContext(VariableContext);
+}
+const VariablePicker = ({ onInsert, disabled = false }) => {
+  const { definitions } = useVariables();
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const containerRef = useRef(null);
+  const filtered = useMemo(() => {
+    if (!filter) return definitions;
+    const lower = filter.toLowerCase();
+    return definitions.filter(
+      (d) => d.key.toLowerCase().includes(lower) || d.label.toLowerCase().includes(lower)
+    );
+  }, [definitions, filter]);
+  const grouped = useMemo(() => {
+    const groups = {};
+    for (const def of filtered) {
+      const g = def.group ?? "Other";
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(def);
+    }
+    return groups;
+  }, [filtered]);
+  const handleInsert = useCallback(
+    (key) => {
+      onInsert(key);
+      setOpen(false);
+      setFilter("");
+    },
+    [onInsert]
+  );
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+        setFilter("");
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-block", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "h-7 rounded border border-gray-200 bg-white px-2 text-xs font-medium text-gray-700\n                   hover:bg-gray-50 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400\n                   disabled:opacity-50 disabled:cursor-not-allowed",
+        "data-testid": "variable-picker-button",
+        disabled: disabled || definitions.length === 0,
+        onClick: () => setOpen(!open),
+        title: "Insert variable",
+        children: "{x}"
+      }
+    ),
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "absolute left-0 top-full z-50 mt-1 w-64 rounded-md border border-gray-200\n                     bg-white shadow-lg",
+        "data-testid": "variable-picker-dropdown",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "border-b border-gray-100 p-2", children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "w-full rounded border border-gray-200 px-2 py-1 text-xs\n                         focus:border-blue-400 focus:outline-none",
+              placeholder: "Search variables...",
+              "data-testid": "variable-picker-search",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value),
+              autoFocus: true
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "max-h-48 overflow-y-auto p-1", children: [
+            Object.keys(grouped).length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs text-gray-400", children: "No variables found" }),
+            Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-[10px] font-semibold uppercase text-gray-400", children: group }),
+              defs.map((def) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs\n                               hover:bg-blue-50",
+                  "data-testid": `variable-option-${def.key}`,
+                  onClick: () => handleInsert(def.key),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-medium text-blue-700", children: `{{${def.key}}}` }),
+                    /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: def.label })
+                  ]
+                },
+                def.key
+              ))
+            ] }, group))
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+const VariablePanel = ({ open, onClose }) => {
+  const { definitions } = useVariables();
+  const { activeEditor, runHistoryAction } = useDocument();
+  const t = useTranslations();
+  const [filter, setFilter] = useState("");
+  const filtered = useMemo(() => {
+    if (!filter) return definitions;
+    const lower = filter.toLowerCase();
+    return definitions.filter(
+      (d) => d.key.toLowerCase().includes(lower) || d.label.toLowerCase().includes(lower)
+    );
+  }, [definitions, filter]);
+  const grouped = useMemo(() => {
+    const groups = {};
+    for (const def of filtered) {
+      const g = def.group ?? "Other";
+      if (!groups[g]) groups[g] = [];
+      groups[g].push(def);
+    }
+    return groups;
+  }, [filtered]);
+  const handleInsert = useCallback(
+    (key) => {
+      if (!activeEditor) return;
+      runHistoryAction(
+        { label: interpolate(t.variables.insertVariable, { key }), source: "toolbar", region: "document" },
+        () => {
+          activeEditor.dispatchCommand(INSERT_VARIABLE_COMMAND, key);
+        }
+      );
+    },
+    [activeEditor, runHistoryAction]
+  );
+  if (definitions.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    EditorSidebar,
+    {
+      title: t.variables.title,
+      subtitle: interpolate(t.variables.available, { count: String(definitions.length) }),
+      open,
+      onClose,
+      testId: "variable-panel",
+      headerActions: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "flex h-6 w-6 items-center justify-center rounded text-gray-400\n                     transition-colors hover:bg-gray-100 hover:text-gray-600",
+          title: t.variables.refreshVariables,
+          "data-testid": "btn-refresh-variables",
+          children: /* @__PURE__ */ jsx(RefreshCw, { size: 12 })
+        }
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx(Search, { size: 14, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              className: "w-full rounded-lg border border-gray-200 bg-gray-50 py-1.5 pl-8 pr-3 text-xs\n                       placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none\n                       focus:ring-1 focus:ring-blue-400",
+              placeholder: t.variables.searchPlaceholder,
+              "data-testid": "variable-panel-search",
+              value: filter,
+              onChange: (e) => setFilter(e.target.value)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-3 pb-3", children: [
+          Object.keys(grouped).length === 0 && /* @__PURE__ */ jsx("div", { className: "py-4 text-center text-xs text-gray-400", children: t.variables.noVariablesFound }),
+          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1", children: defs.map((def) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs\n                             transition-colors hover:bg-blue-50 group",
+              "data-testid": `variable-panel-${def.key}`,
+              onClick: () => handleInsert(def.key),
+              disabled: !activeEditor,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "inline-flex items-center rounded-full border border-blue-300 bg-white\n                               px-2 py-0.5 text-[11px] font-medium text-blue-700\n                               group-hover:border-blue-400 group-hover:bg-blue-50",
+                    children: def.label
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: group })
+              ]
+            },
+            def.key
+          )) }) }, group))
+        ] })
+      ]
+    }
+  );
+};
+const VariablePanelContext = createContext({
+  panelOpen: false,
+  setPanelOpen: () => {
+  }
+});
+function useVariablePanelState() {
+  return useContext(VariablePanelContext);
+}
+const VariablePanelStateProvider = ({ children }) => {
+  const [panelOpen, setPanelOpen] = useState(false);
+  return /* @__PURE__ */ jsx(VariablePanelContext.Provider, { value: { panelOpen, setPanelOpen }, children });
+};
+const VariableToolbarItem = () => {
+  const { activeEditor, runHistoryAction } = useDocument();
+  const t = useTranslations();
+  const handleInsert = useCallback((variableKey) => {
+    runHistoryAction(
+      { label: interpolate(t.variables.insertVariable, { key: variableKey }), source: "toolbar", region: "document" },
+      () => {
+        if (activeEditor) {
+          activeEditor.dispatchCommand(INSERT_VARIABLE_COMMAND, variableKey);
+        }
+      }
+    );
+  }, [activeEditor, runHistoryAction]);
+  return /* @__PURE__ */ jsx(
+    VariablePicker,
+    {
+      onInsert: handleInsert,
+      disabled: !activeEditor
+    }
+  );
+};
+const VariablePanelToggle = () => {
+  const { panelOpen, setPanelOpen } = useVariablePanelState();
+  const t = useTranslations();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      title: panelOpen ? t.variables.closePanel : t.variables.openPanel,
+      "aria-label": panelOpen ? t.variables.closePanel : t.variables.openPanel,
+      onMouseDown: (e) => e.preventDefault(),
+      onClick: () => setPanelOpen(!panelOpen),
+      className: `
+        flex h-7 w-7 items-center justify-center rounded transition-colors
+        ${panelOpen ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}
+      `,
+      "data-testid": "toggle-variable-panel",
+      children: /* @__PURE__ */ jsx(Braces, { size: 15 })
+    }
+  );
+};
+const VariablePanelWithState = () => {
+  const { panelOpen, setPanelOpen } = useVariablePanelState();
+  return /* @__PURE__ */ jsx(VariablePanel, { open: panelOpen, onClose: () => setPanelOpen(false) });
+};
+const VariableDefinitionsSync = ({ children }) => {
+  const { definitions } = useVariables();
+  const extState = useExtensionState();
+  useEffect(() => {
+    extState.set("variableDefinitions", definitions);
+  }, [definitions, extState]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+function variablesExtension(definitions = []) {
+  const ProviderWrapper = ({ children }) => {
+    return /* @__PURE__ */ jsx(VariablePanelStateProvider, { children: /* @__PURE__ */ jsx(VariableProvider, { initialDefinitions: definitions, children: /* @__PURE__ */ jsx(VariableDefinitionsSync, { children }) }) });
+  };
+  return {
+    name: "variables",
+    nodes: [VariableNode],
+    bodyPlugins: [VariablePlugin],
+    toolbarItems: [VariableToolbarItem, VariablePanelToggle],
+    sidePanel: VariablePanelWithState,
+    provider: ProviderWrapper,
+    handleMethods: (ctx) => ({
+      insertVariable: (key) => {
+        const editor = ctx.getActiveEditor();
+        if (editor) {
+          editor.dispatchCommand(INSERT_VARIABLE_COMMAND, key);
+        }
+      },
+      refreshVariables: (newDefs) => {
+        ctx.setExtensionState("variableDefinitions", newDefs);
+      }
+    })
+  };
+}
 export {
+  $createVariableNode,
+  $isVariableNode,
   A4_HEIGHT_MM,
   A4_HEIGHT_PX,
   A4_WIDTH_MM,
   A4_WIDTH_PX,
+  AST_VERSION,
+  DEFAULT_TRANSLATIONS,
+  INSERT_VARIABLE_COMMAND,
   Lex4Editor,
   MAX_FOOTER_HEIGHT_PX,
   MAX_HEADER_HEIGHT_PX,
+  VariableNode,
+  astExtension,
+  buildSavePayload,
   createEmptyDocument,
   createEmptyPage,
+  serializeDocument,
+  serializeDocumentJson,
   useHeaderFooter,
   useOverflowDetection,
-  usePagination
+  usePagination,
+  variablesExtension
 };
 //# sourceMappingURL=lex4-editor.js.map