@hachej/boring-ui-kit 0.3.2 → 0.4.0

package/dist/file-tree-view.js

@@ -1,8 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Collapsible } from 'radix-ui';
-import { ChevronRight, File, Folder } from 'lucide-react';
-import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from './file-tree-shadcn.js';
+import { ChevronRight, Download, File, FileCode, FileImage, FileSpreadsheet, FileText, Folder, FolderOpen, History, LoaderCircle, MoreHorizontal, Search, Upload, X } from 'lucide-react';
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { createFileTreeController } from './file-tree.js';
 /** Every word of the tree, so a host can translate it. Functions receive what they name. */
@@ -18,9 +16,23 @@ export const defaultFileTreeLabels = {
     loading: 'Loading files…',
     retry: 'Retry',
     noMatches: 'No matching files.',
-    empty: 'No files here.',
+    empty: 'No files yet',
+    emptyHint: 'Upload or ask the agent to create one',
+    library: 'Library',
+    close: 'Close Library',
+    open: 'Open',
+    download: 'Download',
+    downloadingFailed: 'The file could not be downloaded.',
+    actionsOf: (path) => `Actions for ${path}`,
+    shownItems: (count) => `${count} items shown`,
+    folder: 'Folder',
+    childCount: (count) => `${count} item${count === 1 ? '' : 's'}`,
+    file: 'File',
+    image: 'Image',
+    document: 'Document',
+    dropFiles: 'Drop files to upload',
     loadMore: 'Load more',
-    history: 'History',
+    history: 'Version history',
     historyOf: (path) => `History of ${path}`,
     closeHistory: 'Close history',
     loadingHistory: 'Loading history…',
@@ -50,7 +62,21 @@ export const frenchFileTreeLabels = {
     loading: 'Chargement des fichiers…',
     retry: 'Réessayer',
     noMatches: 'Aucun fichier ne correspond.',
-    empty: 'Aucun fichier ici.',
+    empty: 'Aucun fichier pour le moment',
+    emptyHint: 'Importez un fichier ou demandez à l’agent d’en créer un',
+    library: 'Bibliothèque',
+    close: 'Fermer la bibliothèque',
+    open: 'Ouvrir',
+    download: 'Télécharger',
+    downloadingFailed: 'Impossible de télécharger le fichier.',
+    actionsOf: path => `Actions pour ${path}`,
+    shownItems: count => `${count} éléments affichés`,
+    folder: 'Dossier',
+    childCount: count => `${count} élément${count === 1 ? '' : 's'}`,
+    file: 'Fichier',
+    image: 'Image',
+    document: 'Document',
+    dropFiles: 'Déposez les fichiers à importer',
     loadMore: 'Afficher plus',
     history: 'Historique',
     historyOf: path => `Historique de ${path}`,
@@ -70,6 +96,24 @@ export const frenchFileTreeLabels = {
     uploadFailed: name => `${name} : échec de l’import`,
 };
 const LOCALES = { en: defaultFileTreeLabels, fr: frenchFileTreeLabels };
+function fileKind(path, labels) {
+    const extension = path.includes('.') ? path.slice(path.lastIndexOf('.') + 1).toLowerCase() : '';
+    if (['md', 'markdown'].includes(extension))
+        return { icon: FileText, label: 'Markdown' };
+    if (extension === 'pdf')
+        return { icon: FileText, label: 'PDF' };
+    if (['csv', 'xls', 'xlsx', 'tsv'].includes(extension))
+        return { icon: FileSpreadsheet, label: extension.toUpperCase() };
+    if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(extension))
+        return { icon: FileImage, label: labels.image };
+    if (['json', 'js', 'mjs', 'ts', 'tsx', 'html', 'css', 'xml', 'yml', 'yaml'].includes(extension))
+        return { icon: FileCode, label: extension.toUpperCase() };
+    return { icon: extension ? FileText : File, label: extension === 'txt' ? labels.document : extension.toUpperCase() || labels.file };
+}
+function fileSize(bytes, locale) {
+    const unit = bytes < 1024 ? 0 : bytes < 1024 ** 2 ? 1 : bytes < 1024 ** 3 ? 2 : 3;
+    return `${new Intl.NumberFormat(locale, { maximumFractionDigits: unit ? 1 : 0 }).format(bytes / 1024 ** unit)} ${['B', 'KB', 'MB', 'GB'][unit]}`;
+}
 /** One borrowed binding powers browsing, search, upload and history. Historical previews never replace an editor's draft. */
 export function FileTree(props) {
     return _jsx(BoundFileTree, { ...props }, JSON.stringify([props.revisionProvider.workspace, props.revisionProvider.identity]));
@@ -85,7 +129,9 @@ function BoundFileTree(props) {
     return owned?.provider === props.revisionProvider ? _jsx(FileTreeView, { ...props, controller: owned.controller }) : _jsx("p", { role: "status", children: props.labels?.loading ?? LOCALES[props.locale ?? 'en'].loading });
 }
 /** Renders a borrowed controller, for a workspace whose chat and tree share upload state. */
-export function FileTreeView({ controller, onOpen, selectedPath, className, uploadDirectory = 'uploads', locale = 'en', labels: given, upload = true, history = true, refreshKey, historyKey }) {
+export function FileTreeView({ components, controller, onOpen, selectedPath, className, uploadDirectory = 'uploads', locale = 'en', labels: given, upload = true, history = true, refresh = true, variant = 'list', title, onClose, refreshKey, historyKey }) {
+    const { Button, Actions, Menu: SidebarMenu, MenuItem: SidebarMenuItem, MenuSub: SidebarMenuSub, Input, Collapsible: CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, Empty } = components;
+    const list = variant === 'list';
     const labels = { ...LOCALES[locale], ...given };
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const shownKey = useRef(refreshKey);
@@ -101,9 +147,41 @@ export function FileTreeView({ controller, onOpen, selectedPath, className, uplo
                 void controller.refresh(directory);
     }, [controller, refreshKey]);
     const tree = useRef(null);
+    const fileInput = useRef(null);
+    const dragDepth = useRef(0);
+    const [dropping, setDropping] = useState(false);
     const [focused, setFocused] = useState('');
     const [uploadError, setUploadError] = useState('');
     const [historyPath, setHistoryPath] = useState();
+    const [localFailures, setLocalFailures] = useState(new Map());
+    const uploadFiles = async (files) => {
+        for (const file of files) {
+            const path = uploadDirectory ? `${uploadDirectory}/${file.name}` : file.name;
+            setLocalFailures(previous => { const next = new Map(previous); next.delete(path); return next; });
+            try {
+                await controller.upload({ path, bytes: new Uint8Array(await file.arrayBuffer()), mediaType: file.type || 'application/octet-stream' });
+            }
+            catch (error) {
+                setLocalFailures(previous => new Map(previous).set(path, { file, reason: error instanceof Error ? error.message : labels.uploadFailed(file.name) }));
+            }
+        }
+    };
+    const uploadRows = new Map();
+    for (const item of state.uploads) {
+        if (item.state.kind === 'pending')
+            uploadRows.set(item.path, { kind: 'pending', size: item.size });
+        else if (item.state.result.kind === 'committed')
+            uploadRows.delete(item.path);
+        else
+            uploadRows.set(item.path, { kind: 'failed', size: item.size,
+                reason: item.state.result.kind === 'partial' ? labels.unconfirmed : item.state.result.reason,
+                retryLabel: item.state.result.kind === 'unknown' ? labels.checkUpload : labels.retry,
+                retry: () => { void controller.retry(item.operationId).catch(error => setUploadError(error instanceof Error ? error.message : labels.uploadStatusUnavailable)); } });
+    }
+    for (const [path, failure] of localFailures)
+        uploadRows.set(path, { kind: 'failed', size: failure.file.size, reason: failure.reason,
+            retryLabel: labels.retry, retry: () => { void uploadFiles([failure.file]); } });
+    const uploadButton = _jsxs(Button, { type: "button", variant: "secondary", "data-file-upload": true, onClick: () => fileInput.current?.click(), children: [_jsx(Upload, { "aria-hidden": "true" }), labels.upload] });
     const rows = [];
     function flatten(directory, level) {
         for (const entry of state.directories.get(directory)?.entries ?? []) {
@@ -117,6 +195,12 @@ export function FileTreeView({ controller, onOpen, selectedPath, className, uplo
             rows.push({ entry, level: 1 });
     else
         flatten('', 1);
+    const visiblePaths = new Set(rows.map(row => row.entry.path));
+    const temporaryEntries = [...uploadRows].filter(([path]) => !visiblePaths.has(path) && path.toLowerCase().includes(state.query.toLowerCase()))
+        .map(([path, status]) => ({ path, kind: 'file', size: status.size }));
+    const temporaryPaths = new Set(temporaryEntries.map(entry => entry.path));
+    for (const entry of temporaryEntries)
+        rows.push({ entry, level: 1 });
     const focusPath = rows.some(row => row.entry.path === focused) ? focused : rows[0]?.entry.path;
     const focus = (path) => {
         if (path === undefined)
@@ -164,7 +248,7 @@ export function FileTreeView({ controller, onOpen, selectedPath, className, uplo
             case ' ':
                 if (entry.kind === 'directory')
                     void controller.toggle(entry.path);
-                else
+                else if (!temporaryPaths.has(entry.path))
                     onOpen?.(entry.path);
                 break;
             default: return;
@@ -175,44 +259,93 @@ export function FileTreeView({ controller, onOpen, selectedPath, className, uplo
         if (!listing || listing.kind === 'loading')
             return _jsx("li", { role: "none", children: _jsx("span", { role: "status", children: labels.loading }) });
         if (listing.kind === 'error')
-            return _jsxs("li", { role: "none", children: [_jsx("span", { role: "alert", children: listing.reason }), " ", _jsx("button", { type: "button", onClick: () => { void (search ? controller.search(state.query) : controller.refresh(directory)); }, children: labels.retry })] });
-        return _jsxs(_Fragment, { children: [listing.entries.length === 0 && _jsx("li", { role: "none", children: _jsx("span", { children: search ? labels.noMatches : labels.empty }) }), listing.cursor !== undefined && _jsx("li", { role: "none", children: _jsx("button", { type: "button", onClick: () => { void (search ? controller.moreSearch() : controller.more(directory)); }, children: labels.loadMore }) })] });
+            return _jsxs("li", { role: "none", children: [_jsx("span", { role: "alert", children: listing.reason }), " ", _jsx(Button, { type: "button", variant: "ghost", onClick: () => { void (search ? controller.search(state.query) : controller.refresh(directory)); }, children: labels.retry })] });
+        return _jsxs(_Fragment, { children: [listing.entries.length === 0 && (directory || temporaryEntries.length === 0) && _jsx("li", { role: "none", className: list && !directory ? undefined : 'file-tree-status', children: list && !directory
+                        ? _jsx(Empty, { className: "file-tree-empty", icon: _jsx(FolderOpen, { "aria-hidden": "true" }), title: search ? labels.noMatches : labels.empty, description: search ? undefined : labels.emptyHint, children: !search && upload && uploadButton })
+                        : _jsx("span", { children: search ? labels.noMatches : labels.empty }) }), listing.cursor !== undefined && _jsx("li", { role: "none", children: _jsx(Button, { type: "button", variant: "ghost", onClick: () => { void (search ? controller.moreSearch() : controller.more(directory)); }, children: labels.loadMore }) })] });
     };
     const renderEntries = (directory, level) => _jsxs(_Fragment, { children: [(state.directories.get(directory)?.entries ?? []).map(entry => renderEntry(entry, level)), listingStatus(state.directories.get(directory), directory)] });
     const renderEntry = (entry, level) => {
         const folder = entry.kind === 'directory';
-        // A search result shows its name, with its folder beside it in muted text.
+        const temporary = temporaryPaths.has(entry.path);
+        const status = uploadRows.get(entry.path);
         const name = entry.path.split('/').at(-1);
-        const parent = state.query && entry.path.includes('/') ? entry.path.slice(0, entry.path.lastIndexOf('/')) : '';
-        const button = _jsxs(SidebarMenuButton, { tabIndex: -1, title: entry.path, isActive: selectedPath === entry.path, className: "min-w-0 flex-1 data-[active=true]:bg-transparent", onClick: () => { focus(entry.path); if (!folder)
-                onOpen?.(entry.path); }, children: [folder ? _jsxs(_Fragment, { children: [_jsx(ChevronRight, { className: "transition-transform", "aria-hidden": "true" }), _jsx(Folder, { "aria-hidden": "true" })] }) : _jsx(File, { "aria-hidden": "true" }), _jsx("span", { className: "min-w-0 truncate", children: name }), parent && _jsx("span", { className: "min-w-0 shrink truncate text-xs text-muted-foreground", children: parent })] });
-        const item = _jsxs(SidebarMenuItem, { role: "treeitem", "data-path": entry.path, "aria-level": level, "aria-selected": selectedPath === entry.path, "aria-expanded": folder ? state.expanded.has(entry.path) : undefined, tabIndex: focusPath === entry.path ? 0 : -1, onFocus: event => { if (event.target === event.currentTarget)
+        const parent = (state.query || temporary) && entry.path.includes('/') ? entry.path.slice(0, entry.path.lastIndexOf('/')) : '';
+        const children = folder ? state.directories.get(entry.path) : undefined;
+        const childCount = children?.kind === 'ready' && children.cursor === undefined ? labels.childCount(children.entries.length) : undefined;
+        const kind = folder ? { icon: Folder, label: labels.folder } : fileKind(entry.path, labels);
+        const Icon = kind.icon;
+        const button = _jsxs(Button, { type: "button", variant: selectedPath === entry.path ? 'secondary' : 'ghost', "data-active": selectedPath === entry.path, tabIndex: -1, title: entry.path, disabled: temporary, className: "file-tree-row-button", onClick: () => { focus(entry.path); if (!folder)
+                onOpen?.(entry.path); }, children: [folder ? _jsx(ChevronRight, { "aria-hidden": "true" }) : list && _jsx("span", { className: "file-tree-chevron-space", "aria-hidden": "true" }), _jsx(Icon, { "aria-hidden": "true" }), _jsxs("span", { className: "file-tree-copy", children: [_jsx("span", { className: "file-tree-name", children: name }), list ? folder ? childCount !== undefined && _jsx("span", { "data-file-meta": true, children: childCount }) : _jsxs("span", { "data-file-meta": true, children: [kind.label, " \u00B7 ", fileSize(entry.size, locale), parent && ` · ${parent}`] }) : parent && _jsx("span", { className: "file-tree-parent", "data-file-meta": true, children: parent })] })] });
+        const item = _jsxs(SidebarMenuItem, { role: "treeitem", "data-path": entry.path, "data-upload-state": status?.kind, "aria-busy": status?.kind === 'pending' || undefined, "aria-level": level, "aria-selected": selectedPath === entry.path, "aria-expanded": folder ? state.expanded.has(entry.path) : undefined, tabIndex: focusPath === entry.path ? 0 : -1, onFocus: event => { if (event.target === event.currentTarget)
                 setFocused(entry.path); }, onKeyDown: event => { if (event.target === event.currentTarget)
-                keyboard(event, entry); }, className: "group/collapsible rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring [&[data-state=open]>div>button>svg:first-child]:rotate-90", children: [_jsxs("div", { className: "flex items-center gap-1", children: [folder ? _jsx(Collapsible.Trigger, { asChild: true, children: button }) : button, !folder && history && _jsx("button", { type: "button", "aria-label": labels.historyOf(entry.path), className: "px-2 py-1 text-xs", onClick: () => setHistoryPath(entry.path), children: labels.history })] }), folder && !state.query && _jsx(Collapsible.Content, { asChild: true, children: _jsx(SidebarMenuSub, { role: "group", children: renderEntries(entry.path, level + 1) }) })] }, entry.path);
-        return folder ? _jsx(Collapsible.Root, { asChild: true, open: state.expanded.has(entry.path), onOpenChange: () => { void controller.toggle(entry.path); }, children: item }, entry.path) : item;
+                keyboard(event, entry); }, className: "file-tree-item", children: [_jsxs("div", { className: "flex items-center gap-1", children: [folder ? _jsx(CollapsibleTrigger, { render: button }) : button, status?.kind === 'pending' && _jsx(LoaderCircle, { "data-upload-spinner": true, className: "animate-spin motion-reduce:animate-none", "aria-hidden": "true" }), status?.kind === 'failed' && _jsx(Button, { type: "button", variant: "ghost", "data-upload-retry": true, "aria-label": status.retryLabel, onClick: status.retry, children: status.retryLabel }), !folder && !temporary && !status && _jsx(FileActions, { Actions: Actions, controller: controller, entry: entry, labels: labels, onOpen: onOpen ? () => onOpen(entry.path) : undefined, onHistory: history ? () => setHistoryPath(entry.path) : undefined, onError: setUploadError })] }), status?.kind === 'failed' && _jsx("span", { "data-upload-error": true, children: status.reason }), folder && !state.query && _jsx(CollapsibleContent, { render: _jsx(SidebarMenuSub, { role: "group" }), children: renderEntries(entry.path, level + 1) })] }, entry.path);
+        return folder ? _jsx(CollapsibleRoot, { render: item, open: state.expanded.has(entry.path), onOpenChange: () => { void controller.toggle(entry.path); } }, entry.path) : item;
+    };
+    const visibleListing = state.query ? state.search : state.directories.get('');
+    const paginated = visibleListing?.kind === 'ready' && visibleListing.cursor !== undefined;
+    return _jsxs("section", { "data-boring": "file-tree", "data-variant": variant, "data-dropping": dropping || undefined, className: className, "aria-label": labels.region, onDragEnter: event => { if (upload && event.dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            dragDepth.current++;
+            setDropping(true);
+        } }, onDragOver: event => { if (upload && event.dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'copy';
+        } }, onDragLeave: event => { if (upload && event.dataTransfer.types.includes('Files')) {
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (!dragDepth.current)
+                setDropping(false);
+        } }, onDrop: event => { if (upload && event.dataTransfer.types.includes('Files')) {
+            event.preventDefault();
+            dragDepth.current = 0;
+            setDropping(false);
+            void uploadFiles(Array.from(event.dataTransfer.files));
+        } }, children: [list && _jsxs("header", { className: "file-tree-header", children: [_jsx("h2", { children: title ?? labels.library }), _jsxs("span", { className: "file-tree-count", "aria-label": labels.shownItems(rows.length), children: [rows.length, paginated ? '+' : ''] }), upload && uploadButton, onClose && _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-file-close": true, "aria-label": labels.close, onClick: onClose, children: _jsx(X, { "aria-hidden": "true" }) })] }), _jsxs("div", { className: "file-tree-toolbar", children: [_jsxs("div", { className: "file-tree-search", children: [list && _jsx(Search, { "aria-hidden": "true" }), _jsx(Input, { type: "search", "aria-label": labels.search, placeholder: labels.searchPlaceholder, value: state.query, onChange: event => { void controller.search(event.currentTarget.value); } })] }), refresh && _jsx(Button, { type: "button", variant: "ghost", "aria-label": labels.refresh, onClick: () => { void (state.query ? controller.search(state.query) : controller.refresh()); }, children: labels.refresh }), !list && upload && uploadButton] }), upload && _jsx(Input, { ref: fileInput, "aria-label": labels.uploadFiles, type: "file", multiple: true, onChange: event => {
+                    const files = Array.from(event.currentTarget.files ?? []);
+                    event.currentTarget.value = '';
+                    void uploadFiles(files);
+                } }), dropping && _jsx("div", { className: "file-tree-drop", role: "status", children: _jsx(Empty, { icon: _jsx(Upload, { "aria-hidden": "true" }), title: labels.dropFiles }) }), uploadError && _jsx("p", { role: "alert", children: uploadError }), _jsxs(SidebarMenu, { ref: tree, role: "tree", "aria-label": labels.tree, className: "file-tree-menu", children: [state.query ? _jsxs(_Fragment, { children: [state.search.entries.map(entry => renderEntry(entry, 1)), listingStatus(state.search, '', true)] }) : renderEntries('', 1), temporaryEntries.map(entry => renderEntry(entry, 1))] }), _jsxs("ul", { "aria-label": labels.uploads, "aria-live": "polite", "aria-relevant": "additions text", className: "file-tree-announcements", children: [state.uploads.map(upload => _jsxs("li", { "data-operation": upload.operationId, children: [upload.path, ": ", upload.state.kind === 'pending' ? labels.uploading : upload.state.result.kind === 'committed' ? labels.saved : upload.state.result.kind === 'partial' ? labels.unconfirmed : upload.state.result.reason] }, upload.operationId)), [...localFailures].map(([path, failure]) => _jsxs("li", { children: [path, ": ", failure.reason] }, path))] }), history && historyPath !== undefined && _jsx(FileHistory, { components: components, locale: locale, controller: controller, path: historyPath, labels: labels, reload: historyKey, onClose: () => setHistoryPath(undefined) }, historyPath)] });
+}
+function FileActions({ Actions, controller, entry, labels, onOpen, onHistory, onError }) {
+    const lifetime = useRef(undefined);
+    useEffect(() => () => lifetime.current?.abort(), []);
+    const download = async () => {
+        onError('');
+        lifetime.current?.abort();
+        const abort = new AbortController();
+        lifetime.current = abort;
+        try {
+            const result = await controller.revisionProvider.read({ target: controller.revisionProvider.locate(entry.path), revision: { kind: 'latest' } }, abort.signal);
+            if (abort.signal.aborted)
+                return;
+            if (result.kind !== 'available') {
+                onError(labels.downloadingFailed);
+                return;
+            }
+            const url = URL.createObjectURL(new Blob([new Uint8Array(result.snapshot.bytes)], { type: result.snapshot.mediaType }));
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = entry.path.split('/').at(-1) ?? entry.path;
+            document.body.append(link);
+            link.click();
+            link.remove();
+            // Give the browser time to consume the URL before releasing its bytes.
+            setTimeout(() => URL.revokeObjectURL(url), 1000);
+        }
+        catch {
+            if (!abort.signal.aborted)
+                onError(labels.downloadingFailed);
+        }
     };
-    return _jsxs("section", { "data-boring": "file-tree", className: className, "aria-label": labels.region, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2 p-2", children: [_jsx("input", { type: "search", "aria-label": labels.search, placeholder: labels.searchPlaceholder, className: "min-w-0 flex-1 rounded border border-input bg-background px-2 py-1 text-sm", value: state.query, onChange: event => { void controller.search(event.currentTarget.value); } }), _jsx("button", { type: "button", onClick: () => { void (state.query ? controller.search(state.query) : controller.refresh()); }, children: labels.refresh }), upload && _jsxs("label", { className: "cursor-pointer text-sm", children: [labels.upload, _jsx("input", { "aria-label": labels.uploadFiles, type: "file", multiple: true, className: "sr-only", onChange: event => {
-                                    const files = Array.from(event.currentTarget.files ?? []);
-                                    event.currentTarget.value = '';
-                                    setUploadError('');
-                                    void (async () => {
-                                        // One refused or unreadable file does not stop the others; every refusal is reported.
-                                        const errors = [];
-                                        for (const file of files) {
-                                            const path = uploadDirectory ? `${uploadDirectory}/${file.name}` : file.name;
-                                            try {
-                                                await controller.upload({ path, bytes: new Uint8Array(await file.arrayBuffer()), mediaType: file.type || 'application/octet-stream' });
-                                            }
-                                            catch (error) {
-                                                errors.push(error instanceof Error ? error.message : labels.uploadFailed(file.name));
-                                            }
-                                        }
-                                        if (errors.length)
-                                            setUploadError(errors.join(' '));
-                                    })();
-                                } })] })] }), uploadError && _jsx("p", { role: "alert", children: uploadError }), _jsx(SidebarMenu, { ref: tree, role: "tree", "aria-label": labels.tree, className: "m-0 list-none p-2", children: state.query ? _jsxs(_Fragment, { children: [state.search.entries.map(entry => renderEntry(entry, 1)), listingStatus(state.search, '', true)] }) : renderEntries('', 1) }), state.uploads.length > 0 && _jsx("ul", { "aria-label": labels.uploads, className: "list-none p-2 text-sm", children: state.uploads.map(upload => _jsxs("li", { "data-operation": upload.operationId, children: [_jsxs("span", { children: [upload.path, ": ", upload.state.kind === 'pending' ? labels.uploading : upload.state.result.kind === 'committed' ? labels.saved : upload.state.result.kind === 'partial' ? labels.unconfirmed : upload.state.result.reason] }), upload.state.kind === 'settled' && upload.state.result.kind === 'unknown' && _jsx("button", { type: "button", onClick: () => { void controller.reconcile(upload.operationId).catch(error => setUploadError(error instanceof Error ? error.message : labels.uploadStatusUnavailable)); }, children: labels.checkUpload })] }, upload.operationId)) }), history && historyPath !== undefined && _jsx(FileHistory, { controller: controller, path: historyPath, labels: labels, reload: historyKey, onClose: () => setHistoryPath(undefined) }, historyPath)] });
+    const items = [];
+    if (onOpen)
+        items.push({ id: 'open', label: labels.open, icon: _jsx(FolderOpen, { "aria-hidden": "true" }), onSelect: onOpen });
+    if (onHistory)
+        items.push({ id: 'history', label: labels.history, icon: _jsx(History, { "aria-hidden": "true" }), onSelect: onHistory });
+    items.push({ id: 'download', label: labels.download, icon: _jsx(Download, { "aria-hidden": "true" }), onSelect: () => { void download(); } });
+    return _jsx(Actions, { label: labels.actionsOf(entry.path), icon: _jsx(MoreHorizontal, { "aria-hidden": "true" }), items: items });
 }
-function FileHistory({ controller, path, labels, reload, onClose }) {
+function FileHistory({ components: { Button, Versions, Separator }, locale, controller, path, labels, reload, onClose }) {
     const [versions, setVersions] = useState();
     const [failure, setFailure] = useState('');
     const [selected, setSelected] = useState();
@@ -252,5 +385,5 @@ function FileHistory({ controller, path, labels, reload, onClose }) {
         }
         catch { /* Binary history remains a byte-qualified read-only preview. */ }
     }
-    return _jsxs("section", { "aria-label": labels.historyOf(path), className: "border-t border-border p-2 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h3", { className: "font-medium", children: labels.historyOf(path) }), _jsx("button", { type: "button", onClick: onClose, children: labels.closeHistory })] }), failure && _jsx("p", { role: "alert", children: failure }), !versions && !failure && _jsx("p", { role: "status", children: labels.loadingHistory }), versions?.length === 0 && _jsx("p", { children: labels.noHistory }), _jsx("ul", { className: "m-0 list-none p-0", children: versions?.map(version => _jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": selected === version.revision, onClick: () => setSelected(version.revision), children: [version.savedAt ? new Date(version.savedAt).toLocaleString() : labels.earlierVersion, " \u00B7 ", version.revision.slice(0, 8)] }) }, version.revision)) }), preview && _jsxs("div", { "data-testid": "file-history-preview", "data-revision": preview.ref.revision, children: [_jsx("p", { children: labels.readOnlyRevision(preview.bytes.byteLength) }), text === undefined ? _jsx("p", { children: labels.binaryFile(preview.mediaType) }) : _jsx("pre", { className: "max-h-80 overflow-auto whitespace-pre-wrap", children: text })] })] });
+    return _jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsxs("section", { "aria-label": labels.historyOf(path), className: "file-tree-history", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("h3", { className: "font-medium", children: labels.historyOf(path) }), _jsx(Button, { type: "button", variant: "ghost", onClick: onClose, children: labels.closeHistory })] }), failure && _jsx("p", { role: "alert", children: failure }), !versions && !failure && _jsx("p", { role: "status", children: labels.loadingHistory }), versions?.length === 0 && _jsx("p", { children: labels.noHistory }), versions && _jsx(Versions, { versions: versions, current: selected ?? versions[0]?.revision ?? '', onSelect: setSelected, locale: locale, earlierVersion: labels.earlierVersion }), preview && _jsxs("div", { "data-testid": "file-history-preview", "data-revision": preview.ref.revision, children: [_jsx("p", { children: labels.readOnlyRevision(preview.bytes.byteLength) }), text === undefined ? _jsx("p", { children: labels.binaryFile(preview.mediaType) }) : _jsx("pre", { className: "max-h-80 overflow-auto whitespace-pre-wrap", children: text })] })] })] });
 }

