@yurikilian/lex4 1.2.0 → 1.4.0

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"
@@ -623,7 +633,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"
@@ -934,7 +954,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 +1409,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 +1448,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 +1486,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 +1563,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 +1578,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 +1621,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 +1850,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,6 +1866,188 @@ const HistorySidebar = () => {
     }
   );
 };
+function resolveExtensions(extensions) {
+  const resolved = {
+    nodes: [],
+    bodyPlugins: [],
+    toolbarItems: [],
+    toolbarEndItems: [],
+    sidePanels: [],
+    providers: [],
+    themeOverrides: {},
+    cssVariables: {},
+    rootClassNames: [],
+    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.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) {
+      resolved.themeOverrides = { ...resolved.themeOverrides, ...ext.themeOverrides };
+    }
+    if (ext.cssVariables) {
+      Object.assign(resolved.cssVariables, ext.cssVariables);
+    }
+    if (ext.rootClassName) resolved.rootClassNames.push(ext.rootClassName);
+    if (ext.handleMethods) resolved.handleFactories.push(ext.handleMethods);
+  }
+  return resolved;
+}
+const EMPTY_RESOLVED = {
+  nodes: [],
+  bodyPlugins: [],
+  toolbarItems: [],
+  toolbarEndItems: [],
+  sidePanels: [],
+  providers: [],
+  themeOverrides: {},
+  cssVariables: {},
+  rootClassNames: [],
+  handleFactories: []
+};
+const ExtensionResolvedContext = React.createContext(EMPTY_RESOLVED);
+function arraysEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+const ExtensionProvider = ({ extensions, children }) => {
+  const prevNamesRef = React.useRef([]);
+  const resolvedRef = React.useRef(EMPTY_RESOLVED);
+  const currentNames = (extensions ?? []).map((e) => e.name);
+  if (!arraysEqual(currentNames, prevNamesRef.current)) {
+    resolvedRef.current = extensions && extensions.length > 0 ? resolveExtensions(extensions) : EMPTY_RESOLVED;
+    prevNamesRef.current = currentNames;
+  }
+  const resolved = resolvedRef.current;
+  let wrapped = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  for (let i = resolved.providers.length - 1; i >= 0; i--) {
+    const Provider = resolved.providers[i];
+    wrapped = /* @__PURE__ */ jsxRuntime.jsx(Provider, { children: wrapped });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ExtensionResolvedContext.Provider, { value: resolved, children: wrapped });
+};
+function useExtensions() {
+  return React.useContext(ExtensionResolvedContext);
+}
+const ExtensionStateContext = React.createContext(null);
+const ExtensionStateProvider = ({ children }) => {
+  const stateRef = React.useRef({});
+  return /* @__PURE__ */ jsxRuntime.jsx(ExtensionStateContext.Provider, { value: stateRef, children });
+};
+function useExtensionState() {
+  const stateRef = React.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 = React.useContext(ExtensionStateContext);
+  return React.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 = [
+  "Calibri",
+  "Inter",
+  "Times New Roman",
+  "Arial",
+  "Georgia",
+  "Courier New"
+];
+function applyFontFamily(editor, fontFamily) {
+  editor.update(() => {
+    const selection = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection)) return;
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      if (lexical.$isTextNode(node)) {
+        node.setStyle(`font-family: ${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 = lexical.$getSelection();
+    if (!lexical.$isRangeSelection(selection)) return;
+    const nodes = selection.getNodes();
+    for (const node of nodes) {
+      if (lexical.$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(lexical.FORMAT_TEXT_COMMAND, format);
+}
+function toggleBold(editor) {
+  toggleFormat(editor, "bold");
+}
+function toggleItalic(editor) {
+  toggleFormat(editor, "italic");
+}
+function toggleUnderline(editor) {
+  toggleFormat(editor, "underline");
+}
+function toggleStrikethrough(editor) {
+  toggleFormat(editor, "strikethrough");
+}
+function setAlignment(editor, alignment) {
+  editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, alignment);
+}
+function insertList(editor, type) {
+  if (type === "number") {
+    editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
+  } else {
+    editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
+  }
+}
+function indentContent(editor) {
+  editor.dispatchCommand(lexical.INDENT_CONTENT_COMMAND, void 0);
+}
+function outdentContent(editor) {
+  editor.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND, void 0);
+}
 const HeaderFooterToggle = ({
   enabled,
   onToggle
@@ -1856,7 +2059,7 @@ const HeaderFooterToggle = ({
       className: "lex4-hf-toggle",
       "data-testid": "header-footer-toggle",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Rows3, { size: 14, className: "lex4-hf-toggle-icon" }),
+        /* @__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",
@@ -1867,7 +2070,7 @@ const HeaderFooterToggle = ({
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => onToggle(!enabled),
             className: "lex4-hf-switch",
-            style: { backgroundColor: enabled ? "var(--lex4-color-primary)" : "var(--lex4-color-text-disabled)" },
+            style: { backgroundColor: enabled ? "var(--color-primary)" : "var(--color-muted)" },
             "data-testid": "header-footer-switch",
             children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-switch-knob" })
           }
@@ -1912,20 +2115,19 @@ const HeaderFooterActions = ({
     close();
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, "data-testid": "header-footer-actions", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
         onMouseDown: (e) => e.preventDefault(),
         onClick: () => setOpen(!open),
-        className: "lex4-settings-trigger",
+        className: "lex4-settings-trigger lex4-settings-trigger-icon",
         "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 })
-        ]
+        "aria-label": "Header and footer settings",
+        title: "Header and footer settings",
+        children: /* @__PURE__ */ jsxRuntime.jsx(Settings2, { size: 14 })
       }
     ),
     open && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2035,190 +2237,100 @@ const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */
   }
 );
 const MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-divider" });
-function resolveExtensions(extensions) {
-  const resolved = {
-    nodes: [],
-    bodyPlugins: [],
-    toolbarItems: [],
-    sidePanels: [],
-    providers: [],
-    themeOverrides: {},
-    cssVariables: {},
-    rootClassNames: [],
-    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.cssVariables) {
-      Object.assign(resolved.cssVariables, ext.cssVariables);
-    }
-    if (ext.rootClassName) resolved.rootClassNames.push(ext.rootClassName);
-    if (ext.handleMethods) resolved.handleFactories.push(ext.handleMethods);
-  }
-  return resolved;
-}
-const EMPTY_RESOLVED = {
-  nodes: [],
-  bodyPlugins: [],
-  toolbarItems: [],
-  sidePanels: [],
-  providers: [],
-  themeOverrides: {},
-  cssVariables: {},
-  rootClassNames: [],
-  handleFactories: []
-};
-const ExtensionResolvedContext = React.createContext(EMPTY_RESOLVED);
-function arraysEqual(a, b) {
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) return false;
-  }
-  return true;
-}
-const ExtensionProvider = ({ extensions, children }) => {
-  const prevNamesRef = React.useRef([]);
-  const resolvedRef = React.useRef(EMPTY_RESOLVED);
-  const currentNames = (extensions ?? []).map((e) => e.name);
-  if (!arraysEqual(currentNames, prevNamesRef.current)) {
-    resolvedRef.current = extensions && extensions.length > 0 ? resolveExtensions(extensions) : EMPTY_RESOLVED;
-    prevNamesRef.current = currentNames;
-  }
-  const resolved = resolvedRef.current;
-  let wrapped = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  for (let i = resolved.providers.length - 1; i >= 0; i--) {
-    const Provider = resolved.providers[i];
-    wrapped = /* @__PURE__ */ jsxRuntime.jsx(Provider, { children: wrapped });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(ExtensionResolvedContext.Provider, { value: resolved, children: wrapped });
-};
-function useExtensions() {
-  return React.useContext(ExtensionResolvedContext);
-}
-const ExtensionStateContext = React.createContext(null);
-const ExtensionStateProvider = ({ children }) => {
-  const stateRef = React.useRef({});
-  return /* @__PURE__ */ jsxRuntime.jsx(ExtensionStateContext.Provider, { value: stateRef, children });
-};
-function useExtensionState() {
-  const stateRef = React.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 = React.useContext(ExtensionStateContext);
-  return React.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 = [
-  "Calibri",
-  "Inter",
-  "Times New Roman",
-  "Arial",
-  "Georgia",
-  "Courier New"
-];
-function applyFontFamily(editor, fontFamily) {
-  editor.update(() => {
-    const selection = lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) return;
-    const nodes = selection.getNodes();
-    for (const node of nodes) {
-      if (lexical.$isTextNode(node)) {
-        node.setStyle(`font-family: ${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 = lexical.$getSelection();
-    if (!lexical.$isRangeSelection(selection)) return;
-    const nodes = selection.getNodes();
-    for (const node of nodes) {
-      if (lexical.$isTextNode(node)) {
-        const existing = node.getStyle();
-        const updated = mergeFontSize(existing, size);
-        node.setStyle(updated);
+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 });
       }
-    }
-  });
-}
-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(lexical.FORMAT_TEXT_COMMAND, format);
-}
-function toggleBold(editor) {
-  toggleFormat(editor, "bold");
-}
-function toggleItalic(editor) {
-  toggleFormat(editor, "italic");
-}
-function toggleUnderline(editor) {
-  toggleFormat(editor, "underline");
-}
-function toggleStrikethrough(editor) {
-  toggleFormat(editor, "strikethrough");
-}
-function setAlignment(editor, alignment) {
-  editor.dispatchCommand(lexical.FORMAT_ELEMENT_COMMAND, alignment);
-}
-function insertList(editor, type) {
-  if (type === "number") {
-    editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
-  } else {
-    editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
-  }
-}
-function indentContent(editor) {
-  editor.dispatchCommand(lexical.INDENT_CONTENT_COMMAND, void 0);
-}
-function outdentContent(editor) {
-  editor.dispatchCommand(lexical.OUTDENT_CONTENT_COMMAND, void 0);
-}
+    );
+  }, [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 +2342,7 @@ const Toolbar = () => {
     setHistorySidebarOpen,
     undo
   } = useDocument();
-  const { toolbarItems } = useExtensions();
+  const { toolbarItems, toolbarEndItems } = useExtensions();
   const t = useTranslations();
   const withBodySelection = React.useCallback(
     (editor, action) => {
@@ -2267,53 +2379,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 +2460,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 +4684,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 +4801,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 +4873,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 +5119,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 +5160,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 +5201,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 +5263,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 +5280,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 +5398,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 }),
+        "Variables"
+      ]
     }
   );
 };
@@ -5330,6 +5422,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 +5441,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 +5459,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);
       }
     })
   };