@hachej/boring-ui-kit 0.3.2 → 0.4.1

package/dist/canvas-proposals.js

@@ -28,18 +28,19 @@ function ProposalChanges({ proposal }) {
     }, [proposal]);
     return _jsxs("details", { children: [_jsxs("summary", { children: ["Review ", changes.length, " changed ", changes.length === 1 ? 'record' : 'records'] }), changes.map(change => _jsxs("div", { children: [_jsxs("h4", { children: [change.kind, ": ", change.id] }), _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Field" }), _jsx("th", { scope: "col", children: "Before" }), _jsx("th", { scope: "col", children: "After" })] }) }), _jsx("tbody", { children: change.fields.map(row => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.field }), _jsx("td", { children: _jsx("pre", { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: row.before }) }), _jsx("td", { children: _jsx("pre", { style: { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }, children: row.after }) })] }, row.field)) })] })] }, change.id))] });
 }
-export function CanvasProposals({ controller, state, editor, busy, run }) {
+export function CanvasProposals({ components, controller, state, editor, busy, run }) {
     const nativeReadOnly = useValue('canvas proposal readonly', () => !editor || editor.isDisposed || editor.getIsReadonly(), [editor]);
     const blocked = busy || nativeReadOnly || state.readOnly || state.lifecycle !== 'active' || state.problem !== null
         || state.save.kind === 'pending' || (state.save.kind === 'settled' && state.save.result.kind === 'unknown');
+    const Control = components?.button ?? 'button';
     if (!state.proposals.length)
         return null;
     return _jsx("aside", { "aria-label": "Canvas proposals", children: state.proposals.map(proposal => {
             const stale = state.bufferVersion !== proposal.base.target.subject.bufferVersion || !sameBase(state.base, proposal.base.target.subject.base);
-            return _jsxs("article", { "data-boring": "canvas-proposal", children: [_jsx("h3", { children: proposal.summary || 'Canvas change proposal' }), _jsx(ProposalChanges, { proposal: proposal }), proposal.adopted ? _jsx("p", { children: "Applied locally. Publication status is shown above." }) : stale ? _jsx("p", { children: "Canvas changed since this proposal." }) : null, !proposal.adopted && _jsx("button", { type: "button", disabled: blocked || stale, onClick: () => {
+            return _jsxs("article", { "data-boring": "canvas-proposal", children: [_jsx("h3", { children: proposal.summary || 'Canvas change proposal' }), _jsx(ProposalChanges, { proposal: proposal }), proposal.adopted ? _jsx("p", { children: "Applied locally. Publication status is shown above." }) : stale ? _jsx("p", { children: "Canvas changed since this proposal." }) : null, !proposal.adopted && _jsx(Control, { type: "button", disabled: blocked || stale, onClick: () => {
                             if (!editor || editor.isDisposed || editor.getIsReadonly())
                                 return;
                             void run(() => controller.actions.accept(proposal.id));
-                        }, children: "Accept and save" }), _jsx("button", { type: "button", disabled: busy || state.lifecycle !== 'active', onClick: () => controller.actions.reject(proposal.id), children: "Dismiss" })] }, proposal.id);
+                        }, children: "Accept and save" }), _jsx(Control, { type: "button", disabled: busy || state.lifecycle !== 'active', onClick: () => controller.actions.reject(proposal.id), children: "Dismiss" })] }, proposal.id);
         }) });
 }

package/dist/experience-document-viewer.d.ts

@@ -1,6 +1,7 @@
 import type { RenderedExperienceCell } from './experience-renderer.js';
 import type { ExperienceAccess } from './experience-compose.js';
 import type { ExperienceDocumentController, ExperienceRegionRequest } from './experience-document.js';
+import type { ViewerComponents } from './viewer-components.js';
 export interface ExperienceDocumentProps {
     readonly controller: ExperienceDocumentController;
     readonly cells: readonly RenderedExperienceCell[];
@@ -8,6 +9,8 @@ export interface ExperienceDocumentProps {
     readonly onRegenerate?: (request: ExperienceRegionRequest) => void | Promise<void>;
     readonly title?: string;
     readonly className?: string;
+    /** Host presentation for the layout controls; without it the package renders unstyled native buttons. */
+    readonly components?: ViewerComponents;
 }
 export declare function ExperienceDocument(props: ExperienceDocumentProps): import("react").JSX.Element;
 //# sourceMappingURL=experience-document-viewer.d.ts.map

package/dist/experience-document-viewer.js

@@ -4,7 +4,8 @@ import { TextDraftControls } from './text-draft-controls.js';
 import { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';
 import { ExperienceRenderer } from './experience-renderer.js';
 import { layoutProps } from './experience-catalog.js';
-function MountedDocument({ controller, cells, canView, onRegenerate, title = 'Experience layout', className }) {
+function MountedDocument({ controller, cells, canView, onRegenerate, title = 'Experience layout', className, components }) {
+    const Control = components?.button ?? 'button';
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const [error, setError] = useState();
     const active = useRef(true);
@@ -26,11 +27,11 @@ function MountedDocument({ controller, cells, canView, onRegenerate, title = 'Ex
     const status = disposed ? 'Viewer disposed' : state.readOnly ? 'Read only' : pending ? 'Keeping selected layout' : unknown ? 'Keep unconfirmed. Reconcile before keeping again.'
         : state.save.kind === 'settled' && state.save.result.kind !== 'saved' ? state.save.result.kind === 'partial' ? 'Keep unconfirmed' : state.save.result.reason
             : state.dirty ? 'Layout not kept' : 'Layout kept';
-    return _jsxs("section", { "data-boring": "experience-document", className: className, "aria-label": title, children: [_jsxs("header", { children: [_jsx("strong", { children: title }), _jsx("span", { role: "status", children: status })] }), _jsxs("div", { role: "toolbar", "aria-label": "Layout document controls", children: [_jsx("button", { type: "button", disabled: disposed || state.readOnly || !state.dirty || !state.descriptor || pending || unknown, onClick: () => { const selection = controller.actions.selection(); perform(() => controller.flush(selection)); }, children: "Keep this layout" }), _jsx("button", { type: "button", disabled: disposed || pending || unknown, onClick: () => perform(controller.actions.refresh), children: "Refresh layout" }), _jsx("button", { type: "button", disabled: disposed || !unknown, onClick: () => perform(controller.actions.reconcile), children: "Reconcile keep" }), _jsx("button", { type: "button", disabled: disposed || pending || unknown || state.remote === null, onClick: () => perform(controller.actions.discardToRemote), children: "Discard local layout" }), state.pin && _jsx("button", { type: "button", disabled: disposed || state.readOnly || pending || unknown, onClick: () => {
+    return _jsxs("section", { "data-boring": "experience-document", className: className, "aria-label": title, children: [_jsxs("header", { children: [_jsx("strong", { children: title }), _jsx("span", { role: "status", children: status })] }), _jsxs("div", { role: "toolbar", "aria-label": "Layout document controls", children: [_jsx(Control, { type: "button", disabled: disposed || state.readOnly || !state.dirty || !state.descriptor || pending || unknown, onClick: () => { const selection = controller.actions.selection(); perform(() => controller.flush(selection)); }, children: "Keep this layout" }), _jsx(Control, { type: "button", disabled: disposed || pending || unknown, onClick: () => perform(controller.actions.refresh), children: "Refresh layout" }), _jsx(Control, { type: "button", disabled: disposed || !unknown, onClick: () => perform(controller.actions.reconcile), children: "Reconcile keep" }), _jsx(Control, { type: "button", disabled: disposed || pending || unknown || state.remote === null, onClick: () => perform(controller.actions.discardToRemote), children: "Discard local layout" }), state.pin && _jsx(Control, { type: "button", disabled: disposed || state.readOnly || pending || unknown, onClick: () => {
                             const pin = state.pin;
                             if (pin)
                                 perform(() => controller.actions.pin(pin.selection));
-                        }, children: "Pin this region" }), regions.filter(region => region.regenerate.includes('request')).map(region => _jsxs("button", { type: "button", disabled: disposed || state.readOnly || !onRegenerate, onClick: () => {
+                        }, children: "Pin this region" }), regions.filter(region => region.regenerate.includes('request')).map(region => _jsxs(Control, { type: "button", disabled: disposed || state.readOnly || !onRegenerate, onClick: () => {
                             const result = controller.actions.beginRegion(controller.actions.selection(), region.region, 'request');
                             if (result.kind !== 'applied') {
                                 setError('reason' in result ? result.reason : 'Region request was not started');
@@ -41,10 +42,10 @@ function MountedDocument({ controller, cells, canView, onRegenerate, title = 'Ex
                                 if (active.current)
                                     setError('The region could not be regenerated. The current layout has been retained.');
                             });
-                        }, children: ["Regenerate ", region.region] }, region.region))] }), _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') }), proposal && _jsxs("div", { role: "group", "aria-label": proposal.kind === 'region' ? 'Proposed region' : 'Proposed layout', children: [_jsx("button", { type: "button", disabled: disposed || state.readOnly, onClick: () => {
+                        }, children: ["Regenerate ", region.region] }, region.region))] }), _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') }), proposal && _jsxs("div", { role: "group", "aria-label": proposal.kind === 'region' ? 'Proposed region' : 'Proposed layout', children: [_jsx(Control, { type: "button", disabled: disposed || state.readOnly, onClick: () => {
                             const result = controller.actions.adopt(proposal.id);
                             setError(result.kind === 'applied' ? undefined : 'reason' in result ? result.reason : 'Layout was not adopted');
-                        }, children: proposal.kind === 'region' ? 'Use proposed region' : 'Use proposed layout' }), _jsx("button", { type: "button", disabled: disposed, onClick: () => { controller.actions.reject(proposal.id); setError(undefined); }, children: proposal.kind === 'region' ? 'Dismiss proposed region' : 'Dismiss proposed layout' })] }), (error || state.problem) && _jsx("p", { role: "alert", children: error ?? state.problem }), state.descriptor ? _jsx("section", { "data-boring": "experience", "aria-label": state.descriptor.title ?? state.descriptor.name, children: _jsx(ExperienceRenderer, { descriptor: state.descriptor, cells: cells, canView: canView }) }) : _jsx("p", { children: "No layout selected" })] });
+                        }, children: proposal.kind === 'region' ? 'Use proposed region' : 'Use proposed layout' }), _jsx(Control, { type: "button", disabled: disposed, onClick: () => { controller.actions.reject(proposal.id); setError(undefined); }, children: proposal.kind === 'region' ? 'Dismiss proposed region' : 'Dismiss proposed layout' })] }), (error || state.problem) && _jsx("p", { role: "alert", children: error ?? state.problem }), state.descriptor ? _jsx("section", { "data-boring": "experience", "aria-label": state.descriptor.title ?? state.descriptor.name, children: _jsx(ExperienceRenderer, { descriptor: state.descriptor, cells: cells, canView: canView }) }) : _jsx("p", { children: "No layout selected" })] });
 }
 export function ExperienceDocument(props) {
     const [mount, setMount] = useState({ controller: props.controller, sequence: 0 });

package/dist/experience.d.ts

@@ -1,5 +1,6 @@
 import type { RenderedExperienceCell } from './experience-renderer.js';
 import type { ExperienceAccess } from './experience-compose.js';
+import type { ViewerComponents } from './viewer-components.js';
 export { ExperienceRenderer } from './experience-renderer.js';
 export type { RenderedExperienceCell } from './experience-renderer.js';
 export interface ExperienceProps {
@@ -7,6 +8,8 @@ export interface ExperienceProps {
     readonly cells: readonly RenderedExperienceCell[];
     readonly canView: ExperienceAccess['canView'];
     readonly className?: string;
+    /** Host presentation for the proposal action; without it the package renders an unstyled native button. */
+    readonly components?: ViewerComponents;
 }
 export declare function Experience(props: ExperienceProps): import("react").JSX.Element;
 //# sourceMappingURL=experience.d.ts.map

package/dist/experience.js

@@ -13,11 +13,12 @@ function select(props) {
     }
 }
 export function Experience(props) {
+    const Control = props.components?.button ?? 'button';
     const [current, setCurrent] = useState(() => select(props));
     const candidate = current.input === props.descriptor && current.kind === 'ready' ? null : select(props);
     const offered = candidate?.kind === 'invalid' && current.kind === 'invalid' ? null : candidate;
     return _jsxs("section", { "data-boring": "experience", className: props.className, "aria-label": current.kind === 'ready' ? current.descriptor.title ?? current.descriptor.name : 'Experience unavailable', children: [offered && (offered.kind === 'ready'
-                ? _jsx("button", { type: "button", onClick: () => setCurrent(offered), children: "Use proposed layout" })
+                ? _jsx(Control, { type: "button", onClick: () => setCurrent(offered), children: "Use proposed layout" })
                 : _jsx("p", { role: "alert", children: "Proposed layout unavailable. The current layout has been retained." })), current.kind === 'invalid' ? _jsx("p", { role: "alert", children: "Experience unavailable" })
                 : _jsx(ExperienceRenderer, { descriptor: current.descriptor, cells: props.cells, canView: props.canView })] });
 }

package/dist/file-tree-view.d.ts

@@ -1,4 +1,6 @@
-import type { RevisionProvider } from '@hachej/boring-files/revision';
+import type { Collapsible } from '@base-ui/react/collapsible';
+import type { ComponentProps, ReactNode } from 'react';
+import type { RevisionProvider, SavedRevision } from '@hachej/boring-files/revision';
 import type { FileTreeController } from './file-tree.js';
 /** Every word of the tree, so a host can translate it. Functions receive what they name. */
 export declare const defaultFileTreeLabels: {
@@ -14,6 +16,20 @@ export declare const defaultFileTreeLabels: {
     retry: string;
     noMatches: string;
     empty: string;
+    emptyHint: string;
+    library: string;
+    close: string;
+    open: string;
+    download: string;
+    downloadingFailed: string;
+    actionsOf: (path: string) => string;
+    shownItems: (count: number) => string;
+    folder: string;
+    childCount: (count: number) => string;
+    file: string;
+    image: string;
+    document: string;
+    dropFiles: string;
     loadMore: string;
     history: string;
     historyOf: (path: string) => string;
@@ -37,7 +53,56 @@ export type FileTreeLabels = typeof defaultFileTreeLabels;
 export declare const frenchFileTreeLabels: FileTreeLabels;
 /** The languages the tree ships with; anything else is set word by word through `labels`. */
 export type FileTreeLocale = 'en' | 'fr';
+export interface FileTreeAction {
+    readonly id: 'open' | 'history' | 'download';
+    readonly label: string;
+    readonly icon: ReactNode;
+    readonly onSelect: () => void;
+}
+export interface FileTreeActionsProps {
+    readonly label: string;
+    readonly icon: ReactNode;
+    readonly items: readonly FileTreeAction[];
+}
+export type FileTreeButtonProps = ComponentProps<'button'> & {
+    readonly variant?: 'secondary' | 'ghost';
+    readonly size?: 'default' | 'sm' | 'icon';
+};
+export interface FileTreeVersionsProps {
+    readonly versions: readonly SavedRevision[];
+    readonly current: string;
+    readonly onSelect: (revision: string) => void;
+    readonly locale: FileTreeLocale;
+    readonly earlierVersion: string;
+}
+/** Host presentation. The registry supplies real shadcn Base UI controls and shared version rows; no primitive fallback. */
+export interface FileTreeComponents {
+    readonly Button: (props: FileTreeButtonProps) => ReactNode;
+    readonly Actions: (props: FileTreeActionsProps) => ReactNode;
+    readonly Versions: (props: FileTreeVersionsProps) => ReactNode;
+    /** The host's shadcn sidebar menu (`SidebarMenu`, `SidebarMenuItem`, `SidebarMenuSub`). */
+    readonly Menu: (props: ComponentProps<'ul'>) => ReactNode;
+    readonly MenuItem: (props: ComponentProps<'li'>) => ReactNode;
+    readonly MenuSub: (props: ComponentProps<'ul'>) => ReactNode;
+    /** The host's shadcn `Input`. */
+    readonly Input: (props: ComponentProps<'input'>) => ReactNode;
+    /** The host's shadcn `Separator`. */
+    readonly Separator: () => ReactNode;
+    /** The host's shadcn `Collapsible`, `CollapsibleTrigger` and `CollapsibleContent`. */
+    readonly Collapsible: (props: Collapsible.Root.Props) => ReactNode;
+    readonly CollapsibleTrigger: (props: Collapsible.Trigger.Props) => ReactNode;
+    readonly CollapsibleContent: (props: Collapsible.Panel.Props) => ReactNode;
+    /** The host's shadcn `Empty`, composed from an icon, a title, an optional description and optional actions. */
+    readonly Empty: (props: {
+        readonly icon?: ReactNode;
+        readonly title: ReactNode;
+        readonly description?: ReactNode;
+        readonly className?: string;
+        readonly children?: ReactNode;
+    }) => ReactNode;
+}
 export interface FileTreeProps {
+    readonly components: FileTreeComponents;
     readonly revisionProvider: RevisionProvider;
     readonly onOpen?: (path: string) => void;
     readonly selectedPath?: string;
@@ -49,8 +114,16 @@ export interface FileTreeProps {
     readonly labels?: Partial<FileTreeLabels>;
     /** Offer the Upload button. Default true. */
     readonly upload?: boolean;
-    /** Offer each file's History button. Default true. */
+    /** Offer version history in each file's actions menu. Default true. */
     readonly history?: boolean;
+    /** Offer the Refresh button. Default true; a host whose tree follows the workspace's change feed (`refreshKey`) can hide it. */
+    readonly refresh?: boolean;
+    /** `list` (default) includes a Library header, inset search, metadata and file actions. `plain` keeps the compact tree. */
+    readonly variant?: 'plain' | 'list';
+    /** The list header's title, over the locale's Library label. */
+    readonly title?: string;
+    /** A host-owned dismissal action, shown at the right of the list header. */
+    readonly onClose?: () => void;
     /** Reload the open folders and the current search whenever this value changes (for example after the agent saves a file). */
     readonly refreshKey?: unknown;
     /** Reload the open history panel whenever this value changes (for example the seq of the workspace's latest change event). */
@@ -62,5 +135,5 @@ export interface FileTreeViewProps extends Omit<FileTreeProps, 'revisionProvider
     readonly controller: FileTreeController;
 }
 /** Renders a borrowed controller, for a workspace whose chat and tree share upload state. */
-export declare function FileTreeView({ controller, onOpen, selectedPath, className, uploadDirectory, locale, labels: given, upload, history, refreshKey, historyKey }: FileTreeViewProps): import("react").JSX.Element;
+export declare function FileTreeView({ components, controller, onOpen, selectedPath, className, uploadDirectory, locale, labels: given, upload, history, refresh, variant, title, onClose, refreshKey, historyKey }: FileTreeViewProps): import("react").JSX.Element;
 //# sourceMappingURL=file-tree-view.d.ts.map

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())