@ssebastien/tcmd 0.0.0-stage → 0.1.0

package/src/js/tcmd/web/catalogue.js

@@ -0,0 +1,159 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/web/catalogue
+// Binds the shared component logic in `tcmd/components` to the web (`.html`)
+// presentations using select.js. Requires a DOM; import this module only in a
+// browser (or a happy-dom test environment).
+//
+// List rows are rendered with select.js's keyed `Component.map` primitive; the
+// row behaviors are shared with the TUI presentation. Components sharing a
+// presentation bind the same source (`Breadcrumbs` uses `RowList.html`).
+
+import { ui } from "select/ui"
+import bookmarkListHtml from "../components/BookmarkList.html" with { type: "text" }
+import bookmarkRowHtml from "../components/BookmarkRow.html" with { type: "text" }
+import commandBarHtml from "../components/CommandBar.html" with { type: "text" }
+import commandItemHtml from "../components/CommandItem.html" with { type: "text" }
+import commandPaletteHtml from "../components/CommandPalette.html" with { type: "text" }
+import confirmHtml from "../components/Confirm.html" with { type: "text" }
+import crumbHtml from "../components/Crumb.html" with { type: "text" }
+import entryDetailHtml from "../components/EntryDetail.html" with { type: "text" }
+import fileListHtml from "../components/FileList.html" with { type: "text" }
+import filePreviewHtml from "../components/FilePreview.html" with { type: "text" }
+import fileRowHtml from "../components/FileRow.html" with { type: "text" }
+import filterBarHtml from "../components/FilterBar.html" with { type: "text" }
+import headerHtml from "./header.html" with { type: "text" }
+import paletteRowHtml from "../components/PaletteRow.html" with { type: "text" }
+import rowListHtml from "../components/RowList.html" with { type: "text" }
+import summaryHtml from "../components/Summary.html" with { type: "text" }
+
+import {
+	bind,
+	bookmarkListBehaviors,
+	bookmarkRowBehaviors,
+	bookmarkRows,
+	breadcrumbsBehaviors,
+	commandBarBehaviors,
+	commandItemBehaviors,
+	commandItemRows,
+	commandPaletteBehaviors,
+	confirmBehaviors,
+	crumbBehaviors,
+	crumbRows,
+	entryDetailBehaviors,
+	fileListBehaviors,
+	filePreviewBehaviors,
+	fileRowBehaviors,
+	fileRows,
+	filterBarBehaviors,
+	paletteRowBehaviors,
+	paletteRows,
+	summaryBehaviors,
+} from "../components/index.js"
+import { createBehaviors as headerBehaviors } from "./header.js"
+import { webTheme } from "./theme.js"
+
+let registered = false
+
+// Advance width of one monospace cell, cached from the header's computed font.
+let charWidth = 0
+
+// Function: columnWidth
+// Columns available in `el`, measured from the monospace advance width. Returns
+// 0 when the DOM cannot measure (happy-dom, no layout), disabling compression.
+// ponytail: measured per render; a pure viewport resize waits for the next one.
+function columnWidth(el) {
+	const px = el?.clientWidth || el?.ownerDocument?.defaultView?.innerWidth || 0
+	if (!px) return 0
+	const view = el.ownerDocument?.defaultView
+	if (!view) return 0
+	if (!charWidth) {
+		try {
+			const ctx = el.ownerDocument.createElement("canvas").getContext("2d")
+			const style = view.getComputedStyle(el)
+			ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+			charWidth = ctx.measureText("0").width || 0
+		} catch {
+			return 0
+		}
+	}
+	return charWidth ? Math.floor(px / charWidth) : 0
+}
+
+// Function: createComponents
+// Binds every shared component to its `.html` presentation.
+function createComponents() {
+	const commandItem = bind(ui, "CommandItem", commandItemHtml, commandItemBehaviors(webTheme))
+	const crumb = bind(ui, "Crumb", crumbHtml, crumbBehaviors(webTheme))
+	const fileRow = bind(ui, "FileRow", fileRowHtml, fileRowBehaviors(webTheme))
+	const filterBar = bind(ui, "FilterBar", filterBarHtml, filterBarBehaviors(webTheme))
+	const paletteRow = bind(ui, "PaletteRow", paletteRowHtml, paletteRowBehaviors(webTheme))
+	const bookmarkRow = bind(ui, "BookmarkRow", bookmarkRowHtml, bookmarkRowBehaviors(webTheme))
+	return {
+		BookmarkRow: bookmarkRow,
+		CommandItem: commandItem,
+		Crumb: crumb,
+		FileRow: fileRow,
+		PaletteRow: paletteRow,
+		Breadcrumbs: bind(ui, "Breadcrumbs", rowListHtml, breadcrumbsBehaviors({
+			...webTheme,
+			listClass: "breadcrumbs",
+			rows: crumbRows(crumb),
+		})),
+		BookmarkList: bind(ui, "BookmarkList", bookmarkListHtml, bookmarkListBehaviors({
+			...webTheme,
+			rows: bookmarkRows(bookmarkRow),
+		})),
+		CommandBar: bind(ui, "CommandBar", commandBarHtml, commandBarBehaviors({
+			...webTheme,
+			listClass: "command-bar-keys",
+			rows: commandItemRows(commandItem),
+		})),
+		CommandPalette: bind(ui, "CommandPalette", commandPaletteHtml, commandPaletteBehaviors({
+			...webTheme,
+			rows: paletteRows(paletteRow),
+		})),
+		Confirm: bind(ui, "Confirm", confirmHtml, confirmBehaviors(webTheme)),
+		EntryDetail: bind(ui, "EntryDetail", entryDetailHtml, entryDetailBehaviors(webTheme)),
+		FileList: bind(ui, "FileList", fileListHtml, fileListBehaviors({
+			...webTheme,
+			rows: fileRows(fileRow),
+		})),
+		FilePreview: bind(ui, "FilePreview", filePreviewHtml, filePreviewBehaviors(webTheme)),
+		FilterBar: filterBar,
+		Header: bind(ui, "Header", headerHtml, headerBehaviors({
+			...webTheme,
+			width: (self) => columnWidth(self.ref.box),
+		})),
+		Summary: bind(ui, "Summary", summaryHtml, summaryBehaviors(webTheme)),
+	}
+}
+
+const components = createComponents()
+
+// Function: registerWebComponents
+// Idempotent registration of the parent components as select.js formatters, so
+// App.html can resolve `out="...|Name"` processors.
+function registerWebComponents() {
+	if (registered) return components
+	registered = true
+	ui.format("Breadcrumbs", components.Breadcrumbs)
+	ui.format("BookmarkList", components.BookmarkList)
+	ui.format("CommandBar", components.CommandBar)
+	ui.format("CommandPalette", components.CommandPalette)
+	ui.format("Confirm", components.Confirm)
+	ui.format("EntryDetail", components.EntryDetail)
+	ui.format("FileList", components.FileList)
+	ui.format("FilePreview", components.FilePreview)
+	ui.format("FilterBar", components.FilterBar)
+	ui.format("Header", components.Header)
+	ui.format("Summary", components.Summary)
+	return components
+}
+
+export { components, registerWebComponents }
+
+// EOF

