@ssebastien/tcmd 0.1.4 → 0.1.7

package/src/js/tcmd/vendor/bzip2.js

@@ -0,0 +1,276 @@
+// Project: TinyCommand
+// Vendored dependency
+//
+// Module: tcmd/vendor/bzip2
+// bzip2.js — a small bzip2 decompression implementation.
+//
+// Source: https://github.com/antimatter15/bzip2.js (bzip2.js)
+// Author: antimatter15
+// License: MIT
+//
+// Vendored verbatim (only this header and the trailing export were added) so
+// TinyCommand can preview `.bz2` files without adding a runtime dependency.
+// `array` wraps the bytes in a bit reader; `header` returns the block size and
+// `decompress` decodes one block, returning `-1` on the stream terminator.
+// Decoded output is a binary string (one char code per byte), so callers must
+// decode it as UTF-8 themselves.
+//
+// MIT License
+//
+// Copyright (c) 2011 by antimatter15 (antimatter15@gmail.com).
+//
+// Permission is hereby granted, free of charge, to any person obtaining a
+// copy of this software and associated documentation files (the "Software"),
+// to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense,
+// and/or sell copies of the Software, and to permit persons to whom the
+// Software is furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+// IN THE SOFTWARE.
+
+var bzip2 = {};
+
+bzip2.array = function(bytes){
+  var bit = 0, byte = 0;
+  var BITMASK = [0, 0x01, 0x03, 0x07, 0x0F, 0x1F, 0x3F, 0x7F, 0xFF ];
+  return function(n){
+    var result = 0;
+    while(n > 0){
+      var left = 8 - bit;
+      if(n >= left){
+        result <<= left;
+        result |= (BITMASK[left] & bytes[byte++]);
+        bit = 0;
+        n -= left;
+      }else{
+        result <<= n;
+        result |= ((bytes[byte] & (BITMASK[n] << (8 - n - bit))) >> (8 - n - bit));
+        bit += n;
+        n = 0;
+      }
+    }
+    return result
+  }
+}
+
+bzip2.simple = function(bits){
+  var size = bzip2.header(bits);
+  var all = '', chunk = '';
+  do{
+    all += chunk;
+    chunk = bzip2.decompress(bits, size);
+  }while(chunk != -1);
+  return all;
+}
+
+bzip2.header = function(bits){
+  if(bits(8*3) != 4348520) throw "No magic number found";
+  var i = bits(8) - 48;
+  if(i < 1 || i > 9) throw "Not a BZIP archive";
+  return i;
+};
+
+
+//takes a function for reading the block data (starting with 0x314159265359)
+//a block size (0-9) (optional, defaults to 9)
+//a length at which to stop decompressing and return the output
+bzip2.decompress = function(bits, size, len){
+  var MAX_HUFCODE_BITS = 20;
+  var MAX_SYMBOLS = 258;
+  var SYMBOL_RUNA = 0;
+  var SYMBOL_RUNB = 1;
+  var GROUP_SIZE = 50;
+  
+  var bufsize = 100000 * size;
+  for(var h = '', i = 0; i < 6; i++) h += bits(8).toString(16);
+  if(h == "177245385090") return -1; //last block
+  if(h != "314159265359") throw "eek not valid bzip data";
+  bits(32); //ignore CRC codes
+  if(bits(1)) throw "unsupported obsolete version";
+  var origPtr = bits(24);
+  if(origPtr > bufsize) throw "Initial position larger than buffer size";
+  var t = bits(16);
+  var symToByte = new Uint8Array(256), 
+      symTotal = 0;
+  for (i = 0; i < 16; i++) {
+    if(t & (1 << (15 - i))) {
+      var k = bits(16);
+      for(j = 0; j < 16; j++){
+        if(k & (1 << (15 - j))){
+          symToByte[symTotal++] = (16 * i) + j;
+        }
+      }
+    }
+  }
+
+  var groupCount = bits(3);
+  if(groupCount < 2 || groupCount > 6) throw "another error";
+  var nSelectors = bits(15);
+  if(nSelectors == 0) throw "meh";
+  var mtfSymbol = []; //TODO: possibly replace JS array with typed arrays
+  for(var i = 0; i < groupCount; i++) mtfSymbol[i] = i;
+  var selectors = new Uint8Array(32768);
+  
+  for(var i = 0; i < nSelectors; i++){
+    for(var j = 0; bits(1); j++) if(j >= groupCount) throw "whoops another error"; 
+    var uc = mtfSymbol[j];
+    mtfSymbol.splice(j, 1); //this is a probably inefficient MTF transform
+    mtfSymbol.splice(0, 0, uc);
+    selectors[i] = uc;
+  }
+  
+  var symCount = symTotal + 2;
+  var groups = [];
+  for(var j = 0; j < groupCount; j++){
+    var length = new Uint8Array(MAX_SYMBOLS), 
+        temp = new Uint8Array(MAX_HUFCODE_BITS+1);
+    t = bits(5); //lengths
+    for(var i = 0; i < symCount; i++){
+      while(true){
+        if (t < 1 || t > MAX_HUFCODE_BITS) throw "I gave up a while ago on writing error messages";
+        if(!bits(1)) break;
+        if(!bits(1)) t++;
+        else t--;
+      }
+      length[i] = t;
+    }
+    var  minLen,  maxLen;
+    minLen = maxLen = length[0];
+    for(var i = 1; i < symCount; i++){
+      if(length[i] > maxLen) maxLen = length[i];
+      else if(length[i] < minLen) minLen = length[i];
+    }
+    var hufGroup;
+    hufGroup = groups[j] = {};
+    hufGroup.permute = new Uint32Array(MAX_SYMBOLS);
+    hufGroup.limit = new Uint32Array(MAX_HUFCODE_BITS + 1);
+    hufGroup.base = new Uint32Array(MAX_HUFCODE_BITS + 1);
+    hufGroup.minLen = minLen;
+    hufGroup.maxLen = maxLen;
+    var base = hufGroup.base.subarray(1);
+    var limit = hufGroup.limit.subarray(1);
+    var pp = 0;
+    for(var i = minLen; i <= maxLen; i++)
+      for(var t = 0; t < symCount; t++) 
+      if(length[t] == i) hufGroup.permute[pp++] = t;
+      for(i = minLen; i <= maxLen; i++) temp[i] = limit[i] = 0;
+      for(i = 0; i < symCount; i++) temp[length[i]]++;
+      pp = t = 0;
+      for(i = minLen; i < maxLen; i++) {
+        pp += temp[i];
+        limit[i] = pp - 1;
+        pp <<= 1;
+        base[i+1] = pp - (t += temp[i]);
+      }
+      limit[maxLen]=pp+temp[maxLen]-1;
+      base[minLen]=0;
+  }
+  var byteCount = new Uint32Array(256);
+  for(var i = 0; i < 256; i++) mtfSymbol[i] = i;
+  var runPos, count, symCount, selector;
+  runPos = count = symCount = selector = 0;
+  var buf = new Uint32Array(bufsize);
+  while(true){
+    if(!(symCount--)){
+      symCount = GROUP_SIZE - 1;
+      if(selector >= nSelectors) throw "meow i'm a kitty, that's an error";
+      hufGroup = groups[selectors[selector++]];
+      base = hufGroup.base.subarray(1);
+      limit = hufGroup.limit.subarray(1);
+    }
+    i = hufGroup.minLen;
+    j = bits(i);
+    while(true){
+      if(i > hufGroup.maxLen) throw "rawr i'm a dinosaur";
+      if(j <= limit[i]) break;
+      i++;
+      j = (j << 1) | bits(1);
+    }
+    j -= base[i];
+    if(j < 0 || j >= MAX_SYMBOLS) throw "moo i'm a cow";
+    var nextSym = hufGroup.permute[j];
+    if (nextSym == SYMBOL_RUNA || nextSym == SYMBOL_RUNB) {
+      if(!runPos){
+        runPos = 1;
+        t = 0;
+      }
+      if(nextSym == SYMBOL_RUNA) t += runPos;
+      else t += 2 * runPos;
+      runPos <<= 1;
+      continue;
+    }
+    if(runPos){
+      runPos = 0;
+      if(count + t >= bufsize) throw "Boom.";
+      uc = symToByte[mtfSymbol[0]];
+      byteCount[uc] += t;
+      while(t--) buf[count++] = uc;
+    }
+    if(nextSym > symTotal) break;
+    if(count >= bufsize) throw "I can't think of anything. Error";
+    i = nextSym -1;
+    uc = mtfSymbol[i];
+    mtfSymbol.splice(i, 1);
+    mtfSymbol.splice(0, 0, uc);
+    uc = symToByte[uc];
+    byteCount[uc]++;
+    buf[count++] = uc;
+  }
+  if(origPtr < 0 || origPtr >= count) throw "I'm a monkey and I'm throwing something at someone, namely you";
+  var j = 0;
+  for(var i = 0; i < 256; i++){
+    k = j + byteCount[i];
+    byteCount[i] = j;
+    j = k;
+  }
+  for(var i = 0; i < count; i++){
+    uc = buf[i] & 0xff;
+    buf[byteCount[uc]] |= (i << 8);
+    byteCount[uc]++;
+  }
+  var pos = 0, current = 0, run = 0;
+  if(count) {
+    pos = buf[origPtr];
+    current = (pos & 0xff);
+    pos >>= 8;
+    run = -1;
+  }
+  count = count;
+  var output = '';
+  var copies, previous, outbyte;
+  if(!len) len = Infinity;
+  while(count){
+    count--;
+    previous = current;
+    pos = buf[pos];
+    current = pos & 0xff;
+    pos >>= 8;
+    if(run++ == 3){
+      copies = current;
+      outbyte = previous;
+      current = -1;
+    }else{
+      copies = 1;
+      outbyte = current;
+    }
+    while(copies--){
+      output += (String.fromCharCode(outbyte));
+      if(!--len) return output;
+    }
+    if(current != previous) run = 0;
+  }
+  return output;
+}
+
+export { bzip2 }
+
+// EOF

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

