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
+}