@tristan2828/ui-foundation 4.27.0 → 4.29.0

package/dist/components/app/milkdown-editor.js

@@ -40,6 +40,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 //   `toolbar={false}`.
 // - `inline`: the field drawn as the text it edits (no border, no box),
 //   for notes that are always editable where they're read.
+// - Images in the text show (`![alt](url)`), at most the field's width.
+//   With `upload`, an image pasted, dropped or picked with the toolbar's
+//   Image button is uploaded through it and goes in as `![](url)`
+//   (rich-text-image-upload.ts); a refusal or a failed upload is a toast.
 import { useEffect, useId, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { defaultValueCtx, Editor, editorViewCtx, editorViewOptionsCtx, parserCtx, remarkStringifyOptionsCtx, rootCtx, schemaCtx, serializerCtx, } from '@milkdown/kit/core';
@@ -52,10 +56,12 @@ import { isInTable, TableMap } from '@milkdown/kit/prose/tables';
 import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
 import { $nodeSchema, $prose, $remark, getMarkdown } from '@milkdown/kit/utils';
 import { cn } from 'cn';
+import { toast } from 'sonner';
 import { Button } from '../ui/button.js';
 import { Field, FieldError, FieldLabel } from '../ui/field.js';
 import { Input } from '../ui/input.js';
 import { Popover, PopoverContent } from '../ui/popover.js';
+import { acceptAttribute } from '../../lib/image-file.js';
 import { linkHref, linkRefusal } from '../../lib/link-href.js';
 import { passEscapeThrough } from './escape-passthrough.js';
 import { calloutHandler, remarkCalloutNodes } from '../../lib/markdown-callout.js';
@@ -64,6 +70,7 @@ import { headingClass } from './prose-look.js';
 import { RichTextFloatingToolbar } from './rich-text-floating-toolbar.js';
 import { tableAt, toggleFormat } from './rich-text-formats.js';
 import { calloutKind, calloutView, tableView } from './rich-text-node-views.js';
+import { droppedFiles, imageUploadPlugin, pastedImages, uploadImages, uploadPlaceholders } from './rich-text-image-upload.js';
 import { handleShortcut } from './rich-text-shortcuts.js';
 import { addRowAtEnd, handleTableKey, runTableAction } from './rich-text-table.js';
 import { applySlash, closeSlash, slashItems, slashOptionId, slashPlugin, slashQuery, } from './rich-text-slash.js';
@@ -109,6 +116,12 @@ const calloutSchema = $nodeSchema('callout', () => ({
         },
     },
 }));
+function emptyImageTitles(node) {
+    if (node.type === 'image' && node.title == null)
+        node.title = '';
+    node.children?.forEach(emptyImageTitles);
+}
+const imageTitles = $remark('imageTitles', () => () => (tree) => emptyImageTitles(tree));
 // Raw HTML pasted in as Milkdown's html chip becomes the plain text it
 // shows, so a paste can never add markup to the Markdown.
 function htmlToText(fragment) {
@@ -240,7 +253,7 @@ function applyLink(view, target, href) {
     }
     view.dispatch(tr.scrollIntoView());
 }
