@ssebastien/tcmd 0.0.0-stage → 0.1.0

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

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

@@ -0,0 +1,16 @@
+<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/CommandPanel.js

@@ -0,0 +1,98 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-09
+
+// Module: tcmd/components/CommandPanel
+// CommandPanel: the Commando-style overlay (`m` / `:`). A filter input at the
+// top narrows the left operation list as you type (the matching command takes
+// the cursor); a right column shows the selected operation's arguments: one
+// header row per argument (its name and binding summary) and, for a selection,
+// one row per path with a `[x]`/`[ ]` toggle. A vertical rule divides the two
+// columns, a horizontal one separates them from the "runs" line below, which
+// shows the assembled command the draft maps to. The footer advertises the
+// panel keys. The row logic lives in `CommandArgRow.js`; this parent maps both
+// the operation list and the flattened argument rows.
+//
+// Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
+// (footer), `textHeadingFg` (title/sign), `accentFg` (preview),
+// `errorFg` (unrunnable preview), `opRows(self, data)` / `argRows(self, data)`
+// returning the keyed row lists, and `argScrollTop(self, data)` (TUI viewport
+// tracking).
+
+import { unwrap } from "select/state/cells"
+import { PANEL_FOCUS } from "../core/panel.js"
+
+// Function: panelTitle
+// " Command · copy " while an operation is selected (spaces so the title sits
+// clear of the border corners).
+function panelTitle(op) {
+	const name = unwrap(op)?.name
+	return name ? ` Command · ${name} ` : " Command "
+}
+
+// Function: panelFooter
+const PANEL_FOOTER = "type to filter   ⇥ args   Spc toggle   ↵ run   Esc close"
+
+// Function: panelSign
+// The prompt before the command filter input (a trailing space so the typed
+// text doesn't crowd the arrow; overridable per renderer).
+function panelSign() {
+	return "› "
+}
+
+// Function: createBehaviors
+// Builds the CommandPanel behavior map for the given renderer environment.
+function createBehaviors(env) {
+	// The assembled command line's colour, shared by the line and its "runs"
+	// label: the preview reads as an error until every required argument is
+	// filled.
+	const previewColor = (data) => (unwrap(data.runnable) === false ? env.errorFg ?? env.accentFg : env.accentFg)
+	const behaviors = {
+		bg: () => env.overlayBg,
+		borderFg: () => env.borderPrimaryActiveFg,
+		// Enter in a text field runs the operation (the App key handler routes
+		// Enter for the non-input cases).
+		confirm: (self) => self.pub("panel:confirm"),
+		// The argument value field appears only while a textual argument owns
+		// the cursor; otherwise the command filter input keeps focus.
+		fieldVisible: (_self, data) => Boolean(unwrap(data.textual)) && unwrap(data.focus) === PANEL_FOCUS.ARGS,
+		fieldFocused: (_self, data) => Boolean(unwrap(data.textual)) && unwrap(data.focus) === PANEL_FOCUS.ARGS,
+		fieldPrompt: (_self, data) => {
+			const row = unwrap(data.argRow)
+			return row?.type === "arg" ? `${row.name}: ` : ""
+		},
+		footer: () => PANEL_FOOTER,
+		footerFg: () => env.textSecondaryFg,
+		// Dividers: a vertical rule between the operation list and the argument
+		// sidebar, a horizontal one above the "runs" preview — both in the
+		// secondary border colour, like the pane header rules.
+		ruleFg: () => env.borderSecondaryFg,
+		sideRule: () => ["left"],
+		headRule: () => ["top"],
+		labelFg: () => env.textSecondaryFg,
+		focusArgs: (_self, data) => unwrap(data.focus) === PANEL_FOCUS.ARGS,
+		focusOps: (_self, data) => unwrap(data.focus) !== PANEL_FOCUS.ARGS,
+		open: (_self, data) => Boolean(unwrap(data.open)),
+		// The assembled command line the draft maps to, and its colour (see
+		// `previewColor`); the "runs" label wears the same colour so the two
+		// read as one block.
+		preview: (_self, data) => unwrap(data.command) ?? "",
+		previewFg: (_self, data) => previewColor(data),
+		previewLabel: () => "runs",
+		previewLabelFg: (_self, data) => previewColor(data),
+		// The filter input owns the keyboard while the panel is open and the
+		// command column is focused; typing narrows the operation list.
+		queryFocused: (_self, data) => Boolean(unwrap(data.open)) && unwrap(data.focus) !== PANEL_FOCUS.ARGS,
+		sign: () => panelSign(),
+		signFg: () => env.textHeadingFg,
+		title: (_self, data) => panelTitle(data.operation),
+		titleColor: () => env.textHeadingFg,
+	}
+	if (env?.opRows) behaviors.opRows = (_self, data) => env.opRows(self, data)
+	if (env?.argRows) behaviors.argRows = (_self, data) => env.argRows(self, data)
+	if (env?.argScrollTop) behaviors.argScrollTop = (self, data) => env.argScrollTop(self, data)
+	return behaviors
+}
+
+export { PANEL_FOOTER, createBehaviors, panelSign, panelTitle }

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

