@ssebastien/tcmd 0.1.3 → 0.1.7

package/src/js/tcmd/web/theme.js

@@ -14,6 +14,10 @@ const webTheme = {
 	currentClass: "is-current",
 	dirClass: "is-dir",
 	errorClass: "is-error",
+	execClass: "is-exec",
+	focusedClass: "is-focused",
+	lucideIcons: true,
+	readonlyClass: "is-readonly",
 	rootClass: "is-root",
 	selectedClass: "is-selected",
 }

package/tinyjs.json

@@ -0,0 +1,16 @@
+{
+	"name": "tcmd",
+	"title": "TinyCommand",
+	"id": "io.github.sebastien.tcmd",
+	"version": "0.1.4",
+	"minTinyjsVersion": "0.57.0",
+	"size": "1280x800",
+	"chrome": { "menu": false },
+	"backend": "src/js/tcmd/desktop/backend/main.ts",
+	"openFolders": true,
+	"frontend": {
+		"build": "bun run desktop:bundle",
+		"dir": "desktop/dist",
+		"dist": "desktop/dist"
+	}
+}

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

@@ -1,7 +0,0 @@
-<section class="palette" when="open">
-	<div class="palette-line">
-		<span class="palette-sign" out="sign"></span>
-		<input ref="query" inout="query" class="palette-input" placeholder="Command..." on:enter="confirm" />
-	</div>
-	<ul class="palette-list" out="rows"></ul>
-</section>

package/src/js/tcmd/components/CommandPalette.js

@@ -1,58 +0,0 @@
-// Project: TinyCommand
-// Author:  Sebastien Pierre
-// License: BSD
-// Created: 2026-09-26
-
-// Module: tcmd/components/CommandPalette
-// CommandPalette: popup listing commands filtered by the typed query. In
-// scripting mode it lists operations and filesets and prefixes the input with
-// `:`. The row logic lives in `PaletteRow.js`; this parent maps its `items` to
-// rows.
-//
-// Environment: `overlayBg`, `borderPrimaryActiveFg`, `textSecondaryFg`
-// (footer), `textHeadingFg` (exposed as the `titleColor` behavior),
-// `rows(data)` returning the keyed rows and `scrollTop(self, data)` (TUI
-// viewport tracking).
-
-import { unwrap } from "select/state/cells"
-
-// Function: paletteSign
-// The prompt shown before the input; overridable per renderer.
-function paletteSign(mode) {
-	return unwrap(mode) === "script" ? ":" : "›"
-}
-
-// Function: paletteTitle
-function paletteTitle(mode) {
-	return unwrap(mode) === "script" ? "script" : "palette"
-}
-
-// Function: createBehaviors
-// Builds the CommandPalette behavior map for the given renderer environment.
-function createBehaviors(env) {
-	const behaviors = {
-		bg: () => env.overlayBg,
-		borderFg: () => env.borderPrimaryActiveFg,
-		confirm: (self, data) => self.pub("palette:confirm", unwrap(data.query) ?? ""),
-		focused: (_self, data) => Boolean(unwrap(data.open)),
-		footer: (_self, data) =>
-			unwrap(data.mode) === "script"
-				? "Tab complete   ↵ run   Esc close"
-				: "↑↓ move   Tab complete   ↵ run   Esc close",
-		footerFg: () => env.textSecondaryFg,
-		sign: (_self, data) => paletteSign(data.mode),
-		title: (_self, data) => paletteTitle(data.mode),
-		titleColor: () => env.textHeadingFg,
-	}
-	if (env?.rows) {
-		behaviors.rows = (_self, data) => env.rows(self, data)
-	}
-	if (env?.scrollTop) {
-		behaviors.scrollTop = (self, data) => env.scrollTop(self, data)
-	}
-	return behaviors
-}
-
-export { createBehaviors, paletteSign, paletteTitle }
-
-// EOF

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

@@ -1,3 +0,0 @@
-<li class="palette-item" out:class="rowClass" on:click="item.id!palette:run">
-	<span out="paletteLabel"></span>
-</li>

package/src/js/tcmd/components/PaletteRow.js

