@ssebastien/tcmd 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,98 @@
+<!-- Root wrapper: the workspace, plus overlays positioned against the whole
+     viewport. The overlays stay INSIDE this root box so keypress routing (which
+     binds to it once) sees them as its focused subtree. -->
+<box flexDirection="column" width="100%" height="100%" on:keypress="keys">
+
+	<!-- Workspace wrapper: always mounted, so the root box has one stable
+	     child whether the workspace or the min-size gate shows. -->
+	<box flexGrow="1" flexDirection="column" overflow="hidden">
+
+		<!-- Identity bar: the one visible trace of TinyCmd itself (the host
+		     aside, everything else on screen is the user's files). "Tiny"
+		     shimmers blue letter by letter, "Cmd" shimmers orange. -->
+		<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+			<text out="brandT" out:fg="brandTFg" wrapMode="none"></text>
+			<text out="brandI" out:fg="brandIFg" wrapMode="none"></text>
+			<text out="brandN" out:fg="brandNFg" wrapMode="none"></text>
+			<text out="brandY" out:fg="brandYFg" wrapMode="none"></text>
+			<text out="brandC" out:fg="brandCFg" wrapMode="none"></text>
+			<text out="brandM" out:fg="brandMFg" wrapMode="none"></text>
+			<text out="brandD" out:fg="brandDFg" wrapMode="none"></text>
+			<text out="topBar" out:fg="topBarFg" wrapMode="none"></text>
+		</box>
+
+		<!-- Minimum-size gate: below the breakpoint the workspace is unusable. -->
+		<box when="tooSmall" flexGrow="1" alignItems="center" justifyContent="center" flexDirection="column" rowGap="1">
+			<text out="minSizeTitle" out:fg="titleFg"></text>
+			<text out="minSizeHint" out:fg="dimFg"></text>
+		</box>
+
+		<!-- Two boxed panes plus the inline inspector. -->
+		<box when="!tooSmall" flexDirection="column" flexGrow="1" overflow="hidden">
+			<box flexDirection="row" flexGrow="1" overflow="hidden">
+				<box flexDirection="column" flexGrow="1" border borderStyle="single"
+				     out:border="leftBorder" out:borderColor="leftBorderFg"
+				     on:click="leftId!pane:activate">
+					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+						<box when="!leftFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
+							<breadcrumbs in:segments="leftSegments" in:paneId="leftId" height="1"></breadcrumbs>
+						</box>
+						<filterbar in:query="leftFilter" in:paneId="leftId" in:filtering="filtering" in:entries="leftEntries"></filterbar>
+					</box>
+					<box height="1" out:border="headRule" out:borderColor="leftHeadRuleFg"></box>
+					<filelist in:entries="leftEntries" in:cursor="leftCursor" in:marked="leftMarked"
+					          in:active="leftActive" in:paneId="leftId" in:loading="leftLoading"
+					          in:viewport="listViewport"></filelist>
+					<entrydetail in:entry="leftEntry" in:marked="leftMarked" height="2"></entrydetail>
+					<summary in:entries="leftEntries" in:disk="leftDisk" height="1"></summary>
+				</box>
+				<box flexDirection="column" flexGrow="1" border borderStyle="single"
+				     out:border="rightBorder" out:borderColor="rightBorderFg"
+				     on:click="rightId!pane:activate">
+					<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+						<box when="!rightFilterOn" flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
+							<breadcrumbs in:segments="rightSegments" in:paneId="rightId" height="1"></breadcrumbs>
+						</box>
+						<filterbar in:query="rightFilter" in:paneId="rightId" in:filtering="filtering" in:entries="rightEntries"></filterbar>
+					</box>
+					<box height="1" out:border="headRule" out:borderColor="rightHeadRuleFg"></box>
+					<filelist in:entries="rightEntries" in:cursor="rightCursor" in:marked="rightMarked"
+					          in:active="rightActive" in:paneId="rightId" in:loading="rightLoading"
+					          in:viewport="listViewport"></filelist>
+					<entrydetail in:entry="rightEntry" in:marked="rightMarked" height="2"></entrydetail>
+					<summary in:entries="rightEntries" in:disk="rightDisk" height="1"></summary>
+				</box>
+				<filepreview when="showInspectorInline" in:preview="preview" in:show="showInspectorInline"
+				             in:entry="appEntry" flexGrow="1"></filepreview>
+			</box>
+			<commandbar in:items="commandBarItems" in:notice="notice" in:leftError="leftError"
+			            in:rightError="rightError" in:active="active"
+			            in:leftMarked="leftMarked" in:rightMarked="rightMarked" out:height="barHeight"></commandbar>
+		</box>
+	</box>
+
+	<!-- Fullscreen inspector for narrow viewports. -->
+	<box when="showViewer" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="10"
+	     alignItems="center" justifyContent="center">
+		<box width="80%" height="90%">
+			<filepreview in:preview="preview" in:show="showViewer" in:entry="appEntry"></filepreview>
+		</box>
+	</box>
+
+	<commandpalette when="paletteOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="20"
+	                in:open="paletteOpen" in:mode="paletteMode" in:query="paletteQuery"
+	                in:items="paletteItems" in:selected="paletteIndex"></commandpalette>
+	<commandpanel when="panelOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="22"
+	              in:open="panelOpen" in:operation="panelOperation" in:items="panelItems"
+	              in:opCursor="panelOpIndex" in:rows="panelRows" in:argCursor="panelRowIndex"
+	              in:focus="panelFocus" in:textual="panelTextual" in:argRow="panelCursorRow"
+	              in:command="panelCommand" in:runnable="panelRunnable"
+	              in:query="panelQuery" in:value="panelValue"></commandpanel>
+	<bookmarklist when="bookmarkOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="25"
+	              in:open="bookmarkOpen" in:mode="bookmarkMode" in:query="bookmarkQuery"
+	              in:target="bookmarkTarget" in:items="bookmarkItems" in:selected="bookmarkIndex"></bookmarklist>
+	<confirm when="confirm" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="30"
+	         in:confirm="confirm"></confirm>
+	<help when="helpOpen" position="absolute" top="0" left="0" width="100%" height="100%" zIndex="40"
+	      in:open="helpOpen"></help>
+</box>

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

@@ -0,0 +1,12 @@
+<div class="bookmark-list" when="open">
+	<div class="bookmark-dialog">
+		<header>
+			<span class="bookmark-sign" out="sign"></span>
+			<input class="bookmark-query" type="text" inout="query" on:enter="confirm">
+		</header>
+		<p class="bookmark-target" when="inputVisible" out="target"></p>
+		<p class="bookmark-empty" when="emptyList" out="empty"></p>
+		<ul class="bookmark-rows" when="listVisible" out="rows"></ul>
+		<footer out="footer"></footer>
+	</div>
+</div>

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

@@ -0,0 +1,73 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-09
+
+// Module: tcmd/components/BookmarkList
+// BookmarkList: the `g`/`b` overlay. In "name" mode it shows an input to name
+// the path being recorded; in "list" mode it shows the fuzzy picker over the
+// stored bookmarks (matched by name or path). The row logic lives in
+// `BookmarkRow.js`; this parent maps its `items` to rows.
+//
+// Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
+// (footer/path), `textHeadingFg` (title), `rows(data)` returning the keyed rows
+// and `scrollTop(self, data)` (TUI viewport tracking).
+
+import { unwrap } from "select/state/cells"
+
+// Function: title
+// The overlay title: "bookmark" while naming, "bookmarks" while picking.
+function bookmarkTitle(mode) {
+	return unwrap(mode) === "name" ? "bookmark" : "bookmarks"
+}
+
+// Function: footer
+function bookmarkFooter(mode) {
+	return unwrap(mode) === "name"
+		? "name the bookmark   ↵ save   Esc cancel"
+		: "↑↓ move   ↵ jump   Esc close"
+}
+
+// Function: targetLine
+// The path being recorded (name mode). `target` is `{ path, isDir }` or null.
+function targetLine(target) {
+	const value = unwrap(target)
+	if (!value) return ""
+	if (typeof value === "string") return value
+	return `${value.path ?? ""}${value.isDir === true ? "/" : ""}`
+}
+
+// Function: createBehaviors
+// Builds the BookmarkList behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const behaviors = {
+		bg: () => env.overlayBg,
+		borderFg: () => env.borderPrimaryActiveFg,
+		confirm: (self, data) => self.pub("bookmark:confirm"),
+		footer: (_self, data) => bookmarkFooter(data.mode),
+		footerFg: () => env.textSecondaryFg,
+		// The input is focused/typing in name mode; the list navigates otherwise.
+		focused: (_self, data) => Boolean(unwrap(data.open)),
+		inputVisible: (_self, data) => unwrap(data.mode) === "name",
+		listVisible: (_self, data) => unwrap(data.mode) === "list",
+		open: (_self, data) => Boolean(unwrap(data.open)),
+		pathFg: () => env.textSecondaryFg,
+		sign: (_self, data) => (unwrap(data.mode) === "name" ? "+" : "›"),
+		target: (_self, data) => targetLine(data.target),
+		title: (_self, data) => bookmarkTitle(data.mode),
+		titleColor: () => env.textHeadingFg,
+		emptyList: (_self, data) =>
+			unwrap(data.mode) === "list" && (unwrap(data.items)?.length ?? 0) === 0,
+		empty: () => "  no bookmarks",
+		emptyFg: () => env.textSecondaryFg,
+	}
+	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 { bookmarkTitle, createBehaviors }

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