@@ -0,0 +1,35 @@
+<box when="open" width="100%" height="100%" alignItems="center" justifyContent="center">
+	<box width="80%" height="72%" border borderStyle="rounded"
+	     out:title="title" out:titleColor="titleColor" out:borderColor="borderFg"
+	     out:backgroundColor="bg" flexDirection="column">
+		<box flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+			<text out="sign" out:fg="signFg" wrapMode="none"></text>
+			<input ref="query" inout="query" flexGrow="1" height="1" out:focused="queryFocused" on:enter="confirm"></input>
+		</box>
+		<!-- Horizontal rule under the filter input. -->
+		<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
+		<box flexDirection="row" flexGrow="1" overflow="hidden" columnGap="1">
+			<scrollbox flexGrow="2">
+				<box out="opRows" flexDirection="column"></box>
+			</scrollbox>
+			<!-- Vertical rule between the operation list and the argument sidebar. -->
+			<box width="1" out:border="sideRule" out:borderColor="ruleFg"></box>
+			<scrollbox ref="args" flexGrow="3" out:scrollTop="argScrollTop">
+				<box out="argRows" flexDirection="column"></box>
+			</scrollbox>
+		</box>
+		<!-- Horizontal rule above the assembled command preview. -->
+		<box height="1" out:border="headRule" out:borderColor="ruleFg"></box>
+		<box flexDirection="column" paddingLeft="1" paddingRight="1" flexShrink="0" overflow="hidden">
+			<text out="previewLabel" out:fg="previewLabelFg" wrapMode="none"></text>
+			<text out="preview" out:fg="previewFg" wrapMode="word"></text>
+		</box>
+		<box when="fieldVisible" flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+			<text out="fieldPrompt" out:fg="labelFg" wrapMode="none"></text>
+			<input inout="value" flexGrow="1" height="1" out:focused="fieldFocused" on:enter="confirm"></input>
+		</box>
+		<box flexDirection="row" height="1" paddingLeft="1">
+			<text out="footer" out:fg="footerFg"></text>
+		</box>
+	</box>
+</box>

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

@@ -0,0 +1,3 @@
+<div class="confirm" when="visible">
+	<p out="text"></p>
+</div>

package/src/js/tcmd/components/Confirm.js

@@ -0,0 +1,36 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/components/Confirm
+// Confirm: a small y/n overlay for destructive operations (erase, overwrite).
+// Reads the session's `confirm` cell (`{ text } | null`) and shows the
+// pending question; App routes y/enter to `confirm.yes` and n/esc to
+// `confirm.no`.
+//
+// Environment: `overlayBg` (surface), `errorFg` (border), `textHeadingFg`
+// (text), `textSecondaryFg` (key hints).
+
+import { unwrap } from "select/state/cells"
+
+// Function: createBehaviors
+// Builds the Confirm behavior map for the given renderer environment.
+function createBehaviors(env) {
+	return {
+		bg: () => env.overlayBg,
+		borderFg: () => env.errorFg,
+		keysFg: () => env.textSecondaryFg,
+		text: (_self, data) => {
+			const pending = unwrap(data.confirm)
+			if (!pending) return ""
+			return `${pending.text ?? ""}  [y]es [n]o`
+		},
+		textFg: () => env.textHeadingFg,
+		visible: (_self, data) => Boolean(unwrap(data.confirm)),
+	}
+}
+
+export { createBehaviors }
+
+// EOF

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

