@ssebastien/tcmd 0.0.0-stage → 0.1.0

package/src/js/tcmd/components/FilePreview.js

@@ -0,0 +1,110 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/FilePreview
+// FilePreview: inline preview of the entry under the cursor. Text files show
+// their leading content; other kinds show a metadata card. Renderer-agnostic
+// logic; `FilePreview.xml` / `FilePreview.html` are the presentations.
+//
+// Environment: `textFg`, `textSecondaryFg`, `textHeadingFg`.
+
+import { unwrap } from "select/state/cells"
+import { formatSize } from "./format.js"
+
+const KIND_LABELS = {
+	directory: "directory",
+	image: "image",
+	media: "audio/video",
+	text: "text",
+}
+
+// Function: cardText
+// Metadata card for non-text previews; `preview.details` (set by `stat`) adds
+// one indented line each.
+function cardText(preview) {
+	if (!preview) return ""
+	const lines = []
+	lines.push("")
+	lines.push(`  ${KIND_LABELS[preview.kind] ?? "file"}: ${preview.title}`)
+	lines.push(`  size: ${formatSize(preview.size)}`)
+	for (const detail of preview.details ?? []) lines.push(`  ${detail}`)
+	lines.push("")
+	return lines.join("\n")
+}
+
+// Function: hasCard
+// True when the preview is a metadata card (no text body).
+function hasCard(preview) {
+	return Boolean(preview && preview.text === null)
+}
+
+// Function: hasText
+// True when the preview carries a text body.
+function hasText(preview) {
+	return Boolean(preview?.text)
+}
+
+// Function: previewTitle
+// "Filename <EXT>" style title; falls back to the kind label when the file has
+// no extension.
+function previewTitle(preview) {
+	if (!preview) return "preview"
+	const badge = (preview.ext || KIND_LABELS[preview.kind] || "file").toUpperCase()
+	return `${preview.title}  <${badge}>`
+}
+
+// Function: entryCard
+// Metadata card for the entry the session did not preview: a directory, or a
+// file whose kind has no inline preview.
+function entryCard(entry) {
+	if (!entry) return ""
+	const lines = []
+	lines.push("")
+	lines.push(`  ${entry.isDir ? "directory" : "file"}: ${entry.name}${entry.isDir ? "/" : ""}`)
+	if (entry.isDir) lines.push("  open it to list its contents")
+	else lines.push(`  size: ${formatSize(entry.size)}`)
+	lines.push("")
+	return lines.join("\n")
+}
+
+// Function: headerTitle
+// The inspector title: the preview's own title, else the cursor entry.
+function headerTitle(preview, entry) {
+	if (preview) return previewTitle(preview)
+	if (entry) {
+		const badge = entry.isDir ? "DIR" : (entry.ext || "file").toUpperCase()
+		return `${entry.name}${entry.isDir ? "/" : ""}  <${badge}>`
+	}
+	return "inspector"
+}
+
+// Function: createBehaviors
+// Builds the FilePreview behavior map for the given renderer environment.
+function createBehaviors(env) {
+	return {
+		actions: () => " [Open O] [Edit E]",
+		actionsFg: () => env.textSecondaryFg,
+		cardText: (_self, data) => cardText(unwrap(data.preview)),
+		dimFg: () => env.textSecondaryFg,
+		emptyText: () => "  No file selected\n  Move the cursor or press v",
+		entryText: (_self, data) => entryCard(unwrap(data.entry)),
+		hasCard: (_self, data) => hasCard(unwrap(data.preview)),
+		// The metadata card fills in whenever there is a cursor entry but no
+		// preview payload (a directory, or a non-text file).
+		hasEntryCard: (_self, data) => !unwrap(data.preview) && Boolean(unwrap(data.entry)),
+		hasText: (_self, data) => hasText(unwrap(data.preview)),
+		headerTitle: (_self, data) => headerTitle(unwrap(data.preview), unwrap(data.entry)),
+		isEmpty: (_self, data) => !unwrap(data.preview) && !unwrap(data.entry),
+		previewText: (_self, data) => unwrap(data.preview)?.text ?? "",
+		previewTitle: (_self, data) => previewTitle(unwrap(data.preview)),
+		previewTitleColor: () => env.textHeadingFg,
+		show: (_self, data) => Boolean(unwrap(data.show)),
+		textFg: () => env.textFg,
+	}
+}
+
+export { cardText, createBehaviors, entryCard, hasCard, hasText, headerTitle, previewTitle }
+
+// EOF

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

