@fairyhunter13/opentui-core 0.1.90 → 0.1.92

package/src/examples/diff-demo.ts

@@ -1,699 +0,0 @@
-import {
-  CliRenderer,
-  createCliRenderer,
-  DiffRenderable,
-  BoxRenderable,
-  TextRenderable,
-  type ParsedKey,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-import { parseColor, type RGBA } from "../lib/RGBA.js"
-import { SyntaxStyle } from "../syntax-style.js"
-
-interface DiffTheme {
-  name: string
-  backgroundColor: string
-  borderColor: string
-  addedBg: string
-  removedBg: string
-  contextBg: string
-  addedSignColor: string
-  removedSignColor: string
-  lineNumberFg: string
-  lineNumberBg: string
-  addedLineNumberBg: string
-  removedLineNumberBg: string
-  selectionBg: string
-  selectionFg: string
-  syntaxStyle: {
-    keyword: { fg: RGBA; bold?: boolean }
-    "keyword.import": { fg: RGBA; bold?: boolean }
-    string: { fg: RGBA }
-    comment: { fg: RGBA; italic?: boolean }
-    number: { fg: RGBA }
-    boolean: { fg: RGBA }
-    constant: { fg: RGBA }
-    function: { fg: RGBA }
-    "function.call": { fg: RGBA }
-    constructor: { fg: RGBA }
-    type: { fg: RGBA }
-    operator: { fg: RGBA }
-    variable: { fg: RGBA }
-    property: { fg: RGBA }
-    bracket: { fg: RGBA }
-    punctuation: { fg: RGBA }
-    default: { fg: RGBA }
-  }
-}
-
-const themes: DiffTheme[] = [
-  {
-    name: "GitHub Dark",
-    backgroundColor: "#0D1117",
-    borderColor: "#4ECDC4",
-    addedBg: "#1a4d1a",
-    removedBg: "#4d1a1a",
-    contextBg: "transparent",
-    addedSignColor: "#22c55e",
-    removedSignColor: "#ef4444",
-    lineNumberFg: "#6b7280",
-    lineNumberBg: "#161b22",
-    addedLineNumberBg: "#0d3a0d",
-    removedLineNumberBg: "#3a0d0d",
-    selectionBg: "#264F78",
-    selectionFg: "#FFFFFF",
-    syntaxStyle: {
-      keyword: { fg: parseColor("#FF7B72"), bold: true },
-      "keyword.import": { fg: parseColor("#FF7B72"), bold: true },
-      string: { fg: parseColor("#A5D6FF") },
-      comment: { fg: parseColor("#8B949E"), italic: true },
-      number: { fg: parseColor("#79C0FF") },
-      boolean: { fg: parseColor("#79C0FF") },
-      constant: { fg: parseColor("#79C0FF") },
-      function: { fg: parseColor("#D2A8FF") },
-      "function.call": { fg: parseColor("#D2A8FF") },
-      constructor: { fg: parseColor("#FFA657") },
-      type: { fg: parseColor("#FFA657") },
-      operator: { fg: parseColor("#FF7B72") },
-      variable: { fg: parseColor("#E6EDF3") },
-      property: { fg: parseColor("#79C0FF") },
-      bracket: { fg: parseColor("#F0F6FC") },
-      punctuation: { fg: parseColor("#F0F6FC") },
-      default: { fg: parseColor("#E6EDF3") },
-    },
-  },
-  {
-    name: "Monokai",
-    backgroundColor: "#272822",
-    borderColor: "#FD971F",
-    addedBg: "#2d4a2b",
-    removedBg: "#4a2b2b",
-    contextBg: "transparent",
-    addedSignColor: "#A6E22E",
-    removedSignColor: "#F92672",
-    lineNumberFg: "#75715E",
-    lineNumberBg: "#1e1f1c",
-    addedLineNumberBg: "#1e3a1e",
-    removedLineNumberBg: "#3a1e1e",
-    selectionBg: "#49483E",
-    selectionFg: "#F8F8F2",
-    syntaxStyle: {
-      keyword: { fg: parseColor("#F92672"), bold: true },
-      "keyword.import": { fg: parseColor("#F92672"), bold: true },
-      string: { fg: parseColor("#E6DB74") },
-      comment: { fg: parseColor("#75715E"), italic: true },
-      number: { fg: parseColor("#AE81FF") },
-      boolean: { fg: parseColor("#AE81FF") },
-      constant: { fg: parseColor("#AE81FF") },
-      function: { fg: parseColor("#A6E22E") },
-      "function.call": { fg: parseColor("#A6E22E") },
-      constructor: { fg: parseColor("#FD971F") },
-      type: { fg: parseColor("#66D9EF") },
-      operator: { fg: parseColor("#F92672") },
-      variable: { fg: parseColor("#F8F8F2") },
-      property: { fg: parseColor("#66D9EF") },
-      bracket: { fg: parseColor("#F8F8F2") },
-      punctuation: { fg: parseColor("#F8F8F2") },
-      default: { fg: parseColor("#F8F8F2") },
-    },
-  },
-  {
-    name: "Dracula",
-    backgroundColor: "#282A36",
-    borderColor: "#BD93F9",
-    addedBg: "#2d4737",
-    removedBg: "#4d2d37",
-    contextBg: "transparent",
-    addedSignColor: "#50FA7B",
-    removedSignColor: "#FF5555",
-    lineNumberFg: "#6272A4",
-    lineNumberBg: "#21222C",
-    addedLineNumberBg: "#1f3626",
-    removedLineNumberBg: "#3a2328",
-    selectionBg: "#44475A",
-    selectionFg: "#F8F8F2",
-    syntaxStyle: {
-      keyword: { fg: parseColor("#FF79C6"), bold: true },
-      "keyword.import": { fg: parseColor("#FF79C6"), bold: true },
-      string: { fg: parseColor("#F1FA8C") },
-      comment: { fg: parseColor("#6272A4"), italic: true },
-      number: { fg: parseColor("#BD93F9") },
-      boolean: { fg: parseColor("#BD93F9") },
-      constant: { fg: parseColor("#BD93F9") },
-      function: { fg: parseColor("#50FA7B") },
-      "function.call": { fg: parseColor("#50FA7B") },
-      constructor: { fg: parseColor("#FFB86C") },
-      type: { fg: parseColor("#8BE9FD") },
-      operator: { fg: parseColor("#FF79C6") },
-      variable: { fg: parseColor("#F8F8F2") },
-      property: { fg: parseColor("#8BE9FD") },
-      bracket: { fg: parseColor("#F8F8F2") },
-      punctuation: { fg: parseColor("#F8F8F2") },
-      default: { fg: parseColor("#F8F8F2") },
-    },
-  },
-  {
-    name: "Solarized Dark",
-    backgroundColor: "#002b36", // base03 - official
-    borderColor: "#2aa198", // cyan - official
-    addedBg: "#1a4032",
-    removedBg: "#4d2a30",
-    contextBg: "transparent",
-    addedSignColor: "#859900", // green - official
-    removedSignColor: "#dc322f", // red - official
-    lineNumberFg: "#586e75", // base01 - official
-    lineNumberBg: "#073642", // base02 - official
-    addedLineNumberBg: "#0d3326",
-    removedLineNumberBg: "#3a2026",
-    selectionBg: "#073642",
-    selectionFg: "#93a1a1",
-    syntaxStyle: {
-      keyword: { fg: parseColor("#859900"), bold: true }, // green
-      "keyword.import": { fg: parseColor("#859900"), bold: true },
-      string: { fg: parseColor("#2aa198") }, // cyan
-      comment: { fg: parseColor("#586e75"), italic: true }, // base01
-      number: { fg: parseColor("#d33682") }, // magenta
-      boolean: { fg: parseColor("#d33682") },
-      constant: { fg: parseColor("#b58900") }, // yellow
-      function: { fg: parseColor("#268bd2") }, // blue
-      "function.call": { fg: parseColor("#268bd2") },
-      constructor: { fg: parseColor("#cb4b16") }, // orange
-      type: { fg: parseColor("#cb4b16") },
-      operator: { fg: parseColor("#859900") },
-      variable: { fg: parseColor("#839496") }, // base0 - official foreground
-      property: { fg: parseColor("#268bd2") },
-      bracket: { fg: parseColor("#839496") }, // base0
-      punctuation: { fg: parseColor("#839496") },
-      default: { fg: parseColor("#839496") }, // base0
-    },
-  },
-  {
-    name: "One Dark",
-    backgroundColor: "#282c34", // official
-    borderColor: "#61afef", // blue - official
-    addedBg: "#2d4a2d",
-    removedBg: "#4d2d2d",
-    contextBg: "transparent",
-    addedSignColor: "#98c379", // green - official
-    removedSignColor: "#e06c75", // red - official
-    lineNumberFg: "#636d83", // gutter - official
-    lineNumberBg: "#21252b",
-    addedLineNumberBg: "#1e3a1e",
-    removedLineNumberBg: "#3a1e1e",
-    selectionBg: "#3E4451",
-    selectionFg: "#abb2bf",
-    syntaxStyle: {
-      keyword: { fg: parseColor("#c678dd"), bold: true }, // purple - official
-      "keyword.import": { fg: parseColor("#c678dd"), bold: true },
-      string: { fg: parseColor("#98c379") }, // green - official
-      comment: { fg: parseColor("#5c6370"), italic: true }, // comment - official
-      number: { fg: parseColor("#d19a66") }, // orange - official
-      boolean: { fg: parseColor("#d19a66") },
-      constant: { fg: parseColor("#d19a66") },
-      function: { fg: parseColor("#61afef") }, // blue - official
-      "function.call": { fg: parseColor("#61afef") },
-      constructor: { fg: parseColor("#e5c07b") }, // yellow - official
-      type: { fg: parseColor("#e5c07b") },
-      operator: { fg: parseColor("#56b6c2") }, // cyan - official
-      variable: { fg: parseColor("#abb2bf") }, // foreground - official
-      property: { fg: parseColor("#e06c75") }, // red - official
-      bracket: { fg: parseColor("#abb2bf") },
-      punctuation: { fg: parseColor("#abb2bf") },
-      default: { fg: parseColor("#abb2bf") },
-    },
-  },
-]
-
-interface ContentExample {
-  name: string
-  filetype: "typescript" | "markdown" | "json"
-  diff: string
-}
-
-const contentExamples: ContentExample[] = [
-  {
-    name: "TypeScript",
-    filetype: "typescript",
-    diff: `--- a/calculator.ts
-+++ b/calculator.ts
-@@ -1,13 +1,20 @@
- class Calculator {
-   add(a: number, b: number): number {
-     return a + b;
-   }
- 
--  subtract(a: number, b: number): number {
--    return a - b;
-+  subtract(a: number, b: number, c: number = 0): number {
-+    return a - b - c;
-   }
- 
-   multiply(a: number, b: number): number {
-     return a * b;
-   }
-+
-+  divide(a: number, b: number): number {
-+    if (b === 0) {
-+      throw new Error("Division by zero");
-+    }
-+    return a / b;
-+  }
- }`,
-  },
-  {
-    name: "Real Session: Text Demo",
-    filetype: "typescript",
-    diff: `Index: packages/core/src/examples/index.ts
-===================================================================
---- packages/core/src/examples/index.ts	before
-+++ packages/core/src/examples/index.ts	after
-@@ -56,6 +56,7 @@
- import * as terminalDemo from "./terminal.js"
- import * as diffDemo from "./diff-demo.js"
- import * as keypressDebugDemo from "./keypress-debug-demo.js"
-+import * as textTruncationDemo from "./text-truncation-demo.js"
- import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
- 
- interface Example {
-@@ -85,6 +86,12 @@
-     destroy: textSelectionExample.destroy,
-   },
-   {
-+    name: "Text Truncation Demo",
-+    description: "Middle truncation with ellipsis - toggle with 'T' key and resize to test responsive behavior",
-+    run: textTruncationDemo.run,
-+    destroy: textTruncationDemo.destroy,
-+  },
-+  {
-     name: "ASCII Font Selection Demo",
-     description: "Text selection with ASCII fonts - precise character-level selection across different font types",
-     run: asciiFontSelectionExample.run,`,
-  },
-  {
-    name: "Markdown",
-    filetype: "markdown",
-    diff: `--- a/README.md
-+++ b/README.md
-@@ -1,12 +1,21 @@
- # Project Name
- 
--A simple project description.
-+A comprehensive project description with detailed features.
- 
- ## Features
- 
--- Feature 1
--- Feature 2
-+- **Feature 1**: Enhanced with new capabilities
-+- **Feature 2**: Now supports multiple formats
-+- **Feature 3**: Added real-time synchronization
- 
- ## Installation
- 
--\`npm install\`
-+\`\`\`bash
-+npm install
-+# or
-+yarn install
-+\`\`\`
-+
-+## Usage
-+
-+See the [documentation](./docs) for detailed usage instructions.`,
-  },
-  {
-    name: "Real Session: Truncate Feature",
-    filetype: "typescript",
-    diff: `Index: packages/core/src/renderables/TextBufferRenderable.ts
-===================================================================
---- packages/core/src/renderables/TextBufferRenderable.ts	before
-+++ packages/core/src/renderables/TextBufferRenderable.ts	after
-@@ -19,6 +19,7 @@
-   wrapMode?: "none" | "char" | "word"
-   tabIndicator?: string | number
-   tabIndicatorColor?: string | RGBA
-+  truncate?: boolean
- }
- 
- export abstract class TextBufferRenderable extends Renderable implements LineInfoProvider {
-@@ -35,6 +36,7 @@
-   protected _tabIndicatorColor?: RGBA
-   protected _scrollX: number = 0
-   protected _scrollY: number = 0
-+  protected _truncate: boolean = false
- 
-   protected textBuffer: TextBuffer
-   protected textBufferView: TextBufferView`,
-  },
-  {
-    name: "Markdown (Conceal Test)",
-    filetype: "markdown",
-    diff: `--- a/test.md
-+++ b/test.md
-@@ -1,2 +1,2 @@
--Some text **boldtext**
--Short
-+Some text **boldtext**
-+More text **formats**`,
-  },
-  {
-    name: "JSON",
-    filetype: "json",
-    diff: `--- a/config.json
-+++ b/config.json
-@@ -1,9 +1,15 @@
- {
--  "name": "my-app",
--  "version": "1.0.0",
-+  "name": "my-awesome-app",
-+  "version": "2.0.0",
-   "config": {
--    "port": 3000,
--    "host": "localhost"
-+    "port": 8080,
-+    "host": "0.0.0.0",
-+    "ssl": true,
-+    "timeout": 30000
-   },
--  "debug": false
-+  "debug": true,
-+  "features": {
-+    "analytics": true,
-+    "logging": "verbose"
-+  }
- }`,
-  },
-  {
-    name: "Real Session: CJK Wrap Test",
-    filetype: "typescript",
-    diff: `Index: packages/core/src/renderables/Text.test.ts
-===================================================================
---- packages/core/src/renderables/Text.test.ts	before
-+++ packages/core/src/renderables/Text.test.ts	after
-@@ -1428,6 +1428,37 @@
-       const frame = captureFrame()
-       expect(frame).toMatchSnapshot()
-     })
-+
-+    it("should render word wrapped text with CJK and English correctly", async () => {
-+      resize(60, 10)
-+
-+      const { text } = await createTextRenderable(currentRenderer, {
-+        content: "🌟 Unicode test: こんにちは世界 Hello World 你好世界",
-+        wrapMode: "word",
-+        width: 35,
-+        left: 0,
-+        top: 0,
-+      })
-+
-+      await renderOnce()
-+
-+      const frame = captureFrame()
-+      const lines = frame.split("\\n").filter((l) => l.trim().length > 0)
-+
-+      console.log("Frame:\\n" + frame)
-+      console.log("Line 0:", JSON.stringify(lines[0]))
-+      console.log("Line 1:", JSON.stringify(lines[1]))
-+
-+      // Verify no character duplication - each character should appear only once
-+      const line0 = lines[0] || ""
-+      const line1 = lines[1] || ""
-+
-+      const line0_ends_with_kai = line0.trimEnd().endsWith("界")
-+      const line1_starts_with_kai = line1.trimStart().startsWith("界")
-+
-+      // "界" should not appear on both lines (would indicate duplication bug)
-+      expect(line0_ends_with_kai && line1_starts_with_kai).toBe(false)
-+    })
-   })
- 
-   describe("Text Node Dimension Updates", () => {`,
-  },
-]
-
-const malformedDiff = `--- a/calculator.ts
-+++ b/calculator.ts
-@@ -a,b +c,d @@
- class Calculator {
-   add(a: number, b: number): number {
-     return a + b;
-   }
- 
--  subtract(a: number, b: number): number {
--    return a - b;
-+  subtract(a: number, b: number, c: number = 0): number {
-+    return a - b - c;
-   }
- }`
-
-let renderer: CliRenderer | null = null
-let keyboardHandler: ((key: ParsedKey) => void) | null = null
-let parentContainer: BoxRenderable | null = null
-let diffRenderable: DiffRenderable | null = null
-let instructionsText: TextRenderable | null = null
-let titleBox: BoxRenderable | null = null
-let syntaxStyle: SyntaxStyle | null = null
-let helpModal: BoxRenderable | null = null
-let currentView: "unified" | "split" = "unified"
-let showLineNumbers = true
-let currentWrapMode: "none" | "word" = "none"
-let currentThemeIndex = 0
-let currentContentIndex = 0
-let showMalformedDiff = false
-let showingHelp = false
-let concealEnabled = true
-
-const applyTheme = (themeIndex: number) => {
-  const theme = themes[themeIndex]
-
-  if (renderer) {
-    renderer.setBackgroundColor(theme.backgroundColor)
-  }
-
-  if (titleBox) {
-    titleBox.borderColor = theme.borderColor
-    titleBox.backgroundColor = theme.backgroundColor
-    const contentName = contentExamples[currentContentIndex].name
-    titleBox.title = `Diff Demo - ${theme.name} - ${contentName}`
-  }
-
-  if (helpModal) {
-    helpModal.borderColor = theme.borderColor
-    helpModal.backgroundColor = theme.backgroundColor
-  }
-
-  if (syntaxStyle) {
-    syntaxStyle.destroy()
-  }
-  syntaxStyle = SyntaxStyle.fromStyles(theme.syntaxStyle)
-
-  if (diffRenderable) {
-    diffRenderable.syntaxStyle = syntaxStyle
-    diffRenderable.addedBg = theme.addedBg
-    diffRenderable.removedBg = theme.removedBg
-    diffRenderable.contextBg = theme.contextBg
-    diffRenderable.addedSignColor = theme.addedSignColor
-    diffRenderable.removedSignColor = theme.removedSignColor
-    diffRenderable.lineNumberFg = theme.lineNumberFg
-    diffRenderable.lineNumberBg = theme.lineNumberBg
-    diffRenderable.addedLineNumberBg = theme.addedLineNumberBg
-    diffRenderable.removedLineNumberBg = theme.removedLineNumberBg
-    diffRenderable.selectionBg = theme.selectionBg
-    diffRenderable.selectionFg = theme.selectionFg
-  }
-}
-
-export async function run(rendererInstance: CliRenderer): Promise<void> {
-  renderer = rendererInstance
-  renderer.start()
-
-  const theme = themes[currentThemeIndex]
-  renderer.setBackgroundColor(theme.backgroundColor)
-
-  parentContainer = new BoxRenderable(renderer, {
-    id: "parent-container",
-    zIndex: 10,
-    padding: 1,
-  })
-  renderer.root.add(parentContainer)
-
-  titleBox = new BoxRenderable(renderer, {
-    id: "title-box",
-    height: 3,
-    borderStyle: "double",
-    borderColor: theme.borderColor,
-    backgroundColor: theme.backgroundColor,
-    title: `Diff Demo - ${theme.name} - ${contentExamples[currentContentIndex].name}`,
-    titleAlignment: "center",
-    border: true,
-  })
-  parentContainer.add(titleBox)
-
-  instructionsText = new TextRenderable(renderer, {
-    id: "instructions",
-    content: "ESC to return | Press ? for keybindings",
-    fg: "#888888",
-  })
-  titleBox.add(instructionsText)
-
-  // Create help modal (hidden by default)
-  helpModal = new BoxRenderable(renderer, {
-    id: "help-modal",
-    position: "absolute",
-    left: "10%",
-    top: "10%",
-    width: "80%",
-    height: "80%",
-    border: true,
-    borderStyle: "double",
-    borderColor: theme.borderColor,
-    backgroundColor: theme.backgroundColor,
-    title: "Keybindings",
-    titleAlignment: "center",
-    padding: 2,
-    zIndex: 100,
-    visible: false,
-  })
-
-  const helpContent = new TextRenderable(renderer, {
-    id: "help-content",
-    content: `View Controls:
-  V : Toggle view mode (Unified/Split)
-  L : Toggle line numbers
-  W : Toggle wrap mode (None/Word)
-  O : Toggle conceal (hide/show markup)
-
-Theme & Content:
-  T : Cycle through themes (5 themes)
-  C : Cycle through diff examples (6 examples)
-  M : Toggle malformed diff example
-
-Other:
-  ? : Toggle this help screen
-  ESC : Return to main menu`,
-    fg: "#E6EDF3",
-  })
-
-  helpModal.add(helpContent)
-  renderer.root.add(helpModal)
-
-  syntaxStyle = SyntaxStyle.fromStyles(theme.syntaxStyle)
-
-  // Create diff display
-  const currentContent = contentExamples[currentContentIndex]
-  diffRenderable = new DiffRenderable(renderer, {
-    id: "diff-display",
-    diff: currentContent.diff,
-    view: currentView,
-    filetype: currentContent.filetype,
-    syntaxStyle,
-    showLineNumbers,
-    wrapMode: currentWrapMode,
-    conceal: concealEnabled,
-    addedBg: theme.addedBg,
-    removedBg: theme.removedBg,
-    contextBg: theme.contextBg,
-    addedSignColor: theme.addedSignColor,
-    removedSignColor: theme.removedSignColor,
-    lineNumberFg: theme.lineNumberFg,
-    lineNumberBg: theme.lineNumberBg,
-    addedLineNumberBg: theme.addedLineNumberBg,
-    removedLineNumberBg: theme.removedLineNumberBg,
-    selectionBg: theme.selectionBg,
-    selectionFg: theme.selectionFg,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-
-  parentContainer.add(diffRenderable)
-
-  keyboardHandler = (key: ParsedKey) => {
-    // Handle help modal toggle
-    if (key.raw === "?" && helpModal) {
-      showingHelp = !showingHelp
-      helpModal.visible = showingHelp
-      return
-    }
-
-    // Don't process other keys when help is showing
-    if (showingHelp) return
-
-    if (key.name === "v" && !key.ctrl && !key.meta) {
-      // Toggle view mode
-      currentView = currentView === "unified" ? "split" : "unified"
-      if (diffRenderable) {
-        diffRenderable.view = currentView
-      }
-    } else if (key.name === "l" && !key.ctrl && !key.meta) {
-      // Toggle line numbers
-      showLineNumbers = !showLineNumbers
-      if (diffRenderable) {
-        diffRenderable.showLineNumbers = showLineNumbers
-      }
-    } else if (key.name === "w" && !key.ctrl && !key.meta) {
-      // Toggle wrap mode
-      currentWrapMode = currentWrapMode === "none" ? "word" : "none"
-      if (diffRenderable) {
-        diffRenderable.wrapMode = currentWrapMode
-      }
-    } else if (key.name === "t" && !key.ctrl && !key.meta) {
-      // Change theme
-      currentThemeIndex = (currentThemeIndex + 1) % themes.length
-      applyTheme(currentThemeIndex)
-    } else if (key.name === "m" && !key.ctrl && !key.meta) {
-      // Toggle malformed diff
-      showMalformedDiff = !showMalformedDiff
-      if (diffRenderable) {
-        diffRenderable.diff = showMalformedDiff ? malformedDiff : contentExamples[currentContentIndex].diff
-      }
-    } else if (key.name === "c" && !key.ctrl && !key.meta) {
-      // Cycle through content types
-      currentContentIndex = (currentContentIndex + 1) % contentExamples.length
-      if (diffRenderable) {
-        const currentContent = contentExamples[currentContentIndex]
-        diffRenderable.diff = showMalformedDiff ? malformedDiff : currentContent.diff
-        diffRenderable.filetype = currentContent.filetype
-      }
-      if (titleBox) {
-        const theme = themes[currentThemeIndex]
-        const contentName = contentExamples[currentContentIndex].name
-        titleBox.title = `Diff Demo - ${theme.name} - ${contentName}`
-      }
-    } else if (key.name === "o" && !key.ctrl && !key.meta) {
-      // Toggle conceal
-      concealEnabled = !concealEnabled
-      if (diffRenderable) {
-        diffRenderable.conceal = concealEnabled
-      }
-    }
-  }
-
-  rendererInstance.keyInput.on("keypress", keyboardHandler)
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  if (keyboardHandler) {
-    rendererInstance.keyInput.off("keypress", keyboardHandler)
-    keyboardHandler = null
-  }
-
-  parentContainer?.destroy()
-  helpModal?.destroy()
-  parentContainer = null
-  diffRenderable = null
-  instructionsText = null
-  titleBox = null
-  syntaxStyle = null
-  helpModal = null
-
-  renderer = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 60,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}