@ssebastien/tcmd 0.1.3 → 0.1.4

package/scripts/serve-web.js

@@ -0,0 +1,61 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: scripts/serve-web
+// CLI for the web view server: serves `public/` plus the `/api/*` filesystem
+// API (see `src/js/tcmd/web/server.js`). The page uses OPFS when the browser
+// has it and falls back to the API otherwise, so both backends come from this
+// one command.
+//
+// Environment: HOST (default 127.0.0.1, an IP literal: 0.0.0.0 or :: serves
+// every interface), PORT (default 8787), TCMD_WEB_ROOT (default "/", like the
+// TUI).
+
+import { createWebServer } from "../src/js/tcmd/web/server.js"
+import { isIP } from "node:net"
+import { fileURLToPath } from "node:url"
+
+// Function: hostUrl
+// The URL a client should open. IPv6 literals (possibly zone-qualified) are
+// bracketed so the result is a valid URL.
+function hostUrl(hostname, port) {
+	const host = isIP(hostname) === 6 ? `[${hostname}]` : hostname
+	return `http://${host}:${port}`
+}
+
+// Function: main
+// Starts the existing loopback server. Published packages include the bundle;
+// a source checkout builds it on demand without depending on the caller's cwd.
+async function main(options = {}) {
+	const publicDir = options.publicDir ?? new URL("../public/", import.meta.url)
+	if (!(await Bun.file(new URL("main.js", publicDir)).exists())) {
+		const build = await Bun.build({
+			entrypoints: [fileURLToPath(new URL("../src/js/tcmd/web/main.js", import.meta.url))],
+			outdir: fileURLToPath(publicDir),
+			target: "browser",
+		})
+		if (!build.success) throw new AggregateError(build.logs, "Could not build the web UI")
+	}
+	const result = createWebServer({ ...options, publicDir })
+	const host = result.server.hostname
+	// A machine name resolves to several addresses (often including link-local
+	// IPv6), but the server binds only one of them, so prefer an IP literal.
+	if (host !== "127.0.0.1" && host !== "localhost" && isIP(host) === 0) {
+		console.warn(
+			`tcmd web:      warning: ${host} is a name; bound to one of its addresses only.\n` +
+				`                Use an IP literal instead (0.0.0.0 or :: for every interface).`
+		)
+	}
+	console.log(`tcmd web:      ${hostUrl(host, result.server.port)}`)
+	console.log(`filesystem API: /api/* rooted at ${result.root}`)
+	console.log("use ?fs=http for your files, or ?fs=opfs for browser storage")
+	return result
+}
+
+if (import.meta.main) await main()
+
+export { hostUrl, main }
+
+// EOF

package/src/js/tcmd/components/App.html

@@ -1,28 +1,44 @@
-<div class="app" tabindex="0" on:keydown="keys">
-	<header out="headerView|Header"></header>
-	<main class="panes">
-		<section class="pane pane-left" out:class="leftPaneClass" on:click="leftId!pane:activate">
+<div class="app" ref="root" tabindex="0" on:keydown="keys">
+	<div out="headerView|Header"></div>
+	<section class="resize-hint" when="tooSmall">
+		<h2 out="minSizeTitle"></h2>
+		<p out="minSizeHint"></p>
+	</section>
+	<main class="panes" when="!tooSmall">
+		<section class="pane pane-parent" when="showParentPane" out:class="parentPaneClass" on:click="parentId!pane:activate">
 			<div class="pane-header">
-				<div out="leftCrumbsView|Breadcrumbs"></div>
+				<div when="!parentFilterOn" out="parentCrumbsView|Breadcrumbs"></div>
+				<div out="parentFilterView|FilterBar"></div>
+			</div>
+			<div data-slot="list" out="parentListView|FileList"></div>
+			<div out="parentDetailView|EntryDetail"></div>
+			<div out="parentSummaryView|Summary"></div>
+		</section>
+		<section class="pane pane-left" when="showLeftPane" out:class="leftPaneClass" on:click="leftId!pane:activate">
+			<div class="pane-header">
+				<div when="!leftFilterOn" out="leftCrumbsView|Breadcrumbs"></div>
 				<div out="leftFilterView|FilterBar"></div>
 			</div>
