@hachej/boring-ui-kit 0.3.1 → 0.4.0

package/dist/markdown-editor.js

@@ -1,8 +1,11 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextDraftControls } from './text-draft-controls.js';
-import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { useMarkdownAutosave } from './markdown-autosave.js';
+import { Fragment, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
 import { EditorContent, useEditor, useEditorState } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
 import { createMarkdownExtensions } from './markdown-extensions.js';
 import { checkMarkdownRichSafety, describeUnsafe, finishRichMarkdown } from './markdown-safety.js';
 import { MarkdownIcon } from './markdown-icons.js';
@@ -18,7 +21,55 @@ export function MarkdownEditor(props) {
         setMount({ controller: props.controller, sequence: mount.sequence + 1 });
     return _jsx(MarkdownEditorSession, { ...props, activeController: active }, mount.sequence);
 }
-function MarkdownEditorSession({ controller, title = 'Document', initialMode = 'rich', placeholder = 'Start writing', className, onMountedTools, header = true, mode: controlledMode, onModeChange, onRichSafety, resolveImage, activeController: active }) {
+const PHONE_QUERY = '(max-width: 640px)';
+const phoneSnapshot = () => globalThis.matchMedia?.(PHONE_QUERY).matches === true;
+const desktopSnapshot = () => false;
+const subscribePhone = (notify) => {
+    const media = globalThis.matchMedia?.(PHONE_QUERY);
+    media?.addEventListener('change', notify);
+    return () => media?.removeEventListener('change', notify);
+};
+const BUBBLE_OPTIONS = { strategy: 'fixed', placement: 'top', offset: 8, shift: { padding: 12 }, flip: true };
+const bubbleContainer = () => document.body;
+function useEditorFocus(editor) {
+    const [focused, setFocused] = useState(false);
+    useEffect(() => {
+        if (!editor || editor.isDestroyed)
+            return;
+        const update = () => setFocused(editor.isFocused);
+        update();
+        editor.on('focus', update);
+        editor.on('blur', update);
+        return () => { editor.off('focus', update); editor.off('blur', update); };
+    }, [editor]);
+    return focused;
+}
+/** Height the soft keyboard covers at the bottom of the layout viewport, so a fixed bar can sit directly above it. */
+function useKeyboardInset(active) {
+    const [inset, setInset] = useState(0);
+    useEffect(() => {
+        const viewport = globalThis.visualViewport;
+        if (!active || !viewport) {
+            setInset(0);
+            return;
+        }
+        const update = () => setInset(Math.max(0, Math.round(globalThis.innerHeight - viewport.offsetTop - viewport.height)));
+        update();
+        viewport.addEventListener('resize', update);
+        viewport.addEventListener('scroll', update);
+        return () => { viewport.removeEventListener('resize', update); viewport.removeEventListener('scroll', update); };
+    }, [active]);
+    return inset;
+}
+function MarkdownEditorSession({ components, controller, title = 'Document', initialMode = 'rich', placeholder = 'Start writing', className, onMountedTools, header = true, showOutline = header, mode: controlledMode, onModeChange, onRichSafety, resolveImage, formattingToolbar = 'pinned', autosave = true, onAutosaveChange, onSaveResult, activeController: active }) {
+    const Control = components?.button ?? 'button';
+    const Bubble = components?.bubble ?? Fragment;
+    const Source = components?.textarea ?? 'textarea';
+    const LinkInput = components?.input ?? 'input';
+    const phone = useSyncExternalStore(subscribePhone, phoneSnapshot, desktopSnapshot);
+    const [pinned, setPinned] = useState(formattingToolbar === 'pinned');
+    useEffect(() => { setPinned(formattingToolbar === 'pinned'); }, [formattingToolbar]);
+    const showPinned = pinned && !phone;
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const projected = useRef(null);
     const emitted = useRef(null);
@@ -160,20 +211,26 @@ function MarkdownEditorSession({ controller, title = 'Document', initialMode = '
     const outcome = state.save.kind === 'settled' ? state.save.result : null;
     const uncertain = outcome?.kind === 'unknown';
     const conflict = outcome?.kind === 'conflict' || state.remote !== null;
-    const save = () => {
-        const selected = controller.actions.selection();
-        setError(null);
-        void controller.flush(selected).then(report, () => { if (active.current === controller)
-            setError('The save could not be completed. Your text is still available.'); });
-    };
     /** Shows a refused save or accept; the buffer keeps the text. */
     const report = (result) => {
         if (active.current !== controller || !result || typeof result !== 'object')
             return;
         const { kind, reason } = result;
+        if (kind === 'saved')
+            setError(null);
         if (kind === 'denied' || kind === 'conflict' || kind === 'unavailable' || kind === 'file_too_large')
             setError(typeof reason === 'string' && reason ? reason : kind === 'conflict' ? 'The document changed elsewhere. Your text is still available.' : 'The document could not be saved. Your text is still available.');
     };
+    const saving = useMarkdownAutosave(controller, autosave, result => { report(result); onSaveResult?.(result); });
+    useEffect(() => { onAutosaveChange?.(saving.enabled ? saving.immediate : null); return () => onAutosaveChange?.(null); }, [onAutosaveChange, saving.enabled, saving.immediate]);
+    const save = () => {
+        setError(null);
+        if (saving.enabled)
+            void saving.manual();
+        else
+            void controller.flush(controller.actions.selection()).then(report, () => { if (active.current === controller)
+                setError('The save could not be completed. Your text is still available.'); });
+    };
     const run = (operation) => {
         setError(null);
         void operation().then(report, () => { if (active.current === controller)
@@ -181,14 +238,19 @@ function MarkdownEditorSession({ controller, title = 'Document', initialMode = '
     };
     const richOnly = unavailable || mode === 'source' || !editor;
     const [linkDraft, setLinkDraft] = useState(null);
+    // On a phone the full formatting row docks above the soft keyboard while the rich surface has focus.
+    const editing = useEditorFocus(editor);
+    const dockVisible = phone && !unavailable && !!editor && (editing || linkDraft !== null);
+    const keyboardInset = useKeyboardInset(dockVisible);
     const command = (operation) => { interaction.current = true; try {
         operation();
     }
     finally {
         interaction.current = false;
     } };
-    const tool = (label, icon, pressed, operation, extra = {}) => (_jsx("button", { type: "button", className: "boring-markdown-tool", "aria-label": label, title: label, "aria-pressed": pressed === true, "data-active": pressed === true || undefined, disabled: richOnly || extra.disabled, onClick: () => command(operation), children: _jsx(MarkdownIcon, { name: icon }) }));
-    const separator = _jsx("span", { role: "separator", "aria-orientation": "vertical", className: "boring-markdown-separator" });
+    const tool = (label, icon, pressed, operation, extra = {}) => (_jsx(Control, { type: "button", className: "boring-markdown-tool", "aria-label": label, title: label, "aria-pressed": pressed === true, "data-active": pressed === true || undefined, disabled: richOnly || extra.disabled, onClick: () => command(operation), children: _jsx(MarkdownIcon, { name: icon }) }));
+    const Rule = components?.separator;
+    const separator = Rule ? _jsx(Rule, { orientation: "vertical", className: "boring-markdown-separator" }) : _jsx("span", { role: "separator", "aria-orientation": "vertical", className: "boring-markdown-separator" });
     const chain = () => editor.chain().focus();
     const openLink = () => setLinkDraft(marks?.href ?? '');
     const applyLink = () => {
@@ -198,17 +260,19 @@ function MarkdownEditorSession({ controller, title = 'Document', initialMode = '
         command(() => href === '' ? chain().extendMarkRange('link').unsetLink().run() : chain().extendMarkRange('link').setLink({ href }).run());
         setLinkDraft(null);
     };
-    return _jsxs("section", { className: className, "data-boring": "markdown-editor", "data-mode": mode, "data-dirty": state.dirty || undefined, onKeyDownCapture: event => {
+    const formatTools = _jsxs(_Fragment, { children: [tool('Bold', 'Bold', marks?.bold, () => chain().toggleBold().run()), tool('Italic', 'Italic', marks?.italic, () => chain().toggleItalic().run()), tool('Strikethrough', 'Strike', marks?.strike, () => chain().toggleStrike().run()), tool('Highlight', 'Highlight', marks?.highlight, () => chain().toggleHighlight().run()), tool('Code', 'Code', marks?.code, () => chain().toggleCode().run()), separator, tool('Heading 1', 'Heading1', marks?.h1, () => chain().toggleHeading({ level: 1 }).run()), tool('Heading 2', 'Heading2', marks?.h2, () => chain().toggleHeading({ level: 2 }).run()), tool('Heading 3', 'Heading3', marks?.h3, () => chain().toggleHeading({ level: 3 }).run()), separator, tool('Bullet list', 'BulletList', marks?.bullet, () => chain().toggleBulletList().run()), tool('Numbered list', 'OrderedList', marks?.ordered, () => chain().toggleOrderedList().run()), tool('Task list', 'TaskList', marks?.task, () => chain().toggleTaskList().run()), separator, tool('Quote', 'Quote', marks?.quote, () => chain().toggleBlockquote().run()), tool('Code block', 'CodeBlock', marks?.codeBlock, () => chain().toggleCodeBlock().run()), tool('Link', 'Link', marks?.link || linkDraft !== null, openLink), tool('Table', 'Table', marks?.table, () => marks?.table ? chain().deleteTable().run() : chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()), tool('Horizontal rule', 'Rule', false, () => chain().setHorizontalRule().run()), marks?.table && _jsxs(_Fragment, { children: [separator, tool('Add table row', 'Rows', false, () => chain().addRowAfter().run()), tool('Add table column', 'Columns', false, () => chain().addColumnAfter().run()), tool('Delete table', 'Trash', false, () => chain().deleteTable().run())] })] });
+    return _jsxs("section", { className: className, "data-boring": "markdown-editor", "data-mode": mode, "data-dock": (mode === 'rich' && dockVisible) || undefined, "data-dirty": state.dirty || undefined, onBlurCapture: event => { if (saving.enabled && !event.currentTarget.contains(event.relatedTarget))
+            void saving.immediate(); }, onKeyDownCapture: event => {
             if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
                 event.preventDefault();
-                if (!unavailable && !pending && !uncertain)
+                if (!unavailable && !uncertain)
                     save();
             }
-        }, children: [header && _jsxs("header", { children: [_jsx("strong", { children: title }), state.readOnly && _jsx("span", { children: "Read only" }), _jsx("span", { role: "status", children: state.lifecycle === 'disposed' ? 'Closed' : pending ? 'Saving' : uncertain ? 'Save unconfirmed' : conflict ? 'Changed elsewhere' : state.dirty ? 'Unsaved changes' : 'Saved' }), _jsx("button", { type: "button", "aria-pressed": mode === 'source', disabled: !richOffered, onClick: switchMode, children: "Markdown source" }), _jsx("button", { type: "button", disabled: unavailable || !state.dirty || pending || uncertain, onClick: save, children: "Save" })] }), _jsx(TextDraftControls, { recovery: state.recovery, actions: controller.actions, readOnly: state.readOnly, blocked: state.lifecycle !== 'active' || state.save.kind === 'pending' || (state.save.kind === 'settled' && state.save.result.kind === 'unknown') }), mode === 'rich' && _jsxs("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-markdown-toolbar", children: [tool('Bold', 'Bold', marks?.bold, () => chain().toggleBold().run()), tool('Italic', 'Italic', marks?.italic, () => chain().toggleItalic().run()), tool('Strikethrough', 'Strike', marks?.strike, () => chain().toggleStrike().run()), tool('Highlight', 'Highlight', marks?.highlight, () => chain().toggleHighlight().run()), tool('Code', 'Code', marks?.code, () => chain().toggleCode().run()), separator, tool('Heading 1', 'Heading1', marks?.h1, () => chain().toggleHeading({ level: 1 }).run()), tool('Heading 2', 'Heading2', marks?.h2, () => chain().toggleHeading({ level: 2 }).run()), tool('Heading 3', 'Heading3', marks?.h3, () => chain().toggleHeading({ level: 3 }).run()), separator, tool('Bullet list', 'BulletList', marks?.bullet, () => chain().toggleBulletList().run()), tool('Numbered list', 'OrderedList', marks?.ordered, () => chain().toggleOrderedList().run()), tool('Task list', 'TaskList', marks?.task, () => chain().toggleTaskList().run()), separator, tool('Quote', 'Quote', marks?.quote, () => chain().toggleBlockquote().run()), tool('Code block', 'CodeBlock', marks?.codeBlock, () => chain().toggleCodeBlock().run()), tool('Link', 'Link', marks?.link || linkDraft !== null, openLink), tool('Table', 'Table', marks?.table, () => marks?.table ? chain().deleteTable().run() : chain().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()), tool('Horizontal rule', 'Rule', false, () => chain().setHorizontalRule().run()), marks?.table && _jsxs(_Fragment, { children: [separator, tool('Add table row', 'Rows', false, () => chain().addRowAfter().run()), tool('Add table column', 'Columns', false, () => chain().addColumnAfter().run()), tool('Delete table', 'Trash', false, () => chain().deleteTable().run())] })] }), mode === 'rich' && linkDraft !== null && _jsxs("form", { className: "boring-markdown-link", "aria-label": "Link address", onSubmit: event => { event.preventDefault(); applyLink(); }, children: [_jsx("input", { type: "text", inputMode: "url", autoFocus: true, "aria-label": "Link address", placeholder: "https://", value: linkDraft, onChange: event => setLinkDraft(event.currentTarget.value), onKeyDown: event => { if (event.key === 'Escape') {
+        }, children: [header && _jsxs("header", { children: [_jsx("strong", { children: title }), state.readOnly && _jsx("span", { children: "Read only" }), _jsx("span", { role: "status", children: state.lifecycle === 'disposed' ? 'Closed' : pending ? 'Saving…' : uncertain ? 'Save unconfirmed' : conflict ? 'Changed elsewhere' : state.dirty ? 'Unsaved changes' : 'Saved' }), mode === 'rich' && !phone && !unavailable && _jsx(Control, { type: "button", className: "boring-markdown-pin", "aria-label": "Pin formatting toolbar", title: "Pin formatting toolbar", "aria-pressed": pinned, onClick: () => setPinned(value => !value), children: "Aa" }), _jsx(Control, { type: "button", "aria-pressed": mode === 'source', disabled: !richOffered, onClick: switchMode, children: "Markdown source" }), !saving.enabled && _jsx(Control, { type: "button", disabled: unavailable || !state.dirty || pending || uncertain, onClick: save, children: "Save" })] }), _jsx(TextDraftControls, { components: components, recovery: state.recovery, actions: controller.actions, readOnly: state.readOnly, blocked: state.lifecycle !== 'active' || state.save.kind === 'pending' || (state.save.kind === 'settled' && state.save.result.kind === 'unknown') }), mode === 'rich' && showPinned && _jsx("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-markdown-toolbar", children: formatTools }), mode === 'rich' && dockVisible && createPortal(_jsxs("div", { role: "toolbar", "aria-label": "Text formatting", className: "boring-viewer boring-markdown-dock", "data-testid": "markdown-dock", "data-keyboard": keyboardInset > 0 || undefined, style: { bottom: keyboardInset }, onPointerDown: event => event.preventDefault(), children: [Rule && _jsx(Rule, { className: "boring-markdown-dock-rule" }), formatTools] }), document.body), mode === 'rich' && editor && !showPinned && !unavailable && _jsx(BubbleMenu, { editor: editor, updateDelay: 0, options: BUBBLE_OPTIONS, appendTo: bubbleContainer, role: "toolbar", "aria-label": "Text formatting", className: "boring-viewer boring-markdown-bubble", children: _jsxs(Bubble, { children: [tool('Bold', 'Bold', marks?.bold, () => chain().toggleBold().run()), tool('Italic', 'Italic', marks?.italic, () => chain().toggleItalic().run()), tool('Highlight', 'Highlight', marks?.highlight, () => chain().toggleHighlight().run()), tool('Code', 'Code', marks?.code, () => chain().toggleCode().run()), tool('Link', 'Link', marks?.link || linkDraft !== null, openLink)] }) }), mode === 'rich' && linkDraft !== null && _jsxs("form", { className: "boring-markdown-link", "aria-label": "Link address", onSubmit: event => { event.preventDefault(); applyLink(); }, children: [_jsx(LinkInput, { type: "text", inputMode: "url", autoFocus: true, "aria-label": "Link address", placeholder: "https://", value: linkDraft, onChange: event => setLinkDraft(event.currentTarget.value), onKeyDown: event => { if (event.key === 'Escape') {
                             event.preventDefault();
                             setLinkDraft(null);
                             editor?.commands.focus();
-                        } } }), _jsx("button", { type: "submit", children: linkDraft.trim() === '' && marks?.link ? 'Remove link' : 'Apply link' }), _jsx("button", { type: "button", onClick: () => { setLinkDraft(null); editor?.commands.focus(); }, children: "Cancel" })] }), !richOffered && _jsx("p", { role: "note", className: "boring-markdown-notice", "data-testid": "markdown-source-only", children: describeUnsafe(safety) }), mode === 'rich' && outline && outline.headings.length > 0 && _jsx("nav", { "aria-label": "Document outline", children: _jsx("ol", { children: outline.headings.map((heading, index) => _jsx("li", { "data-heading-level": heading.level, children: _jsx("button", { type: "button", "aria-label": `Go to heading: ${heading.text || 'Untitled heading'}`, disabled: state.lifecycle !== 'active', onClick: () => {
+                        } } }), _jsx(Control, { type: "submit", children: linkDraft.trim() === '' && marks?.link ? 'Remove link' : 'Apply link' }), _jsx(Control, { type: "button", onClick: () => { setLinkDraft(null); editor?.commands.focus(); }, children: "Cancel" })] }), !richOffered && _jsx("p", { role: "note", className: "boring-markdown-notice", "data-testid": "markdown-source-only", children: describeUnsafe(safety) }), showOutline && mode === 'rich' && outline && outline.headings.length > 0 && _jsx("nav", { "aria-label": "Document outline", children: _jsx("ol", { children: outline.headings.map((heading, index) => _jsx("li", { "data-heading-level": heading.level, children: _jsx(Control, { type: "button", "aria-label": `Go to heading: ${heading.text || 'Untitled heading'}`, disabled: state.lifecycle !== 'active', onClick: () => {
                                 if (!editor || editor.isDestroyed || active.current !== controller || controller.getSnapshot().lifecycle !== 'active'
                                     || controller.getSnapshot().bufferVersion !== state.bufferVersion || editor.state.doc !== outline.document)
                                     return;
@@ -222,8 +286,8 @@ function MarkdownEditorSession({ controller, title = 'Document', initialMode = '
                                             setError(result.reason);
                                     }).catch(() => { if (active.current === controller)
                                         setError('The heading could not be selected'); });
-                            }, children: heading.text || 'Untitled heading' }) }, heading.position)) }) }), uncertain && _jsxs("div", { role: "alert", className: "boring-markdown-alert", children: ["Save acknowledgement was lost. Keep editing while its outcome is checked.", _jsx("button", { type: "button", onClick: () => run(controller.actions.reconcile), children: "Check save outcome" }), _jsx("button", { type: "button", onClick: () => run(controller.actions.abandon), children: "Stop checking and refresh, keeping my draft" })] }), conflict && _jsxs("div", { role: "alert", className: "boring-markdown-alert", children: ["The saved document changed. Your local text has been kept.", _jsx("button", { type: "button", disabled: pending || uncertain, onClick: () => run(controller.actions.refresh), children: "Check saved version" }), _jsx("button", { type: "button", disabled: pending || uncertain, onClick: () => run(controller.actions.discardToRemote), children: "Discard local changes and reload" })] }), (outcome?.kind === 'denied' || outcome?.kind === 'unavailable' || outcome?.kind === 'file_too_large') && _jsx("p", { role: "alert", className: "boring-markdown-alert", children: outcome.reason }), error && _jsx("p", { role: "alert", className: "boring-markdown-alert", children: error }), state.proposals.map(proposal => _jsxs("article", { "data-boring": "proposal", className: "boring-markdown-proposal", children: [_jsx("h3", { children: proposal.summary || 'Proposed edit' }), _jsxs("details", { children: [_jsx("summary", { children: "Review text changes" }), _jsx(MarkdownProposalDiff, { proposal: proposal }), _jsxs("details", { children: [_jsx("summary", { children: "Exact before and after" }), _jsx("h4", { children: "Before" }), _jsx("pre", { children: proposal.before }), _jsx("h4", { children: "After" }), _jsx("pre", { children: proposal.after })] })] }), _jsx("button", { type: "button", disabled: unavailable || pending || uncertain || proposal.adopted, onClick: () => run(() => controller.actions.accept(proposal.id)), children: proposal.adopted ? 'Adopted' : 'Accept and save' }), _jsx("button", { type: "button", onClick: () => controller.actions.reject(proposal.id), children: "Dismiss proposal" })] }, proposal.id)), mode === 'source'
-                ? _jsx("textarea", { ref: sourceInput, className: "boring-markdown-source", "aria-label": `${title} Markdown source`, value: state.text, readOnly: unavailable, spellCheck: false, onChange: event => controller.actions.edit(event.currentTarget.value) })
+                            }, children: heading.text || 'Untitled heading' }) }, heading.position)) }) }), uncertain && _jsxs("div", { role: "alert", className: "boring-markdown-alert", children: ["Save acknowledgement was lost. Keep editing while its outcome is checked.", _jsx(Control, { type: "button", onClick: () => run(controller.actions.reconcile), children: "Check save outcome" }), _jsx(Control, { type: "button", onClick: () => run(controller.actions.abandon), children: "Stop checking and refresh, keeping my draft" })] }), conflict && _jsxs("div", { role: "alert", className: "boring-markdown-alert", children: ["The saved document changed. Your local text has been kept.", _jsx(Control, { type: "button", disabled: pending || uncertain, onClick: () => run(controller.actions.refresh), children: "Check saved version" }), _jsx(Control, { type: "button", disabled: pending || uncertain, onClick: () => run(controller.actions.discardToRemote), children: "Discard local changes and reload" })] }), (outcome?.kind === 'denied' || outcome?.kind === 'unavailable' || outcome?.kind === 'file_too_large') && _jsx("p", { role: "alert", className: "boring-markdown-alert", children: outcome.reason }), error && _jsx("p", { role: "alert", className: "boring-markdown-alert", children: error }), state.proposals.map(proposal => _jsxs("article", { "data-boring": "proposal", className: "boring-markdown-proposal", children: [_jsx("h3", { children: proposal.summary || 'Proposed edit' }), _jsxs("details", { children: [_jsx("summary", { children: "Review text changes" }), _jsx(MarkdownProposalDiff, { components: components, proposal: proposal }), _jsxs("details", { children: [_jsx("summary", { children: "Exact before and after" }), _jsx("h4", { children: "Before" }), _jsx("pre", { children: proposal.before }), _jsx("h4", { children: "After" }), _jsx("pre", { children: proposal.after })] })] }), _jsx(Control, { type: "button", disabled: unavailable || pending || uncertain || proposal.adopted, onClick: () => run(() => controller.actions.accept(proposal.id)), children: proposal.adopted ? 'Adopted' : 'Accept and save' }), _jsx(Control, { type: "button", onClick: () => controller.actions.reject(proposal.id), children: "Dismiss proposal" })] }, proposal.id)), mode === 'source'
+                ? _jsx(Source, { ref: sourceInput, className: "boring-markdown-source", "aria-label": `${title} Markdown source`, value: state.text, readOnly: unavailable, spellCheck: false, onChange: event => controller.actions.edit(event.currentTarget.value) })
                 : _jsx("div", { className: "boring-markdown-surface", onKeyDownCapture: markInteraction, onBeforeInputCapture: markInteraction, onInputCapture: markInteraction, onPasteCapture: markInteraction, onDropCapture: markInteraction, onChangeCapture: markInteraction, onClickCapture: event => { markInteraction(); if (event.target instanceof Element && event.target.closest('a'))
                         event.preventDefault(); }, onAuxClickCapture: event => { if (event.target instanceof Element && event.target.closest('a'))
                         event.preventDefault(); }, children: _jsx(EditorContent, { editor: editor }) })] });

package/dist/markdown-extensions.js

@@ -5,6 +5,7 @@ import { TaskItem, TaskList } from '@tiptap/extension-list';
 import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
 import Image from '@tiptap/extension-image';
 import Highlight from '@tiptap/extension-highlight';
+import { Node as TiptapNode } from '@tiptap/core';
 import { createMarkdownParser } from './markdown-parser.js';
 /**
  * The serialiser HTML-encodes text (`&` becomes `&`), which rewrites ordinary prose such as "Notes & Highlights". The parser
@@ -24,6 +25,13 @@ const PlainTextMarkdown = Markdown.extend({
         };
     },
 });
+const RichStarterKit = StarterKit.extend({
+    addExtensions() {
+        return (this.parent?.() ?? []).map(extension => extension instanceof TiptapNode && extension.name === 'paragraph'
+            ? extension.extend({ renderMarkdown: (node, helpers) => helpers.renderChildren(node.content ?? []) })
+            : extension);
+    },
+});
 /**
  * A GFM table keeps the exact text it was written in (unpadded `|a|b|`, `:---:` alignment rows, `_emphasis_`, escaped pipes, empty
  * cells) while its content is unchanged: parsing records the source and the canonical JSON of the rows it produced, and rendering
@@ -85,7 +93,7 @@ export function createMarkdownExtensions({ placeholder, images } = {}) {
         onBeforeCreate() { this.parent?.(); schema = this.editor.schema; },
     });
     return [
-        StarterKit.configure({ link: { openOnClick: false, autolink: false, linkOnPaste: false }, underline: false }),
+        RichStarterKit.configure({ link: { openOnClick: false, autolink: false, linkOnPaste: false }, underline: false }),
         TaskList, TaskItem.configure({ nested: true }),
         SourceTable.configure({ resizable: false }), TableRow, TableHeader, TableCell,
         InertImage.configure({ inline: false, allowBase64: true }),

package/dist/markdown-proposal-diff.d.ts

@@ -1,5 +1,6 @@
 import type { MarkdownProposal } from './markdown.js';
-export declare function MarkdownProposalDiff({ proposal }: {
+export declare function MarkdownProposalDiff({ components, proposal }: {
+    readonly components?: import('./viewer-components.js').ViewerComponents | undefined;
     readonly proposal: MarkdownProposal;
 }): import("react").JSX.Element;
 //# sourceMappingURL=markdown-proposal-diff.d.ts.map

package/dist/markdown-proposal-diff.js

@@ -107,11 +107,12 @@ function DiffRow({ line }) {
     const display = terminated ? line.value.slice(0, -1) : line.value;
     return _jsxs("div", { "data-diff": line.kind, "data-line-ending": terminated ? 'lf' : 'none', children: [_jsx("span", { children: line.kind === 'add' ? '+ ' : line.kind === 'remove' ? '- ' : '  ' }), _jsx("span", { "data-diff-text": "", children: display }), line.kind !== 'same' && line.value.endsWith('\r\n') && _jsx("span", { "data-diff-crlf": "", children: " CRLF line ending" }), !terminated && _jsx("span", { "data-diff-no-newline": "", children: " No newline at end" })] });
 }
-export function MarkdownProposalDiff({ proposal }) {
+export function MarkdownProposalDiff({ components, proposal }) {
+    const Control = components?.button ?? 'button';
     const diff = useMemo(() => review(proposal.before, proposal.after), [proposal.before, proposal.after]);
     const shown = useMemo(() => entries(diff.lines), [diff]);
     const [expanded, setExpanded] = useState(() => new Set());
-    return _jsxs("div", { "data-boring": "proposal-diff", role: "group", "aria-label": "Proposed line changes", children: [diff.fallback && _jsx("p", { role: "status", "data-diff-fallback": "", children: "Detailed line alignment unavailable; showing changed block." }), proposal.before === proposal.after && _jsx("p", { children: "No text changes" }), _jsx("div", { style: { overflowX: 'auto', whiteSpace: 'pre-wrap' }, children: shown.map((entry, index) => entry.kind === 'fold' ? _jsxs("div", { children: [_jsxs("button", { type: "button", "data-diff-fold": "", "aria-expanded": expanded.has(entry.index), onClick: () => setExpanded(current => {
+    return _jsxs("div", { "data-boring": "proposal-diff", role: "group", "aria-label": "Proposed line changes", children: [diff.fallback && _jsx("p", { role: "status", "data-diff-fallback": "", children: "Detailed line alignment unavailable; showing changed block." }), proposal.before === proposal.after && _jsx("p", { children: "No text changes" }), _jsx("div", { style: { overflowX: 'auto', whiteSpace: 'pre-wrap' }, children: shown.map((entry, index) => entry.kind === 'fold' ? _jsxs("div", { children: [_jsxs(Control, { type: "button", "data-diff-fold": "", "aria-expanded": expanded.has(entry.index), onClick: () => setExpanded(current => {
                                 const next = new Set(current);
                                 if (next.has(entry.index))
                                     next.delete(entry.index);

package/dist/markdown-safety.js

@@ -7,10 +7,12 @@ export function normalizeMarkdownWhitespace(text) {
     const lines = text.split('\n');
     const out = [];
     let fence;
-    for (const line of lines) {
+    for (let line of lines) {
         const opened = FENCE.exec(line);
         if (opened && (!fence || opened[1] === fence))
             fence = fence ? undefined : opened[1];
+        if (!fence && !opened && !/^ {4}|^\t/.test(line) && /^(?:[ \t]* [ \t]*)+$/.test(line))
+            line = '';
         if (!fence && !opened && line.trim() === '' && out.length > 0 && out[out.length - 1].trim() === '')
             continue;
         out.push(line);

package/dist/native-chat.js

@@ -202,7 +202,7 @@ export function createNativeChatController(options) {
                     }
                     const cursor = page.next === undefined ? undefined : structuredClone(page.next);
                     historyScan = { maxEntryId: scan.maxEntryId, ...(cursor === undefined ? {} : { cursor }), ...(previousId === undefined ? {} : { lastId: previousId }) };
-                    publish({ history: { kind: 'ready', entries: Object.freeze([...page.items].reverse()), hasMore: cursor !== undefined } });
+                    publish({ history: { kind: 'ready', entries: Object.freeze([...page.items].reverse().concat(entries)), hasMore: cursor !== undefined } });
                 }
                 catch (error) {
                     if (current())

package/dist/remote-chat.js

@@ -316,7 +316,11 @@ export async function createRemoteChat(options) {
         // The controller only reconciles a submission by request ID; no other transaction work crosses the wire.
         commit: async (change, _context) => change({ submissionByRequest: (_conversationId, requestId) => lookup(requestId) }),
         abort: async () => { await post('abort', {}); },
-        entries: async (_query, limit, cursor) => (await call('entries', {}, { limit: String(limit), ...(cursor === undefined ? {} : { cursor: JSON.stringify(cursor) }) })).page,
+        entries: async (query, limit, cursor) => (await call('entries', {}, { limit: String(limit),
+            ...(query.maxEntryId === undefined ? {} : { maxEntryId: String(query.maxEntryId) }),
+            ...(query.minEntryId === undefined ? {} : { minEntryId: String(query.minEntryId) }),
+            ...(query.order === undefined ? {} : { order: query.order }),
+            ...(cursor === undefined ? {} : { cursor: JSON.stringify(cursor) }) })).page,
     };
     const context = Object.freeze({});
     const close = async () => { const first = unclaimed; unclaimed = undefined; await first?.stop(); };

package/dist/text-buffer.js

@@ -233,8 +233,9 @@ export function createTextBuffer(options) {
             return read;
         }
         if (sameBase(remote, state.base) && !discard) {
-            if (state.remote !== null)
-                update({ ...state, remote: null });
+            const resolved = state.save.kind === 'settled' && state.save.result.kind !== 'saved';
+            if (state.remote !== null || resolved)
+                update({ ...state, remote: null, save: resolved ? { kind: 'idle' } : state.save });
             return read;
         }
         if (state.dirty && (!discard || state.bufferVersion !== previousVersion)) {

package/dist/text-draft-controls.d.ts

@@ -1,9 +1,11 @@
 import type { TextDraftActions, TextDraftRecoveryState } from './text-draft-types.js';
+import type { ViewerComponents } from './viewer-components.js';
 export interface TextDraftControlsProps {
+    readonly components?: ViewerComponents | undefined;
     readonly recovery: TextDraftRecoveryState;
     readonly actions: TextDraftActions;
     readonly readOnly?: boolean;
     readonly blocked?: boolean;
 }
-export declare function TextDraftControls({ recovery, actions, readOnly, blocked }: TextDraftControlsProps): import("react").JSX.Element | null;
+export declare function TextDraftControls({ components, recovery, actions, readOnly, blocked }: TextDraftControlsProps): import("react").JSX.Element | null;
 //# sourceMappingURL=text-draft-controls.d.ts.map

package/dist/text-draft-controls.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
-export function TextDraftControls({ recovery, actions, readOnly = false, blocked = false }) {
+export function TextDraftControls({ components, recovery, actions, readOnly = false, blocked = false }) {
+    const Control = components?.button ?? 'button';
     const owner = useRef({ actions, busy: false });
     const [pending, setPending] = useState(false);
     const [notice, setNotice] = useState();
@@ -29,5 +30,5 @@ export function TextDraftControls({ recovery, actions, readOnly = false, blocked
     const discovery = active ? recovery.discovery : undefined;
     const checkpoint = active ? recovery.checkpoint : undefined;
     const status = !active ? `Draft recovery ${recovery.kind}` : discovery?.kind === 'checking' ? 'Checking stored drafts' : checkpoint?.kind === 'pending' ? 'Storing draft' : checkpoint?.kind === 'stored' ? 'Draft stored for recovery. Storage is not a save receipt.' : checkpoint?.kind === 'failed' ? 'Draft recovery storage unavailable' : 'Draft recovery enabled';
-    return _jsxs("section", { "data-boring": "text-draft-controls", "aria-label": "Draft recovery", children: [_jsx("p", { role: "status", children: status }), _jsx("button", { type: "button", disabled: !active || pending || blocked || discovery?.kind === 'checking', onClick: () => run(actions.checkDrafts), children: "Check stored drafts" }), _jsx("button", { type: "button", disabled: !active || pending || readOnly, onClick: () => run(actions.checkpointDraft), children: "Store draft for recovery" }), discovery?.kind === 'empty' && _jsx("p", { children: "No stored drafts" }), discovery && 'reason' in discovery && _jsx("p", { role: "alert", children: discovery.reason }), checkpoint?.kind === 'failed' && _jsx("p", { role: "alert", children: checkpoint.result.reason }), discovery?.kind === 'offered' && _jsxs(_Fragment, { children: [discovery.truncated && _jsx("p", { children: "More stored drafts exist than this listing shows." }), discovery.choices.map(choice => _jsxs("div", { role: "group", "aria-label": "Stored draft", children: [_jsx("p", { children: choice.compatibility === 'conflict' ? 'Saved revision changed. Review this draft separately.' : 'Stored draft matches the checked saved revision.' }), _jsxs("details", { children: [_jsx("summary", { children: "Review stored draft" }), _jsx("pre", { children: choice.text })] }), _jsx("button", { type: "button", disabled: pending || blocked || readOnly || choice.compatibility !== 'exact', onClick: () => run(() => actions.restoreDraft(choice.selection)), children: "Restore draft" }), _jsx("button", { type: "button", disabled: pending || blocked, onClick: () => run(() => actions.discardDraft(choice.selection)), children: "Discard stored draft" })] }, `${choice.selection.offerId}:${choice.selection.draft.writerId}:${choice.selection.draft.sequence}`))] }), notice && _jsx("p", { role: "alert", children: notice })] });
+    return _jsxs("section", { "data-boring": "text-draft-controls", "aria-label": "Draft recovery", children: [_jsx("p", { role: "status", children: status }), _jsx(Control, { type: "button", disabled: !active || pending || blocked || discovery?.kind === 'checking', onClick: () => run(actions.checkDrafts), children: "Check stored drafts" }), _jsx(Control, { type: "button", disabled: !active || pending || readOnly, onClick: () => run(actions.checkpointDraft), children: "Store draft for recovery" }), discovery?.kind === 'empty' && _jsx("p", { children: "No stored drafts" }), discovery && 'reason' in discovery && _jsx("p", { role: "alert", children: discovery.reason }), checkpoint?.kind === 'failed' && _jsx("p", { role: "alert", children: checkpoint.result.reason }), discovery?.kind === 'offered' && _jsxs(_Fragment, { children: [discovery.truncated && _jsx("p", { children: "More stored drafts exist than this listing shows." }), discovery.choices.map(choice => _jsxs("div", { role: "group", "aria-label": "Stored draft", children: [_jsx("p", { children: choice.compatibility === 'conflict' ? 'Saved revision changed. Review this draft separately.' : 'Stored draft matches the checked saved revision.' }), _jsxs("details", { children: [_jsx("summary", { children: "Review stored draft" }), _jsx("pre", { children: choice.text })] }), _jsx(Control, { type: "button", disabled: pending || blocked || readOnly || choice.compatibility !== 'exact', onClick: () => run(() => actions.restoreDraft(choice.selection)), children: "Restore draft" }), _jsx(Control, { type: "button", disabled: pending || blocked, onClick: () => run(() => actions.discardDraft(choice.selection)), children: "Discard stored draft" })] }, `${choice.selection.offerId}:${choice.selection.draft.writerId}:${choice.selection.draft.sequence}`))] }), notice && _jsx("p", { role: "alert", children: notice })] });
 }

package/dist/viewer-components.d.ts

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef, ComponentType, PropsWithChildren } from 'react';
+/** Host presentation for the document renderers. Bindings must forward refs and native input events. */
+export interface ViewerComponents {
+    readonly button: ComponentType<ComponentPropsWithRef<'button'>>;
+    readonly input: ComponentType<ComponentPropsWithRef<'input'>>;
+    readonly textarea: ComponentType<ComponentPropsWithRef<'textarea'>>;
+    readonly bubble?: ComponentType<PropsWithChildren>;
+    /** The host's separator: vertical between toolbar groups, horizontal above the phone formatting bar. */
+    readonly separator?: ComponentType<{
+        readonly orientation?: 'horizontal' | 'vertical';
+        readonly className?: string;
+    }>;
+}
+//# sourceMappingURL=viewer-components.d.ts.map

package/dist/viewer-components.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "private": false,
   "type": "module",
@@ -110,7 +110,7 @@
     "./file-tree.css": "./styles/file-tree.css"
   },
   "peerDependencies": {
-    "@hachej/boring-files": "^0.3.1",
+    "@hachej/boring-files": "^0.4.0",
     "@earendil-works/pi-durable": "~1.2.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -137,7 +137,7 @@
     "zod": "^4.6.5",
     "@tldraw/tlschema": "^5.5.2",
     "lucide-react": "^1.51.0",
-    "radix-ui": "^1.8.0"
+    "@base-ui/react": "1.9.0"
   },
   "peerDependenciesMeta": {
     "@hachej/boring-files": {
@@ -221,7 +221,7 @@
     "lucide-react": {
       "optional": true
     },
-    "radix-ui": {
+    "@base-ui/react": {
       "optional": true
     }
   },