move components/client to rt (runtime) directory

src/rt/elements/create.ts

@@ -0,0 +1,9 @@
+function create<T extends keyof HTMLElementTagNameMap>(element: T, className?: string): HTMLElementTagNameMap[T] {
+	const new_element = document.createElement(element)
+	if (className) {
+		new_element.className = className
+	}
+	return new_element
+}
+
+export default create

src/rt/elements/prompt.ts

@@ -0,0 +1,66 @@
+import { cyan, green } from "../shell/color"
+import { get_working_dir_name } from "../shell/fs/fn"
+
+import create from "./create"
+
+const userAgent = navigator.userAgent
+const browser_name_fallible = userAgent.match(/Firefox.\d+[\d.\d]+|Chrome.\d+[\d.\d]+/gm)?.map(f => f.split("/")[0])
+let browser_name = "unknown"
+if (browser_name_fallible) {
+	browser_name = browser_name_fallible[0] === "Firefox" ? "gecko" : "chromium"
+}
+
+interface Ps1Prompt {
+	readonly body: HTMLDivElement,
+	readonly input: HTMLInputElement
+}
+interface Inputs {
+	old?: HTMLInputElement,
+	new?: HTMLInputElement
+}
+let inputs: Inputs = {
+	old: undefined,
+	new: undefined
+}
+
+function ps1_element(user: HTMLSpanElement, dir: HTMLSpanElement) {
+	const display = create("p")
+	display.appendChild(user)
+	display.append(`@${browser_name}`)
+	display.appendChild(dir)
+	display.append("> ")
+	return display
+}
+
+function working_dir() {
+	const dir_name = get_working_dir_name()
+	return dir_name === "user" ? "~" : dir_name
+}
+
+function working_dir_element() {
+	const user = cyan("user")
+	const dir = green(" "+working_dir())
+	return ps1_element(user, dir)
+}
+
+export default function prompt(): Ps1Prompt {
+	const prompt_div = create("div", "shell-prompt")
+	const ps1 = working_dir_element()
+	const input = create("input", "shell-ps1")
+	input.type = "text"
+	input.spellcheck = false
+
+	inputs.old = inputs.new
+	if (inputs.old) {
+		inputs.old.disabled = true
+	}
+	inputs.new = input
+
+	prompt_div.appendChild(ps1)
+	prompt_div.appendChild(input)
+
+	return {
+		body: prompt_div,
+		input: input
+	}
+}

src/rt/elements/stdout.ts

@@ -0,0 +1,43 @@
+import { bold } from "../shell/color";
+
+import create from "./create";
+
+function stdout_grid(left: string[], right: string[]) {
+	const root = create("div", "stdout-horizontal")
+	const container_left = create("div", "stdout-vertical")
+	const container_right = create("div", "stdout-vertical")
+
+	left.forEach(str => container_left.appendChild(stdout_bold(str)))
+	right.forEach(str => container_right.appendChild(stdout(str)))
+
+	root.appendChild(container_left)
+	root.appendChild(container_right)
+	return root
+}
+
+function stdout_horizontal(strs: string[]) {
+	const p = create("p")
+	strs.forEach((str, i) => {
+		const tab = i !== strs.length-1 ? "\t" : ""
+		p.innerText+=str+tab
+	})
+	return p
+}
+
+function stdout_bold(str: string) {
+	const p = stdout("")
+	p.appendChild(bold(str))
+	return p
+}
+
+export default function stdout(str: string) {
+	const p = create("p")
+	p.innerText = str
+	return p
+}
+
+export {
+	stdout_grid,
+	stdout_horizontal,
+	stdout_bold
+}