@@ -14,8 +14,8 @@ 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, isNarrow } from "../components/Frame.js"
-import { connectEffects } from "./effects.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.
@@ -59,23 +59,31 @@ function paneClass(data, paneId) {
 
 function webViewBehaviors() {
 	return {
+		// 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) => ({
@@ -99,13 +107,8 @@ function webViewBehaviors() {
 			loading: data.leftLoading,
 		}),
 		leftPaneClass: (_self, data) => paneClass(data, "left"),
-		leftSummaryView: (_self, data) => ({
-			entries: data.leftEntries,
-			disk: data.leftDisk,
-			width: data.paneWidth,
-		}),
 		// The explorer's first column: the parent of the current directory,
-		// a full pane of its own (header, filter, listing, detail, summary).
+		// a full pane of its own (header, filter, listing, detail).
 		parentCrumbsView: (_self, data) => ({
 			segments: data.parentSegments,
 			paneId: data.parentId,
@@ -131,11 +134,6 @@ function webViewBehaviors() {
 			loading: data.parentLoading,
 		}),
 		parentPaneClass: (_self, data) => paneClass(data, "parent"),
-		parentSummaryView: (_self, data) => ({
-			entries: data.parentEntries,
-			disk: data.parentDisk,
-			width: data.paneWidth,
-		}),
 		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.
@@ -145,17 +143,22 @@ function webViewBehaviors() {
 			opCursor: data.panelOpIndex,
 			rows: data.panelRows,
 			argCursor: data.panelRowIndex,
-			labelWidth: data.panelLabelWidth,
 			focus: data.panelFocus,
-			command: data.panelCommand,
-			runnable: data.panelRunnable,
-			picking: data.panelPicking,
-			pickerQuery: data.pickerQuery,
-			pickerPath: data.pickerPath,
+			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: true,
@@ -191,11 +194,6 @@ function webViewBehaviors() {
 			loading: data.rightLoading,
 		}),
 		rightPaneClass: (_self, data) => paneClass(data, "right"),
-		rightSummaryView: (_self, data) => ({
-			entries: data.rightEntries,
-			disk: data.rightDisk,
-			width: data.paneWidth,
-		}),
 	}
 }
 
@@ -205,28 +203,46 @@ function createWebApp(session, options = {}) {
 	registerWebComponents()
 	const size = options.size ?? cell({ width: 0, height: 0 })
 	const help = cell(false)
-	const viewer = 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)
 	})
