@promptctl/rich-js 0.17.0 → 0.18.0

package/README.md

@@ -24,7 +24,7 @@ Most of the library comes from the package name itself — `Console`, `Table`, `
 |---|---|---|---|
 | `@promptctl/rich-js/widgets` | Button, Checkbox, Toggle, TextInput, Dropdown, Slider, and the screen that mounts them | `mobx` | Carries a third-party runtime dependency of its own — MobX, for widget state |
 | `@promptctl/rich-js/template-bindings` | The styling vocabulary as Go-template functions, so styled text can be authored as a template | `@promptctl/go-template-js` | Carries a third-party runtime dependency of its own — the Go-template engine, for parsing and evaluating the templates |
-| `@promptctl/rich-js/host` | `TerminalHost`, `BrowserTerminalHost`, `hostStream` — the seam between rendering and a terminal | Nothing | A program that just wants to write bytes through a host shouldn't pay for the widget set to do it |
+| `@promptctl/rich-js/host` | `TerminalHost`, `BrowserTerminalHost`, `hostEnvironment` — the seam between rendering and a terminal | Nothing | A program that just wants to write bytes through a host shouldn't pay for the widget set to do it |
 | `@promptctl/rich-js/node/save`, `/node/prompt`, `/node/traceback`, `/node/terminal-host` | File export, readline input, the crash handler, and the node TTY host | Nothing | Each one reads node built-ins, and keeping them off the main entry point is what keeps that entry point browser-safe |
 
 Those two peer dependencies are yours to install — `npm install @promptctl/rich-js` deliberately fetches neither, because a program that prints a table shouldn't acquire a state library or a template engine to do it. Add the ones you need:
@@ -293,45 +293,31 @@ installTraceback();
 Everything above draws once and returns. Widgets stay on screen and respond — a button that highlights under the cursor, a text field with a cursor you can move, a dropdown you filter by typing. They come from the `widgets` subpath and need MobX installed alongside the package (see [Entry points](#entry-points)).
 
 ```typescript
-import { Button, TextInput, DefaultScreen, EventRouter } from "@promptctl/rich-js/widgets";
+import { Group } from "@promptctl/rich-js";
+import { Button, TextInput, WidgetApp } from "@promptctl/rich-js/widgets";
 import { NodeTerminalHost } from "@promptctl/rich-js/node/terminal-host";
 
-const host = new NodeTerminalHost();
-const screen = new DefaultScreen({ host });
-const router = new EventRouter({ screen, host });
-
 const name = new TextInput({ placeholder: "your name" });
 const submit = new Button({ label: "Submit", variant: "primary" });
+const form = new Group(name, submit);
 
-const quit = (): void => {
-  router.stop();
-  screen.stop();
-  host.write("\n");
-};
+const app = new WidgetApp({ host: new NodeTerminalHost(), surface: "alternate", view: () => form });
 
-submit.onSubmit(() => {
-  quit();
-  host.write(`hello, ${name.value}\n`);
-  process.exit(0);
-});
+submit.onSubmit(() => app.stop());
 
 // Raw mode swallows Ctrl+C, so the app has to handle it itself.
