@ssebastien/tcmd 0.1.3 → 0.1.7

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

@@ -8,10 +8,20 @@
 // their leading content; other kinds show a metadata card. Renderer-agnostic
 // logic; `FilePreview.xml` / `FilePreview.html` are the presentations.
 //
-// Environment: `textFg`, `textSecondaryFg`, `textHeadingFg`.
+// A directory is the exception: it renders the *directory column* — its own
+// breadcrumbs over a cursorable listing — so a previewed directory looks and
+// behaves like a pane in every view mode (click a row to focus it, Enter to
+// descend). The listing is the inspector pane's (`session.panes.preview`),
+// threaded down as the `dir*` inputs; `paneId` is what rows, crumbs and the
+// column body publish back to the App.
+//
+// Environment: `textFg`, `textSecondaryFg`, `textHeadingFg`, and the optional
+// `actions` footer text (default: the TUI's `[Open O] [Edit E]` hints; the web
+// substitutes a note that those keys do not exist in a browser).
 
 import { unwrap } from "select/state/cells"
 import { formatSize } from "./format.js"
+import { previewSource } from "../core/preview.js"
 
 const KIND_LABELS = {
 	directory: "directory",
@@ -48,16 +58,20 @@ function hasText(preview) {
 
 // Function: previewTitle
 // "Filename <EXT>" style title; falls back to the kind label when the file has
-// no extension.
+// no extension. A decompressed preview adds the inner label, so
+// `notes.txt.gz` reads `notes.txt.gz  <GZ · TXT>`.
 function previewTitle(preview) {
 	if (!preview) return "preview"
 	const badge = (preview.ext || KIND_LABELS[preview.kind] || "file").toUpperCase()
-	return `${preview.title}  <${badge}>`
+	const inner = preview.compression && preview.innerExt ? ` · ${preview.innerExt.toUpperCase()}` : ""
+	return `${preview.title}  <${badge}${inner}>`
 }
 
 // Function: entryCard
 // Metadata card for the entry the session did not preview: a directory, or a
-// file whose kind has no inline preview.
+// file whose kind has no inline preview. Directories normally take the
+// directory column instead (see `isDirectoryPane`); the branch stays for a
+// `stat` payload and for hosts that render no listing.
 function entryCard(entry) {
 	if (!entry) return ""
 	const lines = []
@@ -69,42 +83,127 @@ function entryCard(entry) {
 	return lines.join("\n")
 }
 
+// Function: isDirectoryPane
+// True when the inspector previews a plain directory: no `stat` card was
+// pinned on it, so the directory column takes the body.
+function isDirectoryPane(preview, entry) {
+	return Boolean(entry?.isDir) && !preview
+}
+
 // Function: headerTitle
-// The inspector title: the preview's own title, else the cursor entry.
+// The inspector title: the preview's own title, else the cursor entry — whose
+// symlink target and resolved extension `previewSource` supplies, so the
+// header names the traversal before the async read lands.
 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}>`
+		const source = previewSource(entry)
+		const badge = entry.isDir ? "DIR" : (source.ext || "file").toUpperCase()
+		const inner =
+			!entry.isDir && source.compression && source.innerExt
+				? ` · ${source.innerExt.toUpperCase()}`
+				: ""
+		const name = entry.isDir ? `${entry.name}/` : entry.name
+		const target = entry.isSymlink && entry.target ? ` -> ${entry.target}` : ""
+		return `${name}${target}  <${badge}${inner}>`
 	}
 	return "inspector"
 }
 
 // Function: createBehaviors
 // Builds the FilePreview behavior map for the given renderer environment.
+// `env.actions` overrides the footer line so a presentation can carry its own
+// copy (the browser has no Open/Edit); the default advertises the TUI keys.
 function createBehaviors(env) {
+	const actions = env.actions ?? (() => " [Open O] [Edit E]")
+	const directory = (_self, data) =>
+		isDirectoryPane(unwrap(data.preview), unwrap(data.entry))
+	const body = (_self, data) => !directory(_self, data)
+	// An image the renderer can actually decode: the card stays whenever the
+	// preview carries `stat` details, or the entry sits behind the cursor as a
+	// directory. `imageExts` is renderer knowledge (the terminal image path
+	// decodes the raster formats only), so it comes from the environment and
+	// the web — which has no image renderable — simply never matches.
+	const isImage = (_self, data) => {
+		const preview = unwrap(data.preview)
+		const entry = unwrap(data.entry)
+		if (preview?.kind !== "image" || preview.details || !entry?.path) return false
+		const ext = `${preview.ext ?? entry.ext ?? ""}`.toLowerCase()
+		return (env.imageExts ?? []).includes(ext)
+	}
 	return {
-		actions: () => " [Open O] [Edit E]",
+		actions,
 		actionsFg: () => env.textSecondaryFg,
 		cardText: (_self, data) => cardText(unwrap(data.preview)),
+		// Tree-sitter filetype for the previewed text, resolved by the
+		// renderer (the web has no highlighter and supplies no `filetype`).
+		// A compressed preview highlights the name inside, so `.txt.gz`
+		// still lands on the text parser.
+		codeFiletype: (_self, data) => {
+			const entry = unwrap(data.entry)
+			if (!entry?.path) return undefined
+			const source = previewSource(entry)
+			return env.filetype?.(source.compression ? source.innerName : entry.path)
+		},
+		// The directory column: breadcrumbs over the inspector pane's listing,
+		// shaped like a pane header (a rule separates it from the body).
+		dirCrumbsView: (_self, data) => ({ segments: data.dirSegments, paneId: data.paneId }),
+		dirListView: (_self, data) => ({
+			entries: data.dirEntries,
+			cursor: data.dirCursor,
+			marked: data.dirMarked,
+			active: data.dirActive,
+			loading: data.dirLoading,
+			paneId: data.paneId,
+		}),
 		dimFg: () => env.textSecondaryFg,
 		emptyText: () => "  No file selected\n  Move the cursor or press v",
 		entryText: (_self, data) => entryCard(unwrap(data.entry)),
+		// The rule between the contents and the shortcut footer.
+		footRule: () => ["top"],
+		footRuleFg: () => env.textSecondaryFg,
+		headRule: () => ["top"],
+		headRuleFg: () => env.textSecondaryFg,
 		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),
+		isDirPane: directory,
+		// The path the image renderable loads (symlinks read through, like the
+		// text body).
+		previewImageSource: (_self, data) =>
+			isImage(_self, data) ? unwrap(data.entry)?.path : undefined,
 		previewText: (_self, data) => unwrap(data.preview)?.text ?? "",
 		previewTitle: (_self, data) => previewTitle(unwrap(data.preview)),
 		previewTitleColor: () => env.textHeadingFg,
 		show: (_self, data) => Boolean(unwrap(data.show)),
+		// One body at a time: the directory column, else the card/text/empty
+		// states, with the title row yielding to the breadcrumb header.
+		// `showEntryCard` fills in whenever there is a cursor entry but no
+		// preview payload — except a directory, which gets the listing.
+		showBody: body,
+		showCard: (_self, data) => body(_self, data) && hasCard(unwrap(data.preview)),
+		showEmpty: (_self, data) => body(_self, data) && !unwrap(data.preview) && !unwrap(data.entry),
+		showEntryCard: (_self, data) =>
+			body(_self, data) && !unwrap(data.preview) && Boolean(unwrap(data.entry)),
+		// The image takes the body on its own; when the format has no decoder
+		// (or the preview is a `stat` card) the scrollbox carries the body.
+		showImage: (_self, data) => body(_self, data) && isImage(_self, data),
+		showText: (_self, data) => body(_self, data) && hasText(unwrap(data.preview)),
+		showTextOrCard: (_self, data) => body(_self, data) && !isImage(_self, data),
 		textFg: () => env.textFg,
 	}
 }
 
-export { cardText, createBehaviors, entryCard, hasCard, hasText, headerTitle, previewTitle }
+export {
+	cardText,
+	createBehaviors,
+	entryCard,
+	hasCard,
+	hasText,
+	headerTitle,
+	isDirectoryPane,
+	previewTitle,
+}
 
 // EOF

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

@@ -1,10 +1,30 @@
+<!-- The inspector: a card/text body for a file, and a directory column
+     (breadcrumbs + cursorable listing) for a directory, so a previewed
+     directory reads as a pane. A text body highlights through the `code`
+     tree-sitter renderable; an image draws through the `image` renderable's
+     terminal graphics protocol. The body and the column share the border, and
+     the whole column is clickable to take focus. -->
 <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>
+     flexDirection="column" flexGrow="1" overflow="hidden" on:click="paneId!pane:activate">
+	<box when="isDirPane" flexDirection="row" height="1" paddingLeft="1" overflow="hidden">
+		<box flexGrow="1" flexShrink="1" minWidth="0" overflow="hidden">
+			<breadcrumbs in:segments="dirSegments" in:paneId="paneId" height="1"></breadcrumbs>
+		</box>
+	</box>
+	<box when="isDirPane" height="1" out:border="headRule" out:borderColor="headRuleFg"></box>
+	<filelist when="isDirPane" in:entries="dirEntries" in:cursor="dirCursor" in:marked="dirMarked"
+	          in:active="dirActive" in:paneId="paneId" in:loading="dirLoading"></filelist>
+	<box when="showBody" flexGrow="1" position="relative" overflow="hidden">
+		<scrollbox when="showTextOrCard" ref="body" flexGrow="1">
+			<code when="showText" out="previewText" out:fg="textFg" out:filetype="codeFiletype"></code>
+			<text when="showCard" out="cardText" out:fg="dimFg"></text>
+			<text when="showEntryCard" out="entryText" out:fg="dimFg"></text>
+			<text when="showEmpty" out="emptyText" out:fg="dimFg"></text>
+		</scrollbox>
+		<!-- Image files draw through the terminal's graphics protocol
+		     (Kitty/sixel, half-block fallback). Formats with no decoder
+		     (`bmp`, `svg`) keep the metadata card instead. -->
+		<image when="showImage" position="absolute" top="0" left="0" width="100%" height="100%"
+		       fit="fit" protocol="auto" out:source="previewImageSource"></image>
+	</box>
 </box>

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

@@ -1,5 +1,6 @@
-<li class="file-row" out:class="rowClass" on:click="paneId:paneId,index:index!list:select">
+<li class="file-row" out:class="rowClass" out:data-marked="rowMarked" out:data-active="rowActive" out:data-kind="rowKind" on:click="paneId:paneId,index:index!list:select">
 	<span class="marker" out="rowMarker"></span>
+	<svg class="file-row-icon ui-icon" when="hasIcon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use out:href="rowIconHref"></use></svg>
 	<span class="name" out:class="rowNameClass" out="rowName"></span>
 	<span class="size" out="rowSize"></span>
 </li>

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

@@ -8,22 +8,27 @@
 // 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.
+// with `unwrap` at the point of use. A symlink row carries its target in the
+// name (`notes -> ../real/notes`, see `rowName`).
 //
 // Environment: `cursorBg`, `cursorInactiveBg`, `currentClass`,
-// `accentSecondaryFg`, `accentFg`, `linkFg`, `dirFg`, `devFg`, `fileFg`,
-// `textSecondaryFg`, `dirClass`, `icons` (show Nerd Font icons).
+// `accentSecondaryFg`, `accentFg`, `linkFg`, `dirFg`, `devFg`, `execFg`,
+// `readonlyFg`, `fileFg`, `textSecondaryFg`, `dirClass`, `execClass`,
+// `readonlyClass`, `icons` (show Nerd Font icons).
 
 import { unwrap } from "select/state/cells"
 import { formatSize } from "./format.js"
-import { iconFor } from "./icons.js"
+import { iconFor, lucideIconFor } 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`).
+// can be dimmer than the name — see `rowIcon`), and, for a symlink, the
+// `-> target` tail `ls -l` prints. The name cell truncates, so a narrow pane
+// drops the target before the name itself.
 function rowName(entry) {
 	if (!entry) return ""
-	return entry.isDir ? `${entry.name}/` : entry.name
+	const name = entry.isDir ? `${entry.name}/` : entry.name
+	return entry.target ? `${name} -> ${entry.target}` : name
 }
 
 // Function: rowIcon
@@ -33,6 +38,12 @@ function rowIcon(entry, icons) {
 	return icons ? iconFor(entry) : ""
 }
 
+// Function: rowIconHref
+// The current-file SVG reference used by the browser presentation.
+function rowIconHref(entry, icons) {
+	return icons ? `#lucide-${lucideIconFor(entry)}` : ""
+}
+
 // Function: rowSize
 function rowSize(entry) {
 	if (!entry) return ""
@@ -76,21 +87,64 @@ function rowIsMarked(data) {
 	return isMarked(data.item, unwrap(data.marked))
 }
 
+// Function: hasMode
+// Whether the entry carries POSIX mode bits. Backends that report no mode
+// (OPFS, some HTTP hosts) leave it 0, so such entries never read as executable
+// or read-only.
+function hasMode(entry) {
+	return Number.isFinite(entry?.mode) && entry.mode > 0
+}
+
+// Function: isExecutable
+// Whether the entry is a regular file with an execute bit set (any of the
+// owner/group/other slots). Directories, symlinks and device nodes have their
+// own colours and never read as executable here.
+function isExecutable(entry) {
+	if (!entry || entry.isDir || entry.isSymlink || entry.isDevice) return false
+	return hasMode(entry) && (entry.mode & 0o111) !== 0
+}
+
+// Function: isReadonly
+// Whether the entry is a regular file its owner cannot write (`mode` owner
+// write bit clear). Directories, symlinks and device nodes are excluded, and
+// the web backends, which report no mode, stay unaffected.
+function isReadonly(entry) {
+	if (!entry || entry.isDir || entry.isSymlink || entry.isDevice) return false
+	return hasMode(entry) && (entry.mode & 0o200) === 0
+}
+
 // 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.
+// directory, a device node as a device, an executable file green, a read-only
+// file dimmer than a plain file, otherwise the plain file color.
 // Symlinks win over directories, matching `dircolors` (a link to a directory
-// renders as a link).
+// renders as a link), and an executable wins over a read-only file, matching
+// `ls --color` (an executable stays green even when it cannot be written).
 function nameFg(item, env) {
 	if (item?.isSymlink) return env.linkFg
 	if (item?.isDir) return env.dirFg
 	if (item?.isDevice) return env.devFg
+	if (isExecutable(item)) return env.execFg
+	if (isReadonly(item)) return env.readonlyFg
 	return env.fileFg
 }
 
+// Function: nameClass
+// The web state classes for an entry's name, mirroring `nameFg`: `dirClass`
+// for a directory, else the executable/read-only class for a file, else null.
+// The class tokens are absent on the TUI env, which colours through
+// `rowNameFg` instead.
+function nameClass(item, env) {
+	if (item?.isDir) return env.dirClass
+	if (isExecutable(item)) return env.execClass
+	if (isReadonly(item)) return env.readonlyClass
+	return null
+}
+
 // 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.
+// the cursor row the bright heading color, otherwise the entry's own color
+// (kind plus executable/read-only state, see `nameFg`).
 // 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) {
@@ -115,21 +169,25 @@ function createBehaviors(env) {
 			return undefined
 		},
 		rowClass: (_self, data) => (rowCurrent(data) ? env.currentClass : null),
+		rowMarked: (_self, data) => `${rowIsMarked(data)}`,
+		rowActive: (_self, data) => `${unwrap(data.active) !== false}`,
+		rowKind: (_self, data) => data.item?.isSymlink ? "link" : data.item?.isDir ? "dir" : data.item?.isDevice ? "dev" : "file",
 		// 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),
+		hasIcon: () => Boolean(env.icons || env.lucideIcons),
 		rowIcon: (_self, data) => rowIcon(data.item, Boolean(env.icons)),
+		rowIconHref: (_self, data) => rowIconHref(data.item, Boolean(env.lucideIcons)),
 		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),
+		rowNameClass: (_self, data) => nameClass(data.item, env),
 		rowNameFg: (_self, data) => rowNameFg(data, env),
 		rowSize: (_self, data) => rowSize(data.item),
 		rowSizeFg: () => env.textSecondaryFg,
 	}
 }
 
