suspend/resume actually resetting terminal

packages/core/src/examples/fonts.ts

@@ -1,4 +1,12 @@
-import { BoxRenderable, CliRenderer, createCliRenderer, FrameBufferRenderable, RGBA, TextRenderable } from "../index"
+import {
+  BoxRenderable,
+  CliRenderer,
+  createCliRenderer,
+  FrameBufferRenderable,
+  RGBA,
+  TextRenderable,
+  type KeyEvent,
+} from "../index"
 import { renderFontToFrameBuffer } from "../lib/ascii.font"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 
@@ -17,17 +25,17 @@ function updateScrollPosition(): void {
   renderer.requestRender()
 }
 
-function handleKeyPress(key: string): void {
+function handleKeyPress(key: KeyEvent): void {
   const scrollAmount = 3
 
-  switch (key) {
-    case "\u001b[A": // Up arrow
+  switch (key.name) {
+    case "up":
     case "k":
       console.log("up")
       scrollY -= scrollAmount
       updateScrollPosition()
       break
-    case "\u001b[B": // Down arrow
+    case "down":
     case "j":
       scrollY += scrollAmount
       updateScrollPosition()
@@ -59,7 +67,7 @@ export function run(rendererInstance: CliRenderer): void {
   // Reset scroll position
   scrollY = 0
 
-  process.stdin.on("data", handleKeyPress)
+  renderer.keyInput.on("keypress", handleKeyPress)
 
   // Large title with block font (multi-color)
   renderFontToFrameBuffer(buffer.frameBuffer, {
@@ -211,7 +219,9 @@ export function run(rendererInstance: CliRenderer): void {
 }
 
 export function destroy(rendererInstance: CliRenderer): void {
-  process.stdin.removeListener("data", handleKeyPress)
+  if (renderer) {
+    renderer.keyInput.off("keypress", handleKeyPress)
+  }
 
   rendererInstance.root.remove("ascii-demo")
 

packages/core/src/examples/fractal-shader-demo.ts

@@ -1,6 +1,6 @@
 #!/usr/bin/env bun
 
-import { BoxRenderable, CliRenderer, createCliRenderer, RGBA, TextRenderable } from "../index"
+import { BoxRenderable, CliRenderer, createCliRenderer, RGBA, TextRenderable, type KeyEvent } from "../index"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 import { Scene as ThreeScene, Mesh as ThreeMesh, PerspectiveCamera, PlaneGeometry, Vector2 } from "three"
 import { MeshBasicNodeMaterial } from "three/webgpu"
@@ -32,7 +32,7 @@ let cameraNode: PerspectiveCamera | null = null
 let time = 0
 let timeSpeed = 1.0
 let paused = false
-let keyHandler: ((key: Buffer) => void) | null = null
+let keyHandler: ((key: KeyEvent) => void) | null = null
 let handleResize: ((width: number, height: number) => void) | null = null
 let parentContainer: BoxRenderable | null = null
 
@@ -177,14 +177,12 @@ export async function run(renderer: CliRenderer): Promise<void> {
   timeSpeed = 1.0
   paused = false
 
-  keyHandler = (key: Buffer) => {
-    const keyStr = key.toString()
-
-    if (keyStr === "p" && engine) {
+  keyHandler = (key: KeyEvent) => {
+    if (key.name === "p" && engine) {
       engine.saveToFile(`fractal-${Date.now()}.png`)
     }
 
-    if (keyStr === "r" && cameraNode) {
+    if (key.name === "r" && cameraNode) {
       timeSpeed = 1.0
       paused = false
       cameraNode.position.set(0, 0, 5)
@@ -193,23 +191,23 @@ export async function run(renderer: CliRenderer): Promise<void> {
       statusText.content = `Speed: ${timeSpeed.toFixed(1)}x`
     }
 
-    if (keyStr === " ") {
+    if (key.name === "space") {
       paused = !paused
       statusText.content = `Speed: ${timeSpeed.toFixed(1)}x`
     }
 
-    if (keyStr === "+" || keyStr === "=") {
+    if (key.name === "+" || key.name === "=") {
       timeSpeed = Math.min(timeSpeed + 0.1, 3.0)
       statusText.content = `Speed: ${timeSpeed.toFixed(1)}x`
     }
 
-    if (keyStr === "-" || keyStr === "_") {
+    if (key.name === "-" || key.name === "_") {
       timeSpeed = Math.max(timeSpeed - 0.1, 0.1)
       statusText.content = `Speed: ${timeSpeed.toFixed(1)}x`
     }
   }
 
-  process.stdin.on("data", keyHandler)
+  renderer.keyInput.on("keypress", keyHandler)
 
   renderer.setFrameCallback(async (deltaMs) => {
     const deltaTime = deltaMs / 1000
@@ -232,7 +230,7 @@ export async function run(renderer: CliRenderer): Promise<void> {
 
 export function destroy(renderer: CliRenderer): void {
   if (keyHandler) {
-    process.stdin.off("data", keyHandler)
+    renderer.keyInput.off("keypress", keyHandler)
     keyHandler = null
   }
 

packages/core/src/examples/index.ts

@@ -357,7 +357,7 @@ class ExampleSelector {
       marginLeft: 2,
       marginRight: 2,
       content:
-        "Use ↑↓ or j/k to navigate, Shift+↑↓ or Shift+j/k for fast scroll, Enter to run, Escape to return, ` for console, ctrl+c to quit",
+        "Use ↑↓ or j/k to navigate, Shift+↑↓ or Shift+j/k for fast scroll, Enter to run, Escape to return, ` for console, ctrl+z to suspend/resume, ctrl+c to quit",
       fg: "#94A3B8",
     })
     this.renderer.root.add(this.instructions)
@@ -438,6 +438,16 @@ class ExampleSelector {
         case "c":
           console.log("Capabilities:", this.renderer.capabilities)
           break
+        case "z":
+          if (key.ctrl) {
+            console.log("Suspending renderer... (will auto-resume in 5 seconds)")
+            this.renderer.suspend()
+            setTimeout(() => {
+              console.log("Resuming renderer...")
+              this.renderer.resume()
+            }, 5000)
+          }
+          break
       }
     })
     setupCommonDemoKeys(this.renderer)

packages/core/src/examples/lights-phong-demo.ts

@@ -1,6 +1,14 @@
 #!/usr/bin/env bun
 
-import { CliRenderer, createCliRenderer, RGBA, BoxRenderable, TextRenderable, FrameBufferRenderable } from "../index"
+import {
+  CliRenderer,
+  createCliRenderer,
+  RGBA,
+  BoxRenderable,
+  TextRenderable,
+  FrameBufferRenderable,
+  type KeyEvent,
+} from "../index"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 import { TextureUtils } from "../3d/TextureUtils"
 import {
@@ -190,24 +198,23 @@ export async function run(renderer: CliRenderer): Promise<void> {
     controlsText.y = height - 2
   }
 
-  const inputHandler = (key: Buffer) => {
-    const keyStr = key.toString()
-    if (keyStr === "w") camera.translateY(0.5)
-    if (keyStr === "s") camera.translateY(-0.5)
-    if (keyStr === "a") camera.translateX(-0.5)
-    if (keyStr === "d") camera.translateX(0.5)
-    if (keyStr === "q") camera.rotateY(0.1)
-    if (keyStr === "e") camera.rotateY(-0.1)
-    if (keyStr === "z") camera.translateZ(1)
-    if (keyStr === "x") camera.translateZ(-1)
-    if (keyStr === "r") {
+  const inputHandler = (key: KeyEvent) => {
+    if (key.name === "w") camera.translateY(0.5)
+    if (key.name === "s") camera.translateY(-0.5)
+    if (key.name === "a") camera.translateX(-0.5)
+    if (key.name === "d") camera.translateX(0.5)
+    if (key.name === "q") camera.rotateY(0.1)
+    if (key.name === "e") camera.rotateY(-0.1)
+    if (key.name === "z") camera.translateZ(1)
+    if (key.name === "x") camera.translateZ(-1)
+    if (key.name === "r") {
       camera.position.set(0, 0, 7)
       camera.rotation.set(0, 0, 0)
       camera.quaternion.set(0, 0, 0, 1)
       camera.up.set(0, 1, 0)
       camera.lookAt(0, 0, 0)
     }
-    if (keyStr === "u") {
+    if (key.name === "u") {
       engine.toggleSuperSampling()
     }
   }
@@ -236,12 +243,12 @@ export async function run(renderer: CliRenderer): Promise<void> {
   }
 
   renderer.on("resize", resizeHandler)
-  process.stdin.on("data", inputHandler)
+  renderer.keyInput.on("keypress", inputHandler)
   renderer.setFrameCallback(animate)
 
   const cleanup = () => {
     renderer.off("resize", resizeHandler)
-    process.stdin.off("data", inputHandler)
+    renderer.keyInput.off("keypress", inputHandler)
     renderer.removeFrameCallback(animate)
     engine.destroy()
   }

packages/core/src/examples/nested-zindex-demo.ts

@@ -1,8 +1,8 @@
-import { TextAttributes, createCliRenderer, TextRenderable, BoxRenderable } from "../index"
+import { TextAttributes, createCliRenderer, TextRenderable, BoxRenderable, type KeyEvent } from "../index"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 import type { CliRenderer } from "../index"
 
-let globalKeyboardHandler: ((key: Buffer) => void) | null = null
+let globalKeyboardHandler: ((key: KeyEvent) => void) | null = null
 let zIndexPhase = 0
 let animationSpeed = 2000
 
@@ -323,22 +323,20 @@ export function run(renderer: CliRenderer): void {
     }
   })
 
-  globalKeyboardHandler = (key: Buffer) => {
-    const keyStr = key.toString()
-
-    if (keyStr === "+" || keyStr === "=") {
+  globalKeyboardHandler = (key: KeyEvent) => {
+    if (key.name === "+" || key.name === "=") {
       animationSpeed = Math.max(500, animationSpeed - 200)
-    } else if (keyStr === "-" || keyStr === "_") {
+    } else if (key.name === "-" || key.name === "_") {
       animationSpeed = Math.min(5000, animationSpeed + 200)
     }
   }
 
-  process.stdin.on("data", globalKeyboardHandler)
+  renderer.keyInput.on("keypress", globalKeyboardHandler)
 }
 
 export function destroy(renderer: CliRenderer): void {
   if (globalKeyboardHandler) {
-    process.stdin.removeListener("data", globalKeyboardHandler)
+    renderer.keyInput.off("keypress", globalKeyboardHandler)
     globalKeyboardHandler = null
   }
 

packages/core/src/examples/opentui-demo.ts

@@ -7,13 +7,14 @@ import {
   BoxRenderable,
   parseColor,
   getBorderFromSides,
+  type KeyEvent,
 } from "../index"
 import type { BorderCharacters, BorderSidesConfig, CliRenderer } from "../index"
 import { TabControllerRenderable } from "./lib/tab-controller"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 
 let globalTabController: TabControllerRenderable | null = null
-let globalKeyboardHandler: ((key: Buffer) => void) | null = null
+let globalKeyboardHandler: ((key: KeyEvent) => void) | null = null
 
 export function run(renderer: CliRenderer): void {
   renderer.start()
@@ -1012,31 +1013,29 @@ export function run(renderer: CliRenderer): void {
 
   tabController.focus()
 
-  globalKeyboardHandler = (key: Buffer) => {
-    const keyStr = key.toString()
-
+  globalKeyboardHandler = (key: KeyEvent) => {
     // Interactive border controls (only active in Interactive tab)
     if (tabController.getCurrentTab().title === "Interactive") {
-      if (keyStr === "t" || keyStr === "T") {
+      if (key.name === "t" || key.name === "T") {
         interactiveBorderSides.top = !interactiveBorderSides.top
-      } else if (keyStr === "r" || keyStr === "R") {
+      } else if (key.name === "r" || key.name === "R") {
         interactiveBorderSides.right = !interactiveBorderSides.right
-      } else if (keyStr === "b" || keyStr === "B") {
+      } else if (key.name === "b" || key.name === "B") {
         interactiveBorderSides.bottom = !interactiveBorderSides.bottom
-      } else if (keyStr === "l" || keyStr === "L") {
+      } else if (key.name === "l" || key.name === "L") {
         interactiveBorderSides.left = !interactiveBorderSides.left
       }
     }
   }
 
-  process.stdin.on("data", globalKeyboardHandler)
+  renderer.keyInput.on("keypress", globalKeyboardHandler)
 }
 
 export function destroy(renderer: CliRenderer): void {
   renderer.clearFrameCallbacks()
 
   if (globalKeyboardHandler) {
-    process.stdin.removeListener("data", globalKeyboardHandler)
+    renderer.keyInput.off("keypress", globalKeyboardHandler)
     globalKeyboardHandler = null
   }
 

packages/core/src/examples/physx-planck-2d-demo.ts

@@ -1,6 +1,13 @@
 #!/usr/bin/env bun
 
-import { CliRenderer, TextRenderable, FrameBufferRenderable, BoxRenderable, createCliRenderer } from "../index"
+import {
+  CliRenderer,
+  TextRenderable,
+  FrameBufferRenderable,
+  BoxRenderable,
+  createCliRenderer,
+  type KeyEvent,
+} from "../index"
 import { setupCommonDemoKeys } from "./lib/standalone-keys"
 import * as THREE from "three"
 import {
@@ -53,7 +60,7 @@ interface DemoState {
   controlsText: TextRenderable
   statsText: TextRenderable
   frameCallback: (deltaTime: number) => Promise<void>
-  keyHandler: (key: Buffer) => void
+  keyHandler: (key: KeyEvent) => void
   statsInterval: NodeJS.Timeout
   resizeHandler: (width: number, height: number) => void
 }
@@ -368,10 +375,10 @@ export async function run(renderer: CliRenderer): Promise<void> {
     await state.engine.drawScene(state.scene, framebuffer, deltaTime)
   }
 
-  state.keyHandler = (key: Buffer) => {
-    const keyStr = key.toString()
+  state.keyHandler = (key: KeyEvent) => {
+    const keyStr = key.name
 
-    if (keyStr === " " && state.isInitialized) {
+    if (keyStr === "space" && state.isInitialized) {
       ;(async () => {
         const x = (Math.random() - 0.5) * 16
         const y = 8 + Math.random() * 2
@@ -459,7 +466,7 @@ export async function run(renderer: CliRenderer): Promise<void> {
 
   // Register handlers
   renderer.setFrameCallback(state.frameCallback)
-  process.stdin.on("data", state.keyHandler)
+  renderer.keyInput.on("keypress", state.keyHandler)
   renderer.on("resize", state.resizeHandler)
 
   demoState = state
@@ -470,7 +477,7 @@ export function destroy(renderer: CliRenderer): void {
   if (!demoState) return
 
   renderer.removeFrameCallback(demoState.frameCallback)
-  process.stdin.removeListener("data", demoState.keyHandler)
+  renderer.keyInput.off("keypress", demoState.keyHandler)
   renderer.root.removeListener("resize", demoState.resizeHandler)
 
   clearInterval(demoState.statsInterval)