package/src/js/tcmd/web/header.html

@@ -0,0 +1 @@
+<header class="app-header" ref="box"><span class="brand-tiny">Tiny</span><span class="brand-cmd">Cmd</span><span out="title"></span></header>

package/src/js/tcmd/web/header.js

@@ -0,0 +1,38 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/web/header
+// Header: the application title bar above the panes, showing
+// `TinyCmd - HOST DIR/BASE` for the active pane's directory (compressed to fit).
+// The brand renders as static spans — `Tiny` with a blue CSS gradient, `Cmd`
+// with a brighter orange one (both kept in sync with `tui/theme.js`) — so the
+// `title` behavior carries only the host and path tail (` - HOST DIR/BASE`).
+//
+// Environment: `textHeadingFg`, plus `width(self)` returning the available
+// columns (renderer-specific; 0/omitted disables compression).
+
+import { unwrap } from "select/state/cells"
+import { formatTitle } from "../components/format.js"
+
+// Constant: BRAND
+// The brand word the static header spans render; stripped from the title so
+// the tail doesn't repeat it.
+const BRAND = "TinyCmd"
+
+// Function: createBehaviors
+// Builds the Header behavior map for the given renderer environment.
+function createBehaviors(env) {
+	return {
+		title: (self, data) => {
+			const full = formatTitle(unwrap(data.host), unwrap(data.path), env.width ? env.width(self, data) : 0)
+			return full.startsWith(BRAND) ? full.slice(BRAND.length) : full
+		},
+		titleFg: () => env.textHeadingFg,
+	}
+}
+
+export { BRAND, createBehaviors }
+
+// EOF

package/src/js/tcmd/web/http.js

