Components · Tree
The FileBrowser primitive — a framed TreeView on the left, a <Surface> detail pane on the right. decorate() injects a folder or file icon wherever a node supplies none; folders carry a rotating chevron, files a typed glyph, and the selection mirrors into the tree as the accent rail. Pick a folder → its <Breadcrumbs> trail plus a clickable list of its immediate children (drill down without touching the tree); pick a file → the trail, a Type / Size / Modified list, and a description.
Workspace files
Triage forms, medical baselines, and intake photos for dogs entering the Downtown Rescue pipeline.
last picked: intake · selectedId intake
[18rem minmax(0,1fr)]: a framed TreeView (recessed <Surface inset> well) and a <Surface tone="surface" padding="lg"> detail pane that switches on the selection. Stacks to one column under 720px.decorate() maps isFolder(node) → a Folder or FileText glyph wherever a node supplies none (never overrides a caller icon). Folders keep a rotating chevron; files get the leaf spacer.--selected (accent-soft fill + inset accent rail + aria-selected) — intake here — and drives the detail pane; every pick echoes through onSelect.<Breadcrumbs> trail + a Type / Items / Modified list + description, then a clickable contents row-list of immediate children (folders show an item count, files a type icon + size) — drill down without touching the tree.rowClass) lifts to hover:bg-surface-2 (photos pinned) and shows the accent focus-visible ring (intake-form.md pinned). The detailActions slot holds the header's top-right Share button.Source · ds/tree/FileBrowser.tsx — decorate() folder/file icons · DetailPane (Breadcrumbs trail · Type/Size/Modified <dl> · rowClass contents list) · framed TreeView.tsx · <Breadcrumbs> from @phauna/ds. Tree chrome from catalog/grid-tree.css (.tree__node--selected, .tree__guide, .tree__toggle).