@ssebastien/tcmd 0.1.4 → 0.1.7

package/scripts/build-desktop.js

@@ -0,0 +1,31 @@
+// Project: TinyCommand
+// License: BSD
+// Build the self-contained webview bundle. tinyjs invokes this hook on
+// `tinyjs build`; `desktop:dev` also runs it before opening the native window.
+
+import { copyFile, mkdir } from "node:fs/promises"
+import { fileURLToPath } from "node:url"
+
+const root = new URL("../", import.meta.url)
+const output = new URL("../desktop/dist/", import.meta.url)
+await mkdir(output, { recursive: true })
+
+const result = await Bun.build({
+	entrypoints: [fileURLToPath(new URL("../src/js/tcmd/desktop/main.js", import.meta.url))],
+	outdir: fileURLToPath(output),
+	target: "browser",
+	naming: "main.js",
+})
+if (!result.success) throw new AggregateError(result.logs, "Could not build the TinyCommand desktop frontend")
+
+await copyFile(new URL("../desktop/frontend/index.html", import.meta.url), new URL("index.html", output))
+await copyFile(new URL("../public/style.css", import.meta.url), new URL("style.css", output))
+await mkdir(new URL("../desktop/dist/fonts/", import.meta.url), { recursive: true })
+await copyFile(
+	new URL("../public/fonts/M+1CodeNerdFontMono-Regular.ttf", import.meta.url),
+	new URL("../desktop/dist/fonts/M+1CodeNerdFontMono-Regular.ttf", import.meta.url),
+)
+await copyFile(new URL("../public/fonts/OFL.txt", import.meta.url), new URL("../desktop/dist/fonts/OFL.txt", import.meta.url))
+await mkdir(new URL("../desktop/dist/licenses/", import.meta.url), { recursive: true })
+await copyFile(new URL("../public/licenses/LUCIDE.txt", import.meta.url), new URL("../desktop/dist/licenses/LUCIDE.txt", import.meta.url))
+console.log(`TinyCommand desktop frontend built in ${fileURLToPath(output)}`)

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