-export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
+export default function MilkdownEditor({ id, defaultValue, onChange, onProblem, readOnly = false, autoFocus = false, placeholder, maxLength, toolbar = true, inline = false, upload, imageAccept, imageMaxSize, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, }) {
     const rootRef = useRef(null);
     const editorRef = useRef(null);
     const [linkBox, setLinkBox] = useState(null);
@@ -271,10 +284,12 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
     // rendered into through a portal.
     const [widgets, setWidgets] = useState([]);
     // The latest props, for the editor's callbacks, which are set up once.
-    const latest = useRef({ onChange, onProblem, readOnly, placeholder });
+    const latest = useRef({ onChange, onProblem, readOnly, placeholder, upload, imageAccept, imageMaxSize });
     useEffect(() => {
-        latest.current = { onChange, onProblem, readOnly, placeholder };
+        latest.current = { onChange, onProblem, readOnly, placeholder, upload, imageAccept, imageMaxSize };
     });
+    // The toolbar's Image button opens this file picker.
+    const imageInputRef = useRef(null);
     // The fixed bar above the text, and the menus over it (the floating
     // toolbar and the slash menu), which `'floating'` keeps on their own.
     const fixedToolbar = toolbar === true;
@@ -407,6 +422,42 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
         openLinkRef.current = openLink;
         // Paste, copy, the editor's own keys and the placeholder.
         const slashing = $prose(() => slashPlugin());
+        // Images pasted or dropped, uploaded through the app's `upload`; with
+        // none given, a paste or drop is left to the handlers after this one,
+        // as if this weren't here.
+        const imageUploads = $prose(() => imageUploadPlugin());
+        const startUploads = (view, files, at) => {
+            const { upload: send, imageAccept: accept, imageMaxSize: maxSize } = latest.current;
+            if (!send)
+                return false;
+            uploadImages(view, files, at, { upload: send, accept, maxSize, onError: (message) => toast.error(message) });
+            return true;
+        };
+        const imageInput = $prose(() => new Plugin({
+            props: {
+                handlePaste: (view, event) => {
+                    if (!latest.current.upload || !view.editable)
+                        return false;
+                    const files = pastedImages(event.clipboardData);
+                    if (files.length === 0)
+                        return false;
+                    event.preventDefault();
+                    return startUploads(view, files, null);
+                },
+                // Files from outside (a text or an image moved within the
+                // editor carries none).
+                handleDrop: (view, event, _slice, moved) => {
+                    if (moved || !latest.current.upload || !view.editable)
+                        return false;
+                    const files = droppedFiles(event.dataTransfer);
+                    if (files.length === 0)
+                        return false;
+                    event.preventDefault();
+                    const at = view.posAtCoords({ left: event.clientX, top: event.clientY })?.pos ?? view.state.selection.from;
+                    return startUploads(view, files, at);
+                },
+            },
+        }));
         const input = $prose((ctx) => new Plugin({
             props: {
                 // Plain text is read as Markdown, so `## Notes` or `**bold**`
@@ -576,9 +627,12 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             .use(gfm)
             .use(calloutRemark)
             .use(calloutSchema)
+            .use(imageTitles)
             .use(history)
             .use(changes)
             .use(slashing)
+            .use(imageUploads)
+            .use(imageInput)
             .use(input);
         void make.create().then((editor) => {
             if (cancelled) {
@@ -617,6 +671,22 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
             view.setProps({ editable: () => !readOnly, attributes: JSON.parse(attributesKey) });
         });
     }, [readOnly, attributesKey]);
+    // The toolbar's Image button: the file picker, then each file picked
+    // uploaded in place of the selection, and focus back in the text.
+    const pickImages = () => imageInputRef.current?.click();
+    const imagesPicked = (files) => {
+        const send = latest.current.upload;
+        if (!editorView || !send || files.length === 0)
+            return;
+        uploadImages(editorView, files, null, {
+            upload: send,
+            accept: imageAccept,
+            maxSize: imageMaxSize,
+            onError: (message) => toast.error(message),
+        });
+        editorView.focus();
+    };
+    const uploading = editorState ? uploadPlaceholders(editorState).length : 0;
     // A toolbar button: its format on the selection, then focus back in the
     // text (Link opens the link box instead, which gives it back on close).
     const runFormat = (format) => {
@@ -709,7 +779,12 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                     'rounded-lg border border-input transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 dark:bg-input/30', !inline && 'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20', className), children: [fixedToolbar && (_jsx(RichTextToolbar, { ref: toolbarRef, state: editorState, readOnly: readOnly, 
                         // Only once the editor is made: until then the editable element,
                         // and its id, aren't in the page (axe: aria-valid-attr-value).
-                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, text: textElement })), _jsx("div", { ref: rootRef, className: cn(!inline && 'min-h-24 px-2.5 py-2', 
+                        controls: editorState ? editableId : undefined, onFormat: runFormat, onTable: runTable, onImage: upload ? pickImages : undefined, text: textElement })), upload && (_jsx("input", { ref: imageInputRef, type: "file", accept: acceptAttribute(imageAccept), multiple: true, hidden: true, tabIndex: -1, onChange: (event) => {
+                            const files = Array.from(event.target.files ?? []);
+                            // Cleared, so picking the same file again still counts.
+                            event.target.value = '';
+                            imagesPicked(files);
+                        } })), _jsx("div", { ref: rootRef, className: cn(!inline && 'min-h-24 px-2.5 py-2', 
                         // Read-only text is muted; the toolbar's buttons say so by being disabled.
                         'has-[[aria-readonly=true]]:text-muted-foreground', 
                         // The same type roles <Markdown> uses, so text reads the same
@@ -724,6 +799,10 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                         // Headings, callouts and tables are drawn by their node views;
                         // these are the elements Milkdown draws itself.
                         '[&_a]:text-link [&_a]:underline [&_a]:decoration-link/40 [&_a]:underline-offset-4', '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-4 [&_blockquote]:text-muted-foreground', '[&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:font-mono', '[&_:not(pre)>code]:rounded [&_:not(pre)>code]:bg-muted [&_:not(pre)>code]:px-1 [&_:not(pre)>code]:font-mono', '[&_hr]:my-2 [&_hr]:h-0.5 [&_hr]:rounded-full [&_hr]:border-0 [&_hr]:bg-rule', '[&_hr.ProseMirror-selectednode]:outline-2 [&_hr.ProseMirror-selectednode]:outline-offset-4 [&_hr.ProseMirror-selectednode]:outline-ring', 
+                        // An image, as <Markdown> shows it: never wider than the field.
+                        // (ProseMirror's own separator images, around an image alone on
+                        // its line, are left alone.)
+                        '[&_img[src]]:inline-block [&_img[src]]:h-auto [&_img[src]]:max-w-full [&_img[src]]:rounded-md [&_img[src]]:align-bottom', '[&_img.ProseMirror-selectednode]:outline-2 [&_img.ProseMirror-selectednode]:outline-offset-2 [&_img.ProseMirror-selectednode]:outline-ring', 
                         // A table: a header row on the muted fill, a line between every
                         // cell, cells that wrap and never shrink to nothing; selected
                         // cells (a drag across them) tinted.
@@ -743,7 +822,7 @@ export default function MilkdownEditor({ id, defaultValue, onChange, onProblem,
                             const next = event.relatedTarget;
                             if (!editorView.dom.contains(next) && !floatingRef.current?.contains(next))
                                 setFocused(false);
-                        } }))] }), showCount && (_jsx("p", { id: counterId, "data-slot": "rich-text-editor-count", className: cn('text-right type-caption tabular-nums', length > maxLength ? 'text-destructive-text' : 'text-muted-foreground'), children: length > maxLength
+                        } }))] }), upload && (_jsx("p", { role: "status", className: "sr-only", children: uploading > 0 ? `Uploading ${uploading === 1 ? 'an image' : `${uploading} images`}…` : '' })), showCount && (_jsx("p", { id: counterId, "data-slot": "rich-text-editor-count", className: cn('text-right type-caption tabular-nums', length > maxLength ? 'text-destructive-text' : 'text-muted-foreground'), children: length > maxLength
                     ? `${(length - maxLength).toLocaleString()} characters over the limit of ${maxLength.toLocaleString()}`
                     : `${length.toLocaleString()} of ${maxLength.toLocaleString()} characters` })), _jsx(Popover, { open: linkBox !== null, onOpenChange: (open) => !open && closeLink(), children: linkBox && (_jsx(LinkForm, { box: linkBox, onApply: (href) => {
                         const editor = editorRef.current;

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

@@ -1,3 +1,4 @@
+import type { ImageUpload } from '../../lib/image-file.js';
 export type RichTextEditorProps = {
     /** The editable element's id, for a label's `htmlFor` or a test. */
     id?: string;
@@ -36,6 +37,21 @@ export type RichTextEditorProps = {
      * `placeholder`, which is all an empty one shows.
      */
     inline?: boolean;
+    /**
+     * Images uploaded into the text: pasted, dropped, or picked with an
+     * Image button on the fixed toolbar. Each file goes through this (the
+     * app's own storage: the package knows no endpoint) and goes in as
+     * `![](url)`, from the result's `url`, else its `thumbUrl`. A
+     * placeholder shows where it will go while it uploads (it isn't saved);
+     * a refused file or a failed upload takes it away and says why in a
+     * toast. Without it, the editor handles no files: a paste or drop does
+     * what it always did.
+     */
+    upload?: ImageUpload;
+    /** The image types `upload` takes. Defaults to JPEG, PNG and WebP (`DEFAULT_IMAGE_TYPES`). */
+    imageAccept?: readonly string[];
+    /** The largest image `upload` takes, in bytes: a bigger one is refused before it's sent, with its size and the limit. */
+    imageMaxSize?: number;
     className?: string;
     /** The field's label. A rich-text area must have one: this, or `aria-labelledby`. */
     'aria-label'?: string;

package/dist/components/app/rich-text-editor.js

@@ -13,6 +13,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Raw HTML in the text shows as its characters, as <Markdown> shows it,
 // and nothing pasted or typed can add markup.
 //
+// Images in the text (`![alt](url)`) show, at most the field's width.
+// With `upload`, an image pasted, dropped or picked with the toolbar's
+// Image button is uploaded through the app's own storage and goes in as
+// `![](url)`; while it uploads, a placeholder shows where it will go.
+//
 // The editor (Milkdown) is loaded on first use, so a page that only reads
 // Markdown never downloads it. Until it arrives, a placeholder the size of
 // the field shows.

package/dist/components/app/rich-text-image-upload.d.ts

@@ -0,0 +1,42 @@
+import { Plugin, type EditorState, type Transaction } from '@milkdown/kit/prose/state';
+import { DecorationSet } from '@milkdown/kit/prose/view';
+import { type ImageFileRules, type ImageUpload } from '../../lib/image-file.js';
+/** The plugin that holds and draws the placeholders. */
+export declare function imageUploadPlugin(): Plugin<DecorationSet>;
+/** The uploads in flight: each placeholder's file name and where it is now, in document order. */
+export declare function uploadPlaceholders(state: EditorState): {
+    id: number;
+    name: string;
+    pos: number;
+}[];
+export type UploadTarget = {
+    readonly state: EditorState;
+    dispatch: (tr: Transaction) => void;
+    readonly isDestroyed?: boolean;
+};
+export type ImageUploadOptions = ImageFileRules & {
+    upload: ImageUpload;
+    /** A file refused before upload (its type, its size), or an upload that failed: why. */
+    onError: (message: string) => void;
+};
+/**
+ * Uploads `files` and inserts each as an image: at `at` (a drop's
+ * position), or with `at` null in place of the selection (a paste, the
+ * toolbar's button). A file refused by type or size never starts; each
+ * refusal's reason goes to `onError`. Returns whether any upload started.
+ */
+export declare function uploadImages(target: UploadTarget, files: readonly File[], at: number | null, options: ImageUploadOptions): boolean;
+type TransferLike = {
+    files?: ArrayLike<File> | null;
+    getData?: (type: string) => string;
+} | null;
+/**
+ * The files a paste uploads: its files, unless it also carries HTML with
+ * words in it. An office app copies a picture of the selection along with
+ * its text, and that paste is the text. A screenshot, or an image copied
+ * from a page (its HTML just the `<img>`), uploads.
+ */
+export declare function pastedImages(data: TransferLike): File[];
+/** The files a drop uploads: every file dropped from outside the editor. */
+export declare function droppedFiles(data: TransferLike): File[];
+export {};

package/dist/components/app/rich-text-image-upload.js

@@ -0,0 +1,174 @@
+// Images uploaded into the rich-text editor: pasted, dropped, or picked
+// from the toolbar's Image button, each sent through the app's `upload`
+// and inserted as `![](url)` where it was put. Only with `upload` given
+// (RichTextEditor's prop): without it, the editor handles none of this.
+//
+// While a file uploads, a placeholder ("Uploading photo.jpg…") shows where
+// it will go. The placeholder is a decoration, not part of the document:
+// nothing is saved for it, and an autosave mid-upload saves the text as
+// it is. It moves with the text around it, and what's typed at the caret
+// meanwhile goes after it, as if the image were already there; when the
+// upload resolves, the image goes in where it is now and the placeholder
+// goes. If the upload fails, the placeholder goes and `onError` gets the
+// reason; if the text around it was deleted meanwhile, the image is
+// dropped.
+//
+// Several files upload at once and go in in the order they came, each
+// waiting for the one before it to land or fail.
+//
+// React-free and DOM-free (but the placeholder's element, made only when
+// the view draws it), so its rules are unit tested in node
+// (tests/rich-text-image-upload.test.ts).
+import { Fragment, Slice } from '@milkdown/kit/prose/model';
+import { Plugin, PluginKey } from '@milkdown/kit/prose/state';
+import { dropPoint } from '@milkdown/kit/prose/transform';
+import { Decoration, DecorationSet } from '@milkdown/kit/prose/view';
+import { imageRefusal, uploadFailure } from '../../lib/image-file.js';
+const uploadKey = new PluginKey('rich-text-image-upload');
+// The placeholder's element: a muted chip with a spinner, never editable.
+function placeholderElement(name) {
+    const chip = document.createElement('span');
+    chip.contentEditable = 'false';
+    chip.dataset.slot = 'rich-text-image-upload';
+    chip.className =
+        'mx-0.5 inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-0.5 align-middle type-caption text-foreground';
+    const spinner = document.createElement('span');
+    spinner.setAttribute('aria-hidden', 'true');
+    spinner.className = 'inline-block size-3 animate-spin rounded-full border-2 border-current border-r-transparent';
+    chip.append(spinner, `Uploading ${name}…`);
+    return chip;
+}
+// A placeholder's decoration. `side: -1`: text typed at its spot goes
+// after it, where the image will be.
+function placeholder({ id, name, pos }) {
+    return Decoration.widget(pos, () => placeholderElement(name), { id, name, key: `upload-${id}`, side: -1 });
+}
+/** The plugin that holds and draws the placeholders. */
+export function imageUploadPlugin() {
+    return new Plugin({
+        key: uploadKey,
+        state: {
+            init: () => DecorationSet.empty,
+            apply: (tr, set) => {
+                const mapped = set.map(tr.mapping, tr.doc);
+                const action = tr.getMeta(uploadKey);
+                if (!action)
+                    return mapped;
+                if ('add' in action)
+                    return mapped.add(tr.doc, action.add.map(placeholder));
+                const id = 'remove' in action ? action.remove : action.land;
+                const rest = mapped.remove(mapped.find(undefined, undefined, (spec) => spec.id === id));
+                if ('remove' in action)
+                    return rest;
+                const at = tr.mapping.map(action.at, -1);
+                const waiting = rest.find(at, at).filter((decoration) => decoration.from === at);
+                // Made before `remove`, which empties the array it's given.
+                const moved = waiting.map((decoration) => placeholder({ ...decoration.spec, pos: action.after }));
+                return rest.remove(waiting).add(tr.doc, moved);
+            },
+        },
+        props: {
+            decorations: (state) => uploadKey.getState(state),
+        },
+    });
+}
+/** The uploads in flight: each placeholder's file name and where it is now, in document order. */
+export function uploadPlaceholders(state) {
+    const set = uploadKey.getState(state);
+    if (!set)
+        return [];
+    return set
+        .find()
+        .map((decoration) => ({ id: decoration.spec.id, name: decoration.spec.name, pos: decoration.from }))
+        .sort((a, b) => a.pos - b.pos);
+}
+function placeholderAt(state, id) {
+    return uploadPlaceholders(state).find((placeholder) => placeholder.id === id)?.pos ?? null;
+}
+function imageNode(state, src) {
+    return state.schema.nodes.image.create({ src, alt: '', title: '' });
+}
+// Where an image put at `pos` can go: `pos` itself in text, else the
+// nearest place that takes inline content (between two blocks, a new
+// paragraph there).
+function insertPoint(doc, pos, image) {
+    return dropPoint(doc, pos, new Slice(Fragment.from(image), 0, 0)) ?? pos;
+}
+let nextId = 0;
+/**
+ * Uploads `files` and inserts each as an image: at `at` (a drop's
+ * position), or with `at` null in place of the selection (a paste, the
+ * toolbar's button). A file refused by type or size never starts; each
+ * refusal's reason goes to `onError`. Returns whether any upload started.
+ */
+export function uploadImages(target, files, at, options) {
+    const accepted = [];
+    for (const file of files) {
+        const refusal = imageRefusal(file, options);
+        if (refusal)
+            options.onError(refusal);
+        else
+            accepted.push(file);
+    }
+    if (accepted.length === 0)
+        return false;
+    const tr = target.state.tr;
+    if (at === null && !tr.selection.empty)
+        tr.deleteSelection();
+    const pos = insertPoint(tr.doc, at ?? tr.selection.from, imageNode(target.state, ''));
+    const uploads = accepted.map((file) => ({ id: ++nextId, file }));
+    target.dispatch(tr.setMeta(uploadKey, { add: uploads.map(({ id, file }) => ({ id, name: file.name || 'image', pos })) }));
+    const settle = (id, outcome) => {
+        if (target.isDestroyed)
+            return;
+        const placeholder = placeholderAt(target.state, id);
+        if (placeholder === null)
+            return;
+        const next = target.state.tr;
+        if ('src' in outcome) {
+            const image = imageNode(target.state, outcome.src);
+            const where = insertPoint(next.doc, placeholder, image);
+            next.replaceWith(where, where, image);
+            next.setMeta(uploadKey, { land: id, at: placeholder, after: next.mapping.map(where, -1) + image.nodeSize });
+        }
+        else {
+            next.setMeta(uploadKey, { remove: id });
+            options.onError(uploadFailure(outcome.error));
+        }
+        target.dispatch(next);
+    };
+    // Every upload starts now; each lands after the one before it.
+    let previous = Promise.resolve();
+    for (const { id, file } of uploads) {
+        const outcome = new Promise((resolve) => resolve(options.upload(file).then((result) => ({ src: result.url ?? result.thumbUrl })))).catch((error) => ({ error }));
+        previous = previous.then(() => outcome).then((result) => settle(id, result));
+    }
+    return true;
+}
+// Whether pasted HTML has words in it, not just an image. Style and
+// script blocks and comments aren't words.
+function htmlHasText(html) {
+    const text = html
+        .replace(/<(style|script)\b[\s\S]*?<\/\1>/gi, '')
+        .replace(/<!--[\s\S]*?-->/g, '')
+        .replace(/<[^>]*>/g, '')
+        .replace(/&nbsp;|&#160;/g, ' ');
+    return text.trim().length > 0;
+}
+/**
+ * The files a paste uploads: its files, unless it also carries HTML with
+ * words in it. An office app copies a picture of the selection along with
+ * its text, and that paste is the text. A screenshot, or an image copied
+ * from a page (its HTML just the `<img>`), uploads.
+ */
+export function pastedImages(data) {
+    const files = Array.from(data?.files ?? []);
+    if (files.length === 0)
+        return [];
+    const html = data?.getData?.('text/html') ?? '';
+    return html && htmlHasText(html) ? [] : files;
+}
+/** The files a drop uploads: every file dropped from outside the editor. */
+export function droppedFiles(data) {
+    return Array.from(data?.files ?? []);
+}

package/dist/components/app/rich-text-toolbar.d.ts

@@ -17,10 +17,12 @@ export type FormatButtonsProps = {
     onFormat: (id: FormatId) => void;
     /** A Table menu item picked (only the fixed toolbar has the menu). */
     onTable?: (action: TableAction) => void;
+    /** The Image button pressed: pick images to upload. No button without it. */
+    onImage?: () => void;
     /** The editable element, for the Table menu to give focus back to. */
     text?: () => HTMLElement | null;
 };
-export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, text }: FormatButtonsProps): import("react").JSX.Element;
+export declare function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, text }: FormatButtonsProps): import("react").JSX.Element;
 export interface RichTextToolbarProps {
     /** The editor's state now, to show which formats are on. Null until it's made. */
     state: EditorState | null;
@@ -31,10 +33,12 @@ export interface RichTextToolbarProps {
     onFormat: (id: FormatId) => void;
     /** A Table menu item picked: run it on the editor and give it focus back. */
     onTable: (action: TableAction) => void;
+    /** The Image button pressed (only when the editor uploads images). */
+    onImage?: () => void;
     /** The editable element, for the Table menu to give focus back to. */
     text: () => HTMLElement | null;
     /** The toolbar's element, for Alt+F10 to reach it from the text. */
     ref?: Ref<HTMLDivElement>;
 }
-export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
+export declare function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, text, ref }: RichTextToolbarProps): import("react").JSX.Element;
 export {};

package/dist/components/app/rich-text-toolbar.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // The rich-text editor's fixed toolbar: one row of pressed/not-pressed
-// buttons above the text, each a format and its keyboard shortcut, and a
-// Table menu (rich-text-table-menu.tsx).
+// buttons above the text, each a format and its keyboard shortcut, a
+// Table menu (rich-text-table-menu.tsx), and, when the editor uploads
+// images, an Image button (a plain button: it opens the file picker).
 //
 // - One tab stop (ARIA's toolbar pattern): Tab reaches the last button
 //   used, the arrow keys, Home and End move along the row.
@@ -14,6 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // - Alt+F10 in the text reaches it (the floating toolbar first, when it's
 //   showing: rich-text-floating-toolbar.tsx).
 import { Fragment, useRef, useState } from 'react';
+import { ImageIcon } from 'lucide-react';
+import { Button } from '../ui/button.js';
 import { Separator } from '../ui/separator.js';
 import { Toggle } from '../ui/toggle.js';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip.js';
@@ -31,15 +34,18 @@ const SETS = {
 // A toolbar's row of buttons: one tab stop, the last one used (ARIA's
 // toolbar pattern); the arrow keys, Home and End move along the row. The
 // toolbar's element (`role="toolbar"`, its name) is the caller's.
-export function FormatButtons({ formats, state, readOnly, onFormat, onTable, text = () => null }) {
+export function FormatButtons({ formats, state, readOnly, onFormat, onTable, onImage, text = () => null }) {
     const apple = isApple();
     const groups = SETS[formats];
     const items = groups.flat();
+    // The Image button, last in the row, after the formats.
+    const imageIndex = onImage ? items.length : -1;
+    const count = items.length + (onImage ? 1 : 0);
     const buttons = useRef([]);
     // The one button Tab reaches: the last one used.
     const [current, setCurrent] = useState(0);
     const move = (index) => {
-        const next = (index + items.length) % items.length;
+        const next = (index + count) % count;
         setCurrent(next);
         buttons.current[next]?.focus();
     };
@@ -48,7 +54,7 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, tex
             ArrowRight: () => move(current + 1),
             ArrowLeft: () => move(current - 1),
             Home: () => move(0),
-            End: () => move(items.length - 1),
+            End: () => move(count - 1),
         };
         const action = keys[event.key];
         if (!action || event.metaKey || event.ctrlKey || event.altKey)
@@ -56,27 +62,29 @@ export function FormatButtons({ formats, state, readOnly, onFormat, onTable, tex
         event.preventDefault();
         action();
     };
-    return (_jsx(TooltipProvider, { delay: 400, children: groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
-                    const index = items.indexOf(item);
-                    if (item.id === 'table')
-                        return (_jsx(RichTextTableMenu, { ref: (element) => {
-                                buttons.current[index] = element;
-                            }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
-                    const Icon = item.icon;
-                    const tip = [
-                        item.label,
-                        item.keys && `(${shownKeys(item.keys, apple)})`,
-                        item.hint && `· ${item.hint.replace(/Mod\+Shift\+Enter/, shownKeys('Mod+Shift+Enter', apple))}`,
-                    ]
-                        .filter(Boolean)
-                        .join(' ');
-                    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
-                                        buttons.current[index] = element;
-                                    }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
-                                    // A mouse press keeps focus, and the selection, in the text.
-                                    onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
-                })] }, groupIndex))) }));
+    return (_jsxs(TooltipProvider, { delay: 400, children: [groups.map((group, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && _jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), group.map((item) => {
+                        const index = items.indexOf(item);
+                        if (item.id === 'table')
+                            return (_jsx(RichTextTableMenu, { ref: (element) => {
+                                    buttons.current[index] = element;
+                                }, state: state, readOnly: readOnly, tabIndex: index === current ? 0 : -1, onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onInsert: () => onFormat('table'), onAction: (action) => onTable?.(action), text: text }, item.id));
+                        const Icon = item.icon;
+                        const tip = [
+                            item.label,
+                            item.keys && `(${shownKeys(item.keys, apple)})`,
+                            item.hint && `· ${item.hint.replace(/Mod\+Shift\+Enter/, shownKeys('Mod+Shift+Enter', apple))}`,
+                        ]
+                            .filter(Boolean)
+                            .join(' ');
+                        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Toggle, { ref: (element) => {
+                                            buttons.current[index] = element;
+                                        }, size: "icon-sm", "aria-label": item.label, "aria-keyshortcuts": item.keys ? ariaKeys(item.keys, apple) : undefined, pressed: state ? formatOn(state, item.id) : false, disabled: readOnly, tabIndex: index === current ? 0 : -1, className: "aria-pressed:bg-muted aria-pressed:text-foreground", 
+                                        // A mouse press keeps focus, and the selection, in the text.
+                                        onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(index), onKeyDown: onKeyDown, onPressedChange: () => onFormat(item.id) }), children: _jsx(Icon, {}) }), _jsx(TooltipContent, { children: tip })] }, item.id));
+                    })] }, groupIndex))), onImage && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-1 h-5 self-center" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(Button, { ref: (element) => {
+                                        buttons.current[imageIndex] = element;
+                                    }, variant: "ghost", size: "icon-sm", "aria-label": "Image", disabled: readOnly, tabIndex: imageIndex === current ? 0 : -1, onMouseDown: (event) => event.preventDefault(), onFocus: () => setCurrent(imageIndex), onKeyDown: onKeyDown, onClick: onImage }), children: _jsx(ImageIcon, {}) }), _jsx(TooltipContent, { children: "Image \u00B7 or paste or drop one" })] })] }))] }));
 }
