@ssebastien/tcmd 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,104 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/tui
+// Terminal UI entry point: builds the session from the core, wires the app
+// component and hands it to the select.tui/OpenTUI renderer. The host adapter
+// releases the terminal around `$EDITOR`/shell commands and restores it when
+// they exit. This layer also wires the JSON-file bookmark store (the core
+// stays free of Node imports).
+
+import nodeOs from "node:os"
+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;
+// some wrappers emit a `{ width, height }` / `{ columns, rows }` object.
+function readSize(payload, height) {
+	if (typeof payload === "number") return { width: payload, height }
+	if (payload && typeof payload === "object") {
+		return {
+			width: payload.width ?? payload.columns,
+			height: payload.height ?? payload.rows,
+		}
+	}
+	return height === undefined ? {} : { height }
+}
+
+// Function: bookmarkFile
+// The JSON file the TUI persists bookmarks to:
+// `$TCMD_BOOKMARKS_FILE` or `$XDG_CONFIG_HOME/tcmd/bookmarks.json` (default
+// `~/.config/tcmd/bookmarks.json`).
+function bookmarkFile() {
+	if (process.env.TCMD_BOOKMARKS_FILE) return process.env.TCMD_BOOKMARKS_FILE
+	const configHome = process.env.XDG_CONFIG_HOME || nodePath.join(nodeOs.homedir(), ".config")
+	return nodePath.join(configHome, "tcmd", "bookmarks.json")
+}
+
+// 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() })
+	let instance = null
+	const os = createNodeOs({
+		suspend: () => instance?._ownedRenderer?.suspend?.(),
+		resume: () => instance?._ownedRenderer?.resume?.(),
+	})
+	const bookmarks = createBookmarks({
+		store: createFileBookmarkStore({
+			file: bookmarkFile(),
+			readFile,
+			writeFile,
+			mkdir,
+		}),
+	})
+	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)
+	const App = createAppComponent(session, { size, help })
+	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 }
+		: { width: 0, height: 0 }
+	size.set(current)
+	renderer?.on?.("resize", (payload, height) => {
+		const next = readSize(payload, height)
+		size.set({
+			width: next.width ?? size.value.width,
+			height: next.height ?? size.value.height,
+		})
+	})
+	return session
+}
+
+export { main, readSize, tuiPaletteCommands }
+
+// EOF

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

