@yurikilian/lex4 0.2.0 → 0.2.2

package/dist/lex4-editor.js

@@ -1134,20 +1134,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$m = [
+const __iconNode$q = [
+  ["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);
+/**
+ * @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 = [
   [
     "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$m);
+const Bold = createLucideIcon("bold", __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$l = [
+const __iconNode$o = [
   [
     "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" }
@@ -1160,27 +1173,35 @@ const __iconNode$l = [
     }
   ]
 ];
-const Braces = createLucideIcon("braces", __iconNode$l);
+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$k = [
+const __iconNode$n = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$n);
+/**
+ * @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$m = [
   ["line", { x1: "15", x2: "15", y1: "12", y2: "18", key: "1p7wdc" }],
   ["line", { x1: "12", x2: "18", y1: "15", y2: "15", key: "1nscbv" }],
   ["rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2", key: "17jyea" }],
   ["path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2", key: "zix9uf" }]
 ];
-const CopyPlus = createLucideIcon("copy-plus", __iconNode$k);
+const CopyPlus = createLucideIcon("copy-plus", __iconNode$m);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$l = [
   [
     "path",
     {
@@ -1190,65 +1211,52 @@ const __iconNode$j = [
   ],
   ["path", { d: "m5.082 11.09 8.828 8.828", key: "1wx5vj" }]
 ];
-const Eraser = createLucideIcon("eraser", __iconNode$j);
+const Eraser = createLucideIcon("eraser", __iconNode$l);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
-  ["line", { x1: "4", x2: "20", y1: "9", y2: "9", key: "4lhtct" }],
-  ["line", { x1: "4", x2: "20", y1: "15", y2: "15", key: "vyu0kd" }],
-  ["line", { x1: "10", x2: "8", y1: "3", y2: "21", key: "1ggp8o" }],
-  ["line", { x1: "16", x2: "14", y1: "3", y2: "21", key: "weycgp" }]
-];
-const Hash = createLucideIcon("hash", __iconNode$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$h = [
+const __iconNode$k = [
   ["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$h);
+const Italic = createLucideIcon("italic", __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$g = [
+const __iconNode$j = [
   ["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$g);
+const ListIndentDecrease = createLucideIcon("list-indent-decrease", __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$f = [
+const __iconNode$i = [
   ["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$f);
+const ListIndentIncrease = createLucideIcon("list-indent-increase", __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$e = [
+const __iconNode$h = [
   ["path", { d: "M11 5h10", key: "1cz7ny" }],
   ["path", { d: "M11 12h10", key: "1438ji" }],
   ["path", { d: "M11 19h10", key: "11t30w" }],
@@ -1256,14 +1264,14 @@ const __iconNode$e = [
   ["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$e);
+const ListOrdered = createLucideIcon("list-ordered", __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$d = [
+const __iconNode$g = [
   ["path", { d: "M3 5h.01", key: "18ugdj" }],
   ["path", { d: "M3 12h.01", key: "nlz23k" }],
   ["path", { d: "M3 19h.01", key: "noohij" }],
@@ -1271,127 +1279,168 @@ const __iconNode$d = [
   ["path", { d: "M8 12h13", key: "1za7za" }],
   ["path", { d: "M8 19h13", key: "m83p4d" }]
 ];
-const List = createLucideIcon("list", __iconNode$d);
+const List = createLucideIcon("list", __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$c = [
+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$c);
+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$b = [
+const __iconNode$e = [
   ["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$b);
+const Redo2 = createLucideIcon("redo-2", __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$a = [
+const __iconNode$d = [
   ["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
   ["path", { d: "M21 3v5h-5", key: "1q7to0" }],
   ["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
   ["path", { d: "M8 16H3v5", key: "1cv678" }]
 ];
-const RefreshCw = createLucideIcon("refresh-cw", __iconNode$a);
+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$9 = [
+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);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$b = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$9);
+const Search = createLucideIcon("search", __iconNode$b);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+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" }]
+];
+const Settings = createLucideIcon("settings", __iconNode$a);
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$9 = [
   ["path", { d: "M16 4H9a3 3 0 0 0-2.83 4", key: "43sutm" }],
   ["path", { d: "M14 12a4 4 0 0 1 0 8H6", key: "nlfj13" }],
   ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }]
 ];
-const Strikethrough = createLucideIcon("strikethrough", __iconNode$8);
+const Strikethrough = createLucideIcon("strikethrough", __iconNode$9);
 /**
  * @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$7 = [
+const __iconNode$8 = [
   ["path", { d: "M21 5H3", key: "1fi0y6" }],
   ["path", { d: "M17 12H7", key: "16if0g" }],
   ["path", { d: "M19 19H5", key: "vjpgq2" }]
 ];
-const TextAlignCenter = createLucideIcon("text-align-center", __iconNode$7);
+const TextAlignCenter = createLucideIcon("text-align-center", __iconNode$8);
 /**
  * @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$6 = [
+const __iconNode$7 = [
   ["path", { d: "M21 5H3", key: "1fi0y6" }],
   ["path", { d: "M21 12H9", key: "dn1m92" }],
   ["path", { d: "M21 19H7", key: "4cu937" }]
 ];
-const TextAlignEnd = createLucideIcon("text-align-end", __iconNode$6);
+const TextAlignEnd = createLucideIcon("text-align-end", __iconNode$7);
 /**
  * @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$5 = [
+const __iconNode$6 = [
   ["path", { d: "M3 5h18", key: "1u36vt" }],
   ["path", { d: "M3 12h18", key: "1i2n21" }],
   ["path", { d: "M3 19h18", key: "awlh7x" }]
 ];
-const TextAlignJustify = createLucideIcon("text-align-justify", __iconNode$5);
+const TextAlignJustify = createLucideIcon("text-align-justify", __iconNode$6);
 /**
  * @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$4 = [
+const __iconNode$5 = [
   ["path", { d: "M21 5H3", key: "1fi0y6" }],
   ["path", { d: "M15 12H3", key: "6jk70r" }],
   ["path", { d: "M17 19H3", key: "z6ezky" }]
 ];
-const TextAlignStart = createLucideIcon("text-align-start", __iconNode$4);
+const TextAlignStart = createLucideIcon("text-align-start", __iconNode$5);
 /**
  * @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$3 = [
+const __iconNode$4 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-const Trash2 = createLucideIcon("trash-2", __iconNode$3);
+const Trash2 = createLucideIcon("trash-2", __iconNode$4);
+/**
+ * @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$3 = [
+  ["path", { d: "M12 4v16", key: "1654pz" }],
+  ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
+  ["path", { d: "M9 20h6", key: "s66wpe" }]
+];
+const Type = createLucideIcon("type", __iconNode$3);
 /**
  * @license lucide-react v1.8.0 - ISC
  *
@@ -1491,10 +1540,92 @@ const DEFAULT_TRANSLATIONS = {
   footer: {
     placeholder: "Footer"
   },
+  body: {
+    placeholder: "Start typing..."
+  },
+  headerFooter: {
+    label: "Headers & Footers"
+  },
   sidebar: {
     close: "Close sidebar"
   }
 };
+const PT_BR_TRANSLATIONS = {
+  toolbar: {
+    undo: "Desfazer",
+    redo: "Refazer",
+    bold: "Negrito (Ctrl+B)",
+    italic: "Itálico (Ctrl+I)",
+    underline: "Sublinhado (Ctrl+U)",
+    strikethrough: "Tachado",
+    alignLeft: "Alinhar à Esquerda",
+    alignCenter: "Centralizar",
+    alignRight: "Alinhar à Direita",
+    justify: "Justificar",
+    numberedList: "Lista Numerada",
+    bulletList: "Lista com Marcadores",
+    indent: "Aumentar Recuo",
+    outdent: "Diminuir Recuo",
+    openHistory: "Abrir Histórico",
+    closeHistory: "Fechar Histórico"
+  },
+  history: {
+    title: "Histórico",
+    subtitle: "Histórico de sessão (últimas 100 ações)",
+    empty: "Nenhum histórico ainda.",
+    clearHistory: "Limpar Histórico",
+    actions: {
+      enabledHeadersFooters: "Cabeçalhos e rodapés ativados",
+      disabledHeadersFooters: "Cabeçalhos e rodapés desativados",
+      copiedHeaderToAll: "Cabeçalho copiado para todas as páginas",
+      copiedFooterToAll: "Rodapé copiado para todas as páginas",
+      clearedHeader: "Cabeçalho limpo",
+      clearedFooter: "Rodapé limpo",
+      clearedAllHeaders: "Todos os cabeçalhos limpos",
+      clearedAllFooters: "Todos os rodapés limpos",
+      pageCounterSet: "Contador de páginas definido como {{value}}",
+      boldApplied: "Negrito aplicado",
+      italicApplied: "Itálico aplicado",
+      underlineApplied: "Sublinhado aplicado",
+      strikethroughApplied: "Tachado aplicado",
+      alignedLeft: "Alinhado à esquerda",
+      alignedCenter: "Centralizado",
+      alignedRight: "Alinhado à direita",
+      justifiedText: "Texto justificado",
+      insertedNumberedList: "Lista numerada inserida",
+      insertedBulletList: "Lista com marcadores inserida",
+      indentedContent: "Conteúdo recuado",
+      outdentedContent: "Recuo reduzido",
+      fontChanged: "Fonte alterada para {{value}}",
+      fontSizeChanged: "Tamanho da fonte alterado para {{value}}pt"
+    }
+  },
+  variables: {
+    title: "Variáveis",
+    available: "{{count}} disponíveis",
+    refreshVariables: "Atualizar variáveis",
+    searchPlaceholder: "Buscar variáveis...",
+    noVariablesFound: "Nenhuma variável encontrada",
+    insertVariable: "Inserir variável {{key}}",
+    openPanel: "Abrir Variáveis",
+    closePanel: "Fechar Variáveis"
+  },
+  header: {
+    placeholder: "Cabeçalho"
+  },
+  footer: {
+    placeholder: "Rodapé"
+  },
+  body: {
+    placeholder: "Comece a digitar..."
+  },
+  headerFooter: {
+    label: "Cabeçalhos e Rodapés"
+  },
+  sidebar: {
+    close: "Fechar barra lateral"
+  }
+};
 function deepMerge(target, source) {
   if (typeof target !== "object" || target === null) {
     return source ?? target;
@@ -1651,13 +1782,15 @@ const HeaderFooterToggle = ({
   enabled,
   onToggle
 }) => {
+  const t = useTranslations();
   return /* @__PURE__ */ jsxs(
     "label",
     {
       className: "flex items-center gap-1.5 cursor-pointer select-none",
       "data-testid": "header-footer-toggle",
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: "Headers & Footers" }),
+        /* @__PURE__ */ jsx(Rows3, { size: 14, className: "text-gray-500" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-gray-600", children: t.headerFooter.label }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -1688,6 +1821,12 @@ const HeaderFooterToggle = ({
     }
   );
 };
+const PAGE_COUNTER_OPTIONS = [
+  { value: "none", label: "None" },
+  { value: "header", label: "Header" },
+  { value: "footer", label: "Footer" },
+  { value: "both", label: "Both" }
+];
 const HeaderFooterActions = ({
   activePageId,
   pageCounterMode,
@@ -1699,119 +1838,154 @@ const HeaderFooterActions = ({
   onClearAllHeaders,
   onClearAllFooters
 }) => {
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef(null);
   const hasActivePage = activePageId !== null;
-  const handlePageCounterModeChange = (event) => {
-    const nextMode = event.target.value;
-    if (nextMode === "none" || nextMode === "header" || nextMode === "footer" || nextMode === "both") {
-      onPageCounterModeChange(nextMode);
-    }
+  const close = useCallback(() => setOpen(false), []);
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        close();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open, close]);
+  const handleAction = (action) => {
+    action();
+    close();
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "flex flex-wrap items-center gap-2 text-xs",
-      "data-testid": "header-footer-actions",
-      children: [
-        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-gray-500", htmlFor: "page-counter-mode", children: [
-          /* @__PURE__ */ jsx(Hash, { size: 13, className: "text-gray-400" }),
-          /* @__PURE__ */ jsxs(
-            "select",
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative", "data-testid": "header-footer-actions", children: [
+    /* @__PURE__ */ 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"}
+        `,
+        "data-testid": "header-footer-menu-trigger",
+        "aria-expanded": open,
+        "aria-haspopup": "true",
+        children: [
+          /* @__PURE__ */ jsx(Settings, { size: 14 }),
+          /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ 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",
+        role: "menu",
+        "data-testid": "header-footer-menu",
+        children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Page counter" }),
+          /* @__PURE__ */ 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__ */ jsx(
+            "button",
             {
-              id: "page-counter-mode",
-              className: "h-6 rounded border border-gray-200 bg-white px-1.5 text-xs text-gray-600\n                     focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
-              "data-testid": "page-counter-mode",
-              value: pageCounterMode,
-              onChange: handlePageCounterModeChange,
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "none", children: "None" }),
-                /* @__PURE__ */ jsx("option", { value: "header", children: "Header" }),
-                /* @__PURE__ */ jsx("option", { value: "footer", children: "Footer" }),
-                /* @__PURE__ */ jsx("option", { value: "both", children: "Both" })
-              ]
+              type: "button",
+              role: "menuitemradio",
+              "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"}
+                `,
+              "data-testid": `page-counter-${value}`,
+              children: label
+            },
+            value
+          )) }),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Header" }),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(CopyPlus, { size: 14 }),
+              label: "Copy to all pages",
+              onClick: () => handleAction(onCopyHeaderToAll),
+              disabled: !hasActivePage,
+              testId: "copy-header-all"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(Eraser, { size: 14 }),
+              label: "Clear this page",
+              onClick: () => handleAction(onClearHeader),
+              disabled: !hasActivePage,
+              testId: "clear-header"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+              label: "Clear all",
+              onClick: () => handleAction(onClearAllHeaders),
+              testId: "clear-all-headers"
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Footer" }),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(CopyPlus, { size: 14 }),
+              label: "Copy to all pages",
+              onClick: () => handleAction(onCopyFooterToAll),
+              disabled: !hasActivePage,
+              testId: "copy-footer-all"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(Eraser, { size: 14 }),
+              label: "Clear this page",
+              onClick: () => handleAction(onClearFooter),
+              disabled: !hasActivePage,
+              testId: "clear-footer"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: /* @__PURE__ */ jsx(Trash2, { size: 14 }),
+              label: "Clear all",
+              onClick: () => handleAction(onClearAllFooters),
+              testId: "clear-all-footers"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx(ActionDivider, {}),
-        /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-medium", children: "Header" }),
-        /* @__PURE__ */ jsx(
-          ActionIconButton,
-          {
-            title: "Copy header to all pages",
-            icon: /* @__PURE__ */ jsx(CopyPlus, { size: 13 }),
-            onClick: onCopyHeaderToAll,
-            disabled: !hasActivePage,
-            testId: "copy-header-all"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActionIconButton,
-          {
-            title: "Clear header on this page",
-            icon: /* @__PURE__ */ jsx(Eraser, { size: 13 }),
-            onClick: onClearHeader,
-            disabled: !hasActivePage,
-            testId: "clear-header"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActionIconButton,
-          {
-            title: "Clear all headers",
-            icon: /* @__PURE__ */ jsx(Trash2, { size: 13 }),
-            onClick: onClearAllHeaders,
-            testId: "clear-all-headers"
-          }
-        ),
-        /* @__PURE__ */ jsx(ActionDivider, {}),
-        /* @__PURE__ */ jsx("span", { className: "text-gray-400 font-medium", children: "Footer" }),
-        /* @__PURE__ */ jsx(
-          ActionIconButton,
-          {
-            title: "Copy footer to all pages",
-            icon: /* @__PURE__ */ jsx(CopyPlus, { size: 13 }),
-            onClick: onCopyFooterToAll,
-            disabled: !hasActivePage,
-            testId: "copy-footer-all"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActionIconButton,
-          {
-            title: "Clear footer on this page",
-            icon: /* @__PURE__ */ jsx(Eraser, { size: 13 }),
-            onClick: onClearFooter,
-            disabled: !hasActivePage,
-            testId: "clear-footer"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ActionIconButton,
-          {
-            title: "Clear all footers",
-            icon: /* @__PURE__ */ jsx(Trash2, { size: 13 }),
-            onClick: onClearAllFooters,
-            testId: "clear-all-footers"
-          }
-        )
-      ]
-    }
-  );
+        ]
+      }
+    )
+  ] });
 };
