nuvra 0.2.0 → 0.3.0

package/README.md

@@ -1,217 +1,231 @@
-# 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`).
-
-- 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).
-- 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.
-
-## Installation
-
-```sh
-pnpm add nuvra
-# or
-npm install nuvra
-```
-
-`vue` (3.5+) is the only peer dependency.
-
-Import the styles once, for example in `main.ts`:
-
-```ts
-import 'nuvra/style.css';
-```
-
-## Usage
-
-### Document editor
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-import { DocumentEditor, type PageSettings, createPageSettings } from 'nuvra';
-
-const html = ref('');
-const page = ref<PageSettings>(createPageSettings());
-</script>
-
-<template>
-  <DocumentEditor v-model="html" v-model:page="page" height="100%" title="Contract" />
-</template>
-```
-
-### Form field
-
-`Editor` is the same editor in the web view, growing with its content between `minHeight` and `maxHeight`:
-
-```vue
-<script setup lang="ts">
-import { ref } from 'vue';
-import { Editor } from 'nuvra';
-
-const description = ref('');
-</script>
-
-<template>
-  <Editor v-model="description" placeholder="Description" :max-length="2000" />
-</template>
-```
-
-### Image upload
-
-Without an upload handler images are embedded as data URLs. Pass `uploadImage` to store them on your server:
-
-```ts
-import type { DocumentImageUploadHandler } from 'nuvra';
-
-const uploadImage: DocumentImageUploadHandler = async file => {
-  const body = new FormData();
-  body.append('file', file);
-  const response = await fetch('/api/files', { method: 'POST', body });
-  return (await response.json()).url;
-};
-```
-
-## API
-
-### `DocumentEditor` props
-
-| 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.                                       |
-| `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.                                   |
-| `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`. |
-| `minHeight`       | `number \| string`                | `240`    | Smallest height of an auto-height editor.                                  |
-| `maxHeight`       | `number \| string`                | `600`    | Largest height of an auto-height editor.                                   |
-| `maxImageSizeMb`  | `number`                          | `10`     | Largest accepted image file.                                               |
-| `maxLength`       | `number`                          | `0`      | Character limit; `0` means unlimited.                                      |
-| `placeholder`     | `string`                          | `''`     | Text shown while the document is empty.                                    |
-| `title`           | `string`                          | `''`     | Print title and exported file name.                                        |
-| `uploadImage`     | `(file: File) => Promise<string>` | —        | Uploads an image and resolves with its URL.                                |
-
-`Editor` accepts the same props except `v-model:page`, `defaultViewMode`, `height` 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.       |
-
-### 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.                   |
-
-### Keyboard shortcuts
-
-`Ctrl/⌘+B`, `I`, `U` — bold, italic, underline · `Ctrl/⌘+Z`, `Ctrl/⌘+Shift+Z` — undo, redo ·
-`Ctrl/⌘+F` — find · `Ctrl/⌘+H` — replace · `Ctrl/⌘+K` — link · `Ctrl/⌘+P` — print.
-
-## Translations
-
-Built-in labels are in Uzbek. Every label has a key such as `editor.bold`; the full list with default texts is
-exported as `editorMessages`. Register a translator once, before the app mounts. Returning `undefined` keeps the
-built-in text for that key.
-
-```ts
-import { setEditorTranslator } from 'nuvra';
-
-const en: Record<string, string> = {
-  'editor.bold': 'Bold',
-  'editor.status.words': '{count} words'
-};
-
-setEditorTranslator((key, named) =>
-  en[key]?.replace(/\{(\w+)\}/g, (_, name) => String(named?.[name] ?? ''))
-);
-```
-
-With `vue-i18n`, labels follow the active locale:
-
-```ts
-import { setEditorTranslator } from 'nuvra';
-import { i18n } from './i18n';
-
-setEditorTranslator((key, named) => (i18n.global.te(key) ? i18n.global.t(key, named ?? {}) : undefined));
-```
-
-## Theming
-
-Colors come from CSS variables declared on `.document-editor`. Override any of them there, or on an ancestor:
-
-```css
-.document-editor {
-  --nuvra-color-primary: #7c3aed;
-  --nuvra-color-primary-hover: #8b5cf6;
-  --nuvra-color-primary-border: #c4b5fd;
-  --nuvra-color-primary-muted: #ddd6fe;
-  --nuvra-color-primary-soft: #f5f3ff;
-}
-```
-
-| Variable                        | Used for                                             |
-| ------------------------------- | ---------------------------------------------------- |
-| `--nuvra-color-primary`         | Active buttons, focus, primary buttons, selection    |
-| `--nuvra-color-primary-hover`   | Hovered primary buttons                              |
-| `--nuvra-color-primary-border`  | Focused editor frame, disabled primary buttons       |
-| `--nuvra-color-primary-muted`   | Table size preview, hovered button borders           |
-| `--nuvra-color-primary-soft`    | Active button and menu item backgrounds              |
-| `--nuvra-color-on-primary`      | Text on primary buttons                              |
-| `--nuvra-color-danger`          | Destructive actions, character limit reached         |
-| `--nuvra-color-danger-soft`     | Hovered destructive actions                          |
-| `--nuvra-text-strong`           | Headings in forms                                    |
-| `--nuvra-text`                  | Regular text and icons                               |
-| `--nuvra-text-muted`            | Labels, captions, status bar                         |
-| `--nuvra-text-placeholder`      | Placeholders, shortcut hints                         |
-| `--nuvra-text-disabled`         | Disabled buttons                                     |
-| `--nuvra-border`                | Editor frame, inputs                                 |
-| `--nuvra-border-hover`          | Hovered inputs                                       |
-| `--nuvra-border-light`          | Popovers and floating panels                         |
-| `--nuvra-border-lighter`        | Dividers                                             |
-| `--nuvra-fill`                  | Hovered buttons, segmented controls                  |
-| `--nuvra-bg`                    | Toolbar, status bar, inputs                          |
-| `--nuvra-bg-overlay`            | Popovers, menus, find bar                            |
-| `--nuvra-shadow`                | Popovers and floating panels                         |
-| `--nuvra-fullscreen-z-index`    | Stacking order of the fullscreen editor (`2000`)     |
-
-A dark palette is applied when an ancestor (usually `<html>`) has the `dark` class or `data-theme="dark"`.
-
-To follow an Element Plus theme, map the variables to its own:
-
-```css
-.document-editor {
-  --nuvra-color-primary: var(--el-color-primary);
-  --nuvra-color-primary-soft: var(--el-color-primary-light-9);
-  --nuvra-text: var(--el-text-color-regular);
-  --nuvra-border: var(--el-border-color);
-  --nuvra-bg: var(--el-bg-color);
-}
-```
-
-## Browser support
-
-Popovers, menus and bubble toolbars use the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API)
-(Chrome/Edge 114+, Safari 17+, Firefox 125+), which keeps them above dialogs and the fullscreen editor. Older browsers
-show them as fixed elements instead. Search highlighting uses the CSS Custom Highlight API.
-
-## License
-
-[MIT](./LICENSE). Icon shapes come from [Lucide](https://lucide.dev) (ISC).
+# 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`).
+
+**[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).
+- 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
+  Ctrl + wheel zoom.
+- Headers and footers with page number, page count, date and title tokens; printing breaks the pages exactly where
+  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.
+
+## Installation
+
+```sh
+pnpm add nuvra
+# or
+npm install nuvra
+```
+
+`vue` (3.5+) is the only peer dependency.
+
+Import the styles once, for example in `main.ts`:
+
+```ts
+import 'nuvra/style.css';
+```
+
+## Usage
+
+### Document editor
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { DocumentEditor, type PageSettings, createPageSettings } from 'nuvra';
+
+const html = ref('');
+const page = ref<PageSettings>(createPageSettings());
+</script>
+
+<template>
+  <DocumentEditor v-model="html" v-model:page="page" height="100%" title="Contract" />
+</template>
+```
+
+### Form field
+
+`Editor` is the same editor in the web view, growing with its content between `minHeight` and `maxHeight`:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Editor } from 'nuvra';
+
+const description = ref('');
+</script>
+
+<template>
+  <Editor v-model="description" placeholder="Description" :max-length="2000" />
+</template>
+```
+
+### Image upload
+
+Without an upload handler images are embedded as data URLs. Pass `uploadImage` to store them on your server:
+
+```ts
+import type { DocumentImageUploadHandler } from 'nuvra';
+
+const uploadImage: DocumentImageUploadHandler = async file => {
+  const body = new FormData();
+  body.append('file', file);
+  const response = await fetch('/api/files', { method: 'POST', body });
+  return (await response.json()).url;
+};
+```
+
+## API
+
+### `DocumentEditor` props
+
+| 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.                                       |
+| `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.                                   |
+| `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`. |
+| `minHeight`       | `number \| string`                | `240`    | Smallest height of an auto-height editor.                                  |
+| `maxHeight`       | `number \| string`                | `600`    | Largest height of an auto-height editor.                                   |
+| `maxImageSizeMb`  | `number`                          | `10`     | Largest accepted image file.                                               |
+| `maxLength`       | `number`                          | `0`      | Character limit; `0` means unlimited.                                      |
+| `placeholder`     | `string`                          | `''`     | Text shown while the document is empty.                                    |
+| `title`           | `string`                          | `''`     | Print title and exported file name.                                        |
+| `uploadImage`     | `(file: File) => Promise<string>` | —        | Uploads an image and resolves with its URL.                                |
+
+`Editor` accepts the same props except `v-model:page`, `defaultViewMode`, `height` 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.       |
+
+### 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.                   |
+
+### 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.
+
+The full list, with Markdown-like input rules, is in the
+[keyboard shortcuts guide](https://nuvra-docs.vercel.app/docs/keyboard-shortcuts).
+
+## Translations
+
+Built-in labels are in Uzbek. Every label has a key such as `editor.bold`; the full list with default texts is
+exported as `editorMessages`. Register a translator once, before the app mounts. Returning `undefined` keeps the
+built-in text for that key.
+
+```ts
+import { setEditorTranslator } from 'nuvra';
+
+const en: Record<string, string> = {
+  'editor.bold': 'Bold',
+  'editor.status.words': '{count} words'
+};
+
+setEditorTranslator((key, named) =>
+  en[key]?.replace(/\{(\w+)\}/g, (_, name) => String(named?.[name] ?? ''))
+);
+```
+
+With `vue-i18n`, labels follow the active locale:
+
+```ts
+import { setEditorTranslator } from 'nuvra';
+import { i18n } from './i18n';
+
+setEditorTranslator((key, named) => (i18n.global.te(key) ? i18n.global.t(key, named ?? {}) : undefined));
+```
+
+## Theming
+
+Colors come from CSS variables declared on `.document-editor` with zero specificity, so any rule that targets
+`.document-editor` overrides them, whatever order the stylesheets load in. Set them on the editor element itself:
+values on an ancestor such as `body` do not apply, because the editor declares its own.
+
+```css
+.document-editor {
+  --nuvra-color-primary: #7c3aed;
+  --nuvra-color-primary-hover: #8b5cf6;
+  --nuvra-color-primary-border: #c4b5fd;
+  --nuvra-color-primary-muted: #ddd6fe;
+  --nuvra-color-primary-soft: #f5f3ff;
+}
+```
+
+| Variable                        | Used for                                             |
+| ------------------------------- | ---------------------------------------------------- |
+| `--nuvra-color-primary`         | Active buttons, focus, primary buttons, selection    |
+| `--nuvra-color-primary-hover`   | Hovered primary buttons                              |
+| `--nuvra-color-primary-border`  | Focused editor frame, disabled primary buttons       |
+| `--nuvra-color-primary-muted`   | Table size preview, hovered button borders           |
+| `--nuvra-color-primary-soft`    | Active button and menu item backgrounds              |
+| `--nuvra-color-on-primary`      | Text on primary buttons                              |
+| `--nuvra-color-danger`          | Destructive actions, character limit reached         |
+| `--nuvra-color-danger-soft`     | Hovered destructive actions                          |
+| `--nuvra-text-strong`           | Headings in forms                                    |
+| `--nuvra-text`                  | Regular text and icons                               |
+| `--nuvra-text-muted`            | Labels, captions, status bar                         |
+| `--nuvra-text-placeholder`      | Placeholders, shortcut hints                         |
+| `--nuvra-text-disabled`         | Disabled buttons                                     |
+| `--nuvra-border`                | Editor frame, inputs                                 |
+| `--nuvra-border-hover`          | Hovered inputs                                       |
+| `--nuvra-border-light`          | Popovers and floating panels                         |
+| `--nuvra-border-lighter`        | Dividers                                             |
+| `--nuvra-fill`                  | Hovered buttons, segmented controls                  |
+| `--nuvra-bg`                    | Toolbar, status bar, inputs                          |
+| `--nuvra-bg-overlay`            | Popovers, menus, find bar                            |
+| `--nuvra-shadow`                | Popovers and floating panels                         |
+| `--nuvra-fullscreen-z-index`    | Stacking order of the fullscreen editor (`2000`)     |
+
+A dark palette is applied when an ancestor (usually `<html>`) has the `dark` class or `data-theme="dark"`. To change
+dark values separately, target `.dark .document-editor`.
+
+To follow an Element Plus theme, map the variables to its own:
+
+```css
+.document-editor {
+  --nuvra-color-primary: var(--el-color-primary);
+  --nuvra-color-primary-soft: var(--el-color-primary-light-9);
+  --nuvra-text: var(--el-text-color-regular);
+  --nuvra-border: var(--el-border-color);
+  --nuvra-bg: var(--el-bg-color);
+}
+```
+
+## Browser support
+
+Popovers, menus and bubble toolbars use the [Popover API](https://developer.mozilla.org/docs/Web/API/Popover_API)
+(Chrome/Edge 114+, Safari 17+, Firefox 125+), which keeps them above dialogs and the fullscreen editor. Older browsers
+show them as fixed elements instead. Search highlighting uses the CSS Custom Highlight API.
+
+## License
+
+[MIT](./LICENSE). Icon shapes come from [Lucide](https://lucide.dev) (ISC).

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

@@ -26,6 +26,8 @@ interface Props {
     minHeight?: CssSize;
     /** Text shown while the document is empty; falls back to the translated default placeholder. */
     placeholder?: string;
+    /** 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. */
@@ -67,6 +69,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }>, {
     title: string;
     height: CssSize;
+    ruler: boolean;
     placeholder: string;
     disabled: boolean;
     minHeight: CssSize;

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

@@ -1,16 +1,31 @@
+import type { ParagraphIndents } from '../core/engine/blocks';
 import type { DocumentEngine } from '../core/engine/engine';
-import type { DocumentViewMode, PageMetrics } from '../core/page';
+import { type DocumentViewMode, type PageHeaderFooter, type PageMargins, type PageMetrics, type PageWatermark } from '../core/page';
 interface Props {
     /** Grow with the content between the editor's min and max height instead of filling a fixed height. */
     autoHeight: boolean;
+    /** Read-only document: the ruler is shown but cannot be dragged. */
+    disabled: boolean | undefined;
+    /** Document title, used by the `{title}` token of the header and footer. */
+    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;
+    /** 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;
+    /** 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;
 }
@@ -23,8 +38,14 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {
     scrollElement: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     resize: (contentWidth: number) => any;
+    zoom: (delta: number) => any;
+    updateMargins: (margins: Pick<PageMargins, "right" | "left">) => any;
+    updateIndents: (indents: Partial<ParagraphIndents>) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onResize?: ((contentWidth: number) => any) | undefined;
+    onZoom?: ((delta: number) => any) | undefined;
+    onUpdateMargins?: ((margins: Pick<PageMargins, "right" | "left">) => any) | undefined;
+    onUpdateIndents?: ((indents: Partial<ParagraphIndents>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/editor-context-menu.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DocumentEngine } from '../core/engine/engine';
+interface Props {
+    /** A read-only document only offers copying and selecting. */
+    disabled: boolean | undefined;
+    /** Engine the entries act on. */
+    engine: DocumentEngine;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    editLink: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onEditLink?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/editor-header-footer.vue.d.ts

@@ -0,0 +1,12 @@
+import { type PageSettings } from '../core/page';
+interface Props {
+    /** Settings currently applied to the document. */
+    page: PageSettings;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (page: PageSettings) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onChange?: ((page: PageSettings) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { ParagraphIndents } from '../core/engine/blocks';
+import type { PageMargins, PageMetrics } from '../core/page';
+interface Props {
+    /** Read-only documents show the ruler but do not let it be dragged. */
+    disabled: boolean | undefined;
+    /** Indents of the paragraph at the caret, in pixels. */
+    indents: ParagraphIndents;
+    /** Page geometry in pixels. */
+    metrics: PageMetrics;
+    /** Zoom in percent, which the ruler is drawn at. */
+    zoom: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateMargins: (margins: Pick<PageMargins, "right" | "left">) => any;
+    updateIndents: (indents: Partial<ParagraphIndents>) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onUpdateMargins?: ((margins: Pick<PageMargins, "right" | "left">) => any) | undefined;
+    onUpdateIndents?: ((indents: Partial<ParagraphIndents>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,5 +1,5 @@
 import type { DocumentEngine } from '../core/engine/engine';
-import type { PageSettings } from '../core/page';
+import { type PageSettings } from '../core/page';
 import type { DocumentMenuAction } from '../core/types';
 import { type EditorUiState } from '../core/ui-state';
 interface Props {
@@ -11,8 +11,12 @@ interface Props {
     findOpen: boolean;
     /** Whether the editor is in fullscreen, used for the menu item label. */
     fullscreen: boolean;
+    /** Whether the formatting marks (pilcrows) are shown in the document. */
+    marksVisible: boolean;
     /** Current page settings, edited in the page setup popover. */
     page: PageSettings;
+    /** Whether the ruler is shown above the sheet. */
+    rulerVisible: boolean;
     /** Whether the HTML source is shown; formatting controls are disabled meanwhile. */
     sourceMode: boolean;
     /** Formatting at the caret, used for active states and labels. */

package/dist/core/engine/blocks.d.ts

@@ -23,6 +23,31 @@ export declare const setTextAlign: (root: HTMLElement, range: Range, align: Text
 export declare const setLineHeight: (root: HTMLElement, range: Range, lineHeight: string | null) => void;
 /** Sets the writing direction of the selected blocks; `auto` lets each paragraph follow its own text. */
 export declare const setTextDirection: (root: HTMLElement, range: Range, direction: TextDirection) => void;
+/** Side of a paragraph that can keep extra space, as in the paragraph settings of office suites. */
+export type SpacingSide = 'before' | 'after';
+/** Space a block keeps on one side, in points; `0` when it uses the document default. */
+export declare const paragraphSpacing: (block: HTMLElement, side: SpacingSide) => number;
+/**
+ * Sets the space before or after the selected paragraphs, in points; `null` restores the document default. The gap
+ * pagination may have added is dropped, because it is written into the same margin and is recomputed anyway.
+ */
+export declare const setParagraphSpacing: (root: HTMLElement, range: Range, side: SpacingSide, points: number | null) => void;
+/** Paragraph indents in CSS pixels, the exact distances the ruler drags. */
+export interface ParagraphIndents {
+    /** Distance the paragraph keeps from the left text edge. */
+    left: number;
+    /** Distance it keeps from the right text edge. */
+    right: number;
+    /** Extra distance of its first line; a negative value hangs the first line out to the left. */
+    firstLine: number;
+}
+/** Indents of a block; a block without them uses zero. */
+export declare const paragraphIndents: (block: HTMLElement) => ParagraphIndents;
+/**
+ * Sets exact indents on the selected paragraphs; a side left out of `patch` keeps its value. Exact indents replace
+ * the stepped indentation of the toolbar buttons, so the step attribute is dropped with them.
+ */
+export declare const setParagraphIndents: (root: HTMLElement, range: Range, patch: Partial<ParagraphIndents>) => void;
 /**
  * Moves the selected paragraphs outside lists by whole indentation steps.
  * @returns whether any block's indentation changed.