@yurikilian/lex4 1.2.0 → 1.4.1

package/dist/lex4-editor.cjs

@@ -515,7 +515,17 @@ const DEFAULT_TRANSLATIONS = {
     noVariablesFound: "No variables found",
     insertVariable: "Insert variable {{key}}",
     openPanel: "Open Variables",
-    closePanel: "Close Variables"
+    closePanel: "Close Variables",
+    newVariable: "New variable",
+    createVariableTitle: "Create variable",
+    createVariableLabel: "Label",
+    createVariableKey: "Key",
+    createVariableGroup: "Group",
+    createVariableType: "Type",
+    createVariableSave: "Add variable",
+    createVariableCancel: "Cancel",
+    createVariableMissingFields: "Label and key are required.",
+    createVariableDuplicateKey: "Variable {{key}} already exists."
   },
   header: {
     placeholder: "Header"
@@ -540,7 +550,20 @@ const DEFAULT_TRANSLATIONS = {
     page: "Page {{page}}"
   },
   headerFooter: {
-    label: "Headers & Footers"
+    label: "Headers & Footers",
+    settingsLabel: "Header and footer settings",
+    pageCounter: "Page counter",
+    pageCounterModes: {
+      none: "None",
+      header: "Header",
+      footer: "Footer",
+      both: "Both"
+    },
+    headerSection: "Header",
+    footerSection: "Footer",
+    copyToAllPages: "Copy to all pages",
+    clearThisPage: "Clear this page",
+    clearAll: "Clear all"
   },
   sidebar: {
     close: "Close sidebar"
@@ -623,7 +646,17 @@ const PT_BR_TRANSLATIONS = {
     noVariablesFound: "Nenhuma variável encontrada",
     insertVariable: "Inserir variável {{key}}",
     openPanel: "Abrir Variáveis",
-    closePanel: "Fechar Variáveis"
+    closePanel: "Fechar Variáveis",
+    newVariable: "Nova variável",
+    createVariableTitle: "Criar variável",
+    createVariableLabel: "Rótulo",
+    createVariableKey: "Chave",
+    createVariableGroup: "Grupo",
+    createVariableType: "Tipo",
+    createVariableSave: "Adicionar variável",
+    createVariableCancel: "Cancelar",
+    createVariableMissingFields: "Rótulo e chave são obrigatórios.",
+    createVariableDuplicateKey: "A variável {{key}} já existe."
   },
   header: {
     placeholder: "Cabeçalho"
@@ -648,7 +681,20 @@ const PT_BR_TRANSLATIONS = {
     page: "Página {{page}}"
   },
   headerFooter: {
-    label: "Cabeçalhos e Rodapés"
+    label: "Cabeçalhos e Rodapés",
+    settingsLabel: "Configurações de cabeçalho e rodapé",
+    pageCounter: "Contador de páginas",
+    pageCounterModes: {
+      none: "Nenhum",
+      header: "Cabeçalho",
+      footer: "Rodapé",
+      both: "Ambos"
+    },
+    headerSection: "Cabeçalho",
+    footerSection: "Rodapé",
+    copyToAllPages: "Copiar para todas as páginas",
+    clearThisPage: "Limpar esta página",
+    clearAll: "Limpar tudo"
   },
   sidebar: {
     close: "Fechar barra lateral"
@@ -934,7 +980,7 @@ const DocumentProvider = ({
   );
   const activePageIdRef = React.useRef(((_b = initialSnapshot.pages[0]) == null ? void 0 : _b.id) ?? null);
   const [globalSelectionActive, setGlobalSelectionActive] = React.useState(false);
-  const [historySidebarOpen, setHistorySidebarOpen] = React.useState(true);
+  const [historySidebarOpen, setHistorySidebarOpen] = React.useState(false);
   const [focusAtEndVersion, setFocusAtEndVersion] = React.useState(0);
   const t = useTranslations();
   const activeEditorRef = React.useRef(null);
@@ -1389,33 +1435,33 @@ 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$q = [
+const __iconNode$p = [
   ["path", { d: "m15 16 2.536-7.328a1.02 1.02 1 0 1 1.928 0L22 16", key: "xik6mr" }],
   ["path", { d: "M15.697 14h5.606", key: "1stdlc" }],
   ["path", { d: "m2 16 4.039-9.69a.5.5 0 0 1 .923 0L11 16", key: "d5nyq2" }],
   ["path", { d: "M3.304 13h6.392", key: "1q3zxz" }]
 ];
-const ALargeSmall = createLucideIcon("a-large-small", __iconNode$q);
+const ALargeSmall = createLucideIcon("a-large-small", __iconNode$p);
 /**
  * @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$p = [
+const __iconNode$o = [
   [
     "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$p);
+const Bold = createLucideIcon("bold", __iconNode$o);
 /**
  * @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$o = [
+const __iconNode$n = [
   [
     "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" }
@@ -1428,15 +1474,7 @@ const __iconNode$o = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$o);
-/**
- * @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$n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$n);
+const Braces = createLucideIcon("braces", __iconNode$n);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -1474,44 +1512,76 @@ const Eraser = createLucideIcon("eraser", __iconNode$l);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$k = [
+  [
+    "path",
+    {
+      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+      key: "1oefj6"
+    }
+  ],
+  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+  ["path", { d: "M10 9H8", key: "b1mrlr" }],
+  ["path", { d: "M16 13H8", key: "t4e002" }],
+  ["path", { d: "M16 17H8", key: "z1uh3a" }]
+];
+const FileText = createLucideIcon("file-text", __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$j = [
+  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
+  ["path", { d: "M3 3v5h5", key: "1xhq8a" }],
+  ["path", { d: "M12 7v5l4 2", key: "1fdv2h" }]
+];
+const History = createLucideIcon("history", __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$i = [
   ["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$k);
+const Italic = createLucideIcon("italic", __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$j = [
+const __iconNode$h = [
   ["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$j);
+const ListIndentDecrease = createLucideIcon("list-indent-decrease", __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$i = [
+const __iconNode$g = [
   ["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$i);
+const ListIndentIncrease = createLucideIcon("list-indent-increase", __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$h = [
+const __iconNode$f = [
   ["path", { d: "M11 5h10", key: "1cz7ny" }],
   ["path", { d: "M11 12h10", key: "1438ji" }],
   ["path", { d: "M11 19h10", key: "11t30w" }],
@@ -1519,14 +1589,14 @@ const __iconNode$h = [
   ["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$h);
+const ListOrdered = createLucideIcon("list-ordered", __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$g = [
+const __iconNode$e = [
   ["path", { d: "M3 5h.01", key: "18ugdj" }],
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
   ["path", { d: "M3 19h.01", key: "noohij" }],
@@ -1534,54 +1604,31 @@ const __iconNode$g = [
   ["path", { d: "M8 12h13", key: "1za7za" }],
   ["path", { d: "M8 19h13", key: "m83p4d" }]
 ];
-const List = createLucideIcon("list", __iconNode$g);
+const List = createLucideIcon("list", __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$f = [
-  ["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$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$e = [
+const __iconNode$d = [
   ["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$e);
+const Redo2 = createLucideIcon("redo-2", __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$d = [
+const __iconNode$c = [
   ["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$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$c = [
-  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
-  ["path", { d: "M21 9H3", key: "1338ky" }],
-  ["path", { d: "M21 15H3", key: "9uk58r" }]
-];
-const Rows3 = createLucideIcon("rows-3", __iconNode$c);
+const RefreshCw = createLucideIcon("refresh-cw", __iconNode$c);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -1600,16 +1647,12 @@ const Search = createLucideIcon("search", __iconNode$b);
  * See the LICENSE file in the root directory of this source tree.
  */
 const __iconNode$a = [
-  [
-    "path",
-    {
-      d: "M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915",
-      key: "1i5ecw"
-    }
-  ],
-  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
+  ["path", { d: "M14 17H5", key: "gfn3mx" }],
+  ["path", { d: "M19 7h-9", key: "6i9tg" }],
+  ["circle", { cx: "17", cy: "17", r: "3", key: "18b49y" }],
+  ["circle", { cx: "7", cy: "7", r: "3", key: "dfmy0x" }]
 ];
-const Settings = createLucideIcon("settings", __iconNode$a);
+const Settings2 = createLucideIcon("settings-2", __iconNode$a);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -1833,11 +1876,15 @@ const HistorySidebar = () => {
             "data-history-current": isCurrent ? "true" : "false",
             onClick: () => jumpToHistoryEntry2(actualIndex),
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-history-entry-row", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-history-entry-dot" }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-history-entry-content", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `lex4-history-entry-label${isCurrent ? " current" : ""}`, children: entry.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-history-entry-source", children: t.regions[entry.source] ?? entry.source })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-history-entry-time", children: formatTimestamp(entry.timestamp) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-history-entry-label", children: entry.label }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-history-entry-meta", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-history-entry-source", children: t.regions[entry.source] ?? entry.source }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-history-entry-meta-dot", children: "·" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-history-entry-time", children: formatTimestamp(entry.timestamp) })
+                ] })
+              ] })
             ] })
           }
         ) }, entry.id);
