@yurikilian/lex4 0.2.2 → 0.3.1

package/dist/lex4-editor.cjs

@@ -454,6 +454,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 = React.createContext(DEFAULT_TRANSLATIONS);
+function useTranslations() {
+  return React.useContext(TranslationsContext);
+}
+function interpolate(template, params) {
+  return template.replace(
+    /\{\{(\w+)\}\}/g,
+    (_, key) => String(params[key] ?? `{{${key}}}`)
+  );
+}
+const TranslationsProvider = ({
+  translations,
+  children
+}) => {
+  const merged = React.useMemo(
+    () => translations ? deepMerge(DEFAULT_TRANSLATIONS, translations) : DEFAULT_TRANSLATIONS,
+    [translations]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TranslationsContext.Provider, { value: merged, children });
+};
 const HISTORY_RESTORE_SUPPRESSION_MS = 100;
 const HISTORY_BATCH_FLUSH_MS = 16;
 function cloneDocumentSnapshot(document2) {
@@ -526,12 +778,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"
@@ -539,9 +794,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"
@@ -549,9 +803,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"
@@ -559,43 +812,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"
@@ -603,35 +854,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"
@@ -639,25 +888,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"
       };
@@ -684,6 +933,7 @@ const DocumentProvider = ({
   const [globalSelectionActive, setGlobalSelectionActive] = React.useState(false);
   const [historySidebarOpen, setHistorySidebarOpen] = React.useState(true);
   const [focusAtEndVersion, setFocusAtEndVersion] = React.useState(0);
+  const t = useTranslations();
   const activeEditorRef = React.useRef(null);
   const activeCaretPositionRef = React.useRef(null);
   const pendingCaretPositionRef = React.useRef(null);
@@ -877,7 +1127,7 @@ const DocumentProvider = ({
         };
         scheduleHistoryBatchFlush();
       } else {
-        const descriptor = describeAction(action, currentDocument);
+        const descriptor = describeAction(action, currentDocument, t);
         setHistoryState((previousHistory) => {
           const nextHistory = recordHistoryEntry(
             previousHistory,
@@ -1476,194 +1726,6 @@ const __iconNode = [
   ["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"
-  },
-  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;
-  }
-  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 = React.createContext(DEFAULT_TRANSLATIONS);
-function useTranslations() {
-  return React.useContext(TranslationsContext);
-}
-function interpolate(template, params) {
-  return template.replace(
-    /\{\{(\w+)\}\}/g,
-    (_, key) => String(params[key] ?? `{{${key}}}`)
-  );
-}
-const TranslationsProvider = ({
-  translations,
-  children
-}) => {
-  const merged = React.useMemo(
-    () => translations ? deepMerge(DEFAULT_TRANSLATIONS, translations) : DEFAULT_TRANSLATIONS,
-    [translations]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(TranslationsContext.Provider, { value: merged, children });
-};
 const EditorSidebar = ({
   title,
   subtitle,
@@ -1770,7 +1832,7 @@ const HistorySidebar = () => {
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { className: `text-xs ${isCurrent ? "font-semibold text-blue-700" : "text-gray-900"}`, children: entry.label }),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-gray-400", children: entry.source })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-gray-400", children: t.regions[entry.source] ?? entry.source })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 text-xs text-gray-400", children: formatTimestamp(entry.timestamp) })
             ] })
@@ -2515,6 +2577,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 = React.useRef(false);
   const pendingReflowRef = React.useRef(false);
@@ -2549,7 +2624,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);
@@ -2919,6 +3048,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 (lexical.$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 = lexical.$getRoot();
+  const allChildren = root.getChildren();
+  const blockNode = allChildren[overflowBlockIndex];
+  if (!blockNode || !lexical.$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 (list.$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] = lexical.$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 = lexical.$getNearestNodeFromDOMNode(splitPoint.textNode);
+  if (!lexicalNode || !lexical.$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 || !lexical.$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 || !lexical.$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) {
+        lexical.$splitNode(current, childIdx);
+      }
+      childToSplitAt = current;
+      const next = current.getParent();
+      if (!next || !lexical.$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] = lexical.$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 (lexical.$isElementNode(node)) {
@@ -2947,18 +3283,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;
         }
       }
@@ -2976,15 +3345,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,
@@ -3065,16 +3456,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] = LexicalComposerContext.useLexicalComposerContext();
   const { document: document2, queueHistoryAction } = useDocument();
+  const t = useTranslations();
   const context = React.useMemo(() => {
     const pageNumber = document2.pages.findIndex((page) => page.id === pageId);
     return {
@@ -3082,9 +3467,18 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
       source: region
     };
   }, [document2.pages, pageId, region]);
+  const createPageLabel = React.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]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3092,15 +3486,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       lexical.CONTROLLED_TEXT_INSERTION_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Typed text"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.typedText));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3114,15 +3508,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
         if (event.key.length !== 1) {
           return false;
         }
-        queueHistoryAction(buildDescriptor("Typed text"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.typedText));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3135,15 +3529,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
         if (text.trim().length === 0) {
           return false;
         }
-        queueHistoryAction(buildDescriptor("Pasted content"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.pastedContent));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3151,15 +3545,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       lexical.KEY_ENTER_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Inserted line break"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.insertedLineBreak));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3167,15 +3561,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       lexical.KEY_BACKSPACE_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Deleted backward"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.deletedBackward));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3183,15 +3577,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       lexical.KEY_DELETE_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Deleted forward"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.deletedForward));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3199,15 +3593,15 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       lexical.FORMAT_TEXT_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Formatted text"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.formattedText));
         return false;
       },
       lexical.COMMAND_PRIORITY_LOW
     );
-  }, [context.pageNumber, context.source, editor, pageId, queueHistoryAction, region]);
+  }, [context.pageNumber, context.source, createPageLabel, editor, pageId, queueHistoryAction, region, t]);
   React.useEffect(() => {
-    const buildDescriptor = (prefix) => ({
-      label: `${prefix} - ${createPageLabel(region, context.pageNumber)}`,
+    const buildDescriptor = (label) => ({
+      label: `${label} - ${createPageLabel(region, context.pageNumber)}`,
       source: context.source,
       pageId,
       region
@@ -3215,12 +3609,12 @@ const HistoryCapturePlugin = ({ pageId, region }) => {
     return editor.registerCommand(
       lexical.FORMAT_ELEMENT_COMMAND,
       () => {
-        queueHistoryAction(buildDescriptor("Formatted paragraph"));
+        queueHistoryAction(buildDescriptor(t.historyLabels.formattedParagraph));
         return false;
       },
       lexical.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) {
@@ -3633,10 +4027,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 = React.useCallback(
     (bodyState) => {
@@ -3727,6 +4125,7 @@ const DocumentView = () => {
     setActiveEditor,
     setActivePageId
   } = useDocument();
+  const t = useTranslations();
   const { handlePageUnderflow, reflowAll } = usePagination(document2, dispatch);
   const previousBodyHeightsRef = React.useRef(null);
   const pasteOverflowSequenceRef = React.useRef(false);
@@ -3891,7 +4290,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"
@@ -3913,7 +4312,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"
@@ -4146,7 +4545,7 @@ const EditorChrome = ({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(Toolbar, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-700", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden bg-gray-200", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsx(DocumentView, {}) }),
           sidePanels.map((Panel, idx) => /* @__PURE__ */ jsxRuntime.jsx(Panel, {}, idx)),
           /* @__PURE__ */ jsxRuntime.jsx(HistorySidebar, {})