@ssebastien/tcmd 0.1.3 → 0.1.7

package/src/js/tcmd/components/OverlayList.js

@@ -0,0 +1,69 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-17
+
+// Module: tcmd/components/OverlayList
+// The shared modal list overlay: the undo history (`u`) and the trash browser
+// (`⇧T`). One component, two modes — `history` lists the journal (a row jumps
+// the file state to that point), `trash` lists trashed entries (a row restores
+// one). The row logic lives in `OverlayRow.js`; this parent maps its `items` to
+// rows and switches title/footer/empty text on the mode.
+//
+// Environment: `overlayBg`, `borderPrimaryActiveFg`, `textHeadingFg` (title),
+// `textSecondaryFg` (footer/empty), `rows(data)` returning the keyed rows and
+// `scrollTop(self, data)` (TUI viewport tracking).
+
+import { unwrap } from "select/state/cells"
+
+// Function: overlayMode
+// "trash" or "history" for the data's mode (an absent mode reads as history).
+function overlayMode(mode) {
+	return unwrap(mode) === "trash" ? "trash" : "history"
+}
+
+// Function: overlayTitle
+function overlayTitle(mode) {
+	return overlayMode(mode)
+}
+
+// Function: overlayFooter
+function overlayFooter(mode) {
+	return overlayMode(mode) === "trash"
+		? "↑↓ move   ↵ restore   Esc close"
+		: "↑↓ move   ↵ jump   ^Z undo   ^⇧Z redo   Esc close"
+}
+
+// Function: overlayEmpty
+// The empty-state line: no history yet, or an empty trash.
+function overlayEmpty(mode) {
+	return overlayMode(mode) === "trash" ? "  trash is empty" : "  no history yet"
+}
+
+// Function: createBehaviors
+// Builds the OverlayList behavior map for the given renderer environment.
+function createBehaviors(env) {
+	const behaviors = {
+		bg: () => env.overlayBg,
+		borderFg: () => env.borderPrimaryActiveFg,
+		titleColor: () => env.textHeadingFg,
+		title: (_self, data) => overlayTitle(data.mode),
+		footer: (_self, data) => overlayFooter(data.mode),
+		footerFg: () => env.textSecondaryFg,
+		empty: (_self, data) => overlayEmpty(data.mode),
+		emptyFg: () => env.textSecondaryFg,
+		emptyVisible: (_self, data) => (unwrap(data.items)?.length ?? 0) === 0,
+		open: (_self, data) => Boolean(unwrap(data.open)),
+	}
+	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, overlayEmpty, overlayFooter, overlayMode, overlayTitle }
+
+// EOF

package/src/js/tcmd/components/{CommandPalette.xml → OverlayList.xml}

@@ -2,11 +2,8 @@
 	<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">
+		<text when="emptyVisible" out="empty" out:fg="emptyFg" paddingLeft="1" wrapMode="none"></text>
+		<scrollbox when="!emptyVisible" ref="list" flexGrow="1">
 			<box out="rows" flexDirection="column"></box>
 		</scrollbox>
 		<box flexDirection="row" height="1" paddingLeft="1">

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

@@ -0,0 +1,5 @@
+<li class="overlay-row" out:class="rowClass" out:data-current="rowCurrent" out:data-dim="rowDim" on:click="item.key!overlay:select">
+	<span class="overlay-marker" out="rowMarker"></span>
+	<span class="overlay-text" out="rowText"></span>
+	<span class="overlay-meta" out="rowMeta"></span>
+</li>

package/src/js/tcmd/components/OverlayRow.js

@@ -0,0 +1,47 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-17
+
+// Module: tcmd/components/OverlayRow
+// One row of the shared list overlay (`u` history / `⇧T` trash). Reads
+// `{ item: { text, meta, dim }, index, currentRow }`; the builder snapshots the
+// overlay cursor into a plain `currentRow` boolean, with the shared `cursor`
+// cell as fallback for hand-built bags.
+//
+// Environment: `accentSecondaryFg`, `textFg`, `textSecondaryFg`,
+// `textHeadingFg`, `cursorBg` (current row background), `currentClass` (web).
+
+import { unwrap } from "select/state/cells"
+
+// Function: rowCurrent
+// Whether the row is the overlay cursor: the plain `currentRow` flag wins over
+// the shared `cursor` cell.
+function rowCurrent(data) {
+	if (data.currentRow !== undefined) return data.currentRow === true
+	return data.index === unwrap(data.cursor)
+}
+
+// Function: createBehaviors
+// Builds the OverlayRow behavior map for the given renderer environment.
+function createBehaviors(env) {
+	return {
+		rowBg: (_self, data) => (rowCurrent(data) ? env.cursorBg : undefined),
+		rowClass: (_self, data) => (rowCurrent(data) ? env.currentClass : null),
+		rowCurrent: (_self, data) => `${rowCurrent(data)}`,
+		rowDim: (_self, data) => `${Boolean(data.item?.dim)}`,
+		rowMarker: (_self, data) => (rowCurrent(data) ? "> " : "  "),
+		rowMarkerFg: () => env.accentSecondaryFg,
+		rowText: (_self, data) => data.item?.text ?? "",
+		// The cursor row reads bright; an undone/dim row (a superseded history
+		// entry) takes the secondary colour, like a hint.
+		rowTextFg: (_self, data) =>
+			rowCurrent(data) ? env.textHeadingFg : data.item?.dim ? env.textSecondaryFg : env.textFg,
+		rowMeta: (_self, data) => data.item?.meta ?? "",
+		rowMetaFg: () => env.textSecondaryFg,
+	}
+}
+
+export { createBehaviors, rowCurrent }
+
+// EOF

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

