@ssebastien/tcmd 0.0.0-stage → 0.1.1

package/src/js/tcmd/tui/catalogue.js

@@ -0,0 +1,300 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/tui/catalogue
+// Binds the shared component logic in `tcmd/components` to the TUI (`.xml`)
+// presentations and registers them with the select.tui catalogue. Tags in
+// templates are matched case-insensitively by select.tui.
+//
+// List rows are rendered with the same `Component.map` primitive as the web:
+// each row component (`.xml`) is bound here and referenced by its parent's
+// `rows` environment. Components sharing a presentation bind the same source
+// (`Breadcrumbs` uses `RowList.xml`).
+//
+// TUI-only components (`Help`) live in `tui/` and are registered here only.
+
+import { extend, ui } from "select.tui"
+import { unwrap } from "select/state/cells"
+import bookmarkListXml from "../components/BookmarkList.xml" with { type: "text" }
+import bookmarkRowXml from "../components/BookmarkRow.xml" with { type: "text" }
+import commandBarXml from "../components/CommandBar.xml" with { type: "text" }
+import commandArgRowXml from "../components/CommandArgRow.xml" with { type: "text" }
+import commandItemXml from "../components/CommandItem.xml" with { type: "text" }
+import commandPanelXml from "../components/CommandPanel.xml" with { type: "text" }
+import commandPaletteXml from "../components/CommandPalette.xml" with { type: "text" }
+import confirmXml from "../components/Confirm.xml" with { type: "text" }
+import crumbXml from "../components/Crumb.xml" with { type: "text" }
+import entryDetailXml from "../components/EntryDetail.xml" with { type: "text" }
+import fileListXml from "../components/FileList.xml" with { type: "text" }
+import filePreviewXml from "../components/FilePreview.xml" with { type: "text" }
+import fileRowXml from "../components/FileRow.xml" with { type: "text" }
+import filterBarXml from "../components/FilterBar.xml" with { type: "text" }
+import helpXml from "../components/Help.xml" with { type: "text" }
+import paletteRowXml from "../components/PaletteRow.xml" with { type: "text" }
+import rowListXml from "../components/RowList.xml" with { type: "text" }
+import summaryXml from "../components/Summary.xml" with { type: "text" }
+
+import {
+	bind,
+	bookmarkListBehaviors,
+	bookmarkRowBehaviors,
+	bookmarkRows,
+	breadcrumbsBehaviors,
+	commandBarBehaviors,
+	commandArgRowBehaviors,
+	commandItemBehaviors,
+	commandItemRows,
+	commandBarMarksItem,
+	commandPanelBehaviors,
+	commandPaletteBehaviors,
+	confirmBehaviors,
+	crumbBehaviors,
+	crumbRows,
+	entryDetailBehaviors,
+	fileListBehaviors,
+	filePreviewBehaviors,
+	fileRowBehaviors,
+	fileRows,
+	fileWindow,
+	filterBarBehaviors,
+	iconsEnabled,
+	paletteRowBehaviors,
+	paletteRows,
+	panelArgRows,
+	panelOpRows,
+	summaryBehaviors,
+} from "../components/index.js"
+import { createBehaviors as helpBehaviors } from "./help.js"
+import { INSPECTOR_INLINE_WIDTH } from "./frame.js"
+import { tuiTheme } from "./theme.js"
+
+let registered = false
+
+// Function: tuiEnv
+// The TUI renderer environment: OpenTUI colors plus TUI-only hooks.
+function tuiEnv() {
+	return {
+		accentBg: tuiTheme.accentBg,
+		accentFg: tuiTheme.accentFg,
+		accentSecondaryBg: tuiTheme.accentSecondaryBg,
+		accentSecondaryFg: tuiTheme.accentSecondaryFg,
+		borderPrimaryActiveFg: tuiTheme.borderPrimaryActiveFg,
+		borderPrimaryFg: tuiTheme.borderPrimaryFg,
+		borderSecondaryActiveFg: tuiTheme.borderSecondaryActiveFg,
+		borderSecondaryFg: tuiTheme.borderSecondaryFg,
+		cursorBg: tuiTheme.cursorBg,
+		cursorInactiveBg: tuiTheme.cursorInactiveBg,
+		devFg: tuiTheme.devFg,
+		dirFg: tuiTheme.dirFg,
+		errorBg: tuiTheme.errorBg,
+		errorFg: tuiTheme.errorFg,
+		fileFg: tuiTheme.fileFg,
+		// Nerd Font icons in rows, on unless `TCMD_ICONS` opts out.
+		icons: iconsEnabled(process.env),
+		lineFg: tuiTheme.textSecondaryFg,
+		linkFg: tuiTheme.linkFg,
+		mutedBg: tuiTheme.mutedBg,
+		overlayBg: tuiTheme.overlayBg,
+		selectionBg: tuiTheme.selectionBg,
+		surfaceBg: tuiTheme.surfaceBg,
+		textFg: tuiTheme.textFg,
+		textHeadingFg: tuiTheme.textHeadingFg,
+		textSecondaryFg: tuiTheme.textSecondaryFg,
+		tipBg: tuiTheme.tipBg,
+		tipFg: tuiTheme.tipFg,
+		warningBg: tuiTheme.warningBg,
+		warningFg: tuiTheme.warningFg,
+	}
+}
+
+// Function: measure
+// Display width of a string, counting wide CJK/emoji cells as two.
+function measure(text) {
+	return globalThis.Bun?.stringWidth ? globalThis.Bun.stringWidth(text) : `${text}`.length
+}
+
+// Function: elide
+// Truncate `text` to `width` columns with a trailing ellipsis.
+function elide(text, width) {
+	if (width < 12 || measure(text) <= width) return text
+	return `${text.slice(0, Math.max(0, width - 1))}…`
+}
+
+// Function: paneWidth
+// Content width of a pane from the instance box, falling back to a viewport
+// estimate (panes share the width, minus the inspector when inline) because
+// the box geometry is unresolved when a behavior first runs. The next render
+// uses the real width.
+function paneWidth(self) {
+	const own = Math.floor(self.ref.box?.width ?? 0)
+	if (own > 0) return own
+	const total = Math.floor(self.ctx?.width ?? 0)
+	if (total <= 0) return 0
+	const columns = total >= INSPECTOR_INLINE_WIDTH ? 3 : 2
+	return Math.max(12, Math.floor(total / columns) - 6)
+}
+
+// Edge fractions of the viewport kept as a scroll margin: the view nudges one
+// line once the cursor enters the bottom or top quarter.
+const SCROLL_LOW = 0.25
+const SCROLL_HIGH = 0.75
+
+// Keep the given row index inside the scrollbox viewport. A jump (PageUp/Down,
+// Home/End, click) first clamps the view so the cursor stays visible; then, for
+// line-by-line movement, the view scrolls one line at a time once the cursor is
+// more than 75% down or less than 25% up, when more lines remain off-screen.
+// `total` is the row count used to tell whether the view can still scroll.
+function keepVisible(box, index, total) {
+	if (process.env?.TCMD_SCROLL_DEBUG && box && box.height) {
+		require("node:fs").appendFileSync(
+			"/tmp/opencode/tcmd-scroll.log",
+			`index=${index} total=${total} view=${Math.floor(box.height)} scrollTop=${box.scrollTop}\n`,
+		)
+	}
+	if (!box || !box.height) return box?.scrollTop ?? 0
+	const view = Math.max(1, Math.floor(box.height))
+	const content = total ?? box.scrollHeight ?? view
+	const maxTop = Math.max(0, content - view)
+	let top = Math.max(0, Math.min(box.scrollTop ?? 0, maxTop))
+	if (index < top) top = index
+	else if (index >= top + view) top = index - view + 1
+	const pos = index - top
+	if (pos > SCROLL_HIGH * view && top < maxTop) top += 1
+	else if (pos < SCROLL_LOW * view && top > 0) top -= 1
+	return top
+}
+
+// Keep the file-list cursor row inside the viewport. When the list is windowed
+// (a `viewport` height is threaded down) the scrollbox holds only the window,
+// so it scrolls to the cursor's index inside that window against the window
+// length; otherwise it scrolls the full listing.
+function fileListScrollTop(self, data) {
+	const viewport = unwrap(data.viewport)
+	if (viewport > 0) {
+		const { local, len } = fileWindow(data, viewport)
+		return keepVisible(self.ref.list, local, len)
+	}
+	return keepVisible(self.ref.list, unwrap(data.cursor) ?? 0, unwrap(data.entries)?.length ?? 0)
+}// Keep the palette selection inside its viewport.
+function paletteScrollTop(self, data) {
+	return keepVisible(self.ref.list, unwrap(data.selected) ?? 0, unwrap(data.items)?.length ?? 0)
+}
+
+// Keep the bookmark picker selection inside its viewport.
+function bookmarkScrollTop(self, data) {
+	return keepVisible(self.ref.list, unwrap(data.selected) ?? 0, unwrap(data.items)?.length ?? 0)
+}
+
+// Keep the command panel's argument cursor inside its viewport.
+function panelArgScrollTop(self, data) {
+	return keepVisible(self.ref.args, unwrap(data.argCursor) ?? 0, unwrap(data.rows)?.length ?? 0)
+}
+
+// Function: commandBarRows
+// Appends the active pane's marked count as a trailing dimmed entry, then
+// maps the items to rows. The entries wrap onto as many rows as the width
+// demands; nothing is trimmed.
+function commandBarRows(commandItem) {
+	const base = commandItemRows(commandItem)
+	return (self, data) => {
+		const items = unwrap(data.items) ?? []
+		const marks = commandBarMarksItem(data)
+		return base(self, { ...data, items: marks ? [...items, marks] : items })
+	}
+}
+
+// Function: createComponents
+// Binds every shared component to its `.xml` presentation.
+function createComponents() {
+	const env = tuiEnv()
+	const commandItem = bind(ui, "CommandItem", commandItemXml, commandItemBehaviors(env))
+	const commandArgRow = bind(ui, "CommandArgRow", commandArgRowXml, commandArgRowBehaviors(env))
+	const crumb = bind(ui, "Crumb", crumbXml, crumbBehaviors(env))
+	const fileRow = bind(ui, "FileRow", fileRowXml, fileRowBehaviors(env))
+	const filterBar = bind(ui, "FilterBar", filterBarXml, filterBarBehaviors(env))
+	const paletteRow = bind(ui, "PaletteRow", paletteRowXml, paletteRowBehaviors(env))
+	const bookmarkRow = bind(ui, "BookmarkRow", bookmarkRowXml, bookmarkRowBehaviors(env))
+	return {
+		BookmarkRow: bookmarkRow,
+		CommandArgRow: commandArgRow,
+		CommandItem: commandItem,
+		Crumb: crumb,
+		FileRow: fileRow,
+		PaletteRow: paletteRow,
+		Breadcrumbs: bind(ui, "Breadcrumbs", rowListXml, breadcrumbsBehaviors({
+			...env,
+			rows: crumbRows(crumb),
+		})),
+		BookmarkList: bind(ui, "BookmarkList", bookmarkListXml, bookmarkListBehaviors({
+			...env,
+			rows: bookmarkRows(bookmarkRow),
+			scrollTop: bookmarkScrollTop,
+		})),
+		CommandBar: bind(ui, "CommandBar", commandBarXml, commandBarBehaviors({
+			...env,
+			rows: commandBarRows(commandItem),
+		})),
+		CommandPanel: bind(ui, "CommandPanel", commandPanelXml, commandPanelBehaviors({
+			...env,
+			opRows: panelOpRows(commandArgRow),
+			argRows: panelArgRows(commandArgRow),
+			argScrollTop: panelArgScrollTop,
+		})),
+		CommandPalette: bind(ui, "CommandPalette", commandPaletteXml, commandPaletteBehaviors({
+			...env,
+			rows: paletteRows(paletteRow),
+			scrollTop: paletteScrollTop,
+		})),
+		Confirm: bind(ui, "Confirm", confirmXml, confirmBehaviors(env)),
+		EntryDetail: bind(ui, "EntryDetail", entryDetailXml, entryDetailBehaviors({
+			...env,
+			width: paneWidth,
+			measure,
+			elide,
+		})),
+		FileList: bind(ui, "FileList", fileListXml, fileListBehaviors({
+			...env,
+			rows: fileRows(fileRow),
+			scrollTop: fileListScrollTop,
+		})),
+		FilePreview: bind(ui, "FilePreview", filePreviewXml, filePreviewBehaviors(env)),
+		FilterBar: filterBar,
+		Help: bind(ui, "Help", helpXml, helpBehaviors({ theme: tuiTheme })),
+		Summary: bind(ui, "Summary", summaryXml, summaryBehaviors({
+			...env,
+			width: paneWidth,
+			measure,
+			elide,
+		})),
+	}
+}
+
+const components = createComponents()
+
+// Function: registerComponents
+// Idempotent registration of the parent components as select.tui host tags.
+function registerComponents() {
+	if (registered) return components
+	registered = true
+	extend({
+		bookmarklist: components.BookmarkList,
+		breadcrumbs: components.Breadcrumbs,
+		commandbar: components.CommandBar,
+		commandpanel: components.CommandPanel,
+		commandpalette: components.CommandPalette,
+		confirm: components.Confirm,
+		entrydetail: components.EntryDetail,
+		filelist: components.FileList,
+		filepreview: components.FilePreview,
+		filterbar: components.FilterBar,
+		help: components.Help,
+		summary: components.Summary,
+	})
+	return components
+}
+
+export { components, fileListScrollTop, keepVisible, registerComponents }
+
+// EOF