@@ -0,0 +1,10 @@
+<box when="show" out:title="headerTitle" out:titleColor="previewTitleColor" border borderStyle="rounded"
+     flexDirection="column" flexGrow="1" overflow="hidden">
+	<scrollbox flexGrow="1">
+		<text when="hasText" out="previewText" out:fg="textFg"></text>
+		<text when="hasCard" out="cardText" out:fg="dimFg"></text>
+		<text when="hasEntryCard" out="entryText" out:fg="dimFg"></text>
+		<text when="isEmpty" out="emptyText" out:fg="dimFg"></text>
+	</scrollbox>
+	<box height="1"><text out="actions" out:fg="actionsFg"></text></box>
+</box>

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

@@ -0,0 +1,5 @@
+<li class="file-row" out:class="rowClass" on:click="paneId:paneId,index:index!list:select">
+	<span class="marker" out="rowMarker"></span>
+	<span class="name" out:class="rowNameClass" out="rowName"></span>
+	<span class="size" out="rowSize"></span>
+</li>

package/src/js/tcmd/components/FileRow.js

@@ -0,0 +1,135 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/FileRow
+// File listing row behaviors. Read `{ item: entry, index, currentRow,
+// markedRow, active, paneId }`, the same bag shape in both engines.
+// `currentRow`/`markedRow` are plain per-row booleans snapshotted by the
+// `fileRows` builder (see `rows.js`); `active` is the pane-focus cell, read
+// with `unwrap` at the point of use.
+//
+// Environment: `cursorBg`, `cursorInactiveBg`, `currentClass`,
+// `accentSecondaryFg`, `accentFg`, `linkFg`, `dirFg`, `devFg`, `fileFg`,
+// `textSecondaryFg`, `dirClass`, `icons` (show Nerd Font icons).
+
+import { unwrap } from "select/state/cells"
+import { formatSize } from "./format.js"
+import { iconFor } from "./icons.js"
+
+// Function: rowName
+// The entry name with the directory slash (the icon is its own slot, so it
+// can be dimmer than the name — see `rowIcon`).
+function rowName(entry) {
+	if (!entry) return ""
+	return entry.isDir ? `${entry.name}/` : entry.name
+}
+
+// Function: rowIcon
+// The entry's Nerd Font icon, empty when the renderer environment keeps the
+// rows icon-free.
+function rowIcon(entry, icons) {
+	return icons ? iconFor(entry) : ""
+}
+
+// Function: rowSize
+function rowSize(entry) {
+	if (!entry) return ""
+	return entry.isDir ? "<dir>" : formatSize(entry.size)
+}
+
+// Function: isCurrent
+function isCurrent(index, cursor) {
+	return index === cursor
+}
+
+// Function: isMarked
+function isMarked(entry, marked) {
+	return Boolean(entry && marked?.has?.(entry.path))
+}
+
+// Function: rowMarker
+// The 2-char row marker: "*" for a marked row, ">" for the cursor row — marks
+// win, so a marked-and-current row still reads as marked.
+function rowMarker(data) {
+	return rowIsMarked(data) ? "* " : rowCurrent(data) ? "> " : "  "
+}
+
+// Function: rowCurrent
+// Whether the row is the pane cursor. The plain `currentRow` flag (snapshotted
+// by the row builder) wins; otherwise fall back to comparing the row index
+// against the shared cursor cell (an unknown index never reads as current).
+// Because the flag is plain, a cursor move rewrites only the two changed row
+// bags instead of re-rendering every row.
+function rowCurrent(data) {
+	if (data.currentRow !== undefined) return data.currentRow === true
+	if (data.index === undefined) return false
+	return isCurrent(data.index, unwrap(data.cursor))
+}
+
+// Function: rowIsMarked
+// Whether the row's entry is marked. `bag.markedRow` (a plain per-row boolean)
+// wins; otherwise compare against the shared marked set.
+function rowIsMarked(data) {
+	if (data.markedRow !== undefined) return data.markedRow === true
+	return isMarked(data.item, unwrap(data.marked))
+}
+
+// Function: nameFg
+// The listing color for an entry: a symlink reads as a link, a directory as a
+// directory, a device node as a device, otherwise the plain file color.
+// Symlinks win over directories, matching `dircolors` (a link to a directory
+// renders as a link).
+function nameFg(item, env) {
+	if (item?.isSymlink) return env.linkFg
+	if (item?.isDir) return env.dirFg
+	if (item?.isDevice) return env.devFg
+	return env.fileFg
+}
+
+// Function: rowNameFg
+// The name color for a row: a marked row reads orange (the selection signal),
+// the cursor row the bright heading color, otherwise the entry's kind color.
+// Marks win over the cursor so a marked-and-current row still reads as
+// marked, the same precedence the row marker follows.
+function rowNameFg(data, env) {
+	if (rowIsMarked(data)) return env.accentSecondaryFg
+	if (rowCurrent(data)) return env.textHeadingFg
+	return nameFg(data.item, env)
+}
+
+// Function: createBehaviors
+// Builds the FileRow behavior map for the given renderer environment.
+function createBehaviors(env) {
+	return {
+		rowBg: (_self, data) => {
+			if (rowCurrent(data)) {
+				// The active pane's cursor is the strong accent; the inactive
+				// pane keeps a muted cursor so focus is visible from the row
+				// alone. A missing `active` (web, single-pane hosts) reads as
+				// active.
+				return unwrap(data.active) === false ? env.cursorInactiveBg : env.cursorBg
+			}
+			if (rowIsMarked(data)) return env.accentSecondaryBg
+			return undefined
+		},
+		rowClass: (_self, data) => (rowCurrent(data) ? env.currentClass : null),
+		// The icon is its own slot so it can sit dimmer than the name; it
+		// collapses when the environment keeps rows icon-free.
+		hasIcon: () => Boolean(env.icons),
+		rowIcon: (_self, data) => rowIcon(data.item, Boolean(env.icons)),
+		rowIconFg: () => env.textSecondaryFg,
+		rowMarker: (_self, data) => rowMarker(data),
+		rowMarkerFg: (_self, data) => (rowIsMarked(data) ? env.accentSecondaryFg : env.accentFg),
+		rowName: (_self, data) => rowName(data.item),
+		rowNameClass: (_self, data) => (data.item?.isDir ? env.dirClass : null),
+		rowNameFg: (_self, data) => rowNameFg(data, env),
+		rowSize: (_self, data) => rowSize(data.item),
+		rowSizeFg: () => env.textSecondaryFg,
+	}
+}
+
+export { createBehaviors, isMarked, nameFg, rowIcon, rowName, rowNameFg, rowSize }
+
+// EOF

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

