@ssebastien/tcmd 0.1.2 → 0.1.4

package/src/js/tcmd/tui/app.js

@@ -18,9 +18,15 @@ import appXml from "../components/App.xml" with { type: "text" }
 import { elideCrumbs } from "../components/format.js"
 import { appBehaviors, appEvents, appInit } from "../components/index.js"
 import { registerComponents } from "./catalogue.js"
-import { createFrameBehaviors, INSPECTOR_INLINE_WIDTH, isNarrow } from "./frame.js"
+import { createFrameBehaviors, currentColumnId, INSPECTOR_INLINE_WIDTH, isExplorer, isNarrow } from "../components/Frame.js"
 import { tuiTheme } from "./theme.js"
 
+// Constant: CURRENT_GROW
+// How much wider the explorer's middle (current) column is than its
+// neighbours — enough to read as the working pane, not enough to starve the
+// parent and preview columns.
+const CURRENT_GROW = 1.35
+
 // Function: createAppComponent
 // Builds the root component bound to a `session`.
 //
@@ -57,6 +63,9 @@ function createAppComponent(session, options = {}) {
 	const rightCrumbs = derived([session.panes.right.segments, crumbWidth], ([segments, width]) =>
 		elideCrumbs(segments, width),
 	)
+	const parentCrumbs = derived([session.panes.parent.segments, crumbWidth], ([segments, width]) =>
+		elideCrumbs(segments, width),
+	)
 
 	const quit = options.quit ?? ((self) => {
 		// Destroying the renderer from within a keypress deadlocks the native
@@ -67,7 +76,7 @@ function createAppComponent(session, options = {}) {
 		}, 100)
 	})
 
-	const baseKeys = appBehaviors({ panel: true, quit }).keys
+	const baseKeys = appBehaviors({ quit }).keys
 	const frame = createFrameBehaviors({ theme: tuiTheme })
 
 	return ui