package/src/js/tcmd/tui/frame.js

@@ -0,0 +1,269 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-02
+
+// Module: tcmd/tui/frame
+// TUI-only presentation behaviors for the workspace chrome: the responsive
+// breakpoints driven by the `uiSize` cell, the pane borders, header rules,
+// the command-bar geometry and the help overlay state. Everything here is
+// injected into the App binding; none of it lives in the shared
+// `components/` logic.
+
+import { unwrap } from "select/state/cells"
+import { DEFAULT_KEYMAP } from "../core/keymap.js"
+import { getCommands } from "../core/commands.js"
+import { commandBarMarksItem, commandBarRowCount, commandBarStatus } from "../components/CommandBar.js"
+
+// Below this the two-pane workspace is replaced by a resize hint.
+const MIN_WIDTH = 64
+const MIN_HEIGHT = 16
+// At or above this the inspector can sit beside the panes; below it becomes a
+// fullscreen overlay.
+const INSPECTOR_INLINE_WIDTH = 100
+
+// Function: sizeOf
+// Reads the viewport size from the App data, falling back to the renderer's
+// own dimensions so the gates work even when no `uiSize` cell is injected
+// (tests, web). Returns `null` when neither is known.
+function sizeOf(data, self) {
+	const size = unwrap(data?.uiSize)
+	if (size && (size.width || size.height)) return size
+	const width = Math.floor(self?.ctx?.width ?? 0)
+	const height = Math.floor(self?.ctx?.height ?? 0)
+	if (!width && !height) return null
+	return { width, height }
+}
+
+// Function: isNarrow
+// True when the viewport is known and too narrow for the inline inspector.
+function isNarrow(data, self) {
+	const size = sizeOf(data, self)
+	return Boolean(size && (size.width ?? 0) > 0 && size.width < INSPECTOR_INLINE_WIDTH)
+}
+
+// Function: commandBarRowsFor
+// The entries the bar currently shows: the context hints or the `bar`
+// commands, plus the active pane's marked count as a trailing entry.
+function commandBarRowsFor(data) {
+	const items = unwrap(data?.commandBarItems) ?? []
+	const marks = commandBarMarksItem(data)
+	return marks ? [...items, marks] : items
+}
+
+// Function: commandBarLines
+// Rows the wrapped command bar occupies at the current viewport (the bar
+// is inset one column from the viewport edge).
+function commandBarLines(data, self) {
+	const width = Math.floor(sizeOf(data, self)?.width ?? 0)
+	if (width <= 0) return 1
+	return commandBarRowCount(commandBarRowsFor(data), width - 1)
+}
+
+// Function: paneListHeight
+// Rows available to a pane's listing: the viewport height minus the identity
+// bar (1), the pane's own border (2), the pane header + rule (2), the entry
+// detail (2), the summary (1) and the wrapped command bar — eight chrome rows
+// plus the bar. Fed to the windowed `filelist` so a large directory mounts
+// only the visible slice. `0` means "unknown — render everything to measure".
+function paneListHeight(data, self) {
+	const height = Math.floor(sizeOf(data, self)?.height ?? 0)
+	if (height <= 0) return 0
+	// A notice or error swaps the keys for a one-line status.
+	const bar = commandBarStatus(data) ? 1 : commandBarLines(data, self)
+	return Math.max(1, height - 8 - bar)
+}
+
+// Function: mixHex
+// Linear interpolation between two `#rrggbb` colours at `t` in [0, 1]. A
+// missing colour (the mono theme) yields `undefined` so the whole run falls
+// back to the terminal default.
+function mixHex(from, to, t) {
+	if (!from || !to) return undefined
+	const channel = (index) => {
+		const a = Number.parseInt(from.slice(index, index + 2), 16)
+		const b = Number.parseInt(to.slice(index, index + 2), 16)
+		return Math.round(a + (b - a) * t)
+			.toString(16)
+			.padStart(2, "0")
+	}
+	return `#${channel(1)}${channel(3)}${channel(5)}`
+}
+
+// Function: shineOf
+// One `{ letter, fg }` per letter of a brand word, interpolating `from` → `to`
+// across it so the word reads as a gradient; a missing colour (mono theme)
+// leaves every `fg` undefined and the run falls back to the terminal default.
+function shineOf(letters, from, to) {
+	return `${letters}`.split("").map((letter, index, all) => ({
+		letter,
+		fg: mixHex(from, to, index / (all.length - 1)),
+	}))
+}
+
+// Function: createFrameBehaviors
+// Behaviors for the App root and its chrome.
+function createFrameBehaviors(env) {
+	const tiny = shineOf("Tiny", env.theme.brandTinyFrom, env.theme.brandTinyTo)
+	const cmd = shineOf("Cmd", env.theme.brandCmdFrom, env.theme.brandCmdTo)
+	return {
+		// Identity bar: "Tiny" shimmers along the brand blues, "Cmd" along a
+		// brighter orange than the mark accent, and the host trail follows in
+		// the heading colour. Everything else on screen belongs to the user's
+		// files; this one row is the app's own.
+		brandT: () => tiny[0].letter,
+		brandTFg: () => tiny[0].fg,
+		brandI: () => tiny[1].letter,
+		brandIFg: () => tiny[1].fg,
+		brandN: () => tiny[2].letter,
+		brandNFg: () => tiny[2].fg,
+		brandY: () => tiny[3].letter,
+		brandYFg: () => tiny[3].fg,
+		brandC: () => cmd[0].letter,
+		brandCFg: () => cmd[0].fg,
+		brandM: () => cmd[1].letter,
+		brandMFg: () => cmd[1].fg,
+		brandD: () => cmd[2].letter,
+		brandDFg: () => cmd[2].fg,
+		topBar: (_self, data) => {
+			const host = `${unwrap(data.appHost) ?? ""}`.trim()
+			return host ? ` - ${host} ` : " "
+		},
+		topBarFg: () => env.theme.textHeadingFg,
+
+		// Responsive gates. `uiSize` is absent in tests and the web, so the
+		// workspace renders normally there.
+		tooSmall: (self, data) => {
+			const size = sizeOf(data, self)
+			if (!size) return false
+			return (size.width ?? MIN_WIDTH) < MIN_WIDTH || (size.height ?? MIN_HEIGHT) < MIN_HEIGHT
+		},
+		minSizeTitle: () => "Terminal too small",
+		minSizeHint: (self, data) => {
+			const size = sizeOf(data, self) ?? { width: 0, height: 0 }
+			return `need ${MIN_WIDTH}x${MIN_HEIGHT}, have ${size.width ?? 0}x${size.height ?? 0}`
+		},
+		// The min-size gate text uses the heading/secondary text tokens.
+		titleFg: () => env.theme.textHeadingFg,
+		dimFg: () => env.theme.textSecondaryFg,
+
+		// Each pane is a complete box. Both draw all four edges (the middle
+		// shows two adjacent rules) so each pane's border colour can track its
+		// own focus independently — a shared edge would be owned by one pane
+		// and never highlight when the other is active.
+		leftBorder: () => ["top", "left", "bottom", "right"],
+		rightBorder: () => ["top", "left", "bottom", "right"],
+		// The header rule separates the pane header row from the listing body.
+		headRule: () => ["top"],
+
+		// The breadcrumb yields the pane header row to the filter while a
+		// filter is being edited or applied.
+		leftFilterOn: (_self, data) => Boolean(unwrap(data.leftFilter)),
+		rightFilterOn: (_self, data) => Boolean(unwrap(data.rightFilter)),
+
+		// The inline inspector shows when the preview is on and the viewport is
+		// wide enough; otherwise `v` opens the fullscreen viewer.
+		inspectorNarrow: (self, data) => isNarrow(data, self),
+		showInspectorInline: (self, data) => Boolean(unwrap(data.showPreview)) && !isNarrow(data, self),
+		showViewer: (self, data) => Boolean(unwrap(data.viewerOpen)) && isNarrow(data, self),
+
+		// Help overlay visibility; the content lives in `tui/Help.js` so the
+		// overlay has a single source of truth.
+		helpOpen: (_self, data) => Boolean(unwrap(data.helpOpen)),
+
+		// The windowed listing height for both panes (they share the row).
+		listViewport: (self, data) => paneListHeight(data, self),
+
+		// The command bar's height: one line for a status, otherwise as many
+		// rows as the wrapped bracket shorthands need.
+		barHeight: (self, data) => (commandBarStatus(data) ? 1 : commandBarLines(data, self)),
+	}
+}
+
+// Function: keyGlyph
+// Human-readable glyph for a keymap chord ("↑", "⇧Tab", "^W", "PgUp").
+function keyGlyph(chord) {
+	const name = chord.key
+	const named = {
+		up: "↑",
+		down: "↓",
+		left: "←",
+		right: "→",
+		return: "↵",
+		enter: "↵",
+		space: "Space",
+		tab: "Tab",
+		pageup: "PgUp",
+		pagedown: "PgDn",
+		escape: "Esc",
+		backspace: "Bksp",
+		home: "Home",
+		end: "End",
+	}
+	let base = named[name] ?? (name.length === 1 ? name.toUpperCase() : `${name}`)
+	if (chord.ctrl) base = `^${base}`
+	if (chord.meta) base = `⌘${base}`
+	if (chord.shift && name !== "tab") base = `⇧${base}`
+	return base
+}
+
+// Constant: GROUP_ORDER / GROUP_TITLES
+// Help sections, in display order.
+const GROUP_ORDER = ["nav", "pane", "list", "bookmark", "view", "file", "panel", "palette", "filter", "app"]
+const GROUP_TITLES = {
+	app: "Session",
+	bookmark: "Bookmarks",
+	file: "Files",
+	filter: "Filter",
+	list: "Selection",
+	nav: "Navigation",
+	palette: "Commands",
+	panel: "Command panel",
+	pane: "Panes",
+	view: "View",
+}
+
+// Function: helpLines
+// Builds the categorized key reference from the keymap and the command
+// registry, so it can never drift from the actual bindings.
+function helpLines() {
+	const byId = new Map(getCommands().map((command) => [command.id, command]))
+	const groups = new Map()
+	const seen = new Set()
+	for (const binding of DEFAULT_KEYMAP) {
+		const command = byId.get(binding.command)
+		if (!command) continue
+		const group = binding.command.split(".")[0]
+		if (!groups.has(group)) groups.set(group, new Map())
+		const rows = groups.get(group)
+		if (!rows.has(binding.command)) rows.set(binding.command, { keys: [], title: command.title })
+		const row = rows.get(binding.command)
+		const glyph = keyGlyph(binding)
+		if (!row.keys.includes(glyph) && !seen.has(`${binding.command}:${glyph}`)) {
+			row.keys.push(glyph)
+			seen.add(`${binding.command}:${glyph}`)
+		}
+	}
+	const lines = []
+	for (const group of GROUP_ORDER) {
+		const rows = groups.get(group)
+		if (!rows) continue
+		lines.push(GROUP_TITLES[group] ?? group)
+		for (const row of rows.values()) {
+			lines.push(`  ${row.keys.join("/").padEnd(9)} ${row.title}`)
+		}
+		lines.push("")
+	}
+	return lines
+}
+
+export {
+	commandBarLines,
+	createFrameBehaviors,
+	helpLines,
+	INSPECTOR_INLINE_WIDTH,
+	isNarrow,
+	keyGlyph,
+	sizeOf,
+}
+// EOF

package/src/js/tcmd/tui/help.js

@@ -0,0 +1,32 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-02
+
+// Module: tcmd/tui/help
+// TUI-only behavior for the `?` key reference overlay. The content is built
+// from the live keymap and command registry (see `tui/frame.js`), so it
+// cannot drift from the actual bindings.
+
+import { unwrap } from "select/state/cells"
+import { helpLines } from "./frame.js"
+
+// Function: createBehaviors
+// Builds the Help behavior map for the given TUI environment.
+function createBehaviors(env) {
+	return {
+		bg: () => env.theme.surfaceBg,
+		borderFg: () => env.theme.borderPrimaryActiveFg,
+		dimFg: () => env.theme.textSecondaryFg,
+		hint: () => " Esc / ? close ",
+		open: (_self, data) => Boolean(unwrap(data.open)),
+		text: () => helpLines().join("\n"),
+		textFg: () => env.theme.textFg,
+		title: () => " Keys ",
+		titleFg: () => env.theme.textHeadingFg,
+	}
+}
+
+export { createBehaviors }
+
+// EOF