-const ActionIconButton = ({ title, icon, onClick, disabled, testId }) => /* @__PURE__ */ jsx(
+const SectionLabel = ({ children }) => /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 pb-1 text-[10px] font-semibold uppercase tracking-wider text-gray-400", children });
+const MenuItem = ({ icon, label, onClick, disabled, testId }) => /* @__PURE__ */ jsxs(
   "button",
   {
     type: "button",
-    title,
-    "aria-label": title,
+    role: "menuitem",
     onMouseDown: (e) => e.preventDefault(),
     onClick,
     disabled,
-    className: "flex h-6 w-6 items-center justify-center rounded text-gray-500 transition-colors\n               hover:bg-gray-200/60 hover:text-gray-700\n               disabled:cursor-not-allowed disabled:text-gray-300",
+    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",
     "data-testid": testId,
-    children: icon
+    children: [
+      icon,
+      label
+    ]
   }
 );
-const ActionDivider = () => /* @__PURE__ */ jsx("div", { className: "mx-0.5 h-4 w-px bg-gray-300/60" });
+const MenuDivider = () => /* @__PURE__ */ jsx("div", { className: "my-1 h-px bg-gray-100" });
 function resolveExtensions(extensions) {
   const resolved = {
     nodes: [],
@@ -1886,10 +2060,10 @@ function useExtensionContext(getDocument, getActiveEditor) {
   }), [getDocument, getActiveEditor, stateRef]);
 }
 const SUPPORTED_FONTS = [
+  "Calibri",
   "Inter",
   "Times New Roman",
   "Arial",
-  "Calibri",
   "Georgia",
   "Courier New"
 ];