@@ -1845,201 +1892,12 @@ const HistorySidebar = () => {
     }
   );
 };
-const HeaderFooterToggle = ({
-  enabled,
-  onToggle
-}) => {
-  const t = useTranslations();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "label",
-    {
-      className: "lex4-hf-toggle",
-      "data-testid": "header-footer-toggle",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Rows3, { size: 14, className: "lex4-hf-toggle-icon" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-toggle-label", children: t.headerFooter.label }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            role: "switch",
-            "aria-checked": enabled,
-            onMouseDown: (e) => e.preventDefault(),
-            onClick: () => onToggle(!enabled),
-            className: "lex4-hf-switch",
-            style: { backgroundColor: enabled ? "var(--lex4-color-primary)" : "var(--lex4-color-text-disabled)" },
-            "data-testid": "header-footer-switch",
-            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-switch-knob" })
-          }
-        )
-      ]
-    }
-  );
-};
-const PAGE_COUNTER_OPTIONS = [
-  { value: "none", label: "None" },
-  { value: "header", label: "Header" },
-  { value: "footer", label: "Footer" },
-  { value: "both", label: "Both" }
-];
-const HeaderFooterActions = ({
-  activePageId,
-  pageCounterMode,
-  onPageCounterModeChange,
-  onCopyHeaderToAll,
-  onCopyFooterToAll,
-  onClearHeader,
-  onClearFooter,
-  onClearAllHeaders,
-  onClearAllFooters
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const containerRef = React.useRef(null);
-  const hasActivePage = activePageId !== null;
-  const close = React.useCallback(() => setOpen(false), []);
-  React.useEffect(() => {
-    if (!open) return;
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        close();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open, close]);
-  const handleAction = (action) => {
-    action();
-    close();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, "data-testid": "header-footer-actions", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        type: "button",
-        onMouseDown: (e) => e.preventDefault(),
-        onClick: () => setOpen(!open),
-        className: "lex4-settings-trigger",
-        "data-testid": "header-footer-menu-trigger",
-        "aria-expanded": open,
-        "aria-haspopup": "true",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Settings, { size: 14 }),
-          /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 12 })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "lex4-settings-menu",
-        role: "menu",
-        "data-testid": "header-footer-menu",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Page counter" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-counter-grid", "data-testid": "page-counter-mode", children: PAGE_COUNTER_OPTIONS.map(({ value, label }) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              role: "menuitemradio",
-              "aria-checked": pageCounterMode === value,
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: () => onPageCounterModeChange(value),
-              className: "lex4-settings-counter-btn",
-              "data-testid": `page-counter-${value}`,
-              children: label
-            },
-            value
-          )) }),
-          /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Header" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(CopyPlus, { size: 14 }),
-              label: "Copy to all pages",
-              onClick: () => handleAction(onCopyHeaderToAll),
-              disabled: !hasActivePage,
-              testId: "copy-header-all"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Eraser, { size: 14 }),
-              label: "Clear this page",
-              onClick: () => handleAction(onClearHeader),
-              disabled: !hasActivePage,
-              testId: "clear-header"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 14 }),
-              label: "Clear all",
-              onClick: () => handleAction(onClearAllHeaders),
-              testId: "clear-all-headers"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Footer" }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(CopyPlus, { size: 14 }),
-              label: "Copy to all pages",
-              onClick: () => handleAction(onCopyFooterToAll),
-              disabled: !hasActivePage,
-              testId: "copy-footer-all"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Eraser, { size: 14 }),
-              label: "Clear this page",
-              onClick: () => handleAction(onClearFooter),
-              disabled: !hasActivePage,
-              testId: "clear-footer"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            MenuItem,
-            {
-              icon: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 14 }),
-              label: "Clear all",
-              onClick: () => handleAction(onClearAllFooters),
-              testId: "clear-all-footers"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-const SectionLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-label", children });
-const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "button",
-  {
-    type: "button",
-    role: "menuitem",
-    onMouseDown: (e) => e.preventDefault(),
-    onClick,
-    disabled,
-    className: "lex4-settings-item",
-    "data-testid": testId,
-    children: [
-      icon,
-      label
-    ]
-  }
-);
-const MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-divider" });
 function resolveExtensions(extensions) {
   const resolved = {
     nodes: [],
     bodyPlugins: [],
     toolbarItems: [],
+    toolbarEndItems: [],
     sidePanels: [],
     providers: [],
     themeOverrides: {},
@@ -2051,6 +1909,7 @@ function resolveExtensions(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.toolbarEndItems) resolved.toolbarEndItems.push(...ext.toolbarEndItems);
     if (ext.sidePanel) resolved.sidePanels.push(ext.sidePanel);
     if (ext.provider) resolved.providers.push(ext.provider);
     if (ext.themeOverrides) {
@@ -2068,6 +1927,7 @@ const EMPTY_RESOLVED = {
   nodes: [],
   bodyPlugins: [],
   toolbarItems: [],
+  toolbarEndItems: [],
   sidePanels: [],
   providers: [],
   themeOverrides: {},
@@ -2214,11 +2074,285 @@ function indentContent(editor) {
 function outdentContent(editor) {
   editor.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND, void 0);
 }
+const HeaderFooterToggle = ({
+  enabled,
+  onToggle
+}) => {
+  const t = useTranslations();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: "lex4-hf-toggle",
+      "data-testid": "header-footer-toggle",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FileText, { size: 14, className: "lex4-hf-toggle-icon" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-toggle-label", children: t.headerFooter.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            role: "switch",
+            "aria-checked": enabled,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => onToggle(!enabled),
+            className: "lex4-hf-switch",
+            style: { backgroundColor: enabled ? "var(--color-primary)" : "var(--color-muted)" },
+            "data-testid": "header-footer-switch",
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-switch-knob" })
+          }
+        )
+      ]
+    }
+  );
+};
+const PAGE_COUNTER_OPTIONS = ["none", "header", "footer", "both"];
+const HeaderFooterActions = ({
+  activePageId,
+  pageCounterMode,
+  onPageCounterModeChange,
+  onCopyHeaderToAll,
+  onCopyFooterToAll,
+  onClearHeader,
+  onClearFooter,
+  onClearAllHeaders,
+  onClearAllFooters
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const hasActivePage = activePageId !== null;
+  const t = useTranslations();
+  const close = React.useCallback(() => setOpen(false), []);
+  React.useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, close]);
+  const handleAction = (action) => {
+    action();
+    close();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, "data-testid": "header-footer-actions", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onMouseDown: (e) => e.preventDefault(),
+        onClick: () => setOpen(!open),
+        className: "lex4-settings-trigger lex4-settings-trigger-icon",
+        "data-testid": "header-footer-menu-trigger",
+        "aria-expanded": open,
+        "aria-haspopup": "true",
+        "aria-label": t.headerFooter.settingsLabel,
+        title: t.headerFooter.settingsLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Settings2, { size: 14 })
+      }
+    ),
+    open && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "lex4-settings-menu",
+        role: "menu",
+        "data-testid": "header-footer-menu",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: t.headerFooter.pageCounter }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-counter-grid", "data-testid": "page-counter-mode", children: PAGE_COUNTER_OPTIONS.map((value) => /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitemradio",
+              "aria-checked": pageCounterMode === value,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: () => onPageCounterModeChange(value),
+              className: "lex4-settings-counter-btn",
+              "data-testid": `page-counter-${value}`,
+              children: t.headerFooter.pageCounterModes[value]
+            },
+            value
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: t.headerFooter.headerSection }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(CopyPlus, { size: 14 }),
+              label: t.headerFooter.copyToAllPages,
+              onClick: () => handleAction(onCopyHeaderToAll),
+              disabled: !hasActivePage,
+              testId: "copy-header-all"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Eraser, { size: 14 }),
+              label: t.headerFooter.clearThisPage,
+              onClick: () => handleAction(onClearHeader),
+              disabled: !hasActivePage,
+              testId: "clear-header"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 14 }),
+              label: t.headerFooter.clearAll,
+              onClick: () => handleAction(onClearAllHeaders),
+              testId: "clear-all-headers"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: t.headerFooter.footerSection }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(CopyPlus, { size: 14 }),
+              label: t.headerFooter.copyToAllPages,
+              onClick: () => handleAction(onCopyFooterToAll),
+              disabled: !hasActivePage,
+              testId: "copy-footer-all"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Eraser, { size: 14 }),
+              label: t.headerFooter.clearThisPage,
+              onClick: () => handleAction(onClearFooter),
+              disabled: !hasActivePage,
+              testId: "clear-footer"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 14 }),
+              label: t.headerFooter.clearAll,
+              onClick: () => handleAction(onClearAllFooters),
+              testId: "clear-all-footers"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+const SectionLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-label", children });
+const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "button",
+  {
+    type: "button",
+    role: "menuitem",
+    onMouseDown: (e) => e.preventDefault(),
+    onClick,
+    disabled,
+    className: "lex4-settings-item",
+    "data-testid": testId,
+    children: [
+      icon,
+      label
+    ]
+  }
+);
+const MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-divider" });
+const CanvasControls = () => {
+  const { document: document2, dispatch, activePageId, runHistoryAction } = useDocument();
+  const t = useTranslations();
+  const runCanvasAction = React.useCallback((label, callback) => {
+    runHistoryAction(
+      {
+        label,
+        source: "toolbar",
+        region: "document"
+      },
+      callback
+    );
+  }, [runHistoryAction]);
+  const handleToggle = React.useCallback((enabled) => {
+    runCanvasAction(
+      enabled ? t.history.actions.enabledHeadersFooters : t.history.actions.disabledHeadersFooters,
+      () => {
+        dispatch({ type: "SET_HEADER_FOOTER_ENABLED", enabled });
+      }
+    );
+  }, [dispatch, runCanvasAction, t.history.actions.disabledHeadersFooters, t.history.actions.enabledHeadersFooters]);
+  const handleCopyHeaderToAll = React.useCallback(() => {
+    if (!activePageId) {
+      return;
+    }
+    runCanvasAction(t.history.actions.copiedHeaderToAll, () => {
+      dispatch({ type: "COPY_HEADER_TO_ALL", sourcePageId: activePageId });
+    });
+  }, [activePageId, dispatch, runCanvasAction, t.history.actions.copiedHeaderToAll]);
+  const handleCopyFooterToAll = React.useCallback(() => {
+    if (!activePageId) {
+      return;
+    }
+    runCanvasAction(t.history.actions.copiedFooterToAll, () => {
+      dispatch({ type: "COPY_FOOTER_TO_ALL", sourcePageId: activePageId });
+    });
+  }, [activePageId, dispatch, runCanvasAction, t.history.actions.copiedFooterToAll]);
+  const handleClearHeader = React.useCallback(() => {
+    if (!activePageId) {
+      return;
+    }
+    runCanvasAction(t.history.actions.clearedHeader, () => {
+      dispatch({ type: "CLEAR_HEADER", pageId: activePageId });
+    });
+  }, [activePageId, dispatch, runCanvasAction, t.history.actions.clearedHeader]);
+  const handleClearFooter = React.useCallback(() => {
+    if (!activePageId) {
+      return;
+    }
+    runCanvasAction(t.history.actions.clearedFooter, () => {
+      dispatch({ type: "CLEAR_FOOTER", pageId: activePageId });
+    });
+  }, [activePageId, dispatch, runCanvasAction, t.history.actions.clearedFooter]);
+  const handleClearAllHeaders = React.useCallback(() => {
+    runCanvasAction(t.history.actions.clearedAllHeaders, () => {
+      dispatch({ type: "CLEAR_ALL_HEADERS" });
+    });
+  }, [dispatch, runCanvasAction, t.history.actions.clearedAllHeaders]);
+  const handleClearAllFooters = React.useCallback(() => {
+    runCanvasAction(t.history.actions.clearedAllFooters, () => {
+      dispatch({ type: "CLEAR_ALL_FOOTERS" });
+    });
+  }, [dispatch, runCanvasAction, t.history.actions.clearedAllFooters]);
+  const handlePageCounterModeChange = React.useCallback((mode) => {
+    runCanvasAction(interpolate(t.history.actions.pageCounterSet, { value: mode }), () => {
+      dispatch({ type: "SET_PAGE_COUNTER_MODE", mode });
+    });
+  }, [dispatch, runCanvasAction, t.history.actions.pageCounterSet]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group lex4-toolbar-group-gap", "data-testid": "header-footer-controls", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderFooterToggle,
+      {
+        enabled: document2.headerFooterEnabled,
+        onToggle: handleToggle
+      }
+    ),
+    document2.headerFooterEnabled && /* @__PURE__ */ jsxRuntime.jsx(
+      HeaderFooterActions,
+      {
+        activePageId,
+        pageCounterMode: document2.pageCounterMode,
+        onPageCounterModeChange: handlePageCounterModeChange,
+        onCopyHeaderToAll: handleCopyHeaderToAll,
+        onCopyFooterToAll: handleCopyFooterToAll,
+        onClearHeader: handleClearHeader,
+        onClearFooter: handleClearFooter,
+        onClearAllHeaders: handleClearAllHeaders,
+        onClearAllFooters: handleClearAllFooters
+      }
+    )
+  ] });
+};
 const Toolbar = () => {
   const {
-    document: document2,
-    dispatch,
-    activePageId,
     activeEditor,
     canRedo,
     canUndo,
@@ -2230,7 +2364,7 @@ const Toolbar = () => {
     setHistorySidebarOpen,
     undo
   } = useDocument();
-  const { toolbarItems } = useExtensions();
+  const { toolbarItems, toolbarEndItems } = useExtensions();
   const t = useTranslations();
   const withBodySelection = React.useCallback(
     (editor, action) => {
@@ -2267,53 +2401,6 @@ const Toolbar = () => {
     },
     [runHistoryAction]
   );
-  const handleToggle = (enabled) => {
-    runToolbarAction(
-      enabled ? t.history.actions.enabledHeadersFooters : t.history.actions.disabledHeadersFooters,
-      () => {
-        dispatch({ type: "SET_HEADER_FOOTER_ENABLED", enabled });
-      }
-    );
-  };
-  const handleCopyHeaderToAll = () => {
-    if (activePageId) {
-      runToolbarAction(t.history.actions.copiedHeaderToAll, () => {
-        dispatch({ type: "COPY_HEADER_TO_ALL", sourcePageId: activePageId });
-      });
-    }
-  };
-  const handleCopyFooterToAll = () => {
-    if (activePageId) {
-      runToolbarAction(t.history.actions.copiedFooterToAll, () => {
-        dispatch({ type: "COPY_FOOTER_TO_ALL", sourcePageId: activePageId });
-      });
-    }
-  };
-  const handleClearHeader = () => {
-    if (activePageId) {
-      runToolbarAction(t.history.actions.clearedHeader, () => {
-        dispatch({ type: "CLEAR_HEADER", pageId: activePageId });
-      });
-    }
-  };
-  const handleClearFooter = () => {
-    if (activePageId) {
-      runToolbarAction(t.history.actions.clearedFooter, () => {
-        dispatch({ type: "CLEAR_FOOTER", pageId: activePageId });
-      });
-    }
-  };
-  const handleClearAllHeaders = () => runToolbarAction(t.history.actions.clearedAllHeaders, () => {
-    dispatch({ type: "CLEAR_ALL_HEADERS" });
-  });
-  const handleClearAllFooters = () => runToolbarAction(t.history.actions.clearedAllFooters, () => {
-    dispatch({ type: "CLEAR_ALL_FOOTERS" });
-  });
-  const handlePageCounterModeChange = React.useCallback((mode) => {
-    runToolbarAction(interpolate(t.history.actions.pageCounterSet, { value: mode }), () => {
-      dispatch({ type: "SET_PAGE_COUNTER_MODE", mode });
-    });
-  }, [dispatch, runToolbarAction, t.history.actions.pageCounterSet]);
   const handleBold = React.useCallback(() => {
     debug("toolbar", `bold (globalSelection=${globalSelectionActive}, editors=${editorRegistry.all().length}, hasEditor=${!!activeEditor})`);
     runToolbarAction(t.history.actions.boldApplied, () => {
@@ -2395,122 +2482,111 @@ const Toolbar = () => {
     },
     [applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const handleToggleHistory = React.useCallback(() => {
+    setHistorySidebarOpen(!historySidebarOpen);
+  }, [historySidebarOpen, setHistorySidebarOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: "lex4-toolbar",
       "data-testid": "toolbar",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-row", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "history-controls", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ToolbarIconButton,
-              {
-                title: t.toolbar.undo,
-                testId: "btn-undo",
-                disabled: !canUndo,
-                onClick: undo,
-                children: /* @__PURE__ */ jsxRuntime.jsx(Undo2, { size: 15 })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ToolbarIconButton,
-              {
-                title: t.toolbar.redo,
-                testId: "btn-redo",
-                disabled: !canRedo,
-                onClick: redo,
-                children: /* @__PURE__ */ jsxRuntime.jsx(Redo2, { size: 15 })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group-gap", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Type, { size: 14, className: "lex4-toolbar-icon" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "select",
-              {
-                className: "lex4-toolbar-select",
-                "data-testid": "font-selector",
-                defaultValue: "Calibri",
-                onChange: handleFontChange,
-                children: SUPPORTED_FONTS.map((font) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: font, style: { fontFamily: font }, children: font }, font))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group-gap", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ALargeSmall, { size: 14, className: "lex4-toolbar-icon" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "select",
-              {
-                className: "lex4-toolbar-select lex4-toolbar-select-narrow",
-                "data-testid": "font-size-selector",
-                defaultValue: "12",
-                onChange: handleFontSizeChange,
-                children: SUPPORTED_FONT_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "format-group", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsxRuntime.jsx(Bold, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsxRuntime.jsx(Italic, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsxRuntime.jsx(Underline, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough, { size: 15 }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "align-group", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignStart, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignCenter, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignEnd, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignJustify, { size: 15 }) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsxRuntime.jsx(ListOrdered, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsxRuntime.jsx(List, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentIncrease, { size: 15 }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentDecrease, { size: 15 }) })
-          ] }),
-          toolbarItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-            toolbarItems.map((ToolbarItem, idx) => /* @__PURE__ */ jsxRuntime.jsx(ToolbarItem, {}, idx))
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-toolbar-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "history-controls", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             ToolbarIconButton,
             {
-              title: historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
-              testId: "toggle-history-sidebar",
-              active: historySidebarOpen,
-              onClick: () => setHistorySidebarOpen(!historySidebarOpen),
-              children: /* @__PURE__ */ jsxRuntime.jsx(PanelRight, { size: 15 })
+              title: t.toolbar.undo,
+              testId: "btn-undo",
+              disabled: !canUndo,
+              onClick: undo,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Undo2, { size: 15 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToolbarIconButton,
+            {
+              title: t.toolbar.redo,
+              testId: "btn-redo",
+              disabled: !canRedo,
+              onClick: redo,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Redo2, { size: 15 })
             }
-          ) })
+          )
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-hf-row", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group-gap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Type, { size: 14, className: "lex4-toolbar-icon" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            HeaderFooterToggle,
+            "select",
             {
-              enabled: document2.headerFooterEnabled,
-              onToggle: handleToggle
+              className: "lex4-toolbar-select",
+              "data-testid": "font-selector",
+              defaultValue: "Calibri",
+              onChange: handleFontChange,
+              children: SUPPORTED_FONTS.map((font) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: font, style: { fontFamily: font }, children: font }, font))
             }
-          ),
-          document2.headerFooterEnabled && /* @__PURE__ */ jsxRuntime.jsx(
-            HeaderFooterActions,
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group-gap", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ALargeSmall, { size: 14, className: "lex4-toolbar-icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "select",
+            {
+              className: "lex4-toolbar-select lex4-toolbar-select-narrow",
+              "data-testid": "font-size-selector",
+              defaultValue: "12",
+              onChange: handleFontSizeChange,
+              children: SUPPORTED_FONT_SIZES.map((size) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: size, children: size }, size))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "format-group", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsxRuntime.jsx(Bold, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsxRuntime.jsx(Italic, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsxRuntime.jsx(Underline, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsxRuntime.jsx(Strikethrough, { size: 15 }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "align-group", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignStart, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignCenter, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignEnd, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsxRuntime.jsx(TextAlignJustify, { size: 15 }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-group", "data-testid": "list-group", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsxRuntime.jsx(ListOrdered, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsxRuntime.jsx(List, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentIncrease, { size: 15 }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsxRuntime.jsx(ListIndentDecrease, { size: 15 }) })
+        ] }),
+        toolbarItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+          toolbarItems.map((ToolbarItem, idx) => /* @__PURE__ */ jsxRuntime.jsx(ToolbarItem, {}, idx))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(CanvasControls, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-toolbar-end", children: [
+          toolbarEndItems.map((EndItem, idx) => /* @__PURE__ */ jsxRuntime.jsx(EndItem, {}, idx)),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
             {
-              activePageId,
-              pageCounterMode: document2.pageCounterMode,
-              onPageCounterModeChange: handlePageCounterModeChange,
-              onCopyHeaderToAll: handleCopyHeaderToAll,
-              onCopyFooterToAll: handleCopyFooterToAll,
-              onClearHeader: handleClearHeader,
-              onClearFooter: handleClearFooter,
-              onClearAllHeaders: handleClearAllHeaders,
-              onClearAllFooters: handleClearAllFooters
+              type: "button",
+              className: `lex4-toolbar-toggle-btn${historySidebarOpen ? " active" : ""}`,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: handleToggleHistory,
+              "data-testid": "toggle-history-sidebar",
+              title: historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
+              "aria-label": historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(History, { size: 14 }),
+                "History"
+              ]
             }
           )
         ] })
-      ]
+      ] })
     }
   );
 };