-export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, text, ref }) {
-    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat, onTable: onTable, text: text }) }));
+export function RichTextToolbar({ state, readOnly, controls, onFormat, onTable, onImage, text, ref }) {
+    return (_jsx("div", { ref: ref, role: "toolbar", "aria-label": "Formatting", "aria-controls": controls, "data-slot": "rich-text-toolbar", className: "flex flex-wrap items-center gap-0.5 border-b border-input px-1 py-1", children: _jsx(FormatButtons, { formats: "all", state: state, readOnly: readOnly, onFormat: onFormat, onTable: onTable, onImage: onImage, text: text }) }));
 }

package/dist/components/app/widget-card.d.ts

@@ -1,11 +1,15 @@
 import { type ReactNode } from 'react';
 import { type To } from 'react-router';
-import { type LucideIcon } from 'lucide-react';
 import type { AppError } from '../../api/contracts.js';
+import type { IconComponent } from './icon-component.js';
 export interface WidgetCardProps {
     title: string;
-    /** A Lucide icon shown before the title. Decorative: the title names the card. */
-    icon?: LucideIcon;
+    /**
+     * An icon shown before the title: a Lucide icon, or an app's own mark (an
+     * outside service's logo on a card about that service). Decorative: the
+     * title names the card.
+     */
+    icon?: IconComponent;
     /** The title's heading level: 2 under the page's h1 (the default), deeper under a section. */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     /**

package/dist/error-reporting/error-reporting-provider.js

@@ -6,12 +6,18 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { reportClientError } from '../api/gateway/client-errors.js';
 import { useAuth } from '../auth/use-auth.js';
+import { browserStaleChunkReload } from '../lib/stale-chunk-reload.js';
 import { ErrorReportingContext, useRoutePattern } from './error-reporting-context.js';
 import { createErrorReporter } from './reporter.js';
 export function ErrorReportingProvider({ options, children }) {
     const queryClient = useQueryClient();
     const { status } = useAuth();
-    const [reporter] = useState(() => createErrorReporter({ options, send: (report) => void reportClientError(report) }));
+    const [reporter] = useState(() => createErrorReporter({
+        options,
+        send: (report) => void reportClientError(report),
+        // A failure that sends the page to a new build is the old build going, not a bug.
+        muted: browserStaleChunkReload().isReloading,
+    }));
     useEffect(() => reporter.setSignedIn(status === 'authenticated'), [reporter, status]);
     useEffect(() => reporter.install(queryClient, window), [reporter, queryClient]);
     return _jsx(ErrorReportingContext.Provider, { value: reporter, children: children });