refactor: use vanilla rendering

src/utils/math.ts

@@ -0,0 +1,7 @@
+export const clamp = (v: number, min: number, max: number): number =>
+  Math.min(Math.max(min, v), max);
+
+export const clamp01 = (v: number): number => clamp(v, 0, 1);
+
+export const floorAll = (...xs: Array<number>): Array<number> =>
+  xs.map(Math.floor);

src/utils/terminal/canvas.tsx

@@ -0,0 +1,124 @@
+import { type ReactNode } from "react";
+import { floorAll } from "../math";
+import { type CellStyle, type Cell } from "./cell";
+import { type TerminalElement } from "./element";
+
+export class TerminalCanvas implements TerminalElement {
+  public readonly data: Array<Array<Cell>>;
+
+  constructor(
+    public readonly width: number,
+    public readonly height: number,
+    public readonly defaultStyle: CellStyle = {},
+  ) {
+    [this.width, this.height] = floorAll(this.width, this.height);
+
+    this.data = new Array(this.height).fill(0).map(() =>
+      new Array<Cell>(this.width).fill({
+        char: " ",
+        ...defaultStyle,
+      }),
+    );
+  }
+
+  apply(x: number, y: number, cell: Partial<Cell>): void {
+    [x, y] = floorAll(x, y);
+
+    if (x < 0 || x >= this.width || y < 0 || y >= this.height) return;
+
+    this.data[y][x] = {
+      ...this.data[y][x],
+      ...cell,
+    };
+  }
+
+  write(x: number, y: number, text: string, style: CellStyle = {}): void {
+    [x, y] = floorAll(x, y);
+
+    for (let i = 0; i < text.length; i++) {
+      this.apply(x + i, y, {
+        char: text[i],
+        ...style,
+      });
+    }
+  }
+
+  writeFilter(
+    x: number,
+    y: number,
+    text: string,
+    filter: (cell: Cell) => Cell,
+  ): void {
+    [x, y] = floorAll(x, y);
+
+    for (let i = 0; i < text.length; i++) {
+      this.apply(x + i, y, {
+        ...filter(this.data[y][x + i]),
+        char: text[i],
+      });
+    }
+  }
+
+  writeElement(canvas: TerminalElement, dx: number, dy: number): void {
+    [dx, dy] = floorAll(dx, dy);
+
+    for (let y = 0; y < canvas.height; y++) {
+      for (let x = 0; x < canvas.width; x++) {
+        this.apply(dx + x, dy + y, canvas.data[y][x]);
+      }
+    }
+  }
+
+  subCanvas(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ): TerminalCanvas {
+    [x, y, width, height] = floorAll(x, y, width, height);
+
+    const canvas = new TerminalCanvas(width, height);
+    for (let cy = 0; cy < height; cy++) {
+      for (let cx = 0; cx < width; cx++) {
+        canvas.apply(cx, cy, this.data[y + cy][x + cx]);
+      }
+    }
+
+    return canvas;
+  }
+
+  render(): Array<ReactNode> {
+    const nodes: Array<ReactNode> = [];
+
+    for (let y = 0; y < this.height; y++) {
+      for (let x = 0; x < this.width; x++) {
+        const cell = this.data[y][x];
+        /*
+        const span = document.createElement("span");
+        span.innerHTML = cell.char;
+        span.style.color = cell.foreground ?? "unset";
+        span.style.background = cell.background ?? "unset";
+        span.style.fontWeight = String(cell.fontWeight ?? "unset");
+
+        target.appendChild(span);
+        */
+        nodes.push(
+          <span
+            key={`${x}-${y}`}
+            style={{
+              color: cell.foreground,
+              background: cell.background,
+              fontWeight: cell.fontWeight,
+            }}
+          >
+            {cell.char}
+          </span>,
+        );
+      }
+
+      nodes.push(<br key={y} />);
+    }
+
+    return nodes;
+  }
+}

src/utils/terminal/cell.ts

@@ -0,0 +1,9 @@
+export type Cell = {
+  char: string;
+} & CellStyle;
+
+export type CellStyle = Partial<{
+  foreground: string;
+  background: string;
+  fontWeight: number;
+}>;

src/utils/terminal/element.ts

@@ -0,0 +1,7 @@
+import { type Cell } from "./cell";
+
+export interface TerminalElement {
+  readonly data: Array<Array<Cell>>;
+  readonly width: number;
+  readonly height: number;
+}

src/utils/terminal/elements/box.ts

@@ -0,0 +1,38 @@
+import { type Cell, type CellStyle } from "../cell";
+import { TerminalCanvas } from "../canvas";
+import { type TerminalElement } from "../element";
+
+export class TerminalBoxElement implements TerminalElement {
+  public readonly data: Array<Array<Cell>>;
+
+  constructor(
+    public readonly width: number,
+    public readonly height: number,
+    style: CellStyle = {},
+  ) {
+    const canvas = new TerminalCanvas(width, height, style);
+
+    if (width == 1 && height > 1) {
+      for (let y = 0; y < height - 1; y++) {
+        canvas.write(0, y, "│");
+      }
+    } else if (height == 1 && width > 1) {
+      canvas.write(0, 0, "─".repeat(width - 2));
+    } else {
+      canvas.write(0, 0, "┌");
+      canvas.write(width - 1, 0, "┐");
+      canvas.write(0, height - 1, "└");
+      canvas.write(width - 1, height - 1, "┘");
+
+      canvas.write(1, 0, "─".repeat(width - 2));
+      canvas.write(1, height - 1, "─".repeat(width - 2));
+
+      for (let y = 1; y < height - 1; y++) {
+        canvas.write(0, y, "│");
+        canvas.write(width - 1, y, "│");
+      }
+    }
+
+    this.data = canvas.data;
+  }
+}

src/utils/terminal/theme.ts

@@ -0,0 +1,12 @@
+export const theme = {
+  black: "#45475a",
+  red: "#f38ba8",
+  green: "#a6e3a1",
+  yellow: "#f9e2af",
+  blue: "#89bafa",
+  magenta: "#f5c2e7",
+  cyan: "#94e2d5",
+  white: "#bac2de",
+  grey: "#585B70",
+  lightGrey: "#a6adc8",
+};