@@ -4630,8 +4706,8 @@ function selectEntireDocument(rootElement, selectionBuffer) {
   selectionBuffer.focus();
   selectionBuffer.select();
 }
-const GLOBAL_SELECTION_BACKGROUND = "rgb(191, 219, 254)";
-const GLOBAL_SELECTION_FOREGROUND = "rgb(30, 64, 175)";
+const GLOBAL_SELECTION_BACKGROUND = "hsl(214 95% 87%)";
+const GLOBAL_SELECTION_FOREGROUND = "hsl(224 71% 25%)";
 function isFormFieldTarget(target) {
   const element = target;
   const tagName = element == null ? void 0 : element.tagName;
@@ -4747,8 +4823,8 @@ const EditorChrome = ({
     )) ?? [];
     const root = rootRef.current;
     const styles = root ? getComputedStyle(root) : null;
-    const selBg = (styles == null ? void 0 : styles.getPropertyValue("--lex4-color-selection-bg").trim()) || GLOBAL_SELECTION_BACKGROUND;
-    const selFg = (styles == null ? void 0 : styles.getPropertyValue("--lex4-color-selection-text").trim()) || GLOBAL_SELECTION_FOREGROUND;
+    const selBg = (styles == null ? void 0 : styles.getPropertyValue("--color-selection-bg").trim()) || GLOBAL_SELECTION_BACKGROUND;
+    const selFg = (styles == null ? void 0 : styles.getPropertyValue("--color-selection-text").trim()) || GLOBAL_SELECTION_FOREGROUND;
     editableRoots.forEach((editableRoot) => {
       editableRoot.style.backgroundColor = globalSelectionActive ? selBg : "";
       editableRoot.style.color = globalSelectionActive ? selFg : "";
@@ -4819,19 +4895,31 @@ const EditorChrome = ({
   );
 };
 const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, onSave, className }, ref) => {
-  const { document: doc, activeEditor } = useDocument();
+  const {
+    document: doc,
+    activeEditor,
+    historySidebarOpen,
+    setHistorySidebarOpen
+  } = useDocument();
   const { handleFactories } = useExtensions();
   const getDocument = React.useCallback(() => doc, [doc]);
   const getActiveEditor = React.useCallback(() => activeEditor, [activeEditor]);
   const extensionCtx = useExtensionContext(getDocument, getActiveEditor);
   React.useImperativeHandle(ref, () => {
-    const handle = {};
+    const handle = {
+      setHistorySidebarOpen: (open) => {
+        setHistorySidebarOpen(open);
+      },
+      toggleHistorySidebar: () => {
+        setHistorySidebarOpen(!historySidebarOpen);
+      }
+    };
     for (const factory of handleFactories) {
       const methods = factory(extensionCtx);
       Object.assign(handle, methods);
     }
     return handle;
-  }, [extensionCtx, handleFactories]);
+  }, [extensionCtx, handleFactories, historySidebarOpen, setHistorySidebarOpen]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     EditorChrome,
     {
@@ -5053,14 +5141,16 @@ class VariableNode extends lexical.DecoratorNode {
   }
 }
 function VariableChip({ variableKey }) {
-  var _a;
   const { getDefinition } = useVariables();
-  const label = ((_a = getDefinition(variableKey)) == null ? void 0 : _a.label) ?? variableKey;
+  const def = getDefinition(variableKey);
+  const label = (def == null ? void 0 : def.label) ?? variableKey;
+  const group = def == null ? void 0 : def.group;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       className: "lex4-variable-chip",
       "data-testid": `variable-chip-${variableKey}`,
+      "data-variable-group": group,
       title: variableKey,
       children: label
     }
@@ -5092,106 +5182,19 @@ const VariablePlugin = () => {
   }, [editor]);
   return null;
 };