@@ -0,0 +1,177 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-26
+
+// Module: tcmd/tui/theme
+// Central place for TUI colors so the look can be retuned in one spot. The
+// palette is resolved once at load from the environment:
+//
+// - `TCMD_THEME=dark|light|mono` forces a variant.
+// - `NO_COLOR` (any value) or `TERM=dumb` falls back to mono.
+// - anything else uses dark.
+//
+// Every token is an OpenTUI color string, or `undefined` to mean "terminal
+// default" (which is what mono uses throughout). Non-color emphasis (markers,
+// borders, bold/underline attributes) carries the state in mono.
+//
+// Token groups (see tui/catalogue.js for the env they feed):
+//
+// - Surfaces:  panel/overlay backgrounds and the two selection rows.
+//              `cursorBg` marks the active pane's cursor row and
+//              `cursorInactiveBg` the inactive pane's, so focus is visible
+//              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).
+// - 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).
+// - Brand:     the identity-bar gradient endpoints — "Tiny" stays blue, "Cmd"
+//              runs gold to saturated orange.
+
+// Constant: DARK
+// Night-blue palette with gold accents: deep blue surfaces and borders,
+// gold for focus and primary accents, saturated orange for marks, purple for
+// devices and tips.
+const DARK = {
+	// Surfaces
+	surfaceBg: "#0d1526",
+	overlayBg: "#111b31",
+	mutedBg: "#1c2a4d",
+	cursorBg: "#274a9e",
+	cursorInactiveBg: "#1b2a51",
+	selectionBg: "#2b3f78",
+	// Text
+	textFg: "#e6ecff",
+	textSecondaryFg: "#8fa3d9",
+	textHeadingFg: "#ffffff",
+	// Borders
+	borderSecondaryFg: "#33508f",
+	borderSecondaryActiveFg: "#f0b429",
+	borderPrimaryFg: "#3d5590",
+	borderPrimaryActiveFg: "#ffc233",
+	// Accent
+	accentFg: "#ffc233",
+	accentBg: "#4a3a14",
+	accentSecondaryFg: "#ff7a1a",
+	accentSecondaryBg: "#4a2a0c",
+	// Semantics
+	errorFg: "#ff4d5e",
+	errorBg: "#4a1526",
+	warningFg: "#ffb020",
+	warningBg: "#47320d",
+	tipFg: "#a78bfa",
+	tipBg: "#2e2352",
+	// Content
+	fileFg: "#e6ecff",
+	linkFg: "#4fc3ff",
+	devFg: "#b48eff",
+	dirFg: "#5c8cff",
+	// Brand
+	brandTinyFrom: "#4088ff",
+	brandTinyTo: "#7cd0ff",
+	brandCmdFrom: "#ffc233",
+	brandCmdTo: "#ff7a1a",
+}
+
+// Constant: LIGHT
+// The same palette tuned for light terminal backgrounds: deeper, saturated
+// hues that hold their weight on white — navy structure, dark gold accents,
+// burnt orange marks, violet devices and tips.
+const LIGHT = {
+	// Surfaces
+	surfaceBg: "#e8ecf8",
+	overlayBg: "#e8ecf8",
+	mutedBg: "#d3dbf2",
+	cursorBg: "#2f56b8",
+	cursorInactiveBg: "#c6d1ee",
+	selectionBg: "#c9d5f4",
+	// Text
+	textFg: "#101a33",
+	textSecondaryFg: "#495785",
+	textHeadingFg: "#0a1130",
+	// Borders
+	borderSecondaryFg: "#9aabd6",
+	borderSecondaryActiveFg: "#926000",
+	borderPrimaryFg: "#8c9cc9",
+	borderPrimaryActiveFg: "#a06a00",
+	// Accent
+	accentFg: "#926000",
+	accentBg: "#dbe4fb",
+	accentSecondaryFg: "#c2410c",
+	accentSecondaryBg: "#fbdcc2",
+	// Semantics
+	errorFg: "#d3234a",
+	errorBg: "#fbd4dd",
+	warningFg: "#b45309",
+	warningBg: "#fce9c8",
+	tipFg: "#6d28d9",
+	tipBg: "#e6ddfb",
+	// Content
+	fileFg: "#101a33",
+	linkFg: "#0369a1",
+	devFg: "#7c3aed",
+	dirFg: "#1d4ed8",
+	// Brand
+	brandTinyFrom: "#1d4ed8",
+	brandTinyTo: "#3b82f6",
+	brandCmdFrom: "#a16207",
+	brandCmdTo: "#ea580c",
+}
+
+// Constant: MONO
+// No color at all: the terminal's own foreground/background. State is carried
+// by markers (`>`, `*`, `[`, `]`, `▸`) and the selected-row background.
+const MONO = {
+	surfaceBg: undefined,
+	overlayBg: undefined,
+	mutedBg: undefined,
+	cursorBg: undefined,
+	cursorInactiveBg: undefined,
+	selectionBg: undefined,
+	textFg: undefined,
+	textSecondaryFg: undefined,
+	textHeadingFg: undefined,
+	borderSecondaryFg: undefined,
+	borderSecondaryActiveFg: undefined,
+	borderPrimaryFg: undefined,
+	borderPrimaryActiveFg: undefined,
+	accentFg: undefined,
+	accentBg: undefined,
+	accentSecondaryFg: undefined,
+	accentSecondaryBg: undefined,
+	errorFg: undefined,
+	errorBg: undefined,
+	warningFg: undefined,
+	warningBg: undefined,
+	tipFg: undefined,
+	tipBg: undefined,
+	fileFg: undefined,
+	linkFg: undefined,
+	devFg: undefined,
+	dirFg: undefined,
+	brandTinyFrom: undefined,
+	brandTinyTo: undefined,
+	brandCmdFrom: undefined,
+	brandCmdTo: undefined,
+}
+
+// Function: resolveTheme
+// Picks the palette for `environment` (defaults to `process.env`).
+function resolveTheme(environment = globalThis.process?.env ?? {}) {
+	const name = environment.TCMD_THEME
+	if (name === "light") return LIGHT
+	if (name === "dark") return DARK
+	if (name === "mono") return MONO
+	if (environment.NO_COLOR !== undefined && environment.NO_COLOR !== "") return MONO
+	if (environment.TERM === "dumb") return MONO
+	return DARK
+}
+
+const tuiTheme = resolveTheme()
+
+export { DARK, LIGHT, MONO, resolveTheme, tuiTheme }
+
+// EOF

