@ssebastien/tcmd 0.1.4 → 0.1.7

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

@@ -179,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
@@ -187,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.
@@ -213,6 +349,7 @@ export {
 	extensionOf,
 	iconFor,
 	iconsEnabled,
+	lucideIconFor,
 	sourceMarker,
 }
 

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"
@@ -26,15 +26,20 @@ 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 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, sourceMarker } from "./icons.js"
-export { bookmarkRows, commandItemRows, crumbRows, fileRows, fileWindow, 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

package/src/js/tcmd/components/rows.js

@@ -8,8 +8,7 @@
 // `(self, data) → Component.map(…)`: it turns a parent's data bag into the
 // `{ item, index, … }` bags its row components receive, so the bag shape is
 // defined once and both renderers stay in sync. `self` is the parent list
-// instance — only `fileRows` uses it, to fall back to the measured scrollbox
-// height when no viewport is threaded down.
+// instance, kept in the signature for the shared `(self, data)` contract.
 //
 // Row state (cursor, marks, selection) is snapshotted into plain per-row
 // booleans (`currentRow`, `markedRow`, `selectedRow`) instead of broadcasting
@@ -27,6 +26,7 @@
 // (`CommandArgRow.wantsFocus`), which the builders do not know.
 
 import { unwrap } from "select/state/cells"
+import { helpBlocks } from "./Help.js"
 
 // Function: isCell
 // True when `value` is a reactive cell, using the same `isReactive` marker the
@@ -49,6 +49,15 @@ function isSelected(data) {
 // list, so a scroll step or a cursor nudge does not first expose a blank row.
 const ROW_WINDOW_MARGIN = 8
 
+// Constant: UNWINDOWED_ROWS
+// How many rows a list without a threaded viewport (the inspector's directory
+// column, the web) mounts before it windows around the cursor. Such a list
+// renders its *whole* listing so its scrollbox can scroll all of it, but the
+// terminal renderer cannot create unbounded rows — a many-thousand-row
+// directory fails to render — so the mount is bounded here. The bound sits
+// well under that limit and leaves normal directories fully mounted.
+const UNWINDOWED_ROWS = 500
+
 // Function: fileWindow
 // The windowed slice of a file listing: only `[start, start+len)` rows are
 // mounted around the cursor, so a large directory does not lay out thousands of
@@ -71,6 +80,26 @@ function fileWindow(data, viewport) {
 	return { start, len, local: cursor - start, total }
 }
 
+// Function: listingWindow
+// The rows a `FileList` mounts, shared by the row builder and the scroll
+// keeper so they always agree on the window. A threaded viewport (the panes)
+// windows around the cursor with a margin. Without one (the inspector's
+// directory column) the whole listing is mounted — so its scrollbox scrolls
+// all of it — up to `UNWINDOWED_ROWS`; beyond that the same cursor-anchored
+// window keeps the mount bounded while the cursor still reaches every row.
+function listingWindow(data, viewport) {
+	const vp = Math.floor(viewport ?? 0)
+	if (vp > 0) return fileWindow(data, vp)
+	const entries = unwrap(data.entries) ?? []
+	const total = entries.length
+	const cursor = isCell(data.cursor) ? unwrap(data.cursor) : (data.cursor ?? 0)
+	if (total <= UNWINDOWED_ROWS) return { start: 0, len: total, local: cursor, total }
+	const maxStart = Math.max(0, total - UNWINDOWED_ROWS)
+	const start = Math.max(0, Math.min(cursor - Math.floor(UNWINDOWED_ROWS / 2), maxStart))
+	const len = Math.min(UNWINDOWED_ROWS, total - start)
+	return { start, len, local: cursor - start, total }
+}
+
 // Function: crumbRows
 // `{ item: segment, index, last, paneId }` bags for `Crumb` rows; `last`
 // marks the basename, which carries no separator.
@@ -99,11 +128,11 @@ function fileRows(FileRow) {
 		const entries = unwrap(data.entries) ?? []
 		const cursor = isCell(data.cursor) ? unwrap(data.cursor) : data.cursor
 		const marked = isCell(data.marked) ? unwrap(data.marked) : data.marked
-		// The viewport height is threaded down reactively (from `uiSize`), so the
-		// window is correct from the first render; fall back to the measured
-		// scrollbox height on renderers that do not provide it.
-		const viewport = unwrap(data.viewport) || self?.ref?.list?.height || 0
-		const { start, len } = fileWindow(data, viewport)
+		// The window is shared with `fileListScrollTop` (see `listingWindow`).
+		// The panes window around their cursor; the inspector mounts its whole
+		// listing so its scrollbox can scroll all of it, bounded for the
+		// terminal renderer.
+		const { start, len } = listingWindow(data, unwrap(data.viewport) ?? 0)
 		const bag = (item, index) => ({
 			item,
 			index,
@@ -132,41 +161,70 @@ function commandItemRows(CommandItem) {
 
 // Function: panelOpRows
 // `{ item, index, row, cursor, focus }` bags for the command panel's command
-// list (`CommandArgRow`). The list is the flat `core/panel.panelEntryRows`: one
-// operation per row. `row` is the normalized shape the component reads —
-// `name` is the operation name and `summary` its argument list; `risk` tints
-// destructive/caution operations.
+// list (`CommandArgRow`). `panelEntryRows` contributes group headings and
+// name-only operation rows. `entryIndex` maps operations to the command cursor;
+// group headings take no cursor. `risk` tints destructive/caution operations.
 function panelOpRows(CommandArgRow) {
 	return (self, data) =>
 		CommandArgRow.map(
 			data.items ?? [],
 			(item, index) => ({
 				item,
-				index: item.entryIndex ?? index,
+				index: item.type === "op" ? item.entryIndex ?? index : -1,
 				row: {
-					type: "op",
-					key: item.id,
+					type: item.type,
+					key: item.key,
 					name: item.name,
-					summary: item.summary ?? "",
+					group: item.group,
 					risk: item.risk ?? null,
 				},
 				cursor: data.opCursor,
 				focus: data.focus,
 			}),
-			(item) => item.id,
+			(item) => item.key,
 		)
 }
 
+// Function: filePickerRows
+// `{ item, index, key, currentRow, markedRow, active }` bags for the file
+// picker's `FilePickerRow`s. The picker rows are already flat (parent row plus
+// entries); the same bounded window as an unwindowed listing keeps a huge
+// directory from mounting every row in the terminal.
+function filePickerRows(FilePickerRow) {
+	return (self, data) => {
+		const rows = unwrap(data.rows) ?? []
+		const cursor = isCell(data.cursor) ? unwrap(data.cursor) : (data.cursor ?? 0)
+		const { start, len } = listingWindow({ entries: rows, cursor }, 0)
+		const bag = (item, index) => ({
+			item,
+			index,
+			key: item.key ?? item.path,
+			currentRow: index === cursor,
+			markedRow: false,
+			active: true,
+			paneId: null,
+		})
+		if (start === 0 && len === rows.length) {
+			return FilePickerRow.map(rows, bag, (item) => item.key ?? item.path)
+		}
+		return FilePickerRow.map(
+			rows.slice(start, start + len),
+			(item, index) => bag(item, start + index),
+			(item) => item.key ?? item.path,
+		)
+	}
+}
+
 // Function: panelArgRows
-// `{ item, index, row, cursor, focus, value, labelWidth }` bags for the command
-// panel's argument pane (`CommandArgRow`). The rows are the flat
+// `{ item, index, row, cursor, focus, value }` bags for the command
+// panel's scrolling argument pane (`CommandArgRow`). The rows are the flat
 // `core/panel.panelRowList`; this wraps each selection's item run in a top and
 // bottom `frame` row so the list reads as one bordered box. `index` is the
 // row's flat position (the frame rows take none), so the pane cursor still
 // addresses the same rows.
 function panelArgRows(CommandArgRow) {
 	return (self, data) => {
-		const rows = unwrap(data.rows) ?? []
+		const rows = (unwrap(data.rows) ?? []).filter((row) => row.type !== "run")
 		const visual = []
 		for (let i = 0; i < rows.length; i++) {
 			const row = rows[i]
@@ -188,29 +246,95 @@ function panelArgRows(CommandArgRow) {
 				row: item,
 				cursor: data.argCursor,
 				focus: data.focus,
+				permBit: data.permBit,
 				value: data.value,
-				labelWidth: unwrap(data.labelWidth) ?? 8,
 			}),
 			(item) => item.key,
 		)
 	}
 }
 
+// Function: panelRunRows
+// The explicit Run/Retry action is outside the scrolling argument list, while
+// sharing its cursor/focus state and row component.
+function panelRunRows(CommandArgRow) {
+	return (self, data) => {
+		const rows = (unwrap(data.rows) ?? []).filter((row) => row.type === "run")
+		return CommandArgRow.map(
+			rows,
+			(item, index) => ({
+				item,
+				index: item.rowIndex ?? index,
+				row: item,
+				cursor: data.argCursor,
+				focus: data.focus,
+				value: data.value,
+			}),
+			(item) => item.key,
+		)
+	}
+}
+
+// Function: helpRows
+// `{ item, index }` bags for the `?` reference's `HelpRow`s. The blocks are
+// precomputed and balanced in `Help.helpBlocks`; `side` picks the column.
+function helpRows(HelpRow) {
+	return (self, data, side) => {
+		const blocks = helpBlocks()[side] ?? []
+		return HelpRow.map(
+			blocks,
+			(item, index) => ({ item, index }),
+			(item) => item.key,
+		)
+	}
+}
+
 // Function: bookmarkRows
-// `{ item: { name, path }, index, selectedRow }` bags for `BookmarkRow` rows.
-// `selectedRow` is the plain per-row selection flag so a picker move rewrites
-// only the changed rows.
+// `{ item: { key, name, path }, index, selectedRow }` bags for `BookmarkRow`
+// rows. `selectedRow` is the plain per-row selection flag so a picker move
+// rewrites only the changed rows; `key` separates the synthetic add row from
+// stored bookmarks.
 function bookmarkRows(BookmarkRow) {
 	return (self, data) => {
 		const selected = isCell(data.selected) ? unwrap(data.selected) : data.selected
 		return BookmarkRow.map(
 			data.items ?? [],
 			(item, index) => ({ item, index, selectedRow: index === selected }),
-			(bookmark) => bookmark.name,
+			(bookmark) => bookmark.key ?? bookmark.name,
+		)
+	}
+}
+
+// Function: overlayRows
+// `{ item, index, currentRow }` bags for the shared list overlay's `OverlayRow`s
+// (history / trash). `currentRow` is the plain per-row cursor flag, so a move
+// rewrites only the changed rows.
+function overlayRows(OverlayRow) {
+	return (self, data) => {
+		const items = unwrap(data.items) ?? []
+		const cursor = isCell(data.cursor) ? unwrap(data.cursor) : data.cursor
+		return OverlayRow.map(
+			items,
+			(item, index) => ({ item, index, currentRow: index === cursor }),
+			(item) => item.key ?? item.text,
 		)
 	}
 }
 
-export { bookmarkRows, commandItemRows, crumbRows, fileRows, fileWindow, isSelected, panelArgRows, panelOpRows }
+export {
+	bookmarkRows,
+	commandItemRows,
+	crumbRows,
+	filePickerRows,
+	fileRows,
+	fileWindow,
+	helpRows,
+	isSelected,
+	listingWindow,
+	overlayRows,
+	panelArgRows,
+	panelOpRows,
+	panelRunRows,
+}
 
 // EOF

package/src/js/tcmd/core/base64.js

@@ -0,0 +1,64 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-20
+
+// Module: tcmd/core/base64
+// Standard base64 for adapters that can only carry bytes as JSON text — the
+// web API and the tinyjs bridge. Pure JavaScript: neither `Buffer` nor
+// `btoa`/`atob` is guaranteed in every target (the desktop backend runs under
+// txiki.js), and compressed previews stay small enough for a string.
+
+const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"
+
+// Constant: LOOKUP
+// Byte code -> 6-bit value, -1 for anything outside the alphabet.
+const LOOKUP = (() => {
+	const table = new Int16Array(128).fill(-1)
+	for (let i = 0; i < ALPHABET.length; i++) table[ALPHABET.charCodeAt(i)] = i
+	return table
+})()
+
+// Function: encodeBase64
+// Base64 text for a byte array, with `=` padding.
+function encodeBase64(bytes) {
+	let text = ""
+	for (let i = 0; i < bytes.length; i += 3) {
+		const first = bytes[i]
+		const second = i + 1 < bytes.length ? bytes[i + 1] : undefined
+		const third = i + 2 < bytes.length ? bytes[i + 2] : undefined
+		text += ALPHABET[first >> 2]
+		text += ALPHABET[((first & 0x03) << 4) | ((second ?? 0) >> 4)]
+		text += second === undefined ? "=" : ALPHABET[((second & 0x0f) << 2) | ((third ?? 0) >> 6)]
+		text += third === undefined ? "=" : ALPHABET[third & 0x3f]
+	}
+	return text
+}
+
+// Function: decodeBase64
+// Bytes for base64 text; padding, whitespace and foreign characters are
+// ignored, so a truncated or line-wrapped payload still decodes.
+function decodeBase64(text) {
+	const source = `${text ?? ""}`
+	const bytes = new Uint8Array(Math.floor((source.length * 3) / 4))
+	let length = 0
+	let buffer = 0
+	let bits = 0
+	for (let i = 0; i < source.length; i++) {
+		const code = source.charCodeAt(i)
+		if (code === 61) break // "=" padding: nothing follows it.
+		const value = code < LOOKUP.length ? LOOKUP[code] : -1
+		if (value < 0) continue
+		buffer = (buffer << 6) | value
+		bits += 6
+		if (bits >= 8) {
+			bits -= 8
+			bytes[length++] = (buffer >> bits) & 0xff
+		}
+	}
+	return bytes.slice(0, length)
+}
+
+export { decodeBase64, encodeBase64 }
+
+// EOF

package/src/js/tcmd/core/bookmarks.js

@@ -4,16 +4,18 @@
 // Created: 2026-10-09
 
 // Module: tcmd/core/bookmarks
-// Named bookmarks: a `{ name -> { path, isDir } }` map the user records with
-// `b` and jumps to with `g`. A bookmark remembers whether its path is a file
-// or a directory (or `null` when only a legacy path is known), so a jump can
-// open a directory but select-and-preview a file. Bookmarks are pure model
-// state (a reactive cell) plus a persistence layer: a `BookmarkStore`
-// interface with an in-memory default (tests, web) and a Node/JSON-file
-// implementation (the TUI). The session only ever sees the store interface, so
-// the browser bundle stays free of Node builtins.
+// Named bookmarks: a `{ name -> { path, isDir } }` map shown by the `b`
+// bookmarks panel, which filters them and records the current path under an
+// automatic name. A bookmark remembers whether its path is a file or a
+// directory (or `null` when only a legacy path is known), so a jump can open a
+// directory but select-and-preview a file. Bookmarks are pure model state (a
+// reactive cell) plus a persistence layer: a `BookmarkStore` interface with an
+// in-memory default (tests, web) and a Node/JSON-file implementation (the TUI).
+// The session only ever sees the store interface, so the browser bundle stays
+// free of Node builtins.
 
 import { cell } from "select/state/cells"
+import { basename } from "./path.js"
 
 // Function: normalizeName
 // Trims a bookmark name; empty names are rejected by the callers.
@@ -29,6 +31,27 @@ function isValidName(name) {
 	return text.length > 0 && !/[\s/]/.test(text)
 }
 
+// Function: suggestName
+// The automatic name for a path: its basename with whitespace (and the root
+// separator) turned into dashes. Paths without a usable segment fall back to
+// `bookmark`, so the add action always has a valid name.
+function suggestName(path) {
+	const text = basename(path).replace(/[\s/]+/g, "-").replace(/^-+|-+$/g, "")
+	return isValidName(text) ? text : "bookmark"
+}
+
+// Function: uniqueName
+// `base`, suffixed with `-2`, `-3`, … until the map has no entry under it.
+function uniqueName(map, base) {
+	let name = base
+	let suffix = 2
+	while (Object.hasOwn(map ?? {}, name)) {
+		name = `${base}-${suffix}`
+		suffix += 1
+	}
+	return name
+}
+
 // Function: normalizeEntry
 // Coerces a stored value to `{ path, isDir }`: a plain string is a legacy
 // path with an unknown kind (`isDir: null`), resolved when it is jumped to.
@@ -91,6 +114,18 @@ function createBookmarks({ store = createMemoryBookmarkStore(), entries = {} } =
 		return clean
 	}
 
+	// Function: add
+	// Records `path` under an automatic name (`suggestName`, disambiguated on
+	// collision) and persists. Returns `{ name, added }`; an already-bookmarked
+	// path keeps its existing name and reports `added: false`.
+	bookmarks.add = async (path, isDir = null) => {
+		const existing = bookmarks.find(path)
+		if (existing) return { name: existing.name, added: false }
+		const name = uniqueName(bookmarks.entries.value, suggestName(path))
+		await bookmarks.record(name, path, isDir)
+		return { name, added: true }
+	}
+
 	// Function: remove
 	// Deletes a bookmark and persists. Returns true when one was removed.
 	bookmarks.remove = async (name) => {
@@ -172,4 +207,6 @@ export {
 	normalizeEntry,
 	normalizeMap,
 	normalizeName,
+	suggestName,
+	uniqueName,
 }