@ssebastien/tcmd 0.1.3 → 0.1.7

package/src/js/tcmd/web/app.js

@@ -9,10 +9,13 @@
 // `tcmd/tui/app.js` for the DOM backend.
 
 import { ui } from "select/ui"
-import { unwrap } from "select/state/cells"
+import { cell, derived, unwrap } from "select/state/cells"
 import appHtml from "../components/App.html" with { type: "text" }
 import { appBehaviors, appEvents, appInit } from "../components/index.js"
 import { registerWebComponents } from "./catalogue.js"
+import { elideCrumbs } from "../components/format.js"
+import { createFrameBehaviors, INSPECTOR_INLINE_WIDTH, paneColumnWidth } from "../components/Frame.js"
+import { connectEffects, isToolbarTarget } from "./effects.js"
 import { webTheme } from "./theme.js"
 
 // Map DOM key names to the core keymap chord names.
@@ -45,108 +48,289 @@ function normalizeKey(event) {
 // Child data keeps the session cells (as `in:` slots do in the TUI), so the
 // child instances subscribe and update granularly; behaviors read cells with
 // `unwrap` at the point of use.
+
+// The classes one pane column carries: focus (`is-active`) and, in explorer
+// mode, the extra width of the middle (`is-major`) column.
+function paneClass(data, paneId) {
+	const active = unwrap(data.active) === paneId
+	const major = unwrap(data.viewMode) === "explorer" && `${unwrap(data.currentId)}` === paneId
+	return [active && webTheme.activeClass, major && "is-major"].filter(Boolean).join(" ") || null
+}
+
 function webViewBehaviors() {
 	return {
-		headerView: (_self, data) => ({ host: data.appHost, path: data.appPath }),
+		// The view mode as an app-level class (`is-explorer` / `is-commander`),
+		// so the CSS can tint the active pane per mode (blue/gold).
+		appModeClass: (_self, data) => [
+			`is-${unwrap(data.viewMode) === "explorer" ? "explorer" : "commander"}`,
+			unwrap(data.desktopMode) ? "is-desktop" : null,
+		].filter(Boolean).join(" "),
+		headerView: (_self, data) => ({ host: data.appHost, path: data.appPath, mode: data.viewMode }),
+		desktopViewLabel: (_self, data) => unwrap(data.viewMode) === "explorer" ? "Explorer" : "Commander",
+		desktopPreviewLabel: (_self, data) => unwrap(data.showPreview) ? "Hide preview" : "Show preview",
 		bookmarkView: (_self, data) => ({
 			items: data.bookmarkItems,
-			mode: data.bookmarkMode,
 			open: data.bookmarkOpen,
 			query: data.bookmarkQuery,
 			selected: data.bookmarkIndex,
-			target: data.bookmarkTarget,
 		}),
 		commandBarView: (_self, data) => ({
 			items: data.commandBarItems,
+			desktopMode: data.desktopMode,
 			leftError: data.leftError,
 			notice: data.notice,
 			rightError: data.rightError,
+			active: data.active,
+			leftMarked: data.leftMarked,
+			rightMarked: data.rightMarked,
+			uiSize: data.uiSize,
 		}),
 		confirmView: (_self, data) => ({ confirm: data.confirm }),
 		leftCrumbsView: (_self, data) => ({
 			segments: data.leftSegments,
 			paneId: data.leftId,
 		}),
-		leftDetailView: (_self, data) => ({ entry: data.leftEntry, marked: data.leftMarked }),
+		leftDetailView: (_self, data) => ({ entry: data.leftEntry, marked: data.leftMarked, width: data.paneWidth }),
 		leftFilterView: (_self, data) => ({
 			query: data.leftFilter,
 			paneId: data.leftId,
 			filtering: data.filtering,
 			entries: data.leftEntries,
+			setFilter: data.leftSetFilter,
 		}),
-		leftLabelView: (_self, data) => ({ paneId: data.leftId, active: data.active }),
 		leftListView: (_self, data) => ({
 			entries: data.leftEntries,
 			cursor: data.leftCursor,
 			marked: data.leftMarked,
 			paneId: data.leftId,
+			active: data.leftActive,
+			loading: data.leftLoading,
 		}),
-		leftPaneClass: (_self, data) => (unwrap(data.active) === "left" ? webTheme.activeClass : null),
-		leftSummaryView: (_self, data) => ({
-			entries: data.leftEntries,
-			disk: data.leftDisk,
+		leftPaneClass: (_self, data) => paneClass(data, "left"),
+		// The explorer's first column: the parent of the current directory,
+		// a full pane of its own (header, filter, listing, detail).
+		parentCrumbsView: (_self, data) => ({
+			segments: data.parentSegments,
+			paneId: data.parentId,
+		}),
+		parentDetailView: (_self, data) => ({
+			entry: data.parentEntry,
+			marked: data.parentMarked,
+			width: data.paneWidth,
+		}),
+		parentFilterView: (_self, data) => ({
+			query: data.parentFilter,
+			paneId: data.parentId,
+			filtering: data.filtering,
+			entries: data.parentEntries,
+			setFilter: data.parentSetFilter,
+		}),
+		parentListView: (_self, data) => ({
+			entries: data.parentEntries,
+			cursor: data.parentCursor,
+			marked: data.parentMarked,
+			paneId: data.parentId,
+			active: data.parentActive,
+			loading: data.parentLoading,
 		}),
-		paletteView: (_self, data) => ({
-			// Cells pass through (as `in:` slots do in the TUI); `query` is written
-			// back by the input's `inout` two-way binding.
-			items: data.paletteItems,
-			mode: data.paletteMode,
-			open: data.paletteOpen,
-			query: data.paletteQuery,
-			selected: data.paletteIndex,
+		parentPaneClass: (_self, data) => paneClass(data, "parent"),
+		panelView: (_self, data) => ({
+			// Cells pass through (as `in:` slots do in the TUI); `query`/`value`
+			// are written back by the inputs' `inout` two-way bindings.
+			open: data.panelOpen,
+			entry: data.panelEntry,
+			items: data.panelItems,
+			opCursor: data.panelOpIndex,
+			rows: data.panelRows,
+			argCursor: data.panelRowIndex,
+			focus: data.panelFocus,
+			preview: data.panelPreview,
+			picking: data.pickerOpen,
+			pickerPathText: data.pickerPathText,
+			pickerFocus: data.pickerFocus,
+			pickerRows: data.pickerRows,
+			query: data.panelQuery,
+			value: data.panelValue,
+		}),
+		helpView: (_self, data) => ({ open: data.helpOpen }),
+		overlayView: (_self, data) => ({
+			open: data.overlay,
+			mode: data.overlay,
+			items: data.overlayItems,
+			cursor: data.overlayIndex,
 		}),
 		previewView: (_self, data) => ({
 			preview: data.preview,
-			show: data.showPreview,
+			show: true,
+			entry: data.appEntry,
+			paneId: data.previewId,
+			// The directory column: the inspector pane's own listing, so a
+			// previewed directory reads and behaves like a pane.
+			dirSegments: data.previewSegments,
+			dirEntries: data.previewEntries,
+			dirCursor: data.previewCursor,
+			dirMarked: data.previewMarked,
+			dirActive: data.previewActive,
+			dirLoading: data.previewLoading,
 		}),
 		rightCrumbsView: (_self, data) => ({
 			segments: data.rightSegments,
 			paneId: data.rightId,
 		}),
-		rightDetailView: (_self, data) => ({ entry: data.rightEntry, marked: data.rightMarked }),
+		rightDetailView: (_self, data) => ({ entry: data.rightEntry, marked: data.rightMarked, width: data.paneWidth }),
 		rightFilterView: (_self, data) => ({
 			query: data.rightFilter,
 			paneId: data.rightId,
 			filtering: data.filtering,
 			entries: data.rightEntries,
+			setFilter: data.rightSetFilter,
 		}),
-		rightLabelView: (_self, data) => ({ paneId: data.rightId, active: data.active }),
 		rightListView: (_self, data) => ({
 			entries: data.rightEntries,
 			cursor: data.rightCursor,
 			marked: data.rightMarked,
 			paneId: data.rightId,
+			active: data.rightActive,
+			loading: data.rightLoading,
 		}),
-		rightPaneClass: (_self, data) => (unwrap(data.active) === "right" ? webTheme.activeClass : null),
-		rightSummaryView: (_self, data) => ({
-			entries: data.rightEntries,
-			disk: data.rightDisk,
-		}),
+		rightPaneClass: (_self, data) => paneClass(data, "right"),
 	}
 }
 
 // Function: createWebApp
 // Builds the root App component for `session` on the web presentation.
-function createWebApp(session) {
+function createWebApp(session, options = {}) {
 	registerWebComponents()
-	// The command panel is a TUI-only view; disable it so no web dispatch path
-	// (key, palette, command bar) opens an invisible modal, and drop its
-	// palette entries (`:` and `m` both fall back to the script palette).
-	session.panelEnabled?.set(false)
-	const palette = session.paletteCommands?.value
-	if (palette) {
-		session.paletteCommands.set(palette.filter((row) => row.id !== "panel.toggle" && row.id !== "panel.open"))
-	}
+	const size = options.size ?? cell({ width: 0, height: 0 })
+	const help = cell(false)
+	// The fullscreen inspector overlay lives in the session (core), so a
+	// command — Enter on a file that cannot be edited — can open it; the shared
+	// controller routes its keys (`components/App#createBehaviors`).
+	const viewer = session.viewerOpen
+	const paneWidth = derived([size, session.showPreview], ([value, show]) => {
+		if (!value.width) return 0
+		const columns = show && value.width >= INSPECTOR_INLINE_WIDTH ? 3 : 2
+		return Math.max(1, Math.floor(value.width / columns) - 4)
+	})
+	// Breadcrumb budgets follow each pane's OWN share of the row (explorer
+	// grows the current column, so its mirrors are narrower than an even
+	// split), or the crumbs overflow the narrower columns.
+	const crumbWidth = (paneId) =>
+		derived([size, session.showPreview, session.viewMode, session.currentId], ([value, showPreview, viewMode, currentId]) => {
+			const columns = paneColumnWidth(value?.width, paneId, { viewMode, currentId, showPreview })
+			return columns > 0 ? Math.max(1, columns - 4) : 0
+		})
+	const crumbs = (paneId, pane) =>
+		derived([pane.segments, crumbWidth(paneId)], ([segments, width]) => elideCrumbs(segments, width))
+	const quit = options.onQuit ?? ((self) => self.unmount?.())
+	// DOM inputs have no native `enter` event; the root routes Enter for them.
+	const baseKeys = appBehaviors({ normalizeKey, quit }).keys
+	const events = appEvents()
 	return ui(appHtml)
-		.init(appInit(session))
+		.init((self) => {
+			// The panel's Quit command reaches the host through this hook.
+			session.quit = () => quit(self)
+			return {
+				...appInit(session)(),
+				desktopMode: Boolean(options.desktopMode),
+				uiSize: size,
+				helpOpen: help,
+				viewerOpen: viewer,
+				paneWidth,
+				leftSegments: crumbs("left", session.panes.left),
+				parentSegments: crumbs("parent", session.panes.parent),
+				rightSegments: crumbs("right", session.panes.right),
+				previewSegments: crumbs("preview", session.panes.preview),
+			}
+		})
 		.does({
-			...appBehaviors({
-				normalizeKey,
-				quit: (self) => self.unmount?.(),
-			}),
+			...createFrameBehaviors({ theme: webTheme }),
 			...webViewBehaviors(),
+			minSizeTitle: () => "Window too small",
+			"effects!": (self) => {
+				if (!self._effects) self.effect(() => {
+					self._effects = connectEffects(session, self.ref.root, { size, help, viewer })
+					return () => self._effects.dispose()
+				})
+				self._effects.schedule()
+			},
+			keys: (self, data, event) => {
+				if (event.isComposing) return
+				const busy = unwrap(data.confirm) || unwrap(data.bookmarkOpen) || unwrap(data.panelOpen) || unwrap(data.filtering) || unwrap(data.overlay)
+				if (event.key === "F6" && unwrap(data.desktopMode) && !busy && !help.value && !viewer.value) {
+					event.preventDefault()
+					const target = isToolbarTarget(event.target) ? self.ref.root : self.ref.root.querySelector(".desktop-toolbar button")
+					target?.focus({ preventScroll: true })
+					return
+				}
+				// Native controls own their activation and traversal keys, not the
+				// pane underneath them. Escape hands focus back to the workspace.
+				if (isToolbarTarget(event.target)) {
+					if (event.key === "Escape") {
+						event.preventDefault()
+						self.ref.root.focus({ preventScroll: true })
+					}
+					return
+				}
+				const key = normalizeKey(event)
+				if (help.value) {
+					if (["escape", "q", "?"].includes(key.name)) help.set(false)
+					return
+				}
+				if (!busy && key.name === "?") {
+					help.set(true)
+					return
+				}
+				// The viewer overlay and the narrow-`v` shortcut are shared
+				// modal routing, handled by `components/App#createBehaviors`.
+				return baseKeys(self, data, event)
+			},
+			dialogStop: (_self, _data, event) => event.stopPropagation(),
+		})
+		.sub({
+			...events,
+			"dialog:panel-cancel": (_self, data) => {
+				if (!unwrap(data.desktopMode)) return
+				data.dispatch(unwrap(data.pickerOpen) ? "picker.cancel" : "panel.cancel")
+			},
+			"dialog:bookmark-cancel": (_self, data) => {
+				if (unwrap(data.desktopMode)) data.dispatch("bookmark.cancel")
+			},
+			"dialog:overlay-cancel": (_self, data) => {
+				if (unwrap(data.desktopMode)) data.dispatch("overlay.cancel")
+			},
+			"dialog:confirm-cancel": (_self, data) => {
+				if (unwrap(data.desktopMode)) data.dispatch("confirm.no")
+			},
+			"dialog:help-cancel": (_self, data) => {
+				if (unwrap(data.desktopMode)) help.set(false)
+			},
+			"dialog:viewer-cancel": (_self, data) => {
+				if (unwrap(data.desktopMode)) data.dispatch("view.toggleViewer")
+			},
+			"toolbar:open-folder": async () => {
+				try {
+					await options.onOpenFolder?.()
+				} catch (error) {
+					await options.onError?.(error)
+				}
+			},
+			"toolbar:back": (_self, data) => data.dispatch("pane.back"),
+			"toolbar:forward": (_self, data) => data.dispatch("pane.forward"),
+			"toolbar:up": (_self, data) => data.dispatch("pane.up"),
+			"toolbar:refresh": (_self, data) => data.dispatch("pane.reload"),
+			"toolbar:toggle-mode": (_self, data) => data.dispatch("view.toggleMode"),
+			"toolbar:toggle-preview": (_self, data) => data.dispatch("view.togglePreview"),
+			"toolbar:commands": (_self, data) => data.dispatch("panel.open"),
+			"toolbar:help": () => help.set(true),
+			"commandbar:run": (self, data, event) => {
+				if (event.data === "app.help") {
+					help.set(!help.value)
+					return
+				}
+				events["commandbar:run"](self, data, event)
+			},
 		})
-		.sub(appEvents({ quit: (self) => self.unmount?.() }))
 }
 
 export { createWebApp, normalizeKey }

package/src/js/tcmd/web/bookmarks.js

@@ -0,0 +1,36 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-13
+
+// Module: tcmd/web/bookmarks
+// The `core/bookmarks` store contract backed by localStorage
+// (`createWebBookmarkStore`, the web twin of the TUI's
+// `createFileBookmarkStore`). Backend/root namespaces keep browser-private and
+// host-filesystem paths apart. Persistence is best-effort, just like the TUI
+// store (private browsing may deny storage).
+
+// Function: createWebBookmarkStore
+function createWebBookmarkStore({ mode, root, storage } = {}) {
+	const key = JSON.stringify(["tcmd.bookmarks", mode, root])
+	return {
+		async load() {
+			try {
+				return JSON.parse((storage ?? globalThis.localStorage).getItem(key) ?? "{}")
+			} catch {
+				return {}
+			}
+		},
+		async save(map) {
+			try {
+				(storage ?? globalThis.localStorage).setItem(key, JSON.stringify(map))
+			} catch {
+				// Keep in-memory bookmarks usable when persistent storage is denied.
+			}
+		},
+	}
+}
+
+export { createWebBookmarkStore }
+
+// EOF

package/src/js/tcmd/web/catalogue.js

@@ -13,20 +13,27 @@
 // presentation bind the same source (`Breadcrumbs` uses `RowList.html`).
 
 import { ui } from "select/ui"
+import { unwrap } from "select/state/cells"
 import bookmarkListHtml from "../components/BookmarkList.html" with { type: "text" }
 import bookmarkRowHtml from "../components/BookmarkRow.html" with { type: "text" }
 import commandBarHtml from "../components/CommandBar.html" with { type: "text" }
+import commandArgRowHtml from "../components/CommandArgRow.html" with { type: "text" }
+import commandPanelHtml from "../components/CommandPanel.html" with { type: "text" }
 import commandItemHtml from "../components/CommandItem.html" with { type: "text" }
-import commandPaletteHtml from "../components/CommandPalette.html" with { type: "text" }
 import confirmHtml from "../components/Confirm.html" with { type: "text" }
 import crumbHtml from "../components/Crumb.html" with { type: "text" }
 import entryDetailHtml from "../components/EntryDetail.html" with { type: "text" }
 import fileListHtml from "../components/FileList.html" with { type: "text" }
+import filePickerHtml from "../components/FilePicker.html" with { type: "text" }
+import filePickerRowHtml from "../components/FilePickerRow.html" with { type: "text" }
 import filePreviewHtml from "../components/FilePreview.html" with { type: "text" }
 import fileRowHtml from "../components/FileRow.html" with { type: "text" }
 import filterBarHtml from "../components/FilterBar.html" with { type: "text" }
+import helpHtml from "../components/Help.html" with { type: "text" }
+import helpRowHtml from "../components/HelpRow.html" with { type: "text" }
 import headerHtml from "./header.html" with { type: "text" }
-import paletteRowHtml from "../components/PaletteRow.html" with { type: "text" }
+import overlayListHtml from "../components/OverlayList.html" with { type: "text" }
+import overlayRowHtml from "../components/OverlayRow.html" with { type: "text" }
 import rowListHtml from "../components/RowList.html" with { type: "text" }
 import summaryHtml from "../components/Summary.html" with { type: "text" }
 
@@ -37,67 +44,75 @@ import {
 	bookmarkRows,
 	breadcrumbsBehaviors,
 	commandBarBehaviors,
+	commandBarFit,
+	commandBarMarksItem,
+	commandArgRowBehaviors,
 	commandItemBehaviors,
 	commandItemRows,
-	commandPaletteBehaviors,
+	commandPanelBehaviors,
 	confirmBehaviors,
 	crumbBehaviors,
 	crumbRows,
 	entryDetailBehaviors,
 	fileListBehaviors,
+	filePickerBehaviors,
+	filePickerRowBehaviors,
+	filePickerRows,
 	filePreviewBehaviors,
 	fileRowBehaviors,
 	fileRows,
 	filterBarBehaviors,
-	paletteRowBehaviors,
-	paletteRows,
+	helpBehaviors,
+	helpRowBehaviors,
+	helpRows,
+	overlayListBehaviors,
+	overlayRowBehaviors,
+	overlayRows,
+	panelArgRows,
+	panelOpRows,
+	panelRunRows,
 	summaryBehaviors,
 } from "../components/index.js"
 import { createBehaviors as headerBehaviors } from "./header.js"
+import { columnWidth } from "./effects.js"
 import { webTheme } from "./theme.js"
 
 let registered = false
 
-// Advance width of one monospace cell, cached from the header's computed font.
-let charWidth = 0
+// Function: paneWidth
+// Reading the injected width cell keeps fitting reactive on pure resizes.
+function paneWidth(self, data) {
+	const width = unwrap(data.width) ?? 0
+	return columnWidth(self.ref.box) || width
+}
 
-// Function: columnWidth
-// Columns available in `el`, measured from the monospace advance width. Returns
-// 0 when the DOM cannot measure (happy-dom, no layout), disabling compression.
-// ponytail: measured per render; a pure viewport resize waits for the next one.
-function columnWidth(el) {
-	const px = el?.clientWidth || el?.ownerDocument?.defaultView?.innerWidth || 0
-	if (!px) return 0
-	const view = el.ownerDocument?.defaultView
-	if (!view) return 0
-	if (!charWidth) {
-		try {
-			const ctx = el.ownerDocument.createElement("canvas").getContext("2d")
-			const style = view.getComputedStyle(el)
-			ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
-			charWidth = ctx.measureText("0").width || 0
-		} catch {
-			return 0
-		}
-	}
-	return charWidth ? Math.floor(px / charWidth) : 0
+function elide(text, width) {
+	return width > 0 && text.length > width ? `${text.slice(0, Math.max(0, width - 1))}…` : text
 }
 
 // Function: createComponents
 // Binds every shared component to its `.html` presentation.
 function createComponents() {
 	const commandItem = bind(ui, "CommandItem", commandItemHtml, commandItemBehaviors(webTheme))
+	// Keep command namespace markers textual; the bundled Nerd face is reserved
+	// for filesystem names and paths.
+	const commandArgRow = bind(ui, "CommandArgRow", commandArgRowHtml, commandArgRowBehaviors({
+		...webTheme,
+		icons: false,
+	}))
 	const crumb = bind(ui, "Crumb", crumbHtml, crumbBehaviors(webTheme))
 	const fileRow = bind(ui, "FileRow", fileRowHtml, fileRowBehaviors(webTheme))
+	const filePickerRow = bind(ui, "FilePickerRow", filePickerRowHtml, filePickerRowBehaviors(webTheme))
 	const filterBar = bind(ui, "FilterBar", filterBarHtml, filterBarBehaviors(webTheme))
-	const paletteRow = bind(ui, "PaletteRow", paletteRowHtml, paletteRowBehaviors(webTheme))
 	const bookmarkRow = bind(ui, "BookmarkRow", bookmarkRowHtml, bookmarkRowBehaviors(webTheme))
+	const overlayRow = bind(ui, "OverlayRow", overlayRowHtml, overlayRowBehaviors(webTheme))
+	const helpRow = bind(ui, "HelpRow", helpRowHtml, helpRowBehaviors({ theme: webTheme }))
 	return {
 		BookmarkRow: bookmarkRow,
 		CommandItem: commandItem,
+		CommandArgRow: commandArgRow,
 		Crumb: crumb,
 		FileRow: fileRow,
-		PaletteRow: paletteRow,
 		Breadcrumbs: bind(ui, "Breadcrumbs", rowListHtml, breadcrumbsBehaviors({
 			...webTheme,
 			listClass: "breadcrumbs",
@@ -110,25 +125,50 @@ function createComponents() {
 		CommandBar: bind(ui, "CommandBar", commandBarHtml, commandBarBehaviors({
 			...webTheme,
 			listClass: "command-bar-keys",
-			rows: commandItemRows(commandItem),
+			rows: (self, data) => {
+				const viewport = unwrap(data.uiSize)
+				const viewportWidth = Math.floor(viewport?.width ?? 0)
+				// The measured box is exact but still shows the previous width on
+				// the frame a resize arrives; prefer the injected viewport then.
+				const width = viewportWidth > 0 ? viewportWidth - 1 : columnWidth(self.ref.box)
+				const marks = commandBarMarksItem(data)
+				const items = unwrap(data.items) ?? []
+				return commandItemRows(commandItem)(self, {
+					...data,
+					items: commandBarFit(marks ? [...items, marks] : items, width),
+				})
+			},
 		})),
-		CommandPalette: bind(ui, "CommandPalette", commandPaletteHtml, commandPaletteBehaviors({
+		CommandPanel: bind(ui, "CommandPanel", commandPanelHtml, commandPanelBehaviors({
 			...webTheme,
-			rows: paletteRows(paletteRow),
+			opRows: panelOpRows(commandArgRow),
+			argRows: panelArgRows(commandArgRow),
+			runRows: panelRunRows(commandArgRow),
 		})),
 		Confirm: bind(ui, "Confirm", confirmHtml, confirmBehaviors(webTheme)),
-		EntryDetail: bind(ui, "EntryDetail", entryDetailHtml, entryDetailBehaviors(webTheme)),
+		EntryDetail: bind(ui, "EntryDetail", entryDetailHtml, entryDetailBehaviors({ ...webTheme, width: paneWidth, elide })),
 		FileList: bind(ui, "FileList", fileListHtml, fileListBehaviors({
 			...webTheme,
 			rows: fileRows(fileRow),
 		})),
-		FilePreview: bind(ui, "FilePreview", filePreviewHtml, filePreviewBehaviors(webTheme)),
+		FilePicker: bind(ui, "FilePicker", filePickerHtml, filePickerBehaviors({
+			...webTheme,
+			rows: filePickerRows(filePickerRow),
+		})),
+		FilePreview: bind(ui, "FilePreview", filePreviewHtml, filePreviewBehaviors({
+			...webTheme,
+			// Open/edit/run are TUI-only: the browser says so instead of
+			// advertising keys it cannot honour.
+			actions: () => " Open / edit are unavailable in the browser",
+		})),
 		FilterBar: filterBar,
-		Header: bind(ui, "Header", headerHtml, headerBehaviors({
+		Help: bind(ui, "Help", helpHtml, helpBehaviors({ theme: webTheme, rows: helpRows(helpRow) })),
+		Header: bind(ui, "Header", headerHtml, headerBehaviors(webTheme)),
+		OverlayList: bind(ui, "OverlayList", overlayListHtml, overlayListBehaviors({
 			...webTheme,
-			width: (self) => columnWidth(self.ref.box),
+			rows: overlayRows(overlayRow),
 		})),
-		Summary: bind(ui, "Summary", summaryHtml, summaryBehaviors(webTheme)),
+		Summary: bind(ui, "Summary", summaryHtml, summaryBehaviors({ ...webTheme, width: paneWidth, elide })),
 	}
 }
 
@@ -143,13 +183,16 @@ function registerWebComponents() {
 	ui.format("Breadcrumbs", components.Breadcrumbs)
 	ui.format("BookmarkList", components.BookmarkList)
 	ui.format("CommandBar", components.CommandBar)
-	ui.format("CommandPalette", components.CommandPalette)
+	ui.format("CommandPanel", components.CommandPanel)
 	ui.format("Confirm", components.Confirm)
 	ui.format("EntryDetail", components.EntryDetail)
 	ui.format("FileList", components.FileList)
+	ui.format("FilePicker", components.FilePicker)
 	ui.format("FilePreview", components.FilePreview)
 	ui.format("FilterBar", components.FilterBar)
 	ui.format("Header", components.Header)
+	ui.format("Help", components.Help)
+	ui.format("OverlayList", components.OverlayList)
 	ui.format("Summary", components.Summary)
 	return components
 }