-			<div out="leftListView|FileList"></div>
+			<div data-slot="list" out="leftListView|FileList"></div>
 			<div out="leftDetailView|EntryDetail"></div>
 			<div out="leftSummaryView|Summary"></div>
 		</section>
-		<section class="pane pane-right" out:class="rightPaneClass" on:click="rightId!pane:activate">
+		<section class="pane pane-right" when="showRightPane" out:class="rightPaneClass" on:click="rightId!pane:activate">
 			<div class="pane-header">
-				<div out="rightCrumbsView|Breadcrumbs"></div>
+				<div when="!rightFilterOn" out="rightCrumbsView|Breadcrumbs"></div>
 				<div out="rightFilterView|FilterBar"></div>
 			</div>
-			<div out="rightListView|FileList"></div>
+			<div data-slot="list" out="rightListView|FileList"></div>
 			<div out="rightDetailView|EntryDetail"></div>
 			<div out="rightSummaryView|Summary"></div>
 		</section>
-		<div when="showPreview" out="previewView|FilePreview"></div>
+		<div data-slot="inspector" when="showInspectorInline" out="previewView|FilePreview"></div>
+		<div class="preview-max" when="showPreviewFull" out="previewView|FilePreview"></div>
 	</main>
-	<footer out="commandBarView|CommandBar"></footer>
-	<div when="paletteOpen" out="paletteView|CommandPalette"></div>
+	<div out="commandBarView|CommandBar"></div>
+	<div class="viewer" when="showViewer" role="dialog" aria-modal="true" aria-label="File inspector" tabindex="-1" out="previewView|FilePreview"></div>
+	<div when="panelOpen" out="panelView|CommandPanel"></div>
 	<div when="bookmarkOpen" out="bookmarkView|BookmarkList"></div>
 	<div out="confirmView|Confirm"></div>
+	<div when="helpOpen" out="helpView|Help"></div>
 </div>

package/src/js/tcmd/components/App.js

@@ -5,7 +5,7 @@
 
 // Module: tcmd/components/App
 // Root component: a header, two panes (breadcrumbs + FileList + summary each),
-// an optional preview column, the command bar and the command palette overlay.
+// an optional preview column, the command bar and the command panel overlay.
 // App is the controller seam: component events (published bubbles) and key
 // chords are translated into `session.dispatch(commandId, payload)` calls; it
 // never mutates model state directly.