@@ -0,0 +1,10 @@
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="paneId:paneId,index:index!list:select">
+	<text out="rowMarker" width="2" out:fg="rowMarkerFg"></text>
+	<box flexGrow="1" minWidth="0" overflow="hidden" flexDirection="row" columnGap="1">
+		<text out="rowIcon" out:fg="rowIconFg" wrapMode="none" when="hasIcon"></text>
+		<text out="rowName" out:fg="rowNameFg" wrapMode="none" truncate="true"></text>
+	</box>
+	<box width="9" justifyContent="flex-end">
+		<text out="rowSize" out:fg="rowSizeFg" wrapMode="none"></text>
+	</box>
+</box>

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

@@ -0,0 +1,6 @@
+<div class="filter-bar" when="visible">
+	<span class="filter-prompt" out="prompt"></span>
+	<input when="editing" ref="query" inout="query" class="filter-input" />
+	<span when="applied" class="filter-label" out="label"></span>
+	<span class="filter-alert" out="alert"></span>
+</div>

package/src/js/tcmd/components/FilterBar.js

@@ -0,0 +1,50 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-30
+
+// Module: tcmd/components/FilterBar
+// FilterBar: the fuzzy filter indicator, folded into the pane header so it
+// never shifts the listing. While the pane owns the filter input
+// (`filtering === paneId`) it shows a compact focused input bound to the pane's
+// `query`; once accepted it degrades to the same `/ query` indication, so the
+// pane is navigable again and the filter can still be cleared with Esc. When
+// the query matches no entry it shows a `no match` alert. The key hints live in
+// the command bar, not here.
+//
+// Environment: `accentFg` (the applied label), `textSecondaryFg` (the `/`
+// prompt), `warningFg` (the no-match alert).
+
+import { unwrap } from "select/state/cells"
+
+// Function: createBehaviors
+// Builds the FilterBar behavior map for the given renderer environment.
+function createBehaviors(env) {
+	// The pane that owns the input is the one typing into it.
+	const editing = (_self, data) => unwrap(data.filtering) === unwrap(data.paneId)
+	const queryText = (_self, data) => `${unwrap(data.query) ?? ""}`
+	const activeQuery = (self, data) => queryText(self, data).trim()
+	const matchCount = (_self, data) => (unwrap(data.entries) ?? []).length
+	return {
+		// The row exists while editing or once a non-empty filter is applied.
+		alert: (self, data) =>
+			activeQuery(self, data).length > 0 && matchCount(self, data) === 0 ? "no match" : "",
+		alertFg: () => env.warningFg,
+		applied: (self, data) => !editing(self, data) && activeQuery(self, data).length > 0,
+		editing,
+		focused: editing,
+		// The bare query (shared with the web presentation).
+		label: (self, data) => queryText(self, data),
+		labelFg: () => env.accentFg,
+		// TUI: the static label renders the full `/ query`, so the editing
+		// input and the accepted state read the same.
+		labelText: (self, data) => `/ ${queryText(self, data)}`,
+		prompt: () => "/ ",
+		promptFg: () => env.textSecondaryFg,
+		visible: (self, data) => editing(self, data) || activeQuery(self, data).length > 0,
+	}
+}
+
+export { createBehaviors }
+
+// EOF

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