@@ -0,0 +1,7 @@
+<box when="visible" width="100%" height="100%" alignItems="center" justifyContent="center">
+	<box width="60%" height="3" border borderStyle="rounded" title="Confirm"
+	     out:titleColor="keysFg" out:borderColor="borderFg" out:backgroundColor="bg"
+	     flexDirection="column" justifyContent="center" paddingLeft="1" paddingRight="1">
+		<text out="text" out:fg="textFg"></text>
+	</box>
+</box>

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

@@ -0,0 +1,4 @@
+<a class="crumb" href="#" out:class="crumbClass" on:click="path:item.path,paneId:paneId!crumbs:go">
+	<span out="crumbLabel"></span>
+	<span class="crumb-sep" out="crumbSep"></span>
+</a>

package/src/js/tcmd/components/Crumb.js

@@ -0,0 +1,48 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/Crumb
+// A single breadcrumb segment: its name, then a "/" separator (dimmed, and
+// omitted after the basename, which closes the path). Behaviors read
+// `{ item: segment, last, paneId }`, the same bag shape in both engines
+// (built by `Component.map`). The root segment renders as "/" alone.
+//
+// Environment: `textSecondaryFg`, `textHeadingFg`, `rootClass`, `childClass`.
+
+// Function: isRoot
+function isRoot(segment) {
+	return segment?.path === "/"
+}
+
+// Function: crumbLabel
+// The segment's display name: "/" for the root, the (possibly elided) name
+// otherwise, and "…" for the truncation marker (no path).
+function crumbLabel(segment) {
+	if (!segment) return ""
+	return isRoot(segment) ? "/" : `${segment.name}`
+}
+
+// Function: crumbSep
+// The "/" drawn after a segment — every one but the last (the basename).
+function crumbSep(segment, last) {
+	return last || isRoot(segment) ? "" : "/"
+}
+
+// Function: createBehaviors
+// Builds the Crumb behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const dim = (_self, data) => isRoot(data.item) || !data.item?.path
+	return {
+		crumbClass: (_self, data) => (isRoot(data.item) ? env.rootClass : env.childClass),
+		crumbLabel: (_self, data) => crumbLabel(data.item),
+		crumbSep: (_self, data) => crumbSep(data.item, data.last),
+		crumbSepFg: () => env.textSecondaryFg,
+		crumbFg: (_self, data) => (dim(_self, data) ? env.textSecondaryFg : env.textHeadingFg),
+	}
+}
+
+export { crumbLabel, crumbSep, createBehaviors, isRoot }
+
+// EOF

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

@@ -0,0 +1,4 @@
+<box flexDirection="row" height="1" flexShrink="0" on:click="path:item.path,paneId:paneId!crumbs:go">
+	<text out="crumbLabel" out:fg="crumbFg" wrapMode="none"></text>
+	<text when="crumbSep" out="crumbSep" out:fg="crumbSepFg" wrapMode="none"></text>
+</box>

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

@@ -0,0 +1,15 @@
+<div class="entry-detail">
+	<div class="entry-detail-line">
+		<span class="entry-detail-indent" out="detailIndent"></span>
+		<span class="entry-detail-marked" out="detailMarked"></span>
+		<span class="entry-detail-sep" when="detailSepTime" out="detailSep"></span>
+		<span class="entry-detail-time" out="detailTime"></span>
+		<span class="entry-detail-sep" when="detailSepType" out="detailSep"></span>
+		<span class="entry-detail-type" out:class="detailTypeClass" out="detailType"></span>
+		<span class="entry-detail-sep" when="detailSepSize" out="detailSep"></span>
+		<span class="entry-detail-size" out="detailSize"></span>
+		<span class="entry-detail-spacer" when="detailHasMode"></span>
+		<span class="entry-detail-sep" when="detailSepMode" out="detailSep"></span>
+		<span class="entry-detail-mode" out="detailMode"></span>
+	</div>
+</div>