@@ -0,0 +1,18 @@
+<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>
+		<text when="inputVisible" out="target" out:fg="pathFg" paddingLeft="1" wrapMode="none" truncate="true"></text>
+		<text when="emptyList" out="empty" out:fg="emptyFg" paddingLeft="1" wrapMode="none"></text>
+		<scrollbox when="listVisible" 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/BookmarkRow.html

@@ -0,0 +1,5 @@
+<li class="bookmark-row" out:class="rowClass" on:click="item.name!bookmark:select">
+	<span class="bookmark-marker" out="rowMarker"></span>
+	<span class="bookmark-name" out="rowName"></span>
+	<span class="bookmark-path" out="rowPath"></span>
+</li>

package/src/js/tcmd/components/BookmarkRow.js

@@ -0,0 +1,40 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-09
+
+// Module: tcmd/components/BookmarkRow
+// One row of the bookmark picker. Reads `{ item: { name, path }, 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.
+//
+// Environment: `accentFg`, `textFg`, `textSecondaryFg`, `selectionBg` (TUI row
+// background), `selectedClass` (web), `icons` (show Nerd Font icons).
+
+import { isSelected } from "./rows.js"
+import { iconFor } from "./icons.js"
+
+// Function: createBehaviors
+// Builds the BookmarkRow behavior map for the given renderer environment.
+function createBehaviors(env) {
+	return {
+		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),
+		// The icon is its own slot, dimmer than the name; it collapses when
+		// the environment keeps rows icon-free.
+		hasIcon: () => Boolean(env.icons),
+		rowIcon: (_self, data) => (env.icons ? iconFor(data.item) : ""),
+		rowIconFg: () => env.textSecondaryFg,
+		rowMarker: (_self, data) => (isSelected(data) ? ">" : " "),
+		// A directory bookmark reads as `name/`, mirroring the listing.
+		rowName: (_self, data) =>
+			`${data.item?.name ?? ""}${data.item?.isDir === true ? "/" : ""}`,
+		rowPath: (_self, data) => `${data.item?.path ?? ""}`,
+		rowPathFg: () => env.textSecondaryFg,
+	}
+}
+
+export { createBehaviors }

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