@@ -2153,87 +2327,107 @@ const Toolbar = () => {
     },
     [applyToBodyEditors, runToolbarAction, t.history.actions.fontSizeChanged]
   );
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "lex4-toolbar sticky top-0 z-10 bg-white border-b border-gray-200",
       "data-testid": "toolbar",
-      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "history-controls", children: [
-          /* @__PURE__ */ jsx(
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "history-controls", children: [
+            /* @__PURE__ */ jsx(
+              ToolbarIconButton,
+              {
+                title: t.toolbar.undo,
+                testId: "btn-undo",
+                disabled: !canUndo,
+                onClick: undo,
+                children: /* @__PURE__ */ jsx(Undo2, { size: 15 })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ToolbarIconButton,
+              {
+                title: t.toolbar.redo,
+                testId: "btn-redo",
+                disabled: !canRedo,
+                onClick: redo,
+                children: /* @__PURE__ */ jsx(Redo2, { size: 15 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Type, { size: 14, className: "text-gray-500" }),
+            /* @__PURE__ */ 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",
+                "data-testid": "font-selector",
+                defaultValue: "Calibri",
+                onChange: handleFontChange,
+                children: SUPPORTED_FONTS.map((font) => /* @__PURE__ */ jsx("option", { value: font, style: { fontFamily: font }, children: font }, font))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(ALargeSmall, { size: 14, className: "text-gray-500" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "h-7 w-16 rounded border border-gray-200 bg-white px-1 text-xs text-gray-700\n                       focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
+                "data-testid": "font-size-selector",
+                defaultValue: "12",
+                onChange: handleFontSizeChange,
+                children: SUPPORTED_FONT_SIZES.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "format-group", children: [
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsx(Underline, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "align-group", children: [
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsx(TextAlignStart, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsx(TextAlignJustify, { size: 15 }) })
+          ] }),
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "list-group", children: [
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsx(ListOrdered, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsx(List, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsx(ListIndentIncrease, { size: 15 }) }),
+            /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsx(ListIndentDecrease, { size: 15 }) })
+          ] }),
+          toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Divider, {}),
+            toolbarItems.map((ToolbarItem, idx) => /* @__PURE__ */ jsx(ToolbarItem, {}, idx))
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
             ToolbarIconButton,
             {
-              title: t.toolbar.undo,
-              testId: "btn-undo",
-              disabled: !canUndo,
-              onClick: undo,
-              children: /* @__PURE__ */ jsx(Undo2, { size: 15 })
+              title: historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
+              testId: "toggle-history-sidebar",
+              active: historySidebarOpen,
+              onClick: () => setHistorySidebarOpen(!historySidebarOpen),
+              children: /* @__PURE__ */ jsx(PanelRight, { size: 15 })
             }
-          ),
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-2 py-1 border-t border-gray-100", children: [
           /* @__PURE__ */ jsx(
-            ToolbarIconButton,
+            HeaderFooterToggle,
             {
-              title: t.toolbar.redo,
-              testId: "btn-redo",
-              disabled: !canRedo,
-              onClick: redo,
-              children: /* @__PURE__ */ jsx(Redo2, { size: 15 })
+              enabled: document2.headerFooterEnabled,
+              onToggle: handleToggle
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ 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",
-            "data-testid": "font-selector",
-            defaultValue: "Inter",
-            onChange: handleFontChange,
-            children: SUPPORTED_FONTS.map((font) => /* @__PURE__ */ jsx("option", { value: font, style: { fontFamily: font }, children: font }, font))
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "select",
-          {
-            className: "h-7 w-16 rounded border border-gray-200 bg-white px-1 text-xs text-gray-700\n                     focus:border-blue-400 focus:outline-none focus:ring-1 focus:ring-blue-400",
-            "data-testid": "font-size-selector",
-            defaultValue: "12",
-            onChange: handleFontSizeChange,
-            children: SUPPORTED_FONT_SIZES.map((size) => /* @__PURE__ */ jsx("option", { value: size, children: size }, size))
-          }
-        ),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "format-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bold, testId: "btn-bold", onClick: handleBold, children: /* @__PURE__ */ jsx(Bold, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.italic, testId: "btn-italic", onClick: handleItalic, children: /* @__PURE__ */ jsx(Italic, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.underline, testId: "btn-underline", onClick: handleUnderline, children: /* @__PURE__ */ jsx(Underline, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.strikethrough, testId: "btn-strike", onClick: handleStrikethrough, children: /* @__PURE__ */ jsx(Strikethrough, { size: 15 }) })
-        ] }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "align-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignLeft, testId: "btn-align-left", onClick: handleAlignLeft, children: /* @__PURE__ */ jsx(TextAlignStart, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignCenter, testId: "btn-align-center", onClick: handleAlignCenter, children: /* @__PURE__ */ jsx(TextAlignCenter, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.alignRight, testId: "btn-align-right", onClick: handleAlignRight, children: /* @__PURE__ */ jsx(TextAlignEnd, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.justify, testId: "btn-align-justify", onClick: handleAlignJustify, children: /* @__PURE__ */ jsx(TextAlignJustify, { size: 15 }) })
-        ] }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", "data-testid": "list-group", children: [
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.numberedList, testId: "btn-list-number", onClick: handleListNumber, children: /* @__PURE__ */ jsx(ListOrdered, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.bulletList, testId: "btn-list-bullet", onClick: handleListBullet, children: /* @__PURE__ */ jsx(List, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.indent, testId: "btn-indent", onClick: handleIndent, children: /* @__PURE__ */ jsx(ListIndentIncrease, { size: 15 }) }),
-          /* @__PURE__ */ jsx(ToolbarIconButton, { title: t.toolbar.outdent, testId: "btn-outdent", onClick: handleOutdent, children: /* @__PURE__ */ jsx(ListIndentDecrease, { size: 15 }) })
-        ] }),
-        /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(
-          HeaderFooterToggle,
-          {
-            enabled: document2.headerFooterEnabled,
-            onToggle: handleToggle
-          }
-        ),
-        document2.headerFooterEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Divider, {}),
-          /* @__PURE__ */ jsx(
+          ),
+          document2.headerFooterEnabled && /* @__PURE__ */ jsx(
             HeaderFooterActions,
             {
               activePageId,
@@ -2247,22 +2441,8 @@ const Toolbar = () => {
               onClearAllFooters: handleClearAllFooters
             }
           )
-        ] }),
-        toolbarItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Divider, {}),
-          toolbarItems.map((ToolbarItem, idx) => /* @__PURE__ */ jsx(ToolbarItem, {}, idx))
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
-          ToolbarIconButton,
-          {
-            title: historySidebarOpen ? t.toolbar.closeHistory : t.toolbar.openHistory,
-            testId: "toggle-history-sidebar",
-            active: historySidebarOpen,
-            onClick: () => setHistorySidebarOpen(!historySidebarOpen),
-            children: /* @__PURE__ */ jsx(PanelRight, { size: 15 })
-          }
-        ) })
-      ] })
+        ] })
+      ]
     }
   );
 };
