wrap indicator for grid

src/rt/elements/create.ts

@@ -1,9 +1,7 @@
-function create<T extends keyof HTMLElementTagNameMap>(element: T, className?: string): HTMLElementTagNameMap[T] {
+export default 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/layout.ts

@@ -0,0 +1,21 @@
+import create from "./create"
+
+const layout = (type: string) => create("div", type)
+
+function horizontal_wrap() {
+	return layout("stdout-horizontal-wrap")
+}
+
+function horizontal() {
+	return layout("stdout-horizontal")
+}
+
+function vertical() {
+	return layout("stdout-vertical")
+}
+
+export {
+	horizontal_wrap,
+	horizontal,
+	vertical
+}

src/rt/elements/stdout.ts

@@ -1,18 +1,29 @@
 import { bold } from "../shell/color";
+import { horizontal, vertical } from "./layout";
 
 import create from "./create";
+import wrapindicator from "./wrapindicator";
 
-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")
+function stdout_grid<T extends HTMLElement>(left: string[], right: string[], header?: T) {
+	const wrap_indicator = wrapindicator()
+	const container_left = vertical()
+	const container_right = vertical()
 
-	left.forEach(str => container_left.appendChild(stdout_bold(str)))
-	right.forEach(str => container_right.appendChild(stdout(str)))
+	container_left.append(...left.map(str => stdout_bold(str)))
+	container_right.append(...right.map(str => stdout(str)))
 
-	root.appendChild(container_left)
-	root.appendChild(container_right)
-	return root
+	if (header) {
+		const container_right_header = vertical()
+		const help_container = horizontal()
+		help_container.append(container_left, container_right)
+		container_right_header.append(header, help_container)
+		wrap_indicator.appendChild(container_right_header)
+	} else {
+		const container = horizontal()
+		container.append(container_left, container_right)
+		wrap_indicator.appendChild(container)
+	}
+	return wrap_indicator
 }
 
 function stdout_horizontal(strs: string[]) {

src/rt/elements/wrapindicator.ts

@@ -0,0 +1,9 @@
+import { horizontal_wrap } from "./layout";
+
+import create from "./create";
+
+export default function wrapindicator() {
+	const wi_layout = horizontal_wrap()
+	wi_layout.appendChild(create("div", "wrap-indicator"))
+	return wi_layout
+}

src/rt/shell/command/subcommand.ts

@@ -11,20 +11,21 @@ interface SubCommands {
 	[index: string]: SubCommandAction,
 }
 
+function subcommand_help(data: SubCommands, cmd_description: string, term: Term) {
+	const subcmd_descriptions: string[] = []
+	Object.values(data).forEach(sub_cmd => subcmd_descriptions.push(sub_cmd.description))
+
+	term.appendChild(stdout_grid(Object.keys(data), subcmd_descriptions, stdout(cmd_description)))
+}
+
 const SubCommand = class {
 	public data: SubCommands //data? less goo!
 
-	constructor(description: string) {
+	constructor(cmd_description: string) {
 		this.data = {}
 		this.data.help = {} as SubCommandAction
 		this.data.help.description = "Display help info"
-		this.data.help.inner = (term: Term, _args: Args) => {
-			const descriptions: string[] = []
-			Object.values(this.data).forEach(sub_cmd => descriptions.push(sub_cmd.description))
-
-			term.appendChild(stdout(description))
-			term.appendChild(stdout_grid(Object.keys(this.data), descriptions))
-		}
+		this.data.help.inner = (term: Term, _args: Args) => subcommand_help(this.data, cmd_description, term)
 	}
 
 	public process(term: Term, args: Args) {