-const VariablePicker = ({ onInsert, disabled = false }) => {
-  const { definitions } = useVariables();
-  const [open, setOpen] = React.useState(false);
-  const [filter, setFilter] = React.useState("");
-  const containerRef = React.useRef(null);
-  const filtered = React.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 = React.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 = React.useCallback(
-    (key) => {
-      onInsert(key);
-      setOpen(false);
-      setFilter("");
-    },
-    [onInsert]
-  );
-  React.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__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "lex4-variable-picker", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: "lex4-variable-picker-btn",
-        "data-testid": "variable-picker-button",
-        disabled: disabled || definitions.length === 0,
-        onClick: () => setOpen(!open),
-        title: "Insert variable",
-        children: "{x}"
-      }
-    ),
-    open && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "lex4-variable-picker-dropdown",
-        "data-testid": "variable-picker-dropdown",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-picker-search", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "Search variables...",
-              "data-testid": "variable-picker-search",
-              value: filter,
-              onChange: (e) => setFilter(e.target.value),
-              autoFocus: true
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-picker-list", children: [
-            Object.keys(grouped).length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-picker-empty", children: "No variables found" }),
-            Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-picker-group-label", children: group }),
-              defs.map((def) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "button",
-                {
-                  type: "button",
-                  className: "lex4-variable-picker-option",
-                  "data-testid": `variable-option-${def.key}`,
-                  onClick: () => handleInsert(def.key),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-picker-key", children: `{{${def.key}}}` }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-picker-label", children: def.label })
-                  ]
-                },
-                def.key
-              ))
-            ] }, group))
-          ] })
-        ]
-      }
-    )
-  ] });
-};
 const VariablePanel = ({ open, onClose }) => {
-  const { definitions } = useVariables();
+  const { definitions, refreshDefinitions } = useVariables();
   const { activeEditor, runHistoryAction } = useDocument();
   const t = useTranslations();
   const [filter, setFilter] = React.useState("");
+  const [creating, setCreating] = React.useState(false);
+  const [createError, setCreateError] = React.useState(null);
+  const [draft, setDraft] = React.useState({
+    label: "",
+    key: "",
+    group: "",
+    valueType: "string"
+  });
   const filtered = React.useMemo(() => {
     if (!filter) return definitions;
     const lower = filter.toLowerCase();
@@ -5220,8 +5223,51 @@ const VariablePanel = ({ open, onClose }) => {
     },
     [activeEditor, runHistoryAction]
   );
-  if (definitions.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  const resetCreateState = React.useCallback(() => {
+    setDraft({
+      label: "",
+      key: "",
+      group: "",
+      valueType: "string"
+    });
+    setCreateError(null);
+    setCreating(false);
+  }, []);
+  const handleCreateVariable = React.useCallback((event) => {
+    event.preventDefault();
+    const label = draft.label.trim();
+    const key = draft.key.trim();
+    const group = draft.group.trim();
+    if (!label || !key) {
+      setCreateError(t.variables.createVariableMissingFields);
+      return;
+    }
+    if (definitions.some((def) => def.key === key)) {
+      setCreateError(interpolate(t.variables.createVariableDuplicateKey, { key }));
+      return;
+    }
+    refreshDefinitions([
+      ...definitions,
+      {
+        key,
+        label,
+        group: group || void 0,
+        valueType: draft.valueType
+      }
+    ]);
+    resetCreateState();
+  }, [
+    definitions,
+    draft.group,
+    draft.key,
+    draft.label,
+    draft.valueType,
+    refreshDefinitions,
+    resetCreateState,
+    t.variables.createVariableDuplicateKey,
+    t.variables.createVariableMissingFields
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     EditorSidebar,
     {
       title: t.variables.title,
@@ -5239,7 +5285,7 @@ const VariablePanel = ({ open, onClose }) => {
           children: /* @__PURE__ */ jsxRuntime.jsx(RefreshCw, { size: 12 })
         }
       ),
-      children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-panel-content", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-search-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-search-wrapper", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Search, { size: 14, className: "lex4-variable-search-icon" }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5256,23 +5302,109 @@ const VariablePanel = ({ open, onClose }) => {
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-list", children: [
           Object.keys(grouped).length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-list-empty", children: t.variables.noVariablesFound }),
-          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group", children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              type: "button",
-              className: "lex4-variable-list-item",
-              "data-testid": `variable-panel-${def.key}`,
-              onClick: () => handleInsert(def.key),
-              disabled: !activeEditor,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-badge", children: def.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-group-label", children: group })
-              ]
-            },
-            def.key
-          )) }) }, group))
-        ] })
-      ]
+          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-group", "data-variable-group": group, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-label", children: group }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-group-items", children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "lex4-variable-list-item",
+                "data-testid": `variable-panel-${def.key}`,
+                "data-variable-group": group,
+                onClick: () => handleInsert(def.key),
+                disabled: !activeEditor,
+                title: def.key,
+                children: def.label
+              },
+              def.key
+            )) })
+          ] }, group))
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create", children: creating ? /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "lex4-variable-create-form", onSubmit: handleCreateVariable, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create-title", children: t.variables.createVariableTitle }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "lex4-variable-create-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.variables.createVariableLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                value: draft.label,
+                onChange: (e) => {
+                  setDraft((current) => ({ ...current, label: e.target.value }));
+                  if (createError) {
+                    setCreateError(null);
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "lex4-variable-create-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.variables.createVariableKey }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                value: draft.key,
+                onChange: (e) => {
+                  setDraft((current) => ({ ...current, key: e.target.value }));
+                  if (createError) {
+                    setCreateError(null);
+                  }
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-create-row", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "lex4-variable-create-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.variables.createVariableGroup }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  value: draft.group,
+                  onChange: (e) => {
+                    setDraft((current) => ({ ...current, group: e.target.value }));
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "lex4-variable-create-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: t.variables.createVariableType }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
+                {
+                  value: draft.valueType,
+                  onChange: (e) => {
+                    setDraft((current) => ({
+                      ...current,
+                      valueType: e.target.value
+                    }));
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "string", children: "string" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "number", children: "number" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "date", children: "date" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "boolean", children: "boolean" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          createError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-create-error", children: createError }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-variable-create-actions", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "lex4-variable-create-cancel", onClick: resetCreateState, children: t.variables.createVariableCancel }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "lex4-variable-create-submit", children: t.variables.createVariableSave })
+          ] })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            className: "lex4-variable-create-toggle",
+            onClick: () => setCreating(true),
+            children: [
+              "+ ",
+              t.variables.newVariable
+            ]
+          }
+        ) })
+      ] })
     }
   );
 };
