@memorysmithapp/markdown-renderer 0.4.0 → 0.6.0

package/README.md

@@ -20,7 +20,7 @@ import 'katex/dist/katex.min.css';
   resolve={(name) => addressOfTheOneNoteNamed(name)} // or null: the link is pending
   keeps={(name) => notebookKeepsAFile(name)}       // only an embed reaches a file
   fileOf={(name) => describe(name)}               // { mimeType, bytes, url, description }: drawn by its type, as MemorySmith does
-  renderLink={({ href, className, children }) => <RouterLink to={href} className={className}>{children}</RouterLink>}
+  renderLink={({ href, className, children }) => <a href={href} className={className} onClick={follow(href)}>{children}</a>} // follow: your router's navigate, captured where it is
   loadNote={(name) => fetchTheBodyOf(name)}        // for an embedded note; the package never fetches
   writable
   onToggleTask={(ordinal) => save(toggleTaskAt(latest(), ordinal))} // a promise locks the item under "Updating…" until it settles
@@ -29,7 +29,7 @@ import 'katex/dist/katex.min.css';
 />;
 ```
 
-Every prop is optional, and every default is the safe one: with no `resolve` every link is pending, with no `keeps` no embed reaches a file. A file `fileOf` describes is drawn by its media type, never its name: an image, an audio or a video player, and anything else a card with its type, size, description, *Open* where a browser shows it and *Download*; give `renderAttachment` instead to draw files yourself. The stylesheet styles nothing outside `.markdown`. The faces of the default theme are Inter and Space Grotesk, which the page loads.
+Every prop is optional, and every default is the safe one: with no `resolve` every link is pending, with no `keeps` no embed reaches a file. A file `fileOf` describes is drawn by its media type, never its name: an image, an audio or a video player, and anything else a card with its type, size, description, *Open* where a browser shows it and *Download*; give `renderAttachment` instead to draw files yourself. In edit mode, `renderLink`, `renderAttachment` and a theme's slots may be drawn in a root of their own, outside your React tree, so what they return must not read your context: a router's `<Link>` throws there, and the block shows its Markdown under a notice instead. The stylesheet styles nothing outside `.markdown`. The faces of the default theme are Inter and Space Grotesk, which the page loads.
 
 ## Themes
 
@@ -76,7 +76,7 @@ Import `structure.css` instead of `styles.css` for a theme that draws everything
 
 ## Edit
 
-A note the host makes `editable` carries a button at its top right that switches between reading and editing it on the same page. The author edits what they see: marks, headings, lists, tasks, links and the names of notes after `[[`, callouts, tables cell by cell, code, formulas and diagrams with their drawing live, the properties as a form, footnotes and comments. The note is the bytes you gave, and every change comes back whole through `onChange`, unchanged wherever the author did not touch it — the order and quoting of the frontmatter, a list's marker, a table's spacing, a comment, a line break. The package never saves. The toolbar grows out of the switch, which becomes its last control; its first tool undoes every change since editing began, and a right-click on the text opens a menu of the same tools where you are (Shift keeps the browser's); beside the switch, in both modes, Show Markdown opens the note's Markdown, as you have it or would receive it, in a dialog, and Copy Markdown copies it.
+A note the host makes `editable` carries a button at its top right that switches between reading and editing it on the same page. The author edits what they see: marks, headings, lists, tasks, links and the names of notes after `[[`, callouts, tables cell by cell, code, formulas and diagrams with their drawing live, the properties as a form, footnotes and comments. The note is the bytes you gave, and every change comes back whole through `onChange`, unchanged wherever the author did not touch it — the order and quoting of the frontmatter, a list's marker, a table's spacing, a comment, a line break. The package never saves. The toolbar grows out of the switch, which becomes its last control; its first tool undoes every change since editing began, and a right-click on the text opens a menu of the same tools where you are (Shift keeps the browser's); beside the switch, in both modes, Show Markdown opens the note's Markdown, as you have it or would receive it, in a dialog, and Copy Markdown copies it. Those two are reading, so a note that is not `editable` carries them too, without the switch; pass `actions={false}` to hide them, for a print, a preview or an embed.
 
 ```tsx
 <NoteBody
@@ -84,13 +84,31 @@ A note the host makes `editable` carries a button at its top right that switches
   editable                                        // the switch, at the top right
   onChange={(next) => save(next)}                 // after every change; return the save's promise
   suggest={(typed) => namesOfNotesLike(typed)}    // what [[ offers
-  attach={(file, { name, description }) => keepInNotebook(file, name, description)} // the name it is kept under
+  attach={(file, { name, description }, progress) => keepInNotebook(file, name, description, progress)} // the name it is kept under
   files={() => filesOfTheNotebook()}              // what the attach dialog lists: { name, mimeType, bytes, url, description }
-  modeButton="icon"                               // or "label", the icon and its word
+  modeButton="label"                              // the icon and its word; "icon", the default, the icon alone
 />
 ```
 
-When `onChange` returns the promise of its save, the editor shows before the switch an icon for whether the last change is *Saving…*, *Saved* or *Not saved*, the last one's icon trying again when clicked, and going back to reading waits for the save, staying in edit when it failed. Return nothing and no status is shown. Pass the saved note back as `markdown` whenever you like: a text the editor already moved past is not applied over what the author typed since.
+When `onChange` returns the promise of its save, the editor shows before the switch an icon for whether the last change is *Saving…*, *Saved* or *Not saved*, the last one's icon trying again when clicked, and going back to reading waits for the save, staying in edit when it failed. Return nothing and no status is shown. When there is something to tell the author, resolve the promise with a `SaveOutcome` (the save went through, and they have a choice to make) or reject it with a `SaveRefusal` (it did not, and why): each is a `title`, a `message` and the `actions` to choose from, in your words. The icon then opens a dialog with them; an action's promise is followed like a save, and the author can close the dialog and come back to it:
+
+```tsx
+onChange={async (next) => {
+  const saved = await save(next);
+  if (saved.conflict) throw { title: 'Somebody else wrote this note', message: 'Your edit was not saved.', actions: [
+    { label: 'Discard my edit and reload', run: () => reload() },
+    { label: 'Save anyway', run: () => save(next, { force: true }) },
+  ] } satisfies SaveRefusal;
+  if (saved.renamed) return { title: 'Note renamed', message: `${saved.links} links reached the old name.`, actions: [
+    { label: 'Keep the links broken', run: () => undefined },
+    { label: 'Keep the old name as an alias', run: () => addAlias() },
+  ] } satisfies SaveOutcome;
+}}
+```
+
+While `attach` keeps a file, call `progress({ message, fraction })` with each step in your words — *Sending part 12 of 40*, and `0.3` — and the paperclip shows it, a bar filling when you give the fraction. Reject with `{ message }` (an `AttachRefusal`, not an `Error`) to tell the author why the file was refused; the paperclip says it until they open it again. An `Error` keeps the paperclip's own *The file was not attached*.
+
+Pass the saved note back as `markdown` whenever you like: a text the editor already moved past is not applied over what the author typed since.
 
 `mode` and `onModeChange` let you control the mode yourself, and the words come from `strings` (`edit`, `view` and `editor`). The editor is CodeMirror, loaded the first time a note is edited, so a page that only draws never loads it. To edit without the switch, import it from its own entry point:
 

package/dist/NoteBody.d.ts

@@ -7,7 +7,7 @@ export interface NoteBodyProps extends NoteHost {
     readonly markdown: string;
     /**
      * Whether the note offers the switch to edit it, at its top right (#51). Defaults to `false`:
-     * no switch, and the page is the one a reader always had.
+     * no switch, the note only read, with Show and Copy Markdown as `actions` says.
      */
     readonly editable?: boolean;
     /** The mode, for a host that controls it; left out, the note keeps its own, starting from `defaultMode`. */
@@ -19,11 +19,23 @@ export interface NoteBodyProps extends NoteHost {
     /**
      * The note after each change made in edit mode, byte for byte the original wherever it was not
      * edited. The package never saves it; a host that answers with the promise of its save has the
-     * editor say whether it was saved, and going back to reading wait for it (#64).
+     * editor say whether it was saved, and going back to reading wait for it (#64). The promise may
+     * resolve with a `SaveOutcome`, a save that succeeded with something the author must decide, or
+     * reject with a `SaveRefusal`, the reason it was refused: either opens, from the save's status,
+     * a dialog with the host's words and its actions (#86).
      */
     readonly onChange?: (markdown: string) => unknown;
-    /** Whether the switch shows its icon alone or its icon and its word. Defaults to `label`. */
+    /**
+     * Whether the switch shows its icon alone or its icon and its word. Defaults to `icon`, like Show
+     * Markdown and Copy Markdown beside it, its word then its name and its title (#92).
+     */
     readonly modeButton?: 'icon' | 'label';
+    /**
+     * Whether the note offers Show Markdown and Copy Markdown at its top right, editable or not:
+     * reading a note's Markdown and copying it are reading (#87). Defaults to `true`; `false` hides
+     * them, for a print, a preview or an embed.
+     */
+    readonly actions?: boolean;
 }
 /** Whether a note is read or edited. */
 export type NoteMode = 'view' | 'edit';
@@ -33,4 +45,4 @@ export type NoteMode = 'view' | 'edit';
  * It renders inside `.markdown`, so the stylesheet of the package applies, and asks the host for
  * every piece of notebook data through the props of `NoteHost`.
  */
-export declare function NoteBody({ editable, mode, defaultMode, onModeChange, onChange, modeButton, ...rest }: NoteBodyProps): import("react").JSX.Element;
+export declare function NoteBody({ editable, mode, defaultMode, onModeChange, onChange, modeButton, actions, ...rest }: NoteBodyProps): import("react").JSX.Element;

package/dist/NoteBody.js

@@ -34,14 +34,14 @@ function ModeSwitch({ mode, display, toggle }) {
  * It renders inside `.markdown`, so the stylesheet of the package applies, and asks the host for
  * every piece of notebook data through the props of `NoteHost`.
  */
-export function NoteBody({ editable = false, mode, defaultMode = 'view', onModeChange, onChange, modeButton = 'label', ...rest }) {
+export function NoteBody({ editable = false, mode, defaultMode = 'view', onModeChange, onChange, modeButton = 'icon', actions = true, ...rest }) {
     const [own, setOwn] = useState(defaultMode);
     // The author asked to go back to reading, and the editor is finishing: a save, the toolbar folding.
     const [leaving, setLeaving] = useState(false);
     // The last text handed to the host in edit mode, which Show and Copy Markdown give there (#76).
     const handed = useRef(null);
     const current = editable ? (mode ?? own) : 'view';
-    if (!editable)
+    if (!editable && !actions)
         return _jsx(NoteView, { ...rest });
     const go = (next) => {
         if (mode === undefined)
@@ -67,13 +67,14 @@ export function NoteBody({ editable = false, mode, defaultMode = 'view', onModeC
     };
     const { writable: _writable, onToggleTask: _toggle, ...host } = rest;
     return (_jsx(HostOnly, { host: rest, children: (resolved) => {
-            // The switch, with Show and Copy Markdown beside it in both modes (#76).
-            const corner = (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: "note-corner", children: [_jsx(NoteActions, { text: () => (current === 'edit' ? (handed.current ?? rest.markdown) : rest.markdown) }), _jsx(ModeSwitch, { mode: current, display: modeButton, toggle: toggle })] }) }));
+            // Show and Copy Markdown for whoever reads the note, in both modes (#76, #87), and the
+            // switch only where the note is editable.
+            const corner = (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: "note-corner", children: [actions && _jsx(NoteActions, { text: () => (current === 'edit' ? (handed.current ?? rest.markdown) : rest.markdown) }), editable && _jsx(ModeSwitch, { mode: current, display: modeButton, toggle: toggle })] }) }));
             if (current === 'view')
-                return _jsx(NoteView, { ...rest, corner: corner });
+                return _jsx(NoteView, { ...rest, corner: corner, switched: editable });
             return (
             // While the editor loads, the note stays on the page as it was.
-            _jsx(Suspense, { fallback: _jsx(NoteView, { ...rest, corner: corner }), children: _jsx(NoteEditor, { ...host, onChange: hand, corner: corner, autoFocus: true, leaving: leaving, onLeave: onLeave }) }));
+            _jsx(Suspense, { fallback: _jsx(NoteView, { ...rest, corner: corner, switched: true }), children: _jsx(NoteEditor, { ...host, onChange: hand, corner: corner, autoFocus: true, leaving: leaving, onLeave: onLeave }) }));
         } }));
 }
 /** The host resolved once, for what is drawn around the note. */
@@ -82,7 +83,7 @@ function HostOnly({ host, children }) {
     return _jsx(_Fragment, { children: children(resolved) });
 }
 /** The note drawn for reading: the page MemorySmith's reading page draws. */
-function NoteView({ markdown, writable = false, onToggleTask, corner, ...host }) {
+function NoteView({ markdown, writable = false, onToggleTask, corner, switched = false, ...host }) {
     const resolved = useMemo(() => resolveHost(host), 
     // Every member of the contract, so a host that passes the same functions keeps the same host.
     HOST_KEYS.map((key) => host[key]));
@@ -146,7 +147,7 @@ function NoteView({ markdown, writable = false, onToggleTask, corner, ...host })
     // The runs and whether an embed cut them are the whole input.
     [runs.join('\u0000'), runs.length < segments.length]);
     let run = 0;
-    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name}${corner ? ' has-mode-switch' : ''}`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [corner, _jsx(Properties, { properties: properties }), segments.map((segment, index) => {
+    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name}${corner ? ' has-note-corner' : ''}${switched ? ' has-mode-switch' : ''}`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [corner, _jsx(Properties, { properties: properties }), segments.map((segment, index) => {
                     if (!('rendered' in segment)) {
                         return _jsx(Transclusion, { target: segment.target, anchor: segment.anchor }, index);
                     }

package/dist/edit/AttachDialog.d.ts

@@ -11,7 +11,9 @@ export interface ChosenFile {
 }
 /** The Markdown of an image at a web address, its name the alternative text (§3.14). */
 export declare function webImage(name: string, address: string): string;
-export declare function AttachDialog({ onClose, onClosed, onAttach, onEmbed, onLink, }: {
+export declare function AttachDialog({ refusal, onClose, onClosed, onAttach, onEmbed, onLink, }: {
+    /** Why the host refused the last file, said at the top of the dialog the author opened after it (#88). */
+    refusal?: string | null;
     onClose: () => void;
     /** Once the dialog is closed: whether something was put in the note, which then has the focus. */
     onClosed: (inserted: boolean) => void;

package/dist/edit/AttachDialog.js

@@ -17,7 +17,7 @@ export function webImage(name, address) {
     const target = /[\s()<>]/.test(address) ? `<${address.replace(/[<>]/g, encodeURIComponent)}>` : address;
     return `![${alt}](${target})`;
 }
-export function AttachDialog({ onClose, onClosed, onAttach, onEmbed, onLink, }) {
+export function AttachDialog({ refusal = null, onClose, onClosed, onAttach, onEmbed, onLink, }) {
     const host = useHost();
     const words = host.strings.editor;
     const ways = [...(host.attach ? ['computer'] : []), ...(host.files ? ['notebook'] : []), 'web'];
@@ -51,7 +51,7 @@ export function AttachDialog({ onClose, onClosed, onAttach, onEmbed, onLink, })
     return (_jsx("dialog", { ref: dialog, className: "edit-source edit-attach", "aria-modal": "true", "aria-labelledby": `${id}-title`, onCancel: (event) => {
             event.preventDefault();
             onClose();
-        }, onClick: (event) => event.target === dialog.current && onClose(), children: _jsxs("div", { className: "edit-source-frame", children: [_jsxs("header", { className: "edit-source-header", children: [_jsx("h2", { id: `${id}-title`, className: "edit-source-title", children: words.attachTitle }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICONS.remove })] }), _jsx("div", { className: "edit-attach-ways", role: "tablist", "aria-label": words.attachTitle, children: ways.map((each) => (_jsx("button", { type: "button", role: "tab", id: `${id}-${each}`, "aria-selected": each === way, "aria-controls": `${id}-panel`, tabIndex: each === way ? 0 : -1, className: "edit-attach-way", onClick: () => setWay(each), onKeyDown: (event) => {
+        }, onClick: (event) => event.target === dialog.current && onClose(), children: _jsxs("div", { className: "edit-source-frame", children: [_jsxs("header", { className: "edit-source-header", children: [_jsx("h2", { id: `${id}-title`, className: "edit-source-title", children: words.attachTitle }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICONS.remove })] }), refusal && _jsx("p", { className: "edit-attach-error edit-attach-refusal", children: refusal }), _jsx("div", { className: "edit-attach-ways", role: "tablist", "aria-label": words.attachTitle, children: ways.map((each) => (_jsx("button", { type: "button", role: "tab", id: `${id}-${each}`, "aria-selected": each === way, "aria-controls": `${id}-panel`, tabIndex: each === way ? 0 : -1, className: "edit-attach-way", onClick: () => setWay(each), onKeyDown: (event) => {
                             const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
                             if (step === 0)
                                 return;

package/dist/edit/NoteEditor.d.ts

@@ -14,7 +14,8 @@ export interface NoteEditorProps extends Omit<NoteHost, 'writable' | 'onToggleTa
     readonly markdown: string;
     /**
      * The note after each change the author makes, byte for byte the original wherever it was not
-     * edited. A promise answered is the save of that change, which the editor reports (#64).
+     * edited. A promise answered is the save of that change, which the editor reports (#64); one that
+     * resolves with a `SaveOutcome` or rejects with a `SaveRefusal` has the host's words and actions (#86).
      */
     readonly onChange?: (markdown: string) => unknown;
     /** Whether the author may change the note. Defaults to `true`. */

package/dist/edit/NoteEditor.js

@@ -14,16 +14,18 @@ import { markdown, markdownKeymap } from '@codemirror/lang-markdown';
 import { Annotation, Compartment, EditorState } from '@codemirror/state';
 import { EditorView, keymap } from '@codemirror/view';
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';
-import { HOST_KEYS, HostProvider, resolveHost } from '../host.js';
+import { HOST_KEYS, HostProvider, isAttachRefusal, resolveHost } from '../host.js';
 import { rootStyle } from '../theme.js';
 import { ICONS } from './blocks.js';
 import { BLOCKS, command, headingLevel, insertBlock, insertFootnote, insertLink, insertWikilink, setHeading, toggleComment, toggleList, toggleMark, toggleQuote, } from './commands.js';
 import { analysisField, editorEnvironment, livePage } from './live.js';
+import { measureMetrics } from './heights.js';
 import { NoteActions } from '../NoteActions.js';
 import { AttachDialog, webImage } from './AttachDialog.js';
 import { ContextMenu } from './ContextMenu.js';
 import { chooseLanguageAt } from './LanguageControl.js';
 import { useEditSaves } from './saves.js';
+import { SaveNoticeDialog } from './SaveNoticeDialog.js';
 /**
  * The line break a note is written with, which the editor writes back: `\n` or `\r\n`. `null`
  * for a note that mixes them, or has a lone `\r`, which the editor cannot keep byte for byte.
@@ -110,8 +112,23 @@ function insertBlockCommand(name) {
         return true;
     };
 }
-/** How long the attach button says a file was not attached, in milliseconds. */
+const NOT_ATTACHING = { state: 'idle', message: null, fraction: null, queued: 0 };
+/** How long the attach button says a file was not attached, when the host did not say why, in milliseconds. */
 const ATTACH_FAILED_MS = 3000;
+/** A host's fraction, kept between 0 and 1, or none when it gave no number. */
+function fractionOf(report) {
+    const fraction = report?.fraction;
+    return typeof fraction === 'number' && Number.isFinite(fraction) ? Math.min(1, Math.max(0, fraction)) : null;
+}
+/** What the paperclip says: its word, the host's step and the files waiting, or why the last one failed. */
+function attachSays(attaching, words) {
+    if (attaching.state === 'failed')
+        return attaching.message ?? words.attachFailed;
+    if (attaching.state === 'idle')
+        return words.attach;
+    const step = attaching.message ?? words.attaching;
+    return attaching.queued > 0 ? `${step} (${words.attachQueued(attaching.queued)})` : step;
+}
 /** The toolbar of the editor: the marks, the blocks and the history, each a command. */
 function Toolbar({ view, host, end, opened, onAttach, attaching, attachButton, }) {
     const words = host.strings.editor;
@@ -120,21 +137,35 @@ function Toolbar({ view, host, end, opened, onAttach, attaching, attachButton, }
     const button = (name, action, shortcut) => (_jsx("button", { type: "button", className: "edit-control", title: shortcut ? `${words[name]} (${shortcut})` : words[name], "aria-label": words[name], disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: run(action), children: ICONS[name] }, name));
     const block = (name) => button(name, insertBlockCommand(name));
     const level = view ? headingLevel(view.state) : 0;
-    return (_jsxs("div", { className: "edit-toolbar", role: "toolbar", "aria-label": words.toolbar, children: [_jsxs("div", { className: "edit-toolbar-tools", children: [_jsxs("span", { className: "edit-toolbar-group", children: [_jsx("button", { type: "button", className: "edit-control", title: words.revert, "aria-label": words.revert, disabled: !view || view.state.readOnly || view.state.doc.toString() === opened, onMouseDown: (event) => event.preventDefault(), onClick: run(command((state) => revert(state, opened))), children: ICONS.revert }), button('undo', undo, 'Mod-Z'), button('redo', redo, 'Mod-Shift-Z')] }), _jsx("span", { className: "edit-toolbar-group", children: _jsxs("select", { className: "edit-heading", "aria-label": words.heading, title: words.heading, value: level, disabled: disabled, onChange: (event) => view && command((state) => setHeading(state, Number(event.target.value)))(view), children: [_jsx("option", { value: 0, children: words.paragraph }), [1, 2, 3, 4, 5, 6].map((each) => (_jsx("option", { value: each, children: `${words.heading} ${each}` }, each)))] }) }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bold', command((state) => toggleMark(state, '**')), 'Mod-B'), button('italic', command((state) => toggleMark(state, '_')), 'Mod-I'), button('strikethrough', command((state) => toggleMark(state, '~~')), 'Mod-Shift-X'), button('highlight', command((state) => toggleMark(state, '==')), 'Mod-Shift-H'), button('code', command((state) => toggleMark(state, '`')), 'Mod-E')] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('link', command(insertLink), 'Mod-K'), button('wikilink', command(insertWikilink), 'Mod-Shift-K'), button('footnote', command(insertFootnote)), button('comment', command(toggleComment), 'Mod-/'), _jsx("button", { ref: attachButton, type: "button", className: "edit-control", title: attaching === 'busy' ? words.attaching : attaching === 'failed' ? words.attachFailed : words.attach, "aria-label": words.attach, "aria-busy": attaching === 'busy' ? true : undefined, "data-attach": attaching, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onAttach, children: attaching === 'busy' ? ICONS.saving : attaching === 'failed' ? ICONS.notSaved : ICONS.attach })] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bulletList', command((state) => toggleList(state, 'bullet')), 'Mod-Shift-8'), button('orderedList', command((state) => toggleList(state, 'ordered')), 'Mod-Shift-7'), button('taskList', command((state) => toggleList(state, 'task')), 'Mod-Shift-9'), button('quote', command(toggleQuote), 'Mod-Shift-.')] }), _jsxs("span", { className: "edit-toolbar-group", children: [block('callout'), block('table'), block('codeBlock'), block('math'), block('diagram'), block('rule')] })] }), end] }));
+    return (_jsxs("div", { className: "edit-toolbar", role: "toolbar", "aria-label": words.toolbar, children: [_jsxs("div", { className: "edit-toolbar-tools", children: [_jsxs("span", { className: "edit-toolbar-group", children: [_jsx("button", { type: "button", className: "edit-control", title: words.revert, "aria-label": words.revert, disabled: !view || view.state.readOnly || view.state.doc.toString() === opened, onMouseDown: (event) => event.preventDefault(), onClick: run(command((state) => revert(state, opened))), children: ICONS.revert }), button('undo', undo, 'Mod-Z'), button('redo', redo, 'Mod-Shift-Z')] }), _jsx("span", { className: "edit-toolbar-group", children: _jsxs("select", { className: "edit-heading", "aria-label": words.heading, title: words.heading, value: level, disabled: disabled, onChange: (event) => view && command((state) => setHeading(state, Number(event.target.value)))(view), children: [_jsx("option", { value: 0, children: words.paragraph }), [1, 2, 3, 4, 5, 6].map((each) => (_jsx("option", { value: each, children: `${words.heading} ${each}` }, each)))] }) }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bold', command((state) => toggleMark(state, '**')), 'Mod-B'), button('italic', command((state) => toggleMark(state, '_')), 'Mod-I'), button('strikethrough', command((state) => toggleMark(state, '~~')), 'Mod-Shift-X'), button('highlight', command((state) => toggleMark(state, '==')), 'Mod-Shift-H'), button('code', command((state) => toggleMark(state, '`')), 'Mod-E')] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('link', command(insertLink), 'Mod-K'), button('wikilink', command(insertWikilink), 'Mod-Shift-K'), button('footnote', command(insertFootnote)), button('comment', command(toggleComment), 'Mod-/'), _jsxs("span", { className: "edit-attach-control", children: [_jsx("button", { ref: attachButton, type: "button", className: "edit-control", title: attachSays(attaching, words), "aria-label": words.attach, "aria-busy": attaching.state === 'busy' ? true : undefined, "data-attach": attaching.state, disabled: disabled, onMouseDown: (event) => event.preventDefault(), onClick: onAttach, children: attaching.state === 'busy' ? ICONS.saving : attaching.state === 'failed' ? ICONS.notSaved : ICONS.attach }), attaching.state === 'busy' && attaching.fraction !== null && (_jsx("span", { className: "edit-attach-progress", role: "progressbar", "aria-label": words.attach, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(attaching.fraction * 100), style: { ['--edit-attach-fraction']: attaching.fraction } })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: attaching.state === 'idle' ? '' : attachSays(attaching, words) })] })] }), _jsxs("span", { className: "edit-toolbar-group", children: [button('bulletList', command((state) => toggleList(state, 'bullet')), 'Mod-Shift-8'), button('orderedList', command((state) => toggleList(state, 'ordered')), 'Mod-Shift-7'), button('taskList', command((state) => toggleList(state, 'task')), 'Mod-Shift-9'), button('quote', command(toggleQuote), 'Mod-Shift-.')] }), _jsxs("span", { className: "edit-toolbar-group", children: [block('callout'), block('table'), block('codeBlock'), block('math'), block('diagram'), block('rule')] })] }), end] }));
 }
 /**
  * Where the save of the author's last change stands, in the toolbar before the switch: an icon for
  * each state, in a slot of one size, so the toolbar never moves as the author types; its word is
- * its title. A failed save's icon is the button that tries again (#66). Whoever hears the page is
- * told the whole of it, why the note stays in edit included.
+ * its title. A failed save's icon is the button that tries again (#66). When the host said why —
+ * an alert on a save that succeeded, or the reason for one it refused — the icon is the button that
+ * opens what it said, with the host's title as its tooltip, and the author's choices (#86). Whoever
+ * hears the page is told the whole of it, why the note stays in edit included.
  */
-function SaveStatus({ state, blocked, retry, host }) {
+function SaveStatus({ saves, blocked, host, onDecided }) {
+    const { state, notice } = saves;
     const words = host.strings.editor;
-    const shown = state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
-    const said = state === 'failed' && blocked ? words.stayInEdit : shown;
-    const icon = state === 'saving' ? ICONS.saving : state === 'saved' ? ICONS.saved : state === 'failed' ? ICONS.notSaved : null;
+    const [open, setOpen] = useState(false);
+    const button = useRef(null);
+    // A notice the save no longer carries has nothing left to show.
+    useEffect(() => {
+        if (!notice)
+            setOpen(false);
+    }, [notice]);
+    const base = state === 'saving' ? words.saving : state === 'saved' ? host.strings.saved : state === 'failed' ? host.strings.notSaved : '';
+    const shown = notice ? notice.title : base;
+    const said = state === 'failed' && blocked ? (notice ? `${words.stayInEdit}. ${notice.title}` : words.stayInEdit) : shown;
+    const icon = state === 'saving' ? ICONS.saving : state === 'saved' ? ICONS.saved : state === 'alert' ? ICONS.alert : state === 'failed' ? ICONS.notSaved : null;
     const retryLabel = `${said}. ${words.retry}`;
-    return (_jsxs("div", { className: "edit-save", "data-save": state, title: state === 'failed' ? undefined : said || undefined, children: [state === 'failed' ? (_jsx("button", { type: "button", className: "edit-save-icon edit-save-retry", title: retryLabel, "aria-label": retryLabel, onClick: retry, children: icon })) : (_jsx("span", { className: "edit-save-icon", children: icon })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: said })] }));
+    return (_jsxs("div", { className: "edit-save", "data-save": state, title: state === 'failed' || notice ? undefined : said || undefined, children: [notice ? (_jsx("button", { ref: button, type: "button", className: "edit-save-icon edit-save-notice", title: notice.title, "aria-label": notice.title, "aria-haspopup": "dialog", onClick: () => setOpen(true), children: icon })) : state === 'failed' ? (_jsx("button", { type: "button", className: "edit-save-icon edit-save-retry", title: retryLabel, "aria-label": retryLabel, onClick: saves.retry, children: icon })) : (_jsx("span", { className: "edit-save-icon", children: icon })), _jsx("span", { className: "visually-hidden", role: "status", "aria-live": "polite", children: said }), open && notice && (_jsx(SaveNoticeDialog, { notice: notice, onClose: () => setOpen(false), onClosed: (chosen) => (chosen ? onDecided() : button.current?.focus()), onAction: (action) => {
+                    setOpen(false);
+                    saves.run(action);
+                } }))] }));
 }
 /**
  * Edits a note on the page that draws it. Exported at `@memorysmithapp/markdown-renderer/edit`
@@ -162,11 +193,16 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
     const [blocked, setBlocked] = useState(false);
     const [refusals, setRefusals] = useState(0);
     const editorView = useRef(null);
-    const [attaching, setAttaching] = useState('idle');
+    const [attaching, setAttaching] = useState(NOT_ATTACHING);
+    // Each run of attaching, so that a run a later one replaced says nothing more.
+    const attachRun = useRef(0);
+    // The refusal the paperclip said, shown again at the top of the dialog it opens (#88).
+    const [refusal, setRefusal] = useState(null);
     /**
      * Hands each file to the host's `attach`, one after the other, and embeds it as `![[name]]` on a
      * line of its own where the cursor is once the host answered its name; a file the host could not
-     * keep writes nothing, and the button says so for a moment (#75).
+     * keep writes nothing, and the button says so for a moment (#75) — or, when the host said why,
+     * until the author opens it again. The host's steps are shown as they come (#88).
      */
     const attachFiles = useRef(() => undefined);
     attachFiles.current = (files, at) => {
@@ -176,20 +212,34 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
             return;
         if (at !== undefined)
             target.dispatch({ selection: { anchor: at } });
-        setAttaching('busy');
+        const run = ++attachRun.current;
+        const live = () => run === attachRun.current && editorView.current !== null;
         void (async () => {
             let failed = false;
-            for (const { file, name: wanted, description } of files) {
+            let reason = null;
+            for (const [index, { file, name: wanted, description }] of files.entries()) {
+                const queued = files.length - 1 - index;
+                let settled = false;
+                setAttaching({ state: 'busy', message: null, fraction: null, queued });
+                // A step the host reports after the file settled, or for a run since replaced, says nothing.
+                const progress = (report) => {
+                    if (settled || !live())
+                        return;
+                    setAttaching({ state: 'busy', message: typeof report?.message === 'string' && report.message ? report.message : null, fraction: fractionOf(report), queued });
+                };
                 try {
-                    const name = await attach(file, { name: wanted, description });
+                    const name = await attach(file, { name: wanted, description }, progress);
                     insertLine(`![[${name}]]`);
                 }
-                catch {
+                catch (rejection) {
                     failed = true;
+                    if (isAttachRefusal(rejection))
+                        reason = rejection.message;
                 }
+                settled = true;
             }
-            if (editorView.current)
-                setAttaching(failed ? 'failed' : 'idle');
+            if (live())
+                setAttaching(failed ? { ...NOT_ATTACHING, state: 'failed', message: reason } : NOT_ATTACHING);
         })();
     };
     /** A line of its own at the cursor: an embed, or an image of the web (#78). */
@@ -277,9 +327,10 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
     /** A pasted or dropped file, kept under its own name and with no description. */
     const asChosen = (files) => files.map((file) => ({ file, name: file.name, description: '' }));
     useEffect(() => {
-        if (attaching !== 'failed')
+        // A failure the host explained stays until the author acts; a bare one is said for a moment.
+        if (attaching.state !== 'failed' || attaching.message !== null)
             return;
-        const timer = setTimeout(() => setAttaching('idle'), ATTACH_FAILED_MS);
+        const timer = setTimeout(() => setAttaching(NOT_ATTACHING), ATTACH_FAILED_MS);
         return () => clearTimeout(timer);
     }, [attaching]);
     // The note as edit mode opened it, as the editor holds its text: lines joined by `\n`.
@@ -308,7 +359,7 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
                     markdown(),
                     EditorView.lineWrapping,
                     EditorView.contentAttributes.of({ 'aria-multiline': 'true', spellcheck: 'true' }),
-                    livePage(),
+                    livePage(measureMetrics(parent.current)),
                     autocompletion({ override: [wikilinkCompletion(() => latest.current.host)], icons: false }),
                     shortcuts(() => created),
                     keymap.of([...markdownKeymap, ...historyKeymap, indentWithTab, ...defaultKeymap]),
@@ -453,9 +504,18 @@ export function NoteEditor({ markdown: given, onChange, editable = true, corner,
             clearTimeout(timer);
         };
     }, [leaving, saves.state]);
-    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name} markdown-editing`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [_jsx("div", { ref: bar, className: "edit-bar", "data-leaving": folding ? '' : undefined, children: _jsx(Toolbar, { view: view, host: resolved, opened: opened.current, onAttach: () => setAttachOpen(true), attaching: attaching, attachButton: attachButton, end: _jsxs("div", { className: "edit-corner", "aria-busy": leaving && saves.state === 'saving' ? true : undefined, "data-blocked": blocked ? '' : undefined, children: [_jsx(SaveStatus, { state: saves.state, blocked: blocked, retry: saves.retry, host: resolved }), corner ?? _jsx(NoteActions, { text: () => (view ? output(view.state) : given) })] }, blocked ? `blocked-${refusals}` : 'corner') }) }), menu && view && (_jsx(ContextMenu, { x: menu.x, y: menu.y, label: resolved.strings.editor.menu, groups: menuGroups(view), onClose: (back) => {
+    return (_jsx(HostProvider, { value: resolved, children: _jsxs("div", { className: `markdown markdown-theme-${resolved.theme.name} markdown-editing`, "data-theme": resolved.scheme, style: rootStyle(resolved.theme, resolved.scheme), children: [_jsx("div", { ref: bar, className: "edit-bar", "data-leaving": folding ? '' : undefined, children: _jsx(Toolbar, { view: view, host: resolved, opened: opened.current, onAttach: () => {
+                            // Opening the paperclip is the author acting on a refusal: the dialog says it once more.
+                            if (attaching.state === 'failed') {
+                                setRefusal(attaching.message);
+                                setAttaching(NOT_ATTACHING);
+                            }
+                            else
+                                setRefusal(null);
+                            setAttachOpen(true);
+                        }, attaching: attaching, attachButton: attachButton, end: _jsxs("div", { className: "edit-corner", "aria-busy": leaving && saves.state === 'saving' ? true : undefined, "data-blocked": blocked ? '' : undefined, children: [_jsx(SaveStatus, { saves: saves, blocked: blocked, host: resolved, onDecided: () => view?.focus() }), corner ?? _jsx(NoteActions, { text: () => (view ? output(view.state) : given) })] }, blocked ? `blocked-${refusals}` : 'corner') }) }), menu && view && (_jsx(ContextMenu, { x: menu.x, y: menu.y, label: resolved.strings.editor.menu, groups: menuGroups(view), onClose: (back) => {
                         setMenu(null);
                         if (back)
                             view.focus();
-                    } })), attachOpen && (_jsx(AttachDialog, { onClose: () => setAttachOpen(false), onClosed: (inserted) => !inserted && attachButton.current?.focus(), onAttach: (files) => attachFiles.current(files), onEmbed: (name) => insertLine(`![[${name}]]`), onLink: (name, address) => insertLine(webImage(name, address)) })), lineBreak === null && _jsx("p", { className: "edit-unavailable", children: resolved.strings.editUnavailable }), _jsx("div", { ref: parent, className: "markdown-editor" })] }) }));
+                    } })), attachOpen && (_jsx(AttachDialog, { refusal: refusal, onClose: () => setAttachOpen(false), onClosed: (inserted) => !inserted && attachButton.current?.focus(), onAttach: (files) => attachFiles.current(files), onEmbed: (name) => insertLine(`![[${name}]]`), onLink: (name, address) => insertLine(webImage(name, address)) })), lineBreak === null && _jsx("p", { className: "edit-unavailable", children: resolved.strings.editUnavailable }), _jsx("div", { ref: parent, className: "markdown-editor" })] }) }));
 }

package/dist/edit/SaveNoticeDialog.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What the host said of a save, and the author's choices (#86): a modal dialog with the host's
+ * title, its explanation and one button per action. It never closes by itself, since its job is to
+ * have the author decide; Escape or its × close it and leave the save where it stood, and running
+ * an action closes it before the action runs.
+ */
+import type { SaveAction, SaveNotice } from './saves.js';
+export declare function SaveNoticeDialog({ notice, onClose, onClosed, onAction, }: {
+    notice: SaveNotice;
+    /** Escape or the ×: the author did not choose. */
+    onClose: () => void;
+    /** Once the dialog is closed, whether an action was chosen, so the focus goes where it belongs. */
+    onClosed: (chosen: boolean) => void;
+    onAction: (action: SaveAction) => void;
+}): import("react").JSX.Element;

package/dist/edit/SaveNoticeDialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What the host said of a save, and the author's choices (#86): a modal dialog with the host's
+ * title, its explanation and one button per action. It never closes by itself, since its job is to
+ * have the author decide; Escape or its × close it and leave the save where it stood, and running
+ * an action closes it before the action runs.
+ */
+import { useEffect, useId, useRef } from 'react';
+import { useHost } from '../host.js';
+import { ICON_CLOSE } from '../mode-icons.js';
+export function SaveNoticeDialog({ notice, onClose, onClosed, onAction, }) {
+    const host = useHost();
+    const dialog = useRef(null);
+    const chosen = useRef(false);
+    const closed = useRef(onClosed);
+    closed.current = onClosed;
+    const id = useId();
+    useEffect(() => {
+        const element = dialog.current;
+        if (!element)
+            return;
+        if (typeof element.showModal === 'function')
+            element.showModal();
+        else
+            element.setAttribute('open', '');
+        element.querySelector('.edit-notice-action')?.focus();
+        return () => {
+            if (element.open && typeof element.close === 'function')
+                element.close();
+            // Only once the dialog is closed may the page behind it take the focus.
+            closed.current(chosen.current);
+        };
+    }, []);
+    return (_jsx("dialog", { ref: dialog, className: "edit-source edit-notice", "aria-modal": "true", "aria-labelledby": `${id}-title`, "aria-describedby": `${id}-message`, onCancel: (event) => {
+            event.preventDefault();
+            onClose();
+        }, children: _jsxs("div", { className: "edit-source-frame", children: [_jsxs("header", { className: "edit-source-header", children: [_jsx("h2", { id: `${id}-title`, className: "edit-source-title", children: notice.title }), _jsx("button", { type: "button", className: "edit-control edit-source-close", "aria-label": host.strings.close, title: host.strings.close, onClick: onClose, children: ICON_CLOSE })] }), _jsx("p", { id: `${id}-message`, className: "edit-notice-message", children: notice.message }), _jsx("div", { className: "edit-notice-actions", children: notice.actions.map((action, index) => (_jsx("button", { type: "button", className: "edit-attach-button edit-notice-action", onClick: () => {
+                            chosen.current = true;
+                            onAction(action);
+                        }, children: action.label }, index))) })] }) }));
+}

package/dist/edit/blocks.d.ts

@@ -91,6 +91,7 @@ export declare const ICONS: {
     readonly saving: ReactNode;
     readonly saved: ReactNode;
     readonly notSaved: ReactNode;
+    readonly alert: ReactNode;
     readonly edit: ReactNode;
     readonly view: ReactNode;
 };

package/dist/edit/blocks.js

@@ -475,6 +475,7 @@ export const ICONS = {
     saving: icon('M21 12a9 9 0 1 1-6.219-8.56'),
     saved: icon('M20 6 9 17l-5-5'),
     notSaved: icon('M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20z', 'M12 8v4', 'M12 16h.01'),
+    alert: icon('m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3', 'M12 9v4', 'M12 17h.01'),
     edit: icon('M21.17 6.81a1 1 0 0 0-3.99-3.99L3.84 16.17a2 2 0 0 0-.5.83l-1.32 4.35a.5.5 0 0 0 .62.62l4.35-1.32a2 2 0 0 0 .83-.5z', 'm15 5 4 4'),
     view: icon('M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0', 'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'),
 };

package/dist/edit/heights.d.ts

@@ -0,0 +1,34 @@
+/**
+ * How tall a drawn block will be before it is drawn (#91).
+ *
+ * CodeMirror lays out the blocks it has not drawn yet by the height their widget estimates, and
+ * reads that estimate once, when the block's decoration is made; a block drawn taller than its
+ * estimate grows the document under the scrollbar as the author scrolls to it. Each block
+ * estimates its height from what it draws — its lines wrapped at the editor's width, its rows, its
+ * properties — and a block drawn once at a width is remembered at its measured height, so the same
+ * block made again, moved by an edit above it or in the next edit of the note, starts right.
+ */
+/** What an estimate reads of the editor: its text column, its line height and its characters. */
+export interface BlockMetrics {
+    readonly width: number;
+    readonly lineHeight: number;
+    readonly charWidth: number;
+}
+/** What an estimate assumes before the editor has been measured, as in a test with no layout. */
+export declare const DEFAULT_METRICS: BlockMetrics;
+/**
+ * The metrics of a text column laid out in `parent`, read before the editor exists there, so the
+ * first estimates are made at the width the note is drawn at. Falls back to `DEFAULT_METRICS` where
+ * nothing is laid out.
+ */
+export declare function measureMetrics(parent: HTMLElement): BlockMetrics;
+/** Metrics as measured, any that could not be read replaced by the default. */
+export declare function withinReason(metrics: BlockMetrics): BlockMetrics;
+/** What a block is, for its estimate. */
+export type BlockKind = 'frontmatter' | 'callout' | 'table' | 'embed' | 'diagram' | 'preview' | 'add-properties';
+/** The height a block of this kind and these lines is drawn at, near enough to lay out the page. */
+export declare function estimateHeight(kind: BlockKind, source: string, metrics: BlockMetrics): number;
+/** The height a block of this content was drawn at at this width, if it was. */
+export declare function measuredHeight(identity: string, metrics: BlockMetrics): number | undefined;
+/** Remembers the height a block was drawn at. */
+export declare function rememberHeight(identity: string, metrics: BlockMetrics, height: number): void;