@hachej/boring-ui-kit 0.3.2 → 0.4.0

package/README.md

@@ -36,11 +36,17 @@ import { MarkdownEditor } from '@hachej/boring-ui-kit/markdown-editor';
 
 Install the pinned React, React DOM, Marked and Tiptap peers listed in this package's manifest when selecting this entry. They remain optional for headless consumers. The renderer borrows its controller; unmounting does not dispose it or close its resource client. The host owns selection, identity and teardown.
 
-Rich formatting and Markdown source controls share controller state. Mounting, switching modes and projecting remote text never serialize the original buffer. Genuine rich edits use Tiptap's Markdown serialization and may normalize supported formatting. Save and Ctrl/Cmd+S capture the exact controller selection. Proposal review shows added/removed lines with two lines of context and expandable unchanged runs. It preserves exact line endings and marks a missing final newline. An inner details panel retains exact before/after text. Accept and save delegates to the controller; reviewing or expanding context never publishes. Conflict and unknown outcomes expose explicit discard or reconciliation controls.
+Formatting defaults to the pinned desktop toolbar. The Aa header control toggles it; `formattingToolbar="selection"` selects the native Tiptap selection bubble instead. Phones always use the selection bubble. Keyboard shortcuts and Markdown input rules remain available. Rich formatting and Markdown source controls share controller state. Mounting, switching modes and projecting remote text never serialize the original buffer. Genuine rich edits use Tiptap's Markdown serialization and may normalize supported formatting.
+
+Autosave is enabled by default after 1200ms of idle editing and flushes on blur and page hide through the existing conditional `controller.flush`. Untouched new buffers are not automatically published. `autosave={false}` restores explicit Save; `autosave={{ delayMs: 500 }}` changes the idle delay. Ctrl/Cmd+S always saves the exact selected buffer explicitly. Refused, conflicting and unconfirmed saves retain the draft and pause automatic retries until resolved.
+
+Use `onAutosaveChange` to register the mounted flush barrier. Await that flush before closing, unmounting or disposing the controller. If it returns false, keep the editor mounted with its refusal/conflict UI unless a real host navigation guard obtains deliberate discard consent. Internal flush registration is not a discard guard. Unmount cleanup and browser page hide are best effort, not substitutes for awaiting the owner teardown barrier. See the [registry recipes](../../registry/README.md) for `MarkdownPane`, viewer-window policy and navigation integration.
+
+Proposal review shows added/removed lines with two lines of context and expandable unchanged runs. It preserves exact line endings and marks a missing final newline. An inner details panel retains exact before/after text. Accept and save delegates to the controller; reviewing or expanding context never publishes. Conflict and unknown outcomes expose explicit discard or reconciliation controls.
 
 Detailed alignment uses a matrix of at most 250,000 cells after trimming equal prefix/suffix lines. Larger comparisons show all removed/added middle lines with an explicit notice. This bounds the comparison matrix, not total document size, string-comparison cost or rendered rows.
 
-The rich view includes a Document outline built from the native parsed headings. Navigation changes the native selection without editing or saving Markdown. Rich/source switches retain each mode's selection and direction while the buffer version is unchanged. Text projected from outside (load, refresh, discard, source edits) puts the rich selection at the document start, where the browser leaves its caret, so a click or formatting command never acts on a stale selection at the end. External replacement or source edits invalidate older bookmarks; changing controllers starts a new local session. Human heading controls use the mounted presentation command described below.
+The rich view includes a Document outline built from the native parsed headings when `showOutline` is true. By default, the outline follows the built-in `header` visibility. Navigation changes the native selection without editing or saving Markdown. Rich/source switches retain each mode's selection and direction while the buffer version is unchanged. Text projected from outside (load, refresh, discard, source edits) puts the rich selection at the document start, where the browser leaves its caret, so a click or formatting command never acts on a stale selection at the end. External replacement or source edits invalidate older bookmarks; changing controllers starts a new local session. Human heading controls use the mounted presentation command described below.
 
 ### Mounted Markdown commands
 