-	const crumbs = (pane) => derived([pane.segments, paneWidth], ([segments, width]) => elideCrumbs(segments, width))
-	const quit = (self) => self.unmount?.()
+	// 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({ quit })
+	const events = appEvents()
 	return ui(appHtml)
-		.init(() => ({
-			...appInit(session)(),
-			uiSize: size,
-			helpOpen: help,
-			viewerOpen: viewer,
-			paneWidth,
-			leftSegments: crumbs(session.panes.left),
-			parentSegments: crumbs(session.panes.parent),
-			rightSegments: crumbs(session.panes.right),
-		}))
+		.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({
 			...createFrameBehaviors({ theme: webTheme }),
 			...webViewBehaviors(),
@@ -240,8 +256,23 @@ function createWebApp(session, options = {}) {
 			},
 			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)
-				const busy = unwrap(data.confirm) || unwrap(data.bookmarkOpen) || unwrap(data.panelOpen) || unwrap(data.filtering)
 				if (help.value) {
 					if (["escape", "q", "?"].includes(key.name)) help.set(false)
 					return
@@ -250,27 +281,54 @@ function createWebApp(session, options = {}) {
 					help.set(true)
 					return
 				}
-				// The viewer only exists while narrow: if the viewport widened
-				// underneath it, drop the stale state and keep handling the key.
-				if (viewer.value && !isNarrow(data, self)) viewer.set(false)
-				if (viewer.value) {
-					if (key.name === "escape" || key.name === "v") viewer.set(false)
-					else if (key.shift && key.name === "o") session.dispatch("file.open")
-					else if (key.shift && key.name === "e") session.dispatch("file.edit")
-					return
-				}
-				if (!busy && key.name === "v" && !key.shift && isNarrow(data, self)) {
-					viewer.set(!viewer.value)
-					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 === "view.togglePreview" && isNarrow(data, self)) viewer.set(!viewer.value)
-				else events["commandbar:run"](self, data, event)
+				if (event.data === "app.help") {
+					help.set(!help.value)
+					return
+				}
+				events["commandbar:run"](self, data, event)
 			},
 		})
 }

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