@@ -0,0 +1,6 @@
+<box when="visible" flexDirection="row" height="1" flexShrink="0">
+	<text out="prompt" out:fg="promptFg"></text>
+	<input when="editing" ref="query" inout="query" out:focused="focused" width="14" height="1"></input>
+	<text when="applied" out="labelText" out:fg="labelFg" wrapMode="none" truncate="true"></text>
+	<text out="alert" out:fg="alertFg" wrapMode="none"></text>
+</box>

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

@@ -0,0 +1,11 @@
+<box when="open" width="100%" height="100%" alignItems="center" justifyContent="center">
+	<box width="72%" height="82%" border borderStyle="rounded"
+	     out:title="title" out:titleColor="titleFg" out:borderColor="borderFg"
+	     out:backgroundColor="bg" flexDirection="column"
+	     paddingLeft="2" paddingRight="2" paddingTop="1" paddingBottom="1">
+		<scrollbox flexGrow="1">
+			<text out="text" out:fg="textFg"></text>
+		</scrollbox>
+		<text out="hint" out:fg="dimFg"></text>
+	</box>
+</box>

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

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

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

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

@@ -0,0 +1,4 @@
+<box flexDirection="row" height="1" out:backgroundColor="rowBg" on:click="item.id!palette:run">
+	<text out="rowMarker" width="2" out:fg="rowFg"></text>
+	<text out="paletteLabel" flexGrow="1" out:fg="rowFg" wrapMode="none" truncate="true"></text>
+</box>

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