@@ -78,13 +84,13 @@ A submit the host refused before admission (status 402 `submission-refused`, for
 
 ### Native conversation history
 
-`loadEarlier()` reads one native page through `Conversation.entries`. `snapshot.history` distinguishes disabled, idle, loading, ready and error states. Each page contains at most 40 native entries in display order. The controller retains one page and an opaque native continuation cursor. The first request captures the greatest observed active entry ID as an inclusive upper bound; later writes do not move that bound. Parent-owned fork entries remain valid native history.
+`loadEarlier()` reads one native page through `Conversation.entries`. `snapshot.history` distinguishes disabled, idle, loading, ready and error states. Each request contains at most 40 native entries. The controller accumulates pages in display order for the person's current browsing session and retains an opaque native continuation cursor. It clears that cache on history invalidation or `clearHistory()`; loading never restores records to model context. The first request captures the greatest observed active entry ID as an inclusive upper bound; later writes do not move that bound. Parent-owned fork entries remain valid native history.
 
 A failed read retains the previous page and continuation for retry. `clearHistory()`, head or non-append active-range changes, reconnect, watch closure and disposal invalidate pending responses. Clearing a page does not cancel native work or promise remote read termination. The controller preserves the exact host Context. Page-count limits do not bound message bytes or native storage allocation.
 
 Without a custom `source`, history defaults to the borrowed conversation. Set `history: false` to disable it. With a custom source, history is disabled unless the host supplies an explicit `{ id, entries }` native capability for that conversation. The ID must match before and after a read. Hosts remain responsible for current authorization and must dispose or disconnect presentation when its scope is revoked. Expert mode is not redaction.
 
-`test/packages/ui-native-chat-history.test.mjs` uses real native reset/head/fork records. `node examples/chat-history.mjs` demonstrates three native pages across a reset without model calls.
+`test/packages/ui-native-chat-history.test.mjs` uses real native reset/head/fork records. `node fixtures/chat-history.mjs` demonstrates three native pages across a reset without model calls.
 
 ## Headless canvas document edits
 
@@ -152,6 +158,8 @@ Mounted `tools.propose` accepts the same complete edits as the headless command
 
 ## Optional HTML source and preview
 
+Both `MarkdownEditor` and `HtmlViewer` accept optional `components` bindings for host buttons, inputs, textareas and the selection bubble. Installed registry recipes supply the consumer's unchanged shadcn components. Bindings forward refs and native input events. Omitting them retains unstyled native HTML for direct package consumers; it is not installed-block design qualification. See the [registry theming contract](../../registry/README.md#styling).
+
 Import `createHtmlController` and the concrete `HtmlController` from `@hachej/boring-ui-kit/html`. Import `HtmlViewer` from `@hachej/boring-ui-kit/html-viewer` only when selecting the React renderer. These entries need no agent, native environment, Tiptap or canvas runtime. The headless controller accepts the same resource identity/client and new or saved source shape as the Markdown controller. Saved resources must be `text/html` with valid UTF-8.
 
 `actions.edit`, `actions.selection` and `flush(selection)` preserve exact source bytes through the existing conditional publication contract. Refresh preserves dirty text, discard is explicit, and reconciliation handles lost acknowledgements without another write. Late saves retain later edits. The concrete controller has no mounted HTML tools; the native document tools remain Markdown-specific. Unmount borrows the controller and never saves or disposes it.
@@ -160,13 +168,13 @@ The renderer offers HTML source and preview modes with Save, Refresh, Reconcile
 
 Preview refuses source beyond 262,144 UTF-16 units, traversal beyond 20,000 visited nodes or depth 128, and output beyond 1,048,576 units. Traversal/output limits do not bound peak allocation inside the browser parser. A parser or Trusted Types refusal leaves source viewing and saving available. No permissive Trusted Types policy or raw preview fallback is created. Server rendering does not parse or embed generated markup.
 
-Run `node examples/html-document.mjs` after building for a fictional authenticated resource save. `npm run test:html-consumer` installs isolated tarballs, checks strict concrete declarations, repeats controller/DOM tests and bundles both entries without native/server or heavy viewer implementations. `npm run test:html-registry-consumer` uses the actual shadcn CLI and drives the copied source recipe before and after restyling. These DOM checks do not qualify native parser inertness, iframe/CSP/Trusted Types security, browser input or network isolation. The attempted Chromium journey currently fails at startup under sandbox EPERM. Browser qualification remains open.
+Run `node fixtures/html-document.mjs` after building for a fictional authenticated resource save. `npm run test:html-consumer` installs isolated tarballs, checks strict concrete declarations, repeats controller/DOM tests and bundles both entries without native/server or heavy viewer implementations. `npm run test:html-registry-consumer` uses the actual shadcn CLI and drives the copied source recipe before and after restyling. These DOM checks do not qualify native parser inertness, iframe/CSP/Trusted Types security, browser input or network isolation. The attempted Chromium journey currently fails at startup under sandbox EPERM. Browser qualification remains open.
 
 ## Optional fixed and derived experiences
 
 Import `validateExperience` from `@hachej/boring-ui-kit/experience/compose` and `Experience` from `@hachej/boring-ui-kit/experience`. Install exact optional peers `@json-render/core@0.21.0`, `@json-render/react@0.21.0`, `zod@4.6.5` and React 19.3.0. The validation entry loads no React runtime, files, Pi or agent. The renderer uses the native json-render catalog, registry, providers and renderer.
 
-Descriptors use format `boring.experience`, version 1 and source `fixed`, `derived` or `generated`. Generated output comes through the optional composer below. The current installed layout kinds are `boring/stack`, `boring/row`, `boring/grid`, `boring/cell` and `boring/generated`, all version 1. Stack/row accept gap `small`, `medium` or `large`, defaulting to medium. Grid adds integer columns from 1 through 4. Cell props contain only a `ref` in `app/cell` form. Every used cell kind/version must appear in the descriptor's `kinds` map. See `examples/fixed-experience.mjs` for a complete descriptor.
+Descriptors use format `boring.experience`, version 1 and source `fixed`, `derived` or `generated`. Generated output comes through the optional composer below. The current installed layout kinds are `boring/stack`, `boring/row`, `boring/grid`, `boring/cell` and `boring/generated`, all version 1. Stack/row accept gap `small`, `medium` or `large`, defaulting to medium. Grid adds integer columns from 1 through 4. Cell props contain only a `ref` in `app/cell` form. Every used cell kind/version must appear in the descriptor's `kinds` map. See `fixtures/fixed-experience.mjs` for a complete descriptor.
 
 The host supplies `cells` with `ref`, `kind`, `version`, optional `maxUses` and a stable `render` React component. That component closes over its concrete controller and owning application's operations. Descriptor props and action parameters never reach it. Default maxUses is 1. Registration accepts only one version per kind and one cell per ref. `canView(ref)` is a synchronous host policy callback and must return literal true. The host rerenders Experience when its authorization or cell registrations change. The library checks access again in the cell renderer; unavailable cells show a placeholder. Each host action must still authorize when invoked.
 
@@ -191,7 +199,7 @@ The renderer exposes Use proposed layout, Dismiss proposed layout, Keep this lay
 
 Cell visibility validation is a current host preflight. A provider that promises atomic authorization of layout publication and its referenced resources must enforce both at its commit boundary. The renderer does not create that cross-resource guarantee. Live model quality, actual browser focus preservation and full A28-A29 remain unqualified. The bounded region/Pin implementation is described below.
 
-Run `node examples/experience-keep.mjs` after building for a fictional offer, adoption, conditional creation and receipt lookup. `npm run test:experience-consumer` additionally checks the concrete Keep declarations, real SQLite/controller and React controls, and the resource-enabled browser bundle from isolated installed archives. These are DOM and artifact checks, not a browser journey.
+Run `node fixtures/experience-keep.mjs` after building for a fictional offer, adoption, conditional creation and receipt lookup. `npm run test:experience-consumer` additionally checks the concrete Keep declarations, real SQLite/controller and React controls, and the resource-enabled browser bundle from isolated installed archives. These are DOM and artifact checks, not a browser journey.
 
 
 ## Optional metadata-only composition
@@ -208,7 +216,7 @@ Iteration captures definitions, candidates, cells and fallback before yielding t
 
 The required `signal` belongs to the host. Abort it when the host closes composition. Upstream cancellation releases a pending composition even when an evaluator does not cooperate; it does not prove provider termination. Calling the iterator's `return()` alone cannot interrupt its pending `next()`. On a final result, pass the descriptor to the existing document controller's `propose` with the selection captured before composition. A stale base refuses. Explicit adoption and Keep remain separate human actions.
 
-Run `node examples/generated-experience.mjs` after building for deterministic native composition followed by a real conditional SQLite Keep. The isolated experience consumer checks native evaluator declarations, metadata/cancellation behavior, rendered proposal controls and browser bundles from installed archives. Tests also exercise upstream `experimental_createEvaluator` with fictional fetch responses and host budget denial before each request. Those tests establish transport composition without a live Gateway/local model call, model-quality claim, actual browser journey or complete A27/A31 qualification. Full reference application recipes remain required. Region composition and Pin use the bounded API below.
+Run `node fixtures/generated-experience.mjs` after building for deterministic native composition followed by a real conditional SQLite Keep. The isolated experience consumer checks native evaluator declarations, metadata/cancellation behavior, rendered proposal controls and browser bundles from installed archives. Tests also exercise upstream `experimental_createEvaluator` with fictional fetch responses and host budget denial before each request. Those tests establish transport composition without a live Gateway/local model call, model-quality claim, actual browser journey or complete A27/A31 qualification. Full reference application recipes remain required. Region composition and Pin use the bounded API below.
 
 
 ## Generated regions and conditional Pin
@@ -225,7 +233,7 @@ Call `controller.actions.beginRegion(selection, region, trigger)` before host co
 
 `ExperienceDocument` accepts `onRegenerate(request)` for its **Regenerate** controls. The host owns the evaluator and its abort signal. **Use proposed region**, **Dismiss proposed region** and **Pin this region** separate acceptance and publication. Fixed sibling renderer identities remain stable across region edits. Cell and grid minima inherit the strongest enclosing region minimum; narrow regions can scroll. Borrowed resource controllers survive unmount.
 
-Run `node examples/generated-region.mjs` after building for a fictional native composition, offer, adoption and SQLite Pin receipt. Public tests and `npm run test:experience-consumer` exercise strict tarball declarations, real native composition, exact source, request races, DOM identity/selection and unknown-save reconciliation. DOM results do not qualify browser focus, geometry, live model quality or atomic cross-resource authorization.
+Run `node fixtures/generated-region.mjs` after building for a fictional native composition, offer, adoption and SQLite Pin receipt. Public tests and `npm run test:experience-consumer` exercise strict tarball declarations, real native composition, exact source, request races, DOM identity/selection and unknown-save reconciliation. DOM results do not qualify browser focus, geometry, live model quality or atomic cross-resource authorization.
 
 ## Consumer-defined text viewers
 
@@ -276,8 +284,8 @@ Bind the authenticated [revision provider](../files/README.md#frontend-revision-
 to the tree:
 
 ```tsx
-import '@hachej/boring-ui-kit/file-tree.css';
-import { FileTree } from '@hachej/boring-ui-kit/file-tree-view';
+// Installed file-tree recipe, with the consumer's real shadcn Base UI controls.
+import { FileTree } from '@/components/file-tree/file-tree';
 
 <FileTree
   revisionProvider={revisionProvider}
@@ -290,20 +298,40 @@ The renderer adapts the official shadcn `sidebar-11` tree. Its shipped CSS works
 without a SidebarProvider or scanning package sources with Tailwind. Attribution
 and the pinned upstream revision are in [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).
 
+The recipe supplies the consumer's actual shadcn Button and dropdown-menu, plus
+shared version-history rows. Direct callers of `@hachej/boring-ui-kit/file-tree-view`
+pass a required `components` binding with `Button`, `Actions` and `Versions`;
+`FileTreeComponents`, `FileTreeButtonProps`, `FileTreeActionsProps` and
+`FileTreeVersionsProps` describe it. There is no package-owned control fallback.
+The installed wrappers supply this binding automatically. Library history and viewer
+menus share relative time, provenance and Current presentation. Selecting a retained
+version still reads an exact, read-only preview without retargeting an editor.
+
+The default `list` variant has a Library header, visible-item count, inset search,
+48px rows with kind and size, and a file actions menu. The count describes loaded,
+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
+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.
+
 The tree supports folder expansion, keyboard navigation, filename search,
-pagination, uploads and read-only revision previews. Uploads go to `uploads/`
+pagination, picker or drop uploads and read-only revision previews. Uploads go to `uploads/`
 by default (`uploadDirectory` overrides it). Duplicate names refuse publication.
-Unknown upload results show **Check upload status** and retain the operation ID;
-checking never republishes the bytes. Keep the local file until the result is
-known. Upload state is in memory and is not a durable cross-reload upload queue.
+Uploads show progress inline on their row. Successful uploads leave no visible
+status log; a visually hidden polite live region announces results. Failures keep
+an inline error and **Retry**. A refused upload retries its captured bytes with the
+same revision condition; an unconfirmed upload only checks its original operation
+and never republishes. Keep the local file until the result is known. Upload state is in memory and is not a durable cross-reload upload queue.
 
 Both components take `locale` (`en` by default, or `fr`; the words are exported as
 `defaultFileTreeLabels` and `frenchFileTreeLabels`) and `labels` to override any word,
 including the accessible names, or to add another language, `upload={false}` and
-`history={false}` to hide those buttons where a host has no uploads or retained
-history, and `refreshKey`: when its value changes the open folders and the current
+`history={false}` to hide upload controls or the version-history menu item, and `refreshKey`: when its value changes the open folders and the current
 search reload, for example after an agent saves a file. A search result shows its
-name with its folder beside it. `AgentWorkspace` passes the same options to its
+name with its folder in the metadata line in `list`, or on the same line in `plain`. `AgentWorkspace` passes the same options to its
 Library through `fileTree`, with its own `locale`.
 
 For custom layouts, import `createFileTreeController` from

package/THIRD_PARTY_NOTICES.md

@@ -50,6 +50,41 @@ SOFTWARE.
 
 ```
 
+## Workspace demo: Tremor Planner
+
+The workspace demo adapts the sidebar, breadcrumbs, flat metric summaries,
+filter bars, tables, status badges and budget progress layouts from
+[tremorlabs/template-planner](https://github.com/tremorlabs/template-planner/tree/7b5d1f10e2705c9a2dca108c41910793185cdbb8),
+pinned at `7b5d1f10e2705c9a2dca108c41910793185cdbb8`. The source's `LICENSE.md`
+contains the MIT licence below. Its README still links a commercial Tremor licence.
+This adaptation uses the explicit repository licence and copies no logos, fonts,
+customer data, images or runtime dependencies. The demo uses the existing
+Base UI shadcn components and fictional initials.
+
+```text
+The MIT License (MIT)
+
+Copyright (c) 2025 Tremor Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+```
+
 ## shadcn/ui file tree
 
 The file tree adapts `sidebar-11` and its menu primitives from shadcn/ui at

package/dist/canvas-editor-native.d.ts

@@ -3,6 +3,7 @@ import type { TLOnMountHandler } from '@tldraw/editor';
 import type { TLDefaultFonts, TLUiAssetUrls } from 'tldraw';
 import type { CanvasController } from './canvas.js';
 import type { CanvasMountedTools } from './canvas-mounted.js';
+import type { ViewerComponents } from './viewer-components.js';
 export type CanvasFontUrls = Readonly<Record<`${keyof TLDefaultFonts}${'' | '_italic' | '_bold' | '_italic_bold'}`, string>>;
 export type CanvasAssetUrls = Omit<TLUiAssetUrls, 'fonts' | 'embedIcons'> & {
     readonly fonts: CanvasFontUrls;
@@ -17,6 +18,8 @@ export interface CanvasEditorProps {
     readonly licenseKey?: string;
     readonly onMount?: TLOnMountHandler;
     readonly onMountedTools?: (tools: CanvasMountedTools | null) => void;
+    /** Host presentation for the canvas controls; without it the package renders unstyled native buttons. */
+    readonly components?: ViewerComponents;
 }
-export default function NativeCanvas({ controller, assetUrls, title, className, height, licenseKey, onMount, onMountedTools }: CanvasEditorProps): import("react").JSX.Element;
+export default function NativeCanvas({ controller, assetUrls, title, className, height, licenseKey, onMount, onMountedTools, components }: CanvasEditorProps): import("react").JSX.Element;
 //# sourceMappingURL=canvas-editor-native.d.ts.map

package/dist/canvas-editor-native.js

@@ -23,7 +23,8 @@ function assetSignature(assets) {
             throw new TypeError(`Canvas asset URL is required: ${key}`);
     return JSON.stringify(requirements);
 }
-export default function NativeCanvas({ controller, assetUrls, title = 'Canvas', className, height = 480, licenseKey, onMount, onMountedTools }) {
+export default function NativeCanvas({ controller, assetUrls, title = 'Canvas', className, height = 480, licenseKey, onMount, onMountedTools, components }) {
+    const Control = components?.button ?? 'button';
     const state = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
     const [error, setError] = useState(null);
     const [busy, setBusy] = useState(false);
@@ -75,16 +76,17 @@ export default function NativeCanvas({ controller, assetUrls, title = 'Canvas',
                 if (!unavailable && !pending && !uncertain && !busy && !state.problem)
                     void save();
             }
-        }, children: [_jsxs("header", { children: [_jsx("strong", { children: title }), state.readOnly && _jsx("span", { children: "Read only" }), _jsx("span", { role: "status", children: state.lifecycle === 'disposed' ? 'Closed' : pending ? 'Saving' : uncertain ? 'Save unconfirmed' : conflict ? 'Changed elsewhere' : state.dirty ? 'Unsaved changes' : 'Saved' }), _jsx("button", { type: "button", disabled: unavailable || !state.dirty || pending || uncertain || busy || state.problem !== null, onClick: () => void save(), children: "Save" }), _jsx("button", { type: "button", disabled: state.lifecycle === 'disposed' || pending || uncertain || busy, onClick: () => void run(controller.actions.refresh), children: "Check saved version" })] }), uncertain && _jsxs("div", { role: "alert", children: ["Save acknowledgement was lost. Your current canvas is retained.", _jsx("button", { type: "button", disabled: busy, onClick: () => void run(controller.actions.reconcile), children: "Check save outcome" }), _jsx("button", { type: "button", disabled: busy || state.lifecycle === 'disposed', onClick: () => void run(controller.actions.abandon), children: "Keep draft and refresh" })] }), conflict && _jsxs("div", { role: "alert", children: ["The saved canvas changed. Your local edits have been kept.", _jsx("button", { type: "button", disabled: pending || uncertain || busy, onClick: () => void run(controller.actions.discardToRemote), children: "Discard local changes and reload" })] }), state.problem && _jsx("p", { role: "alert", children: state.problem }), (outcome?.kind === 'denied' || outcome?.kind === 'unavailable' || outcome?.kind === 'file_too_large') && _jsx("p", { role: "alert", children: outcome.reason }), error && _jsx("p", { role: "alert", children: error }), _jsx(CanvasProposals, { controller: controller, state: state, editor: nativeEditor, busy: busy, run: run }), state.lifecycle === 'active' && _jsx("div", { "data-boring": "canvas-stage", style: { position: 'relative', height }, onClickCapture: event => { if (event.target instanceof Element && event.target.closest('a'))
+        }, children: [_jsxs("header", { children: [_jsx("strong", { children: title }), state.readOnly && _jsx("span", { children: "Read only" }), _jsx("span", { role: "status", children: state.lifecycle === 'disposed' ? 'Closed' : pending ? 'Saving' : uncertain ? 'Save unconfirmed' : conflict ? 'Changed elsewhere' : state.dirty ? 'Unsaved changes' : 'Saved' }), _jsx(Control, { type: "button", disabled: unavailable || !state.dirty || pending || uncertain || busy || state.problem !== null, onClick: () => void save(), children: "Save" }), _jsx(Control, { type: "button", disabled: state.lifecycle === 'disposed' || pending || uncertain || busy, onClick: () => void run(controller.actions.refresh), children: "Check saved version" })] }), uncertain && _jsxs("div", { role: "alert", children: ["Save acknowledgement was lost. Your current canvas is retained.", _jsx(Control, { type: "button", disabled: busy, onClick: () => void run(controller.actions.reconcile), children: "Check save outcome" }), _jsx(Control, { type: "button", disabled: busy || state.lifecycle === 'disposed', onClick: () => void run(controller.actions.abandon), children: "Keep draft and refresh" })] }), conflict && _jsxs("div", { role: "alert", children: ["The saved canvas changed. Your local edits have been kept.", _jsx(Control, { type: "button", disabled: pending || uncertain || busy, onClick: () => void run(controller.actions.discardToRemote), children: "Discard local changes and reload" })] }), state.problem && _jsx("p", { role: "alert", children: state.problem }), (outcome?.kind === 'denied' || outcome?.kind === 'unavailable' || outcome?.kind === 'file_too_large') && _jsx("p", { role: "alert", children: outcome.reason }), error && _jsx("p", { role: "alert", children: error }), _jsx(CanvasProposals, { components: components, controller: controller, state: state, editor: nativeEditor, busy: busy, run: run }), state.lifecycle === 'active' && _jsx("div", { "data-boring": "canvas-stage", style: { position: 'relative', height }, onClickCapture: event => { if (event.target instanceof Element && event.target.closest('a'))
                     event.preventDefault(); }, onAuxClickCapture: event => { if (event.target instanceof Element && event.target.closest('a'))
-                    event.preventDefault(); }, children: _jsxs(Tldraw, { store: controller.store, hideUi: true, locale: "en", autoFocus: false, assetUrls: assets, ...(licenseKey === undefined ? {} : { licenseKey }), onMount: attach, children: [_jsx(CanvasTools, { controller: controller }), _jsx(MountedCommands, { controller: controller, revokeTools: revokeTools, ...(onMountedTools ? { onMountedTools } : {}) })] }) })] });
+                    event.preventDefault(); }, children: _jsxs(Tldraw, { store: controller.store, hideUi: true, locale: "en", autoFocus: false, assetUrls: assets, ...(licenseKey === undefined ? {} : { licenseKey }), onMount: attach, children: [_jsx(CanvasTools, { components: components, controller: controller }), _jsx(MountedCommands, { controller: controller, revokeTools: revokeTools, ...(onMountedTools ? { onMountedTools } : {}) })] }) })] });
 }
 const externalContentTypes = ['text', 'files', 'file-replace', 'embed', 'svg-text', 'url', 'tldraw', 'excalidraw'];
 const choices = [
     ['select', 'Select'], ['hand', 'Hand'], ['draw', 'Draw'], ['geo', 'Rectangle'], ['text', 'Text'],
     ['arrow', 'Arrow'], ['line', 'Line'], ['note', 'Note'], ['frame', 'Frame'], ['highlight', 'Highlight'], ['eraser', 'Erase'],
 ];