@@ -5288,41 +5420,23 @@ const VariablePanelStateProvider = ({ children }) => {
   const [panelOpen, setPanelOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx(VariablePanelContext.Provider, { value: { panelOpen, setPanelOpen }, children });
 };
-const VariableToolbarItem = () => {
-  const { activeEditor, runHistoryAction } = useDocument();
-  const t = useTranslations();
-  const handleInsert = React.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__ */ jsxRuntime.jsx(
-    VariablePicker,
-    {
-      onInsert: handleInsert,
-      disabled: !activeEditor
-    }
-  );
-};
-const VariablePanelToggle = () => {
+const VariableToolbarToggle = () => {
   const { panelOpen, setPanelOpen } = useVariablePanelState();
   const t = useTranslations();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       type: "button",
-      title: panelOpen ? t.variables.closePanel : t.variables.openPanel,
-      "aria-label": panelOpen ? t.variables.closePanel : t.variables.openPanel,
+      className: `lex4-toolbar-toggle-btn${panelOpen ? " active" : ""}`,
       onMouseDown: (e) => e.preventDefault(),
       onClick: () => setPanelOpen(!panelOpen),
-      className: `lex4-toolbar-btn${panelOpen ? " active" : ""}`,
       "data-testid": "toggle-variable-panel",
-      children: /* @__PURE__ */ jsxRuntime.jsx(Braces, { size: 15 })
+      title: panelOpen ? t.variables.closePanel : t.variables.openPanel,
+      "aria-label": panelOpen ? t.variables.closePanel : t.variables.openPanel,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Braces, { size: 14 }),
+        t.variables.title
+      ]
     }
   );
 };