@@ -0,0 +1,10 @@
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="item.name!bookmark:select">
+	<text out="rowMarker" width="2" out:fg="rowFg"></text>
+	<text out="rowIcon" out:fg="rowIconFg" wrapMode="none" when="hasIcon"></text>
+	<box minWidth="12" flexShrink="0">
+		<text out="rowName" out:fg="rowFg" wrapMode="none" truncate="true"></text>
+	</box>
+	<box flexGrow="1" minWidth="0" overflow="hidden">
+		<text out="rowPath" out:fg="rowPathFg" wrapMode="none" truncate="true"></text>
+	</box>
+</box>

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

@@ -0,0 +1,27 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/Breadcrumbs
+// PathBreadcrumbs: clickable path elements for one pane. The row logic lives
+// in `Crumb.js`; this parent only maps its `segments` to `Crumb` rows and
+// exposes the web root class.
+//
+// Environment: `rows(data)` returning the keyed row list and `listClass`
+// (web root class); both are injected by the renderer binding. The TUI binds
+// this component to the shared `RowList.xml`, the web to `RowList.html`.
+
+// Function: createBehaviors
+// Builds the Breadcrumbs behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const behaviors = { listClass: () => env?.listClass }
+	if (env?.rows) {
+		behaviors.rows = (_self, data) => env.rows(self, data)
+	}
+	return behaviors
+}
+
+export { createBehaviors }
+
+// EOF

package/src/js/tcmd/components/CommandArgRow.js

