@ssebastien/tcmd 0.1.4 → 0.1.7

package/src/js/tcmd/tui/catalogue.js

@@ -17,8 +17,8 @@
 // shared logic bound here to their `.xml` presentations; the browser view
 // binds the same modules to `.html`.
 
-import { extend, ui } from "select.tui"
-import { unwrap } from "select/state/cells"
+import { extend, getTags, ui } from "select.tui"
+import { effect, unwrap } from "select/state/cells"
 import bookmarkListXml from "../components/BookmarkList.xml" with { type: "text" }
 import bookmarkRowXml from "../components/BookmarkRow.xml" with { type: "text" }
 import commandBarXml from "../components/CommandBar.xml" with { type: "text" }
@@ -29,10 +29,15 @@ import confirmXml from "../components/Confirm.xml" with { type: "text" }
 import crumbXml from "../components/Crumb.xml" with { type: "text" }
 import entryDetailXml from "../components/EntryDetail.xml" with { type: "text" }
 import fileListXml from "../components/FileList.xml" with { type: "text" }
+import filePickerXml from "../components/FilePicker.xml" with { type: "text" }
+import filePickerRowXml from "../components/FilePickerRow.xml" with { type: "text" }
 import filePreviewXml from "../components/FilePreview.xml" with { type: "text" }
 import fileRowXml from "../components/FileRow.xml" with { type: "text" }
 import filterBarXml from "../components/FilterBar.xml" with { type: "text" }
 import helpXml from "../components/Help.xml" with { type: "text" }
+import helpRowXml from "../components/HelpRow.xml" with { type: "text" }
+import overlayListXml from "../components/OverlayList.xml" with { type: "text" }
+import overlayRowXml from "../components/OverlayRow.xml" with { type: "text" }
 import rowListXml from "../components/RowList.xml" with { type: "text" }
 import summaryXml from "../components/Summary.xml" with { type: "text" }
 
@@ -43,32 +48,58 @@ import {
 	bookmarkRows,
 	breadcrumbsBehaviors,
 	commandBarBehaviors,
+	commandBarFit,
+	commandBarMarksItem,
 	commandArgRowBehaviors,
 	commandItemBehaviors,
 	commandItemRows,
-	commandBarMarksItem,
 	commandPanelBehaviors,
 	confirmBehaviors,
 	crumbBehaviors,
 	crumbRows,
 	entryDetailBehaviors,
 	fileListBehaviors,
+	filePickerBehaviors,
+	filePickerRowBehaviors,
+	filePickerRows,
 	filePreviewBehaviors,
 	fileRowBehaviors,
 	fileRows,
-	fileWindow,
 	filterBarBehaviors,
+	helpRowBehaviors,
+	helpRows,
 	iconsEnabled,
+	listingWindow,
+	overlayListBehaviors,
+	overlayRowBehaviors,
+	overlayRows,
 	panelArgRows,
 	panelOpRows,
+	panelRunRows,
 	summaryBehaviors,
 } from "../components/index.js"
 import { createBehaviors as helpBehaviors } from "../components/Help.js"
 import { INSPECTOR_INLINE_WIDTH } from "../components/Frame.js"
+import { CodeRenderable, ImageRenderable, pathToFiletype, createTextAttributes } from "./opentui.js"
+import { syntaxStyle } from "./syntax.js"
 import { tuiTheme } from "./theme.js"
 
 let registered = false
 