package/dist/file-tree.d.ts

@@ -15,6 +15,7 @@ export type FileListing = {
 export interface FileUpload {
     readonly operationId: string;
     readonly path: string;
+    readonly size: number;
     readonly state: {
         readonly kind: 'pending';
     } | {
@@ -47,6 +48,8 @@ export interface FileTreeController {
         readonly signal?: AbortSignal;
     }) => Promise<FileUpload>;
     readonly reconcile: (operationId: string) => Promise<FileUpload>;
+    /** Retry a refused upload with its captured bytes. Unconfirmed uploads only reconcile the original operation. */
+    readonly retry: (operationId: string) => Promise<FileUpload>;
     readonly history: (path: string, signal?: AbortSignal) => Promise<readonly SavedRevision[]>;
     readonly dispose: () => void;
 }

package/dist/file-tree.js

@@ -61,7 +61,7 @@ export function createFileTreeController({ revisionProvider }) {
         const attempt = attempts.get(operationId);
         if (!attempt)
             throw new Error('Unknown upload operation');
-        const current = { operationId, path: attempt.current.path, state: { kind: 'settled', result } };
+        const current = { ...attempt.current, state: { kind: 'settled', result } };
         attempt.current = current;
         update({ ...state, uploads: state.uploads.map(item => item.operationId === operationId ? current : item) });
         if (result.kind === 'committed' && state.lifecycle === 'active') {
@@ -150,7 +150,7 @@ export function createFileTreeController({ revisionProvider }) {
             const request = publicationSnapshot({ operationId, atomicity: 'all-or-nothing', changes: [input.replace
                         ? { kind: 'replace', target: input.replace, bytes, mediaType: input.mediaType ?? 'application/octet-stream' }
                         : { kind: 'create', target, expected: { kind: 'absent' }, bytes, mediaType: input.mediaType ?? 'application/octet-stream' }] });
-            const current = { operationId, path: input.path, state: { kind: 'pending' } };
+            const current = { operationId, path: input.path, size: bytes.byteLength, state: { kind: 'pending' } };
             const digest = await publicationDigest(request);
             active();
             const concurrent = unresolved();
@@ -195,6 +195,21 @@ export function createFileTreeController({ revisionProvider }) {
             };
             return attempt.reconciling = run();
         },
+        retry: operationId => {
+            active();
+            const attempt = attempts.get(operationId);
+            if (!attempt)
+                return Promise.reject(new Error('Unknown upload operation'));
+            if (attempt.current.state.kind === 'pending' || attempt.current.state.result.kind === 'committed')
+                return Promise.resolve(attempt.current);
+            if (attempt.current.state.result.kind === 'unknown')
+                return controller.reconcile(operationId);
+            const change = attempt.request.changes[0];
+            if (change.kind === 'delete')
+                return Promise.reject(new Error('An upload cannot delete a file'));
+            return controller.upload({ path: attempt.current.path, bytes: attempt.bytes, mediaType: change.mediaType,
+                ...(change.kind === 'replace' ? { replace: change.target } : {}) });
+        },
         history: (path, signal) => { active(); return revisionProvider.history(path, signal ? AbortSignal.any([signal, lifetime.signal]) : lifetime.signal); },
         dispose: () => { if (state.lifecycle === 'disposed')
             return; lifetime.abort(); for (const load of loads.values())

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;