@@ -0,0 +1,90 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-09
+
+// Module: tcmd/components/CommandArgRow
+// CommandArgRow: one row shared by both command-panel columns. The operation
+// column passes `{ type: "op" }` rows (name = operation title, summary =
+// signature, `risk` tints destructive/caution operations); the argument column
+// passes `{ type: "arg" | "item" }` rows from `core/panel.panelRowList`. An
+// item shows a `[x]`/`[ ]` toggle with its basename and, dimmed after it, the
+// parent directory; a focused row carries a `>` marker so focus is not
+// colour-only. Reads the row bag `{ item, index, row, cursor, focus }` built by
+// `rows.js`.
+//
+// Environment: `accentFg` (focused row), `textFg`, `textSecondaryFg` (summary),
+// `accentSecondaryFg` (a selected item), `errorFg` (destructive op),
+// `warningFg` (caution op), `selectionBg` (row background), `focusedClass`
+// (web).
+
+import { unwrap } from "select/state/cells"
+
+// Function: riskFg
+// The colour a row's risk maps to: red for destructive operations, amber for
+// caution (a move), null when the row is not risky.
+function riskFg(row, env) {
+	if (row?.type === "op" && row.risk === "destructive") return env.errorFg
+	if (row?.type === "op" && row.risk === "caution") return env.warningFg
+	return null
+}
+
+// Function: rowName
+// The row's left cell: the operation title, an argument's name, or an item's
+// `[x] basename`.
+function rowName(row) {
+	if (!row) return ""
+	if (row.type === "item") return `${row.marker ?? "[ ]"} ${row.name ?? ""}`
+	return row.name ?? ""
+}
+
+// Function: rowSummary
+// The row's right cell: the operation signature, an argument's binding
+// summary, or an item's parent directory.
+function rowSummary(row) {
+	if (!row) return ""
+	if (row.type === "item") return row.parent ?? ""
+	if (row.type === "op") return row.summary ?? ""
+	return row.summary ?? ""
+}
+
+// Function: wantsFocus
+// The focus token a row belongs to: the operation column ("ops") or the
+// argument column ("args").
+function wantsFocus(row) {
+	return row?.type === "op" ? "ops" : "args"
+}
+
+// Function: isFocused
+// True when this row owns the cursor in the focused column.
+function isFocused(row, index, cursor, focus) {
+	if (!row || !focus) return false
+	return focus === wantsFocus(row) && index === cursor
+}
+
+// Function: createBehaviors
+// Builds the CommandArgRow behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const focused = (data) => isFocused(data.row, data.index, unwrap(data.cursor), unwrap(data.focus))
+	return {
+		marker: (_self, data) => (focused(data) ? ">" : " "),
+		markerFg: () => env.accentFg,
+		name: (_self, data) => rowName(data.row),
+		rowBg: (_self, data) => (focused(data) ? env.selectionBg : undefined),
+		rowClass: (_self, data) => (focused(data) ? env.focusedClass : null),
+		rowFg: (_self, data) => {
+			// A risky operation (delete/erase/move) is always tinted — even
+			// focused — so danger reads at a glance; focus is carried by the
+			// `>` marker and the row background instead.
+			const risk = riskFg(data.row, env)
+			if (risk) return risk
+			if (focused(data)) return env.accentFg
+			if (data.row?.type === "item" && data.row?.selected) return env.accentSecondaryFg
+			return env.textFg
+		},
+		summary: (_self, data) => rowSummary(data.row),
+		summaryFg: () => env.textSecondaryFg,
+	}
+}
+
+export { createBehaviors, isFocused, riskFg, rowName, rowSummary, wantsFocus }

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

@@ -0,0 +1,5 @@
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="row.key!panel:select">
+	<text out="marker" width="2" out:fg="markerFg"></text>
+	<text out="name" flexShrink="0" out:fg="rowFg" wrapMode="none"></text>
+	<text out="summary" flexGrow="1" flexShrink="1" minWidth="0" out:fg="summaryFg" wrapMode="none" truncate="true"></text>
+</box>

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

@@ -0,0 +1,4 @@
+<footer class="command-bar">
+	<nav when="showKeys" out:class="listClass" out="rows"></nav>
+	<span when="showStatus" out="status" out:class="statusClass"></span>
+</footer>

package/src/js/tcmd/components/CommandBar.js