@@ -2531,7 +2711,7 @@ function usePagination(document2, dispatch) {
 }
 const lexicalTheme = {
   root: "lex4-root outline-none",
-  paragraph: "lex4-paragraph mb-1",
+  paragraph: "lex4-paragraph text-justify",
   heading: {
     h1: "text-3xl font-bold mb-2",
     h2: "text-2xl font-bold mb-2",
@@ -3143,6 +3323,7 @@ const PageBody = ({
   readOnly = false
 }) => {
   const { nodes, bodyPlugins, themeOverrides } = useExtensions();
+  const t = useTranslations();
   const config = useMemo(
     () => {
       var _a, _b;
@@ -3196,7 +3377,7 @@ const PageBody = ({
                 style: { overflow: "visible" }
               }
             ),
-            placeholder: /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 text-gray-400 pointer-events-none select-none", children: "Start typing..." }),
+            placeholder: /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 text-gray-400 pointer-events-none select-none", children: t.body.placeholder }),
             ErrorBoundary: LexicalErrorBoundary
           }
         ),
@@ -3336,10 +3517,10 @@ const PageHeader = ({
                 ContentEditable,
                 {
                   ref: contentRef,
-                  className: `outline-none p-2 text-sm text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
+                  className: `outline-none p-2 text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
                 }
               ),
-              placeholder: /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 text-sm ${hasPageCounter ? "pr-24" : ""}`, children: t.header.placeholder }),
+              placeholder: /* @__PURE__ */ 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 }),
               ErrorBoundary: LexicalErrorBoundary
             }
           ),
@@ -3416,10 +3597,10 @@ const PageFooter = ({
                 ContentEditable,
                 {
                   ref: contentRef,
-                  className: `outline-none p-2 text-sm text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
+                  className: `outline-none p-2 text-gray-600 min-h-[24px] ${hasPageCounter ? "pr-24" : ""}`
                 }
               ),
-              placeholder: /* @__PURE__ */ jsx("div", { className: `absolute top-0 left-0 text-gray-400 pointer-events-none select-none p-2 text-sm ${hasPageCounter ? "pr-24" : ""}`, children: t.footer.placeholder }),
+              placeholder: /* @__PURE__ */ 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 }),
               ErrorBoundary: LexicalErrorBoundary
             }
           ),