@@ -0,0 +1 @@
+<nav out:class="listClass" out="rows"></nav>

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

@@ -0,0 +1 @@
+<box out="rows" flexDirection="row" height="1"></box>

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

@@ -0,0 +1,3 @@
+<div class="summary" ref="box">
+	<span out="line" class="summary-line"></span>
+</div>

package/src/js/tcmd/components/Summary.js

@@ -0,0 +1,77 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/Summary
+// PathSummary: one compact line with entry counts and disk availability.
+// Renderer-agnostic logic; `Summary.xml` / `Summary.html` provide the TUI and
+// web presentations.
+//
+// Environment (injected by the renderer binding):
+// - `lineFg`: color/token for the summary text (bound by the TUI presentation)
+// - `width(self)`: pane width in cells (optional; defaults to 0)
+// - `elide(text, width)`: truncate to the pane width (optional; defaults to
+//   the full text)
+// - `measure(text)`: display width of `text` (optional; defaults to
+//   `text.length`)
+
+import { unwrap } from "select/state/cells"
+import { formatCounts, formatDisk, formatSize } from "./format.js"
+
+// Constant: INDENT
+// Leading inset so the summary aligns with the detail line above it.
+const INDENT = "  "
+
+// Function: summaryText
+// The full, untruncated summary line for `entries` and `disk`.
+function summaryText(entries, disk) {
+	let text = formatCounts(entries)
+	const diskText = formatDisk(disk)
+	if (diskText) text += ` · ${diskText}`
+	return `${INDENT}${text}`
+}
+
+// Function: summaryCounts
+// Just the counts part, the first thing a summary drops information for.
+function summaryCounts(entries) {
+	return formatCounts(entries)
+}
+
+// Function: summaryShortDisk
+// Compact disk availability, e.g. "12G free".
+function summaryShortDisk(disk) {
+	return disk ? `${formatSize(disk.free)} free` : ""
+}
+
+// Function: createBehaviors
+// Builds the Summary behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const measure = env.measure ?? ((text) => `${text}`.length)
+	return {
+		line: (self, data) => {
+			const text = summaryText(unwrap(data.entries), unwrap(data.disk))
+			const width = env.width ? env.width(self) : 0
+			return env.elide ? env.elide(text, width) : text
+		},
+		lineFg: () => env.lineFg,
+		// TUI: degrade by information value instead of chopping mid-token:
+		// full line -> short disk -> counts only -> elided counts.
+		priorityLine: (self, data) => {
+			const entries = unwrap(data.entries)
+			const disk = unwrap(data.disk)
+			const width = env.width ? env.width(self) : 0
+			const full = summaryText(entries, disk)
+			if (!width || measure(full) <= width) return full
+			const counts = `${INDENT}${summaryCounts(entries)}`
+			const short = disk ? `${counts} · ${summaryShortDisk(disk)}` : counts
+			if (measure(short) <= width) return short
+			if (measure(counts) <= width) return counts
+			return env.elide ? env.elide(counts, width) : counts
+		},
+	}
+}
+
+export { createBehaviors, summaryCounts, summaryShortDisk, summaryText }
+
+// EOF

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

@@ -0,0 +1,3 @@
+<box ref="box" flexDirection="row" height="1" overflow="hidden">
+	<text out="priorityLine" out:fg="lineFg" wrapMode="none" truncate="true"></text>
+</box>

package/src/js/tcmd/components/bind.js

@@ -0,0 +1,20 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/components/bind
+// Binds shared component logic to a renderer template. Both select.js and
+// select.tui implement the same `ui.component(name).does(behaviors).using(source)`
+// contract, so the catalogues share this one binding idiom and only differ in
+// the `ui` runtime they pass in.
+
+// Function: bind
+// Returns the component `name` bound to `source` with `behaviors`.
+function bind(ui, name, source, behaviors) {
+	return ui.component(name).does(behaviors).using(source)
+}
+
+export { bind }
+
+// EOF