@@ -5330,6 +5444,15 @@ const VariablePanelWithState = () => {
   const { panelOpen, setPanelOpen } = useVariablePanelState();
   return /* @__PURE__ */ jsxRuntime.jsx(VariablePanel, { open: panelOpen, onClose: () => setPanelOpen(false) });
 };
+const VariablePanelStateSync = ({ children }) => {
+  const { panelOpen, setPanelOpen } = useVariablePanelState();
+  const extState = useExtensionState();
+  React.useEffect(() => {
+    extState.set("variablePanelOpen", panelOpen);
+    extState.set("setVariablePanelOpen", setPanelOpen);
+  }, [extState, panelOpen, setPanelOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+};
 const VariableDefinitionsSync = ({ children }) => {
   const { definitions } = useVariables();
   const extState = useExtensionState();
@@ -5340,13 +5463,13 @@ const VariableDefinitionsSync = ({ children }) => {
 };
 function variablesExtension(definitions = []) {
   const ProviderWrapper = ({ children }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(VariablePanelStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VariableProvider, { initialDefinitions: definitions, children: /* @__PURE__ */ jsxRuntime.jsx(VariableDefinitionsSync, { children }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(VariablePanelStateProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(VariableProvider, { initialDefinitions: definitions, children: /* @__PURE__ */ jsxRuntime.jsx(VariablePanelStateSync, { children: /* @__PURE__ */ jsxRuntime.jsx(VariableDefinitionsSync, { children }) }) }) });
   };
   return {
     name: "variables",
     nodes: [VariableNode],
     bodyPlugins: [VariablePlugin],
-    toolbarItems: [VariableToolbarItem, VariablePanelToggle],
+    toolbarEndItems: [VariableToolbarToggle],
     sidePanel: VariablePanelWithState,
     provider: ProviderWrapper,
     handleMethods: (ctx) => ({
@@ -5358,6 +5481,15 @@ function variablesExtension(definitions = []) {
       },
       refreshVariables: (newDefs) => {
         ctx.setExtensionState("variableDefinitions", newDefs);
+      },
+      setVariablePanelOpen: (open) => {
+        const setter = ctx.getExtensionState("setVariablePanelOpen");
+        setter == null ? void 0 : setter(open);
+      },
+      toggleVariablePanel: () => {
+        const current = ctx.getExtensionState("variablePanelOpen") ?? false;
+        const setter = ctx.getExtensionState("setVariablePanelOpen");
+        setter == null ? void 0 : setter(!current);
       }
     })
   };