@fairyhunter13/opentui-core 0.1.91 → 0.1.92

package/src/examples/framebuffer-demo.ts

@@ -1,674 +0,0 @@
-#!/usr/bin/env bun
-
-import {
-  CliRenderer,
-  createCliRenderer,
-  RGBA,
-  TextAttributes,
-  TextRenderable,
-  FrameBufferRenderable,
-  BoxRenderable,
-  ASCIIFontRenderable,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-/**
- * This demo showcases framebuffers with multiple
- * overlapping framebuffers and transparency.
- */
-
-let boxX = 10
-let boxY = 10
-let boxDx = 5
-let boxDy = 3
-let ballX = 20
-let ballY = 20
-let ballDx = 15
-let ballDy = 10
-let currentWidth = 10
-let currentHeight = 5
-let growingWidth = true
-let growingHeight = true
-let lastResizeTime = 0
-const resizeInterval = 0.1
-let parentContainer: BoxRenderable | null = null
-
-export function run(renderer: CliRenderer): void {
-  renderer.start()
-  const backgroundColor = RGBA.fromInts(10, 10, 30)
-  renderer.setBackgroundColor(backgroundColor)
-
-  parentContainer = new BoxRenderable(renderer, {
-    id: "framebuffer-container",
-    zIndex: 10,
-  })
-  renderer.root.add(parentContainer)
-
-  const titleText = new TextRenderable(renderer, {
-    id: "framebuffer_title",
-    content: "FrameBuffer Demo",
-    position: "absolute",
-    left: 2,
-    top: 1,
-    fg: RGBA.fromInts(255, 255, 100),
-    attributes: TextAttributes.BOLD,
-    zIndex: 1000,
-  })
-  parentContainer.add(titleText)
-
-  const subtitleText = new TextRenderable(renderer, {
-    id: "framebuffer_subtitle",
-    content: "Showcasing framebuffers with transparency and partial drawing",
-    position: "absolute",
-    left: 2,
-    top: 2,
-    fg: RGBA.fromInts(200, 200, 200),
-    zIndex: 1000,
-  })
-  parentContainer.add(subtitleText)
-
-  const instructionsText = new TextRenderable(renderer, {
-    id: "framebuffer_instructions",
-    content: "Press Escape to return to menu",
-    position: "absolute",
-    left: 2,
-    top: 3,
-    fg: RGBA.fromInts(150, 150, 150),
-    zIndex: 1000,
-  })
-  parentContainer.add(instructionsText)
-
-  const patternBufferRenderable = new FrameBufferRenderable(renderer, {
-    id: "pattern",
-    width: renderer.terminalWidth,
-    height: renderer.terminalHeight,
-    position: "absolute",
-    zIndex: 0,
-    respectAlpha: true,
-  })
-  renderer.root.add(patternBufferRenderable)
-  const { frameBuffer: patternBuffer } = patternBufferRenderable
-
-  for (let y = 0; y < patternBuffer.height; y++) {
-    for (let x = 0; x < patternBuffer.width; x++) {
-      if ((x + y) % 5 === 0) {
-        patternBuffer.drawText("·", x, y, RGBA.fromInts(50, 50, 80))
-      }
-    }
-  }
-
-  const nestedBox = new BoxRenderable(renderer, {
-    id: "nested-box",
-    width: 20,
-    height: 10,
-    position: "absolute",
-    left: 4,
-    top: 4,
-    zIndex: 5,
-    border: true,
-    title: "Nested example",
-    backgroundColor: RGBA.fromInts(120, 0, 120, 120),
-  })
-  parentContainer.add(nestedBox)
-
-  const innerBoxWidth = 10
-  const innerBoxHeight = 4
-
-  const nestedInnerBox = new BoxRenderable(renderer, {
-    id: "nested-inner-box",
-    width: innerBoxWidth,
-    height: innerBoxHeight,
-    left: 3,
-    top: 3,
-    zIndex: 1,
-    // buffered: true,
-    border: true,
-    title: "Inner",
-    backgroundColor: RGBA.fromInts(0, 255, 0, 10),
-  })
-  nestedBox.add(nestedInnerBox)
-
-  const boxObj = new BoxRenderable(renderer, {
-    id: "moving-box",
-    width: 20,
-    height: 10,
-    position: "absolute",
-    left: 10,
-    top: 10,
-    zIndex: 1,
-    overflow: "hidden",
-    // NOTE: This color is rendered, it is just overlayed by the boxFrame fill color
-    backgroundColor: RGBA.fromInts(255, 120, 120, 255),
-  })
-
-  boxObj.add(
-    new ASCIIFontRenderable(renderer, {
-      id: "moving-box-ascii",
-      text: "ASCII",
-      position: "relative",
-      left: 2,
-      top: 5,
-      zIndex: 2,
-    }),
-  )
-
-  const boxFrame = new FrameBufferRenderable(renderer, {
-    id: "moving-box-buffer",
-    width: 20,
-    height: 10,
-    position: "relative",
-    marginTop: -2,
-    zIndex: 1,
-    respectAlpha: true,
-  })
-
-  boxObj.add(boxFrame)
-
-  renderer.root.add(boxObj)
-  const boxBuffer = boxFrame.frameBuffer
-
-  const boxColor = RGBA.fromInts(80, 30, 100, 128)
-  boxBuffer.fillRect(0, 0, 20, 10, boxColor)
-
-  for (let x = 0; x < 20; x++) {
-    boxBuffer.drawText("-", x, 0, RGBA.fromInts(150, 100, 200))
-    boxBuffer.drawText("-", x, 9, RGBA.fromInts(150, 100, 200))
-  }
-  for (let y = 0; y < 10; y++) {
-    boxBuffer.drawText("|", 0, y, RGBA.fromInts(150, 100, 200))
-    boxBuffer.drawText("|", 19, y, RGBA.fromInts(150, 100, 200))
-  }
-
-  boxBuffer.drawText("+", 0, 0, RGBA.fromInts(200, 150, 255))
-  boxBuffer.drawText("+", 19, 0, RGBA.fromInts(200, 150, 255))
-  boxBuffer.drawText("+", 0, 9, RGBA.fromInts(200, 150, 255))
-  boxBuffer.drawText("+", 19, 9, RGBA.fromInts(200, 150, 255))
-
-  boxBuffer.drawText("Moving Box", 5, 2, RGBA.fromInts(255, 255, 255), RGBA.fromInts(100, 40, 120), TextAttributes.BOLD)
-
-  const overlayBufferRenderable = new FrameBufferRenderable(renderer, {
-    id: "overlay",
-    width: 40,
-    height: 15,
-    position: "absolute",
-    left: 30,
-    top: 15,
-    zIndex: 2,
-    respectAlpha: true,
-  })
-  renderer.root.add(overlayBufferRenderable)
-  const { frameBuffer: overlayBuffer } = overlayBufferRenderable
-
-  for (let y = 0; y < overlayBuffer.height; y++) {
-    for (let x = 0; x < overlayBuffer.width; x++) {
-      if ((x + y) % 3 !== 0) {
-        overlayBuffer.setCell(x, y, " ", RGBA.fromInts(255, 255, 255), RGBA.fromInts(0, 100, 150, 128))
-      }
-    }
-  }
-
-  overlayBuffer.drawText(
-    "Transparent Overlay",
-    10,
-    2,
-    RGBA.fromInts(255, 255, 255),
-    RGBA.fromInts(0, 120, 180, 180),
-    TextAttributes.BOLD,
-  )
-  overlayBuffer.drawText(
-    "This overlay has transparent",
-    5,
-    5,
-    RGBA.fromInts(255, 0, 255),
-    RGBA.fromInts(0, 120, 180, 180),
-  )
-  overlayBuffer.drawText(
-    "cells that let content below",
-    5,
-    6,
-    RGBA.fromInts(255, 255, 255),
-    RGBA.fromInts(0, 120, 180, 180),
-  )
-  overlayBuffer.drawText("show through!", 5, 7, RGBA.fromInts(255, 255, 255), RGBA.fromInts(0, 120, 180, 180))
-
-  const ballObj = new FrameBufferRenderable(renderer, {
-    id: "ball",
-    width: 3,
-    height: 3,
-    position: "absolute",
-    left: 20,
-    top: 20,
-    zIndex: 3,
-  })
-  renderer.root.add(ballObj)
-  const ballBuffer = ballObj.frameBuffer
-
-  ballBuffer.drawText(" ", 0, 0, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 1, 0, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 2, 0, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 0, 1, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText("O", 1, 1, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 2, 1, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 0, 2, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 1, 2, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-  ballBuffer.drawText(" ", 2, 2, RGBA.fromInts(255, 255, 255), RGBA.fromInts(200, 50, 50))
-
-  const resizableObj = new FrameBufferRenderable(renderer, {
-    id: "resizable-box",
-    width: 10,
-    height: 5,
-    position: "absolute",
-    left: 50,
-    top: 8,
-    zIndex: 3,
-  })
-  renderer.root.add(resizableObj)
-  const resizableBuffer = resizableObj.frameBuffer
-
-  function drawResizableContent() {
-    resizableBuffer.clear(RGBA.fromInts(0, 0, 0, 0))
-
-    for (let x = 0; x < resizableBuffer.width; x++) {
-      resizableBuffer.drawText("=", x, 0, RGBA.fromInts(255, 200, 100))
-      resizableBuffer.drawText("=", x, resizableBuffer.height - 1, RGBA.fromInts(255, 200, 100))
-    }
-
-    for (let y = 0; y < resizableBuffer.height; y++) {
-      resizableBuffer.drawText("|", 0, y, RGBA.fromInts(255, 200, 100))
-      resizableBuffer.drawText("|", resizableBuffer.width - 1, y, RGBA.fromInts(255, 200, 100))
-    }
-
-    resizableBuffer.drawText("+", 0, 0, RGBA.fromInts(255, 230, 150))
-    resizableBuffer.drawText("+", resizableBuffer.width - 1, 0, RGBA.fromInts(255, 230, 150))
-    resizableBuffer.drawText("+", 0, resizableBuffer.height - 1, RGBA.fromInts(255, 230, 150))
-    resizableBuffer.drawText("+", resizableBuffer.width - 1, resizableBuffer.height - 1, RGBA.fromInts(255, 230, 150))
-
-    if (resizableBuffer.width >= 18 && resizableBuffer.height >= 3) {
-      resizableBuffer.drawText(
-        "Resizable Box",
-        Math.floor((resizableBuffer.width - 13) / 2),
-        2,
-        RGBA.fromInts(255, 255, 100),
-        undefined,
-        TextAttributes.BOLD,
-      )
-    }
-  }
-
-  drawResizableContent()
-
-  // Create a large source framebuffer for partial drawing demonstration
-  const sourceObj = new FrameBufferRenderable(renderer, {
-    id: "large-source",
-    width: 40,
-    height: 20,
-    position: "absolute",
-    zIndex: -1,
-    visible: false,
-  })
-  renderer.root.add(sourceObj)
-  const sourceBuffer = sourceObj.frameBuffer
-
-  // Fill source buffer with a pattern we can crop from
-  for (let y = 0; y < sourceBuffer.height; y++) {
-    for (let x = 0; x < sourceBuffer.width; x++) {
-      const char = String.fromCharCode(65 + ((x + y) % 26)) // A-Z pattern
-      const hue = (x * 10 + y * 5) % 360
-      const r = Math.floor(128 + 127 * Math.sin((hue * Math.PI) / 180))
-      const g = Math.floor(128 + 127 * Math.sin(((hue + 120) * Math.PI) / 180))
-      const b = Math.floor(128 + 127 * Math.sin(((hue + 240) * Math.PI) / 180))
-      sourceBuffer.drawText(char, x, y, RGBA.fromInts(r, g, b))
-    }
-  }
-
-  // Create smaller framebuffers to demonstrate partial drawing
-  const cropBuffer1Renderable = new FrameBufferRenderable(renderer, {
-    id: "crop-demo-1",
-    width: 12,
-    height: 8,
-    position: "absolute",
-    left: 5,
-    top: 35,
-    zIndex: 4,
-  })
-  renderer.root.add(cropBuffer1Renderable)
-  const { frameBuffer: cropBuffer1 } = cropBuffer1Renderable
-
-  const cropBuffer2Renderable = new FrameBufferRenderable(renderer, {
-    id: "crop-demo-2",
-    width: 15,
-    height: 6,
-    position: "absolute",
-    left: 25,
-    top: 35,
-    zIndex: 4,
-  })
-  renderer.root.add(cropBuffer2Renderable)
-  const { frameBuffer: cropBuffer2 } = cropBuffer2Renderable
-
-  const cropBuffer3Renderable = new FrameBufferRenderable(renderer, {
-    id: "crop-demo-3",
-    width: 10,
-    height: 10,
-    position: "absolute",
-    left: 45,
-    top: 35,
-    zIndex: 4,
-  })
-  renderer.root.add(cropBuffer3Renderable)
-  const { frameBuffer: cropBuffer3 } = cropBuffer3Renderable
-
-  // Label for the crop demo
-  const cropDemoLabel = new TextRenderable(renderer, {
-    id: "crop_demo_label",
-    content: "Partial FrameBuffer Drawing Demo:",
-    position: "absolute",
-    left: 5,
-    top: 34,
-    fg: RGBA.fromInts(255, 255, 200),
-    attributes: TextAttributes.BOLD,
-    zIndex: 1000,
-  })
-  parentContainer.add(cropDemoLabel)
-
-  // Emoji demo using encodeUnicode and drawChar
-  const emojiBufferRenderable = new FrameBufferRenderable(renderer, {
-    id: "emoji-demo",
-    width: 20,
-    height: 5,
-    position: "absolute",
-    left: 60,
-    top: 35,
-    zIndex: 4,
-  })
-  renderer.root.add(emojiBufferRenderable)
-  const { frameBuffer: emojiBuffer } = emojiBufferRenderable
-
-  const emojiDemoLabel = new TextRenderable(renderer, {
-    id: "emoji_demo_label",
-    content: "encodeUnicode Demo:",
-    position: "absolute",
-    left: 60,
-    top: 34,
-    fg: RGBA.fromInts(255, 255, 200),
-    attributes: TextAttributes.BOLD,
-    zIndex: 1000,
-  })
-  parentContainer.add(emojiDemoLabel)
-
-  // Pre-encode the monkey emoji frames
-  const monkeyFrames = ["🐵 ", "🙈 ", "🙉 ", "🙊 "]
-  let currentMonkeyFrame = 0
-  let lastMonkeyFrameTime = 0
-  const monkeyFrameInterval = 0.3 // Change frame every 300ms
-
-  boxX = 10
-  boxY = 10
-  boxDx = 5
-  boxDy = 3
-  ballX = 20
-  ballY = 20
-  ballDx = 15
-  ballDy = 10
-  currentWidth = 10
-  currentHeight = 5
-  growingWidth = true
-  growingHeight = true
-  lastResizeTime = 0
-
-  renderer.setFrameCallback(async (deltaTime) => {
-    const clampedDelta = Math.min(deltaTime, 100) / 1000
-
-    boxX += boxDx * clampedDelta
-    boxY += boxDy * clampedDelta
-
-    if (boxX < 0) {
-      boxX = 0
-      boxDx = Math.abs(boxDx)
-    } else if (boxX + boxBuffer.width > renderer.terminalWidth) {
-      boxX = renderer.terminalWidth - boxBuffer.width
-      boxDx = -Math.abs(boxDx)
-    }
-
-    if (boxY < 5) {
-      boxY = 5
-      boxDy = Math.abs(boxDy)
-    } else if (boxY + boxBuffer.height > renderer.terminalHeight) {
-      boxY = renderer.terminalHeight - boxBuffer.height
-      boxDy = -Math.abs(boxDy)
-    }
-
-    boxObj.x = Math.round(boxX)
-    boxObj.y = Math.round(boxY)
-
-    ballX += ballDx * clampedDelta
-    ballY += ballDy * clampedDelta
-
-    if (ballX < 0) {
-      ballX = 0
-      ballDx = Math.abs(ballDx)
-    } else if (ballX + ballBuffer.width > renderer.terminalWidth) {
-      ballX = renderer.terminalWidth - ballBuffer.width
-      ballDx = -Math.abs(ballDx)
-    }
-
-    if (ballY < 5) {
-      ballY = 5
-      ballDy = Math.abs(ballDy)
-    } else if (ballY + ballBuffer.height > renderer.terminalHeight) {
-      ballY = renderer.terminalHeight - ballBuffer.height
-      ballDy = -Math.abs(ballDy)
-    }
-
-    ballObj.x = Math.round(ballX)
-    ballObj.y = Math.round(ballY)
-
-    const time = Date.now() / 1000
-
-    // Update partial drawing demonstration
-    const scrollOffset = Math.floor(time * 3) % 20 // Scroll through source buffer
-
-    // Clear crop demo buffers
-    cropBuffer1.clear(RGBA.fromInts(0, 0, 0, 1))
-    cropBuffer2.clear(RGBA.fromInts(0, 0, 0, 1))
-    cropBuffer3.clear(RGBA.fromInts(0, 0, 0, 1))
-
-    // Demo 1: Top-left crop that scrolls horizontally
-    cropBuffer1.drawFrameBuffer(0, 0, sourceBuffer, scrollOffset, 0, 12, 8)
-    cropBuffer1.drawText(
-      "TopLeft",
-      1,
-      7,
-      RGBA.fromInts(255, 255, 255),
-      RGBA.fromInts(0, 0, 0, 180),
-      TextAttributes.BOLD,
-    )
-
-    // Demo 2: Center crop - super simple slow movement
-    const centerX = 10 + Math.floor((Math.sin(time * 0.3) + 1) * 5) // 10 to 20, very slow
-    const centerY = 5 + Math.floor((Math.cos(time * 0.2) + 1) * 3) // 5 to 11, very slow
-    cropBuffer2.drawFrameBuffer(0, 0, sourceBuffer, centerX, centerY, 15, 6)
-    cropBuffer2.drawText("Center", 1, 5, RGBA.fromInts(255, 255, 255), RGBA.fromInts(0, 0, 0, 180), TextAttributes.BOLD)
-
-    // Demo 3: Bottom-right crop - simple back and forth
-    const brX = 20 + Math.floor((Math.sin(time * 0.4) + 1) * 5) // 20 to 30, very slow
-    const brY = 5 + Math.floor((Math.cos(time * 0.4) + 1) * 3) // 5 to 11, same speed for circle
-    cropBuffer3.drawFrameBuffer(0, 0, sourceBuffer, brX, brY, 10, 10)
-    cropBuffer3.drawText(
-      "BotRight",
-      1,
-      9,
-      RGBA.fromInts(255, 255, 255),
-      RGBA.fromInts(0, 0, 0, 180),
-      TextAttributes.BOLD,
-    )
-
-    if (time - lastResizeTime > resizeInterval) {
-      lastResizeTime = time
-
-      if (growingWidth) {
-        currentWidth++
-        if (currentWidth >= 30) growingWidth = false
-      } else {
-        currentWidth--
-        if (currentWidth <= 10) growingWidth = true
-      }
-
-      if (growingHeight) {
-        currentHeight++
-        if (currentHeight >= 15) growingHeight = false
-      } else {
-        currentHeight--
-        if (currentHeight <= 5) growingHeight = true
-      }
-
-      resizableBuffer.resize(currentWidth, currentHeight)
-
-      drawResizableContent()
-
-      const centerX = 50
-      const centerY = 8
-
-      resizableObj.x = Math.round(centerX - currentWidth / 2)
-      resizableObj.y = Math.round(centerY - currentHeight / 2)
-    }
-
-    const hue = (time * 20) % 360
-    const r = Math.floor(128 + 127 * Math.sin((hue * Math.PI) / 180))
-    const g = Math.floor(128 + 127 * Math.sin(((hue + 120) * Math.PI) / 180))
-    const b = Math.floor(128 + 127 * Math.sin(((hue + 240) * Math.PI) / 180))
-
-    if (Math.floor(time * 10) % 1 === 0) {
-      overlayBuffer.clear(RGBA.fromInts(0, 0, 0, 0))
-
-      for (let y = 0; y < overlayBuffer.height; y++) {
-        for (let x = 0; x < overlayBuffer.width; x++) {
-          if ((x + y) % 3 !== 0) {
-            overlayBuffer.setCell(x, y, " ", RGBA.fromInts(255, 255, 255), RGBA.fromInts(r, g, b, 128))
-          }
-        }
-      }
-
-      overlayBuffer.drawText(
-        "Transparent Overlay",
-        10,
-        2,
-        RGBA.fromInts(255, 255, 255),
-        RGBA.fromInts(255, 255, 255, 180),
-        TextAttributes.BOLD,
-      )
-      overlayBuffer.drawText(
-        "This overlay has transparent",
-        5,
-        5,
-        RGBA.fromInts(255, 255, 255),
-        RGBA.fromInts(255, 255, 255, 180),
-      )
-      overlayBuffer.drawText(
-        "cells that let content below",
-        5,
-        6,
-        RGBA.fromInts(255, 255, 255),
-        RGBA.fromInts(255, 255, 255, 180),
-      )
-      overlayBuffer.drawText("show through!", 5, 7, RGBA.fromInts(255, 255, 255), RGBA.fromInts(255, 255, 255, 180))
-    }
-
-    // Update monkey emoji animation
-    if (time - lastMonkeyFrameTime > monkeyFrameInterval) {
-      lastMonkeyFrameTime = time
-      currentMonkeyFrame = (currentMonkeyFrame + 1) % monkeyFrames.length
-
-      // Clear emoji buffer
-      emojiBuffer.clear(RGBA.fromInts(0, 0, 0, 1))
-
-      // Draw border
-      for (let x = 0; x < emojiBuffer.width; x++) {
-        emojiBuffer.drawText("=", x, 0, RGBA.fromInts(255, 200, 100))
-        emojiBuffer.drawText("=", x, emojiBuffer.height - 1, RGBA.fromInts(255, 200, 100))
-      }
-      for (let y = 0; y < emojiBuffer.height; y++) {
-        emojiBuffer.drawText("|", 0, y, RGBA.fromInts(255, 200, 100))
-        emojiBuffer.drawText("|", emojiBuffer.width - 1, y, RGBA.fromInts(255, 200, 100))
-      }
-      emojiBuffer.drawText("+", 0, 0, RGBA.fromInts(255, 230, 150))
-      emojiBuffer.drawText("+", emojiBuffer.width - 1, 0, RGBA.fromInts(255, 230, 150))
-      emojiBuffer.drawText("+", 0, emojiBuffer.height - 1, RGBA.fromInts(255, 230, 150))
-      emojiBuffer.drawText("+", emojiBuffer.width - 1, emojiBuffer.height - 1, RGBA.fromInts(255, 230, 150))
-
-      // Draw only the current frame using encodeUnicode and drawChar
-      const fg = RGBA.fromInts(255, 255, 255)
-      const bg = RGBA.fromInts(0, 0, 0, 0) // Transparent background
-
-      // Encode the current frame
-      const currentFrame = monkeyFrames[currentMonkeyFrame]
-      const encoded = emojiBuffer.encodeUnicode(currentFrame)
-
-      if (encoded) {
-        let x = 7 // Center the emoji
-        for (const encodedChar of encoded.data) {
-          emojiBuffer.drawChar(encodedChar.char, x, 2, fg, bg)
-          x += encodedChar.width
-        }
-        emojiBuffer.freeUnicode(encoded)
-      }
-
-      // Draw frame indicator
-      const frameText = `Frame ${currentMonkeyFrame + 1}/4`
-      emojiBuffer.drawText(frameText, 5, 3, RGBA.fromInts(200, 200, 200))
-    }
-  })
-
-  const debugInstructionsText = new TextRenderable(renderer, {
-    id: "framebuffer_debug_instructions",
-    content: "Press 1-4 to change corner | Escape: Back to menu",
-    position: "absolute",
-    left: 2,
-    top: 2,
-    fg: RGBA.fromInts(200, 200, 200),
-    zIndex: 1000,
-  })
-  parentContainer.add(debugInstructionsText)
-}
-
-export function destroy(renderer: CliRenderer): void {
-  renderer.clearFrameCallbacks()
-
-  if (parentContainer) {
-    renderer.root.remove("framebuffer-container")
-    parentContainer = null
-  }
-
-  renderer.root.remove("pattern")
-  renderer.root.remove("moving-box")
-  renderer.root.remove("overlay")
-  renderer.root.remove("ball")
-  renderer.root.remove("resizable-box")
-  renderer.root.remove("large-source")
-  renderer.root.remove("crop-demo-1")
-  renderer.root.remove("crop-demo-2")
-  renderer.root.remove("crop-demo-3")
-  renderer.root.remove("emoji-demo")
-
-  boxX = 10
-  boxY = 10
-  boxDx = 5
-  boxDy = 3
-  ballX = 20
-  ballY = 20
-  ballDx = 15
-  ballDy = 10
-  currentWidth = 10
-  currentHeight = 5
-  growingWidth = true
-  growingHeight = true
-  lastResizeTime = 0
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}