@hachej/boring-ui-kit 0.4.13 → 0.4.14

package/README.md

@@ -78,6 +78,8 @@ The default schema includes headings, lists, task lists, quotes, code and text m
 
 `createVoiceCapture` from `@hachej/boring-ui-kit/voice-capture` records browser audio without React, files or Pi. Call `start()` from a person's gesture. It feature-detects microphone access and returns a recording or a typed refusal. `stop()` returns the Blob, recorded MIME type, page-clock sample times and `truncated`; `cancel()` discards audio and releases only this capture's microphone tracks, including a permission request that finishes late.
 
+Where the page has Web Audio, the recording is a 16 kHz mono 16-bit WAV (`audio/wav`, 32 kB/s), not MediaRecorder's webm: a webm carries the browser's clock, and one whose timestamps jumped was refused by every OpenAI transcription model. `start()` resolves `recording` once the first sound arrives, so a host showing "recording" never loses the first words; no sound within `firstSoundMs` (5 s) refuses as `busy`. A context the browser keeps suspended (no user activation, e.g. a hold begun on `touchstart`) records that take with MediaRecorder as before; `audioContext: null` always does. `encodeWav` and `downsample` are exported.
+
 `maxMs` caps capture at five minutes by default. Reaching the cap stops the microphone; callers still choose when to consume the recording through `stop()`. Transcription and persistence remain host capabilities. The existing `@hachej/boring-feedback/page` capture API re-exports this implementation unchanged. The headless root imports neither entry.
 
 The [registry voice-message guide](../../registry/README.md#voice-messages-in-pi-chat) describes PiChat's optional hold-to-send composition. Public capture behavior runs in `test/packages/ui.test.mjs`, compatibility in `test/packages/feedback-voice.test.mjs`, and dependency-free installation in `test/scaffold/isolated-ui.test.mjs`.
@@ -390,8 +392,16 @@ The default `list` variant has a Library header, visible-item count, inset searc
 visible items, including folders; it is not a workspace total. A folder shows its
 child count only after its provider listing is complete; unloaded, loading, failed
 or paginated listings show no count. The menu offers
-Open, Version history and Download through the same provider. Rename and Delete
-are absent because `RevisionProvider` exposes neither operation. No edit date or
+Open, Version history and Download through the same provider. When the client has
+`rename`, files also offer Rename (inline in the row, F2) and Move to… (plus dragging a
+file onto a folder or the root); when it has `delete`, Delete (Delete key, after a
+confirmation dialog). `capabilities={{ effective }}`, when the host passes it, only
+narrows these to the listed `rename`/`delete`. Each change is a conditional write with the
+revision read when the action started (`controller.prepare`); a refusal stays on the
+row until dismissed and the affected folders are read again. A committed change calls
+`onRenamed(from, to)` or `onDeleted(path)`, so a host's viewer follows the file or closes
+(`AgentWorkspace` and `Documents` do). Folders are destinations
+only. No edit date or
 author is invented or fetched per row. `variant="plain"` keeps the compact tree.
 `title` overrides the list heading; `onClose` adds a host-owned close button.
 

package/bin/boring-ui-blocks.mjs

@@ -6,6 +6,7 @@
 //   npx boring-ui-blocks update [--version <v>] [--registry <url>] [--dry-run] [--manifest <path>] [--cwd <dir>]
 //   npx boring-ui-blocks add <shadcn add arguments...> [--manifest <path>] [--cwd <dir>]
 //   npx boring-ui-blocks manifest [--manifest <path>] [--cwd <dir>]
+//   npx boring-ui-blocks help    (also --help: the usage and which items to add; exit 0)
 //
 // `check` writes nothing. `add`, `update` and `manifest` write the shadcn files they install and the manifest, nothing else.
 import { createHash } from 'node:crypto';
@@ -214,7 +215,12 @@ export function check(app, design = [], manifest = MANIFEST) {
   return { version, blocks: blocks.map(block => block.name), violations };
 }
 
-const USAGE = 'usage: boring-ui-blocks check [--design <dir>...] [--manifest <path>] [--cwd <dir>] [--json] | update [--version <v>] [--registry <url>] [--dry-run] [--manifest <path>] [--cwd <dir>] | add <shadcn add args...> [--manifest <path>] [--cwd <dir>] | manifest [--manifest <path>] [--cwd <dir>]';
+const USAGE = `usage: boring-ui-blocks check [--design <dir>...] [--manifest <path>] [--cwd <dir>] [--json] | update [--version <v>] [--registry <url>] [--dry-run] [--manifest <path>] [--cwd <dir>] | add <shadcn add args...> [--manifest <path>] [--cwd <dir>] | manifest [--manifest <path>] [--cwd <dir>] | help\n\n` +
+  'Blocks: pi-app is the whole agent app with every chat feature and viewer. pi-chat is the core chat only: add pi-chat-plugins for every ' +
+  'feature, or one of pi-chat-markdown, pi-chat-slash, pi-chat-mentions, pi-chat-pickers, pi-chat-voice, pi-chat-attachments, ' +
+  'pi-chat-question, pi-chat-approval, pi-chat-subagent and pi-artifacts. Viewers are viewer-frame plus viewer-markdown, viewer-html, ' +
+  'viewer-image, viewer-pdf and viewer-code, loaded by kind. update reinstalls only installed items: ' +
+  'add the new ones an app uses once (registry/README.md, "From one item to small items").';
 const FLAGS = { check: ['design', 'manifest', 'json'], update: ['version', 'registry', 'dry-run', 'manifest'], manifest: ['manifest'] };
 
 function parse(command, rest) {
@@ -274,6 +280,7 @@ const line = v => `${v.check} ${v.rule} ${v.file}${v.line ? `:${v.line}:${v.colu
 
 export function main(argv, cwd = process.cwd(), log = console.log, error = console.error) {
   const [command, ...rest] = argv;
+  if (['help', '--help', '-h'].includes(command)) { log(USAGE); return 0; }
   let flags;
   try {
     if (!['check', 'update', 'add', 'manifest'].includes(command)) throw new Error(command ? `unknown command ${command}` : 'missing command');

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

@@ -50,6 +50,22 @@ export declare const defaultFileTreeLabels: {
     tooLarge: string;
     uploadProgress: (name: string) => string;
     cancelUpload: (name: string) => string;
+    rename: string;
+    renameOf: (path: string) => string;
+    move: string;
+    moveTitle: (name: string) => string;
+    moveDescription: string;
+    root: string;
+    delete: string;
+    deleteTitle: (name: string) => string;
+    deleteDescription: string;
+    cancel: string;
+    changing: string;
+    renamed: (to: string) => string;
+    deleted: string;
+    changedSince: string;
+    dismiss: (path: string) => string;
+    invalidName: string;
 };
 export type FileTreeLabels = typeof defaultFileTreeLabels;
 /** The tree's words in French (`locale="fr"`). */
@@ -57,10 +73,14 @@ 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 id: 'open' | 'history' | 'download' | 'rename' | 'move' | 'delete';
     readonly label: string;
     readonly icon: ReactNode;
     readonly onSelect: () => void;
+    /** Shown as a destructive item (Delete). */
+    readonly destructive?: boolean;
+    /** The action moves focus itself (an inline input or a dialog): the menu must not return focus to its trigger on close. */
+    readonly ownsFocus?: boolean;
 }
 export interface FileTreeActionsProps {
     readonly label: string;
@@ -68,7 +88,7 @@ export interface FileTreeActionsProps {
     readonly items: readonly FileTreeAction[];
 }
 export type FileTreeButtonProps = ComponentProps<'button'> & {
-    readonly variant?: 'secondary' | 'ghost';
+    readonly variant?: 'secondary' | 'ghost' | 'outline' | 'destructive';
     readonly size?: 'default' | 'sm' | 'icon';
 };
 export interface FileTreeVersionsProps {
@@ -78,6 +98,16 @@ export interface FileTreeVersionsProps {
     readonly locale: FileTreeLocale;
     readonly earlierVersion: string;
 }
+/** A modal dialog: the delete confirmation and the Move to… folder list. */
+export interface FileTreeDialogProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly title: ReactNode;
+    readonly description?: ReactNode;
+    readonly children?: ReactNode;
+    /** The dialog's buttons. */
+    readonly footer: ReactNode;
+}
 /** 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;
@@ -108,6 +138,12 @@ export interface FileTreeComponents {
         readonly value: number | null;
         readonly 'aria-label': string;
     }) => ReactNode;
+    /** The host's shadcn `Dialog`. Without it the tree offers neither Delete nor Move to… (dragging a file onto a folder still moves it). */
+    readonly Dialog?: (props: FileTreeDialogProps) => ReactNode;
+}
+/** The workspace's effective capabilities (`ResourceCapabilities.effective`) as the host read them. */
+export interface FileTreeCapabilities {
+    readonly effective: readonly string[];
 }
 /** How far an upload through `uploadBlob` is. */
 export interface UploadProgress {
@@ -156,6 +192,15 @@ export interface FileTreeProps {
     readonly tooLarge?: string;
     /** The host's large-file upload (see `UploadBlob`), used above `maxBytes`. */
     readonly uploadBlob?: UploadBlob;
+    /**
+     * Narrows the file actions to what this person may do. The client's `rename` turns on Rename and Move to…, its `delete` turns on
+     * Delete; when given, only the listed `rename`/`delete` stay. Omitted: whatever the client has.
+     */
+    readonly capabilities?: FileTreeCapabilities;
+    /** A rename or move from the tree committed: `from` is now `to` (a host showing `from` follows it). */
+    readonly onRenamed?: (from: string, to: string) => void;
+    /** A delete from the tree committed (a host showing `path` closes it). */
+    readonly onDeleted?: (path: string) => void;
 }
 /** One borrowed binding powers browsing, search, upload and history. Historical previews never replace an editor's draft. */
 export declare function FileTree(props: FileTreeProps): import("react").JSX.Element;
@@ -163,5 +208,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({ components, controller, onOpen, selectedPath, className, uploadDirectory, locale, labels: given, upload, history, refresh, variant, title, onClose, refreshKey, historyKey, maxBytes, tooLarge, uploadBlob }: 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, maxBytes, tooLarge, uploadBlob, capabilities, onRenamed, onDeleted }: FileTreeViewProps): import("react").JSX.Element;
 //# sourceMappingURL=file-tree-view.d.ts.map

package/dist/file-tree-view.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { ChevronRight, Download, File, FileCode, FileImage, FileSpreadsheet, FileText, Folder, FolderOpen, History, LoaderCircle, MoreHorizontal, Search, Upload, X } from 'lucide-react';
+import { ChevronRight, Download, File, FileCode, FileImage, FileSpreadsheet, FileText, Folder, FolderInput, FolderOpen, History, LoaderCircle, MoreHorizontal, Pencil, Search, Trash2, 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. */
@@ -51,6 +51,22 @@ export const defaultFileTreeLabels = {
     tooLarge: 'The file is too large to upload.',
     uploadProgress: (name) => `Uploading ${name}`,
     cancelUpload: (name) => `Cancel uploading ${name}`,
+    rename: 'Rename',
+    renameOf: (path) => `Rename ${path}`,
+    move: 'Move to…',
+    moveTitle: (name) => `Move ${name}`,
+    moveDescription: 'Choose the folder it goes in.',
+    root: 'Workspace root',
+    delete: 'Delete',
+    deleteTitle: (name) => `Delete ${name}?`,
+    deleteDescription: 'It is removed from this workspace for everyone who uses it.',
+    cancel: 'Cancel',
+    changing: 'Saving…',
+    renamed: (to) => `Renamed to ${to}`,
+    deleted: 'Deleted',
+    changedSince: 'It changed since you opened it, so nothing was changed. Try again.',
+    dismiss: (path) => `Dismiss the message for ${path}`,
+    invalidName: 'A name cannot contain /. Use Move to… to change its folder.',
 };
 /** The tree's words in French (`locale="fr"`). */
 export const frenchFileTreeLabels = {
@@ -100,7 +116,27 @@ export const frenchFileTreeLabels = {
     tooLarge: 'Le fichier est trop volumineux pour être importé.',
     uploadProgress: name => `Import de ${name}`,
     cancelUpload: name => `Annuler l’import de ${name}`,
+    rename: 'Renommer',
+    renameOf: path => `Renommer ${path}`,
+    move: 'Déplacer vers…',
+    moveTitle: name => `Déplacer ${name}`,
+    moveDescription: 'Choisissez le dossier de destination.',
+    root: 'Racine de l’espace',
+    delete: 'Supprimer',
+    deleteTitle: name => `Supprimer ${name} ?`,
+    deleteDescription: 'Il est retiré de cet espace pour tous ceux qui l’utilisent.',
+    cancel: 'Annuler',
+    changing: 'Enregistrement…',
+    renamed: to => `Renommé en ${to}`,
+    deleted: 'Supprimé',
+    changedSince: 'Il a changé depuis son ouverture, rien n’a donc été modifié. Réessayez.',
+    dismiss: path => `Fermer le message pour ${path}`,
+    invalidName: 'Un nom ne peut pas contenir /. Utilisez Déplacer vers… pour changer de dossier.',
 };
+/** Carries a dragged file row's path; files dragged in from the computer carry `Files` instead. */
+const DRAGGED_FILE = 'application/x-boring-file-path';
+const parentPath = (path) => path.slice(0, Math.max(0, path.lastIndexOf('/')));
+const baseName = (path) => path.slice(path.lastIndexOf('/') + 1);
 const LOCALES = { en: defaultFileTreeLabels, fr: frenchFileTreeLabels };
 function fileKind(path, labels) {
     const extension = path.includes('.') ? path.slice(path.lastIndexOf('.') + 1).toLowerCase() : '';
@@ -135,8 +171,25 @@ 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({ components, controller, onOpen, selectedPath, className, uploadDirectory = 'uploads', locale = 'en', labels: given, upload = true, history = true, refresh = true, variant = 'list', title, onClose, refreshKey, historyKey, maxBytes, tooLarge, uploadBlob }) {
-    const { Button, Actions, Menu: SidebarMenu, MenuItem: SidebarMenuItem, MenuSub: SidebarMenuSub, Input, Collapsible: CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, Empty, Progress } = components;
+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, maxBytes, tooLarge, uploadBlob, capabilities, onRenamed, onDeleted }) {
+    const changed = useRef({ onRenamed, onDeleted });
+    changed.current = { onRenamed, onDeleted };
+    /** Tell the host about a committed rename or delete, so a viewer showing the file follows or closes. */
+    const report = (mutation) => {
+        if (mutation.state.kind !== 'settled' || mutation.state.result.kind !== 'committed')
+            return mutation;
+        if (mutation.kind === 'rename' && mutation.to !== undefined)
+            changed.current.onRenamed?.(mutation.path, mutation.to);
+        else if (mutation.kind === 'delete')
+            changed.current.onDeleted?.(mutation.path);
+        return mutation;
+    };
+    const { Button, Actions, Menu: SidebarMenu, MenuItem: SidebarMenuItem, MenuSub: SidebarMenuSub, Input, Collapsible: CollapsibleRoot, CollapsibleTrigger, CollapsibleContent, Empty, Progress, Dialog } = components;
+    const can = {
+        // The client's methods turn the actions on; capabilities, when the host passes them, only narrow.
+        rename: controller.actions.rename && (capabilities === undefined || capabilities.effective.includes('rename')),
+        delete: controller.actions.delete && (capabilities === undefined || capabilities.effective.includes('delete')) && Dialog !== undefined,
+    };
     const list = variant === 'list';
     const labels = { ...LOCALES[locale], ...given };
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
@@ -159,6 +212,10 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
     const [focused, setFocused] = useState('');
     const [uploadError, setUploadError] = useState('');
     const [historyPath, setHistoryPath] = useState();
+    const [renaming, setRenaming] = useState();
+    const [asking, setAsking] = useState();
+    const [dragged, setDragged] = useState();
+    const [dropTarget, setDropTarget] = useState();
     const [localFailures, setLocalFailures] = useState(new Map());
     // Uploads through the host's `uploadBlob`, by a key of their own: the name, the progress and the abort behind the cancel button.
     const [blobUploads, setBlobUploads] = useState(new Map());
@@ -228,6 +285,80 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
         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 mutationRows = new Map();
+    for (const item of state.mutations)
+        if (item.state.kind === 'pending' || item.state.result.kind !== 'committed')
+            mutationRows.set(item.path, item);
+    const mutationReason = (item) => item.state.kind === 'pending' ? labels.changing
+        : item.state.result.kind === 'committed' ? item.kind === 'delete' ? labels.deleted : labels.renamed(item.to ?? '')
+            : item.state.result.kind === 'conflict' ? labels.changedSince : item.state.result.kind === 'partial' ? labels.unconfirmed : item.state.result.reason;
+    // A refusal of the name itself (empty, `..`, the same name) keeps the input open with the reason; anything else is the row's.
+    const refused = (path) => (error) => {
+        if (error instanceof TypeError)
+            setRenaming(current => ({ ...current, path, error: error.message }));
+        else
+            setUploadError(error instanceof Error ? error.message : labels.changedSince);
+    };
+    const startRename = (path) => {
+        if (!can.rename)
+            return;
+        setRenaming({ path });
+        void controller.prepare(path).then(revision => { if (revision !== undefined)
+            setRenaming(current => current?.path === path ? { ...current, known: true } : current); });
+    };
+    const ask = (kind, path) => {
+        if (!Dialog || (kind === 'delete' ? !can.delete : !can.rename))
+            return;
+        void controller.prepare(path);
+        setAsking({ kind, path });
+    };
+    const commitRename = (path, value) => {
+        const name = value.trim();
+        if (!name || name === baseName(path)) {
+            setRenaming(undefined);
+            focus(path);
+            return;
+        }
+        const to = parentPath(path) ? `${parentPath(path)}/${name}` : name;
+        if (name.includes('/')) {
+            setRenaming(current => ({ ...current, path, error: labels.invalidName }));
+            return;
+        }
+        setRenaming(undefined);
+        focus(path);
+        void controller.rename(path, to).then(report).then(result => { if (result.state.kind === 'settled' && result.state.result.kind === 'committed')
+            setFocused(to); }, refused(path));
+    };
+    const moveTo = (path, folder) => {
+        setAsking(undefined);
+        if (parentPath(path) === folder)
+            return;
+        void controller.move(path, folder).then(report).catch(refused(path));
+    };
+    const closeAsking = () => { const path = asking?.path; setAsking(undefined); if (path)
+        requestAnimationFrame(() => focus(path)); };
+    const draggedPath = (event) => event.dataTransfer.types.includes(DRAGGED_FILE) ? dragged ?? event.dataTransfer.getData(DRAGGED_FILE) : undefined;
+    /** A folder (or `''`, the root) accepts a dragged file that is not already in it. */
+    const dropHandlers = (folder) => can.rename ? {
+        onDragEnter: (event) => { const path = draggedPath(event); if (path === undefined || parentPath(path) === folder)
+            return; event.preventDefault(); event.stopPropagation(); setDropTarget(folder); },
+        onDragOver: (event) => { const path = draggedPath(event); if (path === undefined || parentPath(path) === folder)
+            return; event.preventDefault(); event.stopPropagation(); event.dataTransfer.dropEffect = 'move'; if (dropTarget !== folder)
+            setDropTarget(folder); },
+        onDragLeave: (event) => { if (draggedPath(event) !== undefined && dropTarget === folder && !event.currentTarget.contains(event.relatedTarget))
+            setDropTarget(undefined); },
+        onDrop: (event) => {
+            const path = draggedPath(event);
+            if (path === undefined)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            setDropTarget(undefined);
+            setDragged(undefined);
+            if (path && parentPath(path) !== folder)
+                void controller.move(path, folder).then(report).catch(refused(path));
+        },
+    } : {};
     const rows = [];
     function flatten(directory, level) {
         for (const entry of state.directories.get(directory)?.entries ?? []) {
@@ -257,6 +388,10 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
             if (node.dataset.path === path)
                 node.focus();
     };
+    /** Files only: a provider renames and deletes regular files, and a row busy uploading or changing waits. */
+    const mutable = (entry) => entry.kind === 'file' && !temporaryPaths.has(entry.path) && uploadRows.get(entry.path)?.kind !== 'pending' && mutationRows.get(entry.path)?.state.kind !== 'pending';
+    /** A blob pointer's row shows the file it stands for, not the pointer's own name: it can be moved or deleted, not renamed in place. */
+    const renameable = (entry) => !entry.blob;
     const keyboard = (event, entry) => {
         const index = rows.findIndex(row => row.entry.path === entry.path);
         const expanded = state.expanded.has(entry.path);
@@ -297,6 +432,16 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
                 else if (!temporaryPaths.has(entry.path))
                     onOpen?.(entry.path);
                 break;
+            case 'F2':
+                if (!mutable(entry) || !can.rename || renameable(entry) === false)
+                    return;
+                startRename(entry.path);
+                break;
+            case 'Delete':
+                if (!mutable(entry) || !can.delete)
+                    return;
+                ask('delete', entry.path);
+                break;
             default: return;
         }
         event.preventDefault();
@@ -323,27 +468,61 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
         const childCount = children?.kind === 'ready' && children.cursor === undefined ? labels.childCount(children.entries.length) : undefined;
         const kind = folder ? { icon: Folder, label: labels.folder } : fileKind(blob?.name ?? 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)
+        const mutation = mutationRows.get(entry.path);
+        const changeable = mutable(entry);
+        const draggable = changeable && can.rename;
+        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", draggable: draggable || undefined, 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(blob?.size ?? 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-blob-type": blob?.type, "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)
+        const editing = renaming?.path === entry.path && can.rename;
+        const mutationFailed = mutation?.state.kind === 'settled';
+        const item = _jsxs(SidebarMenuItem, { role: "treeitem", "data-path": entry.path, "data-blob-type": blob?.type, "data-upload-state": status?.kind, "data-mutation-state": mutation ? mutationFailed ? 'failed' : 'pending' : undefined, "data-drop-target": folder && dropTarget === entry.path ? 'true' : undefined, "data-dragging": dragged === entry.path || undefined, "aria-busy": status?.kind === 'pending' || mutation?.state.kind === 'pending' || undefined, ...(folder ? dropHandlers(entry.path) : {}), ...(draggable ? {
+                onDragStart: (event) => {
+                    if (event.target !== event.currentTarget && !(event.target instanceof Element && event.target.closest('.file-tree-row-button')))
+                        return;
+                    event.stopPropagation();
+                    event.dataTransfer.setData(DRAGGED_FILE, entry.path);
+                    event.dataTransfer.effectAllowed = 'move';
+                    setDragged(entry.path);
+                    void controller.prepare(entry.path);
+                },
+                onDragEnd: () => { setDragged(undefined); setDropTarget(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: "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);
+                keyboard(event, entry); }, className: "file-tree-item", children: [_jsxs("div", { className: "flex items-center gap-1", children: [editing ? _jsxs("span", { className: "file-tree-rename", children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx(Input, { "data-file-rename": true, "data-revision-known": renaming?.known || undefined, "aria-label": labels.renameOf(entry.path), defaultValue: name, autoFocus: true, enterKeyHint: "done", spellCheck: false, "aria-invalid": renaming?.error ? true : undefined, onFocus: event => { const dot = event.currentTarget.value.lastIndexOf('.'); event.currentTarget.setSelectionRange(0, dot > 0 ? dot : event.currentTarget.value.length); }, onKeyDown: event => {
+                                        if (event.key === 'Enter') {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            commitRename(entry.path, event.currentTarget.value);
+                                        }
+                                        else if (event.key === 'Escape') {
+                                            event.preventDefault();
+                                            event.stopPropagation();
+                                            setRenaming(undefined);
+                                            focus(entry.path);
+                                        }
+                                    }, 
+                                    // Focus moved somewhere on purpose cancels; a closing menu that drops focus (no related target) does not.
+                                    onBlur: event => { if (event.relatedTarget)
+                                        setRenaming(current => current?.path === entry.path ? undefined : current); } })] }) : folder ? _jsx(CollapsibleTrigger, { render: button }) : button, (status?.kind === 'pending' || mutation?.state.kind === 'pending') && _jsx(LoaderCircle, { "data-upload-spinner": status ? '' : undefined, "data-mutation-spinner": mutation ? '' : undefined, 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 }), mutation && mutationFailed && _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-mutation-dismiss": true, "aria-label": labels.dismiss(entry.path), title: labels.dismiss(entry.path), onClick: () => controller.dismiss(mutation.operationId), children: _jsx(X, { "aria-hidden": "true" }) }), !folder && !temporary && !status && !editing && mutation?.state.kind !== 'pending' && _jsx(FileActions, { Actions: Actions, controller: controller, entry: entry, labels: labels, onOpen: onOpen ? () => onOpen(entry.path) : undefined, onHistory: history ? () => setHistoryPath(entry.path) : undefined, onError: setUploadError, onRename: changeable && can.rename && renameable(entry) ? () => startRename(entry.path) : undefined, onMove: changeable && can.rename && Dialog ? () => ask('move', entry.path) : undefined, onDelete: changeable && can.delete ? () => ask('delete', entry.path) : undefined })] }), status?.kind === 'failed' && _jsx("span", { "data-upload-error": true, children: status.reason }), editing && renaming?.error && _jsx("span", { "data-mutation-error": true, role: "alert", children: renaming.error }), mutation && mutationFailed && _jsx("span", { "data-mutation-error": true, children: mutationReason(mutation) }), 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')) {
+    const rootDrop = dropHandlers('');
+    const dialogPath = asking?.path ?? '';
+    const folders = asking?.kind === 'move' ? [...new Set(['', ...[...state.directories.values(), state.search].flatMap(listing => listing.entries.filter(entry => entry.kind === 'directory').map(entry => entry.path))])].sort() : [];
+    return _jsxs("section", { "data-boring": "file-tree", "data-variant": variant, "data-dropping": dropping || undefined, "data-drop-target": dropTarget === '' ? 'true' : undefined, className: className, "aria-label": labels.region, onDragEnter: event => { rootDrop.onDragEnter?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
             event.preventDefault();
             dragDepth.current++;
             setDropping(true);
-        } }, onDragOver: event => { if (upload && event.dataTransfer.types.includes('Files')) {
+        } }, onDragOver: event => { rootDrop.onDragOver?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
             event.preventDefault();
             event.dataTransfer.dropEffect = 'copy';
-        } }, onDragLeave: event => { if (upload && event.dataTransfer.types.includes('Files')) {
+        } }, onDragLeave: event => { rootDrop.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')) {
+        } }, onDrop: event => { rootDrop.onDrop?.(event); if (upload && event.dataTransfer.types.includes('Files')) {
             event.preventDefault();
             dragDepth.current = 0;
             setDropping(false);
@@ -355,14 +534,19 @@ export function FileTreeView({ components, controller, onOpen, selectedPath, cla
                 } }), 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 }), blobUploads.size > 0 && _jsx("ul", { "aria-label": labels.uploads, className: "file-tree-blob-uploads", children: [...blobUploads].map(([key, item]) => {
                     const percent = item.progress && item.progress.total > 0 ? Math.min(100, Math.round(item.progress.loaded / item.progress.total * 100)) : null;
                     return _jsxs("li", { "data-blob-upload": item.name, "data-progress": percent ?? undefined, className: "flex items-center gap-2", children: [_jsx("span", { className: "min-w-0 flex-1 truncate", children: item.name }), Progress ? _jsx("span", { className: "w-24 shrink-0", children: _jsx(Progress, { value: percent, "aria-label": labels.uploadProgress(item.name) }) }) : _jsx("span", { role: "status", children: percent === null ? labels.uploading : `${percent}%` }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", "data-blob-upload-cancel": true, "aria-label": labels.cancelUpload(item.name), title: labels.cancelUpload(item.name), onClick: () => item.abort.abort(), children: _jsx(X, { "aria-hidden": "true" }) })] }, key);
-                }) }), _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)] });
+                }) }), _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)), state.mutations.map(item => _jsxs("li", { "data-operation": item.operationId, children: [item.path, ": ", mutationReason(item)] }, item.operationId))] }), Dialog && _jsx(Dialog, { open: asking !== undefined, onOpenChange: open => { if (!open)
+                    closeAsking(); }, title: asking?.kind === 'move' ? labels.moveTitle(baseName(dialogPath)) : labels.deleteTitle(baseName(dialogPath)), description: asking?.kind === 'move' ? labels.moveDescription : labels.deleteDescription, footer: asking?.kind === 'delete' ? _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "outline", "data-confirm": "cancel", onClick: closeAsking, children: labels.cancel }), _jsxs(Button, { type: "button", variant: "destructive", "data-confirm": "delete", onClick: () => {
+                                const path = dialogPath;
+                                setAsking(undefined);
+                                void controller.remove(path).then(report).catch(refused(path));
+                            }, children: [_jsx(Trash2, { "aria-hidden": "true" }), labels.delete] })] }) : _jsx(Button, { type: "button", variant: "outline", "data-confirm": "cancel", onClick: closeAsking, children: labels.cancel }), children: asking?.kind === 'move' && _jsx("ul", { className: "file-tree-destinations", "aria-label": labels.moveTitle(baseName(dialogPath)), children: folders.map(folder => _jsx("li", { children: _jsxs(Button, { type: "button", variant: "ghost", "data-destination": folder, disabled: folder === parentPath(dialogPath), onClick: () => moveTo(dialogPath, folder), children: [folder ? _jsx(Folder, { "aria-hidden": "true" }) : _jsx(FolderOpen, { "aria-hidden": "true" }), _jsx("span", { className: "file-tree-name", children: folder || labels.root })] }) }, folder)) }) }), history && historyPath !== undefined && _jsx(FileHistory, { components: components, locale: locale, controller: controller, path: historyPath, labels: labels, reload: historyKey, onClose: () => setHistoryPath(undefined) }, historyPath)] });
 }
 /** The message of a host refusal `{ error: { code, message } }` (or an Error's), if any. */
 function refusalOf(error) {
     const message = typeof error === 'object' && error !== null && 'error' in error && typeof error.error === 'object' && error.error !== null && 'message' in error.error ? error.error.message : error instanceof Error ? error.message : undefined;
     return typeof message === 'string' && message ? message : undefined;
 }
