@fairyhunter13/opentui-core 0.1.91 → 0.1.94

package/src/examples/opentui-demo.ts

@@ -1,1057 +0,0 @@
-import {
-  TextAttributes,
-  rgbToHex,
-  hsvToRgb,
-  createCliRenderer,
-  TextRenderable,
-  BoxRenderable,
-  parseColor,
-  getBorderFromSides,
-  type KeyEvent,
-} from "../index.js"
-import type { BorderCharacters, BorderSidesConfig, CliRenderer } from "../index.js"
-import { TabControllerRenderable } from "./lib/tab-controller.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let globalTabController: TabControllerRenderable | null = null
-let globalKeyboardHandler: ((key: KeyEvent) => void) | null = null
-
-export function run(renderer: CliRenderer): void {
-  renderer.start()
-  renderer.setBackgroundColor("#000028")
-
-  const tabController = new TabControllerRenderable("main-tab-controller", renderer, {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: renderer.terminalWidth,
-    height: renderer.terminalHeight,
-    zIndex: 0,
-  })
-  globalTabController = tabController
-  renderer.root.add(tabController)
-
-  // Tab: Text & Attributes
-  const wheelRadius = 7
-  const wheelCenterX = 70
-  const wheelCenterY = 15
-  let activeWheelPixels = new Set<string>()
-
-  tabController.addTab({
-    title: "Text & Attributes",
-    init: (tabGroup) => {
-      const textTitle = new TextRenderable(renderer, {
-        id: "text-title",
-        content: "Text Styling & Color Gradients",
-        position: "absolute",
-        left: 10,
-        top: 5,
-        fg: "#FFFF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(textTitle)
-
-      // Text attributes
-      const attrBold = new TextRenderable(renderer, {
-        id: "attr-bold",
-        content: "Bold Text",
-        position: "absolute",
-        left: 10,
-        top: 8,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(attrBold)
-
-      const attrItalic = new TextRenderable(renderer, {
-        id: "attr-italic",
-        content: "Italic Text",
-        position: "absolute",
-        left: 10,
-        top: 9,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.ITALIC,
-        zIndex: 10,
-      })
-      tabGroup.add(attrItalic)
-
-      const attrUnderline = new TextRenderable(renderer, {
-        id: "attr-underline",
-        content: "Underlined Text",
-        position: "absolute",
-        left: 10,
-        top: 10,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(attrUnderline)
-
-      const attrDim = new TextRenderable(renderer, {
-        id: "attr-dim",
-        content: "Dim Text",
-        position: "absolute",
-        left: 10,
-        top: 11,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.DIM,
-        zIndex: 10,
-      })
-      tabGroup.add(attrDim)
-
-      const attrCombined = new TextRenderable(renderer, {
-        id: "attr-combined",
-        content: "Bold + Italic + Underline",
-        position: "absolute",
-        left: 10,
-        top: 12,
-        fg: "#FF6464",
-        attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(attrCombined)
-
-      // Color gradient
-      const gradientTitle = new TextRenderable(renderer, {
-        id: "gradient-title",
-        content: "Rainbow Gradient:",
-        position: "absolute",
-        left: 10,
-        top: 15,
-        fg: "#CCCCCC",
-        zIndex: 10,
-      })
-      tabGroup.add(gradientTitle)
-
-      for (let i = 0; i < 40; i++) {
-        const hue = (i / 40) * 360
-        const color = hsvToRgb(hue, 1, 1)
-        const hexColor = rgbToHex(color)
-
-        const gradientPixel = new TextRenderable(renderer, {
-          id: `gradient-${i}`,
-          content: "█",
-          position: "absolute",
-          left: 10 + i,
-          top: 17,
-          fg: hexColor,
-          zIndex: 10,
-        })
-        tabGroup.add(gradientPixel)
-      }
-    },
-    update: (deltaMs: number, tabGroup: BoxRenderable) => {
-      // Animate the rotating color wheel
-      const time = Date.now() / 1000
-      const rotationSpeed = 45 // degrees per second
-      const rotationAngle = (time * rotationSpeed) % 360
-      const rotationRadians = rotationAngle * (Math.PI / 180)
-
-      // Track new wheel pixels for this frame
-      const newWheelPixels = new Set<string>()
-
-      for (let y = wheelCenterY - wheelRadius; y <= wheelCenterY + wheelRadius; y++) {
-        for (let x = wheelCenterX - wheelRadius * 2; x <= wheelCenterX + wheelRadius * 2; x++) {
-          const dx = (x - wheelCenterX) / 2 // Adjust for terminal character aspect ratio
-          const dy = y - wheelCenterY
-          const distance = Math.sqrt(dx * dx + dy * dy)
-
-          if (distance <= wheelRadius) {
-            const angle = Math.atan2(dy, dx)
-            const rotatedAngle = angle + rotationRadians
-            const hue = ((rotatedAngle / Math.PI) * 180 + 180) % 360
-            const saturation = distance / wheelRadius
-            const color = hsvToRgb(hue, saturation, 1)
-
-            const pixelId = `wheel-${x}-${y}`
-            newWheelPixels.add(pixelId)
-
-            const existingPixel = tabGroup.getRenderable(pixelId) as TextRenderable
-            if (existingPixel) {
-              existingPixel.setPosition({ left: x, top: y })
-              existingPixel.fg = color
-            } else {
-              const wheelPixel = new TextRenderable(renderer, {
-                id: pixelId,
-                content: "█",
-                position: "absolute",
-                left: x,
-                top: y,
-                fg: color,
-                zIndex: 10,
-              })
-              tabGroup.add(wheelPixel)
-              activeWheelPixels.add(pixelId)
-            }
-          }
-        }
-      }
-
-      // Remove any wheel pixels that are no longer part of the wheel
-      for (const pixelId of activeWheelPixels) {
-        if (!newWheelPixels.has(pixelId)) {
-          tabGroup.remove(pixelId)
-          activeWheelPixels.delete(pixelId)
-        }
-      }
-
-      activeWheelPixels = newWheelPixels
-    },
-    show: () => {
-      activeWheelPixels.clear()
-    },
-    hide: () => {
-      for (const pixelId of activeWheelPixels) {
-        renderer.root.remove(pixelId)
-      }
-      activeWheelPixels.clear()
-    },
-  })
-
-  // Tab: Basics
-  tabController.addTab({
-    title: "Basics",
-    init: (tabGroup) => {
-      const title = new TextRenderable(renderer, {
-        id: "opentui-title",
-        content: "Basic CLI Renderer Demo",
-        position: "absolute",
-        left: 10,
-        top: 5,
-        fg: "#FFFF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(title)
-
-      const box1 = new BoxRenderable(renderer, {
-        id: "box1",
-        position: "absolute",
-        left: 10,
-        top: 8,
-        width: 20,
-        height: 8,
-        backgroundColor: "#333366",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(box1)
-
-      const box1Title = new TextRenderable(renderer, {
-        id: "box1-title",
-        content: "Simple Box",
-        position: "absolute",
-        left: 12,
-        top: 10,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(box1Title)
-
-      const box2 = new BoxRenderable(renderer, {
-        id: "box2",
-        position: "absolute",
-        left: 35,
-        top: 10,
-        width: 25,
-        height: 6,
-        backgroundColor: "#663333",
-        zIndex: 1,
-        borderStyle: "double",
-        borderColor: "#FFFF00",
-        border: true,
-      })
-      tabGroup.add(box2)
-
-      const box2Title = new TextRenderable(renderer, {
-        id: "box2-title",
-        content: "Double Border Box",
-        position: "absolute",
-        left: 37,
-        top: 12,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(box2Title)
-
-      const description = new TextRenderable(renderer, {
-        id: "description",
-        content: "This tab demonstrates basic box and text rendering with different border styles.",
-        position: "absolute",
-        left: 10,
-        top: 18,
-        fg: "#CCCCCC",
-        zIndex: 10,
-      })
-      tabGroup.add(description)
-
-      const cursorInfo = new TextRenderable(renderer, {
-        id: "cursor-info",
-        content: "Cursor: (0,0) - Style: block",
-        position: "absolute",
-        left: 10,
-        top: 20,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(cursorInfo)
-    },
-    update: (deltaMs: number, tabGroup: BoxRenderable) => {
-      // Update cursor position (make it move in a small circle)
-      const cursorTime = Date.now() / 1000
-      const cursorX = 15 + Math.floor(3 * Math.cos(cursorTime))
-      const cursorY = 13 + Math.floor(2 * Math.sin(cursorTime))
-
-      // Change cursor style every few seconds
-      const cursorStyleIndex = Math.floor(cursorTime / 2) % 6
-      let cursorStyle: "block" | "line" | "underline" = "block"
-      let cursorBlinking = false
-
-      switch (cursorStyleIndex) {
-        case 0:
-          cursorStyle = "block"
-          cursorBlinking = false
-          break
-        case 1:
-          cursorStyle = "block"
-          cursorBlinking = true
-          break
-        case 2:
-          cursorStyle = "line"
-          cursorBlinking = false
-          break
-        case 3:
-          cursorStyle = "line"
-          cursorBlinking = true
-          break
-        case 4:
-          cursorStyle = "underline"
-          cursorBlinking = false
-          break
-        case 5:
-          cursorStyle = "underline"
-          cursorBlinking = true
-          break
-      }
-
-      renderer.setCursorStyle({ style: cursorStyle, blinking: cursorBlinking })
-      renderer.setCursorPosition(cursorX, cursorY)
-
-      // Display cursor position and style info
-      const cursorInfo = tabGroup.getRenderable("cursor-info") as TextRenderable
-      if (cursorInfo) {
-        cursorInfo.content = `Cursor: (${cursorX},${cursorY}) - Style: ${cursorStyle}${cursorBlinking ? " (blinking)" : ""}`
-      }
-    },
-    show: () => {
-      renderer.setCursorPosition(15, 13, true)
-    },
-    hide: () => {
-      renderer.setCursorPosition(0, 0, false)
-    },
-  })
-
-  // Tab: Borders
-  let partialBorderPhase = 0
-  tabController.addTab({
-    title: "Borders",
-    init: (tabGroup) => {
-      const borderTitle = new TextRenderable(renderer, {
-        id: "border-title",
-        content: "Border Styles & Partial Borders",
-        position: "absolute",
-        left: 10,
-        top: 5,
-        fg: "#FFFF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(borderTitle)
-
-      // Different border styles
-      const singleBox = new BoxRenderable(renderer, {
-        id: "single-box",
-        position: "absolute",
-        left: 10,
-        top: 8,
-        width: 15,
-        height: 5,
-        backgroundColor: "#222244",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(singleBox)
-      const singleLabel = new TextRenderable(renderer, {
-        id: "single-label",
-        content: "Single",
-        position: "absolute",
-        left: 12,
-        top: 10,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(singleLabel)
-
-      const doubleBox = new BoxRenderable(renderer, {
-        id: "double-box",
-        position: "absolute",
-        left: 30,
-        top: 8,
-        width: 15,
-        height: 5,
-        backgroundColor: "#442222",
-        zIndex: 0,
-        borderStyle: "double",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(doubleBox)
-      const doubleLabel = new TextRenderable(renderer, {
-        id: "double-label",
-        content: "Double",
-        position: "absolute",
-        left: 32,
-        top: 10,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(doubleLabel)
-
-      const roundedBox = new BoxRenderable(renderer, {
-        id: "rounded-box",
-        position: "absolute",
-        left: 50,
-        top: 8,
-        width: 15,
-        height: 5,
-        backgroundColor: "#224422",
-        zIndex: 0,
-        borderStyle: "rounded",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(roundedBox)
-      const roundedLabel = new TextRenderable(renderer, {
-        id: "rounded-label",
-        content: "Rounded",
-        position: "absolute",
-        left: 52,
-        top: 10,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(roundedLabel)
-
-      // Partial borders
-      const partialTitle = new TextRenderable(renderer, {
-        id: "partial-title",
-        content: "Partial Borders:",
-        position: "absolute",
-        left: 10,
-        top: 15,
-        fg: "#CCCCCC",
-        attributes: TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(partialTitle)
-
-      const partialLeft = new BoxRenderable(renderer, {
-        id: "partial-left",
-        position: "absolute",
-        left: 10,
-        top: 17,
-        width: 12,
-        height: 4,
-        backgroundColor: "#222244",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        border: ["left"],
-      })
-      tabGroup.add(partialLeft)
-      const partialLeftLabel = new TextRenderable(renderer, {
-        id: "partial-left-label",
-        content: "Left Only",
-        position: "absolute",
-        left: 12,
-        top: 18,
-        fg: "#FFFFFF",
-        zIndex: 10,
-      })
-      tabGroup.add(partialLeftLabel)
-
-      const partialAnimated = new BoxRenderable(renderer, {
-        id: "partial-animated",
-        position: "absolute",
-        left: 30,
-        top: 17,
-        width: 20,
-        height: 4,
-        backgroundColor: "#334455",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(partialAnimated)
-      const partialAnimatedLabel = new TextRenderable(renderer, {
-        id: "partial-animated-label",
-        content: "Animated Borders",
-        position: "absolute",
-        left: 32,
-        top: 18,
-        fg: "#FFFFFF",
-        zIndex: 10,
-      })
-      tabGroup.add(partialAnimatedLabel)
-
-      const partialPhase = new TextRenderable(renderer, {
-        id: "partial-phase",
-        content: "Phase: 1/8",
-        position: "absolute",
-        left: 30,
-        top: 22,
-        fg: "#AAAAAA",
-        zIndex: 10,
-      })
-      tabGroup.add(partialPhase)
-
-      const customBorderTitle = new TextRenderable(renderer, {
-        id: "custom-border-title",
-        content: "Custom Border Characters:",
-        position: "absolute",
-        left: 10,
-        top: 25,
-        fg: "#CCCCCC",
-        attributes: TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(customBorderTitle)
-
-      const asciiBorders: BorderCharacters = {
-        topLeft: "+",
-        topRight: "+",
-        bottomLeft: "+",
-        bottomRight: "+",
-        horizontal: "-",
-        vertical: "|",
-        topT: "+",
-        bottomT: "+",
-        leftT: "+",
-        rightT: "+",
-        cross: "+",
-      }
-
-      const blockBorders: BorderCharacters = {
-        topLeft: "█",
-        topRight: "█",
-        bottomLeft: "█",
-        bottomRight: "█",
-        horizontal: "█",
-        vertical: "█",
-        topT: "█",
-        bottomT: "█",
-        leftT: "█",
-        rightT: "█",
-        cross: "█",
-      }
-
-      const starBorders: BorderCharacters = {
-        topLeft: "*",
-        topRight: "*",
-        bottomLeft: "*",
-        bottomRight: "*",
-        horizontal: "*",
-        vertical: "*",
-        topT: "*",
-        bottomT: "*",
-        leftT: "*",
-        rightT: "*",
-        cross: "*",
-      }
-
-      const asciiBox = new BoxRenderable(renderer, {
-        id: "ascii-box",
-        position: "absolute",
-        left: 10,
-        top: 27,
-        width: 15,
-        height: 5,
-        backgroundColor: "#222244",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        customBorderChars: asciiBorders,
-        border: true,
-      })
-      tabGroup.add(asciiBox)
-      const asciiLabel = new TextRenderable(renderer, {
-        id: "ascii-label",
-        content: "ASCII Border",
-        position: "absolute",
-        left: 12,
-        top: 29,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(asciiLabel)
-
-      const blockBox = new BoxRenderable(renderer, {
-        id: "block-box",
-        position: "absolute",
-        left: 30,
-        top: 27,
-        width: 15,
-        height: 5,
-        backgroundColor: "#442222",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      blockBox.customBorderChars = blockBorders
-      tabGroup.add(blockBox)
-      const blockLabel = new TextRenderable(renderer, {
-        id: "block-label",
-        content: "Block Border",
-        position: "absolute",
-        left: 32,
-        top: 29,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(blockLabel)
-
-      const starBox = new BoxRenderable(renderer, {
-        id: "star-box",
-        position: "absolute",
-        left: 50,
-        top: 27,
-        width: 15,
-        height: 5,
-        backgroundColor: "#224422",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        customBorderChars: starBorders,
-        border: true,
-      })
-      tabGroup.add(starBox)
-      const starLabel = new TextRenderable(renderer, {
-        id: "star-label",
-        content: "Star Border",
-        position: "absolute",
-        left: 52,
-        top: 29,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(starLabel)
-    },
-    update: (deltaMs: number, tabGroup: BoxRenderable) => {
-      // Animate partial borders
-      const time = Date.now() / 1000
-      const phase = Math.floor(time % 8)
-
-      if (phase !== partialBorderPhase) {
-        partialBorderPhase = phase
-
-        const borderSides: BorderSidesConfig = {
-          top: [0, 3, 5, 7].includes(phase),
-          right: [1, 3, 6, 7].includes(phase),
-          bottom: [2, 3, 5, 7].includes(phase),
-          left: [4, 5, 6, 7].includes(phase),
-        }
-
-        const partialAnimatedBox = tabGroup.getRenderable("partial-animated") as BoxRenderable
-        if (partialAnimatedBox) {
-          partialAnimatedBox.border = getBorderFromSides(borderSides)
-          partialAnimatedBox.borderStyle = "single"
-        }
-
-        const partialPhaseText = tabGroup.getRenderable("partial-phase") as TextRenderable
-        if (partialPhaseText) {
-          partialPhaseText.content = `Phase: ${phase + 1}/8`
-        }
-      }
-    },
-  })
-
-  // Tab: Animation
-  let animPosition = 5
-  let animDirection = 1
-  let animSpeed = 15
-  tabController.addTab({
-    title: "Animation",
-    init: (tabGroup) => {
-      const animTitle = new TextRenderable(renderer, {
-        id: "anim-title",
-        content: "Animation Demonstrations",
-        position: "absolute",
-        left: 10,
-        top: 5,
-        fg: "#FFFF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(animTitle)
-
-      const movingText = new TextRenderable(renderer, {
-        id: "moving-text",
-        content: "Moving Text",
-        position: "absolute",
-        left: animPosition,
-        top: 8,
-        fg: "#00FF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(movingText)
-
-      const animatedBox = new BoxRenderable(renderer, {
-        id: "animated-box",
-        position: "absolute",
-        left: animPosition,
-        top: 10,
-        width: 10,
-        height: 3,
-        backgroundColor: "#550055",
-        zIndex: 0,
-        borderStyle: "rounded",
-        borderColor: "#FF00FF",
-        border: true,
-      })
-      tabGroup.add(animatedBox)
-
-      const colorBox = new BoxRenderable(renderer, {
-        id: "color-box",
-        position: "absolute",
-        left: 50,
-        top: 12,
-        width: 18,
-        height: 5,
-        backgroundColor: "#550055",
-        zIndex: 0,
-        borderStyle: "double",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(colorBox)
-
-      const colorBoxTitle = new TextRenderable(renderer, {
-        id: "color-box-title",
-        content: "Animated Color",
-        position: "absolute",
-        left: 52,
-        top: 14,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(colorBoxTitle)
-    },
-    update: (deltaMs: number, tabGroup: BoxRenderable) => {
-      // Animate moving elements
-      const deltaTime = Math.min(deltaMs / 1000, 0.1)
-      animPosition += animSpeed * animDirection * deltaTime
-
-      if (animPosition > 40) {
-        animPosition = 40
-        animDirection = -1
-      } else if (animPosition < 5) {
-        animPosition = 5
-        animDirection = 1
-      }
-
-      const x = Math.round(animPosition)
-
-      const movingText = tabGroup.getRenderable("moving-text") as TextRenderable
-      if (movingText) {
-        movingText.setPosition({ left: x, top: 8 })
-      }
-
-      const animatedBox = tabGroup.getRenderable("animated-box") as BoxRenderable
-      if (animatedBox) {
-        animatedBox.setPosition({ left: x, top: 10 })
-      }
-
-      // Animate color-changing box
-      const time = Date.now() / 1000
-      const hue = (time * 30) % 360
-      const color = hsvToRgb(hue, 1, 0.7)
-      const hexColor = rgbToHex(color)
-
-      const colorBox = tabGroup.getRenderable("color-box") as BoxRenderable
-      if (colorBox) {
-        colorBox.backgroundColor = parseColor(hexColor)
-      }
-    },
-  })
-
-  // Tab: Titles
-  tabController.addTab({
-    title: "Titles",
-    init: (tabGroup) => {
-      const layoutTitle = new TextRenderable(renderer, {
-        id: "layout-title",
-        content: "Box Titles",
-        position: "absolute",
-        left: 10,
-        top: 5,
-        fg: "#FFFF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(layoutTitle)
-
-      // Boxes with titles and different alignments
-      const titledLeft = new BoxRenderable(renderer, {
-        id: "titled-left",
-        position: "absolute",
-        left: 10,
-        top: 8,
-        width: 20,
-        height: 5,
-        backgroundColor: "#222244",
-        zIndex: 0,
-        borderStyle: "single",
-        borderColor: "#FFFFFF",
-        title: "Left Aligned",
-        titleAlignment: "left",
-        border: true,
-      })
-      tabGroup.add(titledLeft)
-
-      const titledCenter = new BoxRenderable(renderer, {
-        id: "titled-center",
-        position: "absolute",
-        left: 35,
-        top: 8,
-        width: 20,
-        height: 5,
-        backgroundColor: "#442222",
-        zIndex: 0,
-        borderStyle: "double",
-        borderColor: "#FFFFFF",
-        title: "Centered Title",
-        titleAlignment: "center",
-        border: true,
-      })
-      tabGroup.add(titledCenter)
-
-      const titledRight = new BoxRenderable(renderer, {
-        id: "titled-right",
-        position: "absolute",
-        left: 60,
-        top: 8,
-        width: 20,
-        height: 5,
-        backgroundColor: "#224422",
-        zIndex: 0,
-        borderStyle: "rounded",
-        borderColor: "#FFFFFF",
-        title: "Right Aligned",
-        titleAlignment: "right",
-        border: true,
-      })
-      tabGroup.add(titledRight)
-    },
-  })
-
-  // Tab: Interactive
-  const interactiveBorderSides = {
-    top: true,
-    right: true,
-    bottom: true,
-    left: true,
-  }
-
-  tabController.addTab({
-    title: "Interactive",
-    init: (tabGroup) => {
-      const interactiveTitle = new TextRenderable(renderer, {
-        id: "interactive-title",
-        content: "Interactive Controls",
-        position: "absolute",
-        left: 10,
-        top: 5,
-        fg: "#FFFF00",
-        attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(interactiveTitle)
-
-      const interactiveBorder = new BoxRenderable(renderer, {
-        id: "interactive-border",
-        position: "absolute",
-        left: 15,
-        top: 8,
-        width: 40,
-        height: 8,
-        backgroundColor: "#333344",
-        zIndex: 0,
-        borderStyle: "double",
-        borderColor: "#FFFFFF",
-        border: true,
-      })
-      tabGroup.add(interactiveBorder)
-
-      const interactiveLabel = new TextRenderable(renderer, {
-        id: "interactive-label",
-        content: "Press keys to toggle borders",
-        position: "absolute",
-        left: 22,
-        top: 12,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.BOLD,
-        zIndex: 10,
-      })
-      tabGroup.add(interactiveLabel)
-
-      const interactiveInstructions = new TextRenderable(renderer, {
-        id: "interactive-instructions",
-        content: "Keyboard Controls:",
-        position: "absolute",
-        left: 10,
-        top: 18,
-        fg: "#FFFFFF",
-        attributes: TextAttributes.UNDERLINE,
-        zIndex: 10,
-      })
-      tabGroup.add(interactiveInstructions)
-
-      const keyT = new TextRenderable(renderer, {
-        id: "key-t",
-        content: "T - Toggle top border",
-        position: "absolute",
-        left: 10,
-        top: 19,
-        fg: "#CCCCCC",
-        zIndex: 10,
-      })
-      tabGroup.add(keyT)
-
-      const keyR = new TextRenderable(renderer, {
-        id: "key-r",
-        content: "R - Toggle right border",
-        position: "absolute",
-        left: 10,
-        top: 20,
-        fg: "#CCCCCC",
-        zIndex: 10,
-      })
-      tabGroup.add(keyR)
-
-      const keyB = new TextRenderable(renderer, {
-        id: "key-b",
-        content: "B - Toggle bottom border",
-        position: "absolute",
-        left: 10,
-        top: 21,
-        fg: "#CCCCCC",
-        zIndex: 10,
-      })
-      tabGroup.add(keyB)
-
-      const keyL = new TextRenderable(renderer, {
-        id: "key-l",
-        content: "L - Toggle left border",
-        position: "absolute",
-        left: 10,
-        top: 22,
-        fg: "#CCCCCC",
-        zIndex: 10,
-      })
-      tabGroup.add(keyL)
-
-      const borderState = new TextRenderable(renderer, {
-        id: "border-state",
-        content: "Active borders: All",
-        position: "absolute",
-        left: 10,
-        top: 24,
-        fg: "#AAAAAA",
-        zIndex: 10,
-      })
-      tabGroup.add(borderState)
-    },
-    update: (deltaMs: number, tabGroup: BoxRenderable) => {
-      // Update interactive border state
-      const interactiveBorder = tabGroup.getRenderable("interactive-border") as BoxRenderable
-      if (interactiveBorder) {
-        interactiveBorder.border = getBorderFromSides(interactiveBorderSides)
-      }
-
-      let borderDesc = ""
-      if (interactiveBorderSides.top) borderDesc += "Top "
-      if (interactiveBorderSides.right) borderDesc += "Right "
-      if (interactiveBorderSides.bottom) borderDesc += "Bottom "
-      if (interactiveBorderSides.left) borderDesc += "Left "
-      if (!borderDesc) borderDesc = "None"
-
-      const borderState = tabGroup.getRenderable("border-state") as TextRenderable
-      if (borderState) {
-        borderState.content = `Active borders: ${borderDesc}`
-      }
-    },
-  })
-
-  tabController.focus()
-
-  globalKeyboardHandler = (key: KeyEvent) => {
-    // Interactive border controls (only active in Interactive tab)
-    if (tabController.getCurrentTab().title === "Interactive") {
-      if (key.name === "t" || key.name === "T") {
-        interactiveBorderSides.top = !interactiveBorderSides.top
-      } else if (key.name === "r" || key.name === "R") {
-        interactiveBorderSides.right = !interactiveBorderSides.right
-      } else if (key.name === "b" || key.name === "B") {
-        interactiveBorderSides.bottom = !interactiveBorderSides.bottom
-      } else if (key.name === "l" || key.name === "L") {
-        interactiveBorderSides.left = !interactiveBorderSides.left
-      }
-    }
-  }
-
-  renderer.keyInput.on("keypress", globalKeyboardHandler)
-}
-
-export function destroy(renderer: CliRenderer): void {
-  renderer.clearFrameCallbacks()
-
-  if (globalKeyboardHandler) {
-    renderer.keyInput.off("keypress", globalKeyboardHandler)
-    globalKeyboardHandler = null
-  }
-
-  if (globalTabController) {
-    renderer.root.remove(globalTabController.id)
-    globalTabController = null
-  }
-
-  renderer.setCursorPosition(0, 0, false)
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}