@@ -0,0 +1,126 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/components/CommandBar
+// CommandBar: the bottom bar. By default it shows the keys available in the
+// current context (the command registry's `bar` commands, or the palette
+// hints while the palette is open); a pane error or a session notice takes
+// its place. Entries are bracket shorthands (see `CommandItem.js`) that wrap
+// onto as many rows as the width demands; the active pane's marked count
+// joins the list as a dimmed, non-clickable entry. The row logic lives in
+// `CommandItem.js`; this parent maps its `items` to rows.
+//
+// The web presentation swaps the key list for a single status line
+// (`showKeys`/`showStatus`/`status`/`statusClass`); the TUI presentation
+// keeps the wrapped key list and swaps it for the status when there is one.
+//
+// Environment: `rows(data)` returning the keyed row list, `listClass` (web
+// root class), `errorClass` (web), and the TUI colors plus the
+// error/warning/tip foreground/background pairs for the status badge.
+
+import { unwrap } from "select/state/cells"
+import { commandWidth } from "./CommandItem.js"
+
+// Function: commandBarStatus
+// The one-line status the bar shows when something needs attention: the
+// session notice first, then a pane error. Empty when everything is fine.
+function commandBarStatus(data) {
+	const notice = unwrap(data?.notice)
+	if (notice) {
+		const text = notice.text ?? `${notice}`
+		return notice.kind === "error" ? `error: ${text}` : text
+	}
+	const error = unwrap(data?.leftError) ?? unwrap(data?.rightError)
+	return error ? `error: ${error}` : ""
+}
+
+// Function: commandBarMarks
+// Count of marked entries in the active pane, for the status bar's right zone.
+function commandBarMarks(data) {
+	const active = unwrap(data?.active)
+	const marked = active === "left" ? unwrap(data?.leftMarked) : unwrap(data?.rightMarked)
+	const count = marked?.size ?? 0
+	return count > 0 ? `${count} marked` : ""
+}
+
+// Function: commandBarMarksItem
+// The marked count as a trailing, non-clickable bar entry (null when none).
+function commandBarMarksItem(data) {
+	const marks = commandBarMarks(data)
+	return marks ? { id: null, title: marks, dim: true } : null
+}
+
+// Function: commandBarRowCount
+// How many rows the wrapped entries occupy at `width` columns (greedy fill,
+// matching the flex layout, separators included). `width <= 0` (unknown)
+// assumes a single row.
+function commandBarRowCount(items, width) {
+	if (!width || width <= 0) return 1
+	let rows = 1
+	let cols = 0
+	let index = 0
+	for (const item of items ?? []) {
+		const w = commandWidth(item, index)
+		if (cols > 0 && cols + w > width) {
+			rows++
+			cols = 0
+		}
+		cols += w
+		index++
+	}
+	return rows
+}
+
+// Function: isInfo
+// True when the bar status comes from a non-error notice.
+function isInfo(data) {
+	const notice = unwrap(data?.notice)
+	return Boolean(notice && notice.kind !== "error")
+}
+
+// Function: statusKind
+// The notice kind driving the status (null when there is no notice).
+function statusKind(data) {
+	return unwrap(data?.notice)?.kind ?? null
+}
+
+// Function: createBehaviors
+// Builds the CommandBar behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const behaviors = {
+		listClass: () => env?.listClass,
+		showKeys: (_self, data) => !commandBarStatus(data),
+		showStatus: (_self, data) => Boolean(commandBarStatus(data)),
+		status: (_self, data) => commandBarStatus(data),
+		statusBg: (_self, data) => {
+			const kind = statusKind(data)
+			if (kind === "warning") return env?.warningBg
+			if (kind === "tip") return env?.tipBg
+			if (kind === "error" || unwrap(data?.leftError) || unwrap(data?.rightError)) return env?.errorBg
+			return undefined
+		},
+		statusClass: (_self, data) => (commandBarStatus(data) && !isInfo(data) ? env?.errorClass : null),
+		statusFg: (_self, data) => {
+			const kind = statusKind(data)
+			if (kind === "warning") return env?.warningFg
+			if (kind === "tip") return env?.tipFg
+			if (kind === "error" || unwrap(data?.leftError) || unwrap(data?.rightError)) return env?.errorFg
+			return env?.accentFg
+		},
+		// TUI: a padded status for the right zone, empty when all is well.
+		statusPad: (_self, data) => {
+			const text = commandBarStatus(data)
+			return text ? ` ${text} ` : ""
+		},
+	}
+	if (env?.rows) {
+		behaviors.rows = (_self, data) => env.rows(self, data)
+	}
+	return behaviors
+}
+
+export { commandBarMarks, commandBarMarksItem, commandBarRowCount, commandBarStatus, createBehaviors }
+
+// EOF

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