package/src/js/tcmd/components/EntryDetail.js

@@ -0,0 +1,194 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-06
+
+// Module: tcmd/components/EntryDetail
+// EntryDetail: the detail line for the entry under a pane's cursor, shown just
+// above that pane's summary (directory) row. A single line,
+// `selected · date · type · size · rights`:
+//
+// - `selected` (the pane's marked count, above one) leads in the mark colour;
+// - `date` (mtime) and `size` are the numeric fields, drawn bright;
+// - `type` (file/dir/link/dev) is coloured like the listing;
+// - `rights` (permission mode) is accented.
+//
+// When the pane is too narrow the trailing blocks give way first (`rights`,
+// then `size`), keeping the date and type; the last block is elided if it
+// still overflows. Directories drop the size (they have none). Each block and
+// its separating rule is a separate slot so the pieces can carry their own
+// colour. Renderer-agnostic logic; the `.xml` / `.html` presentations lay it
+// out.
+
+import { unwrap } from "select/state/cells"
+import { formatMode, formatSize, formatTime } from "./format.js"
+
+// Constant: KIND_LABELS
+// Human labels for the entry-kind markers.
+const KIND_LABELS = { file: "file", directory: "dir", symlink: "link", device: "dev" }
+
+// Constant: SEP
+// Field delimiter, spaces included.
+const SEP = " · "
+
+// Constant: INDENT
+// Leading inset applied to the line.
+const INDENT = "  "
+
+// Constant: MIN_GAP
+// Least gap kept between the left fields and the right-aligned rights.
+const MIN_GAP = 2
+
+// Function: entryKind
+// "file" | "directory" | "symlink" | "device" for an entry.
+function entryKind(entry) {
+	if (entry?.isSymlink) return "symlink"
+	if (entry?.isDir) return "directory"
+	if (entry?.isDevice) return "device"
+	return "file"
+}
+
+// Function: typeColor
+// The listing colour for an entry's kind, mirroring `FileRow.nameFg`.
+function typeColor(entry, env) {
+	const kind = entryKind(entry)
+	if (kind === "symlink") return env.linkFg
+	if (kind === "directory") return env.dirFg
+	if (kind === "device") return env.devFg
+	return env.fileFg
+}
+
+// Function: detailBlocks
+// The ordered `{ key, text }` blocks for an entry: the marked count (when more
+// than one item is selected), date, type, size (files only) and rights,
+// skipping any empty one.
+function detailBlocks(entry, markedCount = 0) {
+	const blocks = []
+	if (markedCount > 1) blocks.push({ key: "marked", text: `${markedCount} selected` })
+	if (!entry) return blocks
+	const time = formatTime(entry.mtimeMs)
+	if (time) blocks.push({ key: "time", text: time })
+	blocks.push({ key: "type", text: KIND_LABELS[entryKind(entry)] })
+	if (!entry.isDir) blocks.push({ key: "size", text: formatSize(entry.size) })
+	const mode = formatMode(entry.mode)
+	if (mode) blocks.push({ key: "mode", text: mode })
+	return blocks
+}
+
+// Function: joinBlocks
+// Joins blocks with the field separator.
+function joinBlocks(blocks) {
+	return blocks.map((block) => block.text).join(SEP)
+}
+
+// Function: fitBlocks
+// Reserves the rights on the right and fits the left fields (date, type, size)
+// into the remaining room. When the pane is too narrow the size drops first,
+// then the rights, and the last left block is elided if it still overflows.
+// Returns the kept blocks in display order; `width <= 0` disables fitting.
+function fitBlocks(blocks, width, measure, elide) {
+	if (width <= 0) return blocks
+	const mode = blocks.find((block) => block.key === "mode") ?? null
+	let left = blocks.filter((block) => block.key !== "mode")
+	const fits = (list, avail) => measure(`${INDENT}${joinBlocks(list)}`) <= avail
+	const dropSize = () => {
+		left = left.filter((block) => block.key !== "size")
+	}
+
+	// Keep the rights pinned right if the left fields still fit beside them.
+	let keptMode = mode
+	if (keptMode) {
+		const reserve = measure(`${SEP}${keptMode.text}`) + MIN_GAP
+		if (!fits(left, width - reserve)) dropSize()
+		if (!fits(left, width - reserve)) keptMode = null
+	}
+
+	const avail = keptMode ? width - measure(`${SEP}${keptMode.text}`) - MIN_GAP : width
+	if (!fits(left, avail)) dropSize()
+	if (!fits(left, avail) && elide && left.length) {
+		const last = left[left.length - 1]
+		const head = left.slice(0, -1)
+		const headText = head.length ? `${INDENT}${joinBlocks(head)}${SEP}` : INDENT
+		left = [...head, { ...last, text: elide(last.text, Math.max(1, avail - measure(headText))) }]
+	}
+	return keptMode ? [...left, keptMode] : left
+}
+
+// Function: detailLine
+// Joined `selected · date · type · size · rights` line (the reference the
+// tests assert against; the templates render the fitted slots instead).
+function detailLine(entry, markedCount = 0) {
+	const blocks = detailBlocks(entry, markedCount)
+	return blocks.length ? `${INDENT}${joinBlocks(blocks)}` : ""
+}
+
+// Function: createBehaviors
+// Builds the EntryDetail behavior map for the given renderer environment.
+// `width(self)` / `measure` / `elide` are the optional viewport hooks; the
+// numeric fields resolve through `env.textFg` (bright), the type through
+// `typeColor`, the rights through `env.accentFg`, and the selected count
+// through `env.accentSecondaryFg` (the mark colour).
+function createBehaviors(env = {}) {
+	const measure = env.measure ?? ((text) => `${text}`.length)
+	// Fitted slot state for the current entry; recomputed per behavior call.
+	const layout = (self, data) => {
+		const entry = unwrap(data.entry)
+		const marked = unwrap(data.marked)
+		const markedCount = marked?.size ?? 0
+		const width = env.width ? env.width(self) : 0
+		const kept = fitBlocks(detailBlocks(entry, markedCount), width, measure, env.elide)
+		const keys = new Set(kept.map((block) => block.key))
+		const texts = {}
+		for (const block of kept) texts[block.key] = block.text
+		return { entry, keys, texts }
+	}
+	const has = (self, data, key) => layout(self, data).keys.has(key)
+	const text = (self, data, key) => layout(self, data).texts[key] ?? ""
+	const before = (self, data, key) => {
+		const keys = layout(self, data).keys
+		const order = ["marked", "time", "type", "size", "mode"]
+		const index = order.indexOf(key)
+		return order.slice(0, index).some((earlier) => keys.has(earlier))
+	}
+	return {
+		// Separator rule between the listing and the detail line.
+		detailBorder: () => ["top"],
+		detailBorderFg: () => env.textSecondaryFg,
+		dimFg: () => env.textSecondaryFg,
+		brightFg: () => env.textFg,
+
+		// The line: indent + selected count + date + type + size + rights,
+		// each gated so a dropped block takes no width.
+		detailHasIndent: (self, data) => layout(self, data).keys.size > 0,
+		detailIndent: () => INDENT,
+		detailHasMarked: (self, data) => has(self, data, "marked"),
+		detailMarked: (self, data) => text(self, data, "marked"),
+		detailMarkedFg: () => env.accentSecondaryFg,
+		detailHasTime: (self, data) => has(self, data, "time"),
+		detailTime: (self, data) => text(self, data, "time"),
+		detailHasType: (self, data) => has(self, data, "type"),
+		detailType: (self, data) => text(self, data, "type"),
+		detailTypeClass: (_self, data) => `is-${entryKind(unwrap(data.entry))}`,
+		detailTypeFg: (_self, data) => typeColor(unwrap(data.entry), env),
+		detailHasSize: (self, data) => has(self, data, "size"),
+		detailSize: (self, data) => text(self, data, "size"),
+		detailHasMode: (self, data) => has(self, data, "mode"),
+		detailMode: (self, data) => text(self, data, "mode"),
+		detailModeFg: () => env.accentFg,
+		detailSepTime: (self, data) => has(self, data, "time") && before(self, data, "time"),
+		detailSepType: (self, data) => has(self, data, "type") && before(self, data, "type"),
+		detailSepSize: (self, data) => has(self, data, "size") && before(self, data, "size"),
+		detailSepMode: (self, data) => has(self, data, "mode") && before(self, data, "mode"),
+		detailSep: () => SEP,
+	}
+}
+
+export {
+	KIND_LABELS,
+	SEP,
+	createBehaviors,
+	detailBlocks,
+	detailLine,
+	entryKind,
+	typeColor,
+}

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

