@hachej/boring-ui-kit 0.3.2 → 0.4.1

package/dist/html-viewer.d.ts

@@ -1,5 +1,9 @@
+import type { ViewerComponents } from './viewer-components.js';
+export type { ViewerComponents } from './viewer-components.js';
 import type { HtmlController } from './html.js';
 export interface HtmlViewerProps {
+    /** Installed recipes supply the host's shadcn controls. Omit only for unstyled native HTML rendering. */
+    readonly components?: ViewerComponents;
     readonly controller: HtmlController;
     readonly title?: string;
     readonly className?: string;

package/dist/html-viewer.js

@@ -33,7 +33,9 @@ function HtmlPreview({ text }) {
                     : status === 'failed' ? 'Preview unavailable. Source viewing and saving remain available.'
                         : 'Preview unavailable until this viewer is mounted in a browser.' }), _jsx("div", { ref: container })] });
 }
-function MountedHtmlViewer({ controller, title = 'HTML document', className, header = true, mode: controlledMode, onModeChange }) {
+function MountedHtmlViewer({ components, controller, title = 'HTML document', className, header = true, mode: controlledMode, onModeChange }) {
+    const Control = components?.button ?? 'button';
+    const Source = components?.textarea ?? 'textarea';
     const snapshot = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const [ownMode, setOwnMode] = useState('preview');
     const mode = controlledMode ?? ownMode;
@@ -56,8 +58,8 @@ function MountedHtmlViewer({ controller, title = 'HTML document', className, hea
     const status = disposed ? 'Viewer disposed' : snapshot.readOnly ? 'Read only' : pending ? 'Saving selected source' : unknown ? 'Save unconfirmed. Reconcile before saving again.' : snapshot.save.kind === 'settled' && snapshot.save.result.kind !== 'saved'
         ? snapshot.save.result.kind === 'partial' ? 'Save unconfirmed' : snapshot.save.result.reason
         : snapshot.dirty ? 'Unsaved changes' : 'Saved';
-    return _jsxs("section", { "data-boring": "html-viewer", className: ['boring-html-viewer', className].filter(Boolean).join(' '), "aria-label": title, children: [header && _jsxs("header", { children: [_jsx("strong", { children: title }), _jsx("span", { role: "status", children: status })] }), header && _jsxs("div", { role: "toolbar", "aria-label": "HTML document controls", children: [_jsx("button", { type: "button", "aria-pressed": mode === 'preview', onClick: () => setMode('preview'), children: "HTML preview" }), _jsx("button", { type: "button", "aria-pressed": mode === 'source', onClick: () => setMode('source'), children: "HTML source" }), _jsx("button", { type: "button", disabled: disposed || snapshot.readOnly || !snapshot.dirty || pending || unknown, onClick: () => { const selection = controller.actions.selection(); perform(() => controller.flush(selection)); }, children: "Save" }), _jsx("button", { type: "button", disabled: disposed || pending || unknown, onClick: () => perform(controller.actions.refresh), children: "Refresh" }), _jsx("button", { type: "button", disabled: disposed || !unknown, onClick: () => perform(controller.actions.reconcile), children: "Reconcile save" }), _jsx("button", { type: "button", disabled: disposed || !unknown, onClick: () => perform(controller.actions.abandon), children: "Abandon and refresh, keeping my draft" }), _jsx("button", { type: "button", disabled: disposed || pending || unknown || snapshot.remote === null, onClick: () => perform(controller.actions.discardToRemote), children: "Discard local edits" })] }), _jsx(TextDraftControls, { recovery: snapshot.recovery, actions: controller.actions, readOnly: snapshot.readOnly, blocked: snapshot.lifecycle !== 'active' || snapshot.save.kind === 'pending' || (snapshot.save.kind === 'settled' && snapshot.save.result.kind === 'unknown') }), error && _jsx("p", { role: "alert", children: error }), mode === 'source'
-                ? _jsx("textarea", { className: "boring-html-viewer__source", "aria-label": "HTML source", readOnly: snapshot.readOnly || disposed, value: snapshot.text, onChange: event => { if (!snapshot.readOnly && !disposed)
+    return _jsxs("section", { "data-boring": "html-viewer", className: ['boring-html-viewer', className].filter(Boolean).join(' '), "aria-label": title, children: [header && _jsxs("header", { children: [_jsx("strong", { children: title }), _jsx("span", { role: "status", children: status })] }), header && _jsxs("div", { role: "toolbar", "aria-label": "HTML document controls", children: [_jsx(Control, { type: "button", "aria-pressed": mode === 'preview', onClick: () => setMode('preview'), children: "HTML preview" }), _jsx(Control, { type: "button", "aria-pressed": mode === 'source', onClick: () => setMode('source'), children: "HTML source" }), _jsx(Control, { type: "button", disabled: disposed || snapshot.readOnly || !snapshot.dirty || pending || unknown, onClick: () => { const selection = controller.actions.selection(); perform(() => controller.flush(selection)); }, children: "Save" }), _jsx(Control, { type: "button", disabled: disposed || pending || unknown, onClick: () => perform(controller.actions.refresh), children: "Refresh" }), _jsx(Control, { type: "button", disabled: disposed || !unknown, onClick: () => perform(controller.actions.reconcile), children: "Reconcile save" }), _jsx(Control, { type: "button", disabled: disposed || !unknown, onClick: () => perform(controller.actions.abandon), children: "Abandon and refresh, keeping my draft" }), _jsx(Control, { type: "button", disabled: disposed || pending || unknown || snapshot.remote === null, onClick: () => perform(controller.actions.discardToRemote), children: "Discard local edits" })] }), _jsx(TextDraftControls, { components: components, recovery: snapshot.recovery, actions: controller.actions, readOnly: snapshot.readOnly, blocked: snapshot.lifecycle !== 'active' || snapshot.save.kind === 'pending' || (snapshot.save.kind === 'settled' && snapshot.save.result.kind === 'unknown') }), error && _jsx("p", { role: "alert", children: error }), mode === 'source'
+                ? _jsx(Source, { className: "boring-html-viewer__source", "aria-label": "HTML source", readOnly: snapshot.readOnly || disposed, value: snapshot.text, onChange: event => { if (!snapshot.readOnly && !disposed)
                         controller.actions.edit(event.currentTarget.value); } })
                 : _jsx(HtmlPreview, { text: snapshot.text })] });
 }

package/dist/markdown-autosave.d.ts

@@ -0,0 +1,13 @@
+import type { MarkdownController } from './markdown.js';
+import type { SaveResult } from './resources.js';
+export type MarkdownAutosave = boolean | {
+    readonly delayMs?: number;
+};
+export type MarkdownFlush = () => Promise<boolean>;
+/** Browser editing policy only. All writes still use the controller's exact conditional flush. */
+export declare function useMarkdownAutosave(controller: MarkdownController, autosave: MarkdownAutosave, report: (result: SaveResult) => void): {
+    enabled: boolean;
+    immediate: () => Promise<boolean>;
+    manual: () => Promise<boolean>;
+};
+//# sourceMappingURL=markdown-autosave.d.ts.map

package/dist/markdown-autosave.js

@@ -0,0 +1,94 @@
+import { useCallback, useEffect, useRef } from 'react';
+/** Browser editing policy only. All writes still use the controller's exact conditional flush. */
+export function useMarkdownAutosave(controller, autosave, report) {
+    const enabled = autosave !== false;
+    const delayMs = typeof autosave === 'object' ? autosave.delayMs ?? 1200 : 1200;
+    const enabledRef = useRef(enabled);
+    enabledRef.current = enabled;
+    const reporting = useRef(report);
+    reporting.current = report;
+    const running = useRef(null);
+    const paused = useRef(null);
+    const timer = useRef(undefined);
+    const cancel = useCallback(() => { clearTimeout(timer.current); timer.current = undefined; }, []);
+    const flush = useCallback((manual = false) => {
+        cancel();
+        if (running.current)
+            return running.current;
+        const drain = async () => {
+            for (;;) {
+                const state = controller.getSnapshot();
+                if (state.lifecycle !== 'active' || state.readOnly)
+                    return !state.dirty;
+                if (state.save.kind === 'pending') {
+                    await new Promise(resolve => {
+                        const stop = controller.subscribe(() => { if (controller.getSnapshot().save.kind !== 'pending' || controller.getSnapshot().lifecycle !== 'active') {
+                            stop();
+                            resolve();
+                        } });
+                    });
+                    continue;
+                }
+                if (state.save.kind === 'settled' && state.save.result.kind === 'unknown')
+                    return false;
+                if (!state.dirty || !manual && state.bufferVersion === 0)
+                    return true;
+                if (!manual && (paused.current || state.remote !== null))
+                    return false;
+                const result = await controller.flush(controller.actions.selection());
+                reporting.current(result);
+                if (result.kind !== 'saved') {
+                    paused.current = controller.getSnapshot().save;
+                    return false;
+                }
+                // A late acknowledgement only cleans its captured text. Select any newer edit after it settles.
+            }
+        };
+        const promise = Promise.resolve().then(drain).catch(() => {
+            paused.current = controller.getSnapshot().save;
+            reporting.current({ kind: 'unavailable', reason: 'The save could not be completed. Your text is still available.' });
+            return false;
+        }).finally(() => { if (running.current === promise)
+            running.current = null; });
+        running.current = promise;
+        return promise;
+    }, [cancel, controller]);
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const changed = () => {
+            const state = controller.getSnapshot();
+            if (paused.current && state.save !== paused.current && (state.save.kind === 'idle' || state.save.kind === 'settled' && state.save.result.kind === 'saved'))
+                paused.current = null;
+            cancel();
+            if (state.lifecycle !== 'active' || state.readOnly || !state.dirty || state.bufferVersion === 0 || paused.current || state.remote !== null || state.save.kind === 'pending')
+                return;
+            if (state.save.kind === 'settled' && state.save.result.kind !== 'saved') {
+                paused.current = state.save;
+                return;
+            }
+            timer.current = setTimeout(() => { void flush(); }, delayMs);
+        };
+        const hidden = () => { if (document.visibilityState === 'hidden')
+            void flush(); };
+        const pagehide = () => { void flush(); };
+        const stop = controller.subscribe(changed);
+        document.addEventListener('visibilitychange', hidden);
+        window.addEventListener('pagehide', pagehide);
+        changed();
+        return () => {
+            stop();
+            cancel();
+            document.removeEventListener('visibilitychange', hidden);
+            window.removeEventListener('pagehide', pagehide);
+        };
+    }, [cancel, controller, delayMs, enabled, flush]);
+    useEffect(() => () => {
+        const state = controller.getSnapshot();
+        if (enabledRef.current && state.dirty && state.bufferVersion > 0)
+            void flush();
+    }, [controller, flush]);
+    const immediate = useCallback(() => flush(), [flush]);
+    const manual = useCallback(() => flush(true), [flush]);
+    return { enabled, immediate, manual };
+}

package/dist/markdown-editor.d.ts

@@ -1,3 +1,8 @@
+import type { ViewerComponents } from './viewer-components.js';
+export type { ViewerComponents } from './viewer-components.js';
+import type { MarkdownAutosave, MarkdownFlush } from './markdown-autosave.js';
+import type { SaveResult } from './resources.js';
+export type { MarkdownAutosave, MarkdownFlush } from './markdown-autosave.js';
 import type { MarkdownController } from './markdown.js';
 import { type MarkdownImageResolver } from './markdown-extensions.js';
 import { type MarkdownRichSafety } from './markdown-safety.js';
@@ -7,6 +12,8 @@ export type { MarkdownRichSafety } from './markdown-safety.js';
 export type { MarkdownImageResolver } from './markdown-extensions.js';
 export type { MarkdownMountedTools, MarkdownMountedSubject, MarkdownMountedSelection, MarkdownMountedInspection } from './markdown-mounted.js';
 export interface MarkdownEditorProps {
+    /** Installed recipes supply the host's shadcn controls. Omit only for unstyled native HTML rendering. */
+    readonly components?: ViewerComponents;
     readonly controller: MarkdownController;
     readonly title?: string;
     readonly initialMode?: 'rich' | 'source';
@@ -15,6 +22,8 @@ export interface MarkdownEditorProps {
     readonly onMountedTools?: (tools: MarkdownMountedTools | null) => void;
     /** `false` omits the built-in header (title, status, source toggle, Save) so a host bar such as the viewer frame supplies them. */
     readonly header?: boolean;
+    /** Show local heading navigation. Defaults to the built-in header's visibility. */
+    readonly showOutline?: boolean;
     /** Controlled mode. The editor still falls back to `source` for a document that rich editing cannot keep exactly. */
     readonly mode?: 'rich' | 'source';
     readonly onModeChange?: (mode: 'rich' | 'source') => void;
@@ -22,6 +31,13 @@ export interface MarkdownEditorProps {
     readonly onRichSafety?: (safety: MarkdownRichSafety) => void;
     /** Images never load unless this maps their address to a URL (inline `data:` images load without it). */
     readonly resolveImage?: MarkdownImageResolver;
+    /** Autosave defaults to 1200ms idle, blur, hide and removal. false keeps explicit saving. */
+    readonly autosave?: MarkdownAutosave;
+    /** Registers the async navigation barrier. Null while autosave is disabled or the editor is unmounted. */
+    readonly onAutosaveChange?: (flush: MarkdownFlush | null) => void;
+    readonly onSaveResult?: (result: SaveResult) => void;
+    /** The complete formatting row is pinned by default on desktop; phones show it above the keyboard while editing, plus the selection bubble. */
+    readonly formattingToolbar?: 'selection' | 'pinned';
 }
 /** Borrows the controller. The host owns document selection, access and disposal. */
 export declare function MarkdownEditor(props: MarkdownEditorProps): import("react").JSX.Element;

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.d.ts

@@ -29,6 +29,24 @@ export interface RemoteChatOptions {
         readonly baseDelayMs?: number;
         readonly maxDelayMs?: number;
     };
+    /**
+     * `websocket`: carry the watch and every call over one WebSocket to the same endpoint (`ws:`/`wss:` from the page), served by
+     * `createConversationSocketHandler` of `@hachej/boring-agent/chat-transport`. A Durable Object can then hibernate while the page
+     * is idle. Calls not yet answered when the socket drops are sent again unchanged (same request ID) on the next socket, and every
+     * socket begins with a complete view. If the first socket cannot open, the chat uses HTTP (`fetch`) instead. Default `http`.
+     */
+    readonly transport?: 'http' | 'websocket';
+    /**
+     * WebSocket details. `open` creates the socket (default `new WebSocket(url, 'boring.chat')`); a browser cannot set headers on a
+     * WebSocket, so a host with bearer tokens offers its credential as another subprotocol here. `pingMs` (default 15000): a `ping`
+     * every interval; a socket silent for 2.5 intervals is treated as lost and reopened.
+     */
+    readonly webSocket?: {
+        readonly open?: (url: URL) => WebSocket;
+        readonly pingMs?: number;
+    };
+    /** Host events the socket carries beside the chat (`broadcast` on the server, for example presence or the conversation list). */
+    readonly onEvent?: (event: unknown) => void;
 }
 export interface RemoteChat {
     /** The members of the native conversation the chat controller uses, served by the remote host. Nothing else is pretended. */