@@ -23,14 +23,18 @@ import { PANEL_FOCUS } from "../core/panel.js"
 function createInit(session) {
 	const left = session.panes.left
 	const right = session.panes.right
+	const parent = session.panes.parent ?? {}
+	const preview = session.panes.preview ?? {}
 	// Pane-focus flags so the listing can render the cursor differently in the
 	// inactive pane. Shared by both engines.
 	const leftActive = derived([session.active], ([active]) => active === "left")
 	const rightActive = derived([session.active], ([active]) => active === "right")
+	const parentActive = derived([session.active], ([active]) => active === "parent")
+	const previewActive = derived([session.active], ([active]) => active === "preview")
 	return () => ({
 		active: session.active,
-		// The preview target entry, so the inspector can show a directory card
-		// even when there is no text/card preview.
+		// The preview target entry, so the inspector can show a directory
+		// column even when there is no text/card preview.
 		appEntry: session.previewEntry,
 		appHost: session.host,
 		appPath: session.activePath,
@@ -42,6 +46,7 @@ function createInit(session) {
 		bookmarkTarget: session.bookmarkTarget,
 		commandBarItems: session.commandBarItems,
 		confirm: session.confirm,
+		currentId: session.currentId,
 		dispatch: session.dispatch,
 		filtering: session.filtering,
 		leftActive,
@@ -55,28 +60,49 @@ function createInit(session) {
 		leftLoading: left.loading,
 		leftMarked: left.marked,
 		leftSegments: left.segments,
+		leftSetFilter: (value) => left.setFilter(value),
 		notice: session.notice,
-		paletteIndex: session.paletteIndex,
-		paletteItems: session.paletteItems,
-		paletteMode: session.paletteMode,
-		paletteOpen: session.paletteOpen,
-		paletteQuery: session.paletteQuery,
 		panelCommand: session.panelCommand,
 		panelDraft: session.panelDraft,
 		panelCursorRow: session.panelCursorRow,
+		panelEntry: session.panelEntry,
 		panelFiltered: session.panelFiltered,
 		panelFocus: session.panelFocus,
 		panelOpIndex: session.panelOpIndex,
 		panelItems: session.panelItems,
+		panelLabelWidth: session.panelLabelWidth,
 		panelOpen: session.panelOpen,
-		panelOperation: session.panelOperation,
+		panelPicking: session.panelPicking,
 		panelQuery: session.panelQuery,
 		panelRowIndex: session.panelRowIndex,
 		panelRows: session.panelRows,
 		panelRunnable: session.panelRunnable,
 		panelTextual: session.panelTextual,
 		panelValue: session.panelValue,
+		// The explorer's first column: the parent of the current directory.
+		parentActive,
+		parentCursor: parent.cursor,
+		parentDisk: parent.disk,
+		parentEntries: parent.entries,
+		parentEntry: session.parentCursorEntry,
+		parentError: parent.error,
+		parentFilter: parent.filter,
+		parentId: "parent",
+		parentLoading: parent.loading,
+		parentMarked: parent.marked,
+		parentSegments: parent.segments,
+		parentSetFilter: (value) => parent.setFilter(value),
 		preview: session.preview,
+		previewFull: session.previewFull,
+		// The third column: the directory the inspector previews, so it reads
+		// as a pane. Over a file the inspector stays a card and these idle.
+		previewActive,
+		previewCursor: preview.cursor,
+		previewEntries: preview.entries,
+		previewId: "preview",
+		previewLoading: preview.loading,
+		previewMarked: preview.marked,
+		previewSegments: preview.segments,
 		rightActive,
 		rightCursor: right.cursor,
 		rightDisk: right.disk,
@@ -88,17 +114,33 @@ function createInit(session) {
 		rightLoading: right.loading,
 		rightMarked: right.marked,
 		rightSegments: right.segments,
+		rightSetFilter: (value) => right.setFilter(value),
 		showPreview: session.showPreview,
+		viewMode: session.viewMode,
+		// The panel's file picker: its filter input and the directory it
+		// currently browses, so the panel can render the picker view.
+		pickerPath: session.pickerPane?.path,
+		pickerQuery: session.pickerQuery,
 	})
 }
 
+// Function: fieldOwnsKeys
+// True when one of the panel's inputs owns the keyboard: the command filter
+// (`PANEL_FOCUS.OPS`) or a textual argument's value field (`panelTextual`).
+// While an input owns the keyboard the shared handler leaves text editing to
+// it — typing, Backspace, Delete, caret movement. A plain argument row or an
+// item row has no input pressed, so the handler handles the key itself.
+function fieldOwnsKeys(data, focus) {
+	return focus === PANEL_FOCUS.OPS || Boolean(unwrap(data.panelTextual))
+}
+
 // Function: createBehaviors
 // Builds the App data/key behavior map for the given renderer environment.
 // Published events are registered separately via `createEvents()` (`.sub`).
 function createBehaviors(env) {
 	return {
-		// Global key handling: confirm dialogs first, palette mode, then the
-		// keymap.
+		// Global key handling: confirm dialogs first, the command panel, then
+		// the keymap.
 		keys: (self, data, event) => {
 			const key = env.normalizeKey ? env.normalizeKey(event) : event
 			if (unwrap(data.confirm)) {
@@ -107,33 +149,46 @@ function createBehaviors(env) {
 				else if (name === "n" || name === "escape") data.dispatch("confirm.no")
 				return
 			}
-			if (unwrap(data.paletteOpen)) {
-				if (key?.name === "escape") {
-					data.dispatch("palette.toggle")
-					return
-				}
-				if (key?.name === "up") {
-					data.dispatch("palette.up")
-					return
-				}
-				if (key?.name === "down") {
-					data.dispatch("palette.down")
-					return
-				}
-				if (key?.name === "tab") {
-					// Shift-Tab walks the palette list backwards.
-					data.dispatch(key.shift ? "palette.up" : "palette.complete")
-					return
-				}
-				if (key?.name === "return" || key?.name === "enter") {
-					self.pub("palette:confirm", `${unwrap(data.paletteQuery) ?? ""}`)
+			if (unwrap(data.panelOpen)) {
+				// The picker is a sub-mode of the panel: it owns navigation and
+				// choice, while typing filters through its own input.
+				if (unwrap(data.panelPicking)) {
+					if (key?.name === "escape") {
+						data.dispatch("panel.pick.cancel")
+						return
+					}
+					if (key?.name === "tab") {
+						data.dispatch("panel.pick.cancel")
+						return
+					}
+					if (key?.name === "up") {
+						data.dispatch("panel.pick.up")
+						return
+					}
+					if (key?.name === "down") {
+						data.dispatch("panel.pick.down")
+						return
+					}
+					if (key?.name === "right") {
+						data.dispatch("panel.pick.descend")
+						return
+					}
+					if (key?.name === "backspace") {
+						// An empty filter steps up; otherwise the filter input
+						// owns Backspace and edits itself.
+						if (`${unwrap(data.pickerQuery) ?? ""}` === "") data.dispatch("panel.pick.parent")
+						return
+					}
+					if (key?.name === "return" || key?.name === "enter") {
+						data.dispatch(key.ctrl ? "panel.pick.chooseDir" : "panel.pick.enter")
+						return
+					}
+					// Everything else (typing, caret movement) is the filter
+					// input's to handle.
 					return
 				}
-				// Let the focused input handle typing.
-				return
-			}
-			if (unwrap(data.panelOpen)) {
 				const focus = unwrap(data.panelFocus)
+				const fieldOwns = fieldOwnsKeys(data, focus)
 				// Escape closes; Tab cycles the focus ring (command ⇄ args);
 				// arrows move within the focused column; Enter runs the command.
 				if (key?.name === "escape") {
@@ -152,29 +207,35 @@ function createBehaviors(env) {
 					data.dispatch(focus === PANEL_FOCUS.ARGS ? "panel.nextArg" : "panel.down")
 					return
 				}
+				if (key?.name === "o" && key.ctrl) {
+					// Browse a path/destination argument in the file picker.
+					data.dispatch("panel.browse")
+					return
+				}
 				if (key?.name === "return" || key?.name === "enter") {
-					// A focused textual-argument field owns Enter (its `on:enter`
-					// publishes `panel:confirm`), so the command is not run twice.
-					if (focus === PANEL_FOCUS.ARGS && unwrap(data.panelTextual)) return
-					// Enter runs the highlighted command with the current draft.
+					// Enter runs a complete command, or walks to the next
+					// missing field (see `panel.run`); the root routes it for
+					// every renderer, so no per-input `on:enter` is needed.
 					data.dispatch("panel.run")
 					return
 				}
-				// Space toggles a selection item in the argument column.
-				if (key?.name === "space" && focus === PANEL_FOCUS.ARGS && !unwrap(data.panelTextual)) {
+				// While an input owns the keyboard (the command filter, or a
+				// textual argument's value field) it also owns text editing:
+				// typing, Backspace, Delete and caret movement pass through to
+				// it. Intercepting Backspace here used to bounce the cursor
+				// back to the command filter mid-edit.
+				if (fieldOwns) return
+				// A focused non-textual argument row: Space toggles its
+				// selection, any other printable key jumps back to the command
+				// filter and appends the character; Backspace edits the filter.
+				if (key?.name === "space") {
 					data.dispatch("panel.toggleItem")
 					return
 				}
-				if (key?.name === "backspace" && focus === PANEL_FOCUS.ARGS) {
-					// Editing the command filter from the argument column.
+				if (key?.name === "backspace") {
 					data.dispatch("panel.type", { backspace: true })
 					return
 				}
-				// While the command column is focused, or a textual argument
-				// owns the cursor, the focused input handles typing.
-				if (focus !== PANEL_FOCUS.ARGS || unwrap(data.panelTextual)) return
-				// Typing on a non-textual argument jumps back to the command
-				// filter and appends the character.
 				if (key?.name && key.name.length === 1 && !key.ctrl && !key.meta) {
 					data.dispatch("panel.type", { char: key.name })
 					return
@@ -244,7 +305,12 @@ function createBehaviors(env) {
 			// filter (or on Shift-Esc) the keymap decides — Esc steps back
 			// through the pane's directory history.
 			if (key?.name === "escape" && !key.shift) {
-				const filter = active === "left" ? unwrap(data.leftFilter) : unwrap(data.rightFilter)
+				const filters = {
+					left: data.leftFilter,
+					parent: data.parentFilter,
+					right: data.rightFilter,
+				}
+				const filter = unwrap(filters[active])
 				if (filter) {
 					data.dispatch("filter.clear")
 					return
@@ -256,9 +322,6 @@ function createBehaviors(env) {
 				env.quit(self)
 				return
 			}
-			// The command panel is a TUI-only view; the web renderer omits the
-			// capability so `m` never opens an invisible modal there.
-			if (id === "panel.toggle" && !env.panel) return
 			data.dispatch(id, { paneId: unwrap(data.active) })
 		},
 	}
@@ -279,24 +342,38 @@ function createEvents(env = {}) {
 			if (event.data) data.dispatch(event.data)
 		},
 		"panel:select": (_self, data, event) => {
-			// Clicking an operation row moves the cursor to it; clicking an
-			// argument/item row focuses the argument column (toggling an item).
+			// Clicking a command row moves the cursor to it (a group header is
+			// inert); clicking an argument/item row focuses the right pane
+			// (toggling an item); clicking a picker row chooses it.
 			const items = unwrap(data.panelItems) ?? []
-			const index = items.findIndex((row) => row.id === event.data)
-			if (index >= 0) {
-				data.dispatch("panel.setOp", { index })
+			const item = items.find((row) => row.id === event.data)
+			if (item?.type === "op") {
+				data.dispatch("panel.setOp", { index: item.entryIndex })
 				return
 			}
+			if (item) return
 			const rows = unwrap(data.panelRows) ?? []
 			const rowIndex = rows.findIndex((row) => row.key === event.data)
 			if (rowIndex < 0) return
+			const row = rows[rowIndex]
+			if (row?.type === "entry") {
+				data.dispatch("panel.focusArg")
+				data.dispatch("panel.pick.setCursor", { index: rowIndex })
+				data.dispatch("panel.pick.enter")
+				return
+			}
 			data.dispatch("panel.focusArg")
 			data.dispatch("panel.setRow", { index: rowIndex })
-			const row = rows[rowIndex]
 			if (row?.type === "item") data.dispatch("panel.toggleItem")
 		},
 		"panel:confirm": (_self, data) => {
+			// Published by a focused panel input's `on:enter`; the key handler
+			// leaves Enter to it (see `fieldOwnsKeys`).
 			if (!unwrap(data.panelOpen)) return
+			if (unwrap(data.panelPicking)) {
+				data.dispatch("panel.pick.enter")
+				return
+			}
 			data.dispatch("panel.run")
 		},
 		"crumbs:go": (_self, data, event) => {
@@ -320,33 +397,6 @@ function createEvents(env = {}) {
 			if (unwrap(data.bookmarkMode) === "name") data.dispatch("bookmark.save")
 			else data.dispatch("bookmark.select")
 		},
-		"palette:confirm": (_self, data, event) => {
-			// The global key handler and the input's on:enter can both fire;
-			// only the first one (while the palette is open) acts.
-			if (!unwrap(data.paletteOpen)) return
-			if (unwrap(data.paletteMode) === "script") {
-				// Submit the typed line: run it, or complete the highlighted row
-				// when the input is empty.
-				data.dispatch("palette.submit")
-				return
-			}
-			const items = unwrap(data.paletteItems) ?? []
-			const index = Math.max(0, Math.min(unwrap(data.paletteIndex) ?? 0, items.length - 1))
-			const match = items[index] ?? items[0]
-			if (match?.id) data.dispatch(match.id)
-			data.dispatch("palette.toggle")
-		},
-		"palette:run": (_self, data, event) => {
-			if (!event.data) return
-			if (unwrap(data.paletteMode) === "script") {
-				// Clicking a script row completes it; running stays on Enter.
-				const item = (unwrap(data.paletteItems) ?? []).find((row) => row.id === event.data)
-				if (item?.completion) data.dispatch("palette.setQuery", { query: item.completion })
-				return
-			}
-			data.dispatch(event.data)
-			data.dispatch("palette.toggle")
-		},
 	}
 }
 

package/src/js/tcmd/components/App.xml

@@ -10,7 +10,7 @@
 		<!-- Identity bar: the one visible trace of TinyCmd itself (the host
 		     aside, everything else on screen is the user's files). "Tiny"
 		     shimmers blue letter by letter, "Cmd" shimmers orange. -->
-		<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+		<box flexDirection="row" height="1" paddingLeft="1" paddingRight="1" overflow="hidden">
 			<text out="brandT" out:fg="brandTFg" wrapMode="none"></text>
 			<text out="brandI" out:fg="brandIFg" wrapMode="none"></text>
 			<text out="brandN" out:fg="brandNFg" wrapMode="none"></text>
@@ -19,6 +19,23 @@
 			<text out="brandM" out:fg="brandMFg" wrapMode="none"></text>
 			<text out="brandD" out:fg="brandDFg" wrapMode="none"></text>
 			<text out="topBar" out:fg="topBarFg" wrapMode="none"></text>
+			<box flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden"></box>
+			<!-- The view mode, letter by letter so each carries its gradient:
+			     explorer shimmers along the Tiny blues, commander along the
+			     Cmd oranges (see `modeGradient` in Frame.js). The trailing
+			     slots of the shorter word are empty and take no column. -->
+			<box flexDirection="row" flexShrink="0" overflow="hidden">
+				<text when="modeHas0" out="modeL0" out:fg="modeFg0" wrapMode="none"></text>
+				<text when="modeHas1" out="modeL1" out:fg="modeFg1" wrapMode="none"></text>
+				<text when="modeHas2" out="modeL2" out:fg="modeFg2" wrapMode="none"></text>
+				<text when="modeHas3" out="modeL3" out:fg="modeFg3" wrapMode="none"></text>
+				<text when="modeHas4" out="modeL4" out:fg="modeFg4" wrapMode="none"></text>
+				<text when="modeHas5" out="modeL5" out:fg="modeFg5" wrapMode="none"></text>
+				<text when="modeHas6" out="modeL6" out:fg="modeFg6" wrapMode="none"></text>
+				<text when="modeHas7" out="modeL7" out:fg="modeFg7" wrapMode="none"></text>
+				<text when="modeHas8" out="modeL8" out:fg="modeFg8" wrapMode="none"></text>
+				<text out="topBarStatus" out:fg="topBarStatusFg" wrapMode="none"></text>
+			</box>
 		</box>
 
 		<!-- Minimum-size gate: below the breakpoint the workspace is unusable. -->
@@ -27,17 +44,36 @@
 			<text out="minSizeHint" out:fg="dimFg"></text>
 		</box>
 
-		<!-- Two boxed panes plus the inline inspector. -->
+		<!-- Columns: commander tiles source and destination; explorer leads
+		     with the parent mirror so the current pane sits in the middle,
+		     slightly wider than its neighbours. The inspector completes the
+		     three columns in either mode. -->
 		<box when="!tooSmall" flexDirection="column" flexGrow="1" overflow="hidden">
-			<box flexDirection="row" flexGrow="1" overflow="hidden">
-				<box flexDirection="column" flexGrow="1" border borderStyle="single"
+			<box when="!showPreviewFull" flexDirection="row" flexGrow="1" overflow="hidden">
+				<box when="showParentPane" flexDirection="column" flexGrow="1" flexBasis="0" border borderStyle="single"
+				     out:border="leftBorder" out:borderColor="parentBorderFg"
+				     on:click="parentId!pane:activate">
+					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+						<box when="!parentFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
+							<breadcrumbs in:segments="parentSegments" in:paneId="parentId" height="1"></breadcrumbs>
+						</box>
+						<filterbar in:query="parentFilter" in:paneId="parentId" in:filtering="filtering" in:entries="parentEntries" in:setFilter="parentSetFilter"></filterbar>
+					</box>
+					<box height="1" out:border="headRule" out:borderColor="parentHeadRuleFg"></box>
+					<filelist in:entries="parentEntries" in:cursor="parentCursor" in:marked="parentMarked"
+					          in:active="parentActive" in:paneId="parentId" in:loading="parentLoading"
+					          in:viewport="listViewport"></filelist>
+					<entrydetail in:entry="parentEntry" in:marked="parentMarked" height="2"></entrydetail>
+					<summary in:entries="parentEntries" in:disk="parentDisk" height="1"></summary>
+				</box>
+				<box when="showLeftPane" flexDirection="column" flexBasis="0" out:flexGrow="leftGrow" border borderStyle="single"
 				     out:border="leftBorder" out:borderColor="leftBorderFg"
 				     on:click="leftId!pane:activate">
 					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
 						<box when="!leftFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
 							<breadcrumbs in:segments="leftSegments" in:paneId="leftId" height="1"></breadcrumbs>
 						</box>
-						<filterbar in:query="leftFilter" in:paneId="leftId" in:filtering="filtering" in:entries="leftEntries"></filterbar>
+						<filterbar in:query="leftFilter" in:paneId="leftId" in:filtering="filtering" in:entries="leftEntries" in:setFilter="leftSetFilter"></filterbar>
 					</box>
 					<box height="1" out:border="headRule" out:borderColor="leftHeadRuleFg"></box>
 					<filelist in:entries="leftEntries" in:cursor="leftCursor" in:marked="leftMarked"
@@ -46,14 +82,14 @@
 					<entrydetail in:entry="leftEntry" in:marked="leftMarked" height="2"></entrydetail>
 					<summary in:entries="leftEntries" in:disk="leftDisk" height="1"></summary>
 				</box>
-				<box flexDirection="column" flexGrow="1" border borderStyle="single"
+				<box when="showRightPane" flexDirection="column" flexBasis="0" out:flexGrow="rightGrow" border borderStyle="single"
 				     out:border="rightBorder" out:borderColor="rightBorderFg"
 				     on:click="rightId!pane:activate">
 					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
 						<box when="!rightFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
 							<breadcrumbs in:segments="rightSegments" in:paneId="rightId" height="1"></breadcrumbs>
 						</box>
-						<filterbar in:query="rightFilter" in:paneId="rightId" in:filtering="filtering" in:entries="rightEntries"></filterbar>
+						<filterbar in:query="rightFilter" in:paneId="rightId" in:filtering="filtering" in:entries="rightEntries" in:setFilter="rightSetFilter"></filterbar>
 					</box>
 					<box height="1" out:border="headRule" out:borderColor="rightHeadRuleFg"></box>
 					<filelist in:entries="rightEntries" in:cursor="rightCursor" in:marked="rightMarked"
@@ -63,8 +99,20 @@
 					<summary in:entries="rightEntries" in:disk="rightDisk" height="1"></summary>
 				</box>
 				<filepreview when="showInspectorInline" in:preview="preview" in:show="showInspectorInline"
-				             in:entry="appEntry" flexGrow="1"></filepreview>
+				             in:entry="appEntry" in:paneId="previewId"
+				             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
+				             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
+				             in:dirActive="previewActive" in:dirLoading="previewLoading"
+				             flexGrow="1" flexBasis="0"></filepreview>
 			</box>
+			<!-- Maximized inspector (`⇧V`): the preview takes the whole pane
+			     row, the identity and command bars staying in place. -->
+			<filepreview when="showPreviewFull" in:preview="preview" in:show="showPreviewFull"
+			             in:entry="appEntry" in:paneId="previewId"
+			             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
+			             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
+			             in:dirActive="previewActive" in:dirLoading="previewLoading"
+			             flexGrow="1"></filepreview>
 			<commandbar in:items="commandBarItems" in:notice="notice" in:leftError="leftError"
 			            in:rightError="rightError" in:active="active"
 			            in:leftMarked="leftMarked" in:rightMarked="rightMarked" out:height="barHeight"></commandbar>
@@ -75,18 +123,19 @@
 	<box when="showViewer" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="10"
 	     alignItems="center" justifyContent="center">
 		<box width="80%" height="90%">
-			<filepreview in:preview="preview" in:show="showViewer" in:entry="appEntry"></filepreview>
+			<filepreview in:preview="preview" in:show="showViewer" in:entry="appEntry" in:paneId="previewId"
+			             in:dirSegments="previewSegments" in:dirEntries="previewEntries"
+			             in:dirCursor="previewCursor" in:dirMarked="previewMarked"
+			             in:dirActive="previewActive" in:dirLoading="previewLoading"></filepreview>
 		</box>
 	</box>
 
-	<commandpalette when="paletteOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="20"
-	                in:open="paletteOpen" in:mode="paletteMode" in:query="paletteQuery"
-	                in:items="paletteItems" in:selected="paletteIndex"></commandpalette>
 	<commandpanel when="panelOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="22"
-	              in:open="panelOpen" in:operation="panelOperation" in:items="panelItems"
+	              in:open="panelOpen" in:entry="panelEntry" in:items="panelItems"
 	              in:opCursor="panelOpIndex" in:rows="panelRows" in:argCursor="panelRowIndex"
-	              in:focus="panelFocus" in:textual="panelTextual" in:argRow="panelCursorRow"
-	              in:command="panelCommand" in:runnable="panelRunnable"
+	              in:labelWidth="panelLabelWidth"
+	              in:focus="panelFocus"	              in:command="panelCommand" in:runnable="panelRunnable"
+	              in:picking="panelPicking" in:pickerQuery="pickerQuery" in:pickerPath="pickerPath"
 	              in:query="panelQuery" in:value="panelValue"></commandpanel>
 	<bookmarklist when="bookmarkOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="25"
 	              in:open="bookmarkOpen" in:mode="bookmarkMode" in:query="bookmarkQuery"

package/src/js/tcmd/components/BookmarkList.html

@@ -1,8 +1,9 @@
-<div class="bookmark-list" when="open">
+<div class="bookmark-list" when="open" role="dialog" aria-modal="true" aria-label="Bookmarks">
 	<div class="bookmark-dialog">
+		<h2 out="title"></h2>
 		<header>
 			<span class="bookmark-sign" out="sign"></span>
-			<input class="bookmark-query" type="text" inout="query" on:enter="confirm">
+			<input class="bookmark-query" type="text" inout="query" aria-label="Bookmark name or query" on:enter="confirm">
 		</header>
 		<p class="bookmark-target" when="inputVisible" out="target"></p>
 		<p class="bookmark-empty" when="emptyList" out="empty"></p>

package/src/js/tcmd/components/BookmarkList.js

@@ -62,7 +62,7 @@ function createBehaviors(env) {
 		emptyFg: () => env.textSecondaryFg,
 	}
 	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
+		behaviors.rows = (self, data) => env.rows(self, data)
 	}
 	if (env?.scrollTop) {
 		behaviors.scrollTop = (self, data) => env.scrollTop(self, data)

package/src/js/tcmd/components/Breadcrumbs.js

@@ -17,7 +17,7 @@
 function createBehaviors(env) {
 	const behaviors = { listClass: () => env?.listClass }
 	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
+		behaviors.rows = (self, data) => env.rows(self, data)
 	}
 	return behaviors
 }