-export { createBehaviors, isMarked, nameFg, rowIcon, rowName, rowNameFg, rowSize }
+export { createBehaviors, isExecutable, isMarked, isReadonly, nameClass, nameFg, rowIcon, rowIconHref, rowName, rowNameFg, rowSize }
 
 // EOF

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

@@ -1,6 +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" />
+	<input when="editing" ref="query" inout="query" on:input="onFilter" 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

@@ -7,10 +7,12 @@
 // 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.
+// `query`; each change also routes through the pane's `setFilter` (passed as
+// `setFilter`), so the cursor re-anchors with no directory watcher. 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).
@@ -33,6 +35,14 @@ function createBehaviors(env) {
 		applied: (self, data) => !editing(self, data) && activeQuery(self, data).length > 0,
 		editing,
 		focused: editing,
+		// The input both displays and captures through `inout`; `on:input`
+		// additionally routes the change through the pane's `setFilter` so the
+		// cursor re-anchors on the first match. The TUI delivers the input
+		// value directly, the DOM an event carrying it.
+		onFilter: (_self, data, event) => {
+			const value = typeof event === "string" ? event : `${event?.target?.value ?? ""}`
+			data.setFilter?.(value)
+		},
 		// The bare query (shared with the web presentation).
 		label: (self, data) => queryText(self, data),
 		labelFg: () => env.accentFg,

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

@@ -1,6 +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>
+	<input when="editing" ref="query" inout="query" on:input="onFilter" 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>