@@ -4352,6 +4533,36 @@ function astExtension() {
     }
   };
 }
+const EMPTY_CONTEXT = {
+  definitions: [],
+  refreshDefinitions: () => {
+  },
+  getDefinition: () => void 0
+};
+const VariableContext = createContext(EMPTY_CONTEXT);
+const VariableProvider = ({
+  initialDefinitions = [],
+  children
+}) => {
+  const [definitions, setDefinitions] = useState(initialDefinitions);
+  const refresh = useCallback((newDefinitions) => {
+    setDefinitions(newDefinitions);
+  }, []);
+  const getDefinition = useCallback(
+    (key) => {
+      return definitions.find((d) => d.key === key);
+    },
+    [definitions]
+  );
+  const value = useMemo(
+    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
+    [definitions, refresh, getDefinition]
+  );
+  return /* @__PURE__ */ jsx(VariableContext.Provider, { value, children });
+};
+function useVariables() {
+  return useContext(VariableContext);
+}
 class VariableNode extends DecoratorNode {
   constructor(variableKey, key) {
     super(key);
@@ -4411,17 +4622,23 @@ class VariableNode extends DecoratorNode {
   }
   // -- Rendering --
   decorate() {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "lex4-variable-chip inline-flex items-center rounded bg-white px-1.5 py-0.5\n                   text-xs font-medium text-blue-700 border border-blue-300 select-none\n                   cursor-default whitespace-nowrap mx-0.5",
-        "data-testid": `variable-chip-${this.__variableKey}`,
-        title: this.__variableKey,
-        children: `{{${this.__variableKey}}}`
-      }
-    );
+    return /* @__PURE__ */ jsx(VariableChip, { variableKey: this.__variableKey });
   }
 }