@@ -0,0 +1,4 @@
+<box flexDirection="column" overflow="hidden">
+	<box when="showKeys" out="rows" flexDirection="row" flexWrap="wrap" flexGrow="1" overflow="hidden"></box>
+	<text when="showStatus" out="status" out:fg="statusFg" out:bg="statusBg" flexShrink="0"></text>
+</box>

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

@@ -0,0 +1,3 @@
+<button class="command-key" type="button" on:click="item.id!commandbar:run">
+	<span out="itemLabel"></span>
+</button>

package/src/js/tcmd/components/CommandItem.js

@@ -0,0 +1,78 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/components/CommandItem
+// Command-bar entry behaviors. Read `{ item, index }`, the same bag shape in
+// both engines. `item.id` may be null for pure key hints, in which case a
+// click dispatches nothing.
+//
+// Each entry renders as a plain bracket shorthand, preceded by a dim `|`
+// divider (except the first entry):
+//
+//   [Open ⏎]   — the bracket and title in the text colour, the key glyph in
+//                the accent (primary) or secondary accent, and a trailing
+//                space separating it from the next entry.
+//
+// Entries without a key (the marked count) render as a dimmed plain word
+// with no brackets. The web renders the same label as a single string (its
+// buttons are separated by their gap, not the pipe).
+//
+// Environment: `accentFg` (primary), `accentSecondaryFg` (secondary),
+// `textFg`, `textSecondaryFg`.
+
+// Function: keyGlyph
+// The shorthand glyph for a shortcut label: ⏎ for Enter, ⇥ for Tab.
+function keyGlyph(keys) {
+	const GLYPHS = { Enter: "⏎", "↵": "⏎", Tab: "⇥" }
+	return GLYPHS[keys] ?? keys
+}
+
+// Function: commandLabel
+// "[Open ⏎] " style label; entries without a key are just a plain word.
+function commandLabel(item) {
+	if (!item) return ""
+	return item.keys ? `[${item.title} ${keyGlyph(item.keys)}] ` : `${item.title} `
+}
+
+// Constant: COMMAND_SEP
+// The divider drawn before every entry but the first: a dim pipe and the
+// space that keeps it clear of the button.
+const COMMAND_SEP = "| "
+
+// Function: commandWidth
+// Columns the entry occupies: its label plus the leading separator when it
+// is not the first entry.
+function commandWidth(item, index) {
+	return commandLabel(item).length + (index > 0 ? COMMAND_SEP.length : 0)
+}
+
+// Function: isPrimary
+// True when the item is its context's most important action.
+function isPrimary(item) {
+	return Boolean(item?.primary)
+}
+
+// Function: createBehaviors
+// Builds the CommandItem behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const head = (_self, data) => (data.item?.keys ? `[${data.item.title} ` : `${data.item?.title ?? ""} `)
+	return {
+		// Web: the whole shorthand as one label.
+		itemLabel: (_self, data) => commandLabel(data.item),
+		// TUI: the dim pipe divider, then the bracket + title head, the
+		// accent key glyph, the closer.
+		itemSep: (_self, data) => (data.index > 0 ? COMMAND_SEP : ""),
+		itemSepFg: () => env?.textSecondaryFg,
+		itemHead: head,
+		itemFg: (_self, data) => (data.item?.keys ? env?.textFg : env?.textSecondaryFg),
+		keyText: (_self, data) => (data.item?.keys ? keyGlyph(data.item.keys) : ""),
+		keyFg: (_self, data) => (isPrimary(data.item) ? env?.accentFg : env?.accentSecondaryFg),
+		endText: (_self, data) => (data.item?.keys ? "] " : ""),
+	}
+}
+
+export { COMMAND_SEP, commandLabel, commandWidth, createBehaviors, isPrimary, keyGlyph }
+
+// EOF

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

@@ -0,0 +1,6 @@
+<box flexDirection="row" height="1" flexShrink="0" on:click="item.id!commandbar:run">
+	<text out="itemSep" out:fg="itemSepFg" wrapMode="none"></text>
+	<text out="itemHead" out:fg="itemFg" wrapMode="none"></text>
+	<text out="keyText" out:fg="keyFg" wrapMode="none"></text>
+	<text out="endText" out:fg="itemFg" wrapMode="none"></text>
+</box>

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

@@ -0,0 +1,7 @@
+<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>