+// Class: CodeView
+// The `code` host tag: OpenTUI's tree-sitter `CodeRenderable` with the shared
+// `SyntaxStyle` injected, because the renderable reads its style at
+// construction time and a template attribute can only carry a string. Content
+// and `filetype` still arrive through the node's own `out:` bindings.
+class CodeView extends CodeRenderable {
+	constructor(ctx, options) {
+		super(ctx, {
+			...options,
+			syntaxStyle: options.syntaxStyle ?? syntaxStyle(ctx.nativeScene),
+		})
+	}
+}
+
 // Function: tuiEnv
 // The TUI renderer environment: OpenTUI colors plus TUI-only hooks.
 function tuiEnv() {
@@ -87,14 +118,23 @@ function tuiEnv() {
 		dirFg: tuiTheme.dirFg,
 		errorBg: tuiTheme.errorBg,
 		errorFg: tuiTheme.errorFg,
+		execFg: tuiTheme.execFg,
 		fieldBg: tuiTheme.fieldBg,
 		fileFg: tuiTheme.fileFg,
+		groupAttributes: createTextAttributes({ bold: true }),
+		// Resolves an entry path to a tree-sitter filetype (undefined when no
+		// bundled parser matches, and the preview then draws plain text).
+		filetype: (path) => pathToFiletype(path),
+		// Raster formats the `image` renderable decodes. `bmp`/`svg` are not
+		// among them, so those previews keep the metadata card.
+		imageExts: ["gif", "jpeg", "jpg", "png", "webp"],
 		// Nerd Font icons in rows, on unless `TCMD_ICONS` opts out.
 		icons: iconsEnabled(process.env),
 		lineFg: tuiTheme.textSecondaryFg,
 		linkFg: tuiTheme.linkFg,
 		mutedBg: tuiTheme.mutedBg,
 		overlayBg: tuiTheme.overlayBg,
+		readonlyFg: tuiTheme.readonlyFg,
 		selectionBg: tuiTheme.selectionBg,
 		surfaceBg: tuiTheme.surfaceBg,
 		textFg: tuiTheme.textFg,
@@ -164,17 +204,23 @@ function keepVisible(box, index, total) {
 	return top
 }
 
-// Keep the file-list cursor row inside the viewport. When the list is windowed
-// (a `viewport` height is threaded down) the scrollbox holds only the window,
-// so it scrolls to the cursor's index inside that window against the window
-// length; otherwise it scrolls the full listing.
+// Keep the file-list cursor row inside the viewport. The window comes from
+// `listingWindow`, the same helper the row builder uses, so the scrollbox
+// content and the scroll keeper never disagree (a windowed pane scrolls the
+// cursor inside its window; an inspector without a threaded viewport mounts
+// the full listing and scrolls it by absolute index).
 function fileListScrollTop(self, data) {
-	const viewport = unwrap(data.viewport)
-	if (viewport > 0) {
-		const { local, len } = fileWindow(data, viewport)
-		return keepVisible(self.ref.list, local, len)
-	}
-	return keepVisible(self.ref.list, unwrap(data.cursor) ?? 0, unwrap(data.entries)?.length ?? 0)
+	const { local, len } = listingWindow(data, unwrap(data.viewport) ?? 0)
+	return keepVisible(self.ref.list, local, len)
+}
+
+// Keep the file picker's cursor row inside its viewport, using the same
+// bounded window as the row builder.
+function filePickerScrollTop(self, data) {
+	const rows = unwrap(data.rows) ?? []
+	const cursor = unwrap(data.cursor) ?? 0
+	const { local, len } = listingWindow({ entries: rows, cursor }, 0)
+	return keepVisible(self.ref.list, local, len)
 }
 
 // Keep the bookmark picker selection inside its viewport.
@@ -182,21 +228,101 @@ function bookmarkScrollTop(self, data) {
 	return keepVisible(self.ref.list, unwrap(data.selected) ?? 0, unwrap(data.items)?.length ?? 0)
 }
 
-// Keep the command panel's argument cursor inside its viewport.
+// Keep the shared list overlay's cursor inside its viewport.
+function overlayScrollTop(self, data) {
+	return keepVisible(self.ref.list, unwrap(data.cursor) ?? 0, unwrap(data.items)?.length ?? 0)
+}
+
+// Keep the selected command visible in the command panel's scrolling list.
+function panelOpScrollTop(self, data) {
+	const items = unwrap(data.items) ?? []
+	const cursor = unwrap(data.opCursor) ?? 0
+	const index = items.findIndex((item) => item.type === "op" && item.entryIndex === cursor)
+	const box = self.ref.ops
+	// OpenTUI's measured scrollbox height includes two clipped edge cells in a
+	// modal, so scroll against the visible content height rather than the frame.
+	const visibleBox = box?.height
+		? { height: Math.max(1, Math.floor(box.height) - 2), scrollTop: box.scrollTop, scrollHeight: box.scrollHeight }
+		: box
+	return keepVisible(visibleBox, Math.max(0, index), items.length)
+}
+
+// Keep enough vertical room for the trailing Run row on compact terminals while
+// retaining the usual shorter panel on a full-sized viewport.
+function panelDialogHeight(self) {
+	const height = Math.floor(self.ctx?.height ?? 0)
+	if (!height) return "72%"
+	return Math.floor(height * (height <= 20 ? 0.85 : 0.72))
+}
+
+// Keep the command panel's argument cursor inside its viewport. Argument
+// headers are two lines tall and a selection's item run gains a border row at
+// each end, so the offset is measured in rendered lines rather than row
+// indices.
 function panelArgScrollTop(self, data) {
-	return keepVisible(self.ref.args, unwrap(data.argCursor) ?? 0, unwrap(data.rows)?.length ?? 0)
+	// Arguments, the preflight preview and Run share the argument scroller;
+	// the mapping must count the preview and Run's leading blank line so the
+	// cursor can still be kept in view at the bottom.
+	const rows = unwrap(data.rows) ?? []
+	const box = self.ref.args
+	if (!rows.length) return box?.scrollTop ?? 0
+	const cursor = Math.min(unwrap(data.argCursor) ?? 0, rows.length - 1)
+	const previewHeight = unwrap(data.preview) ? (self.ref.previewBox?.height ?? 0) : 0
+	let offset = 0
+	let cursorTop = 0
+	let cursorHeight = 1
+	for (let i = 0; i < rows.length; i++) {
+		const row = rows[i]
+		// Run is preceded by the preview (when there is one) and by its own
+		// one-line separation from the last field.
+		if (row.type === "run") offset += 1 + previewHeight
+		const firstItem = row.type === "item" && (i === 0 || rows[i - 1].type !== "item")
+		const lastItem = row.type === "item" && (i === rows.length - 1 || rows[i + 1].type !== "item")
+		if (firstItem) offset += 1
+		const height = row.type === "arg" ? 2 : 1
+		if (i === cursor) {
+			cursorTop = offset
+			cursorHeight = height
+		}
+		offset += height
+		if (lastItem) offset += 1
+	}
+	return keepRangeVisible(box, cursorTop, cursorHeight, offset)
+}
+
+// Function: keepRangeVisible
+// The line-based counterpart of `keepVisible`: keeps the `[top, top + height)`
+// run inside the scrollbox, then nudges one line at the same edge margins.
+function keepRangeVisible(box, top, height, total) {
+	if (!box || !box.height) return box?.scrollTop ?? 0
+	const view = Math.max(1, Math.floor(box.height))
+	const maxTop = Math.max(0, total - view)
+	let scroll = Math.max(0, Math.min(box.scrollTop ?? 0, maxTop))
+	if (top < scroll) scroll = top
+	else if (top + height > scroll + view) scroll = top + height - view
+	const position = top - scroll
+	if (position > SCROLL_HIGH * view && scroll < maxTop) scroll += 1
+	else if (position < SCROLL_LOW * view && scroll > 0) scroll -= 1
+	return scroll
 }
 
 // Function: commandBarRows
-// Appends the active pane's marked count as a trailing dimmed entry, then
-// maps the items to rows. The entries wrap onto as many rows as the width
-// demands; nothing is trimmed.
+// Appends the active pane's marked count as a trailing dimmed entry, fits the
+// entries on one line (dropping what does not fit behind an ellipsis), then
+// maps them to rows.
 function commandBarRows(commandItem) {
 	const base = commandItemRows(commandItem)
 	return (self, data) => {
+		const viewport = unwrap(data.uiSize)
+		const viewportWidth = Math.floor(viewport?.width ?? 0)
+		// Prefer the injected viewport: the box geometry still reports the
+		// previous width on the frame a resize arrives.
+		const own = Math.floor(self.ref.box?.width ?? 0)
+		const width = viewportWidth > 0 ? viewportWidth - 1 : own
 		const items = unwrap(data.items) ?? []
 		const marks = commandBarMarksItem(data)
-		return base(self, { ...data, items: marks ? [...items, marks] : items })
+		const entries = marks ? [...items, marks] : items
+		return base(self, { ...data, items: commandBarFit(entries, width) })
 	}
 }
 
@@ -208,8 +334,11 @@ function createComponents() {
 	const commandArgRow = bind(ui, "CommandArgRow", commandArgRowXml, commandArgRowBehaviors(env))
 	const crumb = bind(ui, "Crumb", crumbXml, crumbBehaviors(env))
 	const fileRow = bind(ui, "FileRow", fileRowXml, fileRowBehaviors(env))
+	const filePickerRow = bind(ui, "FilePickerRow", filePickerRowXml, filePickerRowBehaviors(env))
 	const filterBar = bind(ui, "FilterBar", filterBarXml, filterBarBehaviors(env))
 	const bookmarkRow = bind(ui, "BookmarkRow", bookmarkRowXml, bookmarkRowBehaviors(env))
+	const overlayRow = bind(ui, "OverlayRow", overlayRowXml, overlayRowBehaviors(env))
+	const helpRow = bind(ui, "HelpRow", helpRowXml, helpRowBehaviors({ theme: tuiTheme }))
 	return {
 		BookmarkRow: bookmarkRow,
 		CommandArgRow: commandArgRow,
@@ -231,8 +360,11 @@ function createComponents() {
 		})),
 		CommandPanel: bind(ui, "CommandPanel", commandPanelXml, commandPanelBehaviors({
 			...env,
+			panelHeight: panelDialogHeight,
 			opRows: panelOpRows(commandArgRow),
 			argRows: panelArgRows(commandArgRow),
+			runRows: panelRunRows(commandArgRow),
+			opScrollTop: panelOpScrollTop,
 			argScrollTop: panelArgScrollTop,
 		})),
 		Confirm: bind(ui, "Confirm", confirmXml, confirmBehaviors(env)),
@@ -247,9 +379,37 @@ function createComponents() {
 			rows: fileRows(fileRow),
 			scrollTop: fileListScrollTop,
 		})),