@@ -78,6 +87,7 @@ function createAppComponent(session, options = {}) {
 			helpOpen: help,
 			viewerOpen: viewer,
 			leftSegments: leftCrumbs,
+			parentSegments: parentCrumbs,
 			rightSegments: rightCrumbs,
 		}))
 		.does({
@@ -87,7 +97,6 @@ function createAppComponent(session, options = {}) {
 				const name = key?.name
 				const isQuestion = name === "?" || (name === "/" && key?.shift)
 				const busy =
-					unwrap(data.paletteOpen) ||
 					unwrap(data.confirm) ||
 					unwrap(data.filtering) ||
 					unwrap(data.bookmarkOpen) ||
@@ -113,8 +122,8 @@ function createAppComponent(session, options = {}) {
 					return
 				}
 				// Below the inline breakpoint `v` toggles the viewer overlay
-				// instead of the side panel.
-				if (!busy && name === "v" && isNarrow(data, self)) {
+				// instead of the side panel (`⇧V` still maximizes).
+				if (!busy && name === "v" && !key.shift && isNarrow(data, self)) {
 					viewer.set(!viewer.value)
 					return
 				}
@@ -125,11 +134,23 @@ function createAppComponent(session, options = {}) {
 				unwrap(data.active) === "left" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
 			rightBorderFg: (_self, data) =>
 				unwrap(data.active) === "right" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
+			parentBorderFg: (_self, data) =>
+				unwrap(data.active) === "parent" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
 			// The header rule carries the same focus tint as the pane border.
 			leftHeadRuleFg: (_self, data) =>
 				unwrap(data.active) === "left" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
 			rightHeadRuleFg: (_self, data) =>
 				unwrap(data.active) === "right" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
+			parentHeadRuleFg: (_self, data) =>
+				unwrap(data.active) === "parent" ? tuiTheme.borderSecondaryActiveFg : tuiTheme.borderSecondaryFg,
+			// In explorer the current column takes the extra width; in
+			// commander both panes share the row evenly. The columns carry
+			// `flexBasis="0"` so the whole row is distributed by these
+			// growers instead of by the content each column would claim.
+			leftGrow: (_self, data) =>
+				isExplorer(data) && currentColumnId(data) === "left" ? CURRENT_GROW : 1,
+			rightGrow: (_self, data) =>
+				isExplorer(data) && currentColumnId(data) === "right" ? CURRENT_GROW : 1,
 		})
 		.sub(appEvents({ quit }))
 		.using(appXml)

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

@@ -13,7 +13,9 @@
 // `rows` environment. Components sharing a presentation bind the same source
 // (`Breadcrumbs` uses `RowList.xml`).
 //
-// TUI-only components (`Help`) live in `tui/` and are registered here only.
+// The workspace chrome (`Frame.js`) and the key reference (`Help.js`) are
+// 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"
@@ -23,7 +25,6 @@ import commandBarXml from "../components/CommandBar.xml" with { type: "text" }
 import commandArgRowXml from "../components/CommandArgRow.xml" with { type: "text" }
 import commandItemXml from "../components/CommandItem.xml" with { type: "text" }
 import commandPanelXml from "../components/CommandPanel.xml" with { type: "text" }
-import commandPaletteXml from "../components/CommandPalette.xml" with { type: "text" }
 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" }
@@ -32,7 +33,6 @@ 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 paletteRowXml from "../components/PaletteRow.xml" with { type: "text" }
 import rowListXml from "../components/RowList.xml" with { type: "text" }
 import summaryXml from "../components/Summary.xml" with { type: "text" }
 
@@ -48,7 +48,6 @@ import {
 	commandItemRows,
 	commandBarMarksItem,
 	commandPanelBehaviors,
-	commandPaletteBehaviors,
 	confirmBehaviors,
 	crumbBehaviors,
 	crumbRows,
@@ -60,14 +59,12 @@ import {
 	fileWindow,
 	filterBarBehaviors,
 	iconsEnabled,
-	paletteRowBehaviors,
-	paletteRows,
 	panelArgRows,
 	panelOpRows,
 	summaryBehaviors,
 } from "../components/index.js"
-import { createBehaviors as helpBehaviors } from "./help.js"
-import { INSPECTOR_INLINE_WIDTH } from "./frame.js"
+import { createBehaviors as helpBehaviors } from "../components/Help.js"
+import { INSPECTOR_INLINE_WIDTH } from "../components/Frame.js"
 import { tuiTheme } from "./theme.js"
 
 let registered = false
@@ -90,6 +87,7 @@ function tuiEnv() {
 		dirFg: tuiTheme.dirFg,
 		errorBg: tuiTheme.errorBg,
 		errorFg: tuiTheme.errorFg,
+		fieldBg: tuiTheme.fieldBg,
 		fileFg: tuiTheme.fileFg,
 		// Nerd Font icons in rows, on unless `TCMD_ICONS` opts out.
 		icons: iconsEnabled(process.env),
@@ -177,9 +175,6 @@ function fileListScrollTop(self, data) {
 		return keepVisible(self.ref.list, local, len)
 	}
 	return keepVisible(self.ref.list, unwrap(data.cursor) ?? 0, unwrap(data.entries)?.length ?? 0)
-}// Keep the palette selection inside its viewport.
-function paletteScrollTop(self, data) {
-	return keepVisible(self.ref.list, unwrap(data.selected) ?? 0, unwrap(data.items)?.length ?? 0)
 }
 
 // Keep the bookmark picker selection inside its viewport.
@@ -214,7 +209,6 @@ function createComponents() {
 	const crumb = bind(ui, "Crumb", crumbXml, crumbBehaviors(env))
 	const fileRow = bind(ui, "FileRow", fileRowXml, fileRowBehaviors(env))
 	const filterBar = bind(ui, "FilterBar", filterBarXml, filterBarBehaviors(env))
-	const paletteRow = bind(ui, "PaletteRow", paletteRowXml, paletteRowBehaviors(env))
 	const bookmarkRow = bind(ui, "BookmarkRow", bookmarkRowXml, bookmarkRowBehaviors(env))
 	return {
 		BookmarkRow: bookmarkRow,
@@ -222,7 +216,6 @@ function createComponents() {
 		CommandItem: commandItem,
 		Crumb: crumb,
 		FileRow: fileRow,
-		PaletteRow: paletteRow,
 		Breadcrumbs: bind(ui, "Breadcrumbs", rowListXml, breadcrumbsBehaviors({
 			...env,
 			rows: crumbRows(crumb),
@@ -242,11 +235,6 @@ function createComponents() {
 			argRows: panelArgRows(commandArgRow),
 			argScrollTop: panelArgScrollTop,
 		})),
-		CommandPalette: bind(ui, "CommandPalette", commandPaletteXml, commandPaletteBehaviors({
-			...env,
-			rows: paletteRows(paletteRow),
-			scrollTop: paletteScrollTop,
-		})),
 		Confirm: bind(ui, "Confirm", confirmXml, confirmBehaviors(env)),
 		EntryDetail: bind(ui, "EntryDetail", entryDetailXml, entryDetailBehaviors({
 			...env,
@@ -283,7 +271,6 @@ function registerComponents() {
 		breadcrumbs: components.Breadcrumbs,
 		commandbar: components.CommandBar,
 		commandpanel: components.CommandPanel,
-		commandpalette: components.CommandPalette,
 		confirm: components.Confirm,
 		entrydetail: components.EntryDetail,
 		filelist: components.FileList,

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

@@ -15,24 +15,10 @@ import nodePath from "node:path"
 import { mkdir, readFile, writeFile } from "node:fs/promises"
 import { cell } from "select/state/cells"
 import { render } from "select.tui"
-import { commandRow, getPaletteCommands } from "../core/commands.js"
 import { createBookmarks, createFileBookmarkStore } from "../core/bookmarks.js"
 import { createNodeFs, createNodeOs, createPane, createSession, load } from "../core/index.js"
 import { createAppComponent } from "./app.js"
 
-// The TUI palette lists meaningful actions; raw cursor movement is already on
-// the arrow keys and is noise in the list. Hiding it here (rather than in core)
-// keeps the web palette and the shared registry unchanged.
-const PALETTE_NOISE = /^nav\./
-
-// Function: tuiPaletteCommands
-// The command rows the TUI palette offers.
-function tuiPaletteCommands() {
-	return getPaletteCommands()
-		.filter((command) => !PALETTE_NOISE.test(command.id))
-		.map(commandRow)
-}
-
 // Function: readSize
 // Normalizes a renderer resize payload. OpenTUI's live renderer emits
 // `(width, height)` as two arguments; the test renderer emits a bare width;
@@ -78,7 +64,6 @@ async function main(paths = []) {
 		}),
 	})
 	const session = createSession({ fs, os, left, right, host: nodeOs.hostname(), bookmarks })
-	session.paletteCommands.set(tuiPaletteCommands())
 	await load(session)
 	const size = cell({ width: 0, height: 0 })
 	const help = cell(false)
@@ -99,6 +84,6 @@ async function main(paths = []) {
 	return session
 }
 
-export { main, readSize, tuiPaletteCommands }
+export { main, readSize }
 
 // EOF

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

@@ -43,6 +43,8 @@ const DARK = {
 	cursorBg: "#274a9e",
 	cursorInactiveBg: "#1b2a51",
 	selectionBg: "#2b3f78",
+	// The value fields of the command panel's argument rows.
+	fieldBg: "#1b2a51",
 	// Text
 	textFg: "#e6ecff",
 	textSecondaryFg: "#8fa3d9",
@@ -88,6 +90,8 @@ const LIGHT = {
 	cursorBg: "#2f56b8",
 	cursorInactiveBg: "#c6d1ee",
 	selectionBg: "#c9d5f4",
+	// The value fields of the command panel's argument rows.
+	fieldBg: "#dbe4fb",
 	// Text
 	textFg: "#101a33",
 	textSecondaryFg: "#495785",
@@ -131,6 +135,7 @@ const MONO = {
 	cursorBg: undefined,
 	cursorInactiveBg: undefined,
 	selectionBg: undefined,
+	fieldBg: undefined,
 	textFg: undefined,
 	textSecondaryFg: undefined,
 	textHeadingFg: undefined,

package/src/js/tcmd/web/app.js

@@ -9,10 +9,13 @@
 // `tcmd/tui/app.js` for the DOM backend.
 
 import { ui } from "select/ui"
-import { unwrap } from "select/state/cells"
+import { cell, derived, unwrap } from "select/state/cells"
 import appHtml from "../components/App.html" with { type: "text" }
 import { appBehaviors, appEvents, appInit } from "../components/index.js"
 import { registerWebComponents } from "./catalogue.js"
+import { elideCrumbs } from "../components/format.js"
+import { createFrameBehaviors, INSPECTOR_INLINE_WIDTH, isNarrow } from "../components/Frame.js"
+import { connectEffects } from "./effects.js"
 import { webTheme } from "./theme.js"
 
 // Map DOM key names to the core keymap chord names.
@@ -45,9 +48,18 @@ function normalizeKey(event) {
 // Child data keeps the session cells (as `in:` slots do in the TUI), so the
 // child instances subscribe and update granularly; behaviors read cells with
 // `unwrap` at the point of use.
+
+// The classes one pane column carries: focus (`is-active`) and, in explorer
+// mode, the extra width of the middle (`is-major`) column.
+function paneClass(data, paneId) {
+	const active = unwrap(data.active) === paneId
+	const major = unwrap(data.viewMode) === "explorer" && `${unwrap(data.currentId)}` === paneId
+	return [active && webTheme.activeClass, major && "is-major"].filter(Boolean).join(" ") || null
+}
+
 function webViewBehaviors() {
 	return {
-		headerView: (_self, data) => ({ host: data.appHost, path: data.appPath }),
+		headerView: (_self, data) => ({ host: data.appHost, path: data.appPath, mode: data.viewMode }),
 		bookmarkView: (_self, data) => ({
 			items: data.bookmarkItems,
 			mode: data.bookmarkMode,
@@ -61,92 +73,206 @@ function webViewBehaviors() {
 			leftError: data.leftError,
 			notice: data.notice,
 			rightError: data.rightError,
+			active: data.active,
+			leftMarked: data.leftMarked,
+			rightMarked: data.rightMarked,
 		}),
 		confirmView: (_self, data) => ({ confirm: data.confirm }),
 		leftCrumbsView: (_self, data) => ({
 			segments: data.leftSegments,
 			paneId: data.leftId,
 		}),
-		leftDetailView: (_self, data) => ({ entry: data.leftEntry, marked: data.leftMarked }),
+		leftDetailView: (_self, data) => ({ entry: data.leftEntry, marked: data.leftMarked, width: data.paneWidth }),
 		leftFilterView: (_self, data) => ({
 			query: data.leftFilter,
 			paneId: data.leftId,
 			filtering: data.filtering,
 			entries: data.leftEntries,
+			setFilter: data.leftSetFilter,
 		}),
-		leftLabelView: (_self, data) => ({ paneId: data.leftId, active: data.active }),
 		leftListView: (_self, data) => ({
 			entries: data.leftEntries,
 			cursor: data.leftCursor,
 			marked: data.leftMarked,
 			paneId: data.leftId,
+			active: data.leftActive,
+			loading: data.leftLoading,
 		}),
-		leftPaneClass: (_self, data) => (unwrap(data.active) === "left" ? webTheme.activeClass : null),
+		leftPaneClass: (_self, data) => paneClass(data, "left"),
 		leftSummaryView: (_self, data) => ({
 			entries: data.leftEntries,
 			disk: data.leftDisk,
+			width: data.paneWidth,
 		}),
-		paletteView: (_self, data) => ({
-			// Cells pass through (as `in:` slots do in the TUI); `query` is written
-			// back by the input's `inout` two-way binding.
-			items: data.paletteItems,
-			mode: data.paletteMode,
-			open: data.paletteOpen,
-			query: data.paletteQuery,
-			selected: data.paletteIndex,
+		// The explorer's first column: the parent of the current directory,
+		// a full pane of its own (header, filter, listing, detail, summary).
+		parentCrumbsView: (_self, data) => ({
+			segments: data.parentSegments,
+			paneId: data.parentId,
+		}),
+		parentDetailView: (_self, data) => ({
+			entry: data.parentEntry,
+			marked: data.parentMarked,
+			width: data.paneWidth,
+		}),
+		parentFilterView: (_self, data) => ({
+			query: data.parentFilter,
+			paneId: data.parentId,
+			filtering: data.filtering,
+			entries: data.parentEntries,
+			setFilter: data.parentSetFilter,
 		}),
+		parentListView: (_self, data) => ({
+			entries: data.parentEntries,
+			cursor: data.parentCursor,
+			marked: data.parentMarked,
+			paneId: data.parentId,
+			active: data.parentActive,
+			loading: data.parentLoading,
+		}),
+		parentPaneClass: (_self, data) => paneClass(data, "parent"),
+		parentSummaryView: (_self, data) => ({
+			entries: data.parentEntries,
+			disk: data.parentDisk,
+			width: data.paneWidth,
+		}),
+		panelView: (_self, data) => ({
+			// Cells pass through (as `in:` slots do in the TUI); `query`/`value`
+			// are written back by the inputs' `inout` two-way bindings.
+			open: data.panelOpen,
+			entry: data.panelEntry,
+			items: data.panelItems,
+			opCursor: data.panelOpIndex,
+			rows: data.panelRows,
+			argCursor: data.panelRowIndex,
+			labelWidth: data.panelLabelWidth,
+			focus: data.panelFocus,
+			command: data.panelCommand,
+			runnable: data.panelRunnable,
+			picking: data.panelPicking,
+			pickerQuery: data.pickerQuery,
+			pickerPath: data.pickerPath,
+			query: data.panelQuery,
+			value: data.panelValue,
+		}),
+		helpView: (_self, data) => ({ open: data.helpOpen }),
 		previewView: (_self, data) => ({
 			preview: data.preview,
-			show: data.showPreview,
+			show: true,
+			entry: data.appEntry,
+			paneId: data.previewId,
+			// The directory column: the inspector pane's own listing, so a
+			// previewed directory reads and behaves like a pane.
+			dirSegments: data.previewSegments,
+			dirEntries: data.previewEntries,
+			dirCursor: data.previewCursor,
+			dirMarked: data.previewMarked,
+			dirActive: data.previewActive,
+			dirLoading: data.previewLoading,
 		}),
 		rightCrumbsView: (_self, data) => ({
 			segments: data.rightSegments,
 			paneId: data.rightId,
 		}),
-		rightDetailView: (_self, data) => ({ entry: data.rightEntry, marked: data.rightMarked }),
+		rightDetailView: (_self, data) => ({ entry: data.rightEntry, marked: data.rightMarked, width: data.paneWidth }),
 		rightFilterView: (_self, data) => ({
 			query: data.rightFilter,
 			paneId: data.rightId,
 			filtering: data.filtering,
 			entries: data.rightEntries,
+			setFilter: data.rightSetFilter,
 		}),
-		rightLabelView: (_self, data) => ({ paneId: data.rightId, active: data.active }),
 		rightListView: (_self, data) => ({
 			entries: data.rightEntries,
 			cursor: data.rightCursor,
 			marked: data.rightMarked,
 			paneId: data.rightId,
+			active: data.rightActive,
+			loading: data.rightLoading,
 		}),
-		rightPaneClass: (_self, data) => (unwrap(data.active) === "right" ? webTheme.activeClass : null),
+		rightPaneClass: (_self, data) => paneClass(data, "right"),
 		rightSummaryView: (_self, data) => ({
 			entries: data.rightEntries,
 			disk: data.rightDisk,
+			width: data.paneWidth,
 		}),
 	}
 }
 
 // Function: createWebApp
 // Builds the root App component for `session` on the web presentation.
-function createWebApp(session) {
+function createWebApp(session, options = {}) {
 	registerWebComponents()
-	// The command panel is a TUI-only view; disable it so no web dispatch path
-	// (key, palette, command bar) opens an invisible modal, and drop its
-	// palette entries (`:` and `m` both fall back to the script palette).
-	session.panelEnabled?.set(false)
-	const palette = session.paletteCommands?.value
-	if (palette) {
-		session.paletteCommands.set(palette.filter((row) => row.id !== "panel.toggle" && row.id !== "panel.open"))
-	}
+	const size = options.size ?? cell({ width: 0, height: 0 })
+	const help = cell(false)
+	const viewer = cell(false)
+	const paneWidth = derived([size, session.showPreview], ([value, show]) => {
+		if (!value.width) return 0
+		const columns = show && value.width >= INSPECTOR_INLINE_WIDTH ? 3 : 2
+		return Math.max(1, Math.floor(value.width / columns) - 4)
+	})
+	const crumbs = (pane) => derived([pane.segments, paneWidth], ([segments, width]) => elideCrumbs(segments, width))
+	const quit = (self) => self.unmount?.()
+	// DOM inputs have no native `enter` event; the root routes Enter for them.
+	const baseKeys = appBehaviors({ normalizeKey, quit }).keys
+	const events = appEvents({ quit })
 	return ui(appHtml)
-		.init(appInit(session))
+		.init(() => ({
+			...appInit(session)(),
+			uiSize: size,
+			helpOpen: help,
+			viewerOpen: viewer,
+			paneWidth,
+			leftSegments: crumbs(session.panes.left),
+			parentSegments: crumbs(session.panes.parent),
+			rightSegments: crumbs(session.panes.right),
+		}))
 		.does({
-			...appBehaviors({
-				normalizeKey,
-				quit: (self) => self.unmount?.(),
-			}),
+			...createFrameBehaviors({ theme: webTheme }),
 			...webViewBehaviors(),
+			minSizeTitle: () => "Window too small",
+			"effects!": (self) => {
+				if (!self._effects) self.effect(() => {
+					self._effects = connectEffects(session, self.ref.root, { size, help, viewer })
+					return () => self._effects.dispose()
+				})
+				self._effects.schedule()
+			},
+			keys: (self, data, event) => {
+				if (event.isComposing) return
+				const key = normalizeKey(event)
+				const busy = unwrap(data.confirm) || unwrap(data.bookmarkOpen) || unwrap(data.panelOpen) || unwrap(data.filtering)
+				if (help.value) {
+					if (["escape", "q", "?"].includes(key.name)) help.set(false)
+					return
+				}
+				if (!busy && key.name === "?") {
+					help.set(true)
+					return
+				}
+				// The viewer only exists while narrow: if the viewport widened
+				// underneath it, drop the stale state and keep handling the key.
+				if (viewer.value && !isNarrow(data, self)) viewer.set(false)
+				if (viewer.value) {
+					if (key.name === "escape" || key.name === "v") viewer.set(false)
+					else if (key.shift && key.name === "o") session.dispatch("file.open")
+					else if (key.shift && key.name === "e") session.dispatch("file.edit")
+					return
+				}
+				if (!busy && key.name === "v" && !key.shift && isNarrow(data, self)) {
+					viewer.set(!viewer.value)
+					return
+				}
+				return baseKeys(self, data, event)
+			},
+		})
+		.sub({
+			...events,
+			"commandbar:run": (self, data, event) => {
+				if (event.data === "view.togglePreview" && isNarrow(data, self)) viewer.set(!viewer.value)
+				else events["commandbar:run"](self, data, event)
+			},
 		})
-		.sub(appEvents({ quit: (self) => self.unmount?.() }))
 }
 
 export { createWebApp, normalizeKey }

package/src/js/tcmd/web/bookmarks.js

@@ -0,0 +1,36 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-10-13
+
+// Module: tcmd/web/bookmarks
+// The `core/bookmarks` store contract backed by localStorage
+// (`createWebBookmarkStore`, the web twin of the TUI's
+// `createFileBookmarkStore`). Backend/root namespaces keep browser-private and
+// host-filesystem paths apart. Persistence is best-effort, just like the TUI
+// store (private browsing may deny storage).
+
+// Function: createWebBookmarkStore
+function createWebBookmarkStore({ mode, root, storage } = {}) {
+	const key = JSON.stringify(["tcmd.bookmarks", mode, root])
+	return {
+		async load() {
+			try {
+				return JSON.parse((storage ?? globalThis.localStorage).getItem(key) ?? "{}")
+			} catch {
+				return {}
+			}
+		},
+		async save(map) {
+			try {
+				(storage ?? globalThis.localStorage).setItem(key, JSON.stringify(map))
+			} catch {
+				// Keep in-memory bookmarks usable when persistent storage is denied.
+			}
+		},
+	}
+}
+
+export { createWebBookmarkStore }
+
+// EOF