@ssebastien/tcmd 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,155 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components/format
+// Presentation-only formatting helpers (sizes, counts, header title) shared by
+// every component for every renderer.
+
+// Function: formatTitle
+// Header line `TinyCmd - HOST DIR/BASE` for the given directory. When it
+// exceeds `width` columns the path's middle segments collapse to their first
+// letter, left to right, keeping the basename (`/home/seb/app` -> `/h/s/app`).
+// `host` is optional; `width <= 0` means "unknown width" and disables
+// compression.
+function formatTitle(host, path, width) {
+	const lead = host ? `TinyCmd - ${host} ` : "TinyCmd - "
+	const parts = `${path ?? ""}`.split("/").filter(Boolean)
+	let text = `${lead}/${parts.join("/")}`
+	if (width <= 0 || text.length <= width) return text
+	// Collapse middle segments (every segment but the basename), one at a time.
+	for (let i = 0; i < parts.length - 1; i++) {
+		parts[i] = parts[i][0]
+		text = `${lead}/${parts.join("/")}`
+		if (text.length <= width) return text
+	}
+	// Still too wide: drop leading segments, then hard-truncate.
+	let rest = parts
+	while (rest.length > 1) {
+		rest = rest.slice(1)
+		text = `${lead}…/${rest.join("/")}`
+		if (text.length <= width) return text
+	}
+	return `${text.slice(0, Math.max(0, width - 1))}…`
+}
+
+// Function: crumbSpan
+// Columns a breadcrumb segment occupies: the root "/" is one column; a name
+// is its width plus one for the "/" separator, except the basename (the last
+// segment) which carries no separator.
+function crumbSpan(segment, isLast) {
+	if (isRootish(segment)) return 1
+	return `${segment.name}`.length + (isLast ? 0 : 1)
+}
+
+// Function: isRootish
+// True for the leading "/" segment.
+function isRootish(segment) {
+	return segment?.path === "/"
+}
+
+// Function: elideCrumbs
+// Width-aware breadcrumb segments. Full names while they fit `width`
+// columns; then the leftmost middle segments collapse to their first letter
+// (original case, e.g. Workspace -> W) one at a time, basename last; then —
+// only when even one letter per segment cannot fit — leading segments are
+// dropped behind a "…" marker. Every remaining segment keeps at least one
+// letter and every "/" survives, so the strip stays clickable end to end.
+// `width <= 0` (unknown, web) returns the segments untouched.
+function elideCrumbs(segments, width) {
+	const list = segments ?? []
+	if (width <= 0 || list.length === 0) return list
+	const measure = (segs) =>
+		segs.reduce((cols, segment, i) => cols + crumbSpan(segment, i === segs.length - 1), 0)
+	if (measure(list) <= width) return list
+	// Collapse leftmost non-root segments to one letter; the basename stays.
+	const collapsed = list.map((segment) => ({ ...segment }))
+	for (let i = 1; i < collapsed.length - 1; i++) {
+		collapsed[i] = { ...collapsed[i], name: `${collapsed[i].name}`.slice(0, 1) }
+		if (measure(collapsed) <= width) return collapsed
+	}
+	// Even one letter each cannot fit: drop leading segments behind a "…".
+	const marker = { name: "…", path: null }
+	let rest = collapsed.slice(1)
+	while (rest.length > 1 && measure([marker, ...rest]) > width) {
+		rest = rest.slice(1)
+	}
+	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) {
+	const value = Number(ms)
+	if (!Number.isFinite(value) || value <= 0) return ""
+	const date = new Date(value)
+	const pad = (n) => `${n}`.padStart(2, "0")
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+// Function: formatMode
+// POSIX permission string ("-rw-r--r--", "drwxr-xr-x") from a stat mode; empty
+// when the backend does not provide one. The leading character reflects the
+// file type and the setuid/setgid/sticky bits replace the execute slot.
+function formatMode(mode) {
+	if (!Number.isFinite(mode) || mode <= 0) return ""
+	const type = mode & 0o170000
+	const fileType = type === 0o040000 ? "d" : type === 0o120000 ? "l" : type === 0o020000 ? "c" : type === 0o060000 ? "b" : type === 0o010000 ? "p" : "-"
+	const bits = mode & 0o7777
+	const triple = (shift, special, set, unset) => {
+		const part = (bits >> shift) & 7
+		const exec = part & 1 ? "x" : "-"
+		const execSpecial = special ? (exec === "x" ? set : unset) : exec
+		return `${part & 4 ? "r" : "-"}${part & 2 ? "w" : "-"}${execSpecial}`
+	}
+	return (
+		fileType +
+		triple(6, bits & 0o4000, "s", "S") +
+		triple(3, bits & 0o2000, "s", "S") +
+		triple(0, bits & 0o1000, "t", "T")
+	)
+}
+
+// Function: formatCounts
+// Summary counts line: "3 dirs, 12 files, 4.2K".
+function formatCounts(entries) {
+	let dirs = 0
+	let files = 0
+	let bytes = 0
+	const list = entries ?? []
+	for (let i = 0; i < list.length; i++) {
+		if (list[i].isDir) dirs++
+		else {
+			files++
+			bytes += list[i].size ?? 0
+		}
+	}
+	return `${dirs} dirs, ${files} files, ${formatSize(bytes)}`
+}
+
+export { elideCrumbs, formatCounts, formatDisk, formatMode, formatSize, formatTime, formatTitle }
+
+// EOF

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

@@ -0,0 +1,185 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// 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`,
+// `Dockerfile` and dotfiles like `.gitignore` get their icon even without a
+// distinguishing extension.
+//
+// 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
+// renderer environment enables them (`env.icons`, resolved from `TCMD_ICONS`
+// in `tui/catalogue.js`; `TCMD_ICONS=0|false|off` opts out, and the web view
+// never enables it because browsers lack the font).
+//
+// Pure string mapping: no Node builtins, no renderer imports, so both
+// catalogues (TUI and web) share it.
+
+// Constant: DIR_ICON, SYMLINK_ICON, DEVICE_ICON, FILE_ICON
+// Kind icons. Symlinks read as a chain (matching `nameFg`, where a link wins
+// over its target kind, like `dircolors`).
+const DIR_ICON = "\u{f07b}" // nf-fa-folder
+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: NAME_ICONS
+// Basename (lowercase, leading dot stripped) → glyph, checked before the
+// extension table.
+const NAME_ICONS = {
+	"cmakelists": "\u{e794}", // nf-dev-cmake
+	"dockerfile": "\u{e650}", // nf-seti-docker
+	"gnumakefile": "\u{e673}", // nf-seti-makefile
+	"gitattributes": "\u{e65d}", // nf-seti-git
+	"gitconfig": "\u{e65d}", // nf-seti-git
+	"gitignore": "\u{e65d}", // nf-seti-git
+	"gitmodules": "\u{e65d}", // nf-seti-git
+	"license": "\u{e60a}", // nf-seti-license
+	"licence": "\u{e60a}", // nf-seti-license
+	"makefile": "\u{e673}", // nf-seti-makefile
+	"npmrc": "\u{e616}", // nf-seti-npm
+	"readme": "\u{e609}", // nf-seti-markdown
+}
+
+// Constant: EXTENSION_ICONS
+// Extension (lowercase, no dot) → glyph. The icons are the seti theme's — the
+// same source yazi draws from.
+const EXTENSION_ICONS = {
+	// Languages
+	"c": "\u{e649}", // nf-seti-c
+	"cc": "\u{e646}", // nf-seti-cpp
+	"clj": "\u{e642}", // nf-seti-clojure
+	"cpp": "\u{e646}", // nf-seti-cpp
+	"cs": "\u{e648}", // nf-seti-c_sharp
+	"d": "\u{e651}", // nf-seti-d
+	"ex": "\u{e62d}", // nf-seti-elixir
+	"exs": "\u{e62d}", // nf-seti-elixir
+	"go": "\u{e627}", // nf-seti-go
+	"gql": "\u{e662}", // nf-seti-graphql
+	"graphql": "\u{e662}", // nf-seti-graphql
+	"h": "\u{e649}", // nf-seti-c
+	"hbs": "\u{e60f}", // nf-seti-mustache
+	"hs": "\u{e61f}", // nf-seti-haskell
+	"hpp": "\u{e646}", // nf-seti-cpp
+	"java": "\u{e66d}", // nf-seti-java
+	"js": "\u{e60c}", // nf-seti-javascript
+	"cjs": "\u{e60c}", // nf-seti-javascript
+	"mjs": "\u{e60c}", // nf-seti-javascript
+	"jsx": "\u{e625}", // nf-seti-react
+	"kt": "\u{e634}", // nf-seti-kotlin
+	"kts": "\u{e634}", // nf-seti-kotlin
+	"lua": "\u{e620}", // nf-seti-lua
+	"nim": "\u{e677}", // nf-seti-nim
+	"perl": "\u{e67e}", // nf-seti-perl
+	"pl": "\u{e67e}", // nf-seti-perl
+	"php": "\u{e608}", // nf-seti-php
+	"ps1": "\u{e691}", // nf-seti-shell
+	"py": "\u{e606}", // nf-seti-python
+	"r": "\u{e68a}", // nf-seti-r
+	"rb": "\u{e605}", // nf-seti-ruby
+	"rs": "\u{e68b}", // nf-seti-rust
+	"scala": "\u{e68e}", // nf-seti-scala
+	"sh": "\u{e691}", // nf-seti-shell
+	"sql": "\u{e7c4}", // nf-dev-sqlite
+	"swift": "\u{e699}", // nf-seti-swift
+	"ts": "\u{e628}", // nf-seti-typescript
+	"tsx": "\u{e625}", // nf-seti-react
+	"vim": "\u{e7c5}", // nf-dev-vim
+	"zsh": "\u{e691}", // nf-seti-shell
+	// Web
+	"css": "\u{e614}", // nf-seti-css
+	"htm": "\u{e60e}", // nf-seti-html
+	"html": "\u{e60e}", // nf-seti-html
+	"json": "\u{e60b}", // nf-seti-json
+	"less": "\u{e614}", // nf-seti-css
+	"sass": "\u{e603}", // nf-seti-sass
+	"scss": "\u{e603}", // nf-seti-sass
+	"svg": "\u{e698}", // nf-seti-svg
+	"vue": "\u{e6a0}", // nf-seti-vue
+	"xml": "\u{e619}", // nf-seti-xml
+	"yaml": "\u{e6a8}", // nf-seti-yml
+	"yml": "\u{e6a8}", // nf-seti-yml
+	// Data and docs
+	"csv": "\u{f0218}", // nf-md-file_delimited
+	"log": "\u{e64e}", // nf-seti-text
+	"pdf": "\u{e67d}", // nf-seti-pdf
+	"toml": "\u{e6b2}", // nf-custom-toml
+	"tsv": "\u{f0218}", // nf-md-file_delimited
+	"txt": "\u{e64e}", // nf-seti-text
+	// Media
+	"avi": "\u{e69f}", // nf-seti-video
+	"flac": "\u{e638}", // nf-seti-audio
+	"gif": "\u{e60d}", // nf-seti-image
+	"jpeg": "\u{e60d}", // nf-seti-image
+	"jpg": "\u{e60d}", // nf-seti-image
+	"m4a": "\u{e638}", // nf-seti-audio
+	"mkv": "\u{e69f}", // nf-seti-video
+	"mov": "\u{e69f}", // nf-seti-video
+	"mp3": "\u{e638}", // nf-seti-audio
+	"mp4": "\u{e69f}", // nf-seti-video
+	"ogg": "\u{e638}", // nf-seti-audio
+	"png": "\u{e60d}", // nf-seti-image
+	"wav": "\u{e638}", // nf-seti-audio
+	"webm": "\u{e69f}", // nf-seti-video
+	"webp": "\u{e60d}", // nf-seti-image
+	// Archives and misc
+	"7z": "\u{e6aa}", // nf-seti-zip
+	"bz2": "\u{e6aa}", // nf-seti-zip
+	"cfg": "\u{e615}", // nf-seti-config
+	"conf": "\u{e615}", // nf-seti-config
+	"db": "\u{e7c4}", // nf-dev-sqlite
+	"diff": "\u{f440}", // nf-oct-diff
+	"env": "\u{e615}", // nf-seti-config
+	"gz": "\u{e6aa}", // nf-seti-zip
+	"ini": "\u{e615}", // nf-seti-config
+	"jar": "\u{e6aa}", // nf-seti-zip
+	"lock": "\u{e672}", // nf-seti-lock
+	"patch": "\u{f440}", // nf-oct-diff
+	"rar": "\u{e6aa}", // nf-seti-zip
+	"tar": "\u{e6aa}", // nf-seti-zip
+	"xz": "\u{e6aa}", // nf-seti-zip
+	"zip": "\u{e6aa}", // nf-seti-zip
+	// Tooling
+	"cmake": "\u{e794}", // nf-dev-cmake
+	"mk": "\u{e673}", // nf-seti-makefile
+}
+
+// Function: extensionOf
+// Lowercase extension without the dot. A leading dot (dotfile) or a trailing
+// dot means "no extension".
+function extensionOf(name) {
+	const base = `${name ?? ""}`
+	const dot = base.lastIndexOf(".")
+	if (dot <= 0 || dot === base.length - 1) return ""
+	return base.slice(dot + 1).toLowerCase()
+}
+
+// Function: iconFor
+// The Nerd Font glyph for an entry: kind first (symlink wins over directory,
+// matching `nameFg`), then the basename, then the extension, then the generic
+// file icon.
+function iconFor(entry) {
+	if (!entry) return ""
+	if (entry.isSymlink) return SYMLINK_ICON
+	if (entry.isDevice) return DEVICE_ICON
+	if (entry.isDir) return DIR_ICON
+	const name = `${entry.name ?? ""}`
+	const plain = (name.startsWith(".") ? name.slice(1) : name).toLowerCase()
+	return NAME_ICONS[plain] ?? EXTENSION_ICONS[extensionOf(name)] ?? FILE_ICON
+}
+
+// Function: iconsEnabled
+// Whether rows show icons: on by default, `TCMD_ICONS=0|false|off` opts out
+// for terminals without a Nerd Font.
+function iconsEnabled(environment = globalThis.process?.env ?? {}) {
+	const value = environment.TCMD_ICONS
+	return value !== "0" && value !== "false" && value !== "off"
+}
+
+export { DEVICE_ICON, DIR_ICON, FILE_ICON, SYMLINK_ICON, extensionOf, iconFor, iconsEnabled }
+
+// EOF

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

@@ -0,0 +1,41 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/components
+// Manifest of the shared, renderer-agnostic component logic. Each module
+// exports `createBehaviors(env)` and pure helpers; the TUI (`tui/catalogue`)
+// and web (`web/catalogue`) bind them to their `.xml` / `.html` templates
+// through the shared `bind` helper.
+
+// Binding
+export { bind } from "./bind.js"
+export { commandBarMarks, commandBarMarksItem, commandBarRowCount, commandBarStatus } from "./CommandBar.js"
+
+// Behaviors
+export { createBehaviors as appBehaviors, createEvents as appEvents, createInit as appInit } from "./App.js"
+export { createBehaviors as bookmarkListBehaviors } from "./BookmarkList.js"
+export { createBehaviors as bookmarkRowBehaviors } from "./BookmarkRow.js"
+export { createBehaviors as breadcrumbsBehaviors } from "./Breadcrumbs.js"
+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 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 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"
+
+// EOF

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

@@ -0,0 +1,212 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/components/rows
+// Keyed row builders shared by the TUI and web catalogues. Each builder is
+// `(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.
+//
+// Row state (cursor, marks, selection) is snapshotted into plain per-row
+// booleans (`currentRow`, `markedRow`, `selectedRow`) instead of broadcasting
+// the shared cells into every row: a shared cell in every row bag makes a move
+// re-render all N rows, while a plain per-row flag lets the keyed-map
+// reconciliation update only the rows that changed. The builders still read
+// the shared sources (they `unwrap` cursor/marked/selected), so they re-run on
+// every move and rewrite just the two changed bags. Row behaviors read the
+// flags through predicates that fall back to the shared cells for hosts that
+// build bags by hand (`isSelected` here, `rowCurrent`/`rowIsMarked` in
+// `FileRow`).
+//
+// Exception: the command panel's rows keep the shared reactive
+// `cursor`/`focus` cells, because focus ownership depends on the row type
+// (`CommandArgRow.wantsFocus`), which the builders do not know.
+
+import { unwrap } from "select/state/cells"
+
+// Function: isCell
+// True when `value` is a reactive cell, using the same `isReactive` marker the
+// library itself checks for.
+function isCell(value) {
+	return Boolean(value && value.isReactive === true)
+}
+
+// Function: isSelected
+// Whether a palette/bookmark row is the current selection. The plain
+// `selectedRow` flag (snapshotted by the row builder) wins over the shared
+// `selected` cell, so a move only rewrites the rows that actually changed.
+function isSelected(data) {
+	if (data.selectedRow !== undefined) return data.selectedRow === true
+	return data.index === unwrap(data.selected)
+}
+
+// Constant: ROW_WINDOW_MARGIN
+// Extra rows rendered above and below the viewport when a pane windows its
+// list, so a scroll step or a cursor nudge does not first expose a blank row.
+const ROW_WINDOW_MARGIN = 8
+
+// 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
+// off-screen rows every frame. The window follows the cursor with a margin and
+// clamps at both ends; `local` is the cursor's index inside the window (what
+// the scrollbox tracks) and `total` the full row count. A viewport of 0 (not
+// yet known) mounts everything so the layout can be measured.
+function fileWindow(data, viewport) {
+	const entries = unwrap(data.entries) ?? []
+	const total = entries.length
+	const cursor = isCell(data.cursor) ? unwrap(data.cursor) : (data.cursor ?? 0)
+	const vp = Math.floor(viewport ?? 0)
+	if (vp <= 0 || total <= vp) {
+		return { start: 0, len: total, local: cursor, total }
+	}
+	const count = vp + 2 * ROW_WINDOW_MARGIN
+	const maxStart = Math.max(0, total - count)
+	const start = Math.max(0, Math.min(cursor - ROW_WINDOW_MARGIN, maxStart))
+	const len = Math.min(count, 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.
+function crumbRows(Crumb) {
+	return (self, data) => {
+		const segments = data.segments ?? []
+		const last = segments.length - 1
+		return Crumb.map(
+			segments,
+			(item, index) => ({ item, index, last: index === last, paneId: data.paneId }),
+			(segment) => segment.path ?? "…",
+		)
+	}
+}
+
+// Function: fileRows
+// `{ item: entry, index, currentRow, markedRow, active, paneId }` bags for
+// `FileRow` rows. `currentRow`/`markedRow` are plain per-row booleans
+// snapshotted from the shared `cursor`/`marked` sources (cells or plain
+// values); the keyed map reconciles them by `$key`, so a cursor move rewrites
+// two row bags and leaves the rest untouched. `active` stays the shared
+// pane-focus cell, read with `unwrap` by the row behavior so the cursor row
+// renders muted in the inactive pane.
+function fileRows(FileRow) {
+	return (self, data) => {
+		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)
+		const bag = (item, index) => ({
+			item,
+			index,
+			currentRow: index === cursor,
+			markedRow: Boolean(marked?.has?.(item.path)),
+			active: data.active,
+			paneId: data.paneId,
+		})
+		if (start === 0 && len === entries.length) {
+			return FileRow.map(entries, bag, (entry) => entry.path)
+		}
+		return FileRow.map(entries.slice(start, start + len), (item, i) => bag(item, start + i), (entry) => entry.path)
+	}
+}
+
+// Function: paletteRows
+// `{ item: command, index, selectedRow }` bags for `PaletteRow` rows.
+// `selectedRow` is the plain per-row selection flag so a palette move rewrites
+// only the changed rows.
+function paletteRows(PaletteRow) {
+	return (self, data) => {
+		const selected = isCell(data.selected) ? unwrap(data.selected) : data.selected
+		return PaletteRow.map(
+			data.items ?? [],
+			(item, index) => ({ item, index, selectedRow: index === selected }),
+			(command) => command.id,
+		)
+	}
+}
+
+// Function: commandItemRows
+// `{ item: command, index }` bags for `CommandItem` rows.
+function commandItemRows(CommandItem) {
+	return (self, data) =>
+		CommandItem.map(
+			data.items ?? [],
+			(item, index) => ({ item, index }),
+			(command) => command.id ?? `${command.title}:${command.keys}`,
+		)
+}
+
+// Function: panelOpRows
+// `{ item: op, index, row, cursor, focus }` bags for the command panel's
+// operation column (`CommandArgRow`). `row` is the normalized row shape the
+// component reads — `name` is the operation title and `summary` its argument
+// list (precomputed by `session.panelItems`, the signature with the leading
+// name stripped); `risk` tints destructive/caution operations; `cursor` is the
+// column's selected index.
+function panelOpRows(CommandArgRow) {
+	return (self, data) =>
+		CommandArgRow.map(
+			data.items ?? [],
+			(item, index) => ({
+				item,
+				index,
+				row: {
+					type: "op",
+					key: item.id,
+					name: item.title,
+					summary: item.summary ?? "",
+					risk: item.risk ?? null,
+				},
+				cursor: data.opCursor,
+				focus: data.focus,
+			}),
+			(item) => item.id,
+		)
+}
+
+// Function: panelArgRows
+// `{ item: row, index, row, cursor, focus }` bags for the command panel's
+// argument column (`CommandArgRow`). The rows are already flattened by
+// `core/panel.panelRowList`; `cursor` is the column's selected index.
+function panelArgRows(CommandArgRow) {
+	return (self, data) =>
+		CommandArgRow.map(
+			data.rows ?? [],
+			(item, index) => ({
+				item,
+				index,
+				row: item,
+				cursor: data.argCursor,
+				focus: data.focus,
+			}),
+			(row) => row.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.
+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,
+		)
+	}
+}
+
+export { bookmarkRows, commandItemRows, crumbRows, fileRows, fileWindow, isSelected, paletteRows, panelArgRows, panelOpRows }
+
+// EOF