@yurikilian/lex4 0.2.1 → 0.3.1

package/dist/lex4-editor.js

@@ -2,10 +2,10 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React, { createContext, useContext, useReducer, useState, useRef, useMemo, useCallback, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
-import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $selectAll, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_DOWN_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $applyNodeReplacement, DecoratorNode, createCommand, $insertNodes, COMMAND_PRIORITY_EDITOR } from "lexical";
+import React, { createContext, useContext, useMemo, useReducer, useState, useRef, useCallback, useEffect, forwardRef, createElement, useImperativeHandle } from "react";
+import { $getRoot, $createRangeSelectionFromDom, $getSelection, $isRangeSelection, $isTextNode, FORMAT_ELEMENT_COMMAND, FORMAT_TEXT_COMMAND, OUTDENT_CONTENT_COMMAND, INDENT_CONTENT_COMMAND, $selectAll, KEY_TAB_COMMAND, COMMAND_PRIORITY_LOW, $isElementNode, $isParagraphNode, $setSelection, FOCUS_COMMAND, $splitNode, $getNearestNodeFromDOMNode, CONTROLLED_TEXT_INSERTION_COMMAND, KEY_DOWN_COMMAND, PASTE_COMMAND, KEY_ENTER_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_CRITICAL, $applyNodeReplacement, DecoratorNode, createCommand, $insertNodes, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode } from "@lexical/list";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode, ListItemNode, $isListNode } from "@lexical/list";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
@@ -452,6 +452,258 @@ function jumpToHistoryEntry(history, entryIndex) {
     caretSelection: ((_b = nextHistory.entries[nextHistory.cursor - 1]) == null ? void 0 : _b.caretSelection) ?? null
   };
 }