@@ -1,5 +1,57 @@
-<div class="app" ref="root" tabindex="0" on:keydown="keys">
-	<div out="headerView|Header"></div>
+<div class="app" ref="root" tabindex="0" out:class="appModeClass" on:keydown="keys">
+	<svg class="lucide-defs" aria-hidden="true" focusable="false">
+		<defs>
+			<symbol id="lucide-folder-plus" viewBox="0 0 24 24"><path d="M12 10v6"/><path d="M9 13h6"/><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></symbol>
+			<symbol id="lucide-arrow-left" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></symbol>
+			<symbol id="lucide-arrow-right" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></symbol>
+			<symbol id="lucide-arrow-up" viewBox="0 0 24 24"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></symbol>
+			<symbol id="lucide-refresh-cw" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></symbol>
+			<symbol id="lucide-columns-2" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M12 3v18"/></symbol>
+			<symbol id="lucide-panel-right" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M15 3v18"/></symbol>
+			<symbol id="lucide-terminal" viewBox="0 0 24 24"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></symbol>
+			<symbol id="lucide-circle-question-mark" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></symbol>
+			<symbol id="lucide-chevron-right" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
+			<symbol id="lucide-arrow-down" viewBox="0 0 24 24"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></symbol>
+			<symbol id="lucide-check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></symbol>
+			<symbol id="lucide-bookmark" viewBox="0 0 24 24"><path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z"/></symbol>
+			<symbol id="lucide-maximize" viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M21 8V5a2 2 0 0 0-2-2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></symbol>
+			<symbol id="lucide-trash" viewBox="0 0 24 24"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></symbol>
+			<symbol id="lucide-power" viewBox="0 0 24 24"><path d="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></symbol>
+			<symbol id="lucide-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></symbol>
+			<symbol id="lucide-folder" viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></symbol>
+			<symbol id="lucide-link-2" viewBox="0 0 24 24"><path d="M9 17H7A5 5 0 0 1 7 7h2"/><path d="M15 7h2a5 5 0 1 1 0 10h-2"/><line x1="8" x2="16" y1="12" y2="12"/></symbol>
+			<symbol id="lucide-cpu" viewBox="0 0 24 24"><path d="M12 20v2"/><path d="M12 2v2"/><path d="M17 20v2"/><path d="M17 2v2"/><path d="M2 12h2"/><path d="M2 17h2"/><path d="M2 7h2"/><path d="M20 12h2"/><path d="M20 17h2"/><path d="M20 7h2"/><path d="M7 20v2"/><path d="M7 2v2"/><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="8" y="8" width="8" height="8" rx="1"/></symbol>
+			<symbol id="lucide-file" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/></symbol>
+			<symbol id="lucide-file-code" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="m10 13-2 2 2 2"/><path d="m14 13 2 2-2 2"/></symbol>
+			<symbol id="lucide-file-text" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></symbol>
+			<symbol id="lucide-file-image" viewBox="0 0 24 24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><circle cx="10" cy="12" r="2"/><path d="m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22"/></symbol>
+			<symbol id="lucide-audio-lines" viewBox="0 0 24 24"><path d="M2 10v3"/><path d="M6 6v11"/><path d="M10 3v18"/><path d="M14 8v7"/><path d="M18 5v13"/><path d="M22 10v3"/></symbol>
+			<symbol id="lucide-video" viewBox="0 0 24 24"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></symbol>
+			<symbol id="lucide-file-archive" viewBox="0 0 24 24"><path d="M13.659 22H18a2 2 0 0 0 2-2V8a2.4 2.4 0 0 0-.706-1.706l-3.588-3.588A2.4 2.4 0 0 0 14 2H6a2 2 0 0 0-2 2v11.5"/><path d="M14 2v5a1 1 0 0 0 1 1h5"/><path d="M8 12v-1"/><path d="M8 18v-2"/><path d="M8 7V6"/><circle cx="8" cy="20" r="2"/></symbol>
+			<symbol id="lucide-database" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></symbol>
+			<symbol id="lucide-settings" viewBox="0 0 24 24"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></symbol>
+		</defs>
+	</svg>
+	<div when="!desktopMode" out="headerView|Header"></div>
+	<div class="desktop-toolbar" when="desktopMode" role="toolbar" aria-label="File browser">
+		<div class="desktop-toolbar-group">
+			<button class="desktop-toolbar-button is-primary" type="button" title="Open a folder" aria-label="Open a folder" on:click="!toolbar:open-folder"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-folder-plus"></use></svg><span>Open folder</span></button>
+			<button class="desktop-toolbar-button" type="button" title="Go back" aria-label="Go back" on:click="!toolbar:back"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-arrow-left"></use></svg><span>Back</span></button>
+			<button class="desktop-toolbar-button" type="button" title="Go forward" aria-label="Go forward" on:click="!toolbar:forward"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-arrow-right"></use></svg><span>Forward</span></button>
+			<button class="desktop-toolbar-button" type="button" title="Go to the parent folder" aria-label="Go to the parent folder" on:click="!toolbar:up"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-arrow-up"></use></svg><span>Up</span></button>
+			<button class="desktop-toolbar-button" type="button" title="Refresh the active folder" aria-label="Refresh the active folder" on:click="!toolbar:refresh"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-refresh-cw"></use></svg><span>Refresh</span></button>
+		</div>
+		<span class="desktop-toolbar-separator" aria-hidden="true"></span>
+		<div class="desktop-toolbar-group">
+			<button class="desktop-toolbar-button" type="button" title="Switch between Explorer and Commander" aria-label="Switch view mode" on:click="!toolbar:toggle-mode"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-columns-2"></use></svg><span out="desktopViewLabel"></span></button>
+			<button class="desktop-toolbar-button" type="button" title="Toggle the preview pane" aria-label="Toggle the preview pane" on:click="!toolbar:toggle-preview"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-panel-right"></use></svg><span out="desktopPreviewLabel"></span></button>
+		</div>
+		<span class="desktop-toolbar-spacer"></span>
+		<div class="desktop-toolbar-group">
+			<button class="desktop-toolbar-button" type="button" title="Open the command panel" aria-label="Open the command panel" on:click="!toolbar:commands"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-terminal"></use></svg><span>Commands</span><svg class="toolbar-chevron ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-chevron-right"></use></svg></button>
+			<button class="desktop-toolbar-button" type="button" title="Show keyboard shortcuts" aria-label="Show keyboard shortcuts" on:click="!toolbar:help"><svg class="toolbar-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-circle-question-mark"></use></svg><span>Help</span></button>
+		</div>
+	</div>
 	<section class="resize-hint" when="tooSmall">
 		<h2 out="minSizeTitle"></h2>
 		<p out="minSizeHint"></p>