-function FileActions({ Actions, controller, entry, labels, onOpen, onHistory, onError }) {
+function FileActions({ Actions, controller, entry, labels, onOpen, onHistory, onError, onRename, onMove, onDelete }) {
     const lifetime = useRef(undefined);
     useEffect(() => () => lifetime.current?.abort(), []);
     const blob = entry.blob && 'url' in entry.blob ? entry.blob : undefined;
@@ -410,6 +594,12 @@ function FileActions({ Actions, controller, entry, labels, onOpen, onHistory, on
     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(); } });
+    if (onRename)
+        items.push({ id: 'rename', label: labels.rename, icon: _jsx(Pencil, { "aria-hidden": "true" }), onSelect: onRename, ownsFocus: true });
+    if (onMove)
+        items.push({ id: 'move', label: labels.move, icon: _jsx(FolderInput, { "aria-hidden": "true" }), onSelect: onMove, ownsFocus: true });
+    if (onDelete)
+        items.push({ id: 'delete', label: labels.delete, icon: _jsx(Trash2, { "aria-hidden": "true" }), onSelect: onDelete, destructive: true, ownsFocus: true });
     return _jsx(Actions, { label: labels.actionsOf(entry.path), icon: _jsx(MoreHorizontal, { "aria-hidden": "true" }), items: items });
 }
 function FileHistory({ components: { Button, Versions, Separator }, locale, controller, path, labels, reload, onClose }) {

package/dist/file-tree.d.ts

@@ -23,6 +23,20 @@ export interface FileUpload {
         readonly result: PublicationResult;
     };
 }