package/src/js/tcmd/vendor/fzy.js

@@ -0,0 +1,243 @@
+// Project: TinyCommand
+// Vendored dependency
+//
+// Module: tcmd/vendor/fzy
+// fzy.js — a JavaScript port of fzy's fuzzy finder scoring algorithm.
+//
+// Source: https://github.com/jhawthorn/fzy.js (index.js), version 0.4.1
+// Author: John Hawthorn
+// License: MIT
+//
+// Vendored verbatim (only this header was added) so TinyCommand's pane filter
+// can score fuzzy matches without adding a runtime dependency. `score` and
+// `positions` require a matching needle/haystack: gate them with `hasMatch`.
+//
+// MIT License
+//
+// Copyright (c) 2014 John Hawthorn
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+var SCORE_MIN = -Infinity;
+var SCORE_MAX = Infinity;
+
+var SCORE_GAP_LEADING = -0.005
+var SCORE_GAP_TRAILING = -0.005
+var SCORE_GAP_INNER = -0.01
+var SCORE_MATCH_CONSECUTIVE = 1.0
+var SCORE_MATCH_SLASH = 0.9
+var SCORE_MATCH_WORD = 0.8
+var SCORE_MATCH_CAPITAL = 0.7
+var SCORE_MATCH_DOT = 0.6
+
+function islower(s) {
+	return s.toLowerCase() === s;
+}
+
+function isupper(s) {
+	return s.toUpperCase() === s;
+}
+
+function precompute_bonus(haystack) {
+	/* Which positions are beginning of words */
+	var m = haystack.length;
+	var match_bonus = new Array(m);
+
+	var last_ch = '/';
+	for (var i = 0; i < m; i++) {
+		var ch = haystack[i];
+
+		if (last_ch === '/') {
+			match_bonus[i] = SCORE_MATCH_SLASH;
+		} else if (last_ch === '-' || last_ch === '_' || last_ch === ' ') {
+			match_bonus[i] = SCORE_MATCH_WORD;
+		} else if (last_ch === '.') {
+			match_bonus[i] = SCORE_MATCH_DOT;
+		} else if (islower(last_ch) && isupper(ch)) {
+			match_bonus[i] = SCORE_MATCH_CAPITAL;
+		} else {
+			match_bonus[i] = 0;
+		}
+
+		last_ch = ch;
+	}
+
+	return match_bonus;
+}
+
+function compute(needle, haystack, D, M) {
+	var n = needle.length;
+	var m = haystack.length;
+
+	var lower_needle = needle.toLowerCase();
+	var lower_haystack = haystack.toLowerCase();
+
+	var match_bonus = precompute_bonus(haystack, match_bonus);
+
+	/*
+	 * D[][] Stores the best score for this position ending with a match.
+	 * M[][] Stores the best possible score at this position.
+	 */
+
+	for (var i = 0; i < n; i++) {
+		D[i] = new Array(m);
+		M[i] = new Array(m);
+
+		var prev_score = SCORE_MIN;
+		var gap_score = i === n - 1 ? SCORE_GAP_TRAILING : SCORE_GAP_INNER;
+
+		for (var j = 0; j < m; j++) {
+			if (lower_needle[i] === lower_haystack[j]) {
+				var score = SCORE_MIN;
+				if (!i) {
+					score = (j * SCORE_GAP_LEADING) + match_bonus[j];
+				} else if (j) { /* i > 0 && j > 0*/
+					score = Math.max(
+						M[i - 1][j - 1] + match_bonus[j],
+
+						/* consecutive match, doesn't stack with match_bonus */
+						D[i - 1][j - 1] + SCORE_MATCH_CONSECUTIVE);
+				}
+				D[i][j] = score;
+				M[i][j] = prev_score = Math.max(score, prev_score + gap_score);
+			} else {
+				D[i][j] = SCORE_MIN;
+				M[i][j] = prev_score = prev_score + gap_score;
+			}
+		}
+	}
+}
+
+function score(needle, haystack) {
+	var n = needle.length;
+	var m = haystack.length;
+
+	if (!n || !m)
+		return SCORE_MIN;
+
+	if (n === m) {
+		/* Since this method can only be called with a haystack which
+		 * matches needle. If the lengths of the strings are equal the
+		 * strings themselves must also be equal (ignoring case).
+		 */
+		return SCORE_MAX;
+	}
+
+	if (m > 1024) {
+		/*
+		 * Unreasonably large candidate: return no score
+		 * If it is a valid match it will still be returned, it will
+		 * just be ranked below any reasonably sized candidates
+		 */
+		return SCORE_MIN;
+	}
+
+	var D = new Array(n);
+	var M = new Array(n);
+
+	compute(needle, haystack, D, M)
+
+	return M[n - 1][m - 1];
+}
+
+function positions(needle, haystack) {
+	var n = needle.length;
+	var m = haystack.length;
+
+	var positions = new Array(n);
+
+	if (!n || !m)
+		return positions;
+
+	if (n === m) {
+		for (var i = 0; i < n; i++)
+			positions[i] = i;
+		return positions;
+	}
+
+	if (m > 1024) {
+		return positions;
+	}
+
+	var D = new Array(n);
+	var M = new Array(n);
+
+	compute(needle, haystack, D, M)
+
+	/* backtrack to find the positions of optimal matching */
+	var match_required = false;
+
+	for (var i = n - 1, j = m - 1; i >= 0; i--) {
+		for (; j >= 0; j--) {
+			/*
+			 * There may be multiple paths which result in
+			 * the optimal weight.
+			 *
+			 * For simplicity, we will pick the first one
+			 * we encounter, the latest in the candidate
+			 * string.
+			 */
+			if (D[i][j] !== SCORE_MIN &&
+			    (match_required || D[i][j] === M[i][j])) {
+				/* If this score was determined using
+				 * SCORE_MATCH_CONSECUTIVE, the
+				 * previous character MUST be a match
+				 */
+				match_required =
+				    i && j &&
+				    M[i][j] === D[i - 1][j - 1] + SCORE_MATCH_CONSECUTIVE;
+				positions[i] = j--;
+				break;
+			}
+		}
+	}
+
+	return positions;
+}
+
+function hasMatch(needle, haystack) {
+  needle = needle.toLowerCase()
+  haystack = haystack.toLowerCase()
+  var l = needle.length
+  for (var i = 0, j = 0; i < l; i += 1) {
+    j = haystack.indexOf(needle[i], j) + 1
+    if (j === 0) return false
+  }
+  return true
+}
+
+export {
+	/* constants */
+	SCORE_MIN,
+	SCORE_MAX,
+
+	SCORE_GAP_LEADING,
+	SCORE_GAP_TRAILING,
+	SCORE_GAP_INNER,
+	SCORE_MATCH_CONSECUTIVE,
+	SCORE_MATCH_SLASH,
+	SCORE_MATCH_WORD,
+	SCORE_MATCH_CAPITAL,
+	SCORE_MATCH_DOT,
+
+	/* functions */
+	score,
+	positions,
+	hasMatch
+}

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

