@ssebastien/tcmd 0.1.2 → 0.1.4

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

@@ -13,11 +13,13 @@
 // 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" }
@@ -25,8 +27,8 @@ import fileListHtml from "../components/FileList.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 headerHtml from "./header.html" with { type: "text" }
-import paletteRowHtml from "../components/PaletteRow.html" with { type: "text" }
 import rowListHtml from "../components/RowList.html" with { type: "text" }
 import summaryHtml from "../components/Summary.html" with { type: "text" }
 
@@ -37,9 +39,11 @@ import {
 	bookmarkRows,
 	breadcrumbsBehaviors,
 	commandBarBehaviors,
+	commandBarMarksItem,
+	commandArgRowBehaviors,
 	commandItemBehaviors,
 	commandItemRows,
-	commandPaletteBehaviors,
+	commandPanelBehaviors,
 	confirmBehaviors,
 	crumbBehaviors,
 	crumbRows,
@@ -49,55 +53,48 @@ import {
 	fileRowBehaviors,
 	fileRows,
 	filterBarBehaviors,
-	paletteRowBehaviors,
-	paletteRows,
+	helpBehaviors,
+	panelArgRows,
+	panelOpRows,
 	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))
+	// Browsers lack the Nerd Font, so panel entries carry the text tag instead
+	// of the glyph.
+	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 filterBar = bind(ui, "FilterBar", filterBarHtml, filterBarBehaviors(webTheme))
-	const paletteRow = bind(ui, "PaletteRow", paletteRowHtml, paletteRowBehaviors(webTheme))
 	const bookmarkRow = bind(ui, "BookmarkRow", bookmarkRowHtml, bookmarkRowBehaviors(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 +107,33 @@ function createComponents() {
 		CommandBar: bind(ui, "CommandBar", commandBarHtml, commandBarBehaviors({
 			...webTheme,
 			listClass: "command-bar-keys",
-			rows: commandItemRows(commandItem),
+			rows: (self, data) => {
+				const marks = commandBarMarksItem(data)
+				const items = unwrap(data.items) ?? []
+				return commandItemRows(commandItem)(self, { ...data, items: marks ? [...items, marks] : items })
+			},
 		})),
-		CommandPalette: bind(ui, "CommandPalette", commandPaletteHtml, commandPaletteBehaviors({
+		CommandPanel: bind(ui, "CommandPanel", commandPanelHtml, commandPanelBehaviors({
 			...webTheme,
-			rows: paletteRows(paletteRow),
+			opRows: panelOpRows(commandArgRow),
+			argRows: panelArgRows(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)),
-		FilterBar: filterBar,
-		Header: bind(ui, "Header", headerHtml, headerBehaviors({
+		FilePreview: bind(ui, "FilePreview", filePreviewHtml, filePreviewBehaviors({
 			...webTheme,
-			width: (self) => columnWidth(self.ref.box),
+			// 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",
 		})),
-		Summary: bind(ui, "Summary", summaryHtml, summaryBehaviors(webTheme)),
+		FilterBar: filterBar,
+		Help: bind(ui, "Help", helpHtml, helpBehaviors({ theme: webTheme })),
+		Header: bind(ui, "Header", headerHtml, headerBehaviors(webTheme)),
+		Summary: bind(ui, "Summary", summaryHtml, summaryBehaviors({ ...webTheme, width: paneWidth, elide })),
 	}
 }
 
@@ -143,13 +148,14 @@ 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("FilePreview", components.FilePreview)
 	ui.format("FilterBar", components.FilterBar)
 	ui.format("Header", components.Header)
+	ui.format("Help", components.Help)
 	ui.format("Summary", components.Summary)
 	return components
 }

package/src/js/tcmd/web/effects.js

@@ -0,0 +1,143 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-13
+
+// Module: tcmd/web/effects
+// DOM effects owned by the mounted App: viewport measurement, modal focus,
+// default-key trapping and keeping the keyboard cursor visible. select.js
+// renders without any of this, so the web binding owns it explicitly.
+
+import { INSPECTOR_INLINE_WIDTH } from "../components/Frame.js"
+
+const canvases = new WeakMap()
+
+// Function: columnWidth
+// Available monospace columns, or zero in a DOM without layout (happy-dom).
+function columnWidth(el) {
+	if (!el?.clientWidth) return 0
+	const doc = el.ownerDocument
+	const view = doc.defaultView
+	let canvas = canvases.get(doc)
+	if (!canvas) {
+		canvas = doc.createElement("canvas")
+		canvases.set(doc, canvas)
+	}
+	const ctx = canvas.getContext("2d")
+	if (!ctx) return 0
+	const style = view.getComputedStyle(el)
+	ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+	const width = ctx.measureText("0").width
+	const padding = (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0)
+	return width ? Math.floor((el.clientWidth - padding) / width) : 0
+}
+
+// Function: keepVisible
+// Scroll only the row's own list, never the page or an ancestor overlay.
+function keepVisible(list, row) {
+	if (!list?.clientHeight || !row) return
+	const listRect = list.getBoundingClientRect()
+	const rowRect = row.getBoundingClientRect()
+	if (rowRect.top < listRect.top) list.scrollTop -= listRect.top - rowRect.top
+	else if (rowRect.bottom > listRect.bottom) list.scrollTop += rowRect.bottom - listRect.bottom
+}
+
+// Function: connectEffects
+// Returns a frame scheduler and teardown; the App registers teardown with
+// instance.effect(), so remounting leaves no listeners or observers behind.
+function connectEffects(session, root, { size, help, viewer }) {
+	// Select initially clones into an inert template document; the live window
+	// is available before mount even though ownerDocument.defaultView is not.
+	const view = root.ownerDocument.defaultView ?? globalThis.window
+	const doc = view.document
+	let frame = null
+	let retries = 0
+	let disposed = false
+	const viewerOpen = () => viewer.value && size.value.width > 0 && size.value.width < INSPECTOR_INLINE_WIDTH
+	const modalOpen = () => Boolean(session.confirm.value || help.value || viewerOpen() || session.panelOpen.value || session.bookmarkOpen.value)
+	const focusTarget = () => {
+		if (session.confirm.value) return root.querySelector(".confirm")
+		if (help.value) return root.querySelector(".help")
+		if (viewerOpen()) return root.querySelector(".viewer")
+		if (session.panelOpen.value) {
+			if (session.panelPicking.value) return root.querySelector(".panel-picker-query")
+			if (session.panelFocus.value === "ops") return root.querySelector(".panel-query")
+			return root.querySelector(session.panelTextual.value ? ".panel-value" : ".command-panel")
+		}
+		if (session.bookmarkOpen.value) return root.querySelector(".bookmark-query")
+		if (session.filtering.value) return root.querySelector(`.pane-${session.filtering.value} .filter-input`)
+		return root
+	}
+	const update = () => {
+		frame = null
+		if (disposed || !root.isConnected) return
+		const width = columnWidth(root)
+		const lineHeight = Number.parseFloat(view.getComputedStyle(root).lineHeight)
+		const height = lineHeight ? Math.floor(root.clientHeight / lineHeight) : 0
+		if (width && height && (size.value.width !== width || size.value.height !== height)) size.set({ width, height })
+		// A fullscreen viewer only exists while the viewport is narrow;
+		// widening back to the inline inspector drops the stale state so a
+		// later narrow resize does not resurrect it. Reads the cell (not just
+		// the fresh measurement) so a host that drives `size` directly is
+		// honoured too.
+		if (viewer.value && size.value.width >= INSPECTOR_INLINE_WIDTH) viewer.set(false)
+		// A modal's field mounts on a later frame than the flag that opens it;
+		// retry a few frames before giving up so focus lands on the overlay
+		// instead of the root.
+		const target = focusTarget()
+		if (modalOpen() && !target && retries < 8) {
+			retries += 1
+			schedule()
+			return
+		}
+		retries = 0
+		const focusable = target ?? root
+		if (focusable !== doc.activeElement) focusable.focus({ preventScroll: true })
+		for (const list of root.querySelectorAll(".file-list, .bookmark-rows, .panel-ops, .panel-args")) {
+			keepVisible(list, list.querySelector(".is-current, .is-selected, .is-focused"))
+		}
+	}
+	const schedule = () => {
+		// Root renders queue child renders on the next frame. Wait past those
+		// before focusing a newly mounted field or measuring a changed layout.
+		if (!disposed && frame === null) frame = view.requestAnimationFrame(() => {
+			frame = view.requestAnimationFrame(update)
+		})
+	}
+	const trapKeys = (event) => {
+		const input = event.target?.tagName === "INPUT" || event.target?.tagName === "TEXTAREA"
+		// Editing keeps native text/caret keys except the ones the shared
+		// controller explicitly owns (vertical arrows, Enter and Tab).
+		if (input && [" ", "Backspace", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(event.key)) return
+		if ([" ", "Backspace", "Enter", "Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown", "Escape"].includes(event.key) ||
+			(event.ctrlKey && event.key.toLowerCase() === "r")) event.preventDefault()
+	}
+	const focusIn = (event) => {
+		if (modalOpen() && event.target !== focusTarget()) schedule()
+	}
+	root.addEventListener("keydown", trapKeys)
+	doc.addEventListener("focusin", focusIn)
+	root.addEventListener("focusout", schedule)
+	view.addEventListener("resize", schedule)
+	const observer = view.ResizeObserver ? new view.ResizeObserver(schedule) : null
+	observer?.observe(root)
+	// Pane proportions also change when the inspector is toggled.
+	for (const pane of root.querySelectorAll(".pane")) observer?.observe(pane)
+	schedule()
+	return {
+		schedule,
+		dispose() {
+			disposed = true
+			if (frame !== null) view.cancelAnimationFrame(frame)
+			observer?.disconnect()
+			root.removeEventListener("keydown", trapKeys)
+			root.removeEventListener("focusout", schedule)
+			doc.removeEventListener("focusin", focusIn)
+			view.removeEventListener("resize", schedule)
+		},
+	}
+}
+
+export { columnWidth, connectEffects, keepVisible }
+
+// EOF

package/src/js/tcmd/web/header.html

@@ -1 +1 @@
-<header class="app-header" ref="box"><span class="brand-tiny">Tiny</span><span class="brand-cmd">Cmd</span><span out="title"></span></header>
+<header class="app-header" ref="box"><span class="brand-tiny">Tiny</span><span class="brand-cmd">Cmd</span><span out="title"></span><span class="app-header-status"><span class="app-header-mode" out:class="modeClass" out="mode"></span><span out="statusSuffix"></span></span></header>

package/src/js/tcmd/web/header.js

@@ -4,32 +4,36 @@
 // Created: 2026-09-27
 
 // Module: tcmd/web/header
-// Header: the application title bar above the panes, showing
-// `TinyCmd - HOST DIR/BASE` for the active pane's directory (compressed to fit).
+// Header: the slim application identity bar, showing `TinyCmd - HOST` and,
+// right-aligned, the view mode and version (`explorer · 0.1.3`).
 // The brand renders as static spans — `Tiny` with a blue CSS gradient, `Cmd`
 // with a brighter orange one (both kept in sync with `tui/theme.js`) — so the
-// `title` behavior carries only the host and path tail (` - HOST DIR/BASE`).
+// `title` behavior carries only the host tail (` - HOST`), `mode`/`modeClass`
+// the gradiented mode word and `statusSuffix` the version that follows it.
 //
-// Environment: `textHeadingFg`, plus `width(self)` returning the available
-// columns (renderer-specific; 0/omitted disables compression).
+// Environment: `textHeadingFg`.
 
 import { unwrap } from "select/state/cells"
-import { formatTitle } from "../components/format.js"
+import { modeWord, versionTrail } from "../components/Frame.js"
 
 // Constant: BRAND
-// The brand word the static header spans render; stripped from the title so
-// the tail doesn't repeat it.
+// The brand word the static header spans render.
 const BRAND = "TinyCmd"
 
 // Function: createBehaviors
 // Builds the Header behavior map for the given renderer environment.
 function createBehaviors(env) {
 	return {
-		title: (self, data) => {
-			const full = formatTitle(unwrap(data.host), unwrap(data.path), env.width ? env.width(self, data) : 0)
-			return full.startsWith(BRAND) ? full.slice(BRAND.length) : full
+		title: (_self, data) => {
+			const host = `${unwrap(data.host) ?? ""}`.trim()
+			return host ? ` - ${host}` : ""
 		},
 		titleFg: () => env.textHeadingFg,
+		// The mode word picks the brand gradient it shimmers along: explorer
+		// the Tiny blues, commander the Cmd oranges (see `.app-header-mode`).
+		mode: (_self, data) => modeWord(unwrap(data.mode)),
+		modeClass: (_self, data) => `mode-${modeWord(unwrap(data.mode))}`,
+		statusSuffix: () => versionTrail(),
 	}
 }
 

package/src/js/tcmd/web/main.js

@@ -13,13 +13,13 @@
 // preferred and HTTP is the fallback, so browsers without OPFS (or insecure
 // origins) still work when the page is served by `bun run web:serve`.
 //
-// select.js renders on animation frames and does no focus management, so this
-// module adds the two browser bits the shared components cannot know about:
-// default-key trapping and focus tracking.
+// DOM effects (focus, key trapping, resize, scroll) live in `web/effects.js`
+// and are wired by the App binding in `web/app.js`; bookmarks persist through
+// `web/bookmarks.js`, namespaced by backend and API root.
 //
 // Built by `bun run web:build` (see package.json) into `public/main.js`.
 
-import { effect } from "select/state/cells"
+import { createBookmarks } from "../core/bookmarks.js"
 import { createNullOs } from "../core/os.js"
 import { createPane } from "../core/pane.js"
 import { createSession, load } from "../core/session.js"
@@ -27,64 +27,7 @@ import { apiToken, createHttpFs } from "./http.js"
 import { main as mount } from "./index.js"
 import { createOpfsFs } from "./opfs.js"
 import { seedOpfs } from "./seed.js"
-
-// Constant: APP_KEYS
-// Keys with browser defaults that would fight the app keymap: focus traversal
-// (Tab), caret/scroll arrows, page scroll (Space) and history Backspace.
-const APP_KEYS = new Set([
-	" ",
-	"ArrowDown",
-	"ArrowLeft",
-	"ArrowRight",
-	"ArrowUp",
-	"Backspace",
-	"Enter",
-	"Tab",
-])
-
-// Function: trapKeys
-// Keeps browser defaults out of the way while the app owns the keyboard. Space
-// and Backspace stay untouched in text inputs so the palette query can be
-// typed; the app routes every other listed key itself.
-function trapKeys(root) {
-	root?.addEventListener("keydown", (event) => {
-		const inInput = event.target instanceof HTMLInputElement
-		if (inInput && (event.key === " " || event.key === "Backspace")) return
-		if (APP_KEYS.has(event.key)) event.preventDefault()
-	})
-}
-
-// Function: trackFocus
-// The key handler lives on the app root, so focus must stay inside it. The
-// palette input is focused while the palette is open (select.js does not), and
-// the active pane's filter input while that pane is filtering; focus returns to
-// the app root otherwise. Focus that leaves the app — a removed input, a click
-// on the page background — is pulled back.
-function trackFocus(session, root) {
-	if (!root) return
-	const focusInput = () => {
-		if (session.paletteOpen.value) return document.querySelector("#app .palette-input")
-		if (session.filtering.value) {
-			return document.querySelector(`#app .pane-${session.filtering.value} .filter-input`)
-		}
-		return null
-	}
-	const applyFocus = () => {
-		// select.js swaps the palette DOM on animation frames: wait for it.
-		requestAnimationFrame(() => {
-			const input = focusInput()
-			if (input) input.focus()
-			else if (!root.contains(document.activeElement)) root.focus()
-		})
-	}
-	effect([session.paletteOpen, session.filtering], applyFocus)
-	document.addEventListener("focusout", (event) => {
-		if (!session.paletteOpen.value && !session.filtering.value && event.relatedTarget && root.contains(event.relatedTarget)) {
-			return
-		}
-		applyFocus()
-	})
-}
+import { createWebBookmarkStore } from "./bookmarks.js"
 
 // Function: createOpfsBackend
 // OPFS adapter, probed and seeded. `readDir("/")` resolves the OPFS root, so
@@ -128,13 +71,10 @@ async function start() {
 			left,
 			right,
 			host: globalThis.location?.hostname ?? "",
+			bookmarks: createBookmarks({ store: createWebBookmarkStore({ mode, root: mode === "opfs" ? "/" : fs.root() }) }),
 		})
 		await load(session)
 		const instance = mount(session, "#app")
-		const root = document.querySelector("#app .app")
-		root?.focus()
-		trapKeys(root)
-		trackFocus(session, root)
 		document.title = `TinyCMD web (${mode})`
 		globalThis.tcmd = { fs, mode, session, instance }
 	} catch (error) {

package/src/js/tcmd/web/seed.js

@@ -24,8 +24,8 @@ const DEMO_TREE = {
 		"- Tab  switch pane",
 		"- Space  mark the current entry",
 		"- b / g  record / jump to a bookmark",
-		"- ^P  command palette",
-		"- :  scripting mode (copy, move, delete, ...)",
+		"- :  command panel (operations and app actions)",
+		"- !  shell command",
 		"- q  quit (unmounts the UI; reload to start over)",
 		"",
 		"Open/edit/run are not available in the browser: the web uses the null",
@@ -47,7 +47,7 @@ const DEMO_TREE = {
 		"----",
 		"[x] two panes",
 		"[x] named bookmarks",
-		"[x] command palette",
+		"[x] command panel",
 		"[ ] quick find",
 	].join("\n"),
 	"/documents/welcome.txt": [

package/src/js/tcmd/web/server.js

@@ -8,9 +8,10 @@
 // filesystem API (`/api/*`) over the Node filesystem adapter, so browsers
 // without OPFS (or users who want to browse real files) can run the web UI.
 //
-// Security: binds to loopback only by default and requires the per-process
-// token, injected into `index.html` at serve time, on every API request. When
-// `root` is set, every path is confined to it. This is a local development
+// Security: binds to loopback only by default (`HOST` overrides the address)
+// and requires the per-process token, injected into `index.html` at serve
+// time, on every API request. When `root` is set, every path is confined to
+// it. This is a local development
 // tool, not a sandbox: it serves the same files `bun run tcmd` can reach, so
 // do not expose the port.
 
@@ -24,10 +25,11 @@ const TOKEN_PLACEHOLDER = "__TCMD_TOKEN__"
 // Function: createWebServer
 // Builds the server. `port` 0 picks a free port (tests); `root` defaults to
 // "/" (the whole filesystem, like the TUI); `token` defaults to a fresh UUID.
+// `hostname` and `port` default to the HOST and PORT environment variables.
 function createWebServer({
 	root = process.env.TCMD_WEB_ROOT ?? "/",
 	port = Number(process.env.PORT ?? 8787),
-	hostname = "127.0.0.1",
+	hostname = process.env.HOST || "127.0.0.1",
 	publicDir = new URL("../../../../public/", import.meta.url),
 	token = crypto.randomUUID(),
 } = {}) {

package/src/js/tcmd/web/theme.js

@@ -14,6 +14,7 @@ const webTheme = {
 	currentClass: "is-current",
 	dirClass: "is-dir",
 	errorClass: "is-error",
+	focusedClass: "is-focused",
 	rootClass: "is-root",
 	selectedClass: "is-selected",
 }

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

@@ -1,7 +0,0 @@
-<section class="palette" when="open">
-	<div class="palette-line">
-		<span class="palette-sign" out="sign"></span>
-		<input ref="query" inout="query" class="palette-input" placeholder="Command..." on:enter="confirm" />
-	</div>
-	<ul class="palette-list" out="rows"></ul>
-</section>

package/src/js/tcmd/components/CommandPalette.js

@@ -1,58 +0,0 @@
-// Project: TinyCommand
-// Author:  Sebastien Pierre
-// License: BSD
-// Created: 2026-09-26
-
-// Module: tcmd/components/CommandPalette
-// CommandPalette: popup listing commands filtered by the typed query. In
-// scripting mode it lists operations and filesets and prefixes the input with
-// `:`. The row logic lives in `PaletteRow.js`; this parent maps its `items` to
-// rows.
-//
-// Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
-// (footer), `textHeadingFg` (exposed as the `titleColor` behavior),
-// `rows(data)` returning the keyed rows and `scrollTop(self, data)` (TUI
-// viewport tracking).
-
-import { unwrap } from "select/state/cells"
-
-// Function: paletteSign
-// The prompt shown before the input; overridable per renderer.
-function paletteSign(mode) {
-	return unwrap(mode) === "script" ? ":" : "›"
-}
-
-// Function: paletteTitle
-function paletteTitle(mode) {
-	return unwrap(mode) === "script" ? "script" : "palette"
-}
-
-// Function: createBehaviors
-// Builds the CommandPalette behavior map for the given renderer environment.
-function createBehaviors(env) {
-	const behaviors = {
-		bg: () => env.overlayBg,
-		borderFg: () => env.borderPrimaryActiveFg,
-		confirm: (self, data) => self.pub("palette:confirm", unwrap(data.query) ?? ""),
-		focused: (_self, data) => Boolean(unwrap(data.open)),
-		footer: (_self, data) =>
-			unwrap(data.mode) === "script"
-				? "Tab complete   ↵ run   Esc close"
-				: "↑↓ move   Tab complete   ↵ run   Esc close",
-		footerFg: () => env.textSecondaryFg,
-		sign: (_self, data) => paletteSign(data.mode),
-		title: (_self, data) => paletteTitle(data.mode),
-		titleColor: () => env.textHeadingFg,
-	}
-	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
-	}
-	if (env?.scrollTop) {
-		behaviors.scrollTop = (self, data) => env.scrollTop(self, data)
-	}
-	return behaviors
-}
-
-export { createBehaviors, paletteSign, paletteTitle }
-
-// EOF

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

@@ -1,16 +0,0 @@
-<box when="open" width="100%" height="100%" alignItems="center" justifyContent="center">
-	<box width="72%" height="60%" border borderStyle="rounded"
-	     out:title="title" out:titleColor="titleColor" out:borderColor="borderFg"
-	     out:backgroundColor="bg" flexDirection="column">
-		<box flexDirection="row" height="1" paddingLeft="1">
-			<text out="sign" out:fg="titleColor"></text>
-			<input ref="query" inout="query" flexGrow="1" height="1" out:focused="focused" on:enter="confirm"></input>
-		</box>
-		<scrollbox ref="list" flexGrow="1">
-			<box out="rows" flexDirection="column"></box>
-		</scrollbox>
-		<box flexDirection="row" height="1" paddingLeft="1">
-			<text out="footer" out:fg="footerFg"></text>
-		</box>
-	</box>
-</box>

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

@@ -1,3 +0,0 @@
-<li class="palette-item" out:class="rowClass" on:click="item.id!palette:run">
-	<span out="paletteLabel"></span>
-</li>

package/src/js/tcmd/components/PaletteRow.js

@@ -1,43 +0,0 @@
-// Project: TinyCommand
-// Author:  Sebastien Pierre
-// License: BSD
-// Created: 2026-09-26
-
-// Module: tcmd/components/PaletteRow
-// Command-palette row behaviors. Read `{ item: command, index, selected }`, the
-// same bag shape in both engines. Selection is snapshotted by the row builder
-// into a plain `selectedRow` boolean and read through the shared `isSelected`
-// predicate, with the `selected` cell as fallback for hand-built bags. Script
-// rows carry a `detail` (operation signature, fileset count) appended to the
-// label.
-//
-// Environment: `accentFg`, `textFg`, `selectionBg` (TUI row background),
-// `selectedClass` (web).
-
-import { isSelected } from "./rows.js"
-
-// Function: paletteLabel
-// "Switch [Tab]" for commands; script rows append their detail.
-function paletteLabel(command) {
-	if (!command) return ""
-	const keys = command.keys ? ` [${command.keys}]` : ""
-	const detail = command.detail ? `  ${command.detail}` : ""
-	return `${command.title}${keys}${detail}`
-}
-
-// Function: createBehaviors
-// Builds the PaletteRow behavior map for the given renderer environment.
-function createBehaviors(env) {
-	return {
-		paletteLabel: (_self, data) => paletteLabel(data.item),
-		rowBg: (_self, data) => (isSelected(data) ? env.selectionBg : undefined),
-		rowClass: (_self, data) => (isSelected(data) ? env.selectedClass : null),
-		rowFg: (_self, data) => (isSelected(data) ? env.accentFg : env.textFg),
-		// TUI: a marker so the selection is not color-only.
-		rowMarker: (_self, data) => (isSelected(data) ? ">" : " "),
-	}
-}
-
-export { createBehaviors, paletteLabel }
-
-// EOF