@yurikilian/lex4 0.3.2 → 1.0.1

package/dist/lex4-editor.cjs

@@ -1742,21 +1742,21 @@ const EditorSidebar = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
-      className: "flex h-full w-[320px] shrink-0 flex-col border-l border-gray-200 bg-white",
+      className: "lex4-sidebar",
       "data-testid": testId,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between border-b border-gray-200 px-3 py-2.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-sidebar-header", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xs font-semibold text-gray-900", children: title }),
-            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-0.5 text-xs text-gray-500", children: subtitle })
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "lex4-sidebar-title", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "lex4-sidebar-subtitle", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-sidebar-actions", children: [
             headerActions,
             onClose && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                className: "flex h-6 w-6 items-center justify-center rounded text-gray-400\n                         transition-colors hover:bg-gray-100 hover:text-gray-600",
+                className: "lex4-sidebar-action-btn",
                 "data-testid": "close-editor-sidebar",
                 onClick: onClose,
                 "aria-label": t.sidebar.close,
@@ -1765,7 +1765,7 @@ const EditorSidebar = ({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-auto", children })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-sidebar-body", children })
       ]
     }
   );
@@ -1797,7 +1797,7 @@ const HistorySidebar = () => {
       "aria-label": t.history.clearHistory,
       onMouseDown: (e) => e.preventDefault(),
       onClick: () => clearHistory("manual"),
-      className: "flex h-6 w-6 items-center justify-center rounded text-gray-400\n                 transition-colors hover:bg-gray-100 hover:text-gray-600",
+      className: "lex4-sidebar-action-btn",
       "data-testid": "clear-history",
       children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 13 })
     }
