@rlabs-inc/tui 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rlabs-inc/tui",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "The Terminal UI Framework for TypeScript/Bun - Blazing-fast, fine-grained reactive terminal UI with complete flexbox layout",
   "module": "index.ts",
   "main": "index.ts",

package/src/api/history.ts

@@ -405,6 +405,10 @@ export function createRenderToHistory(
     // Without batch, the ReactiveSet triggers updates when we allocate/release indices,
     // causing the render effect to run mid-operation and duplicate content.
     batch(() => {
+      // STEP 1: Erase the active area BEFORE doing anything else
+      // This clears the screen so history can be written where the active area was
+      appendRegionRenderer.eraseActive()
+
       // Save current allocated indices BEFORE creating history components
       const beforeIndices = new Set(getAllocatedIndices())
 

package/src/renderer/append-region.ts

@@ -26,6 +26,10 @@ import * as ansi from './ansi'
  * Erases previous active content and renders fresh.
  *
  * Like InlineRenderer but only erases the active area (preserves history).
+ *
+ * OVERFLOW HANDLING:
+ * - If active area fits in viewport: erase only active lines (preserves history)
+ * - If active area exceeds viewport: clear everything (can't partially erase scrollback)
  */
 export class AppendRegionRenderer {
   // Cell rendering state (for ANSI optimization)
@@ -38,19 +42,38 @@ export class AppendRegionRenderer {
 
   /**
    * Render frame buffer as active content.
-   * Erases exactly the previous content, then writes fresh.
+   * Uses sync mode for flicker-free rendering.
+   *
+   * SMART ERASE STRATEGY:
+   * - If previous height <= viewport: erase only active lines (O(1) for history)
+   * - If previous height > viewport: clear terminal (history is in scrollback anyway)
    */
   render(buffer: FrameBuffer): void {
     const output = this.buildOutput(buffer)
+    const viewportHeight = process.stdout.rows || 24
+
+    // Begin synchronized output for flicker-free rendering
+    process.stdout.write(ansi.beginSync)
 
-    // Erase previous active content (move up and clear each line)
+    // Decide erase strategy based on whether content exceeds viewport
     if (this.previousHeight > 0) {
-      process.stdout.write(ansi.eraseLines(this.previousHeight))
+      if (this.previousHeight <= viewportHeight) {
+        // Active area fits in viewport - erase only active lines (preserves history)
+        process.stdout.write(ansi.cursorUp(this.previousHeight))
+        process.stdout.write(ansi.eraseDown)
+      } else {
+        // Active area exceeded viewport - clear terminal
+        // History that scrolled up is already in scrollback, so this is fine
+        process.stdout.write(ansi.clearTerminal)
+      }
     }
 
     // Render active content
     process.stdout.write(output)
 
+    // End synchronized output
+    process.stdout.write(ansi.endSync)
+
     // Track height for next render
     // +1 because buildOutput adds trailing newline which moves cursor down one line
     this.previousHeight = buffer.height + 1
@@ -62,7 +85,16 @@ export class AppendRegionRenderer {
    */
   eraseActive(): void {
     if (this.previousHeight > 0) {
-      process.stdout.write(ansi.eraseLines(this.previousHeight))
+      const viewportHeight = process.stdout.rows || 24
+
+      if (this.previousHeight <= viewportHeight) {
+        // Active area fits in viewport - erase only active lines
+        process.stdout.write(ansi.cursorUp(this.previousHeight))
+        process.stdout.write(ansi.eraseDown)
+      } else {
+        // Active area exceeded viewport - clear terminal
+        process.stdout.write(ansi.clearTerminal)
+      }
       this.previousHeight = 0
     }
   }

package/src/renderer/output.ts

@@ -191,8 +191,8 @@ export class DiffRenderer {
     const prev = this.previousBuffer
     let hasChanges = false
 
-    // NOTE: Synchronized output (CSI?2026h) disabled - was causing row 0 issues
-    // this.output.write(ansi.beginSync)
+    // Begin synchronized output for flicker-free rendering
+    this.output.write(ansi.beginSync)
 
     // Reset cell renderer state at start of frame
     this.cellRenderer.reset()
@@ -341,8 +341,10 @@ export class InlineRenderer {
       return
     }
 
-    // Clear everything and render fresh
+    // Synchronized output: wrap in begin/end sync for flicker-free rendering
+    this.output.write(ansi.beginSync)
     this.output.write(ansi.clearTerminal + output)
+    this.output.write(ansi.endSync)
     this.output.flushSync()
 
     this.previousOutput = output