@@ -0,0 +1,16 @@
+<box ref="box" flexDirection="column" height="2" out:border="detailBorder" out:borderColor="detailBorderFg"
+     borderStyle="single" overflow="hidden">
+	<box flexDirection="row" height="1" overflow="hidden">
+		<text when="detailHasIndent" out="detailIndent" out:fg="dimFg" wrapMode="none"></text>
+		<text when="detailHasMarked" out="detailMarked" out:fg="detailMarkedFg" wrapMode="none"></text>
+		<text when="detailSepTime" out="detailSep" out:fg="dimFg" wrapMode="none"></text>
+		<text when="detailHasTime" out="detailTime" out:fg="brightFg" wrapMode="none"></text>
+		<text when="detailSepType" out="detailSep" out:fg="dimFg" wrapMode="none"></text>
+		<text when="detailHasType" out="detailType" out:fg="detailTypeFg" wrapMode="none"></text>
+		<text when="detailSepSize" out="detailSep" out:fg="dimFg" wrapMode="none"></text>
+		<text when="detailHasSize" out="detailSize" out:fg="brightFg" wrapMode="none"></text>
+		<box when="detailHasMode" flexGrow="1" minWidth="0" flexShrink="1"></box>
+		<text when="detailSepMode" out="detailSep" out:fg="dimFg" wrapMode="none" flexShrink="0"></text>
+		<text when="detailHasMode" out="detailMode" out:fg="detailModeFg" wrapMode="none" flexShrink="0"></text>
+	</box>
+</box>

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