@@ -0,0 +1,9 @@
+<box flexDirection="row" height="1" columnGap="1" out:backgroundColor="rowBg" on:click="item.key!overlay:select">
+	<text out="rowMarker" width="2" out:fg="rowMarkerFg"></text>
+	<box flexGrow="1" minWidth="0" overflow="hidden">
+		<text out="rowText" out:fg="rowTextFg" wrapMode="none" truncate="true"></text>
+	</box>
+	<box flexShrink="0" overflow="hidden">
+		<text out="rowMeta" out:fg="rowMetaFg" wrapMode="none" truncate="true"></text>
+	</box>
+</box>

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

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

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

@@ -49,18 +49,13 @@ function summaryShortDisk(disk) {
 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 width = env.width ? env.width(self, data) : 0
 			const full = summaryText(entries, disk)
 			if (!width || measure(full) <= width) return full
 			const counts = `${INDENT}${summaryCounts(entries)}`

package/src/js/tcmd/components/format.js

@@ -5,7 +5,10 @@
 
 // Module: tcmd/components/format
 // Presentation-only formatting helpers (sizes, counts, header title) shared by
-// every component for every renderer.
+// every component for every renderer. Size and disk formatting come from
+// `core/format` because operations report the same values.
+
+import { formatDisk, formatSize } from "../core/format.js"
 
 // Function: formatTitle
 // Header line `TinyCmd - HOST DIR/BASE` for the given directory. When it
@@ -78,28 +81,6 @@ function elideCrumbs(segments, width) {
 	return [marker, ...rest]
 }
 
-// Function: formatSize
-// Human-readable byte size; directories pass through their own label.
-function formatSize(bytes) {
-	const value = Number(bytes ?? 0)
-	if (value < 1024) return `${value}B`
-	const units = ["K", "M", "G", "T"]
-	let size = value / 1024
-	let unit = 0
-	while (size >= 1024 && unit < units.length - 1) {
-		size /= 1024
-		unit++
-	}
-	return `${size >= 100 ? Math.round(size) : size.toFixed(1)}${units[unit]}`
-}
-
-// Function: formatDisk
-// Compact free/total disk line, e.g. "12G free of 256G".
-function formatDisk(disk) {
-	if (!disk) return ""
-	return `${formatSize(disk.free)} free of ${formatSize(disk.total)}`
-}
-
 // Function: formatTime
 // Local `YYYY-MM-DD HH:MM` stamp for a millisecond epoch; empty when absent.
 function formatTime(ms) {

package/src/js/tcmd/components/icons.js

@@ -4,11 +4,12 @@
 // Created: 2026-10-09
 
 // Module: tcmd/components/icons
-// Nerd Font icon for a file entry, in the spirit of yazi: a kind icon
-// (directory, symlink, device node) wins, then a per-extension icon, then the
-// generic file icon. A few basenames map directly too, so `Makefile`,
+// Nerd Font icons, in the spirit of yazi. `iconFor` maps a file entry to its
+// kind icon (directory, symlink, device node), then a per-extension icon, then
+// the generic file icon; a few basenames map directly too, so `Makefile`,
 // `Dockerfile` and dotfiles like `.gitignore` get their icon even without a
-// distinguishing extension.
+// distinguishing extension. `sourceMarker` maps a command-panel entry's
+// namespace (a CLI operation or a TinyCmd action) to its marker.
 //
 // The glyphs are Nerd Font codepoints (from `glyphnames.json`), so they only
 // render on a terminal patched with a Nerd Font: rows show them when the
@@ -27,6 +28,20 @@ const SYMLINK_ICON = "\u{f0c1}" // nf-fa-link
 const DEVICE_ICON = "\u{e795}" // nf-dev-terminal
 const FILE_ICON = "\u{f016}" // nf-fa-file_o
 
+// Constant: SOURCE_ICON / SOURCE_TAG
+// The namespace marker the command panel puts in front of each entry name:
+// a terminal prompt for a CLI operation, a bolt for a TinyCmd action. Browsers
+// lack the Nerd Font (and `TCMD_ICONS=0` opts out), so the same marker exists
+// as a three-character tag that keeps the name column aligned either way.
+const SOURCE_ICON = {
+	cli: "\u{ebca}", // nf-cod-terminal_bash
+	app: "\u{f0e7}", // nf-fa-bolt
+}
+const SOURCE_TAG = {
+	cli: "cli",
+	app: "app",
+}
+
 // Constant: NAME_ICONS
 // Basename (lowercase, leading dot stripped) → glyph, checked before the
 // extension table.
@@ -164,6 +179,7 @@ function extensionOf(name) {
 // file icon.
 function iconFor(entry) {
 	if (!entry) return ""
+	if (entry.add) return entry.isDir ? DIR_ICON : FILE_ICON
 	if (entry.isSymlink) return SYMLINK_ICON
 	if (entry.isDevice) return DEVICE_ICON
 	if (entry.isDir) return DIR_ICON
@@ -172,6 +188,141 @@ function iconFor(entry) {
 	return NAME_ICONS[plain] ?? EXTENSION_ICONS[extensionOf(name)] ?? FILE_ICON
 }
 
+// Function: lucideIconFor
+// Lucide's outline icons are used by the web renderers, where SVG works without
+// a patched terminal font. The TUI keeps the detailed Nerd Font mapping above;
+// the web uses a smaller set of semantic file-kind icons.
+const LUCIDE_NAME_ICONS = {
+	cmakelists: "file-code",
+	dockerfile: "file-code",
+	env: "settings",
+	gitattributes: "settings",
+	gitconfig: "settings",
+	gitignore: "settings",
+	gitmodules: "settings",
+	gnumakefile: "file-code",
+	license: "file-text",
+	licence: "file-text",
+	makefile: "file-code",
+	npmrc: "settings",
+	readme: "file-text",
+}
+const LUCIDE_EXTENSION_ICONS = {
+	"7z": "file-archive",
+	aac: "audio-lines",
+	avi: "video",
+	bmp: "file-image",
+	bz2: "file-archive",
+	c: "file-code",
+	cc: "file-code",
+	cjs: "file-code",
+	clj: "file-code",
+	cmake: "file-code",
+	csv: "file-text",
+	cfg: "settings",
+	conf: "settings",
+	cpp: "file-code",
+	cs: "file-code",
+	css: "file-code",
+	d: "file-code",
+	db: "database",
+	diff: "file-code",
+	ex: "file-code",
+	exs: "file-code",
+	env: "settings",
+	flac: "audio-lines",
+	gif: "file-image",
+	go: "file-code",
+	gql: "file-code",
+	graphql: "file-code",
+	gz: "file-archive",
+	h: "file-code",
+	hbs: "file-code",
+	hs: "file-code",
+	hpp: "file-code",
+	htm: "file-code",
+	html: "file-code",
+	ini: "settings",
+	java: "file-code",
+	jar: "file-archive",
+	jpeg: "file-image",
+	jpg: "file-image",
+	js: "file-code",
+	jsx: "file-code",
+	json: "file-code",
+	kt: "file-code",
+	kts: "file-code",
+	less: "file-code",
+	lock: "settings",
+	log: "file-text",
+	lua: "file-code",
+	m4a: "audio-lines",
+	md: "file-text",
+	markdown: "file-text",
+	mk: "file-code",
+	mkv: "video",
+	mov: "video",
+	mp3: "audio-lines",
+	mp4: "video",
+	mjs: "file-code",
+	nim: "file-code",
+	ogg: "audio-lines",
+	pdf: "file-text",
+	perl: "file-code",
+	patch: "file-code",
+	php: "file-code",
+	pl: "file-code",
+	png: "file-image",
+	ps1: "file-code",
+	py: "file-code",
+	r: "file-code",
+	rb: "file-code",
+	rar: "file-archive",
+	rs: "file-code",
+	sass: "file-code",
+	scala: "file-code",
+	scss: "file-code",
+	sh: "file-code",
+	sql: "file-code",
+	sqlite: "database",
+	sqlite3: "database",
+	svg: "file-image",
+	swift: "file-code",
+	tar: "file-archive",
+	text: "file-text",
+	toml: "settings",
+	ts: "file-code",
+	tsv: "file-text",
+	txt: "file-text",
+	tsx: "file-code",
+	vim: "file-code",
+	vue: "file-code",
+	wav: "audio-lines",
+	webm: "video",
+	webp: "file-image",
+	xml: "file-code",
+	xz: "file-archive",
+	yaml: "file-code",
+	yml: "file-code",
+	zip: "file-archive",
+	zsh: "file-code",
+}
+
+function lucideIconFor(entry) {
+	if (!entry) return ""
+	if (entry.add) return "folder-plus"
+	if (entry.isSymlink) return "link-2"
+	if (entry.isDevice) return "cpu"
+	if (entry.isDir) return "folder"
+
+	const name = `${entry.name ?? ""}`
+	const basename = name.slice(name.lastIndexOf("/") + 1)
+	const extension = extensionOf(basename)
+	const stem = extension ? basename.slice(0, -(extension.length + 1)) : basename
+	const plain = (basename.startsWith(".") ? basename.slice(1) : basename).toLowerCase()
+	return LUCIDE_NAME_ICONS[plain] ?? LUCIDE_NAME_ICONS[stem.toLowerCase()] ?? LUCIDE_EXTENSION_ICONS[extension] ?? "file"
+}
+
 // Function: iconsEnabled
 // Whether rows show icons: on by default, `TCMD_ICONS=0|false|off` opts out
 // for terminals without a Nerd Font.
@@ -180,6 +331,26 @@ function iconsEnabled(environment = globalThis.process?.env ?? {}) {
 	return value !== "0" && value !== "false" && value !== "off"
 }
 
-export { DEVICE_ICON, DIR_ICON, FILE_ICON, SYMLINK_ICON, extensionOf, iconFor, iconsEnabled }
+// Function: sourceMarker
+// The marker a command-panel entry carries: the Nerd Font glyph when icons are
+// on, the three-character tag otherwise (browsers lack the font).
+function sourceMarker(source, icons) {
+	if (icons) return SOURCE_ICON[source] ?? ""
+	return SOURCE_TAG[source] ?? ""
+}
+
+export {
+	DEVICE_ICON,
+	DIR_ICON,
+	FILE_ICON,
+	SOURCE_ICON,
+	SOURCE_TAG,
+	SYMLINK_ICON,
+	extensionOf,
+	iconFor,
+	iconsEnabled,
+	lucideIconFor,
+	sourceMarker,
+}
 
 // EOF

package/src/js/tcmd/components/index.js

@@ -11,7 +11,7 @@
 
 // Binding
 export { bind } from "./bind.js"
-export { commandBarMarks, commandBarMarksItem, commandBarRowCount, commandBarStatus } from "./CommandBar.js"
+export { commandBarFit, commandBarMarks, commandBarMarksItem, commandBarStatus } from "./CommandBar.js"
 
 // Behaviors
 export { createBehaviors as appBehaviors, createEvents as appEvents, createInit as appInit } from "./App.js"
@@ -22,20 +22,24 @@ export { createBehaviors as commandBarBehaviors } from "./CommandBar.js"
 export { createBehaviors as commandItemBehaviors } from "./CommandItem.js"
 export { createBehaviors as commandArgRowBehaviors } from "./CommandArgRow.js"
 export { createBehaviors as commandPanelBehaviors } from "./CommandPanel.js"
-export { createBehaviors as commandPaletteBehaviors } from "./CommandPalette.js"
 export { createBehaviors as confirmBehaviors } from "./Confirm.js"
 export { createBehaviors as crumbBehaviors } from "./Crumb.js"
 export { createBehaviors as entryDetailBehaviors } from "./EntryDetail.js"
 export { createBehaviors as fileListBehaviors } from "./FileList.js"
+export { createBehaviors as filePickerBehaviors } from "./FilePicker.js"
+export { createBehaviors as filePickerRowBehaviors } from "./FilePickerRow.js"
 export { createBehaviors as filePreviewBehaviors } from "./FilePreview.js"
 export { createBehaviors as fileRowBehaviors } from "./FileRow.js"
 export { createBehaviors as filterBarBehaviors } from "./FilterBar.js"
-export { createBehaviors as paletteRowBehaviors } from "./PaletteRow.js"
+export { createBehaviors as helpBehaviors } from "./Help.js"
+export { createRowBehaviors as helpRowBehaviors } from "./Help.js"
+export { createBehaviors as overlayListBehaviors } from "./OverlayList.js"
+export { createBehaviors as overlayRowBehaviors } from "./OverlayRow.js"
 export { createBehaviors as summaryBehaviors } from "./Summary.js"
 
 // Helpers
 export { formatCounts, formatDisk, formatMode, formatSize, formatTime } from "./format.js"
-export { iconFor, iconsEnabled } from "./icons.js"
-export { bookmarkRows, commandItemRows, crumbRows, fileRows, fileWindow, paletteRows, panelArgRows, panelOpRows } from "./rows.js"
+export { iconFor, iconsEnabled, lucideIconFor, sourceMarker } from "./icons.js"
+export { bookmarkRows, commandItemRows, crumbRows, filePickerRows, fileRows, fileWindow, helpRows, listingWindow, overlayRows, panelArgRows, panelOpRows, panelRunRows } from "./rows.js"
 
 // EOF