@synopackageland/ui 0.17.9 → 0.17.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.17.10 (2026-10-30)
+
+Breaking, with no compatibility layer: the comment Markdown functions are renamed, `MentionTextarea` is gone, and comment bodies read a little differently. A stored body that relied on the old reading needs a one-time conversion; the library keeps no old names or fallback.
+
+- `commentMarkdownParts` and `commentMarkdownText` are renamed `richTextParts(body, { people, headings })` and `richTextText`, with no alias; `CommentBlock` and `CommentInline` are now `RichTextBlock` and `RichTextInline`. A list item is `{ parts, list? }` instead of an array of parts. Add `richTextFileIds`, the image files a body uses.
+- The restricted Markdown grows: `~~strike~~`, `1. ` numbered lists (from any start), lists two levels deep, `> ` quotes, fenced code (a longer fence holds ``` lines), `## ` and `### ` headings with `headings`, and `![alt](file:ID)` images of stored files (any other address stays as typed). A blank line now starts a new paragraph. A backslash keeps the punctuation after it as typed, and `<`, `>`, `&` and ` ` read as their characters. `**` closes next to CJK punctuation, as in `**「引號」**後面`. Link addresses may hold one level of parentheses. HTML, tables and `---` still show as typed.
+- `CommentItem` renders its body with the new `RichTextView` and takes `files(id)` to show images. Its inner hooks are renamed: `data-ui-comment-mention`, `-link`, `-code` and `-list` are now `data-ui-rich-mention`, `-link`, `-code` and `-list`; paragraphs are `data-ui-rich-paragraph`.
+- Remove `MentionTextarea`, `mentionTokens` and `mentionText`. Comment boxes use the compact `RichTextEditor`.
+- Add the `@synopackageland/ui/rich-text` entry with `RichTextEditor`, a Tiptap 3 editor (MIT parts only) that reads and writes the restricted Markdown, plus `markdownToDoc` and `docToMarkdown`. `variant="full"` has a toolbar that stays at the top and moves what does not fit into More; `variant="compact"` is a comment box that grows from one line, with Markdown as you type, Ctrl/⌘+B, I and K, a toolbar over selected text with a mouse, an "Aa" row of formats (one box at a time, Escape closes it), Ctrl/⌘+Enter or the send button to `submit`, and images under the text. Pasted, dropped and chosen images upload through the app's `upload`; HEIC, HEIF and AVIF are refused with a note, images from other websites are left out with a note, and the box cannot send while an image uploads (`pending`). Tiptap is a dependency loaded only by this entry.
+- Add `RichTextView`, `FileThumbs` (thumbnails and +N), `ImageLightbox` (full-size files with arrow keys and swipes), `UploadQueue` (progress, retry, cancel) with `useUploadQueue`, `MentionList`, `FileItem`, `isPicture` and `isUnsupportedPicture`. `useUiText` is exported for companion entries.
+- `FilePicker` takes pasted files with `paste`: a paste on the picker, or its Paste button where the browser can read the clipboard. A pasted screenshot is named after the time it was pasted.
+- New strings in all nine built-in languages for the editor, the file views and the upload queue.
+
 ## 0.17.9 (2026-10-30)
 
 - A `CommentItem` body with many unmatched `*` or `**` no longer slows down: each line is read in one pass, so a 70,000-character comment of unclosed stars takes milliseconds instead of seconds. What the comment shows is unchanged.

package/README.md

@@ -621,7 +621,7 @@ touch keyboard is open; set `hidden` while a full-screen drawer covers the page.
 </AppLayout>
 ```
 
-### Collaboration: CompletionToggle, MentionTextarea, CommentItem
+### Collaboration: CompletionToggle, CommentItem, rich text and files
 
 `CompletionToggle` is the round done toggle of a task row, card or detail
 header: a `role="checkbox"` with a 44px touch target. Show the new state at
@@ -629,24 +629,58 @@ once, set `pending` while it saves, and on failure put the old state back and
 set `error`. Its click does not reach the row, so it never also opens the item.
 Name it after the item: `label="Done: Send the quote"`.
 
-`MentionTextarea` opens a list of people on `@`. The app owns the people: it
-answers `search` (the text after `@`) by setting `candidates`, and turns
-`filter` off when its server already matched them. A chosen person is written
-`@Label` in the text and kept in `v-model:mentions`; `mentionTokens(text,
-mentions).body` is what to store, with `@[id]` tokens, and `mentionText(body,
-people)` turns a stored body back for editing. With `maxlength` the box counts
-the stored characters near and over the limit; it never cuts text, so disable
-sending while it is over (`data-over`).
-
-`CommentItem` shows one comment: avatar, author, the time as the app formats
-it, and the stored body with its line breaks, mentions as names and http(s)
-links. `edited`, `deleted` and `highlighted` (a one-time flash for a comment
-opened from a notification) cover the rest; edit and delete controls go in
-`#actions`.
+Comments and rich text fields store one restricted Markdown: `**bold**`,
+`*italic*`, `~~strike~~`, `` `code` ``, `[text](https://…)` or `mailto:`,
+`@[id]` mentions, `![alt](file:ID)` images of stored files, `- ` and `1. `
+lists two levels deep, `> ` quotes, fenced code and, in a field, `## ` and
+`### ` headings. A backslash keeps punctuation as typed; HTML, tables and
+`---` always show as typed. `richTextParts(body, { people, headings })` reads it
+into blocks of parts, never HTML; `richTextText` gives plain text for a
+notification or a search; `richTextFileIds` lists the image files a body uses.
+
+`RichTextView` shows a body: mentions as names, safe links, images that keep
+their shape while they load and open in an `ImageLightbox`. The app passes
+`files(id)`, which describes a stored file (`FileItem`: name, type, `thumb`,
+`preview`, `url`, `width`, `height`, `dominant` colour and a `state` of
+`processing`, `missing` or `changed`). `CommentItem` shows one comment with a
+`RichTextView` body: avatar, author, the time as the app formats it; `edited`,
+`deleted` and `highlighted` (a one-time flash for a comment opened from a
+notification) cover the rest; edit and delete controls go in `#actions`.
+
+`RichTextEditor` comes from its own entry, `@synopackageland/ui/rich-text`, so
+an app that only shows rich text never loads Tiptap; load it when an editor
+first opens. Both looks write the same Markdown:
+
+- `variant="full"`, for a rich text field: a toolbar that stays at the top, with
+  what does not fit in a More menu; images sit in the text.
+- `variant="compact"`, for a comment box (as in Slack, Linear and GitHub): one
+  line that grows, Markdown as you type, Ctrl/⌘+B, I and K, a toolbar over
+  selected text with a mouse, and an "Aa" button that opens one row of formats
+  (the only one on a touch screen). Enter starts a line; Ctrl/⌘+Enter or the
+  send button emits `submit`. Images line up under the text, and the box does
+  not send while one uploads.
+
+The editor knows nothing of the server. `upload(file, { signal, onProgress })`
+sends one file and resolves with its id; pasted, dropped and chosen JPEG, PNG,
+WebP and GIF images go through it, and HEIC is refused with a note (the picker
+names its types, so iOS hands over JPEG). `pending` reports images still
+uploading or failed: a form should not save while there are any. `@` opens the
+people in `candidates`; answer `search` and turn `filter` off when the server
+already matched them. With `maxlength` the box counts characters near and over
+the limit and never cuts text.
+
+`FileThumbs` shows a few thumbnails and "+N", `ImageLightbox` shows files full
+size (arrow keys and swipes), and `UploadQueue` lists uploads with progress,
+retry and cancel. `useUploadQueue(upload, { concurrency, retries })` runs the
+uploads it shows. `FilePicker` takes pasted files with `paste`.
 
 ```vue
-<CommentItem v-for="c in comments" :key="c.id" :author="c.author.name" :time="c.when" :body="c.body" :mentions="c.mentions" :edited="!!c.editedAt" :deleted="c.deleted" />
-<MentionTextarea v-model="text" v-model:mentions="mentions" :candidates="people" :filter="false" :maxlength="4000" @search="findPeople" />
+<CommentItem v-for="c in comments" :key="c.id" :author="c.author.name" :time="c.when" :body="c.body" :mentions="people" :files="fileById" :edited="!!c.editedAt" :deleted="c.deleted" />
+<RichTextEditor v-model="text" variant="compact" :candidates="people" :filter="false" :maxlength="4000" :upload="sendFile" :files="fileById" @search="findPeople" @submit="post" />
+```
+
+```ts
+const RichTextEditor = defineAsyncComponent(() => import('@synopackageland/ui/rich-text').then(module => module.RichTextEditor))
 ```
 
 ### Status: StatusDot, StepList, ConnectionTopology

package/dist/components/composite/comment-item/CommentItem.vue.d.ts

@@ -1,4 +1,5 @@
 import { MentionCandidate } from '../../../lib/mentions';
+import { FileItem } from '../../../lib/files';
 type __VLS_Props = {
     author: string;
     /** Keeps the avatar colour stable across renamed accounts. */
@@ -9,10 +10,12 @@ type __VLS_Props = {
     time?: string;
     /** The same time for machines (`<time datetime>`), such as an ISO string. */
     datetime?: string;
-    /** Text with `@[id]` mention tokens and basic Markdown: bold, italic, code, links and `- ` lists. */
+    /** Restricted Markdown with `@[id]` mention tokens and `![alt](file:ID)` images (see `richTextParts`). */
     body?: string;
     /** Names for the mention tokens; an unknown id shows as itself. */
     mentions?: MentionCandidate[];
+    /** The file behind an image's id. */
+    files?: (id: string) => FileItem | undefined;
     edited?: boolean;
     deleted?: boolean;
     highlighted?: boolean;
@@ -30,6 +33,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     time: string;
     avatar: string;
     mentions: MentionCandidate[];
+    files: (id: string) => FileItem | undefined;
     authorId: string;
     datetime: string;
     edited: boolean;

package/dist/components/composite/copy-button/CopyButton.vue.d.ts

@@ -18,11 +18,11 @@ type __VLS_Props = {
     disabled?: boolean;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    copied: (text: string) => any;
     failed: (text: string) => any;
+    copied: (text: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCopied?: ((text: string) => any) | undefined;
     onFailed?: ((text: string) => any) | undefined;
+    onCopied?: ((text: string) => any) | undefined;
 }>, {
     label: string;
     size: "sm" | "md";

package/dist/components/composite/file-picker/FilePicker.vue.d.ts

@@ -15,17 +15,19 @@ type __VLS_Props = {
     directory?: boolean;
     showList?: boolean;
     variant?: 'dropzone' | 'compact';
+    /** Takes files pasted while the picker has focus, and adds a Paste button where the browser can read the clipboard (an iPhone has no keyboard to paste with). */
+    paste?: boolean;
     locale?: UiLocale;
     text?: Partial<FilePickerText>;
     title?: string;
     description?: string;
 };
-declare var __VLS_27: {
+declare var __VLS_53: {
     file: File;
     index: number;
 };
 type __VLS_Slots = {} & {
-    'file-actions'?: (props: typeof __VLS_27) => any;
+    'file-actions'?: (props: typeof __VLS_53) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (files: File[]) => any;
@@ -38,6 +40,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     modelValue: File[];
     multiple: boolean;
+    paste: boolean;
     maxFiles: number;
     maxSize: number;
     directory: boolean;

package/dist/components/composite/file-thumbs/FileThumbs.vue.d.ts

@@ -0,0 +1,24 @@
+import { FileItem } from '../../../lib/files';
+type __VLS_Props = {
+    items: FileItem[];
+    /** Thumbnails shown before "+N"; 0 shows them all. */
+    max?: number;
+    /** `sm` (28px) fits a table row; `md` (64px) a form or a comment box. */
+    size?: 'sm' | 'md';
+    removable?: boolean;
+    lightbox?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: (index: number, item: FileItem) => any;
+    remove: (item: FileItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((index: number, item: FileItem) => any) | undefined;
+    onRemove?: ((item: FileItem) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    max: number;
+    removable: boolean;
+    lightbox: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/image-lightbox/ImageLightbox.vue.d.ts

@@ -0,0 +1,19 @@
+import { FileItem } from '../../../lib/files';
+type __VLS_Props = {
+    items: FileItem[];
+    open?: boolean;
+    /** The file shown, from 0. */
+    index?: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (open: boolean) => any;
+    "update:index": (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((open: boolean) => any) | undefined;
+    "onUpdate:index"?: ((index: number) => any) | undefined;
+}>, {
+    open: boolean;
+    index: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/mention-list/MentionList.vue.d.ts

@@ -0,0 +1,31 @@
+import { MentionCandidate } from '../../../lib/mentions';
+type __VLS_Props = {
+    open: boolean;
+    /** Where the list opens, such as the caret's box. */
+    reference: {
+        getBoundingClientRect: () => DOMRect;
+    } | null;
+    people: readonly MentionCandidate[];
+    active?: number;
+    /** The listbox id; each option is `${id}-${index}`. */
+    id: string;
+    /** Shows "Loading…" while the list is empty. */
+    loading?: boolean;
+    /** An element inside the app, which keeps the list within the app's window. */
+    boundary?: HTMLElement;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    choose: (person: MentionCandidate) => any;
+    close: () => any;
+    hover: (index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onChoose?: ((person: MentionCandidate) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onHover?: ((index: number) => any) | undefined;
+}>, {
+    loading: boolean;
+    active: number;
+    boundary: HTMLElement;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/rich-text-view/RichTextBlocks.vue.d.ts

@@ -0,0 +1,14 @@
+import { RichTextBlock } from '../../../lib/richText';
+import { FileItem } from '../../../lib/files';
+type __VLS_Props = {
+    blocks: RichTextBlock[];
+    file: (id: string, alt: string) => FileItem;
+    imageHeight: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: (id: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/rich-text-view/RichTextImage.vue.d.ts

@@ -0,0 +1,12 @@
+import { FileItem } from '../../../lib/files';
+type __VLS_Props = {
+    item: FileItem;
+    height: number;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOpen?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/rich-text-view/RichTextInline.vue.d.ts

@@ -0,0 +1,23 @@
+import { RichTextInline } from '../../../lib/richText';
+type __VLS_Props = {
+    parts: RichTextInline[];
+};
+declare var __VLS_1: {
+    image: {
+        type: "image";
+        id: string;
+        alt: string;
+    };
+};
+type __VLS_Slots = {} & {
+    image?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/composite/rich-text-view/RichTextView.vue.d.ts

@@ -0,0 +1,28 @@
+import { MentionCandidate } from '../../../lib/mentions';
+import { FileItem } from '../../../lib/files';
+type __VLS_Props = {
+    body?: string;
+    /** Names for the mention tokens; an unknown id shows as itself. */
+    mentions?: MentionCandidate[];
+    /** Reads `## ` and `### ` as headings, as a rich text field does. */
+    headings?: boolean;
+    /** The file behind an image's id; an unknown id shows as missing. */
+    files?: (id: string) => FileItem | undefined;
+    /** Tallest an image is drawn, in px, before it opens full size. */
+    imageHeight?: number;
+    lightbox?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "open-image": (id: string, index: number) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onOpen-image"?: ((id: string, index: number) => any) | undefined;
+}>, {
+    body: string;
+    imageHeight: number;
+    mentions: MentionCandidate[];
+    headings: boolean;
+    files: (id: string) => FileItem | undefined;
+    lightbox: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/upload-queue/UploadQueue.vue.d.ts

@@ -0,0 +1,36 @@
+import { UploadStatus } from '../../../lib/uploadQueue';
+export type UploadQueueItem = {
+    key: string;
+    name: string;
+    size: number;
+    loaded: number;
+    status: UploadStatus;
+    error?: string;
+};
+type __VLS_Props = {
+    tasks: UploadQueueItem[];
+    /** Files the server is still making thumbnails for, added to the summary. */
+    processing?: number;
+    collapsible?: boolean;
+    /** Shows a close button once nothing waits or sends. */
+    closable?: boolean;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    cancel: (key: string) => any;
+    close: () => any;
+    retry: (key: string) => any;
+    retryAll: () => any;
+    cancelAll: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: ((key: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onRetry?: ((key: string) => any) | undefined;
+    onRetryAll?: (() => any) | undefined;
+    onCancelAll?: (() => any) | undefined;
+}>, {
+    collapsible: boolean;
+    closable: boolean;
+    processing: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/composite/wizard/WizardStep.vue.d.ts

@@ -11,11 +11,11 @@ declare const __VLS_base: import('vue').DefineComponent<WizardStepProps, {
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<WizardStepProps> & Readonly<{}>, {
     footer: boolean;
     type: import('./types').WizardStepType;
+    lazy: boolean;
     headline: string;
     nextDisabled: boolean;
     showNext: boolean;
     showBack: boolean;
-    lazy: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/rich-text-editor/RichTextEditor.vue.d.ts

@@ -0,0 +1,83 @@
+import { FileItem, MentionCandidate, UploadFunction } from '../../index';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<{
+    modelValue?: string;
+    variant?: "compact" | "full";
+    /** `## ` and `### ` headings; on by default in `full` only. */
+    headings?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    ariaLabel?: string;
+    /** Characters the stored body may hold; the count shows from 90% and over, and a body over it cannot be sent. */
+    maxlength?: number;
+    /** Images one body may hold: 20 in `compact`, 50 in `full` by default. */
+    maxImages?: number;
+    /** Sends one file and resolves with its stored id; without it the box takes no images. */
+    upload?: UploadFunction<string>;
+    /** The file behind a stored image's id. */
+    files?: (id: string) => FileItem | undefined;
+    /** People to offer for the text typed after `@`. */
+    candidates?: MentionCandidate[];
+    /** Narrows `candidates` by the query here; turn off when the server already did. */
+    filter?: boolean;
+    /** Shows "Loading…" in the list of people while the app fetches. */
+    loading?: boolean;
+    /** `compact` only: the send button shows a spinner and the box cannot send again. */
+    sending?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    search: (query: string) => any;
+    submit: (body: string) => any;
+    pending: (count: number) => any;
+    "update:modelValue": (body: string) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string;
+    variant?: "compact" | "full";
+    /** `## ` and `### ` headings; on by default in `full` only. */
+    headings?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    ariaLabel?: string;
+    /** Characters the stored body may hold; the count shows from 90% and over, and a body over it cannot be sent. */
+    maxlength?: number;
+    /** Images one body may hold: 20 in `compact`, 50 in `full` by default. */
+    maxImages?: number;
+    /** Sends one file and resolves with its stored id; without it the box takes no images. */
+    upload?: UploadFunction<string>;
+    /** The file behind a stored image's id. */
+    files?: (id: string) => FileItem | undefined;
+    /** People to offer for the text typed after `@`. */
+    candidates?: MentionCandidate[];
+    /** Narrows `candidates` by the query here; turn off when the server already did. */
+    filter?: boolean;
+    /** Shows "Loading…" in the list of people while the app fetches. */
+    loading?: boolean;
+    /** `compact` only: the send button shows a spinner and the box cannot send again. */
+    sending?: boolean;
+}> & Readonly<{
+    onSearch?: ((query: string) => any) | undefined;
+    onSubmit?: ((body: string) => any) | undefined;
+    onPending?: ((count: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((body: string) => any) | undefined;
+}>, {
+    filter: boolean;
+    variant: "compact" | "full";
+    loading: boolean;
+    disabled: boolean;
+    id: string;
+    modelValue: string;
+    placeholder: string;
+    invalid: boolean;
+    ariaLabel: string;
+    headings: boolean;
+    files: (id: string) => FileItem | undefined;
+    upload: UploadFunction<string>;
+    maxlength: number;
+    maxImages: number;
+    candidates: MentionCandidate[];
+    sending: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/rich-text-editor/extensions.d.ts

@@ -0,0 +1,30 @@
+import { Node, AnyExtension } from '@tiptap/core';
+import { SuggestionOptions } from '@tiptap/suggestion';
+import { FileItem, MentionCandidate } from '../../index';
+export type ImageView = {
+    /** The file behind a stored image's id. */
+    file: (id: string) => FileItem | undefined;
+    labels: {
+        uploading: string;
+        failed: string;
+        missing: string;
+    };
+};
+/**
+ * An image of a stored file, a block of its own. `id` is the stored file;
+ * `upload` names an image still being sent, drawn from the local `src`, with
+ * its `progress` from 0 to 1, or -1 once it failed.
+ */
+export declare function fileImage(view: ImageView): Node<any, any>;
+export type ExtensionOptions = {
+    headings: boolean;
+    placeholder: string;
+    image: ImageView;
+    mention: Omit<SuggestionOptions<MentionCandidate>, 'editor' | 'char'>;
+    /** Ctrl+Enter or Cmd+Enter; returns whether it was taken. Never while an input method composes. */
+    submit?: () => boolean;
+    /** Ctrl+K or Cmd+K. */
+    link: () => boolean;
+    escape: () => boolean;
+};
+export declare function extensions(options: ExtensionOptions): AnyExtension[];

package/dist/components/rich-text-editor/markdown.d.ts

@@ -0,0 +1,22 @@
+import { JSONContent } from '@tiptap/core';
+import { MentionCandidate } from '../../index';
+export type MarkdownOptions = {
+    people?: readonly MentionCandidate[];
+    headings?: boolean;
+    /** Leaves images out of the document and returns their ids, for a comment box that lists them under the text. */
+    imagesApart?: boolean;
+};
+/** A stored body → the editor's document, and the file ids of its images when `imagesApart`. */
+export declare function markdownToDoc(body: string, options?: MarkdownOptions): {
+    doc: JSONContent;
+    images: {
+        id: string;
+        alt: string;
+    }[];
+};
+export type SerializeOptions = {
+    /** Between top-level blocks: a blank line by default; a comment box uses a single line break. */
+    blockSeparator?: string;
+};
+/** The editor's document → the stored body. Images still uploading (no `id`) are left out. */
+export declare function docToMarkdown(doc: JSONContent, options?: SerializeOptions): string;

package/dist/i18n/filePicker.d.ts

@@ -20,5 +20,8 @@ export type FilePickerText = {
     sizeRejected: string;
     countRejected: string;
     duplicateRejected: string;
+    /** With `paste`: the button that pastes from the clipboard, and what it says when the clipboard holds no file. */
+    paste: string;
+    pasteEmpty: string;
 };
 export declare const filePickerText: Record<UiLocale, FilePickerText>;

package/dist/i18n/text.d.ts

@@ -1,5 +1,53 @@
 import { UiLocale } from './locale';
 export declare const englishUiText: {
+    readonly "{count} failed": "{count} failed";
+    readonly "{name} is not a JPEG, PNG, WebP or GIF image": "{name} is not a JPEG, PNG, WebP or GIF image";
+    readonly "{name}: {kind} images are not supported; on an iPhone, set Settings > Camera > Formats to Most Compatible": "{name}: {kind} images are not supported; on an iPhone, set Settings > Camera > Formats to Most Compatible";
+    readonly "You can add up to {count} images": "You can add up to {count} images";
+    readonly "Add image": "Add image";
+    readonly Bold: "Bold";
+    readonly "Bulleted list": "Bulleted list";
+    readonly "Can't show this file": "Can't show this file";
+    readonly "Cancel {name}": "Cancel {name}";
+    readonly "Cancel all": "Cancel all";
+    readonly "Code block": "Code block";
+    readonly Code: "Code";
+    readonly "File has changed": "File has changed";
+    readonly "File is missing": "File is missing";
+    readonly Formatting: "Formatting";
+    readonly Heading: "Heading";
+    readonly "Hide uploads": "Hide uploads";
+    readonly "Images from other websites are not pasted; save them first and add them as files": "Images from other websites are not pasted; save them first and add them as files";
+    readonly Images: "Images";
+    readonly Italic: "Italic";
+    readonly "Link address": "Link address";
+    readonly Link: "Link";
+    readonly "Links start with http://, https:// or mailto:": "Links start with http://, https:// or mailto:";
+    readonly "Mention someone": "Mention someone";
+    readonly "Next file": "Next file";
+    readonly "Numbered list": "Numbered list";
+    readonly "Open {name}": "Open {name}";
+    readonly "Previous file": "Previous file";
+    readonly "Processing {count}": "Processing {count}";
+    readonly Processing: "Processing";
+    readonly Quote: "Quote";
+    readonly "Remove link": "Remove link";
+    readonly "Retry {name}": "Retry {name}";
+    readonly "Retry all": "Retry all";
+    readonly Send: "Send";
+    readonly Sending: "Sending";
+    readonly "Show all {count} files": "Show all {count} files";
+    readonly "Show uploads": "Show uploads";
+    readonly Strikethrough: "Strikethrough";
+    readonly Subheading: "Subheading";
+    readonly "Upload failed": "Upload failed";
+    readonly "Uploaded {done} of {total}": "Uploaded {done} of {total}";
+    readonly Uploading: "Uploading";
+    readonly Uploads: "Uploads";
+    readonly "Wait for the images to finish uploading": "Wait for the images to finish uploading";
+    readonly Waiting: "Waiting";
+    readonly Uploaded: "Uploaded";
+    readonly Canceled: "Canceled";
     readonly "Opens in a new tab": "Opens in a new tab";
     readonly Download: "Download";
     readonly Close: "Close";

package/dist/index.d.ts

@@ -131,12 +131,21 @@ export { default as StatTile } from './components/composite/stat-tile/StatTile.v
 export type { StatTileTone } from './components/composite/stat-tile/StatTile.vue';
 export { default as StatTileGroup } from './components/composite/stat-tile/StatTileGroup.vue';
 export { default as CompletionToggle } from './components/composite/completion-toggle/CompletionToggle.vue';
-export { default as MentionTextarea } from './components/composite/mention-textarea/MentionTextarea.vue';
 export { default as CommentItem } from './components/composite/comment-item/CommentItem.vue';
-export { mentionParts, mentionText, mentionTokens } from './lib/mentions';
+export { mentionParts } from './lib/mentions';
+export { default as MentionList } from './components/composite/mention-list/MentionList.vue';
 export type { MentionCandidate, MentionPart } from './lib/mentions';
-export { commentMarkdownParts, commentMarkdownText } from './lib/commentMarkdown';
-export type { CommentBlock, CommentInline } from './lib/commentMarkdown';
+export { richTextParts, richTextText, richTextFileIds } from './lib/richText';
+export type { RichTextBlock, RichTextInline, RichTextList, RichTextListItem, RichTextOptions } from './lib/richText';
+export { default as RichTextView } from './components/composite/rich-text-view/RichTextView.vue';
+export { default as FileThumbs } from './components/composite/file-thumbs/FileThumbs.vue';
+export { default as ImageLightbox } from './components/composite/image-lightbox/ImageLightbox.vue';
+export { default as UploadQueue } from './components/composite/upload-queue/UploadQueue.vue';
+export type { UploadQueueItem } from './components/composite/upload-queue/UploadQueue.vue';
+export { useUploadQueue } from './lib/uploadQueue';
+export type { UploadFunction, UploadQueueOptions, UploadStatus, UploadTask } from './lib/uploadQueue';
+export { isPicture, isUnsupportedPicture } from './lib/files';
+export type { FileItem, FileState } from './lib/files';
 export type { DataTableColumn } from './components/composite/data-table/DataTable.vue';
 export { default as DataGrid } from './components/composite/data-grid/DataGrid.vue';
 export type { DataGridColumn, DataGridColumnWidths, DataGridLabels, ResolvedDataGridLabels, DataGridSort, DataGridGroup, DataGridExpandable, DataGridDraggable, DataGridReorder, DataGridCellUpdate, DataGridAdapter, DataGridCellSlotProps } from './components/composite/data-grid/DataGrid.vue';
@@ -246,6 +255,8 @@ export { default as OverflowToolbar } from './components/composite/overflow-tool
 export { computeOverflowFit, ITEM_GAP } from './components/composite/overflow-toolbar/overflow';
 export type { OverflowToolbarItem, OverflowToolbarMenuEntry, OverflowToolbarMoreMenu, OverflowToolbarMoreState, OverflowToolbarMoreText, } from './components/composite/overflow-toolbar/types';
 export type { UiLocale } from './i18n/locale';
+export { useUiText } from './i18n/text';
+export type { UiTextKey } from './i18n/text';
 export { filePickerText } from './i18n/filePicker';
 export type { FilePickerText } from './i18n/filePicker';
 export { default as Link } from './components/primitives/link/Link.vue';