@ssebastien/tcmd 0.1.3 → 0.1.7

package/src/js/tcmd/web/effects.js

@@ -0,0 +1,223 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-13
+
+// Module: tcmd/web/effects
+// DOM effects owned by the mounted App: viewport measurement, modal focus,
+// default-key trapping and keeping the keyboard cursor visible. select.js
+// renders without any of this, so the web binding owns it explicitly.
+
+import { effect } from "select/state/cells"
+
+const canvases = new WeakMap()
+
+function isToolbarTarget(target) {
+	return Boolean(target?.closest?.(".desktop-toolbar"))
+}
+
+// Function: columnWidth
+// Available monospace columns, or zero in a DOM without layout (happy-dom).
+function columnWidth(el) {
+	if (!el?.clientWidth) return 0
+	const doc = el.ownerDocument
+	const view = doc.defaultView
+	let canvas = canvases.get(doc)
+	if (!canvas) {
+		canvas = doc.createElement("canvas")
+		canvases.set(doc, canvas)
+	}
+	const ctx = canvas.getContext("2d")
+	if (!ctx) return 0
+	const style = view.getComputedStyle(el)
+	ctx.font = `${style.fontWeight} ${style.fontSize} ${style.fontFamily}`
+	const width = ctx.measureText("0").width
+	const padding = (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0)
+	return width ? Math.floor((el.clientWidth - padding) / width) : 0
+}
+
+// Function: keepVisible
+// Scroll only the row's own list, never the page or an ancestor overlay.
+function keepVisible(list, row) {
+	if (!list?.clientHeight || !row) return
+	const listRect = list.getBoundingClientRect()
+	const rowRect = row.getBoundingClientRect()
+	if (rowRect.top < listRect.top) list.scrollTop -= listRect.top - rowRect.top
+	else if (rowRect.bottom > listRect.bottom) list.scrollTop += rowRect.bottom - listRect.bottom
+}
+
+// Function: previewBodies
+// The scrollable preview bodies in `root`: the inspector, the maximized
+// preview and the viewer each reuse one text/card body.
+function previewBodies(root) {
+	return root?.querySelectorAll?.(".preview-text, .preview-card") ?? []
+}
+
+// Function: resetPreviewScroll
+// Send the preview body back to the top. The inspector, the maximized preview
+// and the viewer each reuse one scrollable body, so a scroll offset would
+// otherwise carry over to the next file.
+function resetPreviewScroll(root) {
+	for (const body of previewBodies(root)) {
+		body.scrollTop = 0
+	}
+}
+
+// Function: applyPreviewScroll
+// Apply a full-preview scroll request from the App's arrow routing. The DOM
+// clamps `scrollTop` against the visible body, so the edges need no guard.
+function applyPreviewScroll(root, delta) {
+	if (!delta) return
+	for (const body of previewBodies(root)) {
+		body.scrollTop = Math.max(0, body.scrollTop + delta)
+	}
+}
+
+// Function: connectEffects
+// Returns a frame scheduler and teardown; the App registers teardown with
+// instance.effect(), so remounting leaves no listeners or observers behind.
+function connectEffects(session, root, { size, help, viewer }) {
+	// Select initially clones into an inert template document; the live window
+	// is available before mount even though ownerDocument.defaultView is not.
+	const view = root.ownerDocument.defaultView ?? globalThis.window
+	const doc = view.document
+	let frame = null
+	let retries = 0
+	let disposed = false
+	// The viewer overlay is a modal at any width (Enter opens it on a file
+	// that cannot be edited); it owns focus while open.
+	const viewerOpen = () => Boolean(viewer.value)
+	const modalOpen = () => Boolean(session.confirm.value || help.value || viewerOpen() || session.panelOpen.value || session.bookmarkOpen.value)
+	const focusTarget = () => {
+		if (session.confirm.value) return root.querySelector(".confirm")
+		if (help.value) return root.querySelector(".help")
+		if (viewerOpen()) return root.querySelector(".viewer")
+		if (session.panelOpen.value) {
+			if (session.pickerOpen.value) {
+				return session.pickerFocus.value === "path"
+					? root.querySelector(".panel-picker-path")
+					: root.querySelector(".command-panel")
+			}
+			if (session.panelFocus.value === "ops") return root.querySelector(".panel-query")
+			return root.querySelector(session.panelTextual.value ? ".panel-value" : ".command-panel")
+		}
+		if (session.bookmarkOpen.value) return root.querySelector(".bookmark-query")
+		if (session.filtering.value) return root.querySelector(`.pane-${session.filtering.value} .filter-input`)
+		return root
+	}
+	const update = () => {
+		frame = null
+		if (disposed || !root.isConnected) return
+		const width = columnWidth(root)
+		const lineHeight = Number.parseFloat(view.getComputedStyle(root).lineHeight)
+		const height = lineHeight ? Math.floor(root.clientHeight / lineHeight) : 0
+		if (width && height && (size.value.width !== width || size.value.height !== height)) size.set({ width, height })
+		// A modal's field mounts on a later frame than the flag that opens it;
+		// retry a few frames before giving up so focus lands on the overlay
+		// instead of the root.
+		const target = focusTarget()
+		if (modalOpen() && !target && retries < 8) {
+			retries += 1
+			schedule()
+			return
+		}
+		retries = 0
+		// Do not steal focus as Tab moves between native toolbar buttons.
+		const toolbarFocused = !modalOpen() && !session.filtering.value &&
+			root.contains(doc.activeElement) && isToolbarTarget(doc.activeElement)
+		const focusable = toolbarFocused ? doc.activeElement : target ?? root
+		if (focusable !== doc.activeElement) focusable.focus({ preventScroll: true })
+		for (const list of root.querySelectorAll(".file-list, .bookmark-rows, .panel-ops, .panel-args")) {
+			keepVisible(list, list.querySelector(".is-current, .is-selected, .is-focused"))
+		}
+	}
+	const schedule = () => {
+		// Root renders queue child renders on the next frame. Wait past those
+		// before focusing a newly mounted field or measuring a changed layout.
+		if (!disposed && frame === null) frame = view.requestAnimationFrame(() => {
+			frame = view.requestAnimationFrame(update)
+		})
+	}
+	const trapKeys = (event) => {
+		// Reload remains disabled even when native controls own the other keys.
+		// F5 now refreshes the listing too, so it must not reload the page.
+		if ((event.ctrlKey && event.key.toLowerCase() === "r") || event.key === "F5") {
+			event.preventDefault()
+			return
+		}
+		if (isToolbarTarget(event.target)) return
+		const input = event.target?.tagName === "INPUT" || event.target?.tagName === "TEXTAREA"
+		// Editing keeps native text/caret keys except the ones the shared
+		// controller explicitly owns (vertical arrows, Enter and Tab).
+		if (input && [" ", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown"].includes(event.key)) return
+		// The bookmark filter edits its query like any input; once it is empty,
+		// Backspace removes the selected bookmark instead. Delete always does.
+		const bookmarkFilterEmpty = session.bookmarkOpen.value && !`${session.bookmarkQuery?.value ?? ""}`.trim()
+		if (input && event.key === "Backspace" && !bookmarkFilterEmpty) return
+		if (session.bookmarkOpen.value && event.key === "Delete") event.preventDefault()
+		if ([" ", "Backspace", "Enter", "Tab", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Home", "End", "PageUp", "PageDown", "Escape"].includes(event.key)) event.preventDefault()
+	}
+	const focusIn = (event) => {
+		if (modalOpen() && event.target !== focusTarget()) schedule()
+	}
+	root.addEventListener("keydown", trapKeys)
+	doc.addEventListener("focusin", focusIn)
+	root.addEventListener("focusout", schedule)
+	view.addEventListener("resize", schedule)
+	const observer = view.ResizeObserver ? new view.ResizeObserver(schedule) : null
+	observer?.observe(root)
+	// Pane proportions also change when the inspector is toggled.
+	for (const pane of root.querySelectorAll(".pane")) observer?.observe(pane)
+	// Modal state can change before the initial focus frame runs (for example,
+	// the user opens the panel immediately after mount). Watch the focus-driving
+	// cells directly so that initial layout work cannot swallow that handoff.
+	const stopFocusWatch = effect(
+		[
+			session.panelOpen,
+			session.panelFocus,
+			session.panelOpIndex,
+			session.panelRowIndex,
+			session.panelTextual,
+			session.pickerOpen,
+			session.bookmarkOpen,
+			session.filtering,
+			session.confirm,
+			session.overlay,
+			help,
+			viewer,
+		],
+		schedule,
+	)
+	// The preview target and its payload both change as the cursor moves:
+	// reset on either so a new file starts at the top even when its text
+	// arrives asynchronously.
+	const previewInputs = [session.previewEntry, session.preview].filter((value) => value?.isReactive)
+	const stopPreviewWatch = previewInputs.length
+		? effect(previewInputs, () => resetPreviewScroll(root))
+		: null
+	// Full-preview arrow scrolling: the shared controller publishes a delta,
+	// the DOM body applies it to its own measured viewport.
+	const stopScrollWatch = session.previewScroll?.isReactive
+		? effect([session.previewScroll], ([request]) => applyPreviewScroll(root, request?.delta ?? 0))
+		: null
+	schedule()
+	return {
+		schedule,
+		dispose() {
+			disposed = true
+			stopFocusWatch?.()
+			stopPreviewWatch?.()
+			stopScrollWatch?.()
+			if (frame !== null) view.cancelAnimationFrame(frame)
+			observer?.disconnect()
+			root.removeEventListener("keydown", trapKeys)
+			root.removeEventListener("focusout", schedule)
+			doc.removeEventListener("focusin", focusIn)
+			view.removeEventListener("resize", schedule)
+		},
+	}
+}
+
+export { applyPreviewScroll, columnWidth, connectEffects, isToolbarTarget, keepVisible, resetPreviewScroll }
+
+// EOF

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

@@ -1 +1 @@
-<header class="app-header" ref="box"><span class="brand-tiny">Tiny</span><span class="brand-cmd">Cmd</span><span out="title"></span></header>
+<header class="app-header" ref="box"><span class="brand-tiny">Tiny</span><span class="brand-cmd">Cmd</span><span out="title"></span><span class="app-header-status"><span class="app-header-mode" out:class="modeClass" on:click="!view:toggleMode"><svg class="header-mode-icon ui-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><use href="#lucide-columns-2"></use></svg><span out="mode"></span></span><span out="statusSuffix"></span></span></header>

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

@@ -4,32 +4,36 @@
 // 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).
+// Header: the slim application identity bar, showing `TinyCmd - HOST` and,
+// right-aligned, the view mode and version (`explorer · 0.1.3`).
 // 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`).
+// `title` behavior carries only the host tail (` - HOST`), `mode`/`modeClass`
+// the gradiented mode word and `statusSuffix` the version that follows it.
 //
-// Environment: `textHeadingFg`, plus `width(self)` returning the available
-// columns (renderer-specific; 0/omitted disables compression).
+// Environment: `textHeadingFg`.
 
 import { unwrap } from "select/state/cells"
-import { formatTitle } from "../components/format.js"
+import { modeWord, versionTrail } from "../components/Frame.js"
 
 // Constant: BRAND
-// The brand word the static header spans render; stripped from the title so
-// the tail doesn't repeat it.
+// The brand word the static header spans render.
 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
+		title: (_self, data) => {
+			const host = `${unwrap(data.host) ?? ""}`.trim()
+			return host ? ` - ${host}` : ""
 		},
 		titleFg: () => env.textHeadingFg,
+		// The mode word picks the brand gradient it shimmers along: explorer
+		// the Tiny blues, commander the Cmd oranges (see `.app-header-mode`).
+		mode: (_self, data) => modeWord(unwrap(data.mode)),
+		modeClass: (_self, data) => `mode-${modeWord(unwrap(data.mode))}`,
+		statusSuffix: () => versionTrail(),
 	}
 }
 

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

@@ -14,6 +14,8 @@
 // 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.
 
+import { decodeBase64 } from "../core/base64.js"
+
 // Function: apiToken
 // Token injected into the host page, or null when absent/placeholder.
 function apiToken(doc = globalThis.document) {
@@ -59,13 +61,24 @@ async function createHttpFs({ base = "/api", token, fetch: doFetch = globalThis.
 	return {
 		readDir: (path) => request("GET", "readDir", { params: { path } }),
 		stat: (path) => request("GET", "stat", { params: { path } }),
+		realpath: (path) => request("GET", "realpath", { params: { path } }),
 		isDir: async (path) => Boolean((await request("GET", "stat", { params: { path } }))?.isDir),
 		readTextHead: (path, maxBytes) => request("GET", "readTextHead", { params: { path, maxBytes } }),
+		readBytes: async (path, maxBytes) =>
+			decodeBase64((await request("GET", "readBytes", { params: { path, maxBytes } })).base64),
 		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 } }),
+		hardlink: (from, to) => request("POST", "hardlink", { body: { from, to } }),
+		symlink: (target, link) => request("POST", "symlink", { body: { target, link } }),
+		chmod: (path, mode) => request("POST", "chmod", { body: { path, mode } }),
+		chown: (path, owner) => request("POST", "chown", { body: { path, owner } }),
+		unlink: (path) => request("POST", "unlink", { body: { path } }),
+		mkdir: (path) => request("POST", "mkdir", { body: { path } }),
 		trash: (paths) => request("POST", "trash", { body: { paths } }),
+		trashList: () => request("GET", "trashList"),
+		restore: (paths) => request("POST", "restore", { body: { paths } }),
 		erase: (paths) => request("POST", "erase", { body: { paths } }),
 		touch: (path) => request("POST", "touch", { body: { path } }),
 		home: () => info.home,

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

@@ -12,8 +12,8 @@ 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)
+function main(session, selector = "#app", options = {}) {
+	const App = createWebApp(session, options)
 	return App.new().mount(selector)
 }
 

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

@@ -13,13 +13,13 @@
 // 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.
+// DOM effects (focus, key trapping, resize, scroll) live in `web/effects.js`
+// and are wired by the App binding in `web/app.js`; bookmarks persist through
+// `web/bookmarks.js`, namespaced by backend and API root.
 //
 // Built by `bun run web:build` (see package.json) into `public/main.js`.
 
-import { effect } from "select/state/cells"
+import { createBookmarks } from "../core/bookmarks.js"
 import { createNullOs } from "../core/os.js"
 import { createPane } from "../core/pane.js"
 import { createSession, load } from "../core/session.js"
@@ -27,64 +27,7 @@ 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()
-	})
-}
+import { createWebBookmarkStore } from "./bookmarks.js"
 
 // Function: createOpfsBackend
 // OPFS adapter, probed and seeded. `readDir("/")` resolves the OPFS root, so
@@ -128,13 +71,10 @@ async function start() {
 			left,
 			right,
 			host: globalThis.location?.hostname ?? "",
+			bookmarks: createBookmarks({ store: createWebBookmarkStore({ mode, root: mode === "opfs" ? "/" : fs.root() }) }),
 		})
 		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) {