@@ -12,7 +64,6 @@
 			</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">
@@ -21,7 +72,6 @@
 			</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" when="showRightPane" out:class="rightPaneClass" on:click="rightId!pane:activate">
 			<div class="pane-header">
@@ -30,15 +80,15 @@
 			</div>
 			<div data-slot="list" out="rightListView|FileList"></div>
 			<div out="rightDetailView|EntryDetail"></div>
-			<div out="rightSummaryView|Summary"></div>
 		</section>
 		<div data-slot="inspector" when="showInspectorInline" out="previewView|FilePreview"></div>
 		<div class="preview-max" when="showPreviewFull" out="previewView|FilePreview"></div>
 	</main>
 	<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 class="viewer" when="showViewer" role="dialog" aria-modal="true" aria-label="File inspector" tabindex="-1" on:click="!dialog:viewer-cancel" out="previewView|FilePreview"></div>
 	<div when="panelOpen" out="panelView|CommandPanel"></div>
 	<div when="bookmarkOpen" out="bookmarkView|BookmarkList"></div>
+	<div when="overlayOpen" out="overlayView|OverlayList"></div>
 	<div out="confirmView|Confirm"></div>
 	<div when="helpOpen" out="helpView|Help"></div>
 </div>

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

@@ -4,11 +4,13 @@
 // Created: 2026-09-26
 
 // Module: tcmd/components/App
-// Root component: a header, two panes (breadcrumbs + FileList + summary each),
+// Root component: a header, two panes (breadcrumbs + FileList + detail each),
 // 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.
+// never mutates model state directly. It also owns the shared modal key
+// routing — the fullscreen viewer overlay included — so both renderers behave
+// alike.
 //
 // Environment: `normalizeKey(event)` (optional; identity when omitted) and
 // `quit(self)`. Renderer-specific bindings (pane borders, status color) live in
@@ -17,6 +19,12 @@
 import { derived, unwrap } from "select/state/cells"
 import { DEFAULT_KEYMAP, matchKeymap } from "../core/keymap.js"
 import { PANEL_FOCUS } from "../core/panel.js"
+import { isNarrow } from "./Frame.js"
+
+// Constant: DOUBLE_CLICK_MS
+// Two clicks on the same listing row within this window count as a double
+// click, which opens the row like Enter (see `createEvents#list:select`).
+const DOUBLE_CLICK_MS = 400
 
 // Function: createInit
 // State initializer binding the root component to a `session`.
