File explorer

In review

Live · web

The shell: eyebrow + actions over the real Tree; empty forests get the Well

nockerl-design

src

composites

ChatInput.tsx

Tabs.tsx

FileExplorer.tsx

index.ts

tokens

color.dark.json

size.json

component-catalog.md

FilesEmpty

Opened 0 files · selected chat-input · arrow-key the rows (the Tree's full WAI-ARIA semantics), collapse/expand from the header slot. The island is live.

The web console’s file explorer is, per the de-phantom verdict, a deliberately THIN SHELL that invents nothing: the forest is the shipped Tree (file-type tints, full WAI-ARIA keyboard semantics, controlled expand/select), the header is an eyebrow title plus an open actions slot (drop IconButtons or a Menu trigger in; the shell owns no controls), and an empty forest renders the packaged recessed Well with your message + optional action.

Scope notes

Web-first chrome over a cross-platform core: Compose + Swift already ship NockerlTree; only this shell is console-specific. Per-node context menus stay with the host for now: wiring Menu per row needs a Tree anchor extension (tracked on the epic), not shell scope.

Code

TypeScript

import { NockerlFileExplorer } from '@dizyx/nockerl-react';

<NockerlFileExplorer
  title="nockerl-design"
  nodes={forest}                       // NockerlTreeNode[], the shipped Tree's shape
  expandedIds={expanded}
  onToggleExpand={setExpanded}
  selectedId={activePath}
  onSelect={openFile}
  actions={<NockerlIconButton icon={collapseIcon} label="Collapse all" variant="plain" size={24} onClick={collapseAll} />}
  emptyTitle="No files open"
  emptyAction={<NockerlButton text="Load the repo" size="sm" variant="secondary" onClick={load} />}
/>

Parameters

Prop	Type	Default	Description
title	string	'Files'	Eyebrow title in the header strip.
actions	ReactNode	n/a	Open header slot (IconButtons, a Menu trigger); the shell owns no controls.
nodes *	NockerlTreeNode[]	n/a	The forest (pass-through to NockerlTree). Empty → the built-in empty state.
ariaLabel	string	n/a	Accessible name for the tree (defaults to the title).
expandedIds *	Set<string>	n/a	Controlled expanded folder ids (pass-through).
onToggleExpand	((next: Set<string>) => void) | undefined	n/a	Expansion changes (pass-through).
selectedId	string | null	n/a	Selected node id (single-select explorer mode; pass-through).
onSelect	((id: string) => void) | undefined	n/a	Leaf activation (pass-through).
emptyTitle	string	'No files'	Empty-state title (nodes empty).
emptyMessage	string	'Nothing to show here yet.'	Empty-state supporting message.
emptyAction	ReactNode	n/a	Optional empty-state action node (e.g. a NockerlButton).
maxBodyHeight	string	n/a	Cap the tree body height; overflow scrolls (the panel, not the page).
className	string	n/a	Extra class on the shell.