@@ -24,11 +24,16 @@ 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 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" }
 
@@ -39,6 +44,7 @@ import {
 	bookmarkRows,
 	breadcrumbsBehaviors,
 	commandBarBehaviors,
+	commandBarFit,
 	commandBarMarksItem,
 	commandArgRowBehaviors,
 	commandItemBehaviors,
@@ -49,13 +55,22 @@ import {
 	crumbRows,
 	entryDetailBehaviors,
 	fileListBehaviors,
+	filePickerBehaviors,
+	filePickerRowBehaviors,
+	filePickerRows,
 	filePreviewBehaviors,
 	fileRowBehaviors,
 	fileRows,
 	filterBarBehaviors,
 	helpBehaviors,
+	helpRowBehaviors,
+	helpRows,
+	overlayListBehaviors,
+	overlayRowBehaviors,
+	overlayRows,
 	panelArgRows,
 	panelOpRows,
+	panelRunRows,
 	summaryBehaviors,
 } from "../components/index.js"
 import { createBehaviors as headerBehaviors } from "./header.js"
@@ -79,16 +94,19 @@ function elide(text, width) {
 // Binds every shared component to its `.html` presentation.
 function createComponents() {
 	const commandItem = bind(ui, "CommandItem", commandItemHtml, commandItemBehaviors(webTheme))
-	// Browsers lack the Nerd Font, so panel entries carry the text tag instead
-	// of the glyph.
+	// 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 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,
@@ -108,15 +126,24 @@ function createComponents() {
 			...webTheme,
 			listClass: "command-bar-keys",
 			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: marks ? [...items, marks] : items })
+				return commandItemRows(commandItem)(self, {
+					...data,
+					items: commandBarFit(marks ? [...items, marks] : items, width),
+				})
 			},
 		})),
 		CommandPanel: bind(ui, "CommandPanel", commandPanelHtml, commandPanelBehaviors({
 			...webTheme,
 			opRows: panelOpRows(commandArgRow),
 			argRows: panelArgRows(commandArgRow),
+			runRows: panelRunRows(commandArgRow),
 		})),
 		Confirm: bind(ui, "Confirm", confirmHtml, confirmBehaviors(webTheme)),
 		EntryDetail: bind(ui, "EntryDetail", entryDetailHtml, entryDetailBehaviors({ ...webTheme, width: paneWidth, elide })),
@@ -124,6 +151,10 @@ function createComponents() {
 			...webTheme,
 			rows: fileRows(fileRow),
 		})),
+		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
@@ -131,8 +162,12 @@ function createComponents() {
 			actions: () => " Open / edit are unavailable in the browser",
 		})),
 		FilterBar: filterBar,
-		Help: bind(ui, "Help", helpHtml, helpBehaviors({ theme: webTheme })),
+		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,
+			rows: overlayRows(overlayRow),
+		})),
 		Summary: bind(ui, "Summary", summaryHtml, summaryBehaviors({ ...webTheme, width: paneWidth, elide })),
 	}
 }
@@ -152,10 +187,12 @@ function registerWebComponents() {
 	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
 }