@@ -1814,27 +1814,27 @@ const HistorySidebar = () => {
       children: visibleEntries.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "px-3 py-4 text-xs text-gray-500",
+          className: "lex4-history-empty",
           "data-testid": "history-empty",
           children: t.history.empty
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "divide-y divide-gray-100", "data-testid": "history-entry-list", children: visibleEntries.map((entry, reversedIndex) => {
+      ) : /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "lex4-history-list", "data-testid": "history-entry-list", children: visibleEntries.map((entry, reversedIndex) => {
         const actualIndex = historyEntries.length - reversedIndex - 1;
         const isCurrent = actualIndex === historyCursor - 1;
         return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            className: `w-full px-3 py-2 text-left transition-colors ${isCurrent ? "bg-blue-50" : "bg-white hover:bg-gray-50"}`,
+            className: `lex4-history-entry ${isCurrent ? "active" : ""}`,
             "data-testid": `history-entry-${actualIndex}`,
             "data-history-current": isCurrent ? "true" : "false",
             onClick: () => jumpToHistoryEntry2(actualIndex),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-xs ${isCurrent ? "font-semibold text-blue-700" : "text-gray-900"}`, children: entry.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-gray-400", children: t.regions[entry.source] ?? entry.source })
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-history-entry-row", children: [
+              /* @__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: "shrink-0 text-xs text-gray-400", children: formatTimestamp(entry.timestamp) })
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-history-entry-time", children: formatTimestamp(entry.timestamp) })
             ] })
           }
         ) }, entry.id);
@@ -1850,11 +1850,11 @@ const HeaderFooterToggle = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "label",
     {
-      className: "flex items-center gap-1.5 cursor-pointer select-none",
+      className: "lex4-hf-toggle",
       "data-testid": "header-footer-toggle",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Rows3, { size: 14, className: "text-gray-500" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-gray-600", children: t.headerFooter.label }),
+        /* @__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",
           {
@@ -1863,22 +1863,10 @@ const HeaderFooterToggle = ({
             "aria-checked": enabled,
             onMouseDown: (e) => e.preventDefault(),
             onClick: () => onToggle(!enabled),
-            className: `
-          relative inline-flex h-4 w-7 items-center rounded-full
-          transition-colors duration-200
-          ${enabled ? "bg-blue-500" : "bg-gray-300"}
-        `,
+            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: `
-            inline-block h-3 w-3 rounded-full bg-white shadow-sm
-            transition-transform duration-200
-            ${enabled ? "translate-x-3.5" : "translate-x-0.5"}
-          `
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-hf-switch-knob" })
           }
         )
       ]
@@ -1920,17 +1908,14 @@ const HeaderFooterActions = ({
     action();
     close();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative", "data-testid": "header-footer-actions", children: [
+  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: `
-          flex h-7 items-center gap-1 rounded px-1.5 text-xs transition-colors
-          ${open ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}
-        `,
+        className: "lex4-settings-trigger",
         "data-testid": "header-footer-menu-trigger",
         "aria-expanded": open,
         "aria-haspopup": "true",
@@ -1943,12 +1928,12 @@ const HeaderFooterActions = ({
     open && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "absolute left-0 top-full mt-1 z-50 w-56 rounded-lg border border-gray-200 bg-white py-1 shadow-lg",
+        className: "lex4-settings-menu",
         role: "menu",
         "data-testid": "header-footer-menu",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { children: "Page counter" }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2 grid grid-cols-2 gap-1", "data-testid": "page-counter-mode", children: PAGE_COUNTER_OPTIONS.map(({ value, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__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",
@@ -1956,10 +1941,7 @@ const HeaderFooterActions = ({
               "aria-checked": pageCounterMode === value,
               onMouseDown: (e) => e.preventDefault(),
               onClick: () => onPageCounterModeChange(value),
-              className: `
-                  rounded px-2 py-1 text-xs text-left transition-colors
-                  ${pageCounterMode === value ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-600 hover:bg-gray-100"}
-                `,
+              className: "lex4-settings-counter-btn",
               "data-testid": `page-counter-${value}`,
               children: label
             },
@@ -2032,7 +2014,7 @@ const HeaderFooterActions = ({
     )
   ] });
 };
-const SectionLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children });
+const SectionLabel = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-label", children });
 const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "button",
   {
@@ -2041,7 +2023,7 @@ const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */
     onMouseDown: (e) => e.preventDefault(),
     onClick,
     disabled,
-    className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs text-gray-700 transition-colors\n               hover:bg-gray-50 disabled:cursor-not-allowed disabled:text-gray-300",
+    className: "lex4-settings-item",
     "data-testid": testId,
     children: [
       icon,
@@ -2049,7 +2031,7 @@ const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */
     ]
   }
 );
-const MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px bg-gray-100" });
+const MenuDivider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-settings-divider" });
 function resolveExtensions(extensions) {
   const resolved = {
     nodes: [],
@@ -2058,6 +2040,8 @@ function resolveExtensions(extensions) {
     sidePanels: [],
     providers: [],
     themeOverrides: {},
+    cssVariables: {},
+    rootClassNames: [],
     handleFactories: []
   };
   for (const ext of extensions) {
@@ -2069,6 +2053,10 @@ function resolveExtensions(extensions) {
     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;
@@ -2080,14 +2068,27 @@ const EMPTY_RESOLVED = {
   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 resolved = React.useMemo(
-    () => extensions && extensions.length > 0 ? resolveExtensions(extensions) : EMPTY_RESOLVED,
-    [extensions]
-  );
+  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];
@@ -2394,11 +2395,11 @@ const Toolbar = () => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "lex4-toolbar sticky top-0 z-10 bg-white border-b border-gray-200",
+      className: "lex4-toolbar",
       "data-testid": "toolbar",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "history-controls", 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,
               {
@@ -2421,12 +2422,12 @@ const Toolbar = () => {
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Type, { size: 14, className: "text-gray-500" }),
+          /* @__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: "h-7 rounded border border-gray-200 bg-white px-2 text-xs text-gray-700\n                       focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
+                className: "lex4-toolbar-select",
                 "data-testid": "font-selector",
                 defaultValue: "Calibri",
                 onChange: handleFontChange,
@@ -2434,12 +2435,12 @@ const Toolbar = () => {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(ALargeSmall, { size: 14, className: "text-gray-500" }),
+          /* @__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: "h-7 w-16 rounded border border-gray-200 bg-white px-1 text-xs text-gray-700\n                       focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
+                className: "lex4-toolbar-select lex4-toolbar-select-narrow",
                 "data-testid": "font-size-selector",
                 defaultValue: "12",
                 onChange: handleFontSizeChange,
@@ -2448,21 +2449,21 @@ const Toolbar = () => {
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "format-group", children: [
+          /* @__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: "flex items-center gap-0.5", "data-testid": "align-group", children: [
+          /* @__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: "flex items-center gap-0.5", "data-testid": "list-group", children: [
+          /* @__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 }) }),
@@ -2472,7 +2473,7 @@ const Toolbar = () => {
             /* @__PURE__ */ jsxRuntime.jsx(Divider, {}),
             toolbarItems.map((ToolbarItem, idx) => /* @__PURE__ */ jsxRuntime.jsx(ToolbarItem, {}, idx))
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-toolbar-end", children: /* @__PURE__ */ jsxRuntime.jsx(
             ToolbarIconButton,
             {
               title: historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
@@ -2483,7 +2484,7 @@ const Toolbar = () => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-t border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-hf-row", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             HeaderFooterToggle,
             {
@@ -2526,15 +2527,12 @@ const ToolbarIconButton = ({
     disabled,
     onMouseDown: (e) => e.preventDefault(),
     onClick,
-    className: `
-      flex h-7 w-7 items-center justify-center rounded transition-colors
-      ${disabled ? "cursor-not-allowed text-gray-300" : active ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}
-    `,
+    className: `lex4-toolbar-btn${active ? " active" : ""}`,
     "data-testid": testId,
     children
   }
 );
-const Divider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-0.5 h-5 w-px bg-gray-200" });
+const Divider = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-toolbar-separator" });
 function computeBodyHeight(headerHeight, footerHeight) {
   const verticalMargins = PAGE_MARGIN_PX * 2;
   return A4_HEIGHT_PX - headerHeight - footerHeight - verticalMargins;
@@ -2841,33 +2839,33 @@ function usePagination(document2, dispatch) {
   };
 }
 const lexicalTheme = {
-  root: "lex4-root outline-none",
-  paragraph: "lex4-paragraph text-justify",
+  root: "lex4-root",
+  paragraph: "lex4-paragraph",
   heading: {
-    h1: "text-3xl font-bold mb-2",
-    h2: "text-2xl font-bold mb-2",
-    h3: "text-xl font-semibold mb-1",
-    h4: "text-lg font-semibold mb-1",
-    h5: "text-base font-medium mb-1"
+    h1: "lex4-heading lex4-heading-h1",
+    h2: "lex4-heading lex4-heading-h2",
+    h3: "lex4-heading lex4-heading-h3",
+    h4: "lex4-heading lex4-heading-h4",
+    h5: "lex4-heading lex4-heading-h5"
   },
   text: {
-    bold: "font-bold",
-    italic: "italic",
-    underline: "underline",
-    strikethrough: "line-through",
-    underlineStrikethrough: "underline line-through"
+    bold: "lex4-text-bold",
+    italic: "lex4-text-italic",
+    underline: "lex4-text-underline",
+    strikethrough: "lex4-text-strikethrough",
+    underlineStrikethrough: "lex4-text-underline lex4-text-strikethrough"
   },
   list: {
     nested: {
-      listitem: "list-none"
+      listitem: "lex4-listitem-nested"
     },
-    ol: "list-decimal ml-6",
-    ul: "list-disc ml-6",
+    ol: "lex4-list lex4-list-ordered",
+    ul: "lex4-list lex4-list-unordered",
     listitem: "lex4-listitem",
     listitemChecked: "lex4-listitem-checked",
     listitemUnchecked: "lex4-listitem-unchecked"
   },
-  quote: "border-l-4 border-gray-300 pl-4 italic text-gray-600"
+  quote: "lex4-quote"
 };
 const DEFAULT_NODES = [richText.HeadingNode, richText.QuoteNode, list.ListNode, list.ListItemNode];
 function createEditorConfig(mode, pageId, extraNodes = [], themeOverrides = {}) {
@@ -3758,8 +3756,7 @@ const PageBody = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "lex4-page-body flex-1 min-h-0 relative",
-      style: { overflow: "hidden" },
+      className: "lex4-page-body",
       "data-testid": `page-body-${pageId}`,
       onFocus,
       children: /* @__PURE__ */ jsxRuntime.jsxs(LexicalComposer.LexicalComposer, { initialConfig: config, children: [
@@ -3769,11 +3766,10 @@ const PageBody = ({
             contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
               LexicalContentEditable.ContentEditable,
               {
-                className: "outline-none h-full p-0",
-                style: { overflow: "visible" }
+                className: "lex4-page-body-editable"
               }
             ),
-            placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 text-gray-400 pointer-events-none select-none", children: t.body.placeholder }),
+            placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-page-placeholder", children: t.body.placeholder }),
             ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
           }
         ),
@@ -3901,7 +3897,7 @@ const PageHeader = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "lex4-page-header bg-blue-50/60 border-t-2 border-t-blue-200 border-b border-dashed border-blue-100 relative flex-shrink-0",
+      className: "lex4-page-header",
       style: { maxHeight: MAX_HEADER_HEIGHT_PX, overflow: "clip" },
       "data-testid": `page-header-${pageId}`,
       children: [
@@ -3913,10 +3909,10 @@ const PageHeader = ({
                 LexicalContentEditable.ContentEditable,
                 {
                   ref: contentRef,
-                  className: `outline-none p-2 text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
+                  className: `lex4-page-hf-editable${hasPageCounter ? " lex4-page-hf-narrow" : ""}`
                 }
               ),
-              placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 ${hasPageCounter ? "pr-24" : ""}`, children: t.header.placeholder }),
+              placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `lex4-page-hf-placeholder${hasPageCounter ? " lex4-page-hf-narrow" : ""}`, children: t.header.placeholder }),
               ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
             }
           ),
@@ -3928,7 +3924,7 @@ const PageHeader = ({
         pageCounterLabel && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "pointer-events-none absolute right-2 top-2 select-none text-xs text-gray-500",
+            className: "lex4-page-counter",
             "data-testid": `page-counter-header-${pageId}`,
             children: pageCounterLabel
           }
@@ -3981,7 +3977,7 @@ const PageFooter = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "lex4-page-footer bg-blue-50/60 border-b-2 border-b-blue-200 border-t border-dashed border-blue-100 relative flex-shrink-0",
+      className: "lex4-page-footer",
       style: { maxHeight: MAX_FOOTER_HEIGHT_PX, overflow: "clip" },
       "data-testid": `page-footer-${pageId}`,
       children: [
@@ -3993,10 +3989,10 @@ const PageFooter = ({
                 LexicalContentEditable.ContentEditable,
                 {
                   ref: contentRef,
-                  className: `outline-none p-2 text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
+                  className: `lex4-page-hf-editable${hasPageCounter ? " lex4-page-hf-narrow" : ""}`
                 }
               ),
-              placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 ${hasPageCounter ? "pr-24" : ""}`, children: t.footer.placeholder }),
+              placeholder: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `lex4-page-hf-placeholder${hasPageCounter ? " lex4-page-hf-narrow" : ""}`, children: t.footer.placeholder }),
               ErrorBoundary: LexicalErrorBoundary.LexicalErrorBoundary
             }
           ),
@@ -4008,7 +4004,7 @@ const PageFooter = ({
         pageCounterLabel && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "pointer-events-none absolute right-2 top-2 select-none text-xs text-gray-500",
+            className: "lex4-page-counter",
             "data-testid": `page-counter-footer-${pageId}`,
             children: pageCounterLabel
           }
@@ -4066,7 +4062,7 @@ const PageView = React.memo(({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "lex4-page bg-white shadow-xl flex flex-col",
+      className: "lex4-page",
       style: {
         width: A4_WIDTH_PX,
         height: A4_HEIGHT_PX,
@@ -4351,7 +4347,7 @@ const DocumentView = () => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: "lex4-document-view flex flex-col items-center gap-8 py-8 min-h-full",
+      className: "lex4-document-view",
       "data-testid": "document-view",
       tabIndex: -1,
       children: document2.pages.map((page, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -4370,6 +4366,247 @@ const DocumentView = () => {
     }
   );
 };
+const AST_VERSION = "1.0.0";
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+const IS_STRIKETHROUGH = 4;
+const IS_UNDERLINE = 8;
+function decodeFormatBitmask(format) {
+  const marks = {};
+  if (format & IS_BOLD) marks.bold = true;
+  if (format & IS_ITALIC) marks.italic = true;
+  if (format & IS_UNDERLINE) marks.underline = true;
+  if (format & IS_STRIKETHROUGH) marks.strikethrough = true;
+  return marks;
+}
+function extractFontFamily(style) {
+  const match = style.match(/font-family:\s*([^;]+)/);
+  return match ? match[1].trim().replace(/['"]/g, "") : void 0;
+}
+function extractFontSizePt(style) {
+  const match = style.match(/font-size:\s*(\d+(?:\.\d+)?)\s*pt/);
+  return match ? parseFloat(match[1]) : void 0;
+}
+function buildTextMarks(format, style) {
+  const formatMarks = decodeFormatBitmask(format);
+  const fontFamily = style ? extractFontFamily(style) : void 0;
+  const fontSize = style ? extractFontSizePt(style) : void 0;
+  const marks = {
+    ...formatMarks,
+    ...fontFamily ? { fontFamily } : {},
+    ...fontSize ? { fontSize } : {}
+  };
+  return Object.keys(marks).length > 0 ? marks : void 0;
+}
+function mapInlineNode(node) {
+  switch (node.type) {
+    case "text":
+      return mapTextNode(node);
+    case "variable-node":
+      return mapVariableNode(node);
+    case "linebreak":
+      return mapLineBreak();
+    default:
+      return { type: "text", text: "" };
+  }
+}
+function mapTextNode(node) {
+  const marks = buildTextMarks(node.format, node.style);
+  return {
+    type: "text",
+    text: node.text,
+    ...marks ? { marks } : {}
+  };
+}
+function mapVariableNode(node) {
+  return {
+    type: "variable",
+    key: node.variableKey
+  };
+}
+function mapLineBreak() {
+  return { type: "linebreak" };
+}
+function mapInlineNodes(nodes) {
+  return nodes.map(mapInlineNode);
+}
+const ALIGN_LEFT = 1;
+const ALIGN_CENTER = 2;
+const ALIGN_RIGHT = 3;
+const ALIGN_JUSTIFY = 4;
+function decodeAlignment(format) {
+  if (typeof format === "string") {
+    if (["left", "center", "right", "justify"].includes(format)) {
+      return format;
+    }
+    return void 0;
+  }
+  if (typeof format !== "number" || format === 0) return void 0;
+  switch (format) {
+    case ALIGN_LEFT:
+      return "left";
+    case ALIGN_CENTER:
+      return "center";
+    case ALIGN_RIGHT:
+      return "right";
+    case ALIGN_JUSTIFY:
+      return "justify";
+    default:
+      return void 0;
+  }
+}
+function mapBlockNode(node) {
+  switch (node.type) {
+    case "paragraph":
+      return mapParagraph(node);
+    case "heading":
+      return mapHeading(node);
+    case "list":
+      return mapList(node);
+    case "quote":
+      return mapBlockQuote(node);
+    default:
+      return {
+        type: "paragraph",
+        children: mapInlineChildren(node)
+      };
+  }
+}
+function mapParagraph(node) {
+  const alignment = decodeAlignment(node.format);
+  const indent = node.indent && node.indent > 0 ? node.indent : void 0;
+  return {
+    type: "paragraph",
+    ...alignment ? { alignment } : {},
+    ...indent ? { indent } : {},
+    children: mapInlineChildren(node)
+  };
+}
+function mapHeading(node) {
+  var _a;
+  const alignment = decodeAlignment(node.format);
+  const tagMatch = (_a = node.tag) == null ? void 0 : _a.match(/^h(\d)$/);
+  const level = tagMatch ? parseInt(tagMatch[1], 10) : 1;
+  return {
+    type: "heading",
+    level,
+    ...alignment ? { alignment } : {},
+    children: mapInlineChildren(node)
+  };
+}
+function mapList(node) {
+  const listType = node.listType === "number" ? "ordered" : "unordered";
+  const items = (node.children ?? []).filter((c) => c.type === "listitem").map(mapListItem);
+  return {
+    type: "list",
+    listType,
+    items
+  };
+}
+function mapListItem(node) {
+  const inlineChildren = [];
+  let nestedList;
+  for (const child of node.children ?? []) {
+    if (child.type === "list") {
+      nestedList = mapList(child);
+    } else {
+      const mapped = mapInlineNodes([child]);
+      inlineChildren.push(...mapped);
+    }
+  }
+  return {
+    type: "list-item",
+    children: inlineChildren,
+    ...nestedList ? { nestedList } : {}
+  };
+}
+function mapBlockQuote(node) {
+  return {
+    type: "blockquote",
+    children: mapInlineChildren(node)
+  };
+}
+function mapInlineChildren(node) {
+  if (!node.children || node.children.length === 0) return [];
+  return mapInlineNodes(node.children);
+}
+function mapBlockNodes(nodes) {
+  return nodes.map(mapBlockNode);
+}
+function mapEditorStateToContent(state) {
+  if (!state || !state.root || !state.root.children) {
+    return null;
+  }
+  const blocks = mapBlockNodes(state.root.children);
+  return { blocks };
+}
+function mapEditorStateToBlocks(state) {
+  if (!state || !state.root || !state.root.children) {
+    return [];
+  }
+  return mapBlockNodes(state.root.children);
+}
+const MARGIN_MM = Math.round(PAGE_MARGIN_PX / PX_PER_MM * 10) / 10;
+function serializeDocument(document2, variableDefinitions = []) {
+  const pages = document2.pages.map(
+    (page, index) => serializePage(page, index)
+  );
+  const metadata = buildMetadata(variableDefinitions);
+  return {
+    version: AST_VERSION,
+    page: {
+      format: "A4",
+      widthMm: 210,
+      heightMm: 297,
+      margins: {
+        topMm: MARGIN_MM,
+        rightMm: MARGIN_MM,
+        bottomMm: MARGIN_MM,
+        leftMm: MARGIN_MM
+      }
+    },
+    headerFooter: {
+      enabled: document2.headerFooterEnabled,
+      pageCounterMode: document2.pageCounterMode,
+      defaultHeader: document2.pages.length > 0 ? mapEditorStateToContent(document2.pages[0].headerState) : null,
+      defaultFooter: document2.pages.length > 0 ? mapEditorStateToContent(document2.pages[0].footerState) : null
+    },
+    pages,
+    metadata
+  };
+}
+function serializePage(page, pageIndex) {
+  return {
+    pageIndex,
+    body: mapEditorStateToBlocks(page.bodyState),
+    header: mapEditorStateToContent(page.headerState),
+    footer: mapEditorStateToContent(page.footerState)
+  };
+}
+function buildMetadata(variableDefinitions) {
+  const variables = {};
+  for (const def of variableDefinitions) {
+    variables[def.key] = {
+      key: def.key,
+      label: def.label,
+      ...def.description ? { description: def.description } : {},
+      ...def.valueType ? { valueType: def.valueType } : {},
+      ...def.group ? { group: def.group } : {}
+    };
+  }
+  return { variables };
+}
+function buildSavePayload(ast, options) {
+  return {
+    document: ast,
+    ...(options == null ? void 0 : options.exportTarget) ? { exportTarget: options.exportTarget } : {},
+    ...(options == null ? void 0 : options.documentId) ? { documentId: options.documentId } : {},
+    ...(options == null ? void 0 : options.metadata) ? { metadata: options.metadata } : {}
+  };
+}
+function serializeDocumentJson(ast) {
+  return JSON.stringify(ast, null, 2);
+}
 function selectEntireDocument(rootElement, selectionBuffer) {
   if (!rootElement || !selectionBuffer) {
     return;
@@ -4393,6 +4630,7 @@ function isFormFieldTarget(target) {
 }
 const EditorChrome = ({
   captureHistoryShortcutsOnWindow,
+  onSave,
   className
 }) => {
   const {
@@ -4403,7 +4641,7 @@ const EditorChrome = ({
     undo,
     redo
   } = useDocument();
-  const { sidePanels } = useExtensions();
+  const { sidePanels, cssVariables, rootClassNames } = useExtensions();
   const rootRef = React.useRef(null);
   const selectionBufferRef = React.useRef(null);
   const clearGlobalSelection = React.useCallback(() => {
@@ -4465,12 +4703,22 @@ const EditorChrome = ({
       });
       return;
     }
+    if (key === "s" && onSave) {
+      event.preventDefault();
+      event.stopPropagation();
+      const ast = serializeDocument(document2);
+      const json = serializeDocumentJson(ast);
+      onSave({ document: document2, ast, json });
+      return;
+    }
     if (handleHistoryShortcut(event)) {
       return;
     }
   }, [
+    document2,
     dispatch,
     handleHistoryShortcut,
+    onSave,
     setGlobalSelectionActive
   ]);
   const handleMouseDownCapture = React.useCallback((event) => {
@@ -4488,9 +4736,13 @@ const EditorChrome = ({
     const editableRoots = ((_a = rootRef.current) == null ? void 0 : _a.querySelectorAll(
       '[data-testid^="page-body-"] [data-lexical-editor="true"]'
     )) ?? [];
+    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;
     editableRoots.forEach((editableRoot) => {
-      editableRoot.style.backgroundColor = globalSelectionActive ? GLOBAL_SELECTION_BACKGROUND : "";
-      editableRoot.style.color = globalSelectionActive ? GLOBAL_SELECTION_FOREGROUND : "";
+      editableRoot.style.backgroundColor = globalSelectionActive ? selBg : "";
+      editableRoot.style.color = globalSelectionActive ? selFg : "";
       editableRoot.style.caretColor = globalSelectionActive ? "transparent" : "";
     });
   }, [globalSelectionActive, document2.pages.length]);
@@ -4523,11 +4775,14 @@ const EditorChrome = ({
       window.removeEventListener("beforeinput", handleWindowBeforeInput, { capture: true });
     };
   }, [captureHistoryShortcutsOnWindow, clearGlobalSelection, handleHistoryShortcut, redo, undo]);
+  const rootClassName = ["lex4-editor", ...rootClassNames, className].filter(Boolean).join(" ");
+  const extensionStyle = Object.keys(cssVariables).length > 0 ? cssVariables : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: rootRef,
-      className: `lex4-editor flex flex-col h-full ${className ?? ""}`,
+      className: rootClassName,
+      style: extensionStyle,
       "data-testid": "lex4-editor",
       "data-global-selection-active": globalSelectionActive ? "true" : "false",
       onKeyDownCapture: handleKeyDownCapture,
@@ -4541,12 +4796,12 @@ const EditorChrome = ({
             "data-testid": "global-selection-buffer",
             readOnly: true,
             tabIndex: -1,
-            className: "pointer-events-none fixed -left-[9999px] top-0 h-0 w-0 opacity-0"
+            className: "lex4-selection-buffer"
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Toolbar, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-200", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(DocumentView, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lex4-canvas", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-canvas-scroll", children: /* @__PURE__ */ jsxRuntime.jsx(DocumentView, {}) }),
           sidePanels.map((Panel, idx) => /* @__PURE__ */ jsxRuntime.jsx(Panel, {}, idx)),
           /* @__PURE__ */ jsxRuntime.jsx(HistorySidebar, {})
         ] })
@@ -4554,7 +4809,7 @@ const EditorChrome = ({
     }
   );
 };
-const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, className }, ref) => {
+const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, onSave, className }, ref) => {
   const { document: doc, activeEditor } = useDocument();
   const { handleFactories } = useExtensions();
   const getDocument = React.useCallback(() => doc, [doc]);
@@ -4572,6 +4827,7 @@ const EditorWithHandle = React.forwardRef(({ captureHistoryShortcutsOnWindow, cl
     EditorChrome,
     {
       captureHistoryShortcutsOnWindow,
+      onSave,
       className
     }
   );
@@ -4581,6 +4837,7 @@ const Lex4Editor = React.forwardRef(({
   captureHistoryShortcutsOnWindow = true,
   initialDocument,
   onDocumentChange,
+  onSave,
   extensions,
   translations,
   className
@@ -4595,6 +4852,7 @@ const Lex4Editor = React.forwardRef(({
         {
           ref,
           captureHistoryShortcutsOnWindow,
+          onSave,
           className
         }
       )
@@ -4667,247 +4925,6 @@ function useHeaderFooter(maxHeight, onHeightChange) {
   }, []);
   return { attachRef };
 }
-const AST_VERSION = "1.0.0";
-const IS_BOLD = 1;
-const IS_ITALIC = 2;
-const IS_STRIKETHROUGH = 4;
-const IS_UNDERLINE = 8;
-function decodeFormatBitmask(format) {
-  const marks = {};
-  if (format & IS_BOLD) marks.bold = true;
-  if (format & IS_ITALIC) marks.italic = true;
-  if (format & IS_UNDERLINE) marks.underline = true;
-  if (format & IS_STRIKETHROUGH) marks.strikethrough = true;
-  return marks;
-}
-function extractFontFamily(style) {
-  const match = style.match(/font-family:\s*([^;]+)/);
-  return match ? match[1].trim().replace(/['"]/g, "") : void 0;
-}
-function extractFontSizePt(style) {
-  const match = style.match(/font-size:\s*(\d+(?:\.\d+)?)\s*pt/);
-  return match ? parseFloat(match[1]) : void 0;
-}
-function buildTextMarks(format, style) {
-  const formatMarks = decodeFormatBitmask(format);
-  const fontFamily = style ? extractFontFamily(style) : void 0;
-  const fontSize = style ? extractFontSizePt(style) : void 0;
-  const marks = {
-    ...formatMarks,
-    ...fontFamily ? { fontFamily } : {},
-    ...fontSize ? { fontSize } : {}
-  };
-  return Object.keys(marks).length > 0 ? marks : void 0;
-}
-function mapInlineNode(node) {
-  switch (node.type) {
-    case "text":
-      return mapTextNode(node);
-    case "variable-node":
-      return mapVariableNode(node);
-    case "linebreak":
-      return mapLineBreak();
-    default:
-      return { type: "text", text: "" };
-  }
-}
-function mapTextNode(node) {
-  const marks = buildTextMarks(node.format, node.style);
-  return {
-    type: "text",
-    text: node.text,
-    ...marks ? { marks } : {}
-  };
-}
-function mapVariableNode(node) {
-  return {
-    type: "variable",
-    key: node.variableKey
-  };
-}
-function mapLineBreak() {
-  return { type: "linebreak" };
-}
-function mapInlineNodes(nodes) {
-  return nodes.map(mapInlineNode);
-}
-const ALIGN_LEFT = 1;
-const ALIGN_CENTER = 2;
-const ALIGN_RIGHT = 3;
-const ALIGN_JUSTIFY = 4;
-function decodeAlignment(format) {
-  if (typeof format === "string") {
-    if (["left", "center", "right", "justify"].includes(format)) {
-      return format;
-    }
-    return void 0;
-  }
-  if (typeof format !== "number" || format === 0) return void 0;
-  switch (format) {
-    case ALIGN_LEFT:
-      return "left";
-    case ALIGN_CENTER:
-      return "center";
-    case ALIGN_RIGHT:
-      return "right";
-    case ALIGN_JUSTIFY:
-      return "justify";
-    default:
-      return void 0;
-  }
-}
-function mapBlockNode(node) {
-  switch (node.type) {
-    case "paragraph":
-      return mapParagraph(node);
-    case "heading":
-      return mapHeading(node);
-    case "list":
-      return mapList(node);
-    case "quote":
-      return mapBlockQuote(node);
-    default:
-      return {
-        type: "paragraph",
-        children: mapInlineChildren(node)
-      };
-  }
-}
-function mapParagraph(node) {
-  const alignment = decodeAlignment(node.format);
-  const indent = node.indent && node.indent > 0 ? node.indent : void 0;
-  return {
-    type: "paragraph",
-    ...alignment ? { alignment } : {},
-    ...indent ? { indent } : {},
-    children: mapInlineChildren(node)
-  };
-}
-function mapHeading(node) {
-  var _a;
-  const alignment = decodeAlignment(node.format);
-  const tagMatch = (_a = node.tag) == null ? void 0 : _a.match(/^h(\d)$/);
-  const level = tagMatch ? parseInt(tagMatch[1], 10) : 1;
-  return {
-    type: "heading",
-    level,
-    ...alignment ? { alignment } : {},
-    children: mapInlineChildren(node)
-  };
-}
-function mapList(node) {
-  const listType = node.listType === "number" ? "ordered" : "unordered";
-  const items = (node.children ?? []).filter((c) => c.type === "listitem").map(mapListItem);
-  return {
-    type: "list",
-    listType,
-    items
-  };
-}
-function mapListItem(node) {
-  const inlineChildren = [];
-  let nestedList;
-  for (const child of node.children ?? []) {
-    if (child.type === "list") {
-      nestedList = mapList(child);
-    } else {
-      const mapped = mapInlineNodes([child]);
-      inlineChildren.push(...mapped);
-    }
-  }
-  return {
-    type: "list-item",
-    children: inlineChildren,
-    ...nestedList ? { nestedList } : {}
-  };
-}
-function mapBlockQuote(node) {
-  return {
-    type: "blockquote",
-    children: mapInlineChildren(node)
-  };
-}
-function mapInlineChildren(node) {
-  if (!node.children || node.children.length === 0) return [];
-  return mapInlineNodes(node.children);
-}
-function mapBlockNodes(nodes) {
-  return nodes.map(mapBlockNode);
-}
-function mapEditorStateToContent(state) {
-  if (!state || !state.root || !state.root.children) {
-    return null;
-  }
-  const blocks = mapBlockNodes(state.root.children);
-  return { blocks };
-}
-function mapEditorStateToBlocks(state) {
-  if (!state || !state.root || !state.root.children) {
-    return [];
-  }
-  return mapBlockNodes(state.root.children);
-}
-const MARGIN_MM = Math.round(PAGE_MARGIN_PX / PX_PER_MM * 10) / 10;
-function serializeDocument(document2, variableDefinitions = []) {
-  const pages = document2.pages.map(
-    (page, index) => serializePage(page, index)
-  );
-  const metadata = buildMetadata(variableDefinitions);
-  return {
-    version: AST_VERSION,
-    page: {
-      format: "A4",
-      widthMm: 210,
-      heightMm: 297,
-      margins: {
-        topMm: MARGIN_MM,
-        rightMm: MARGIN_MM,
-        bottomMm: MARGIN_MM,
-        leftMm: MARGIN_MM
-      }
-    },
-    headerFooter: {
-      enabled: document2.headerFooterEnabled,
-      pageCounterMode: document2.pageCounterMode,
-      defaultHeader: document2.pages.length > 0 ? mapEditorStateToContent(document2.pages[0].headerState) : null,
-      defaultFooter: document2.pages.length > 0 ? mapEditorStateToContent(document2.pages[0].footerState) : null
-    },
-    pages,
-    metadata
-  };
-}
-function serializePage(page, pageIndex) {
-  return {
-    pageIndex,
-    body: mapEditorStateToBlocks(page.bodyState),
-    header: mapEditorStateToContent(page.headerState),
-    footer: mapEditorStateToContent(page.footerState)
-  };
-}
-function buildMetadata(variableDefinitions) {
-  const variables = {};
-  for (const def of variableDefinitions) {
-    variables[def.key] = {
-      key: def.key,
-      label: def.label,
-      ...def.description ? { description: def.description } : {},
-      ...def.valueType ? { valueType: def.valueType } : {},
-      ...def.group ? { group: def.group } : {}
-    };
-  }
-  return { variables };
-}
-function buildSavePayload(ast, options) {
-  return {
-    document: ast,
-    ...(options == null ? void 0 : options.exportTarget) ? { exportTarget: options.exportTarget } : {},
-    ...(options == null ? void 0 : options.documentId) ? { documentId: options.documentId } : {},
-    ...(options == null ? void 0 : options.metadata) ? { metadata: options.metadata } : {}
-  };
-}
-function serializeDocumentJson(ast) {
-  return JSON.stringify(ast, null, 2);
-}
 function astExtension() {
   return {
     name: "ast",
@@ -5033,7 +5050,7 @@ function VariableChip({ variableKey }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className: "lex4-variable-chip inline-flex items-center rounded-full border border-blue-300\n                 bg-white px-2 py-0.5 text-[11px] font-medium text-blue-700 select-none\n                 cursor-default whitespace-nowrap mx-0.5",
+      className: "lex4-variable-chip",
       "data-testid": `variable-chip-${variableKey}`,
       title: variableKey,
       children: label
@@ -5106,12 +5123,12 @@ const VariablePicker = ({ onInsert, disabled = false }) => {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative inline-block", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "lex4-variable-picker", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        className: "h-7 rounded border border-gray-200 bg-white px-2 text-xs font-medium text-gray-700\n                   hover:bg-gray-50 focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400\n                   disabled:opacity-50 disabled:cursor-not-allowed",
+        className: "lex4-variable-picker-btn",
         "data-testid": "variable-picker-button",
         disabled: disabled || definitions.length === 0,
         onClick: () => setOpen(!open),
@@ -5122,14 +5139,13 @@ const VariablePicker = ({ onInsert, disabled = false }) => {
     open && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: "absolute left-0 top-full z-50 mt-1 w-64 rounded-md border border-gray-200\n                     bg-white shadow-lg",
+        className: "lex4-variable-picker-dropdown",
         "data-testid": "variable-picker-dropdown",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-100 p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-picker-search", children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               type: "text",
-              className: "w-full rounded border border-gray-200 px-2 py-1 text-xs\n                         focus:border-blue-400 focus:outline-none",
               placeholder: "Search variables...",
               "data-testid": "variable-picker-search",
               value: filter,
@@ -5137,20 +5153,20 @@ const VariablePicker = ({ onInsert, disabled = false }) => {
               autoFocus: true
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-h-48 overflow-y-auto p-1", children: [
-            Object.keys(grouped).length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 text-xs text-gray-400", children: "No variables found" }),
+          /* @__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: "px-2 py-1 text-[10px] font-semibold uppercase text-gray-400", children: group }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lex4-variable-picker-group-label", children: group }),
               defs.map((def) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
                 {
                   type: "button",
-                  className: "flex w-full items-center gap-2 rounded px-2 py-1 text-left text-xs\n                               hover:bg-blue-50",
+                  className: "lex4-variable-picker-option",
                   "data-testid": `variable-option-${def.key}`,
                   onClick: () => handleInsert(def.key),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-blue-700", children: `{{${def.key}}}` }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: def.label })
+                    /* @__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
@@ -5208,20 +5224,20 @@ const VariablePanel = ({ open, onClose }) => {
         "button",
         {
           type: "button",
-          className: "flex h-6 w-6 items-center justify-center rounded text-gray-400\n                     transition-colors hover:bg-gray-100 hover:text-gray-600",
+          className: "lex4-sidebar-action-btn",
           title: t.variables.refreshVariables,
           "data-testid": "btn-refresh-variables",
           children: /* @__PURE__ */ jsxRuntime.jsx(RefreshCw, { size: 12 })
         }
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Search, { size: 14, className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" }),
+        /* @__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(
             "input",
             {
               type: "text",
-              className: "w-full rounded-lg border border-gray-200 bg-gray-50 py-1.5 pl-8 pr-3 text-xs\n                       placeholder-gray-400 focus:border-blue-400 focus:bg-white focus:outline-none\n                       focus:ring-1 focus:ring-blue-400",
+              className: "lex4-variable-search-input",
               placeholder: t.variables.searchPlaceholder,
               "data-testid": "variable-panel-search",
               value: filter,
@@ -5229,25 +5245,19 @@ const VariablePanel = ({ open, onClose }) => {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-3", children: [
-          Object.keys(grouped).length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-4 text-center text-xs text-gray-400", children: t.variables.noVariablesFound }),
-          Object.entries(grouped).map(([group, defs]) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1", children: defs.map((def) => /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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: "flex items-center justify-between gap-2 rounded-lg px-2.5 py-1.5 text-left text-xs\n                             transition-colors hover:bg-blue-50 group",
+              className: "lex4-variable-list-item",
               "data-testid": `variable-panel-${def.key}`,
               onClick: () => handleInsert(def.key),
               disabled: !activeEditor,
               children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "inline-flex items-center rounded-full border border-blue-300 bg-white\n                               px-2 py-0.5 text-[11px] font-medium text-blue-700\n                               group-hover:border-blue-400 group-hover:bg-blue-50",
-                    children: def.label
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-gray-400", children: group })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-badge", children: def.label }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "lex4-variable-group-label", children: group })
               ]
             },
             def.key
@@ -5301,10 +5311,7 @@ const VariablePanelToggle = () => {
       "aria-label": panelOpen ? t.variables.closePanel : t.variables.openPanel,
       onMouseDown: (e) => e.preventDefault(),
       onClick: () => setPanelOpen(!panelOpen),
-      className: `
-        flex h-7 w-7 items-center justify-center rounded transition-colors
-        ${panelOpen ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900"}
-      `,
+      className: `lex4-toolbar-btn${panelOpen ? " active" : ""}`,
       "data-testid": "toggle-variable-panel",
       children: /* @__PURE__ */ jsxRuntime.jsx(Braces, { size: 15 })
     }