@@ -0,0 +1,79 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/web/http
+// Filesystem adapter that talks to the JSON API exposed by `web/server.js`
+// (`/api/*`) over `fetch`. Same interface as `web/opfs.js`, so the web entry
+// can pick either backend. `createHttpFs` is async: it reads `/api/info` once
+// to bake in the root/home/cwd paths the adapter interface reports
+// synchronously.
+//
+// The token comes from the `<meta name="tcmd-token">` tag the server injects
+// into `index.html`; when the page is not served by `bun run web:serve`, the
+// API is unreachable and the factory fails with a hint.
+
+// Function: apiToken
+// Token injected into the host page, or null when absent/placeholder.
+function apiToken(doc = globalThis.document) {
+	const value = doc?.querySelector?.('meta[name="tcmd-token"]')?.getAttribute("content")
+	return value && !value.startsWith("__") ? value : null
+}
+
+// Function: createHttpFs
+// Builds the adapter. `base` is the API mount point (absolute URLs work too,
+// which tests use); `fetch` is injectable.
+async function createHttpFs({ base = "/api", token, fetch: doFetch = globalThis.fetch } = {}) {
+	const apiBase = new URL(`${base.replace(/\/$/, "")}/`, globalThis.location?.href ?? "http://localhost/")
+
+	// Function: request
+	// One API call: query parameters for reads, a JSON body for mutations.
+	async function request(method, route, { params, body } = {}) {
+		const url = new URL(route, apiBase)
+		for (const [key, value] of Object.entries(params ?? {})) {
+			if (value !== undefined && value !== null) url.searchParams.set(key, `${value}`)
+		}
+		const init = { method, headers: {} }
+		if (token) init.headers["x-tcmd-token"] = token
+		if (body !== undefined) {
+			init.headers["content-type"] = "application/json"
+			init.body = JSON.stringify(body)
+		}
+		let response
+		try {
+			response = await doFetch(url, init)
+		} catch (error) {
+			throw new Error(
+				`filesystem API unreachable at ${apiBase.origin} (serve the page with \`bun run web:serve\`)`,
+			)
+		}
+		if (!response.ok) {
+			const payload = await response.json().catch(() => null)
+			throw new Error(payload?.error ?? `filesystem API error ${response.status}`)
+		}
+		return response.json()
+	}
+
+	const info = await request("GET", "info")
+	return {
+		readDir: (path) => request("GET", "readDir", { params: { path } }),
+		stat: (path) => request("GET", "stat", { params: { path } }),
+		isDir: async (path) => Boolean((await request("GET", "stat", { params: { path } }))?.isDir),
+		readTextHead: (path, maxBytes) => request("GET", "readTextHead", { params: { path, maxBytes } }),
+		du: (path) => request("GET", "du", { params: { path } }),
+		disk: (path) => request("GET", "disk", { params: { path } }),
+		copy: (from, to) => request("POST", "copy", { body: { from, to } }),
+		move: (from, to) => request("POST", "move", { body: { from, to } }),
+		trash: (paths) => request("POST", "trash", { body: { paths } }),
+		erase: (paths) => request("POST", "erase", { body: { paths } }),
+		touch: (path) => request("POST", "touch", { body: { path } }),
+		home: () => info.home,
+		cwd: () => info.cwd,
+		root: () => info.root,
+	}
+}
+
+export { apiToken, createHttpFs }
+
+// EOF

package/src/js/tcmd/web/index.js

@@ -0,0 +1,22 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/web
+// Web entry point: builds the select.js root component for a session and
+// mounts it into a DOM host. The model/controller is the shared `tcmd/core`;
+// only the presentation differs from the TUI.
+
+import { createWebApp } from "./app.js"
+
+// Function: main
+// Mounts the web UI for `session` into `selector` (default "#app").
+function main(session, selector = "#app") {
+	const App = createWebApp(session)
+	return App.new().mount(selector)
+}
+
+export { main }
+
+// EOF

package/src/js/tcmd/web/main.js