+function VariableChip({ variableKey }) {
+  var _a;
+  const { getDefinition } = useVariables();
+  const label = ((_a = getDefinition(variableKey)) == null ? void 0 : _a.label) ?? variableKey;
+  return /* @__PURE__ */ 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",
+      "data-testid": `variable-chip-${variableKey}`,
+      title: variableKey,
+      children: label
+    }
+  );
+}
 function $createVariableNode(variableKey) {
   return $applyNodeReplacement(new VariableNode(variableKey));
 }
@@ -4448,36 +4665,6 @@ const VariablePlugin = () => {
   }, [editor]);
   return null;
 };
-const EMPTY_CONTEXT = {
-  definitions: [],
-  refreshDefinitions: () => {
-  },
-  getDefinition: () => void 0
-};
-const VariableContext = createContext(EMPTY_CONTEXT);
-const VariableProvider = ({
-  initialDefinitions = [],
-  children
-}) => {
-  const [definitions, setDefinitions] = useState(initialDefinitions);
-  const refresh = useCallback((newDefinitions) => {
-    setDefinitions(newDefinitions);
-  }, []);
-  const getDefinition = useCallback(
-    (key) => {
-      return definitions.find((d) => d.key === key);
-    },
-    [definitions]
-  );
-  const value = useMemo(
-    () => ({ definitions, refreshDefinitions: refresh, getDefinition }),
-    [definitions, refresh, getDefinition]
-  );
-  return /* @__PURE__ */ jsx(VariableContext.Provider, { value, children });
-};
-function useVariables() {
-  return useContext(VariableContext);
-}
 const VariablePicker = ({ onInsert, disabled = false }) => {
   const { definitions } = useVariables();
   const [open, setOpen] = useState(false);
@@ -4771,6 +4958,7 @@ export {
   Lex4Editor,
   MAX_FOOTER_HEIGHT_PX,
   MAX_HEADER_HEIGHT_PX,
+  PT_BR_TRANSLATIONS,
   VariableNode,
   astExtension,
   buildSavePayload,