Add the terminal user interface

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 .next
 out
-.vercel
+.vercel
+tsconfig.tsbuildinfo

app/docs/aynchronous-operations.recho.js

@@ -55,7 +55,7 @@ echo(string2);
  * Refer to https://recho.dev/docs/libraries-imports for more details.
  */
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array");
 
 //➜ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
 echo(d3.range(10));

app/docs/getting-started.recho.js

@@ -238,10 +238,10 @@ const sum = echo(numbers.reduce((a, b) => a + scale * b, 0));
  * the `recho.require` function. The import specifiers must be valid npm
  * package names with optional version specifiers.
  *
- * For example, let's import the `d3` package:
+ * For example, let's import the `d3-array` package:
  */
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array");
 
 //➜ [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]
 echo(d3.range(10));

app/examples/abacus.recho.js

@@ -131,4 +131,4 @@ class Canvas {
   }
 }
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array");

app/examples/animals-isotype-chart.recho.js

@@ -68,17 +68,18 @@ const data = [
 
 /**
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
- *                            Importing D3
+ *                          Importing D3 Array
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  *
- * Then we import D3 to help us with the data processing. In Recho, you can
- * typically use `recho.require(name)` to import an external library.
+ * Then we import D3's array helpers to help us with the data processing. In
+ * Recho, you can typically use `recho.require(name)` to import an external
+ * library.
  *
  * > Ref. https://recho.dev/docs/libraries-imports
  * > Ref. https://d3js.org/
  */
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array");
 
 /**
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

app/examples/fire!.recho.js

@@ -84,7 +84,7 @@ const frame = recho.interval(1000 / 15);
   echo(output);
 }
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array", "d3-random", "d3-scale");
 
 /**
  * I like this example also because I found one importable noise library:

app/examples/matrix-rain.recho.js

@@ -116,4 +116,4 @@ function randomChar() {
 
 const frame = recho.interval(1000 / 15);
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array", "d3-random");

app/examples/ml5-handpose.recho.js

@@ -121,4 +121,4 @@ function removeCapture(video) {
 
 const ml5 = await recho.require("https://unpkg.com/ml5@1/dist/ml5.js");
 const p5 = await recho.require("https://unpkg.com/p5@1.2.0/lib/p5.js");
-const d3 = await recho.require("d3");
+const d3 = await recho.require("d3-array", "d3-scale");

app/examples/moon-sundial.recho.js

@@ -83,7 +83,7 @@ const pos = d3.scaleLinear([0, size], [-1, 1]);
   echo(output);
 }
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-scale");
 
 /**
  * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

app/examples/phases-of-the-moon.recho.js

@@ -88,5 +88,5 @@ function getMoonEmoji(date) {
 }
 
 const suncalc = recho.require("suncalc");
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-time", "d3-time-format");
 const _ = recho.require("lodash");

app/examples/random-histogram.recho.js

@@ -26,7 +26,7 @@
  * results.
  */
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array", "d3-random");
 
 const count = 200;
 const width = 50;

app/examples/sorting.recho.js

@@ -166,4 +166,4 @@ function* sortQuick(array, left = 0, right = array.length - 1) {
   yield* sortQuick(array, i + 1, right);
 }
 
-const d3 = recho.require("d3");
+const d3 = recho.require("d3-array", "d3-random", "d3-scale");

editor/blocks/BlockMetadata.ts

@@ -3,22 +3,37 @@ import type {Transaction} from "@codemirror/state";
 export type Range = {from: number; to: number};
 
 export class BlockMetadata {
+  public readonly id: string;
+  public readonly name: string;
+  public readonly output: Range | null;
+  public readonly source: Range;
+  public attributes: Record<string, unknown>;
+  public error: boolean;
+
   /**
    * Create a new `BlockMetadata` instance.
+   * @param id a unique identifier for this block
    * @param name a descriptive name of this block
    * @param output the range of the output region
    * @param source the range of the source region
    * @param attributes any user-customized attributes of this block
    * @param error whether this block has an error
    */
   public constructor(
-    public readonly id: string,
-    public readonly name: string,
-    public readonly output: Range | null,
-    public readonly source: Range,
-    public attributes: Record<string, unknown> = {},
-    public error: boolean = false,
-  ) {}
+    id: string,
+    name: string,
+    output: Range | null,
+    source: Range,
+    attributes: Record<string, unknown> = {},
+    error: boolean = false,
+  ) {
+    this.id = id;
+    this.name = name;
+    this.output = output;
+    this.source = source;
+    this.attributes = attributes;
+    this.error = error;
+  }
 
   /**
    * Get the start position (inclusive) of this block.

eslint.config.mjs

@@ -10,6 +10,7 @@ export default defineConfig([
     files: [
       "editor/**/*.{js,ts,tsx}",
       "runtime/**/*.{js,ts}",
+      "terminal/**/*.ts",
       "test/**/*.{js,ts,tsx}",
       "app/**/*.{js,jsx,ts,tsx}",
       "lib/**/*.{js,ts}",
@@ -44,7 +45,14 @@ export default defineConfig([
   // TypeScript-specific configuration
   ...tseslint.configs.recommended.map((config) => ({
     ...config,
-    files: ["editor/**/*.{ts,tsx}", "runtime/**/*.ts", "test/**/*.{ts,tsx}", "app/**/*.{ts,tsx}", "lib/**/*.ts"],
+    files: [
+      "editor/**/*.{ts,tsx}",
+      "runtime/**/*.ts",
+      "terminal/**/*.ts",
+      "test/**/*.{ts,tsx}",
+      "app/**/*.{ts,tsx}",
+      "lib/**/*.ts",
+    ],
   })),
   {
     ignores: ["**/*.recho.js", "test/output/**/*"],

package.json

@@ -25,15 +25,20 @@
     "computational-art"
   ],
   "type": "module",
+  "bin": {
+    "recho": "./terminal/cli.ts"
+  },
   "scripts": {
     "dev": "vite",
+    "tui": "node terminal/cli.ts",
     "app:dev": "next dev",
     "app:build": "next build",
     "app:start": "next start",
-    "test": "npm run test:lint && npm run test:format && npm run test:js",
+    "test": "npm run test:lint && npm run test:format && npm run test:typecheck && npm run test:js",
     "test:js": "TZ=America/New_York vitest",
-    "test:format": "prettier --check editor runtime test app",
-    "test:lint": "eslint"
+    "test:format": "prettier --check editor runtime terminal test app",
+    "test:lint": "eslint",
+    "test:typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
@@ -87,19 +92,26 @@
     "codemirror": "^6.0.2",
     "d3-array": "^3.2.4",
     "d3-dispatch": "^3.0.1",
+    "d3-random": "^3.0.1",
     "d3-require": "^1.3.0",
+    "d3-scale": "^4.0.2",
+    "d3-time": "^3.1.0",
+    "d3-time-format": "^4.1.0",
     "eslint-linter-browserify": "^9.39.2",
     "friendly-words": "^1.3.1",
     "jotai": "^2.16.1",
+    "lodash": "^4.18.1",
     "nanoid": "^5.1.6",
     "next": "^15.5.9",
     "nstr": "^0.1.3",
     "object-inspect": "^1.13.4",
+    "perlin-noise-3d": "^0.5.4",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "shiki": "^3.20.0",
     "short-uuid": "^5.2.0",
     "source-map-support": "^0.5.21",
+    "suncalc": "^1.9.0",
     "table": "^6.9.0"
   }
 }