-		FilePreview: bind(ui, "FilePreview", filePreviewXml, filePreviewBehaviors(env)),
+		FilePicker: bind(ui, "FilePicker", filePickerXml, filePickerBehaviors({
+			...env,
+			rows: filePickerRows(filePickerRow),
+			scrollTop: filePickerScrollTop,
+		})),
+		FilePreview: bind(ui, "FilePreview", filePreviewXml, filePreviewBehaviors(env)).init((self, data) => {
+			// A new preview target starts at the top of the body. `entry` is the
+			// reactive cell the App threads down; the effect fires after mount,
+			// when `ref.body` exists, and the following render swaps the text.
+			if (data?.entry?.isReactive) {
+				self.effect(() => effect([data.entry], () => {
+					if (self.ref.body) self.ref.body.scrollTop = 0
+				}))
+			}
+			// A full-preview scroll request (App key routing) moves the body by
+			// one line; OpenTUI clamps the range, so the edges need no guard.
+			if (data?.scroll?.isReactive) {
+				self.effect(() => effect([data.scroll], ([request]) => {
+					const body = self.ref.body
+					if (!body || !request?.delta) return
+					body.scrollTop = Math.max(0, body.scrollTop + request.delta)
+				}))
+			}
+		}),
 		FilterBar: filterBar,