@@ -0,0 +1 @@
+<ul class="file-list" ref="list" out="rows"></ul>

package/src/js/tcmd/components/FileList.js

@@ -0,0 +1,41 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/FileList
+// FileList: the scrollable, cursorable list of entries for one pane. The row
+// logic lives in `FileRow.js`; this parent maps its `entries` to rows and
+// provides the empty/loading states.
+//
+// Environment:
+// - `rows(data)` returning the keyed row list.
+// - `scrollTop(self, data)` (TUI viewport tracking).
+// - `textSecondaryFg` for the state rows.
+
+import { unwrap } from "select/state/cells"
+
+// Function: createBehaviors
+// Builds the FileList behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const behaviors = {
+		emptyText: () => "  (empty)",
+		emptyFg: () => env?.textSecondaryFg,
+		loadingText: () => "  loading…",
+		loadingFg: () => env?.textSecondaryFg,
+		showEmpty: (_self, data) =>
+			!unwrap(data.loading) && (unwrap(data.entries)?.length ?? 0) === 0,
+		showLoading: (_self, data) => Boolean(unwrap(data.loading)),
+	}
+	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 }
+
+// EOF

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

@@ -0,0 +1,7 @@
+<box flexDirection="column" flexGrow="1" overflow="hidden">
+	<scrollbox ref="list" flexGrow="1" out:scrollTop="scrollTop">
+		<box out="rows" flexDirection="column"></box>
+		<text when="showLoading" out="loadingText" out:fg="loadingFg"></text>
+		<text when="showEmpty" out="emptyText" out:fg="emptyFg"></text>
+	</scrollbox>
+</box>

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

@@ -0,0 +1,5 @@
+<aside class="preview" when="show" out:title="previewTitle">
+	<pre when="hasText" out="previewText" class="preview-text"></pre>
+	<div when="hasCard" out="cardText" class="preview-card"></div>
+	<footer class="preview-actions" out="actions"></footer>
+</aside>