@@ -0,0 +1,151 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/web/main
+// Browser entry point for the web view. Picks a filesystem backend (OPFS when
+// available, the HTTP API from `web/server.js` otherwise), builds the shared
+// session over it plus the null host adapter, and mounts the select.js UI into
+// `#app`. `window.tcmd` exposes the session for console poking.
+//
+// Backend choice: `?fs=opfs` or `?fs=http` forces one; by default OPFS is
+// preferred and HTTP is the fallback, so browsers without OPFS (or insecure
+// origins) still work when the page is served by `bun run web:serve`.
+//
+// select.js renders on animation frames and does no focus management, so this
+// module adds the two browser bits the shared components cannot know about:
+// default-key trapping and focus tracking.
+//
+// Built by `bun run web:build` (see package.json) into `public/main.js`.
+
+import { effect } from "select/state/cells"
+import { createNullOs } from "../core/os.js"
+import { createPane } from "../core/pane.js"
+import { createSession, load } from "../core/session.js"
+import { apiToken, createHttpFs } from "./http.js"
+import { main as mount } from "./index.js"
+import { createOpfsFs } from "./opfs.js"
+import { seedOpfs } from "./seed.js"
+
+// Constant: APP_KEYS
+// Keys with browser defaults that would fight the app keymap: focus traversal
+// (Tab), caret/scroll arrows, page scroll (Space) and history Backspace.
+const APP_KEYS = new Set([
+	" ",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"Backspace",
+	"Enter",
+	"Tab",
+])
+
+// Function: trapKeys
+// Keeps browser defaults out of the way while the app owns the keyboard. Space
+// and Backspace stay untouched in text inputs so the palette query can be
+// typed; the app routes every other listed key itself.
+function trapKeys(root) {
+	root?.addEventListener("keydown", (event) => {
+		const inInput = event.target instanceof HTMLInputElement
+		if (inInput && (event.key === " " || event.key === "Backspace")) return
+		if (APP_KEYS.has(event.key)) event.preventDefault()
+	})
+}
+
+// Function: trackFocus
+// The key handler lives on the app root, so focus must stay inside it. The
+// palette input is focused while the palette is open (select.js does not), and
+// the active pane's filter input while that pane is filtering; focus returns to
+// the app root otherwise. Focus that leaves the app — a removed input, a click
+// on the page background — is pulled back.
+function trackFocus(session, root) {
+	if (!root) return
+	const focusInput = () => {
+		if (session.paletteOpen.value) return document.querySelector("#app .palette-input")
+		if (session.filtering.value) {
+			return document.querySelector(`#app .pane-${session.filtering.value} .filter-input`)
+		}
+		return null
+	}
+	const applyFocus = () => {
+		// select.js swaps the palette DOM on animation frames: wait for it.
+		requestAnimationFrame(() => {
+			const input = focusInput()
+			if (input) input.focus()
+			else if (!root.contains(document.activeElement)) root.focus()
+		})
+	}
+	effect([session.paletteOpen, session.filtering], applyFocus)
+	document.addEventListener("focusout", (event) => {
+		if (!session.paletteOpen.value && !session.filtering.value && event.relatedTarget && root.contains(event.relatedTarget)) {
+			return
+		}
+		applyFocus()
+	})
+}
+
+// Function: createOpfsBackend
+// OPFS adapter, probed and seeded. `readDir("/")` resolves the OPFS root, so
+// it throws when the browser has no OPFS (a plain `stat("/")` would not).
+async function createOpfsBackend() {
+	const fs = createOpfsFs()
+	await fs.readDir("/") // throws when OPFS is unavailable
+	await seedOpfs(fs)
+	return fs
+}
+
+// Function: createBackend
+// Resolves `{ mode, fs }` from the `?fs=` override, or by trying OPFS first
+// and falling back to the HTTP API.
+async function createBackend() {
+	const requested = new URLSearchParams(globalThis.location?.search ?? "").get("fs")
+	if (requested === "opfs") return { mode: "opfs", fs: await createOpfsBackend() }
+	if (requested === "http") return { mode: "http", fs: await createHttpFs({ token: apiToken() }) }
+	try {
+		return { mode: "opfs", fs: await createOpfsBackend() }
+	} catch (error) {
+		console.info("tcmd web: OPFS unavailable, falling back to the HTTP filesystem API", error)
+		return { mode: "http", fs: await createHttpFs({ token: apiToken() }) }
+	}
+}
+
+// Function: start
+// Boots the session and mounts the UI.
+async function start() {
+	const host = document.querySelector("#app")
+	try {
+		const { mode, fs } = await createBackend()
+		const left = createPane({ fs, path: fs.cwd() })
+		const right = createPane({
+			fs,
+			path: mode === "opfs" ? "/" : fs.home() === fs.cwd() ? fs.root() : fs.home(),
+		})
+		const session = createSession({
+			fs,
+			os: createNullOs(),
+			left,
+			right,
+			host: globalThis.location?.hostname ?? "",
+		})
+		await load(session)
+		const instance = mount(session, "#app")
+		const root = document.querySelector("#app .app")
+		root?.focus()
+		trapKeys(root)
+		trackFocus(session, root)
+		document.title = `TinyCMD web (${mode})`
+		globalThis.tcmd = { fs, mode, session, instance }
+	} catch (error) {
+		const hint =
+			"OPFS needs a secure context (localhost or https); the HTTP filesystem API needs the page " +
+			"served by `bun run web:serve`."
+		host.textContent = `TinyCommand web could not start: ${error?.message ?? error}. ${hint}`
+		throw error
+	}
+}
+
+void start()
+
+// EOF