-		Help: bind(ui, "Help", helpXml, helpBehaviors({ theme: tuiTheme })),
+		Help: bind(ui, "Help", helpXml, helpBehaviors({ theme: tuiTheme, rows: helpRows(helpRow) })),
+		OverlayList: bind(ui, "OverlayList", overlayListXml, overlayListBehaviors({
+			...env,
+			rows: overlayRows(overlayRow),
+			scrollTop: overlayScrollTop,
+		})),
 		Summary: bind(ui, "Summary", summaryXml, summaryBehaviors({
 			...env,
 			width: paneWidth,
@@ -261,27 +421,76 @@ function createComponents() {
 
 const components = createComponents()
 
+// Function: showScrollBar
+// select.tui hides scrollbars by default because cursor-aware lists keep the
+// cursor on screen themselves. Restore automatic overflow visibility for every
+// scrollbox; the wrapper width fix lets the vertical bar fit beside its content.
+function showScrollBar(node) {
+	// The wrapper's content declares a 100% minimum width, which otherwise
+	// starves the 1-column bar and drops it over the first column. The wrapper
+	// is re-measured once the content is mounted, so apply it again on the next
+	// tick to land on the overlay's first frame.
+	const fix = () => {
+		if (node.wrapper) node.wrapper.minWidth = 0
+		node.requestRender?.()
+	}
+	fix()
+	queueMicrotask(fix)
+	const bar = node.verticalScrollBar
+	if (bar) {
+		// Override select.tui's hidden default and let overflow drive the bar
+		// again. OpenTUI 0.8 pins `visible = false`, so the reset is required.
+		bar.resetVisibilityControl?.()
+		bar.width = 1
+		bar.flexShrink = 0
+		// The default track/thumb are greys; the theme keeps the scrollbar part
+		// of the night-blue surfaces (mono leaves the defaults). OpenTUI 0.8
+		// paints the bar natively from `trackOptions`; older versions expose a
+		// child slider renderable.
+		if (bar.slider) {
+			if (tuiTheme.scrollbarThumbBg) {
+				bar.slider.backgroundColor = tuiTheme.scrollbarTrackBg
+				bar.slider.foregroundColor = tuiTheme.scrollbarThumbBg
+			}
+		} else if (tuiTheme.scrollbarThumbBg) {
+			bar.trackOptions = {
+				foregroundColor: tuiTheme.scrollbarThumbBg,
+				backgroundColor: tuiTheme.scrollbarTrackBg,
+			}
+		}
+	}
+}
+
 // Function: registerComponents
 // Idempotent registration of the parent components as select.tui host tags.
 function registerComponents() {
 	if (registered) return components
 	registered = true
 	extend({
+		// Preserve OpenTUI's scrollbox while re-enabling its overflow-aware bars.
+		scrollbox: { Class: getTags().scrollbox.Class, configure: showScrollBar },
+		helpscroll: { Class: getTags().scrollbox.Class, configure: showScrollBar },
 		bookmarklist: components.BookmarkList,
 		breadcrumbs: components.Breadcrumbs,
+		// Tree-sitter code preview (see `CodeView`) and the Kitty/sixel/blocks
+		// image renderable; `filepreview` binds both.
+		code: { Class: CodeView, contentProp: "content" },
+		image: { Class: ImageRenderable },
 		commandbar: components.CommandBar,
 		commandpanel: components.CommandPanel,
 		confirm: components.Confirm,
 		entrydetail: components.EntryDetail,
 		filelist: components.FileList,
+		filepicker: components.FilePicker,
 		filepreview: components.FilePreview,
 		filterbar: components.FilterBar,
 		help: components.Help,
+		overlaylist: components.OverlayList,
 		summary: components.Summary,
 	})
 	return components
 }
 
-export { components, fileListScrollTop, keepVisible, registerComponents }
+export { components, fileListScrollTop, keepVisible, panelDialogHeight, panelOpScrollTop, registerComponents }
 
 // EOF

package/src/js/tcmd/tui/index.js

@@ -44,16 +44,27 @@ function bookmarkFile() {
 	return nodePath.join(configHome, "tcmd", "bookmarks.json")
 }
 
+// Function: startupPath
+// Resolves a CLI path argument against the working directory. Relative paths
+// (`../src`, `.`) would otherwise reach the panes verbatim and be rewritten
+// from the filesystem root by the POSIX path helpers, corrupting breadcrumbs,
+// history and the explorer's parent column.
+function startupPath(value, fallback) {
+	return value ? nodePath.resolve(value) : fallback
+}
+
 // Function: main
 // Runs the TUI. `paths` are optional initial directories [left, right].
 async function main(paths = []) {
 	const fs = createNodeFs()
-	const left = createPane({ fs, path: paths[0] || fs.cwd() })
-	const right = createPane({ fs, path: paths[1] || fs.home() })
+	const left = createPane({ fs, path: startupPath(paths[0], fs.cwd()) })
+	const right = createPane({ fs, path: startupPath(paths[1], fs.home()) })
 	let instance = null
 	const os = createNodeOs({
 		suspend: () => instance?._ownedRenderer?.suspend?.(),
 		resume: () => instance?._ownedRenderer?.resume?.(),
+		// OSC 52: the renderer knows whether the terminal supports it.
+		copy: (text) => instance?._ownedRenderer?.copyToClipboardOSC52?.(text) ?? false,
 	})
 	const bookmarks = createBookmarks({
 		store: createFileBookmarkStore({
@@ -68,7 +79,10 @@ async function main(paths = []) {
 	const size = cell({ width: 0, height: 0 })
 	const help = cell(false)
 	const App = createAppComponent(session, { size, help })
-	instance = await render(App, { useMouse: true, exitOnCtrlC: false })
+	instance = await render(App, {
+		useMouse: true,
+		exitOnCtrlC: false,
+	})
 	const renderer = instance?.ctx ?? instance?.renderer
 	const current = renderer?.width || renderer?.height
 		? { width: renderer.width ?? 0, height: renderer.height ?? 0 }
@@ -84,6 +98,6 @@ async function main(paths = []) {
 	return session
 }
 
-export { main, readSize }
+export { main, readSize, startupPath }
 
 // EOF

package/src/js/tcmd/tui/opentui.js

@@ -0,0 +1,33 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-18
+
+// Module: tcmd/tui/opentui
+// The OpenTUI classes the TUI registers as host tags (`code`, `image`) — and
+// the `SyntaxStyle`/filetype helpers they need — resolved from the *same*
+// OpenTUI copy `select.tui` itself binds its renderables to.
+//
+// A plain `import … from "@opentui/core"` can land on a different physical
+// copy: in a source checkout `select.tui` is symlinked with its own
+// `node_modules`, so the repo and the renderer each get an `@opentui/core` and
+// their renderable base classes stop matching (a code renderable from one copy
+// cannot be mounted in the other's tree — OpenTUI throws on the first
+// destroy). Resolving `@opentui/core` from wherever `select.tui` resolves its
+// own dependencies keeps a single instance. In a normal install both resolve
+// to the one hoisted copy, so this is a no-op there.
+
+import { createRequire } from "node:module"
+import { pathToFileURL } from "node:url"
+
+const requireHere = createRequire(import.meta.url)
+const requireFromSelectTui = createRequire(requireHere.resolve("select.tui"))
+const coreUrl = pathToFileURL(requireFromSelectTui.resolve("@opentui/core")).href
+
+const core = await import(coreUrl)
+
+const { CodeRenderable, ImageRenderable, pathToFiletype, SyntaxStyle, createTextAttributes } = core
+
+export { CodeRenderable, ImageRenderable, pathToFiletype, SyntaxStyle, createTextAttributes }
+
+// EOF

package/src/js/tcmd/tui/syntax.js

@@ -0,0 +1,91 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-18
+
+// Module: tcmd/tui/syntax
+// The TUI's syntax-highlighting palette: one `SyntaxStyle` (OpenTUI's
+// tree-sitter style table) per native scene, built from the active `tuiTheme`,
+// so code previews read in the same colours as the rest of the workspace.
+// Since OpenTUI 0.6, every style is tied to the scene that owns its native
+// handle, so a renderer cannot share a style with another renderer. The
+// TUI-only half of the preview — the web renders plain text and never imports
+// OpenTUI.
+//
+// The scope names are the standard tree-sitter captures the bundled queries
+// emit (`keyword.return`, `function.method`, `punctuation.bracket`…).
+// `SyntaxStyle#getStyleId` falls back from a dotted capture to its base name,
+// so registering the bases here covers every variant without enumerating them.
+// In the mono theme every colour token is `undefined`, so a scope keeps only
+// its attributes (comment stays italic, headings stay bold) and the terminal's
+// own foreground carries the rest.
+
+import { SyntaxStyle } from "./opentui.js"
+import { tuiTheme } from "./theme.js"
+
+// Function: scopeStyles
+// Maps each base capture to a style drawn from `theme`. Content colours reuse
+// the listing palette (comments dimmer than plain text, strings the executable
+// green, types the directory blue, literals the device purple), so a preview
+// and a pane never disagree about what a colour means.
+function scopeStyles(theme) {
+	return {
+		attribute: { fg: theme.tipFg },
+		boolean: { fg: theme.tipFg },
+		comment: { fg: theme.readonlyFg, italic: true },
+		constant: { fg: theme.tipFg },
+		constructor: { fg: theme.dirFg },
+		embedded: { fg: theme.textFg },
+		field: { fg: theme.devFg },
+		function: { fg: theme.linkFg },
+		import: { fg: theme.accentFg },
+		keyword: { fg: theme.accentSecondaryFg, bold: true },
+		label: { fg: theme.accentSecondaryFg },
+		method: { fg: theme.linkFg },
+		module: { fg: theme.accentFg },
+		namespace: { fg: theme.accentFg },
+		number: { fg: theme.tipFg },
+		operator: { fg: theme.textSecondaryFg },
+		parameter: { fg: theme.textFg },
+		property: { fg: theme.devFg },
+		punctuation: { fg: theme.textSecondaryFg },
+		string: { fg: theme.execFg },
+		tag: { fg: theme.accentSecondaryFg },
+		type: { fg: theme.dirFg },
+		variable: { fg: theme.textFg },
+		"markup.heading": { fg: theme.textHeadingFg, bold: true },
+		"markup.italic": { italic: true },
+		"markup.link": { fg: theme.linkFg, underline: true },
+		"markup.link.label": { fg: theme.linkFg },
+		"markup.link.url": { fg: theme.linkFg, underline: true },
+		"markup.list": { fg: theme.accentSecondaryFg },
+		"markup.quote": { fg: theme.readonlyFg, italic: true },
+		"markup.raw": { fg: theme.execFg },
+		"markup.strong": { bold: true },
+	}
+}
+
+// Function: createSyntaxStyle
+// Builds a `SyntaxStyle` for `theme`, owned by `scene`.
+function createSyntaxStyle(scene, theme = tuiTheme) {
+	return SyntaxStyle.fromStyles(scopeStyles(theme), scene)
+}
+
+// The style is shared per scene: the theme resolves once per process, and the
+// code renderables of one renderer share one native handle.
+const sharedStyles = new WeakMap()
+
+// Function: syntaxStyle
+// The shared `SyntaxStyle` for `scene` and the active theme, built on first use.
+function syntaxStyle(scene, theme = tuiTheme) {
+	let style = sharedStyles.get(scene)
+	if (!style) {
+		style = createSyntaxStyle(scene, theme)
+		sharedStyles.set(scene, style)
+	}
+	return style
+}
+
+export { syntaxStyle }
+
+// EOF

package/src/js/tcmd/tui/theme.js

@@ -23,11 +23,16 @@
 //              from the cursor alone.
 // - Text:      primary, secondary (hints) and heading (titles/breadcrumbs).
 // - Borders:   secondary (pane box borders, header rules, active/inactive) and
-//              primary (the frame and the modal overlays).
+//              primary (the frame and the modal overlays). The active pane's
+//              border and head rule follow the view mode: the Tiny blue in
+//              explorer, the gold accent in commander.
 // - Accent:    primary (cursor, active pane label) and secondary (marks).
 // - Semantic:  error, warning and tip, each with a background + foreground
 //              for filled badges (the command bar status, the confirm dialog).
-// - Content:   the file-listing colors (file/link/device/directory).
+// - Content:   the file-listing colors (file/link/device/directory plus the
+//              executable and read-only file states).
+// - Scrollbar: the track and thumb of every scrollable surface (the TUI's
+//              slider, mirrored by the web's CSS variables).
 // - Brand:     the identity-bar gradient endpoints — "Tiny" stays blue, "Cmd"
 //              runs gold to saturated orange.
 
@@ -52,6 +57,8 @@ const DARK = {
 	// Borders
 	borderSecondaryFg: "#33508f",
 	borderSecondaryActiveFg: "#f0b429",
+	// The active pane's border/head rule in explorer mode: the Tiny blue.
+	borderActiveExplorerFg: "#4088ff",
 	borderPrimaryFg: "#3d5590",
 	borderPrimaryActiveFg: "#ffc233",
 	// Accent
@@ -71,6 +78,13 @@ const DARK = {
 	linkFg: "#4fc3ff",
 	devFg: "#b48eff",
 	dirFg: "#5c8cff",
+	// Executable files go green, read-only files dimmer than a plain file
+	// (`ls --color` / Midnight Commander habits).
+	execFg: "#5fd67a",
+	readonlyFg: "#7d8ab8",
+	// Scrollbar
+	scrollbarTrackBg: "transparent",
+	scrollbarThumbBg: "#22345e",
 	// Brand
 	brandTinyFrom: "#4088ff",
 	brandTinyTo: "#7cd0ff",
@@ -99,6 +113,7 @@ const LIGHT = {
 	// Borders
 	borderSecondaryFg: "#9aabd6",
 	borderSecondaryActiveFg: "#926000",
+	borderActiveExplorerFg: "#1d4ed8",
 	borderPrimaryFg: "#8c9cc9",
 	borderPrimaryActiveFg: "#a06a00",
 	// Accent
@@ -118,6 +133,11 @@ const LIGHT = {
 	linkFg: "#0369a1",
 	devFg: "#7c3aed",
 	dirFg: "#1d4ed8",
+	execFg: "#0f7a3d",
+	readonlyFg: "#6b7280",
+	// Scrollbar
+	scrollbarTrackBg: "transparent",
+	scrollbarThumbBg: "#34548f",
 	// Brand
 	brandTinyFrom: "#1d4ed8",
 	brandTinyTo: "#3b82f6",
@@ -141,6 +161,7 @@ const MONO = {
 	textHeadingFg: undefined,
 	borderSecondaryFg: undefined,
 	borderSecondaryActiveFg: undefined,
+	borderActiveExplorerFg: undefined,
 	borderPrimaryFg: undefined,
 	borderPrimaryActiveFg: undefined,
 	accentFg: undefined,
@@ -157,6 +178,10 @@ const MONO = {
 	linkFg: undefined,
 	devFg: undefined,
 	dirFg: undefined,
+	execFg: undefined,
+	readonlyFg: undefined,
+	scrollbarTrackBg: undefined,
+	scrollbarThumbBg: undefined,
 	brandTinyFrom: undefined,
 	brandTinyTo: undefined,
 	brandCmdFrom: undefined,