@@ -40,10 +48,8 @@ function createInit(session) {
 		appPath: session.activePath,
 		bookmarkIndex: session.bookmarkIndex,
 		bookmarkItems: session.bookmarkItems,
-		bookmarkMode: session.bookmarkMode,
 		bookmarkOpen: session.bookmarkOpen,
 		bookmarkQuery: session.bookmarkQuery,
-		bookmarkTarget: session.bookmarkTarget,
 		commandBarItems: session.commandBarItems,
 		confirm: session.confirm,
 		currentId: session.currentId,
@@ -62,7 +68,10 @@ function createInit(session) {
 		leftSegments: left.segments,
 		leftSetFilter: (value) => left.setFilter(value),
 		notice: session.notice,
-		panelCommand: session.panelCommand,
+		// The shared list overlay (`u` history / `⇧T` trash).
+		overlay: session.overlay,
+		overlayIndex: session.overlayIndex,
+		overlayItems: session.overlayItems,
 		panelDraft: session.panelDraft,
 		panelCursorRow: session.panelCursorRow,
 		panelEntry: session.panelEntry,
@@ -70,13 +79,12 @@ function createInit(session) {
 		panelFocus: session.panelFocus,
 		panelOpIndex: session.panelOpIndex,
 		panelItems: session.panelItems,
-		panelLabelWidth: session.panelLabelWidth,
 		panelOpen: session.panelOpen,
-		panelPicking: session.panelPicking,
+		panelPermBit: session.panelPermBit,
+		panelPreview: session.panelPreview,
 		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.
@@ -94,6 +102,8 @@ function createInit(session) {
 		parentSetFilter: (value) => parent.setFilter(value),
 		preview: session.preview,
 		previewFull: session.previewFull,
+		// The full previews apply body scroll requests through this cell.
+		previewScroll: session.previewScroll,
 		// 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,
@@ -117,9 +127,12 @@ function createInit(session) {
 		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,
+		// The panel's file picker: its open mode, editable path, focus region
+		// and rows, so the panel can render the picker view.
+		pickerOpen: session.pickerOpen,
+		pickerPathText: session.pickerPathText,
+		pickerFocus: session.pickerFocus,
+		pickerRows: session.pickerRows,
 		pickerQuery: session.pickerQuery,
 	})
 }
@@ -134,15 +147,58 @@ function fieldOwnsKeys(data, focus) {
 	return focus === PANEL_FOCUS.OPS || Boolean(unwrap(data.panelTextual))
 }
 
+// Function: isFilePreview
+// True when the inspector shows a file — a text body or a metadata card — as
+// opposed to a directory column, which keeps its listing cursor navigation.
+function isFilePreview(data) {
+	const entry = unwrap(data.appEntry)
+	return Boolean(entry) && !entry.isDir
+}
+
+// Function: routePreviewKeys
+// The arrows of a full preview: Up/Down scroll the body, Left/Right step to
+// the previous/next entry (the cursor movement the preview already follows).
+// Returns true when the key was handled, so the caller can stop routing.
+function routePreviewKeys(data, key) {
+	if (!isFilePreview(data)) return false
+	const name = key?.name
+	if (name === "up" || name === "down") {
+		data.dispatch("preview.scroll", { delta: name === "up" ? -1 : 1 })
+		return true
+	}
+	if (name === "left" || name === "right") {
+		data.dispatch(name === "left" ? "nav.up" : "nav.down")
+		return true
+	}
+	return false
+}
+
 // 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, the command panel, then
-		// the keymap.
+		// Global key handling: the fullscreen viewer modal first, then confirm
+		// dialogs, the command panel, and finally the keymap.
 		keys: (self, data, event) => {
 			const key = env.normalizeKey ? env.normalizeKey(event) : event
+			// The fullscreen inspector overlay is modal at any width: it opens
+			// from Enter on a file the host cannot edit (see `core/commands`)
+			// and from `v` below the inline breakpoint (below). While open it
+			// owns the keyboard — Esc or `v` closes it, ⇧O/⇧E act on the file,
+			// everything else is swallowed.
+			if (unwrap(data.viewerOpen)) {
+				if (key?.name === "escape" || (key?.name === "v" && !key.shift)) {
+					data.dispatch("view.toggleViewer")
+				} else if (key?.shift && key?.name === "o") {
+					data.dispatch("file.open", { paneId: unwrap(data.active) })
+				} else if (key?.shift && key?.name === "e") {
+					data.dispatch("file.edit", { paneId: unwrap(data.active) })
+				} else {
+					routePreviewKeys(data, key)
+				}
+				return
+			}
 			if (unwrap(data.confirm)) {
 				const name = key?.name
 				if (name === "y" || name === "return" || name === "enter") data.dispatch("confirm.yes")
@@ -150,41 +206,63 @@ function createBehaviors(env) {
 				return
 			}
 			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)) {
+				// The picker is a sub-mode of the panel: its editable path owns
+				// typing, and the entry list owns navigation once focused.
+				if (unwrap(data.pickerOpen)) {
+					const field = unwrap(data.pickerFocus) === "rows" ? "rows" : "path"
 					if (key?.name === "escape") {
-						data.dispatch("panel.pick.cancel")
+						data.dispatch("picker.cancel")
 						return
 					}
 					if (key?.name === "tab") {
-						data.dispatch("panel.pick.cancel")
+						data.dispatch(field === "path" ? "picker.focusRows" : "picker.focusPath")
+						return
+					}
+					if (field === "path") {
+						// Typing, Backspace and caret movement belong to the path
+						// input. Up/Down hand over to the entries, Enter commits
+						// the typed path.
+						if (key?.name === "up" || key?.name === "down") {
+							data.dispatch("picker.focusRows")
+							return
+						}
+						if (key?.name === "return" || key?.name === "enter") {
+							data.dispatch("picker.path")
+							return
+						}
 						return
 					}
 					if (key?.name === "up") {
-						data.dispatch("panel.pick.up")
+						data.dispatch("picker.up")
 						return
 					}
 					if (key?.name === "down") {
-						data.dispatch("panel.pick.down")
+						data.dispatch("picker.down")
+						return
+					}
+					if (key?.name === "left") {
+						data.dispatch("picker.focusPath")
 						return
 					}
 					if (key?.name === "right") {
-						data.dispatch("panel.pick.descend")
+						data.dispatch("picker.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")
+						// An empty path (the current directory) steps up; a
+						// typed fragment is edited in the path input instead.
+						if (`${unwrap(data.pickerQuery) ?? ""}` === "") data.dispatch("picker.parent")
 						return
 					}
 					if (key?.name === "return" || key?.name === "enter") {
-						data.dispatch(key.ctrl ? "panel.pick.chooseDir" : "panel.pick.enter")
+						data.dispatch(key.ctrl ? "picker.chooseDir" : "picker.enter")
 						return
 					}
-					// Everything else (typing, caret movement) is the filter
-					// input's to handle.
+					// Typing anywhere in the picker narrows the path.
+					const char = key?.name === "space" ? " " : key?.name
+					if (char && char.length === 1 && !key.ctrl && !key.meta) {
+						data.dispatch("picker.type", { char })
+					}
 					return
 				}
 				const focus = unwrap(data.panelFocus)
@@ -225,6 +303,11 @@ function createBehaviors(env) {
 				// it. Intercepting Backspace here used to bounce the cursor
 				// back to the command filter mid-edit.
 				if (fieldOwns) return
+				// A focused permission row: Left/Right walk its r/w/x cells.
+				if ((key?.name === "left" || key?.name === "right") && focus === PANEL_FOCUS.ARGS) {
+					data.dispatch("panel.moveBit", { delta: key.name === "left" ? -1 : 1 })
+					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.
@@ -243,20 +326,14 @@ function createBehaviors(env) {
 				return
 			}
 			if (unwrap(data.bookmarkOpen)) {
-				const mode = unwrap(data.bookmarkMode)
+				// One panel: the filter input owns typing, arrows move the
+				// list, Enter activates the row. Backspace edits the query while
+				// it has text and removes the selected bookmark once it is
+				// empty; Delete always removes.
 				if (key?.name === "escape") {
 					data.dispatch("bookmark.cancel")
 					return
 				}
-				if (mode === "name") {
-					// The input owns typing; Enter saves.
-					if (key?.name === "return" || key?.name === "enter") {
-						self.pub("bookmark:confirm")
-						return
-					}
-					return
-				}
-				// List mode: arrows move, Enter jumps.
 				if (key?.name === "up") {
 					data.dispatch("bookmark.up")
 					return
@@ -265,11 +342,42 @@ function createBehaviors(env) {
 					data.dispatch("bookmark.down")
 					return
 				}
+				if (key?.name === "delete") {
+					data.dispatch("bookmark.remove")
+					return
+				}
+				if (key?.name === "backspace" && !`${unwrap(data.bookmarkQuery) ?? ""}`.trim()) {
+					data.dispatch("bookmark.remove")
+					return
+				}
 				if (key?.name === "return" || key?.name === "enter") {
 					self.pub("bookmark:confirm")
 					return
 				}
-				// Let the focused input handle typing the fuzzy query.
+				// Let the focused input handle typing the filter.
+				return
+			}
+			// The shared list overlay (history / trash) is modal: arrows move,
+			// Enter activates the row (jump in history, restore from trash), Esc
+			// closes. The key that opened it also closes it.
+			if (unwrap(data.overlay)) {
+				const mode = unwrap(data.overlay)
+				if (key?.name === "escape" || (key?.name === "u" && mode === "history") || (key?.name === "t" && key?.shift && mode === "trash")) {
+					data.dispatch("overlay.cancel")
+					return
+				}
+				if (key?.name === "up") {
+					data.dispatch("overlay.up")
+					return
+				}
+				if (key?.name === "down") {
+					data.dispatch("overlay.down")
+					return
+				}
+				if (key?.name === "return" || key?.name === "enter") {
+					data.dispatch("overlay.activate")
+					return
+				}
 				return
 			}
 			const active = unwrap(data.active)
@@ -316,6 +424,17 @@ function createBehaviors(env) {
 					return
 				}
 			}
+			// The maximized inspector (`⇧V`) previews a file full-width: the
+			// arrows scroll and step through files instead of driving the pane
+			// underneath. A directory column keeps its listing navigation.
+			if (unwrap(data.previewFull) && routePreviewKeys(data, key)) return
+			// Below the inline breakpoint the viewer overlay replaces the side
+			// panel, so `v` opens it instead of toggling `showPreview` (⇧V
+			// still maximizes over the columns, via the keymap).
+			if (key?.name === "v" && !key?.shift && isNarrow(data, self)) {
+				data.dispatch("view.toggleViewer")
+				return
+			}
 			const id = matchKeymap(DEFAULT_KEYMAP, key)
 			if (!id) return
 			if (id === "app.quit") {
@@ -329,14 +448,17 @@ function createBehaviors(env) {
 
 // Function: createEvents
 // App event subscriptions, registered with `.sub(...)`. Handlers receive
-// `(self, data, event)` with the published payload in `event.data`. The
-// environment carries the renderer's `quit` hook, so the command bar's Quit
-// entry takes the same path as the `q` key.
-function createEvents(env = {}) {
+// `(self, data, event)` with the published payload in `event.data`.
+function createEvents() {
+	// Last listing row clicked, for the double-click-to-open gesture: a second
+	// click on the same row within `DOUBLE_CLICK_MS` opens it like Enter.
+	let lastRowClick = { paneId: null, index: -1, at: 0 }
 	return {
-		"commandbar:run": (_self, data, event) => {
-			if (event.data === "app.quit") {
-				env.quit?.(_self)
+		"commandbar:run": (self, data, event) => {
+			// Below the inline breakpoint the bar's `[Preview v]` opens the
+			// viewer overlay, the same as the key (see `createBehaviors#keys`).
+			if (event.data === "view.togglePreview" && isNarrow(data, self)) {
+				data.dispatch("view.toggleViewer")
 				return
 			}
 			if (event.data) data.dispatch(event.data)
@@ -344,9 +466,9 @@ function createEvents(env = {}) {
 		"panel:select": (_self, data, event) => {
 			// 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.
+			// (toggling an item); clicking a picker row chooses or navigates it.
 			const items = unwrap(data.panelItems) ?? []
-			const item = items.find((row) => row.id === event.data)
+			const item = items.find((row) => row.key === event.data)
 			if (item?.type === "op") {
 				data.dispatch("panel.setOp", { index: item.entryIndex })
 				return
@@ -356,50 +478,103 @@ function createEvents(env = {}) {
 			const rowIndex = rows.findIndex((row) => row.key === event.data)
 			if (rowIndex < 0) return
 			const row = rows[rowIndex]
-			if (row?.type === "entry") {
+			if (row?.type === "entry" || row?.type === "parent") {
 				data.dispatch("panel.focusArg")
-				data.dispatch("panel.pick.setCursor", { index: rowIndex })
-				data.dispatch("panel.pick.enter")
+				data.dispatch("picker.setCursor", { index: rowIndex })
+				data.dispatch(row.type === "parent" ? "picker.parent" : "picker.enter")
 				return
 			}
+			if (row?.type === "run") {
+				data.dispatch("panel.focusArg")
+				data.dispatch("panel.setRow", { index: rowIndex })
+				data.dispatch("panel.run")
+				return
+			}
+			// A read-only value (a single-path selection, resolved from the
+			// pane) is a path worth copying: clicking it sends the value to the
+			// host clipboard. Copy runs last so its confirmation is not cleared
+			// by the focus dispatches (each dispatch resets the notice).
 			data.dispatch("panel.focusArg")
 			data.dispatch("panel.setRow", { index: rowIndex })
 			if (row?.type === "item") data.dispatch("panel.toggleItem")
+			if (row?.type === "arg" && row.readonly === true && row.summary) {
+				data.dispatch("panel.copy", { text: row.summary })
+			}
 		},
 		"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")
+			if (unwrap(data.pickerOpen)) {
+				data.dispatch("picker.enter")
 				return
 			}
 			data.dispatch("panel.run")
 		},
+		"panel:perm": (_self, data, event) => {
+			// A click on one r/w/x cell: focus its class row, then toggle the
+			// bit. The payload is `argIndex:itemIndex:rowIndex` (see
+			// `core/panel#panelRowList`).
+			const [argIndex, itemIndex, rowIndex] = `${event.data ?? ""}`.split(":").map(Number)
+			if (![argIndex, itemIndex, rowIndex].every(Number.isInteger)) return
+			data.dispatch("panel.focusArg")
+			data.dispatch("panel.setRow", { index: rowIndex })
+			data.dispatch("panel.togglePerm", { argIndex, itemIndex })
+		},
+		"panel:close": (_self, data) => {
+			// The dialog's upper-right close shorthand: back out of the picker
+			// sub-mode first, otherwise close the panel.
+			if (!unwrap(data.panelOpen)) return
+			data.dispatch(unwrap(data.pickerOpen) ? "picker.cancel" : "panel.cancel")
+		},
 		"crumbs:go": (_self, data, event) => {
 			// The "…" truncation marker carries no path.
 			if (!event.data?.path) return
 			data.dispatch("pane.setPath", event.data)
 		},
-		"list:select": (_self, data, event) => data.dispatch("list.cursor", event.data),
+		"list:select": (_self, data, event) => {
+			const paneId = event.data?.paneId
+			const index = event.data?.index
+			const now = Date.now()
+			// A click selects (focus + cursor); a second click on the same row
+			// within the window opens it like Enter. `list.cursor` activates the
+			// pane synchronously, so `pane.enter` then acts on the clicked pane.
+			const isDouble =
+				paneId === lastRowClick.paneId &&
+				index === lastRowClick.index &&
+				now - lastRowClick.at <= DOUBLE_CLICK_MS
+			lastRowClick = { paneId, index, at: isDouble ? 0 : now }
+			data.dispatch("list.cursor", event.data)
+			if (isDouble) data.dispatch("pane.enter", { paneId })
+		},
 		"pane:activate": (_self, data, event) => data.dispatch("pane.activate", { paneId: event.data }),
+		// Clicking the identity bar's view-mode word flips explorer/commander.
+		"view:toggleMode": (_self, data) => data.dispatch("view.toggleMode"),
 		"bookmark:select": (_self, data, event) => {
-			// Clicking a bookmark row selects and jumps to it.
+			// Clicking a bookmark (or the add) row selects and activates it.
 			if (!unwrap(data.bookmarkOpen)) return
 			const items = unwrap(data.bookmarkItems) ?? []
-			const index = items.findIndex((row) => row.name === event.data)
+			const index = items.findIndex((row) => row.key === event.data)
 			if (index < 0) return
 			data.dispatch("bookmark.setIndex", { index })
 			data.dispatch("bookmark.select")
 		},
 		"bookmark:confirm": (_self, data) => {
 			if (!unwrap(data.bookmarkOpen)) return
-			if (unwrap(data.bookmarkMode) === "name") data.dispatch("bookmark.save")
-			else data.dispatch("bookmark.select")
+			data.dispatch("bookmark.select")
+		},
+		"overlay:select": (_self, data, event) => {
+			// Clicking an overlay row moves the cursor to it and activates it.
+			if (!unwrap(data.overlay)) return
+			const rows = unwrap(data.overlayItems) ?? []
+			const index = rows.findIndex((row) => row.key === event.data)
+			if (index < 0) return
+			data.dispatch("overlay.setIndex", { index })
+			data.dispatch("overlay.activate")
 		},
 	}
 }
 
-export { createBehaviors, createEvents, createInit }
+export { createBehaviors, createEvents, createInit, DOUBLE_CLICK_MS }
 
 // EOF