-router.onKey(
+app.onKey(
   (event) => {
-    if (event.ctrl && event.key === "c") {
-      quit();
-      process.exit(0);
-    }
+    if (event.ctrl && event.key === "c") app.stop();
   },
   { priority: "high" },
 );
 
-screen.mount(name, submit);
-screen.start();
-router.start();
+await app.run();
+console.log(`hello, ${name.value}`);
 ```
 
-`DefaultScreen` builds a focus manager when you don't pass one, so the `TextInput` has focus before the user touches anything and Tab moves between the two widgets. The screen re-renders through a MobX reaction: change a widget's state and the frame redraws itself, with no explicit repaint call anywhere. See [docs/widgets.md](docs/widgets.md) for the full widget set, key dispatch, layout placements, and how to write your own.
+Widgets go anywhere a renderable goes — a `Group`, a `Panel`, a `Layout` pane — and the app finds them on the frame it paints. The `TextInput` has focus before the user touches anything, Tab moves between the two widgets in the order they are drawn, and a change to a widget's state repaints with no explicit call. `app.stop()` — or a crash, or a signal — hands the terminal back. See [docs/widgets.md](docs/widgets.md) for the full widget set, key dispatch, layout, and how to write your own.
 
 </details>
 
@@ -401,6 +387,7 @@ npm run demo
 | `npm run themes-and-color-studio` | themes-and-color-studio | A printed tour of colours, palettes, bundled themes, and contrast. Prints once and exits; set `EXPORT_HTML=out.html` to save it as HTML too. |
 | `npm run strip` | rich-strip | Every built-in `Joiner`, printed side by side. Prints once and exits. |
 | `npm run markup-plugins` | rich-markup-plugins | Custom markup tags registered through `MarkupRegistry`. Prints once and exits. |
+| `npm run viewport` | rich-viewport | A cursor walking a list taller than its window, kept in view by `Viewport.ensureVisible`. |
 
 `Ctrl-C` quits any demo that stays running.
 
@@ -410,5 +397,5 @@ npm run demo
 |---|---|
 | `NO_COLOR` | Disable all color (hyperlinks still print) |
 | `FORCE_COLOR` | Enable color regardless of `TERM` |
-| `TERM=dumb` | Disable color and style |
+| `TERM=dumb` | Disable color, style, and hyperlinks |
 | `COLUMNS` / `LINES` | Override terminal dimensions |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@promptctl/rich-js",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Rich text and beautiful formatting in the terminal — a TypeScript port of Python's Rich",
   "type": "module",
   "sideEffects": false,
@@ -66,6 +66,7 @@
     "demo:build": "tsc -p tsconfig.demo.json",
     "sessions": "tsc -p tsconfig.demo.json && node dist-demo/examples/claude-sessions/index.js",
     "strip": "tsc -p tsconfig.demo.json && node dist-demo/examples/rich-strip/index.js",
+    "viewport": "tsc -p tsconfig.demo.json && node dist-demo/examples/rich-viewport/index.js",
     "markup-plugins": "tsc -p tsconfig.demo.json && node dist-demo/examples/rich-markup-plugins/index.js",
     "demo-inputs": "tsc -p tsconfig.demo.json && node dist-demo/examples/rich-config/index.js",
     "demo:dropdown": "tsc -p tsconfig.demo.json && node dist-demo/examples/dropdown-demo/index.js",
@@ -96,9 +97,12 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.63.0",
-    "@promptctl/go-template-js": "^0.9.0",
+    "@promptctl/go-template-js": "^0.10.0",
+    "@types/markdown-it": "^14.2.0",
     "@types/node": "^26.5.1",
     "@types/semver": "^7.8.0",
+    "markdown-it": "^14.3.2",
+    "markdown-it-container": "^4.0.0",
     "mobx": "^7.0.3",
     "semver": "^7.8.5",
     "strip-ansi": "^7.2.0",
@@ -111,7 +115,7 @@
     "string-width": "^8.2.2"
   },
   "peerDependencies": {
-    "@promptctl/go-template-js": "^0.9.0",
+    "@promptctl/go-template-js": "^0.10.0",
     "mobx": "^7.0.3"
   },
   "peerDependenciesMeta": {

package/dist/core/box.d.ts

@@ -1,144 +0,0 @@
-/**
- * Box-drawing character sets for borders and table grids.
- *
- * A style is declared as an 8x4 character grid — one line per row a table can
- * draw, one column per position within that row:
- *
- *     ┌─┬┐   top border
- *     │ ││   header content
- *     ├─┼┤   header separator
- *     │ ││   body content
- *     ├─┼┤   row separator
- *     ├─┼┤   footer separator
- *     │ ││   footer content
- *     └─┴┘   bottom border
- *
- * [LAW:one-source-of-truth] The grid is the shape the reference implementation
- * (Python Rich's `box.py`) publishes these glyphs in, so a constant below can
- * be diffed against it character for character. The eighteen named fields this
- * replaced were a second, differently-shaped map of the same territory, and it
- * had drifted: seven of the nineteen constants carried wrong glyphs, and the
- * field named `mid` held the reference's line 3 while the reference's `mid_*`
- * is line 4 — so reading the reference name-for-name swapped a separator for a
- * content row. Named row fields are gone for that reason; a row is reached by
- * what it is (`getRow`, `getContentChars`), never by a name that can be
- * mismatched to a line.
- */
-import { Segment } from "./segment.js";
-import type { Style } from "./style.js";
-/** A rule spanning the table: the top and bottom borders, and every separator. */
-export interface EdgeChars {
-    left: string;
-    horizontal: string;
-    cross: string;
-    right: string;
-}
-/**
- * The verticals framing a row of cells. A content line of the grid has no
- * horizontal of its own — its fill column is a placeholder the cells occupy.
- */
-export interface ContentChars {
-    left: string;
-    vertical: string;
-    right: string;
-}
-export type RowLevel = "head" | "row" | "foot" | "mid";
-export interface SubstituteOptions {
-    asciiOnly?: boolean;
-    safe?: boolean;
-}
-export declare class Box {
-    readonly top: EdgeChars;
-    readonly bottom: EdgeChars;
-    private readonly grid;
-    private readonly ascii;
-    private readonly headContent;
-    private readonly headSeparator;
-    private readonly bodyContent;
-    private readonly rowSeparator;
-    private readonly footSeparator;
-    private readonly footContent;
-    /**
-     * [LAW:parse-dont-validate] The one crossing between a grid string and box
-     * glyphs. A `Box` cannot exist without eight rows of four characters, so no
-     * consumer below ever re-checks the shape of the data it reads.
-     */
-    constructor(grid: string);
-    /**
-     * Renders the top border row for given column widths.
-     */
-    getTop(widths: readonly number[], style?: Style, edge?: boolean): Segment[];
-    /**
-     * Renders the separator drawn *above* a row at `level` — the head separator
-     * under the header, the row separator between body rows, the foot separator
-     * above the footer.
-     */
-    getRow(widths: readonly number[], level: RowLevel, style?: Style, edge?: boolean): Segment[];
-    /**
-     * The verticals that frame a content row at `level` — the counterpart to
-     * `getRow`, which draws the separator between two such rows.
-     */
-    getContentChars(level: RowLevel): ContentChars;
-    /**
-     * Renders the bottom border row.
-     */
-    getBottom(widths: readonly number[], style?: Style, edge?: boolean): Segment[];
-    /**
-     * The box to draw with when the platform cannot render this one as written.
-     *
-     * `asciiOnly` gives up a box that spends non-ASCII glyphs for `ASCII`, and
-     * leaves the four already-ASCII styles as they are — a caller that chose
-     * MARKDOWN or ASCII_DOUBLE_HEAD asked for that frame and it is already
-     * drawable, so answering with `ASCII` would trade a frame the terminal
-     * supports for a different one it equally supports. `safe` squares off the
-     * rounded corners a legacy Windows terminal draws as blanks.
-     */
-    substitute(options?: SubstituteOptions): Box;
-    private safeSubstitute;
-    /**
-     * The nearest box that spends no special glyphs on a header — what a table
-     * with `showHeader: false` draws with. A box whose head row already matches
-     * its body is its own answer, so this is the identity for fourteen of the
-     * nineteen shipped styles.
-     *
-     * It stands beside `substitute` rather than joining it because the two ask
-     * unrelated questions: `substitute` asks what the *platform* can draw, this
-     * asks what the *table* contains. Nothing correlates them, so a caller that
-     * wants both wants both, and a shared options bag would only multiply the
-     * combinations either one has to reason about. [LAW:no-mode-explosion]
-     *
-     * [LAW:types-are-the-program] The relation is keyed on the grid, not on
-     * object identity as the reference's dict is. A `Box` is wholly determined by
-     * its grid — that is what the constructor takes and all eight rows derive
-     * from — so two boxes with one grid must answer this alike. Identity keying
-     * would say otherwise the moment a box arrived by any route but the shipped
-     * constant, and `safeSubstitute` above builds exactly such a box: a fresh
-     * instance carrying an unchanged grid.
-     */
-    plainHeaded(): Box;
-    /**
-     * [LAW:dataflow-not-control-flow] Every full-width rule the box can draw is
-     * this one loop; which rule it is arrives as four characters, not a branch.
-     */
-    private getEdge;
-    private getRowChars;
-}
-export declare const ASCII: Box;
-export declare const ASCII2: Box;
-export declare const ASCII_DOUBLE_HEAD: Box;
-export declare const SQUARE: Box;
-export declare const SQUARE_DOUBLE_HEAD: Box;
-export declare const MINIMAL: Box;
-export declare const MINIMAL_HEAVY_HEAD: Box;
-export declare const MINIMAL_DOUBLE_HEAD: Box;
-export declare const SIMPLE: Box;
-export declare const SIMPLE_HEAD: Box;
-export declare const SIMPLE_HEAVY: Box;
-export declare const HORIZONTALS: Box;
-export declare const ROUNDED: Box;
-export declare const HEAVY: Box;
-export declare const HEAVY_EDGE: Box;
-export declare const HEAVY_HEAD: Box;
-export declare const DOUBLE: Box;
-export declare const DOUBLE_EDGE: Box;
-export declare const MARKDOWN: Box;

package/dist/core/box.js

@@ -1,391 +0,0 @@
-/**
- * Box-drawing character sets for borders and table grids.
- *
- * A style is declared as an 8x4 character grid — one line per row a table can
- * draw, one column per position within that row:
- *
- *     ┌─┬┐   top border
- *     │ ││   header content
- *     ├─┼┤   header separator
- *     │ ││   body content
- *     ├─┼┤   row separator
- *     ├─┼┤   footer separator
- *     │ ││   footer content
- *     └─┴┘   bottom border
- *
- * [LAW:one-source-of-truth] The grid is the shape the reference implementation
- * (Python Rich's `box.py`) publishes these glyphs in, so a constant below can
- * be diffed against it character for character. The eighteen named fields this
- * replaced were a second, differently-shaped map of the same territory, and it
- * had drifted: seven of the nineteen constants carried wrong glyphs, and the
- * field named `mid` held the reference's line 3 while the reference's `mid_*`
- * is line 4 — so reading the reference name-for-name swapped a separator for a
- * content row. Named row fields are gone for that reason; a row is reached by
- * what it is (`getRow`, `getContentChars`), never by a name that can be
- * mismatched to a line.
- */
-import { cellLen } from "./cells.js";
-import { Segment } from "./segment.js";
-const GRID_ROWS = 8;
-const GRID_COLUMNS = 4;
-/**
- * A grid a terminal without unicode support can already draw as written.
- *
- * [LAW:one-source-of-truth] Derived from the grid rather than declared per
- * constant the way the reference's `ascii=True` is. A `Box` is wholly its grid,
- * so the grid already answers this; a second, hand-written answer could
- * disagree with it. It also reaches boxes no constant can speak for —
- * `safeSubstitute` builds a fresh `Box` from an edited grid, and a flag carried
- * on the shipped constants would say nothing about that one.
- */
-const ASCII_GRID = /^[\x00-\x7F]*$/;
-/** Corners that a legacy Windows terminal cannot draw, and their square kin. */
-const SAFE_SUBSTITUTIONS = {
-    "╭": "┌",
-    "╮": "┐",
-    "╰": "└",
-    "╯": "┘",
-};
-const edgeOf = (row) => ({
-    left: row[0],
-    horizontal: row[1],
-    cross: row[2],
-    right: row[3],
-});
-const contentOf = (row) => ({
-    left: row[0],
-    vertical: row[2],
-    right: row[3],
-});
-// [LAW:one-type-per-behavior] Box is a single type for all border styles — instances differ by data
-export class Box {
-    top;
-    bottom;
-    grid;
-    ascii;
-    headContent;
-    headSeparator;
-    bodyContent;
-    rowSeparator;
-    footSeparator;
-    footContent;
-    /**
-     * [LAW:parse-dont-validate] The one crossing between a grid string and box
-     * glyphs. A `Box` cannot exist without eight rows of four characters, so no
-     * consumer below ever re-checks the shape of the data it reads.
-     */
-    constructor(grid) {
-        const lines = grid.split("\n");
-        // A row is four characters because `getEdge` indexes the four positions,
-        // and four cells because that is what the terminal draws — a single astral
-        // glyph satisfies the first and breaks every frame the box appears in.
-        // [LAW:single-enforcer] `cellLen` is the cell-width authority.
-        const malformed = lines.length !== GRID_ROWS
-            || lines.some((line) => Array.from(line).length !== GRID_COLUMNS)
-            || lines.some((line) => cellLen(line) !== GRID_COLUMNS);
-        if (malformed) {
-            throw new Error(`A box grid is ${GRID_ROWS} lines of ${GRID_COLUMNS} single-cell `
-                + `characters; got ${lines.length} line(s) measuring `
-                + lines.map((line) => `${Array.from(line).length}/${cellLen(line)}`).join(", ")
-                + " characters/cells");
-        }
-        const rows = lines.map((line) => Array.from(line));
-        this.grid = grid;
-        this.ascii = ASCII_GRID.test(grid);
-        this.top = edgeOf(rows[0]);
-        this.headContent = contentOf(rows[1]);
-        this.headSeparator = edgeOf(rows[2]);
-        this.bodyContent = contentOf(rows[3]);
-        this.rowSeparator = edgeOf(rows[4]);
-        this.footSeparator = edgeOf(rows[5]);
-        this.footContent = contentOf(rows[6]);
-        this.bottom = edgeOf(rows[7]);
-    }
-    /**
-     * Renders the top border row for given column widths.
-     */
-    getTop(widths, style, edge = true) {
-        return this.getEdge(widths, this.top, style, edge);
-    }
-    /**
-     * Renders the separator drawn *above* a row at `level` — the head separator
-     * under the header, the row separator between body rows, the foot separator
-     * above the footer.
-     */
-    getRow(widths, level, style, edge = true) {
-        return this.getEdge(widths, this.getRowChars(level), style, edge);
-    }
-    /**
-     * The verticals that frame a content row at `level` — the counterpart to
-     * `getRow`, which draws the separator between two such rows.
-     */
-    getContentChars(level) {
-        switch (level) {
-            case "head":
-                return this.headContent;
-            // `mid` is a spacer between body rows, so it is framed as one.
-            case "row":
-            case "mid":
-                return this.bodyContent;
-            case "foot":
-                return this.footContent;
-        }
-    }
-    /**
-     * Renders the bottom border row.
-     */
-    getBottom(widths, style, edge = true) {
-        return this.getEdge(widths, this.bottom, style, edge);
-    }
-    /**
-     * The box to draw with when the platform cannot render this one as written.
-     *
-     * `asciiOnly` gives up a box that spends non-ASCII glyphs for `ASCII`, and
-     * leaves the four already-ASCII styles as they are — a caller that chose
-     * MARKDOWN or ASCII_DOUBLE_HEAD asked for that frame and it is already
-     * drawable, so answering with `ASCII` would trade a frame the terminal
-     * supports for a different one it equally supports. `safe` squares off the
-     * rounded corners a legacy Windows terminal draws as blanks.
-     */
-    substitute(options = {}) {
-        if (options.asciiOnly && !this.ascii)
-            return ASCII;
-        if (options.safe)
-            return this.safeSubstitute();
-        return this;
-    }
-    safeSubstitute() {
-        return new Box(Array.from(this.grid, (char) => SAFE_SUBSTITUTIONS[char] ?? char).join(""));
-    }
-    /**
-     * The nearest box that spends no special glyphs on a header — what a table
-     * with `showHeader: false` draws with. A box whose head row already matches
-     * its body is its own answer, so this is the identity for fourteen of the
-     * nineteen shipped styles.
-     *
-     * It stands beside `substitute` rather than joining it because the two ask
-     * unrelated questions: `substitute` asks what the *platform* can draw, this
-     * asks what the *table* contains. Nothing correlates them, so a caller that
-     * wants both wants both, and a shared options bag would only multiply the
-     * combinations either one has to reason about. [LAW:no-mode-explosion]
-     *
-     * [LAW:types-are-the-program] The relation is keyed on the grid, not on
-     * object identity as the reference's dict is. A `Box` is wholly determined by
-     * its grid — that is what the constructor takes and all eight rows derive
-     * from — so two boxes with one grid must answer this alike. Identity keying
-     * would say otherwise the moment a box arrived by any route but the shipped
-     * constant, and `safeSubstitute` above builds exactly such a box: a fresh
-     * instance carrying an unchanged grid.
-     */
-    plainHeaded() {
-        // `private` is scoped to the class, so the pairs below can be read by grid
-        // without exposing one.
-        return PLAIN_HEADED_SUBSTITUTIONS.find(([headed]) => headed.grid === this.grid)?.[1]
-            ?? this;
-    }
-    /**
-     * [LAW:dataflow-not-control-flow] Every full-width rule the box can draw is
-     * this one loop; which rule it is arrives as four characters, not a branch.
-     */
-    getEdge(widths, chars, style, edge) {
-        const segments = [];
-        if (edge)
-            segments.push(new Segment(chars.left, style));
-        for (let i = 0; i < widths.length; i++) {
-            if (i > 0)
-                segments.push(new Segment(chars.cross, style));
-            segments.push(new Segment(chars.horizontal.repeat(widths[i]), style));
-        }
-        if (edge)
-            segments.push(new Segment(chars.right, style));
-        segments.push(Segment.line());
-        return segments;
-    }
-    getRowChars(level) {
-        switch (level) {
-            case "head":
-                return this.headSeparator;
-            case "row":
-                return this.rowSeparator;
-            case "foot":
-                return this.footSeparator;
-            // The reference's spacer row, not a rule: blank fill between the body
-            // row's verticals. Nothing draws it yet — rich-table-jx1 has the details.
-            case "mid":
-                return {
-                    left: this.bodyContent.left,
-                    horizontal: " ",
-                    cross: this.bodyContent.vertical,
-                    right: this.bodyContent.right,
-                };
-        }
-    }
-}
-// --- Pre-built box styles ---
-// Transcribed from Python Rich's `rich/box.py` and verified grid-for-grid
-// against it; see this module's header for the shape and why it is this shape.
-export const ASCII = new Box("+--+\n" +
-    "| ||\n" +
-    "|-+|\n" +
-    "| ||\n" +
-    "|-+|\n" +
-    "|-+|\n" +
-    "| ||\n" +
-    "+--+");
-export const ASCII2 = new Box("+-++\n" +
-    "| ||\n" +
-    "+-++\n" +
-    "| ||\n" +
-    "+-++\n" +
-    "+-++\n" +
-    "| ||\n" +
-    "+-++");
-export const ASCII_DOUBLE_HEAD = new Box("+-++\n" +
-    "| ||\n" +
-    "+=++\n" +
-    "| ||\n" +
-    "+-++\n" +
-    "+-++\n" +
-    "| ||\n" +
-    "+-++");
-export const SQUARE = new Box("┌─┬┐\n" +
-    "│ ││\n" +
-    "├─┼┤\n" +
-    "│ ││\n" +
-    "├─┼┤\n" +
-    "├─┼┤\n" +
-    "│ ││\n" +
-    "└─┴┘");
-export const SQUARE_DOUBLE_HEAD = new Box("┌─┬┐\n" +
-    "│ ││\n" +
-    "╞═╪╡\n" +
-    "│ ││\n" +
-    "├─┼┤\n" +
-    "├─┼┤\n" +
-    "│ ││\n" +
-    "└─┴┘");
-export const MINIMAL = new Box("  ╷ \n" +
-    "  │ \n" +
-    "╶─┼╴\n" +
-    "  │ \n" +
-    "╶─┼╴\n" +
-    "╶─┼╴\n" +
-    "  │ \n" +
-    "  ╵ ");
-export const MINIMAL_HEAVY_HEAD = new Box("  ╷ \n" +
-    "  │ \n" +
-    "╺━┿╸\n" +
-    "  │ \n" +
-    "╶─┼╴\n" +
-    "╶─┼╴\n" +
-    "  │ \n" +
-    "  ╵ ");
-export const MINIMAL_DOUBLE_HEAD = new Box("  ╷ \n" +
-    "  │ \n" +
-    " ═╪ \n" +
-    "  │ \n" +
-    " ─┼ \n" +
-    " ─┼ \n" +
-    "  │ \n" +
-    "  ╵ ");
-export const SIMPLE = new Box("    \n" +
-    "    \n" +
-    " ── \n" +
-    "    \n" +
-    "    \n" +
-    " ── \n" +
-    "    \n" +
-    "    ");
-export const SIMPLE_HEAD = new Box("    \n" +
-    "    \n" +
-    " ── \n" +
-    "    \n" +
-    "    \n" +
-    "    \n" +
-    "    \n" +
-    "    ");
-export const SIMPLE_HEAVY = new Box("    \n" +
-    "    \n" +
-    " ━━ \n" +
-    "    \n" +
-    "    \n" +
-    " ━━ \n" +
-    "    \n" +
-    "    ");
-export const HORIZONTALS = new Box(" ── \n" +
-    "    \n" +
-    " ── \n" +
-    "    \n" +
-    " ── \n" +
-    " ── \n" +
-    "    \n" +
-    " ── ");
-export const ROUNDED = new Box("╭─┬╮\n" +
-    "│ ││\n" +
-    "├─┼┤\n" +
-    "│ ││\n" +
-    "├─┼┤\n" +
-    "├─┼┤\n" +
-    "│ ││\n" +
-    "╰─┴╯");
-export const HEAVY = new Box("┏━┳┓\n" +
-    "┃ ┃┃\n" +
-    "┣━╋┫\n" +
-    "┃ ┃┃\n" +
-    "┣━╋┫\n" +
-    "┣━╋┫\n" +
-    "┃ ┃┃\n" +
-    "┗━┻┛");
-export const HEAVY_EDGE = new Box("┏━┯┓\n" +
-    "┃ │┃\n" +
-    "┠─┼┨\n" +
-    "┃ │┃\n" +
-    "┠─┼┨\n" +
-    "┠─┼┨\n" +
-    "┃ │┃\n" +
-    "┗━┷┛");
-export const HEAVY_HEAD = new Box("┏━┳┓\n" +
-    "┃ ┃┃\n" +
-    "┡━╇┩\n" +
-    "│ ││\n" +
-    "├─┼┤\n" +
-    "├─┼┤\n" +
-    "│ ││\n" +
-    "└─┴┘");
-export const DOUBLE = new Box("╔═╦╗\n" +
-    "║ ║║\n" +
-    "╠═╬╣\n" +
-    "║ ║║\n" +
-    "╠═╬╣\n" +
-    "╠═╬╣\n" +
-    "║ ║║\n" +
-    "╚═╩╝");
-export const DOUBLE_EDGE = new Box("╔═╤╗\n" +
-    "║ │║\n" +
-    "╟─┼╢\n" +
-    "║ │║\n" +
-    "╟─┼╢\n" +
-    "╟─┼╢\n" +
-    "║ │║\n" +
-    "╚═╧╝");
-export const MARKDOWN = new Box("    \n" +
-    "| ||\n" +
-    "|-||\n" +
-    "| ||\n" +
-    "|-||\n" +
-    "|-||\n" +
-    "| ||\n" +
-    "    ");
-/**
- * Boxes whose header glyphs differ from their body's, paired with the kin that
- * draws the same frame without them. Transcribed from the reference's
- * `PLAIN_HEADED_SUBSTITUTIONS`; the fourteen styles absent here already draw a
- * plain head, and `plainHeaded` returns them unchanged.
- */
-const PLAIN_HEADED_SUBSTITUTIONS = [
-    [HEAVY_HEAD, SQUARE],
-    [SQUARE_DOUBLE_HEAD, SQUARE],
-    [MINIMAL_HEAVY_HEAD, MINIMAL],
-    [MINIMAL_DOUBLE_HEAD, MINIMAL],
-    [ASCII_DOUBLE_HEAD, ASCII2],
-];