@@ -1,43 +0,0 @@
-// Project: TinyCommand
-// Author:  Sebastien Pierre
-// License: BSD
-// Created: 2026-09-26
-
-// Module: tcmd/components/PaletteRow
-// Command-palette row behaviors. Read `{ item: command, index, selected }`, the
-// same bag shape in both engines. Selection is snapshotted by the row builder
-// into a plain `selectedRow` boolean and read through the shared `isSelected`
-// predicate, with the `selected` cell as fallback for hand-built bags. Script
-// rows carry a `detail` (operation signature, fileset count) appended to the
-// label.
-//
-// Environment: `accentFg`, `textFg`, `selectionBg` (TUI row background),
-// `selectedClass` (web).
-
-import { isSelected } from "./rows.js"
-
-// Function: paletteLabel
-// "Switch [Tab]" for commands; script rows append their detail.
-function paletteLabel(command) {
-	if (!command) return ""
-	const keys = command.keys ? ` [${command.keys}]` : ""
-	const detail = command.detail ? `  ${command.detail}` : ""
-	return `${command.title}${keys}${detail}`
-}
-
-// Function: createBehaviors
-// Builds the PaletteRow behavior map for the given renderer environment.
-function createBehaviors(env) {
-	return {
-		paletteLabel: (_self, data) => paletteLabel(data.item),
-		rowBg: (_self, data) => (isSelected(data) ? env.selectionBg : undefined),
-		rowClass: (_self, data) => (isSelected(data) ? env.selectedClass : null),
-		rowFg: (_self, data) => (isSelected(data) ? env.accentFg : env.textFg),
-		// TUI: a marker so the selection is not color-only.
-		rowMarker: (_self, data) => (isSelected(data) ? ">" : " "),
-	}
-}
-
-export { createBehaviors, paletteLabel }
-
-// EOF

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

@@ -1,4 +0,0 @@
-<box flexDirection="row" height="1" out:backgroundColor="rowBg" on:click="item.id!palette:run">
-	<text out="rowMarker" width="2" out:fg="rowFg"></text>
-	<text out="paletteLabel" flexGrow="1" out:fg="rowFg" wrapMode="none" truncate="true"></text>
-</box>

package/src/js/tcmd/tui/frame.js