+const DEFAULT_TRANSLATIONS = {
+  toolbar: {
+    undo: "Undo",
+    redo: "Redo",
+    bold: "Bold (Ctrl+B)",
+    italic: "Italic (Ctrl+I)",
+    underline: "Underline (Ctrl+U)",
+    strikethrough: "Strikethrough",
+    alignLeft: "Align Left",
+    alignCenter: "Align Center",
+    alignRight: "Align Right",
+    justify: "Justify",
+    numberedList: "Numbered List",
+    bulletList: "Bullet List",
+    indent: "Indent",
+    outdent: "Outdent",
+    openHistory: "Open History",
+    closeHistory: "Close History"
+  },
+  history: {
+    title: "History",
+    subtitle: "Word-style session history (last 100 actions)",
+    empty: "No history yet.",
+    clearHistory: "Clear History",
+    actions: {
+      enabledHeadersFooters: "Enabled headers and footers",
+      disabledHeadersFooters: "Disabled headers and footers",
+      copiedHeaderToAll: "Copied header to all pages",
+      copiedFooterToAll: "Copied footer to all pages",
+      clearedHeader: "Cleared header",
+      clearedFooter: "Cleared footer",
+      clearedAllHeaders: "Cleared all headers",
+      clearedAllFooters: "Cleared all footers",
+      pageCounterSet: "Page counter set to {{value}}",
+      boldApplied: "Bold applied",
+      italicApplied: "Italic applied",
+      underlineApplied: "Underline applied",
+      strikethroughApplied: "Strikethrough applied",
+      alignedLeft: "Aligned left",
+      alignedCenter: "Aligned center",
+      alignedRight: "Aligned right",
+      justifiedText: "Justified text",
+      insertedNumberedList: "Inserted numbered list",
+      insertedBulletList: "Inserted bullet list",
+      indentedContent: "Indented content",
+      outdentedContent: "Outdented content",
+      fontChanged: "Font changed to {{value}}",
+      fontSizeChanged: "Font size changed to {{value}}pt"
+    }
+  },
+  variables: {
+    title: "Variables",
+    available: "{{count}} available",
+    refreshVariables: "Refresh variables",
+    searchPlaceholder: "Search variables...",
+    noVariablesFound: "No variables found",
+    insertVariable: "Insert variable {{key}}",
+    openPanel: "Open Variables",
+    closePanel: "Close Variables"
+  },
+  header: {
+    placeholder: "Header"
+  },
+  footer: {
+    placeholder: "Footer"
+  },
+  body: {
+    placeholder: "Start typing..."
+  },
+  pageCounter: {
+    format: "Page {{current}} of {{total}}"
+  },
+  regions: {
+    body: "body",
+    header: "header",
+    footer: "footer",
+    document: "document",
+    toolbar: "toolbar",
+    overflow: "overflow",
+    history: "history",
+    page: "Page {{page}}"
+  },
+  headerFooter: {
+    label: "Headers & Footers"
+  },
+  sidebar: {
+    close: "Close sidebar"
+  },
+  historyLabels: {
+    typedText: "Typed text",
+    pastedContent: "Pasted content",
+    insertedLineBreak: "Inserted line break",
+    deletedBackward: "Deleted backward",
+    deletedForward: "Deleted forward",
+    formattedText: "Formatted text",
+    formattedParagraph: "Formatted paragraph",
+    editedBody: "Edited body",
+    editedHeader: "Edited header",
+    editedFooter: "Edited footer",
+    clearedDocumentBody: "Cleared document body",
+    resizedHeader: "Resized header",
+    resizedFooter: "Resized footer",
+    addedPage: "Added page",
+    removedPage: "Removed page",
+    documentReflow: "Document reflow",
+    updatedDocument: "Updated document"
+  }
+};
+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..."
+  },
+  pageCounter: {
+    format: "Página {{current}} de {{total}}"
+  },
+  regions: {
+    body: "corpo",
+    header: "cabeçalho",
+    footer: "rodapé",
+    document: "documento",
+    toolbar: "barra de ferramentas",
+    overflow: "estouro",
+    history: "histórico",
+    page: "Página {{page}}"
+  },
+  headerFooter: {
+    label: "Cabeçalhos e Rodapés"
+  },
+  sidebar: {
+    close: "Fechar barra lateral"
+  },
+  historyLabels: {
+    typedText: "Texto digitado",
+    pastedContent: "Conteúdo colado",
+    insertedLineBreak: "Quebra de linha inserida",
+    deletedBackward: "Exclusão para trás",
+    deletedForward: "Exclusão para frente",
+    formattedText: "Texto formatado",
+    formattedParagraph: "Parágrafo formatado",
+    editedBody: "Corpo editado",
+    editedHeader: "Cabeçalho editado",
+    editedFooter: "Rodapé editado",
+    clearedDocumentBody: "Corpo do documento limpo",
+    resizedHeader: "Cabeçalho redimensionado",
+    resizedFooter: "Rodapé redimensionado",
+    addedPage: "Página adicionada",
+    removedPage: "Página removida",
+    documentReflow: "Redistribuição do documento",
+    updatedDocument: "Documento atualizado"
+  }
+};
+function deepMerge(target, source) {
+  if (typeof target !== "object" || target === null) {
+    return source ?? target;
+  }
+  const result = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceVal = source[key];
+    const targetVal = target[key];
+    if (sourceVal !== void 0 && typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal) && typeof targetVal === "object" && targetVal !== null) {
+      result[key] = deepMerge(targetVal, sourceVal);
+    } else if (sourceVal !== void 0) {
+      result[key] = sourceVal;
+    }
+  }
+  return result;
+}
+const TranslationsContext = createContext(DEFAULT_TRANSLATIONS);
+function useTranslations() {
+  return useContext(TranslationsContext);
+}
+function interpolate(template, params) {
+  return template.replace(
+    /\{\{(\w+)\}\}/g,
+    (_, key) => String(params[key] ?? `{{${key}}}`)
+  );
+}
+const TranslationsProvider = ({
+  translations,
+  children
+}) => {
+  const merged = useMemo(
+    () => translations ? deepMerge(DEFAULT_TRANSLATIONS, translations) : DEFAULT_TRANSLATIONS,
+    [translations]
+  );
+  return /* @__PURE__ */ jsx(TranslationsContext.Provider, { value: merged, children });
+};
 const HISTORY_RESTORE_SUPPRESSION_MS = 100;
 const HISTORY_BATCH_FLUSH_MS = 16;
 function cloneDocumentSnapshot(document2) {
@@ -524,12 +776,15 @@ function getPageNumber(document2, pageId) {
   const index = document2.pages.findIndex((page) => page.id === pageId);
   return index >= 0 ? index + 1 : null;
 }
-function describeAction(action, document2) {
+function describeAction(action, document2, t) {
+  const pageSuffix = (pageId) => {
+    const num = getPageNumber(document2, pageId);
+    return num ? ` - ${interpolate(t.regions.page, { page: num })}` : "";
+  };
   switch (action.type) {
     case "UPDATE_PAGE_BODY": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Edited body - Page ${pageNumber}` : "Edited body",
+        label: t.historyLabels.editedBody + pageSuffix(action.pageId),
         source: "body",
         pageId: action.pageId,
         region: "body"
@@ -537,9 +792,8 @@ function describeAction(action, document2) {
     }
     case "UPDATE_PAGE_HEADER":
     case "UPDATE_PAGE_HEADER_CONTENT": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Edited header - Page ${pageNumber}` : "Edited header",
+        label: t.historyLabels.editedHeader + pageSuffix(action.pageId),
         source: "header",
         pageId: action.pageId,
         region: "header"
@@ -547,9 +801,8 @@ function describeAction(action, document2) {
     }
     case "UPDATE_PAGE_FOOTER":
     case "UPDATE_PAGE_FOOTER_CONTENT": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Edited footer - Page ${pageNumber}` : "Edited footer",
+        label: t.historyLabels.editedFooter + pageSuffix(action.pageId),
         source: "footer",
         pageId: action.pageId,
         region: "footer"
@@ -557,43 +810,41 @@ function describeAction(action, document2) {
     }
     case "SET_HEADER_FOOTER_ENABLED":
       return {
-        label: action.enabled ? "Enabled headers and footers" : "Disabled headers and footers",
+        label: action.enabled ? t.history.actions.enabledHeadersFooters : t.history.actions.disabledHeadersFooters,
         source: "document",
         region: "document"
       };
     case "SET_PAGE_COUNTER_MODE":
       return {
-        label: `Page counter set to ${action.mode}`,
+        label: interpolate(t.history.actions.pageCounterSet, { value: action.mode }),
         source: "document",
         region: "document"
       };
     case "COPY_HEADER_TO_ALL":
       return {
-        label: "Copied header to all pages",
+        label: t.history.actions.copiedHeaderToAll,
         source: "toolbar",
         pageId: action.sourcePageId,
         region: "header"
       };
     case "COPY_FOOTER_TO_ALL":
       return {
-        label: "Copied footer to all pages",
+        label: t.history.actions.copiedFooterToAll,
         source: "toolbar",
         pageId: action.sourcePageId,
         region: "footer"
       };
     case "CLEAR_HEADER": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Cleared header - Page ${pageNumber}` : "Cleared header",
+        label: t.history.actions.clearedHeader + pageSuffix(action.pageId),
         source: "toolbar",
         pageId: action.pageId,
         region: "header"
       };
     }
     case "CLEAR_FOOTER": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Cleared footer - Page ${pageNumber}` : "Cleared footer",
+        label: t.history.actions.clearedFooter + pageSuffix(action.pageId),
         source: "toolbar",
         pageId: action.pageId,
         region: "footer"
@@ -601,35 +852,33 @@ function describeAction(action, document2) {
     }
     case "CLEAR_ALL_HEADERS":
       return {
-        label: "Cleared all headers",
+        label: t.history.actions.clearedAllHeaders,
         source: "toolbar",
         region: "header"
       };
     case "CLEAR_ALL_FOOTERS":
       return {
-        label: "Cleared all footers",
+        label: t.history.actions.clearedAllFooters,
         source: "toolbar",
         region: "footer"
       };
     case "CLEAR_DOCUMENT_CONTENT":
       return {
-        label: "Cleared document body",
+        label: t.historyLabels.clearedDocumentBody,
         source: "document",
         region: "document"
       };
     case "SET_HEADER_HEIGHT": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Resized header - Page ${pageNumber}` : "Resized header",
+        label: t.historyLabels.resizedHeader + pageSuffix(action.pageId),
         source: "header",
         pageId: action.pageId,
         region: "header"
       };
     }
     case "SET_FOOTER_HEIGHT": {
-      const pageNumber = getPageNumber(document2, action.pageId);
       return {
-        label: pageNumber ? `Resized footer - Page ${pageNumber}` : "Resized footer",
+        label: t.historyLabels.resizedFooter + pageSuffix(action.pageId),
         source: "footer",
         pageId: action.pageId,
         region: "footer"
@@ -637,25 +886,25 @@ function describeAction(action, document2) {
     }
     case "ADD_PAGE":
       return {
-        label: "Added page",
+        label: t.historyLabels.addedPage,
         source: "overflow",
         region: "document"
       };
     case "REMOVE_PAGE":
       return {
-        label: "Removed page",
+        label: t.historyLabels.removedPage,
         source: "overflow",
         region: "document"
       };
     case "SET_DOCUMENT":
       return {
-        label: "Document reflow",
+        label: t.historyLabels.documentReflow,
         source: "overflow",
         region: "document"
       };
     default:
       return {
-        label: "Updated document",
+        label: t.historyLabels.updatedDocument,
         source: "document",
         region: "document"
       };
@@ -682,6 +931,7 @@ const DocumentProvider = ({
   const [globalSelectionActive, setGlobalSelectionActive] = useState(false);
   const [historySidebarOpen, setHistorySidebarOpen] = useState(true);
   const [focusAtEndVersion, setFocusAtEndVersion] = useState(0);
+  const t = useTranslations();
   const activeEditorRef = useRef(null);
   const activeCaretPositionRef = useRef(null);
   const pendingCaretPositionRef = useRef(null);
@@ -875,7 +1125,7 @@ const DocumentProvider = ({
         };
         scheduleHistoryBatchFlush();
       } else {
-        const descriptor = describeAction(action, currentDocument);
+        const descriptor = describeAction(action, currentDocument, t);
         setHistoryState((previousHistory) => {
           const nextHistory = recordHistoryEntry(
             previousHistory,
@@ -1134,20 +1384,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 +1423,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 +1461,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 +1514,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 +1529,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
  *
@@ -1414,123 +1713,17 @@ const __iconNode$1 = [
   ["path", { d: "M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11", key: "f3b9sd" }]
 ];
 const Undo2 = createLucideIcon("undo-2", __iconNode$1);
-/**
- * @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 = [
-  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
-  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
-];
-const X = createLucideIcon("x", __iconNode);
-const DEFAULT_TRANSLATIONS = {
-  toolbar: {
-    undo: "Undo",
-    redo: "Redo",
-    bold: "Bold (Ctrl+B)",
-    italic: "Italic (Ctrl+I)",
-    underline: "Underline (Ctrl+U)",
-    strikethrough: "Strikethrough",
-    alignLeft: "Align Left",
-    alignCenter: "Align Center",
-    alignRight: "Align Right",
-    justify: "Justify",
-    numberedList: "Numbered List",
-    bulletList: "Bullet List",
-    indent: "Indent",
-    outdent: "Outdent",
-    openHistory: "Open History",
-    closeHistory: "Close History"
-  },
-  history: {
-    title: "History",
-    subtitle: "Word-style session history (last 100 actions)",
-    empty: "No history yet.",
-    clearHistory: "Clear History",
-    actions: {
-      enabledHeadersFooters: "Enabled headers and footers",
-      disabledHeadersFooters: "Disabled headers and footers",
-      copiedHeaderToAll: "Copied header to all pages",
-      copiedFooterToAll: "Copied footer to all pages",
-      clearedHeader: "Cleared header",
-      clearedFooter: "Cleared footer",
-      clearedAllHeaders: "Cleared all headers",
-      clearedAllFooters: "Cleared all footers",
-      pageCounterSet: "Page counter set to {{value}}",
-      boldApplied: "Bold applied",
-      italicApplied: "Italic applied",
-      underlineApplied: "Underline applied",
-      strikethroughApplied: "Strikethrough applied",
-      alignedLeft: "Aligned left",
-      alignedCenter: "Aligned center",
-      alignedRight: "Aligned right",
-      justifiedText: "Justified text",
-      insertedNumberedList: "Inserted numbered list",
-      insertedBulletList: "Inserted bullet list",
-      indentedContent: "Indented content",
-      outdentedContent: "Outdented content",
-      fontChanged: "Font changed to {{value}}",
-      fontSizeChanged: "Font size changed to {{value}}pt"
-    }
-  },
-  variables: {
-    title: "Variables",
-    available: "{{count}} available",
-    refreshVariables: "Refresh variables",
-    searchPlaceholder: "Search variables...",
-    noVariablesFound: "No variables found",
-    insertVariable: "Insert variable {{key}}",
-    openPanel: "Open Variables",
-    closePanel: "Close Variables"
-  },
-  header: {
-    placeholder: "Header"
-  },
-  footer: {
-    placeholder: "Footer"
-  },
-  sidebar: {
-    close: "Close sidebar"
-  }
-};
-function deepMerge(target, source) {
-  if (typeof target !== "object" || target === null) {
-    return source ?? target;
-  }
-  const result = { ...target };
-  for (const key of Object.keys(source)) {
-    const sourceVal = source[key];
-    const targetVal = target[key];
-    if (sourceVal !== void 0 && typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal) && typeof targetVal === "object" && targetVal !== null) {
-      result[key] = deepMerge(targetVal, sourceVal);
-    } else if (sourceVal !== void 0) {
-      result[key] = sourceVal;
-    }
-  }
-  return result;
-}
-const TranslationsContext = createContext(DEFAULT_TRANSLATIONS);
-function useTranslations() {
-  return useContext(TranslationsContext);
-}
-function interpolate(template, params) {
-  return template.replace(
-    /\{\{(\w+)\}\}/g,
-    (_, key) => String(params[key] ?? `{{${key}}}`)
-  );
-}
-const TranslationsProvider = ({
-  translations,
-  children
-}) => {
-  const merged = useMemo(
-    () => translations ? deepMerge(DEFAULT_TRANSLATIONS, translations) : DEFAULT_TRANSLATIONS,
-    [translations]
-  );
-  return /* @__PURE__ */ jsx(TranslationsContext.Provider, { value: merged, children });
-};
+/**
+ * @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 = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
 const EditorSidebar = ({
   title,
   subtitle,
@@ -1637,7 +1830,7 @@ const HistorySidebar = () => {
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx("div", { className: `text-xs ${isCurrent ? "font-semibold text-blue-700" : "text-gray-900"}`, children: entry.label }),
-                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-gray-400", children: entry.source })
+                /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-xs text-gray-400", children: t.regions[entry.source] ?? entry.source })
               ] }),
               /* @__PURE__ */ jsx("div", { className: "shrink-0 text-xs text-gray-400", children: formatTimestamp(entry.timestamp) })
             ] })
@@ -1651,13 +1844,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 +1883,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 +1900,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 +2122,10 @@ function useExtensionContext(getDocument, getActiveEditor) {
   }), [getDocument, getActiveEditor, stateRef]);
 }
 const SUPPORTED_FONTS = [
+  "Calibri",
   "Inter",
   "Times New Roman",
   "Arial",
-  "Calibri",
   "Georgia",
   "Courier New"
 ];
@@ -2153,87 +2389,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 +2503,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 })
-          }
-        ) })
-      ] })
+        ] })
+      ]
     }
   );
 };