@@ -0,0 +1,154 @@
+// Project: TinyCommand
+// Author:  Sebastien Pierre
+// License: BSD
+// Created: 2026-09-27
+
+// Module: tcmd/web/app
+// Binds the shared App controller (`components/App.js`) to the web layout
+// (`components/App.html`) and to the select.js `ui` runtime. Mirrors
+// `tcmd/tui/app.js` for the DOM backend.
+
+import { ui } from "select/ui"
+import { 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 { webTheme } from "./theme.js"
+
+// Map DOM key names to the core keymap chord names.
+const KEY_NAMES = {
+	" ": "space",
+	arrowdown: "down",
+	arrowleft: "left",
+	arrowright: "right",
+	arrowup: "up",
+	enter: "return",
+}
+
+function normalizeKey(event) {
+	const raw = `${event?.key ?? ""}`.toLowerCase()
+	const name = KEY_NAMES[raw] ?? raw
+	// Terminals deliver shifted punctuation (`:`, `!`) as the character
+	// itself, so the keymap matches those without the shift modifier; named
+	// keys (Tab, arrows) and letters keep their shift state.
+	const isPunctuation = name.length === 1 && !/[a-z0-9]/.test(name)
+	const shift = Boolean(event?.shiftKey) && !isPunctuation
+	return {
+		name,
+		ctrl: Boolean(event?.ctrlKey),
+		meta: Boolean(event?.metaKey),
+		shift,
+	}
+}
+
+// Web-only view wiring for App: forwards root data into child components.
+// 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.
+function webViewBehaviors() {
+	return {
+		headerView: (_self, data) => ({ host: data.appHost, path: data.appPath }),
+		bookmarkView: (_self, data) => ({
+			items: data.bookmarkItems,
+			mode: data.bookmarkMode,
+			open: data.bookmarkOpen,
+			query: data.bookmarkQuery,
+			selected: data.bookmarkIndex,
+			target: data.bookmarkTarget,
+		}),
+		commandBarView: (_self, data) => ({
+			items: data.commandBarItems,
+			leftError: data.leftError,
+			notice: data.notice,
+			rightError: data.rightError,
+		}),
+		confirmView: (_self, data) => ({ confirm: data.confirm }),
+		leftCrumbsView: (_self, data) => ({
+			segments: data.leftSegments,
+			paneId: data.leftId,
+		}),
+		leftDetailView: (_self, data) => ({ entry: data.leftEntry, marked: data.leftMarked }),
+		leftFilterView: (_self, data) => ({
+			query: data.leftFilter,
+			paneId: data.leftId,
+			filtering: data.filtering,
+			entries: data.leftEntries,
+		}),
+		leftLabelView: (_self, data) => ({ paneId: data.leftId, active: data.active }),
+		leftListView: (_self, data) => ({
+			entries: data.leftEntries,
+			cursor: data.leftCursor,
+			marked: data.leftMarked,
+			paneId: data.leftId,
+		}),
+		leftPaneClass: (_self, data) => (unwrap(data.active) === "left" ? webTheme.activeClass : null),
+		leftSummaryView: (_self, data) => ({
+			entries: data.leftEntries,
+			disk: data.leftDisk,
+		}),
+		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,
+		}),
+		previewView: (_self, data) => ({
+			preview: data.preview,
+			show: data.showPreview,
+		}),
+		rightCrumbsView: (_self, data) => ({
+			segments: data.rightSegments,
+			paneId: data.rightId,
+		}),
+		rightDetailView: (_self, data) => ({ entry: data.rightEntry, marked: data.rightMarked }),
+		rightFilterView: (_self, data) => ({
+			query: data.rightFilter,
+			paneId: data.rightId,
+			filtering: data.filtering,
+			entries: data.rightEntries,
+		}),
+		rightLabelView: (_self, data) => ({ paneId: data.rightId, active: data.active }),
+		rightListView: (_self, data) => ({
+			entries: data.rightEntries,
+			cursor: data.rightCursor,
+			marked: data.rightMarked,
+			paneId: data.rightId,
+		}),
+		rightPaneClass: (_self, data) => (unwrap(data.active) === "right" ? webTheme.activeClass : null),
+		rightSummaryView: (_self, data) => ({
+			entries: data.rightEntries,
+			disk: data.rightDisk,
+		}),
+	}
+}
+
+// Function: createWebApp
+// Builds the root App component for `session` on the web presentation.
+function createWebApp(session) {
+	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"))
+	}
+	return ui(appHtml)
+		.init(appInit(session))
+		.does({
+			...appBehaviors({
+				normalizeKey,
+				quit: (self) => self.unmount?.(),
+			}),
+			...webViewBehaviors(),
+		})
+		.sub(appEvents({ quit: (self) => self.unmount?.() }))
+}
+
+export { createWebApp, normalizeKey }
+
+// EOF