@@ -1,269 +0,0 @@
-// Project: TinyCommand
-// Author:  Sebastien Pierre
-// License: BSD
-// Created: 2026-10-02
-
-// Module: tcmd/tui/frame
-// TUI-only presentation behaviors for the workspace chrome: the responsive
-// breakpoints driven by the `uiSize` cell, the pane borders, header rules,
-// the command-bar geometry and the help overlay state. Everything here is
-// injected into the App binding; none of it lives in the shared
-// `components/` logic.
-
-import { unwrap } from "select/state/cells"
-import { DEFAULT_KEYMAP } from "../core/keymap.js"
-import { getCommands } from "../core/commands.js"
-import { commandBarMarksItem, commandBarRowCount, commandBarStatus } from "../components/CommandBar.js"
-
-// Below this the two-pane workspace is replaced by a resize hint.
-const MIN_WIDTH = 64
-const MIN_HEIGHT = 16
-// At or above this the inspector can sit beside the panes; below it becomes a
-// fullscreen overlay.
-const INSPECTOR_INLINE_WIDTH = 100
-
-// Function: sizeOf
-// Reads the viewport size from the App data, falling back to the renderer's
-// own dimensions so the gates work even when no `uiSize` cell is injected
-// (tests, web). Returns `null` when neither is known.
-function sizeOf(data, self) {
-	const size = unwrap(data?.uiSize)
-	if (size && (size.width || size.height)) return size
-	const width = Math.floor(self?.ctx?.width ?? 0)
-	const height = Math.floor(self?.ctx?.height ?? 0)
-	if (!width && !height) return null
-	return { width, height }
-}
-
-// Function: isNarrow
-// True when the viewport is known and too narrow for the inline inspector.
-function isNarrow(data, self) {
-	const size = sizeOf(data, self)
-	return Boolean(size && (size.width ?? 0) > 0 && size.width < INSPECTOR_INLINE_WIDTH)
-}
-
-// Function: commandBarRowsFor
-// The entries the bar currently shows: the context hints or the `bar`
-// commands, plus the active pane's marked count as a trailing entry.
-function commandBarRowsFor(data) {
-	const items = unwrap(data?.commandBarItems) ?? []
-	const marks = commandBarMarksItem(data)
-	return marks ? [...items, marks] : items
-}
-
-// Function: commandBarLines
-// Rows the wrapped command bar occupies at the current viewport (the bar
-// is inset one column from the viewport edge).
-function commandBarLines(data, self) {
-	const width = Math.floor(sizeOf(data, self)?.width ?? 0)
-	if (width <= 0) return 1
-	return commandBarRowCount(commandBarRowsFor(data), width - 1)
-}
-
-// Function: paneListHeight
-// Rows available to a pane's listing: the viewport height minus the identity
-// bar (1), the pane's own border (2), the pane header + rule (2), the entry
-// detail (2), the summary (1) and the wrapped command bar — eight chrome rows
-// plus the bar. Fed to the windowed `filelist` so a large directory mounts
-// only the visible slice. `0` means "unknown — render everything to measure".
-function paneListHeight(data, self) {
-	const height = Math.floor(sizeOf(data, self)?.height ?? 0)
-	if (height <= 0) return 0
-	// A notice or error swaps the keys for a one-line status.
-	const bar = commandBarStatus(data) ? 1 : commandBarLines(data, self)
-	return Math.max(1, height - 8 - bar)
-}
-
-// Function: mixHex
-// Linear interpolation between two `#rrggbb` colours at `t` in [0, 1]. A
-// missing colour (the mono theme) yields `undefined` so the whole run falls
-// back to the terminal default.
-function mixHex(from, to, t) {
-	if (!from || !to) return undefined
-	const channel = (index) => {
-		const a = Number.parseInt(from.slice(index, index + 2), 16)
-		const b = Number.parseInt(to.slice(index, index + 2), 16)
-		return Math.round(a + (b - a) * t)
-			.toString(16)
-			.padStart(2, "0")
-	}
-	return `#${channel(1)}${channel(3)}${channel(5)}`
-}
-
-// Function: shineOf
-// One `{ letter, fg }` per letter of a brand word, interpolating `from` → `to`
-// across it so the word reads as a gradient; a missing colour (mono theme)
-// leaves every `fg` undefined and the run falls back to the terminal default.
-function shineOf(letters, from, to) {
-	return `${letters}`.split("").map((letter, index, all) => ({
-		letter,
-		fg: mixHex(from, to, index / (all.length - 1)),
-	}))
-}
-
-// Function: createFrameBehaviors
-// Behaviors for the App root and its chrome.
-function createFrameBehaviors(env) {
-	const tiny = shineOf("Tiny", env.theme.brandTinyFrom, env.theme.brandTinyTo)
-	const cmd = shineOf("Cmd", env.theme.brandCmdFrom, env.theme.brandCmdTo)
-	return {
-		// Identity bar: "Tiny" shimmers along the brand blues, "Cmd" along a
-		// brighter orange than the mark accent, and the host trail follows in
-		// the heading colour. Everything else on screen belongs to the user's
-		// files; this one row is the app's own.
-		brandT: () => tiny[0].letter,
-		brandTFg: () => tiny[0].fg,
-		brandI: () => tiny[1].letter,
-		brandIFg: () => tiny[1].fg,
-		brandN: () => tiny[2].letter,
-		brandNFg: () => tiny[2].fg,
-		brandY: () => tiny[3].letter,
-		brandYFg: () => tiny[3].fg,
-		brandC: () => cmd[0].letter,
-		brandCFg: () => cmd[0].fg,
-		brandM: () => cmd[1].letter,
-		brandMFg: () => cmd[1].fg,
-		brandD: () => cmd[2].letter,
-		brandDFg: () => cmd[2].fg,
-		topBar: (_self, data) => {
-			const host = `${unwrap(data.appHost) ?? ""}`.trim()
-			return host ? ` - ${host} ` : " "
-		},
-		topBarFg: () => env.theme.textHeadingFg,
-
-		// Responsive gates. `uiSize` is absent in tests and the web, so the
-		// workspace renders normally there.
-		tooSmall: (self, data) => {
-			const size = sizeOf(data, self)
-			if (!size) return false
-			return (size.width ?? MIN_WIDTH) < MIN_WIDTH || (size.height ?? MIN_HEIGHT) < MIN_HEIGHT
-		},
-		minSizeTitle: () => "Terminal too small",
-		minSizeHint: (self, data) => {
-			const size = sizeOf(data, self) ?? { width: 0, height: 0 }
-			return `need ${MIN_WIDTH}x${MIN_HEIGHT}, have ${size.width ?? 0}x${size.height ?? 0}`
-		},
-		// The min-size gate text uses the heading/secondary text tokens.
-		titleFg: () => env.theme.textHeadingFg,
-		dimFg: () => env.theme.textSecondaryFg,
-
-		// Each pane is a complete box. Both draw all four edges (the middle
-		// shows two adjacent rules) so each pane's border colour can track its
-		// own focus independently — a shared edge would be owned by one pane
-		// and never highlight when the other is active.
-		leftBorder: () => ["top", "left", "bottom", "right"],
-		rightBorder: () => ["top", "left", "bottom", "right"],
-		// The header rule separates the pane header row from the listing body.
-		headRule: () => ["top"],
-
-		// The breadcrumb yields the pane header row to the filter while a
-		// filter is being edited or applied.
-		leftFilterOn: (_self, data) => Boolean(unwrap(data.leftFilter)),
-		rightFilterOn: (_self, data) => Boolean(unwrap(data.rightFilter)),
-
-		// The inline inspector shows when the preview is on and the viewport is
-		// wide enough; otherwise `v` opens the fullscreen viewer.
-		inspectorNarrow: (self, data) => isNarrow(data, self),
-		showInspectorInline: (self, data) => Boolean(unwrap(data.showPreview)) && !isNarrow(data, self),
-		showViewer: (self, data) => Boolean(unwrap(data.viewerOpen)) && isNarrow(data, self),
-
-		// Help overlay visibility; the content lives in `tui/Help.js` so the
-		// overlay has a single source of truth.
-		helpOpen: (_self, data) => Boolean(unwrap(data.helpOpen)),
-
-		// The windowed listing height for both panes (they share the row).
-		listViewport: (self, data) => paneListHeight(data, self),
-
-		// The command bar's height: one line for a status, otherwise as many
-		// rows as the wrapped bracket shorthands need.
-		barHeight: (self, data) => (commandBarStatus(data) ? 1 : commandBarLines(data, self)),
-	}
-}
-
-// Function: keyGlyph
-// Human-readable glyph for a keymap chord ("↑", "⇧Tab", "^W", "PgUp").
-function keyGlyph(chord) {
-	const name = chord.key
-	const named = {
-		up: "↑",
-		down: "↓",
-		left: "←",
-		right: "→",
-		return: "↵",
-		enter: "↵",
-		space: "Space",
-		tab: "Tab",
-		pageup: "PgUp",
-		pagedown: "PgDn",
-		escape: "Esc",
-		backspace: "Bksp",
-		home: "Home",
-		end: "End",
-	}
-	let base = named[name] ?? (name.length === 1 ? name.toUpperCase() : `${name}`)
-	if (chord.ctrl) base = `^${base}`
-	if (chord.meta) base = `⌘${base}`
-	if (chord.shift && name !== "tab") base = `⇧${base}`
-	return base
-}
-
-// Constant: GROUP_ORDER / GROUP_TITLES
-// Help sections, in display order.
-const GROUP_ORDER = ["nav", "pane", "list", "bookmark", "view", "file", "panel", "palette", "filter", "app"]
-const GROUP_TITLES = {
-	app: "Session",
-	bookmark: "Bookmarks",
-	file: "Files",
-	filter: "Filter",
-	list: "Selection",
-	nav: "Navigation",
-	palette: "Commands",
-	panel: "Command panel",
-	pane: "Panes",
-	view: "View",
-}
-
-// Function: helpLines
-// Builds the categorized key reference from the keymap and the command
-// registry, so it can never drift from the actual bindings.
-function helpLines() {
-	const byId = new Map(getCommands().map((command) => [command.id, command]))
-	const groups = new Map()
-	const seen = new Set()
-	for (const binding of DEFAULT_KEYMAP) {
-		const command = byId.get(binding.command)
-		if (!command) continue
-		const group = binding.command.split(".")[0]
-		if (!groups.has(group)) groups.set(group, new Map())
-		const rows = groups.get(group)
-		if (!rows.has(binding.command)) rows.set(binding.command, { keys: [], title: command.title })
-		const row = rows.get(binding.command)
-		const glyph = keyGlyph(binding)
-		if (!row.keys.includes(glyph) && !seen.has(`${binding.command}:${glyph}`)) {
-			row.keys.push(glyph)
-			seen.add(`${binding.command}:${glyph}`)
-		}
-	}
-	const lines = []
-	for (const group of GROUP_ORDER) {
-		const rows = groups.get(group)
-		if (!rows) continue
-		lines.push(GROUP_TITLES[group] ?? group)
-		for (const row of rows.values()) {
-			lines.push(`  ${row.keys.join("/").padEnd(9)} ${row.title}`)
-		}
-		lines.push("")
-	}
-	return lines
-}
-
-export {
-	commandBarLines,
-	createFrameBehaviors,
-	helpLines,
-	INSPECTOR_INLINE_WIDTH,
-	isNarrow,
-	keyGlyph,
-	sizeOf,
-}
-// EOF

package/src/js/tcmd/tui/help.js

@@ -1,32 +0,0 @@
-// Project: TinyCommand
-// Author:  Sebastien Pierre
-// License: BSD
-// Created: 2026-10-02
-
-// Module: tcmd/tui/help
-// TUI-only behavior for the `?` key reference overlay. The content is built
-// from the live keymap and command registry (see `tui/frame.js`), so it
-// cannot drift from the actual bindings.
-
-import { unwrap } from "select/state/cells"
-import { helpLines } from "./frame.js"
-
-// Function: createBehaviors
-// Builds the Help behavior map for the given TUI environment.
-function createBehaviors(env) {
-	return {
-		bg: () => env.theme.surfaceBg,
-		borderFg: () => env.theme.borderPrimaryActiveFg,
-		dimFg: () => env.theme.textSecondaryFg,
-		hint: () => " Esc / ? close ",
-		open: (_self, data) => Boolean(unwrap(data.open)),
-		text: () => helpLines().join("\n"),
-		textFg: () => env.theme.textFg,
-		title: () => " Keys ",
-		titleFg: () => env.theme.textHeadingFg,
-	}
-}
-
-export { createBehaviors }
-
-// EOF