@@ -2333,6 +2575,19 @@ function mergeEditorStates(stateA, stateB) {
   if (all.length === 0) return null;
   return createEditorStateFromNodes(all);
 }
+function splitBlockNode(block, childOffset) {
+  const children = block.children ?? [];
+  if (childOffset <= 0) return [null, structuredClone(block)];
+  if (childOffset >= children.length) return [structuredClone(block), null];
+  const before = children.slice(0, childOffset);
+  const after = children.slice(childOffset);
+  const makeCopy = (kids) => {
+    const copy = structuredClone(block);
+    copy.children = kids;
+    return copy;
+  };
+  return [makeCopy(before), makeCopy(after)];
+}
 function usePagination(document2, dispatch) {
   const reflowingRef = useRef(false);
   const pendingReflowRef = useRef(false);
@@ -2367,7 +2622,61 @@ function usePagination(document2, dispatch) {
         const footerH = document2.headerFooterEnabled ? page.footerHeight : 0;
         const bodyHeight = computeBodyHeight(headerH, footerH);
         const nodes = getTopLevelNodes(page.bodyState);
-        if (nodes.length <= 1) return;
+        if (nodes.length <= 1) {
+          if (nodes.length === 1) {
+            const singleNode = nodes[0];
+            const children = singleNode.children;
+            if (children && children.length > 1) {
+              const estimatedLineHeight = 24;
+              const maxChildren = Math.max(1, Math.floor(bodyHeight / estimatedLineHeight));
+              if (maxChildren < children.length) {
+                const [keepBlock, overflowBlock] = splitBlockNode(singleNode, maxChildren);
+                if (keepBlock && overflowBlock) {
+                  const keepState2 = createEditorStateFromNodes([keepBlock]);
+                  const overflowState2 = createEditorStateFromNodes([overflowBlock]);
+                  const nextPage2 = pages[pageIndex + 1];
+                  if (nextPage2) {
+                    const mergedBody = mergeEditorStates(overflowState2, nextPage2.bodyState);
+                    dispatch({
+                      type: "SET_DOCUMENT",
+                      document: {
+                        ...document2,
+                        pages: pages.map((p, i) => {
+                          if (i === pageIndex) return { ...p, bodyState: keepState2 };
+                          if (i === pageIndex + 1) return { ...p, bodyState: mergedBody };
+                          return p;
+                        })
+                      }
+                    });
+                  } else {
+                    const newPage = {
+                      ...createPageFromTemplate({
+                        headerState: document2.defaultHeaderState,
+                        footerState: document2.defaultFooterState,
+                        headerHeight: document2.defaultHeaderHeight,
+                        footerHeight: document2.defaultFooterHeight
+                      }),
+                      bodyState: overflowState2
+                    };
+                    dispatch({
+                      type: "SET_DOCUMENT",
+                      document: {
+                        ...document2,
+                        pages: [
+                          ...pages.map(
+                            (p, i) => i === pageIndex ? { ...p, bodyState: keepState2 } : p
+                          ),
+                          newPage
+                        ]
+                      }
+                    });
+                  }
+                }
+              }
+            }
+          }
+          return;
+        }
         const fitCount = estimateNodesFitting(page.bodyState, bodyHeight);
         if (fitCount >= nodes.length) return;
         const [keepState, overflowState] = splitEditorState(page.bodyState, fitCount);
@@ -2531,7 +2840,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",
@@ -2737,6 +3046,213 @@ const ActiveEditorPlugin = ({
   }, [editor, onFocus, pageId, region, setActiveEditor, setActivePageId]);
   return null;
 };
+function findMidBlockSplitPoint(blockElement, availableHeight) {
+  const blockRect = blockElement.getBoundingClientRect();
+  const maxBottom = blockRect.top + availableHeight;
+  const textNodes = [];
+  const walker = document.createTreeWalker(blockElement, NodeFilter.SHOW_TEXT);
+  let walkNode;
+  while (walkNode = walker.nextNode()) {
+    if (walkNode.length > 0) {
+      textNodes.push(walkNode);
+    }
+  }
+  if (textNodes.length === 0) return null;
+  const range = document.createRange();
+  for (const textNode of textNodes) {
+    range.selectNodeContents(textNode);
+    const nodeRect = range.getBoundingClientRect();
+    if (nodeRect.bottom <= maxBottom) {
+      continue;
+    }
+    if (nodeRect.top >= maxBottom) {
+      return backupToWordBoundary(textNode, 0);
+    }
+    let low = 0;
+    let high = textNode.length;
+    while (low < high) {
+      const mid = Math.floor((low + high) / 2);
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, mid + 1);
+      const testRect = range.getBoundingClientRect();
+      if (testRect.bottom > maxBottom) {
+        high = mid;
+      } else {
+        low = mid + 1;
+      }
+    }
+    return backupToWordBoundary(textNode, low);
+  }
+  return null;
+}
+function backupToWordBoundary(textNode, offset) {
+  const text = textNode.textContent || "";
+  if (offset <= 0 || offset >= text.length) {
+    if (offset > 0 && offset < text.length) {
+      return { textNode, offset };
+    }
+    if (offset > 0) return { textNode, offset };
+    return null;
+  }
+  let adjusted = offset;
+  while (adjusted > 0 && !/\s/.test(text[adjusted - 1])) {
+    adjusted--;
+  }
+  if (adjusted <= 0) {
+    adjusted = offset;
+  }
+  return { textNode, offset: adjusted };
+}
+function serializeNodeTree$1(node) {
+  const json = node.exportJSON();
+  if ($isElementNode(node)) {
+    json.children = node.getChildren().map(serializeNodeTree$1);
+  }
+  return json;
+}
+function findListSplitIndex(listElement, availableHeight) {
+  const listRect = listElement.getBoundingClientRect();
+  const maxBottom = listRect.top + availableHeight;
+  const children = Array.from(listElement.children);
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    const childRect = child.getBoundingClientRect();
+    if (childRect.bottom > maxBottom && i > 0) {
+      return i;
+    }
+  }
+  return -1;
+}
+function performMidBlockSplit(rootElement, availableHeight, overflowBlockIndex) {
+  const root = $getRoot();
+  const allChildren = root.getChildren();
+  const blockNode = allChildren[overflowBlockIndex];
+  if (!blockNode || !$isElementNode(blockNode)) {
+    debugWarn("overflow", "target node is not an ElementNode");
+    return null;
+  }
+  const blockElements = Array.from(rootElement.children);
+  const blockElement = blockElements[overflowBlockIndex];
+  if (!blockElement) {
+    debugWarn("overflow", "no DOM element for block index");
+    return null;
+  }
+  const blockTop = blockElement.offsetTop;
+  const heightForBlock = availableHeight - blockTop;
+  if (heightForBlock <= 0) {
+    debugWarn("overflow", "no space for block");
+    return null;
+  }
+  if ($isListNode(blockNode)) {
+    return splitListNode(blockNode, blockElement, heightForBlock);
+  }
+  return splitParagraphNode(blockNode, blockElement, heightForBlock);
+}
+function splitListNode(listNode, listElement, availableHeight) {
+  const splitIndex = findListSplitIndex(listElement, availableHeight);
+  if (splitIndex <= 0) {
+    debug("overflow", "cannot split list — first item exceeds height");
+    return null;
+  }
+  const [, overflowList] = $splitNode(listNode, splitIndex);
+  const overflowNodes = [];
+  const toRemove = [];
+  overflowNodes.push(serializeNodeTree$1(overflowList));
+  toRemove.push(overflowList);
+  let nextSibling = overflowList.getNextSibling();
+  while (nextSibling) {
+    overflowNodes.push(serializeNodeTree$1(nextSibling));
+    toRemove.push(nextSibling);
+    nextSibling = nextSibling.getNextSibling();
+  }
+  for (const node of toRemove) {
+    node.remove();
+  }
+  debug("overflow", `split list at item ${splitIndex}, extracted ${overflowNodes.length} overflow nodes`);
+  return overflowNodes;
+}
+function splitParagraphNode(blockNode, blockElement, availableHeight) {
+  const splitPoint = findMidBlockSplitPoint(blockElement, availableHeight);
+  if (!splitPoint) {
+    debug("overflow", "no valid split point found in paragraph");
+    return null;
+  }
+  const lexicalNode = $getNearestNodeFromDOMNode(splitPoint.textNode);
+  if (!lexicalNode || !$isTextNode(lexicalNode)) {
+    debugWarn("overflow", "could not map DOM text node to Lexical TextNode");
+    return null;
+  }
+  const [, afterText] = lexicalNode.splitText(splitPoint.offset);
+  if (!afterText) {
+    debugWarn("overflow", "splitText returned no second half");
+    return null;
+  }
+  const parent = afterText.getParent();
+  if (!parent || !$isElementNode(parent)) {
+    debugWarn("overflow", "split text has no element parent");
+    return null;
+  }
+  let directChild = afterText;
+  let directChildParent = parent;
+  while (directChildParent && directChildParent.getKey() !== blockNode.getKey()) {
+    directChild = directChildParent;
+    const next = directChildParent.getParent();
+    if (!next || !$isElementNode(next)) {
+      debugWarn("overflow", "could not find block node in parent chain");
+      return null;
+    }
+    directChildParent = next;
+  }
+  const splitChildIndex = blockNode.getChildren().indexOf(directChild);
+  if (splitChildIndex <= 0) {
+    debug("overflow", "split index is 0 or not found — nothing to keep on this page");
+    return null;
+  }
+  if (directChild !== afterText) {
+    let current = parent;
+    let childToSplitAt = afterText;
+    while (current.getKey() !== blockNode.getKey()) {
+      const childIdx = current.getChildren().indexOf(childToSplitAt);
+      if (childIdx > 0) {
+        $splitNode(current, childIdx);
+      }
+      childToSplitAt = current;
+      const next = current.getParent();
+      if (!next || !$isElementNode(next)) break;
+      current = next;
+    }
+  }
+  let finalSplitChild = afterText;
+  let p = afterText.getParent();
+  while (p && p.getKey() !== blockNode.getKey()) {
+    finalSplitChild = p;
+    p = p.getParent();
+  }
+  const finalSplitIndex = blockNode.getChildren().indexOf(finalSplitChild);
+  if (finalSplitIndex <= 0) {
+    debug("overflow", "final split index is 0 or not found — nothing to keep on this page");
+    return null;
+  }
+  const [, overflowBlock] = $splitNode(blockNode, finalSplitIndex);
+  const overflowNodes = [];
+  const toRemove = [];
+  overflowNodes.push(serializeNodeTree$1(overflowBlock));
+  toRemove.push(overflowBlock);
+  let nextSibling = overflowBlock.getNextSibling();
+  while (nextSibling) {
+    overflowNodes.push(serializeNodeTree$1(nextSibling));
+    toRemove.push(nextSibling);
+    nextSibling = nextSibling.getNextSibling();
+  }
+  for (const node of toRemove) {
+    node.remove();
+  }
+  debug(
+    "overflow",
+    `split paragraph at offset ${splitPoint.offset}, extracted ${overflowNodes.length} overflow nodes`
+  );
+  return overflowNodes;
+}
 function serializeNodeTree(node) {
   const json = node.exportJSON();
   if ($isElementNode(node)) {
@@ -2765,18 +3281,51 @@ const OverflowPlugin = ({
       const children = Array.from(rootElement.children);
       if (children.length === 0) return;
       if (children.length <= 1) {
-        debug("overflow", `single block overflows (content=${contentHeight}px > available=${availableHeight}px) — cannot split`);
+        debug("overflow", `single block overflows (content=${contentHeight}px > available=${availableHeight}px) — attempting mid-block split`);
+        processingRef.current = true;
+        editor.update(
+          () => {
+            const overflowNodes = performMidBlockSplit(rootElement, availableHeight, 0);
+            if (!overflowNodes || overflowNodes.length === 0) {
+              debug("overflow", "mid-block split not possible for single block");
+              processingRef.current = false;
+              return;
+            }
+            const overflowState = {
+              root: {
+                children: overflowNodes,
+                direction: null,
+                format: "",
+                indent: 0,
+                type: "root",
+                version: 1
+              }
+            };
+            debug("overflow", `mid-block split extracted ${overflowNodes.length} overflow nodes from single block`);
+            setTimeout(() => {
+              onOverflowRef.current(overflowState, cause);
+              processingRef.current = false;
+            }, 0);
+          },
+          { tag: "overflow-split" }
+        );
         return;
       }
       processingRef.current = true;
       debug("overflow", `OVERFLOW detected: content=${contentHeight}px available=${availableHeight}px children=${children.length}`);
       let splitIndex = children.length;
+      let firstBlockOverflows = false;
       for (let i = 0; i < children.length; i++) {
         const child = children[i];
         const childBottom = child.offsetTop + child.offsetHeight;
-        if (childBottom > availableHeight && i > 0) {
-          splitIndex = i;
-          debug("overflow", `split at index ${i} (childBottom=${childBottom}px > ${availableHeight}px)`);
+        if (childBottom > availableHeight) {
+          if (i === 0) {
+            firstBlockOverflows = true;
+            splitIndex = 1;
+          } else {
+            splitIndex = i;
+          }
+          debug("overflow", `split at index ${i === 0 ? "0 (mid-block)" : i} (childBottom=${childBottom}px > ${availableHeight}px)`);
           break;
         }
       }
@@ -2794,15 +3343,37 @@ const OverflowPlugin = ({
             processingRef.current = false;
             return;
           }
-          const overflowNodes = [];
-          const toRemove = allChildren.slice(splitIndex);
-          for (const node of toRemove) {
-            overflowNodes.push(serializeNodeTree(node));
+          let overflowNodes = [];
+          if (firstBlockOverflows) {
+            const midBlockOverflow = performMidBlockSplit(rootElement, availableHeight, 0);
+            if (midBlockOverflow && midBlockOverflow.length > 0) {
+              overflowNodes.push(...midBlockOverflow);
+              debug("overflow", `mid-block split on first block extracted ${midBlockOverflow.length} nodes`);
+            } else {
+              debug("overflow", "mid-block split failed on first block — keeping it whole");
+            }
+            const freshChildren = root.getChildren();
+            const toRemove = freshChildren.slice(1);
+            for (const node of toRemove) {
+              overflowNodes.push(serializeNodeTree(node));
+            }
+            for (const node of toRemove) {
+              node.remove();
+            }
+          } else {
+            const toRemove = allChildren.slice(splitIndex);
+            for (const node of toRemove) {
+              overflowNodes.push(serializeNodeTree(node));
+            }
+            for (const node of toRemove) {
+              node.remove();
+            }
           }
-          for (const node of toRemove) {
-            node.remove();
+          if (overflowNodes.length === 0) {
+            processingRef.current = false;
+            return;
           }
-          debug("overflow", `extracted ${overflowNodes.length} overflow nodes, kept ${splitIndex} nodes on current page`);
+          debug("overflow", `extracted ${overflowNodes.length} overflow nodes total`);
           const overflowState = {
             root: {
               children: overflowNodes,
@@ -2883,16 +3454,10 @@ const OverflowPlugin = ({
   }, [editor]);
   return null;
 };
-function createPageLabel(region, pageNumber) {
-  if (region === "body") {
-    return pageNumber ? `Page ${pageNumber}` : "Body";
-  }
-  const regionLabel = region.charAt(0).toUpperCase() + region.slice(1);
-  return pageNumber ? `${regionLabel} Page ${pageNumber}` : regionLabel;
-}
 const HistoryCapturePlugin = ({ pageId, region }) => {
   const [editor] = useLexicalComposerContext();
   const { document: document2, queueHistoryAction } = useDocument();
+  const t = useTranslations();
   const context = useMemo(() => {
     const pageNumber = document2.pages.findIndex((page) => page.id === pageId);
     return {
@@ -2900,9 +3465,18 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
       source: region
     };
   }, [document2.pages, pageId, region]);
+  const createPageLabel = useMemo(() => {
+    return (r, pageNumber) => {
+      if (r === "body") {
+        return pageNumber ? interpolate(t.regions.page, { page: pageNumber }) : t.regions.body;
+      }
+      const regionLabel = r === "header" ? t.regions.header : t.regions.footer;
+      return pageNumber ? `${regionLabel} ${interpolate(t.regions.page, { page: pageNumber })}` : regionLabel;
+    };
+  }, [t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -2910,15 +3484,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       CONTROLLED_TEXT_INSERTION_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Typed text"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.typedText));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -2932,15 +3506,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
         if (event.key.length !== 1) {
           return false;
         }
-        queueHistoryAction(buildDescriptor("Typed text"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.typedText));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -2953,15 +3527,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
         if (text.trim().length === 0) {
           return false;
         }
-        queueHistoryAction(buildDescriptor("Pasted content"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.pastedContent));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -2969,15 +3543,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       KEY_ENTER_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Inserted line break"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.insertedLineBreak));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -2985,15 +3559,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       KEY_BACKSPACE_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Deleted backward"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.deletedBackward));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3001,15 +3575,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       KEY_DELETE_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Deleted forward"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.deletedForward));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3017,15 +3591,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       FORMAT_TEXT_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Formatted text"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.formattedText));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3033,12 +3607,12 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       FORMAT_ELEMENT_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Formatted paragraph"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.formattedParagraph));
         return false;
       },
       COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   return null;
 };
 function getCollapsedTextPosition(rootElement) {
@@ -3143,6 +3717,7 @@ const PageBody = ({
   readOnly = false
 }) => {
   const { nodes, bodyPlugins, themeOverrides } = useExtensions();
+  const t = useTranslations();
   const config = useMemo(
     () => {
       var _a, _b;
@@ -3196,7 +3771,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 +3911,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 +3991,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
             }
           ),
@@ -3450,10 +4025,14 @@ const PageView = React.memo(({
   onMoveToNextPage
 }) => {
   const { document: document2, dispatch, setActivePageId } = useDocument();
+  const t = useTranslations();
   const page = document2.pages.find((p) => p.id === pageId);
   const showHeaderFooter = document2.headerFooterEnabled;
   const pageCounterMode = document2.pageCounterMode;
-  const pageCounterLabel = `Page ${pageIndex + 1} of ${document2.pages.length}`;
+  const pageCounterLabel = interpolate(t.pageCounter.format, {
+    current: pageIndex + 1,
+    total: document2.pages.length
+  });
   if (!page) return null;
   const handleBodyChange = useCallback(
     (bodyState) => {
@@ -3544,6 +4123,7 @@ const DocumentView = () => {
     setActiveEditor,
     setActivePageId
   } = useDocument();
+  const t = useTranslations();
   const { handlePageUnderflow, reflowAll } = usePagination(document2, dispatch);
   const previousBodyHeightsRef = useRef(null);
   const pasteOverflowSequenceRef = useRef(false);
@@ -3708,7 +4288,7 @@ const DocumentView = () => {
       }
       runHistoryAction(
         {
-          label: `Deleted backward - Page ${pageIndex + 1}`,
+          label: `${t.historyLabels.deletedBackward} - ${interpolate(t.regions.page, { page: pageIndex + 1 })}`,
           source: "body",
           pageId,
           region: "body"
@@ -3730,7 +4310,7 @@ const DocumentView = () => {
       }
       runHistoryAction(
         {
-          label: `Deleted forward - Page ${pageIndex + 1}`,
+          label: `${t.historyLabels.deletedForward} - ${interpolate(t.regions.page, { page: pageIndex + 1 })}`,
           source: "body",
           pageId,
           region: "body"
@@ -3963,7 +4543,7 @@ const EditorChrome = ({
           }
         ),
         /* @__PURE__ */ jsx(Toolbar, {}),
-        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-700", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-200", children: [
           /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsx(DocumentView, {}) }),
           sidePanels.map((Panel, idx) => /* @__PURE__ */ jsx(Panel, {}, idx)),
           /* @__PURE__ */ jsx(HistorySidebar, {})
@@ -4777,6 +5357,7 @@ export {
   Lex4Editor,
   MAX_FOOTER_HEIGHT_PX,
   MAX_HEADER_HEIGHT_PX,
+  PT_BR_TRANSLATIONS,
   VariableNode,
   astExtension,
   buildSavePayload,