+/** A rename (a move is a rename to another folder) or a delete of one file, as its row shows it. */
+export interface FileMutation {
+    readonly operationId: string;
+    readonly kind: 'rename' | 'delete';
+    readonly path: string;
+    /** The new path of a rename. */
+    readonly to?: string;
+    readonly state: {
+        readonly kind: 'pending';
+    } | {
+        readonly kind: 'settled';
+        readonly result: PublicationResult;
+    };
+}
 export interface FileTreeState {
     readonly lifecycle: 'active' | 'disposed';
     readonly directories: ReadonlyMap<string, FileListing>;
@@ -30,6 +44,8 @@ export interface FileTreeState {
     readonly query: string;
     readonly search: FileListing;
     readonly uploads: readonly FileUpload[];
+    /** The latest rename or delete of each path, until it is dismissed or the path changes again. */
+    readonly mutations: readonly FileMutation[];
 }
 export interface FileTreeController {
     readonly revisionProvider: RevisionProvider;
@@ -51,6 +67,21 @@ export interface FileTreeController {
     /** 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[]>;
+    /** What the client can do: a client without `rename` or `delete` offers neither (the host's capabilities may narrow it further). */
+    readonly actions: {
+        readonly rename: boolean;
+        readonly delete: boolean;
+    };
+    /** Learn the revision of a file as its row shows it (on opening its menu, renaming, dragging): a later rename or delete is conditional on it. */
+    readonly prepare: (path: string, signal?: AbortSignal) => Promise<string | undefined>;
+    /** Rename a file through the client's conditional rename. `to` is a full path; its folder must exist. */
+    readonly rename: (path: string, to: string) => Promise<FileMutation>;
+    /** Move a file into `folder` (`''` is the workspace root): a rename that keeps its name. */
+    readonly move: (path: string, folder: string) => Promise<FileMutation>;
+    /** Delete a file through the client's conditional delete. */
+    readonly remove: (path: string) => Promise<FileMutation>;
+    /** Forget a settled rename or delete (its row's message). */
+    readonly dismiss: (operationId: string) => void;
     readonly dispose: () => void;
 }
 /** Browsing state belongs to one borrowed binding. Disposal fences late results; it never closes the workspace. */