-function CanvasTools({ controller }) {
+function CanvasTools({ controller, components }) {
+    const Control = components?.button ?? 'button';
     const editor = useEditor();
     const state = useValue('canvas controls', () => ({ tool: editor.getCurrentToolId(), readOnly: controller.getSnapshot().readOnly || editor.getIsReadonly(), undo: editor.getCanUndo(), redo: editor.getCanRedo() }), [editor]);
     const act = (action, changesDocument = true) => {
@@ -92,8 +94,8 @@ function CanvasTools({ controller }) {
             && (!changesDocument || (!controller.getSnapshot().readOnly && !editor.getIsReadonly())))
             action();
     };
-    return _jsxs("div", { role: "toolbar", "aria-label": "Canvas tools", style: { position: 'absolute', top: 8, left: 8, zIndex: 300, display: 'flex', flexWrap: 'wrap', gap: 4 }, children: [choices.map(([id, label]) => _jsx("button", { type: "button", "aria-pressed": state.tool === id, disabled: state.readOnly && id !== 'hand' && id !== 'select', onClick: () => act(() => { if (id === 'geo')
-                    editor.setStyleForNextShapes(GeoShapeGeoStyle, 'rectangle'); editor.setCurrentTool(id); }, id !== 'hand' && id !== 'select'), children: label }, id)), _jsx("button", { type: "button", disabled: state.readOnly || !state.undo, onClick: () => act(() => { editor.undo(); }), children: "Undo" }), _jsx("button", { type: "button", disabled: state.readOnly || !state.redo, onClick: () => act(() => { editor.redo(); }), children: "Redo" }), _jsx("button", { type: "button", onClick: () => act(() => { editor.zoomToFit(); }, false), children: "Fit canvas" })] });
+    return _jsxs("div", { role: "toolbar", "aria-label": "Canvas tools", style: { position: 'absolute', top: 8, left: 8, zIndex: 300, display: 'flex', flexWrap: 'wrap', gap: 4 }, children: [choices.map(([id, label]) => _jsx(Control, { type: "button", "aria-pressed": state.tool === id, disabled: state.readOnly && id !== 'hand' && id !== 'select', onClick: () => act(() => { if (id === 'geo')
+                    editor.setStyleForNextShapes(GeoShapeGeoStyle, 'rectangle'); editor.setCurrentTool(id); }, id !== 'hand' && id !== 'select'), children: label }, id)), _jsx(Control, { type: "button", disabled: state.readOnly || !state.undo, onClick: () => act(() => { editor.undo(); }), children: "Undo" }), _jsx(Control, { type: "button", disabled: state.readOnly || !state.redo, onClick: () => act(() => { editor.redo(); }), children: "Redo" }), _jsx(Control, { type: "button", onClick: () => act(() => { editor.zoomToFit(); }, false), children: "Fit canvas" })] });
 }
 function MountedCommands({ controller, onMountedTools, revokeTools }) {
     const editor = useEditor();

package/dist/canvas-editor.js

@@ -9,5 +9,5 @@ export function CanvasEditor(props) {
     const [mount, setMount] = useState({ controller: props.controller, sequence: 0 });
     if (mount.controller !== props.controller)
         setMount({ controller: props.controller, sequence: mount.sequence + 1 });
-    return _jsxs(_Fragment, { children: [_jsx(TextDraftControls, { recovery: state.recovery, actions: props.controller.actions, readOnly: state.readOnly, blocked: state.lifecycle !== 'active' || state.save.kind === 'pending' || (state.save.kind === 'settled' && state.save.result.kind === 'unknown') }, mount.sequence), _jsx(Suspense, { fallback: _jsx("p", { role: "status", children: "Loading canvas" }), children: _jsx(NativeCanvas, { ...props }, mount.sequence) })] });
+    return _jsxs(_Fragment, { children: [_jsx(TextDraftControls, { components: props.components, recovery: state.recovery, actions: props.controller.actions, readOnly: state.readOnly, blocked: state.lifecycle !== 'active' || state.save.kind === 'pending' || (state.save.kind === 'settled' && state.save.result.kind === 'unknown') }, mount.sequence), _jsx(Suspense, { fallback: _jsx("p", { role: "status", children: "Loading canvas" }), children: _jsx(NativeCanvas, { ...props }, mount.sequence) })] });
 }

package/dist/canvas-proposals.d.ts

@@ -1,7 +1,9 @@
 import type { Editor } from '@tldraw/editor';
 import type { CanvasController, CanvasState } from './canvas.js';
 import type { SaveResult } from './resources.js';
-export declare function CanvasProposals({ controller, state, editor, busy, run }: {
+import type { ViewerComponents } from './viewer-components.js';
+export declare function CanvasProposals({ components, controller, state, editor, busy, run }: {
+    readonly components?: ViewerComponents | undefined;
     readonly controller: CanvasController;
     readonly state: CanvasState;
     readonly editor: Editor | null;

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