nuvra 0.4.1 → 0.6.0

package/README.md

@@ -1,14 +1,16 @@
 # nuvra
 
 Word-style document editor for Vue 3. A real page view with paper sizes and margins, a lighter web view for
-forms, tables, images, lists, find & replace, HTML source mode, printing and export to HTML or Word (`.doc`).
+forms, tables, images, lists, find & replace, comments, HTML source mode, printing, PDF download, export to HTML and Word
+files (`.docx`) you can open again.
 
 **[Documentation and live demo →](https://nuvra-docs.vercel.app)**
 
 - No editor framework underneath: its own small editing engine with a sanitizing schema.
 - No UI framework either: native HTML controls, built-in SVG icons and plain CSS variables. Vue is the only
   dependency.
-- Pagination in the page view (A4, A5, Letter, …, portrait or landscape).
+- Pagination in the page view (A4, A5, Letter, …, portrait or landscape), with section breaks for landscape pages inside a
+  portrait document.
 - Tables with merge / split, images with resize and alignment, task lists, links, colors, fonts.
 - Undo / redo, keyboard shortcuts that work with non-Latin keyboard layouts, Markdown-like input rules.
 - Office tools: format painter, letter case, paragraph spacing, formatting marks, a right-click menu and
@@ -17,6 +19,13 @@ forms, tables, images, lists, find & replace, HTML source mode, printing and exp
   the editor shows them, and the Word export uses Word's own header, footer and page fields.
 - A ruler above the page for the margins and for the first line, left and right indents of a paragraph.
 - A page watermark such as DRAFT or COPY, drawn behind the text of every page and carried into print, HTML and Word.
+- Real `.docx` export and import, PDF download without the print dialog, multilevel (1.1.1) numbering, a table of
+  contents and a navigation pane with headings and page thumbnails.
+- Footnotes at the bottom of their page, carried into print and Word.
+- Comments with replies, tracked changes that round-trip with Word, a comparison of two versions, and templates
+  filled in as a form.
+- Hooks for editing together: other people's carets and selections, your selection as character positions.
+- A `/` command menu and a toolbar slot for your own commands and buttons.
 
 ## Installation
 
@@ -91,9 +100,13 @@ const uploadImage: DocumentImageUploadHandler = async file => {
 | Prop              | Type                              | Default  | Description                                                                |
 | ----------------- | --------------------------------- | -------- | -------------------------------------------------------------------------- |
 | `v-model`         | `string`                          | `''`     | Document HTML; an empty document is an empty string.                       |
-| `v-model:page`    | `PageSettings`                    | A4       | Paper size, orientation and margins.                                       |
+| `v-model:page`    | `PageSettings`                    | A4       | Paper size, orientation, margins, headers, footers, watermark, numbering.  |
+| `v-model:comments`| `DocumentComment[]`               | —        | Comments; binding it turns the comment tools on.                           |
+| `v-model:trackChanges` | `boolean`                    | `false`  | Records edits as tracked changes.                                          |
+| `author`          | `string`                          | `''`     | Name written on new comments, replies and tracked changes.                 |
 | `autofocus`       | `boolean`                         | `false`  | Places the caret at the end of the document once ready.                    |
 | `canvasPadding`   | `number \| string`                | `50`     | Gray space around the page or web sheet.                                   |
+| `collaborators`   | `Collaborator[]`                  | `[]`     | Other people editing the document; their carets and selections are drawn.  |
 | `defaultViewMode` | `'page' \| 'web'`                 | `'page'` | View shown first.                                                          |
 | `disabled`        | `boolean`                         | `false`  | Read-only document, disabled controls.                                     |
 | `height`          | `number \| string`                | `760`    | Height of the editor, or `'auto'` to grow between `minHeight`/`maxHeight`. |
@@ -103,43 +116,252 @@ const uploadImage: DocumentImageUploadHandler = async file => {
 | `maxImageSizeMb`  | `number`                          | `10`     | Largest accepted image file.                                               |
 | `maxLength`       | `number`                          | `0`      | Character limit; `0` means unlimited.                                      |
 | `placeholder`     | `string`                          | `''`     | Text shown while the document is empty.                                    |
+| `ruler`           | `boolean`                         | `true`   | Shows the ruler in the page view.                                          |
+| `slashCommands`   | `SlashCommand[]`                  | `[]`     | Your own commands, listed first in the `/` menu.                           |
 | `title`           | `string`                          | `''`     | Print title and exported file name.                                        |
 | `uploadImage`     | `(file: File) => Promise<string>` | —        | Uploads an image and resolves with its URL.                                |
+| `variables`       | `TemplateVariable[]`              | `[]`     | Template variables the user can insert.                                    |
 
-`Editor` accepts the same props except `v-model:page`, `defaultViewMode`, `height` and `title`.
+`Editor` accepts the same props except `v-model:page`, `v-model:comments`, `v-model:trackChanges`, `author`,
+`collaborators`, `defaultViewMode`, `height`, `ruler`, `slashCommands` and `title`.
 
 Numbers are pixels; strings are used as CSS lengths (`'100%'`, `'50vh'`).
 
 ### Events
 
-| Event         | Payload          | Description                                       |
-| ------------- | ---------------- | ------------------------------------------------- |
-| `focus`       | —                | The document received focus.                      |
-| `blur`        | —                | The document lost focus; the model is up to date. |
-| `uploadError` | `error: unknown` | An image was rejected or its upload failed.       |
+| Event             | Payload                             | Description                                                    |
+| ----------------- | ----------------------------------- | -------------------------------------------------------------- |
+| `focus`           | —                                   | The document received focus.                                   |
+| `blur`            | —                                   | The document lost focus; the model is up to date.              |
+| `uploadError`     | `error: unknown`                    | An image was rejected or its upload failed.                    |
+| `importError`     | `error: unknown`                    | A Word file could not be read.                                 |
+| `exportError`     | `error: unknown`                    | The PDF could not be drawn; no file is downloaded.             |
+| `selectionChange` | `selection: SelectionOffsets \| null` | The caret or selection moved; `null` when it left the document. |
 
 ### Exposed methods (`DocumentEditor` ref)
 
-| Method         | Description                                                      |
-| -------------- | ---------------------------------------------------------------- |
-| `focus()`      | Moves keyboard focus into the document.                          |
-| `getHTML()`    | Returns the document HTML, including edits not yet in the model. |
-| `print()`      | Opens the browser print dialog.                                  |
-| `exportHtml()` | Downloads the document as an HTML page.                          |
-| `exportWord()` | Downloads the document as a Word-compatible `.doc` file.         |
-| `engine`       | The editing engine, for advanced integrations.                   |
+| Method                    | Description                                                      |
+| ------------------------- | ---------------------------------------------------------------- |
+| `focus()`                 | Moves keyboard focus into the document.                          |
+| `getHTML()`               | Returns the document HTML, including edits not yet in the model. |
+| `insertVariable(name)`    | Inserts a template variable at the selection.                    |
+| `updateTableOfContents()` | Inserts or refreshes the table of contents.                      |
+| `importWord(file)`        | Replaces the document with the content of a `.docx` file.        |
+| `print()`                 | Opens the browser print dialog.                                  |
+| `exportHtml()`            | Downloads the document as an HTML page.                          |
+| `exportWord()`            | Downloads the document as a Word file (`.docx`).                 |
+| `exportPdf()`             | Downloads the document as a PDF drawn from its pages.            |
+| `engine`                  | The editing engine (`DocumentEngine`), for advanced integrations. |
 
 ### Keyboard shortcuts
 
 `Ctrl/⌘+B`, `I`, `U` — bold, italic, underline · `Ctrl/⌘+Shift+H` — highlight · `Ctrl/⌘+Z`, `Ctrl/⌘+Shift+Z` — undo,
-redo · `Ctrl/⌘+F` — find · `Ctrl/⌘+H` — replace · `Ctrl/⌘+K` — link · `Ctrl/⌘+P` — print.
+redo · `Ctrl/⌘+F` — find · `Ctrl/⌘+H` — replace · `Ctrl/⌘+K` — link · `Ctrl/⌘+Alt+M` — comment · `Ctrl/⌘+P` — print.
 
 The full list, with Markdown-like input rules, is in the
 [keyboard shortcuts guide](https://nuvra-docs.vercel.app/docs/keyboard-shortcuts).
 
+## Templates and signatures
+
+Pass `variables` to let users insert template variables with the toolbar's **{ }** menu or by typing `{{name}}`.
+They are saved as `<span data-variable="name">{{name}}</span>`; `fillTemplate` replaces them with escaped values,
+in the browser or on a Node server:
+
+```ts
+import { type TemplateVariable, fillTemplate } from 'nuvra';
+
+const variables: TemplateVariable[] = [
+  { name: 'full_name', label: 'Full name' },
+  { name: 'letter_date', label: 'Letter date' }
+];
+
+const letter = fillTemplate(template, { full_name: 'Aziz Karimov', letter_date: '14.09.2026' });
+```
+
+The pen button inserts a signature block in the editor's language: a signature line, an “Approved” or “Agreed”
+block, or the signatures of both parties of a contract. It is a borderless table, so it prints and exports to Word
+without lines.
+
+The document button inserts ready-made templates (official letter, order, application, certificate, act), and the
+toolbar writes amounts in words (`15 000 000 (o‘n besh million)`), inserts long dates (`2026-yil 14-sentabr`) and
+converts Uzbek text between the Latin and Cyrillic alphabets. The same helpers are exported: `getDocumentTemplate`,
+`numberToWords`, `formatAmountInWords`, `parseAmount`, `formatLongDate` and `transliterate`.
+
+### Filling a template as a form
+
+`DocumentForm` shows a saved template as it will be printed, with an input in place of every variable. Fields of the
+same variable share one value:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { DocumentForm } from 'nuvra';
+
+const values = ref<Record<string, string>>({});
+const form = ref<InstanceType<typeof DocumentForm>>();
+
+const submit = () => {
+  if (form.value?.validate().length) return; // empty fields are marked and focused
+  const html = form.value?.getHTML(); // filled with fillTemplate
+};
+</script>
+
+<template>
+  <DocumentForm ref="form" v-model="values" :template="template" :variables="variables" />
+</template>
+```
+
+## Word files and long documents
+
+"Download as Word (.docx)" in the "More" menu writes a real Office Open XML file with the page setup, headers and
+footers with page fields, the watermark, lists, tables with merged cells, images, footnotes and tracked changes as
+Word revisions. "Open Word file (.docx)" (or `importWord(file)`) loads one into the editor, footnotes and revisions
+included; a file that cannot be read emits `importError`. `buildDocx` and `readDocx` do the same in your own code. A
+document with several sections takes the page setup of its first section, and every further section starts with a
+section break; the content of a different first page header is not imported.
+
+### PDF download
+
+"Download as PDF" in the "More" menu, or `exportPdf()`, saves a PDF without the print dialog. Every sheet is drawn into a
+picture (SVG `foreignObject` → canvas → JPEG) and written into the PDF, so it looks like the printout, but its text
+cannot be selected or searched. Images from servers without CORS are left out, and in the web view the editor switches to
+the page view for the moment of the export. A PDF that cannot be drawn emits `exportError`; printing with "Save as PDF"
+still gives a PDF with real text.
+
+### Pages in different orientations
+
+"Section break: landscape pages" and "Section break: portrait pages" in the insert menu and the `/` menu (or
+`engine.insertSectionBreak('landscape')`) turn the pages after the break; paper size and margins stay, and the break
+starts a new page. It is saved as `<div data-type="section-break" data-orientation="landscape"></div>`. The page view
+draws sheets of different sizes and gives the blocks of a turned section their sheet's text width; printing uses a named
+`@page` for turned sheets, the PDF has turned pages, and the Word export writes every section as a Word section with its
+own orientation.
+
+### Footnotes
+
+"Footnote" in the insert menu or the `/` menu adds a numbered reference and opens a small form for the note; clicking
+a reference edits or deletes it. A footnote is saved in the reference, `<sup data-footnote="note text">1</sup>`, and
+renumbered in document order. The page view draws the notes at the bottom of the sheet the reference is on, the web
+view after the document; printing follows the sheets, and the Word export writes Word footnotes. Notes are plain text.
+From code: `engine.insertFootnote(text)`, `setFootnoteText(element, text)`, `removeFootnote(element)`,
+`getFootnotes()`.
+
+For long documents the toolbar offers multilevel numbering (1., 1.1., 1.1.1., saved as `<ol data-numbering="legal">`),
+a table of contents of the headings with page numbers (saved as `<table data-type="toc">`, refreshed with
+`updateTableOfContents()`), and a navigation pane. `PageSettings` has `differentFirstPage` to hide the header, footer
+and page number on the first page, and `firstPageNumber` for the number printed on it. The navigation pane lists the
+headings or shows page thumbnails; clicking one scrolls to it.
+
+## Comments, tracked changes and comparison
+
+Bind `v-model:comments` to turn comments on. The HTML keeps only the anchors, `<span data-comment="id">`; the
+comments are plain data you store next to the document:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { DocumentEditor, type DocumentComment } from 'nuvra';
+
+const html = ref('');
+const comments = ref<DocumentComment[]>([]);
+
+const save = () =>
+  fetch('/api/documents/42', {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ html: html.value, comments: comments.value })
+  });
+</script>
+
+<template>
+  <DocumentEditor v-model="html" v-model:comments="comments" author="Aziz Karimov" @blur="save" />
+</template>
+```
+
+The comment and change tools are in the **Review** menu of the toolbar. Users select text and choose "Add comment"
+(`Ctrl/⌘+Alt+M`); the "Comments" panel replies, resolves, reopens and deletes them, and flags comments whose text was
+deleted.
+
+### Tracked changes
+
+Bind `v-model:trackChanges` (or choose "Track changes" in the Review menu) to record typing, deleting, cut and paste as tracked changes
+by `author`. They are part of the HTML, `<ins data-change="id" data-author="…" data-time="…">` and `<del …>`, shown
+and printed green-underlined and red-struck. The "Changes" panel accepts or rejects them one by one or all at once;
+from code use `engine.getChanges()`, `engine.resolveChanges(accept, id?)` and `engine.selectChange(id)`. Formatting,
+block changes (headings, lists, tables), Enter and joining paragraphs are not tracked. The Word export writes them as
+revisions and the import reads Word revisions back.
+
+```vue
+<DocumentEditor v-model="html" v-model:track-changes="tracking" author="Aziz Karimov" />
+```
+
+`DocumentCompare` shows what changed between two versions: inserted words in green, deleted words struck through in
+red. Unchanged blocks stay as they are, changed paragraphs are compared word by word, and added or removed blocks are
+shown whole. `compareDocuments(before, after)` returns the same HTML and counts for your own view.
+
+```vue
+<DocumentCompare :before="previousVersion" :after="html" :height="600" />
+```
+
+## Editing together
+
+The editor has hooks for several people on one document; the transport (WebSocket, WebRTC, …) is up to your app.
+`selectionChange` reports your caret or selection as character positions, `collaborators` draws other people's carets
+(with names) and selections, and a new `v-model` value from outside keeps your caret at the same character position.
+The engine also offers `getSelectionOffsets()`, `getOffsetRects(offsets)` and `setContent(html, { keepSelection })`;
+`collaboratorColor` gives the colour a collaborator is drawn in.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { type Collaborator, DocumentEditor, type SelectionOffsets } from 'nuvra';
+
+const html = ref('');
+const collaborators = ref<Collaborator[]>([]); // filled from your socket messages
+
+const sendSelection = (selection: SelectionOffsets | null) =>
+  socket.send(JSON.stringify({ type: 'selection', id: me.id, name: me.name, selection }));
+</script>
+
+<template>
+  <DocumentEditor v-model="html" :collaborators="collaborators" @selection-change="sendSelection" />
+</template>
+```
+
+This is not a CRDT: the document travels as a whole, so when two people type at the same time the document sent last
+wins, and because positions are character offsets, a remote edit before your caret shifts it. A library such as Yjs
+can carry the document and the selections (awareness), but edits are still not merged character by character. See the
+[guide](https://nuvra-docs.vercel.app/docs/collaboration).
+
+## Commands and toolbar buttons
+
+Typing `/` at the start of a line or after a space opens a command menu: headings, lists, table, page and section breaks, footnote,
+table of contents, dates, signature blocks and your variables. `slashCommands` adds your own commands at the top, and the
+`toolbar` slot adds your own buttons:
+
+```vue
+<script setup lang="ts">
+import { DocumentEditor, type SlashCommand } from 'nuvra';
+
+const slashCommands: SlashCommand[] = [
+  { id: 'director', label: 'Director’s name', icon: 'pencil', run: engine => engine.insertText('A. Karimov') }
+];
+</script>
+
+<template>
+  <DocumentEditor v-model="html" :slash-commands="slashCommands">
+    <template #toolbar="{ engine, disabled }">
+      <button type="button" class="doc-tb-button" :disabled="disabled" @mousedown.prevent @click="engine.insertText('✓')">
+        ✓
+      </button>
+    </template>
+  </DocumentEditor>
+</template>
+```
+
 ## Languages
 
-The interface ships in Uzbek (`uz`, the default), English (`en`) and Russian (`ru`). The translations are part of
+The interface ships in Uzbek (`uz`, the default), Uzbek Cyrillic (`uzCyrl`), English (`en`) and Russian (`ru`). The translations are part of
 the package and cannot be changed from outside; an app only picks the language.
 
 For one editor, pass the locale (or just its code) to the `locale` prop:

package/dist/compare.vue.d.ts

@@ -0,0 +1,19 @@
+import { type EditorLocaleInput } from './core/labels';
+import './styles/document-content.css';
+import './styles/editor-ui.css';
+interface Props {
+    /** HTML of the earlier version. */
+    before: string;
+    /** HTML of the later version. */
+    after: string;
+    /** Interface language: a built-in locale or its code; defaults to the app-wide language. */
+    locale?: EditorLocaleInput;
+    /** Height of the component, in pixels or any CSS length; `'auto'` grows with the document. */
+    height?: number | string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    height: number | string;
+    locale: EditorLocaleInput;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/document-editor.vue.d.ts

@@ -1,7 +1,12 @@
+import type { Collaborator, SelectionOffsets } from '../core/collaboration';
+import { type DocumentComment } from '../core/comments';
 import { DocumentEngine } from '../core/engine/engine';
 import { type EditorLocaleInput } from '../core/labels';
 import { type DocumentViewMode, type PageSettings } from '../core/page';
+import type { SlashCommand } from '../core/slash-commands';
+import type { TemplateVariable } from '../core/templates';
 import type { DocumentImageUploadHandler } from '../core/types';
+import { type EditorUiState } from '../core/ui-state';
 import '../styles/document-content.css';
 import '../styles/editor-ui.css';
 /** A CSS length: numbers are pixels, strings are used as written (for example, `'100%'` or `'auto'`). */
@@ -11,6 +16,10 @@ interface Props {
     autofocus?: boolean;
     /** Gray space around the page or web sheet that separates the document from the editor frame. */
     canvasPadding?: CssSize;
+    /** Other people editing the document; their carets and selections are drawn over it. */
+    collaborators?: readonly Collaborator[];
+    /** Name written as the author of new comments, replies and tracked changes. */
+    author?: string;
     /** View shown first; form fields use the lighter web view. */
     defaultViewMode?: DocumentViewMode;
     /** Makes the document read-only and disables every editing control. */
@@ -29,32 +38,59 @@ interface Props {
     minHeight?: CssSize;
     /** Text shown while the document is empty; falls back to the translated default placeholder. */
     placeholder?: string;
+    /** Commands of the host application, listed first in the `/` menu. */
+    slashCommands?: readonly SlashCommand[];
     /** Shows the ruler above the sheet in the page view; users can also toggle it in the document menu. */
     ruler?: boolean;
     /** Used as the print title and the exported file name. */
     title?: string;
     /** Uploads an inserted image and resolves with its URL; without it images are embedded as data URLs. */
     uploadImage?: DocumentImageUploadHandler;
+    /** Template variables the user can insert; typing `{{name}}` of one of them inserts it as well. */
+    variables?: readonly TemplateVariable[];
 }
 type __VLS_Props = Props;
+type __VLS_Slots = {
+    /**
+     * Buttons of the host application, placed at the start of the toolbar's right-hand group. `engine` runs editing
+     * commands, `state` describes the formatting at the caret and `disabled` tells whether editing is possible.
+     */
+    toolbar?: (props: {
+        engine: DocumentEngine;
+        state: EditorUiState;
+        disabled: boolean;
+    }) => unknown;
+};
 type __VLS_ModelProps = {
     /** Document HTML. An empty document is written as an empty string; typing updates it after a short delay. */
     modelValue?: string;
     /** Paper size, orientation, and margins used by the page view, printing, and export. */
     'page'?: PageSettings;
+    /** Whether edits are recorded as tracked changes; the toolbar can switch it. */
+    'trackChanges'?: boolean;
+    /** Comments on the document; binding it turns the comment tools on. The HTML keeps only their anchors. */
+    'comments'?: DocumentComment[] | undefined;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     /** The editing engine, for advanced integrations. */
     engine: import("vue").ShallowRef<DocumentEngine | null, DocumentEngine | null>;
     /** Downloads the document as an HTML page. */
     exportHtml: () => Promise<void>;
     /** Downloads the document as a Word-compatible file. */
     exportWord: () => Promise<void>;
+    /** Downloads the document as a PDF drawn from its pages. */
+    exportPdf: () => Promise<void>;
     /** Moves keyboard focus into the document. */
     focus: () => void | undefined;
     /** Returns the document HTML, including edits not yet written to the model. */
     getHTML: () => string;
+    /** Replaces the document with the content and page setup of a `.docx` file. */
+    importWord: (file: File) => Promise<void>;
+    /** Inserts the chip of a template variable at the selection. */
+    insertVariable: (name: string) => void | undefined;
+    /** Inserts the table of contents at the selection, or refreshes the existing one. */
+    updateTableOfContents: () => Promise<void>;
     /** Opens the print dialog. */
     print: () => Promise<void>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -62,28 +98,48 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     blur: () => any;
     "update:page": (value: PageSettings) => any;
     uploadError: (error: unknown) => any;
+    importError: (error: unknown) => any;
+    exportError: (error: unknown) => any;
+    selectionChange: (selection: SelectionOffsets | null) => any;
     "update:modelValue": (value: string) => any;
+    "update:trackChanges": (value: boolean) => any;
+    "update:comments": (value: DocumentComment[] | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onFocus?: (() => any) | undefined;
     onBlur?: (() => any) | undefined;
     "onUpdate:page"?: ((value: PageSettings) => any) | undefined;
     onUploadError?: ((error: unknown) => any) | undefined;
+    onImportError?: ((error: unknown) => any) | undefined;
+    onExportError?: ((error: unknown) => any) | undefined;
+    onSelectionChange?: ((selection: SelectionOffsets | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:trackChanges"?: ((value: boolean) => any) | undefined;
+    "onUpdate:comments"?: ((value: DocumentComment[] | undefined) => any) | undefined;
 }>, {
     title: string;
     height: CssSize;
+    locale: EditorLocaleInput;
     ruler: boolean;
     placeholder: string;
     disabled: boolean;
     minHeight: CssSize;
-    maxLength: number;
+    collaborators: readonly Collaborator[];
     maxHeight: CssSize;
+    maxLength: number;
+    variables: readonly TemplateVariable[];
+    author: string;
     autofocus: boolean;
     canvasPadding: CssSize;
     defaultViewMode: DocumentViewMode;
-    locale: EditorLocaleInput;
     maxImageSizeMb: number;
+    slashCommands: readonly SlashCommand[];
     uploadImage: DocumentImageUploadHandler;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/editor-canvas.vue.d.ts

@@ -1,6 +1,8 @@
 import type { ParagraphIndents } from '../core/engine/blocks';
 import type { DocumentEngine } from '../core/engine/engine';
-import { type DocumentViewMode, type PageHeaderFooter, type PageMargins, type PageMetrics, type PageWatermark } from '../core/page';
+import { type SheetFootnote } from '../core/footnotes';
+import { type DocumentViewMode, type PageMargins, type PageMetrics, type PageSettings } from '../core/page';
+import { type SheetGeometry } from '../core/pagination';
 interface Props {
     /** Grow with the content between the editor's min and max height instead of filling a fixed height. */
     autoHeight: boolean;
@@ -10,22 +12,22 @@ interface Props {
     documentTitle: string;
     /** Engine working on the editable element; `null` until the parent has created it. */
     engine: DocumentEngine | null;
-    /** Text repeated in the bottom margin of every sheet. */
-    footer?: PageHeaderFooter;
-    /** Text repeated in the top margin of every sheet. */
-    header?: PageHeaderFooter;
+    /** Footnotes of every sheet, drawn at its bottom; the web view shows all of them after the document. */
+    footnotes: SheetFootnote[][];
+    /** Page setup: running texts, watermark and page numbering of every sheet. */
+    page: PageSettings;
     /** Indents of the paragraph at the caret, shown by the ruler. */
     indents: ParagraphIndents;
     /** Page size and margins in pixels. */
     metrics: PageMetrics;
     /** Number of sheets drawn behind the content in page view. */
     pageCount: number;
+    /** Position, size and orientation of every sheet, as laid out by pagination; empty until the first layout. */
+    sheets: readonly SheetGeometry[];
     /** Whether the ruler is drawn above the sheet; it is only ever shown in the page view. */
     rulerVisible: boolean;
     /** Paginated sheets or a single web sheet. */
     viewMode: DocumentViewMode;
-    /** Watermark drawn behind the text of every sheet. */
-    watermark?: PageWatermark;
     /** Zoom in percent. */
     zoom: number;
 }

package/dist/components/editor-changes.vue.d.ts

@@ -0,0 +1,18 @@
+import type { TrackedChange } from '../core/engine/engine';
+interface Props {
+    /** Tracked changes in document order. */
+    changes: readonly TrackedChange[];
+    /** Read-only document: changes can be reviewed but not accepted or rejected. */
+    readonly: boolean | undefined;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => any;
+    close: () => any;
+    resolve: (accept: boolean, id?: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onResolve?: ((accept: boolean, id?: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/editor-collaborators.vue.d.ts

@@ -0,0 +1,17 @@
+import { type Collaborator } from '../core/collaboration';
+import type { DocumentEngine } from '../core/engine/engine';
+interface Props {
+    /** Engine that measures positions in the document. */
+    engine: DocumentEngine;
+    /** People whose carets are drawn. */
+    collaborators: readonly Collaborator[];
+    /** Element the marks are positioned in; it must be positioned itself. */
+    container: HTMLElement;
+    /** Scrolling canvas; marks outside it are hidden. */
+    scrollTarget: HTMLElement;
+    /** Changes whenever the layout may move text (zoom, view mode, page setup), so the marks are measured again. */
+    layoutKey: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/editor-comments.vue.d.ts

@@ -0,0 +1,32 @@
+import type { DocumentComment } from '../core/comments';
+interface Props {
+    /** Comments in document order. */
+    comments: ReadonlyArray<DocumentComment>;
+    /** Ids of the comments whose text is still in the document. */
+    anchored: ReadonlySet<string>;
+    /** Comment at the caret, highlighted in the list. */
+    activeId: string | null;
+    /** Whether the form of a new comment is shown. */
+    drafting: boolean;
+    /** Read-only document: comments can be read but not changed. */
+    readonly: boolean | undefined;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => any;
+    reply: (id: string, text: string) => any;
+    close: () => any;
+    remove: (id: string) => any;
+    resolve: (id: string, resolved: boolean) => any;
+    add: (text: string) => any;
+    cancelDraft: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+    onReply?: ((id: string, text: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onRemove?: ((id: string) => any) | undefined;
+    onResolve?: ((id: string, resolved: boolean) => any) | undefined;
+    onAdd?: ((text: string) => any) | undefined;
+    onCancelDraft?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/editor-footnote-form.vue.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    /** The footnote reference being edited. */
+    reference: HTMLElement;
+    /** Element the form is positioned in; it must be positioned itself. */
+    container: HTMLElement;
+    /** Read-only document: the note is shown but cannot be changed. */
+    readonly: boolean | undefined;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    remove: () => any;
+    save: (text: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onRemove?: (() => any) | undefined;
+    onSave?: ((text: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/editor-outline.vue.d.ts

@@ -0,0 +1,36 @@
+import type { OutlineHeading, OutlineView } from '../core/outline';
+import type { PageMetrics } from '../core/page';
+import type { SheetGeometry } from '../core/pagination';
+interface Props {
+    /** Headings of the document with the page each starts on, `null` outside the page view. */
+    headings: ReadonlyArray<OutlineHeading & {
+        page: number | null;
+    }>;
+    /** Clean HTML of every sheet, shown as page thumbnails; empty outside the page view. */
+    pages: readonly string[];
+    /** Page geometry the thumbnails are scaled from. */
+    metrics: PageMetrics;
+    /** Size of every sheet; a sheet turned by a section break gets a turned thumbnail. */
+    sheets: readonly SheetGeometry[];
+    /** Number printed on the first sheet. */
+    firstPageNumber: number;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** Which list is shown; the editor reads it to lay out thumbnails only while they are visible. */
+    'view'?: OutlineView;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (heading: HTMLElement) => any;
+    close: () => any;
+    selectPage: (index: number) => any;
+    "update:view": (value: OutlineView) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((heading: HTMLElement) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onSelectPage?: ((index: number) => any) | undefined;
+    "onUpdate:view"?: ((value: OutlineView) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;