@fairyhunter13/opentui-core 0.1.90 → 0.1.92

package/src/examples/index.ts

@@ -1,925 +0,0 @@
-#!/usr/bin/env bun
-
-import {
-  ASCIIFontRenderable,
-  BoxRenderable,
-  CliRenderer,
-  createCliRenderer,
-  FrameBufferRenderable,
-  RGBA,
-  SelectRenderable,
-  SelectRenderableEvents,
-  TextareaRenderable,
-  TextRenderable,
-  TimeToFirstDrawRenderable,
-  type KeyEvent,
-  type SelectOption,
-  type ThemeMode,
-} from "../index.js"
-import { measureText } from "../lib/ascii.font.js"
-import * as goldenStarDemo from "./golden-star-demo.js"
-import * as boxExample from "./fonts.js"
-import * as fractalShaderExample from "./fractal-shader-demo.js"
-import * as framebufferExample from "./framebuffer-demo.js"
-import * as lightsPhongExample from "./lights-phong-demo.js"
-import * as physxPlanckExample from "./physx-planck-2d-demo.js"
-import * as physxRapierExample from "./physx-rapier-2d-demo.js"
-import * as opentuiDemo from "./opentui-demo.js"
-import * as nestedZIndexDemo from "./nested-zindex-demo.js"
-import * as relativePositioningDemo from "./relative-positioning-demo.js"
-import * as transparencyDemo from "./transparency-demo.js"
-import * as draggableThreeDemo from "./draggable-three-demo.js"
-import * as scrollExample from "./scroll-example.js"
-import * as stickyScrollExample from "./sticky-scroll-example.js"
-import * as shaderCubeExample from "./shader-cube-demo.js"
-import * as spriteAnimationExample from "./sprite-animation-demo.js"
-import * as spriteParticleExample from "./sprite-particle-generator-demo.js"
-import * as staticSpriteExample from "./static-sprite-demo.js"
-import * as textureLoadingExample from "./texture-loading-demo.js"
-import * as timelineExample from "./timeline-example.js"
-import * as tabSelectExample from "./tab-select-demo.js"
-import * as selectExample from "./select-demo.js"
-import * as inputExample from "./input-demo.js"
-import * as layoutExample from "./simple-layout-example.js"
-import * as inputSelectLayoutExample from "./input-select-layout-demo.js"
-import * as styledTextExample from "./styled-text-demo.js"
-import * as textTableExample from "./text-table-demo.js"
-import * as mouseInteractionExample from "./mouse-interaction-demo.js"
-import * as textSelectionExample from "./text-selection-demo.js"
-import * as asciiFontSelectionExample from "./ascii-font-selection-demo.js"
-import * as splitModeExample from "./split-mode-demo.js"
-import * as consoleExample from "./console-demo.js"
-import * as vnodeCompositionDemo from "./vnode-composition-demo.js"
-import * as hastSyntaxHighlightingExample from "./hast-syntax-highlighting-demo.js"
-import * as codeDemo from "./code-demo.js"
-import * as liveStateExample from "./live-state-demo.js"
-import * as fullUnicodeExample from "./full-unicode-demo.js"
-import * as textNodeDemo from "./text-node-demo.js"
-import * as textWrapExample from "./text-wrap.js"
-import * as editorDemo from "./editor-demo.js"
-import * as sliderDemo from "./slider-demo.js"
-import * as terminalDemo from "./terminal.js"
-import * as diffDemo from "./diff-demo.js"
-import * as keypressDebugDemo from "./keypress-debug-demo.js"
-import * as extmarksDemo from "./extmarks-demo.js"
-import * as markdownDemo from "./markdown-demo.js"
-import * as linkDemo from "./link-demo.js"
-import * as opacityExample from "./opacity-example.js"
-import * as scrollboxOverlayHitTest from "./scrollbox-overlay-hit-test.js"
-import * as scrollboxMouseTest from "./scrollbox-mouse-test.js"
-import * as textTruncationDemo from "./text-truncation-demo.js"
-import * as grayscaleBufferDemo from "./grayscale-buffer-demo.js"
-import * as focusRestoreDemo from "./focus-restore-demo.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-import * as corePluginSlotsDemo from "./core-plugin-slots-demo.js"
-
-interface Example {
-  name: string
-  description: string
-  run?: (renderer: CliRenderer) => void
-  destroy?: (renderer: CliRenderer) => void
-}
-
-interface ExampleTheme {
-  titleColor: RGBA
-  borderColor: string
-  focusedBorderColor: string
-  inputTextColor: string
-  inputFocusedTextColor: string
-  inputPlaceholderColor: string
-  inputCursorColor: string
-  selectSelectedBackgroundColor: string
-  selectTextColor: string
-  selectSelectedTextColor: string
-  selectDescriptionColor: string
-  selectSelectedDescriptionColor: string
-  instructionsColor: string
-  notImplementedColor: string
-}
-
-const DEFAULT_THEME_MODE: ThemeMode = "dark"
-
-const MENU_THEMES: Record<ThemeMode, ExampleTheme> = {
-  dark: {
-    titleColor: RGBA.fromInts(240, 248, 255, 255),
-    borderColor: "#475569",
-    focusedBorderColor: "#60A5FA",
-    inputTextColor: "#E2E8F0",
-    inputFocusedTextColor: "#F8FAFC",
-    inputPlaceholderColor: "#94A3B8",
-    inputCursorColor: "#60A5FA",
-    selectSelectedBackgroundColor: "#1E3A5F",
-    selectTextColor: "#E2E8F0",
-    selectSelectedTextColor: "#38BDF8",
-    selectDescriptionColor: "#64748B",
-    selectSelectedDescriptionColor: "#94A3B8",
-    instructionsColor: "#94A3B8",
-    notImplementedColor: "#FACC15",
-  },
-  light: {
-    titleColor: RGBA.fromInts(15, 23, 42, 255),
-    borderColor: "#CBD5E1",
-    focusedBorderColor: "#2563EB",
-    inputTextColor: "#0F172A",
-    inputFocusedTextColor: "#0B1221",
-    inputPlaceholderColor: "#64748B",
-    inputCursorColor: "#2563EB",
-    selectSelectedBackgroundColor: "#DBEAFE",
-    selectTextColor: "#0F172A",
-    selectSelectedTextColor: "#1D4ED8",
-    selectDescriptionColor: "#475569",
-    selectSelectedDescriptionColor: "#1E40AF",
-    instructionsColor: "#475569",
-    notImplementedColor: "#B45309",
-  },
-}
-
-const examples: Example[] = [
-  {
-    name: "Golden Star Demo",
-    description: "3D golden star with particle effects and animated text celebrating 5000 stars",
-    run: goldenStarDemo.run,
-    destroy: goldenStarDemo.destroy,
-  },
-  {
-    name: "Mouse Interaction Demo",
-    description: "Interactive mouse trails and clickable cells demonstration",
-    run: mouseInteractionExample.run,
-    destroy: mouseInteractionExample.destroy,
-  },
-  {
-    name: "Text Selection Demo",
-    description: "Text selection across multiple renderables with mouse drag",
-    run: textSelectionExample.run,
-    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,
-    destroy: asciiFontSelectionExample.destroy,
-  },
-  {
-    name: "Text Wrap Demo",
-    description: "Text wrapping example",
-    run: textWrapExample.run,
-    destroy: textWrapExample.destroy,
-  },
-  {
-    name: "Console Demo",
-    description: "Interactive console logging with clickable buttons for different log levels",
-    run: consoleExample.run,
-    destroy: consoleExample.destroy,
-  },
-  {
-    name: "Styled Text Demo",
-    description: "Template literals with styled text, colors, and formatting",
-    run: styledTextExample.run,
-    destroy: styledTextExample.destroy,
-  },
-  {
-    name: "TextTable Demo",
-    description: "TextTable renderable with styled chunks, Unicode content, and wrap/border toggles",
-    run: textTableExample.run,
-    destroy: textTableExample.destroy,
-  },
-  {
-    name: "Link Demo",
-    description: "Hyperlink support with OSC 8 - clickable links and link inheritance in styled text",
-    run: linkDemo.run,
-    destroy: linkDemo.destroy,
-  },
-  {
-    name: "Extmarks Demo",
-    description: "Virtual extmarks - text ranges that cursor jumps over, like inline tags and links",
-    run: extmarksDemo.run,
-    destroy: extmarksDemo.destroy,
-  },
-  {
-    name: "Opacity Demo",
-    description: "Box opacity and transparency effects with animated opacity transitions",
-    run: opacityExample.run,
-    destroy: opacityExample.destroy,
-  },
-  {
-    name: "TextNode Demo",
-    description: "TextNode API for building complex styled text structures",
-    run: textNodeDemo.run,
-    destroy: textNodeDemo.destroy,
-  },
-  {
-    name: "HAST Syntax Highlighting Demo",
-    description: "Convert HAST trees to syntax-highlighted text with efficient chunk generation",
-    run: hastSyntaxHighlightingExample.run,
-    destroy: hastSyntaxHighlightingExample.destroy,
-  },
-  {
-    name: "Code Demo",
-    description:
-      "Code viewer with line numbers, diff highlights, and diagnostics using CodeRenderable + LineNumberRenderable",
-    run: codeDemo.run,
-    destroy: codeDemo.destroy,
-  },
-  {
-    name: "Diff Demo",
-    description: "Unified and split diff views with syntax highlighting and multiple themes",
-    run: diffDemo.run,
-    destroy: diffDemo.destroy,
-  },
-  {
-    name: "Markdown Demo",
-    description: "Markdown rendering with table alignment, syntax highlighting, and theme switching",
-    run: markdownDemo.run,
-    destroy: markdownDemo.destroy,
-  },
-  {
-    name: "Live State Management Demo",
-    description: "Test automatic renderer lifecycle management with live renderables",
-    run: liveStateExample.run,
-    destroy: liveStateExample.destroy,
-  },
-  {
-    name: "Core Plugin Slots Demo",
-    description: "Framework-free plugin slots with cached renderables and deterministic ordering",
-    run: corePluginSlotsDemo.run,
-    destroy: corePluginSlotsDemo.destroy,
-  },
-  {
-    name: "Layout System Demo",
-    description: "Flex layout system with multiple configurations",
-    run: layoutExample.run,
-    destroy: layoutExample.destroy,
-  },
-  {
-    name: "Input & Select Layout Demo",
-    description: "Interactive layout with input and select elements",
-    run: inputSelectLayoutExample.run,
-    destroy: inputSelectLayoutExample.destroy,
-  },
-  {
-    name: "ASCII Font Demo",
-    description: "ASCII font rendering with various colors and text",
-    run: boxExample.run,
-    destroy: boxExample.destroy,
-  },
-  {
-    name: "OpenTUI Demo",
-    description: "Multi-tab demo with various features",
-    run: opentuiDemo.run,
-    destroy: opentuiDemo.destroy,
-  },
-  {
-    name: "Nested Z-Index Demo",
-    description: "Demonstrates z-index behavior with nested render objects",
-    run: nestedZIndexDemo.run,
-    destroy: nestedZIndexDemo.destroy,
-  },
-  {
-    name: "Relative Positioning Demo",
-    description: "Shows how child positions are relative to their parent containers",
-    run: relativePositioningDemo.run,
-    destroy: relativePositioningDemo.destroy,
-  },
-  {
-    name: "Transparency Demo",
-    description: "Alpha blending and transparency effects demonstration",
-    run: transparencyDemo.run,
-    destroy: transparencyDemo.destroy,
-  },
-  {
-    name: "Draggable ThreeRenderable",
-    description: "Draggable WebGPU cube with live animation",
-    run: draggableThreeDemo.run,
-    destroy: draggableThreeDemo.destroy,
-  },
-  {
-    name: "Static Sprite",
-    description: "Static sprite rendering demo",
-    run: staticSpriteExample.run,
-    destroy: staticSpriteExample.destroy,
-  },
-  {
-    name: "Sprite Animation",
-    description: "Animated sprite sequences",
-    run: spriteAnimationExample.run,
-    destroy: spriteAnimationExample.destroy,
-  },
-  {
-    name: "Sprite Particles",
-    description: "Particle system with sprites",
-    run: spriteParticleExample.run,
-    destroy: spriteParticleExample.destroy,
-  },
-  {
-    name: "Framebuffer Demo",
-    description: "Framebuffer rendering techniques",
-    run: framebufferExample.run,
-    destroy: framebufferExample.destroy,
-  },
-  {
-    name: "Texture Loading",
-    description: "Loading and displaying textures",
-    run: textureLoadingExample.run,
-    destroy: textureLoadingExample.destroy,
-  },
-  {
-    name: "ScrollBox Demo",
-    description: "Scrollable container with customization",
-    run: scrollExample.run,
-    destroy: scrollExample.destroy,
-  },
-  {
-    name: "Sticky Scroll Demo",
-    description: "ScrollBox with sticky scroll behavior - maintains position at borders when content changes",
-    run: stickyScrollExample.run,
-    destroy: stickyScrollExample.destroy,
-  },
-  {
-    name: "Scrollbox Mouse Test",
-    description: "Test scrollbox mouse hit detection with hover and click events",
-    run: scrollboxMouseTest.run,
-    destroy: scrollboxMouseTest.destroy,
-  },
-  {
-    name: "Scrollbox Overlay Hit Test",
-    description: "Test scrollbox hit detection with overlays and dialogs",
-    run: scrollboxOverlayHitTest.run,
-    destroy: scrollboxOverlayHitTest.destroy,
-  },
-  {
-    name: "Shader Cube",
-    description: "3D cube with custom shaders",
-    run: shaderCubeExample.run,
-    destroy: shaderCubeExample.destroy,
-  },
-  {
-    name: "Fractal Shader",
-    description: "Fractal rendering with shaders",
-    run: fractalShaderExample.run,
-    destroy: fractalShaderExample.destroy,
-  },
-  {
-    name: "Phong Lighting",
-    description: "Phong lighting model demo",
-    run: lightsPhongExample.run,
-    destroy: lightsPhongExample.destroy,
-  },
-  {
-    name: "Physics Planck",
-    description: "2D physics with Planck.js",
-    run: physxPlanckExample.run,
-    destroy: physxPlanckExample.destroy,
-  },
-  {
-    name: "Physics Rapier",
-    description: "2D physics with Rapier",
-    run: physxRapierExample.run,
-    destroy: physxRapierExample.destroy,
-  },
-  {
-    name: "Timeline Example",
-    description: "Animation timeline system",
-    run: timelineExample.run,
-    destroy: timelineExample.destroy,
-  },
-  {
-    name: "Tab Select",
-    description: "Tab selection demo",
-    run: tabSelectExample.run,
-    destroy: tabSelectExample.destroy,
-  },
-  {
-    name: "Select Demo",
-    description: "Interactive SelectElement demo with customizable options",
-    run: selectExample.run,
-    destroy: selectExample.destroy,
-  },
-  {
-    name: "Input Demo",
-    description: "Interactive InputElement demo with validation and multiple fields",
-    run: inputExample.run,
-    destroy: inputExample.destroy,
-  },
-  {
-    name: "Terminal Palette Demo",
-    description: "Terminal color palette detection and visualization - fetch and display all 256 terminal colors",
-    run: terminalDemo.run,
-    destroy: terminalDemo.destroy,
-  },
-  {
-    name: "Editor Demo",
-    description: "Interactive text editor with TextareaRenderable - supports full editing capabilities",
-    run: editorDemo.run,
-    destroy: editorDemo.destroy,
-  },
-  {
-    name: "Extmarks Demo",
-    description: "Virtual extmarks - text ranges that the cursor jumps over, with deletion handling",
-    run: extmarksDemo.run,
-    destroy: extmarksDemo.destroy,
-  },
-  {
-    name: "Slider Demo",
-    description: "Interactive slider components with various orientations and configurations",
-    run: sliderDemo.run,
-    destroy: sliderDemo.destroy,
-  },
-  {
-    name: "VNode Composition Demo",
-    description: "Declarative Box(Box(Box(children))) composition",
-    run: vnodeCompositionDemo.run,
-    destroy: vnodeCompositionDemo.destroy,
-  },
-  {
-    name: "Full Unicode Demo",
-    description: "Draggable boxes and background filled with complex graphemes",
-    run: fullUnicodeExample.run,
-    destroy: fullUnicodeExample.destroy,
-  },
-  {
-    name: "Split Mode Demo (Experimental)",
-    description: "Renderer confined to bottom area with normal terminal output above",
-    run: splitModeExample.run,
-    destroy: splitModeExample.destroy,
-  },
-  {
-    name: "Keypress Debug Tool",
-    description: "Debug tool to inspect keypress events, raw input, and terminal capabilities",
-    run: keypressDebugDemo.run,
-    destroy: keypressDebugDemo.destroy,
-  },
-  {
-    name: "Grayscale Buffer",
-    description: "Grayscale buffer rendering with 1x vs 2x supersampled intensity",
-    run: grayscaleBufferDemo.run,
-    destroy: grayscaleBufferDemo.destroy,
-  },
-  {
-    name: "Focus Restore Demo",
-    description: "Test focus restore - alt-tab away and back to verify mouse tracking resumes",
-    run: focusRestoreDemo.run,
-    destroy: focusRestoreDemo.destroy,
-  },
-]
-
-class ExampleSelector {
-  private renderer: CliRenderer
-  private currentExample: Example | null = null
-  private inMenu = true
-  private themeMode: ThemeMode = DEFAULT_THEME_MODE
-
-  private menuContainer: BoxRenderable | null = null
-  private title: FrameBufferRenderable | null = null
-  private filterBox: BoxRenderable | null = null
-  private filterInput: TextareaRenderable | null = null
-  private instructions: TextRenderable | null = null
-  private timeToFirstDrawText: TimeToFirstDrawRenderable | null = null
-  private selectElement: SelectRenderable | null = null
-  private selectBox: BoxRenderable | null = null
-  private notImplementedText: TextRenderable | null = null
-  private allExamples: Example[] = examples
-
-  constructor(renderer: CliRenderer) {
-    this.renderer = renderer
-    this.themeMode = this.renderer.themeMode ?? DEFAULT_THEME_MODE
-    this.createLayout()
-    this.setupKeyboardHandling()
-
-    this.renderer.on("theme_mode", (mode: ThemeMode) => {
-      this.applyTheme(mode)
-      console.log(`Theme mode changed to ${mode}, applied new theme to menu`)
-    })
-
-    this.applyTheme(this.renderer.themeMode)
-
-    this.renderer.on("resize", (width: number, height: number) => {
-      this.handleResize(width, height)
-    })
-  }
-
-  private createLayout(): void {
-    const width = this.renderer.terminalWidth
-    const theme = MENU_THEMES[this.themeMode]
-
-    // Menu container with column layout
-    this.menuContainer = new BoxRenderable(renderer, {
-      id: "example-menu-container",
-      flexDirection: "column",
-      width: "100%",
-      height: "100%",
-    })
-    this.renderer.root.add(this.menuContainer)
-
-    // Title
-    const titleText = "OPENTUI EXAMPLES"
-    const titleFont = "tiny"
-    const { width: titleWidth } = measureText({ text: titleText, font: titleFont })
-    const centerX = Math.floor(width / 2) - Math.floor(titleWidth / 2)
-
-    this.title = new ASCIIFontRenderable(renderer, {
-      id: "example-index-title",
-      left: centerX,
-      margin: 1,
-      text: titleText,
-      font: titleFont,
-      color: theme.titleColor,
-      backgroundColor: "transparent",
-    })
-    this.menuContainer.add(this.title)
-
-    // Filter box with border (grows with content)
-    this.filterBox = new BoxRenderable(renderer, {
-      id: "example-index-filter-box",
-      marginLeft: 1,
-      marginRight: 1,
-      flexShrink: 0,
-      backgroundColor: "transparent",
-      border: true,
-      borderStyle: "single",
-      borderColor: theme.borderColor,
-    })
-    this.menuContainer.add(this.filterBox)
-
-    // Filter input inside the box (transparent bg so box bg shows through)
-    this.filterInput = new TextareaRenderable(renderer, {
-      id: "example-index-filter-input",
-      width: "100%",
-      height: 1,
-      placeholder: "Filter examples by title...",
-      placeholderColor: theme.inputPlaceholderColor,
-      backgroundColor: "transparent",
-      focusedBackgroundColor: "transparent",
-      textColor: theme.inputTextColor,
-      focusedTextColor: theme.inputFocusedTextColor,
-      wrapMode: "none",
-      showCursor: true,
-      cursorColor: theme.inputCursorColor,
-      onContentChange: () => {
-        this.filterExamples()
-      },
-    })
-    this.filterBox.add(this.filterInput)
-    this.filterInput.focus()
-
-    // Select box (grows to fill remaining space)
-    this.selectBox = new BoxRenderable(renderer, {
-      id: "example-selector-box",
-      marginLeft: 1,
-      marginRight: 1,
-      marginBottom: 1,
-      flexGrow: 1,
-      borderStyle: "single",
-      borderColor: theme.borderColor,
-      focusedBorderColor: theme.focusedBorderColor,
-      title: "Examples",
-      titleAlignment: "center",
-      backgroundColor: "transparent",
-      shouldFill: true,
-      border: true,
-    })
-    this.menuContainer.add(this.selectBox)
-
-    // Select element
-    const selectOptions: SelectOption[] = examples.map((example) => ({
-      name: example.name,
-      description: example.description,
-      value: example,
-    }))
-
-    this.selectElement = new SelectRenderable(renderer, {
-      id: "example-selector",
-      height: "100%",
-      options: selectOptions,
-      backgroundColor: "transparent",
-      focusedBackgroundColor: "transparent",
-      selectedBackgroundColor: theme.selectSelectedBackgroundColor,
-      textColor: theme.selectTextColor,
-      selectedTextColor: theme.selectSelectedTextColor,
-      descriptionColor: theme.selectDescriptionColor,
-      selectedDescriptionColor: theme.selectSelectedDescriptionColor,
-      showScrollIndicator: true,
-      wrapSelection: true,
-      showDescription: true,
-      fastScrollStep: 5,
-    })
-    this.selectBox.add(this.selectElement)
-
-    this.selectElement.on(SelectRenderableEvents.ITEM_SELECTED, (index: number, option: SelectOption) => {
-      this.runSelected(option.value as Example)
-    })
-
-    this.timeToFirstDrawText = new TimeToFirstDrawRenderable(renderer, {
-      id: "example-index-time-to-first-draw",
-      fg: theme.instructionsColor,
-    })
-    this.menuContainer.add(this.timeToFirstDrawText)
-
-    // Instructions at the bottom
-    this.instructions = new TextRenderable(renderer, {
-      id: "example-index-instructions",
-      height: 1,
-      flexShrink: 0,
-      alignSelf: "center",
-      content: "Type to filter | ↑↓/j/k navigate | Enter run | Esc clear/return | ctrl+c quit",
-      fg: theme.instructionsColor,
-    })
-    this.menuContainer.add(this.instructions)
-  }
-
-  private applyTheme(mode: ThemeMode | null): void {
-    this.themeMode = mode ?? DEFAULT_THEME_MODE
-    const theme = MENU_THEMES[this.themeMode]
-
-    if (this.title) {
-      this.title.color = theme.titleColor
-    }
-
-    if (this.filterBox) {
-      this.filterBox.borderColor = theme.borderColor
-    }
-
-    if (this.filterInput) {
-      this.filterInput.textColor = theme.inputTextColor
-      this.filterInput.focusedTextColor = theme.inputFocusedTextColor
-      this.filterInput.placeholderColor = theme.inputPlaceholderColor
-      this.filterInput.cursorColor = theme.inputCursorColor
-    }
-
-    if (this.selectBox) {
-      this.selectBox.borderColor = theme.borderColor
-      this.selectBox.focusedBorderColor = theme.focusedBorderColor
-    }
-
-    if (this.selectElement) {
-      this.selectElement.selectedBackgroundColor = theme.selectSelectedBackgroundColor
-      this.selectElement.textColor = theme.selectTextColor
-      this.selectElement.selectedTextColor = theme.selectSelectedTextColor
-      this.selectElement.descriptionColor = theme.selectDescriptionColor
-      this.selectElement.selectedDescriptionColor = theme.selectSelectedDescriptionColor
-    }
-
-    if (this.instructions) {
-      this.instructions.fg = theme.instructionsColor
-    }
-
-    if (this.timeToFirstDrawText) {
-      this.timeToFirstDrawText.color = theme.instructionsColor
-    }
-
-    if (this.notImplementedText) {
-      this.notImplementedText.fg = theme.notImplementedColor
-    }
-
-    this.renderer.requestRender()
-  }
-
-  private filterExamples(): void {
-    if (!this.filterInput || !this.selectElement) return
-
-    const filterText = this.filterInput.editBuffer.getText().toLowerCase().trim()
-
-    if (filterText === "") {
-      // Show all examples
-      const selectOptions: SelectOption[] = this.allExamples.map((example) => ({
-        name: example.name,
-        description: example.description,
-        value: example,
-      }))
-      this.selectElement.options = selectOptions
-    } else {
-      // Filter by title only
-      const filtered = this.allExamples.filter((example) => example.name.toLowerCase().includes(filterText))
-      const selectOptions: SelectOption[] = filtered.map((example) => ({
-        name: example.name,
-        description: example.description,
-        value: example,
-      }))
-      this.selectElement.options = selectOptions
-    }
-  }
-
-  private handleResize(width: number, height: number): void {
-    if (this.title) {
-      const titleWidth = this.title.frameBuffer.width
-      const centerX = Math.floor(width / 2) - Math.floor(titleWidth / 2)
-      this.title.x = centerX
-    }
-
-    this.renderer.requestRender()
-  }
-
-  private setupKeyboardHandling(): void {
-    this.renderer.keyInput.on("keypress", (key: KeyEvent) => {
-      if (key.name === "c" && key.ctrl) {
-        this.cleanup()
-        return
-      }
-
-      if (!this.inMenu) {
-        switch (key.name) {
-          case "escape":
-            this.returnToMenu()
-            break
-        }
-        return
-      }
-
-      // Forward navigation keys to select even when filter is focused
-      if (this.filterInput?.focused && this.selectElement) {
-        // Navigation keys: arrow up/down, j/k, shift variants
-        if (key.name === "up" || key.name === "k") {
-          key.preventDefault()
-          if (key.shift) {
-            this.selectElement.moveUp(5)
-          } else {
-            this.selectElement.moveUp(1)
-          }
-          return
-        }
-        if (key.name === "down" || key.name === "j") {
-          key.preventDefault()
-          if (key.shift) {
-            this.selectElement.moveDown(5)
-          } else {
-            this.selectElement.moveDown(1)
-          }
-          return
-        }
-        // Enter to select
-        if (key.name === "return" || key.name === "linefeed") {
-          key.preventDefault()
-          this.selectElement.selectCurrent()
-          return
-        }
-      }
-
-      // Handle Escape: clear filter if has content
-      if (key.name === "escape") {
-        if (this.filterInput) {
-          const filterText = this.filterInput.editBuffer.getText()
-          if (filterText.length > 0) {
-            key.preventDefault()
-            this.filterInput.editBuffer.setText("")
-            this.filterExamples()
-            return
-          }
-        }
-      }
-
-      if (key.name === "c" && key.ctrl) {
-        this.cleanup()
-        return
-      }
-      switch (key.name) {
-        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)
-  }
-
-  private runSelected(selected: Example): void {
-    this.inMenu = false
-    this.hideMenuElements()
-
-    if (selected.run) {
-      this.currentExample = selected
-      selected.run(this.renderer)
-    } else {
-      if (!this.notImplementedText) {
-        const theme = MENU_THEMES[this.themeMode]
-        this.notImplementedText = new TextRenderable(renderer, {
-          id: "not-implemented",
-          position: "absolute",
-          left: 10,
-          top: 10,
-          content: `${selected.name} not yet implemented. Press Escape to return.`,
-          fg: theme.notImplementedColor,
-          zIndex: 10,
-        })
-        this.renderer.root.add(this.notImplementedText)
-      }
-      this.renderer.requestRender()
-    }
-  }
-
-  private hideMenuElements(): void {
-    if (this.menuContainer) {
-      this.menuContainer.visible = false
-    }
-    if (this.title) {
-      this.title.visible = false
-    }
-    if (this.filterBox) {
-      this.filterBox.visible = false
-    }
-    if (this.selectBox) {
-      this.selectBox.visible = false
-    }
-    if (this.instructions) {
-      this.instructions.visible = false
-    }
-    if (this.timeToFirstDrawText) {
-      this.timeToFirstDrawText.visible = false
-    }
-    if (this.filterInput) {
-      this.filterInput.blur()
-    }
-    if (this.selectElement) {
-      this.selectElement.blur()
-    }
-  }
-
-  private showMenuElements(): void {
-    if (this.menuContainer) {
-      this.menuContainer.visible = true
-    }
-    if (this.title) {
-      this.title.visible = true
-    }
-    if (this.filterBox) {
-      this.filterBox.visible = true
-    }
-    if (this.selectBox) {
-      this.selectBox.visible = true
-    }
-    if (this.instructions) {
-      this.instructions.visible = true
-    }
-    if (this.timeToFirstDrawText) {
-      this.timeToFirstDrawText.visible = true
-    }
-    if (this.filterInput) {
-      // Clear filter when returning to menu
-      this.filterInput.editBuffer.setText("")
-      this.filterInput.focus()
-    }
-    // Reset filter to show all examples
-    this.filterExamples()
-  }
-
-  private returnToMenu(): void {
-    if (this.currentExample) {
-      this.currentExample.destroy?.(this.renderer)
-      this.currentExample = null
-    }
-
-    if (this.notImplementedText) {
-      this.renderer.root.remove(this.notImplementedText.id)
-      this.notImplementedText = null
-    }
-
-    this.inMenu = true
-    this.restart()
-  }
-
-  private restart(): void {
-    this.renderer.pause()
-    this.renderer.auto()
-    this.showMenuElements()
-    this.renderer.setBackgroundColor("transparent")
-    this.renderer.requestRender()
-  }
-
-  private cleanup(): void {
-    if (this.currentExample) {
-      this.currentExample.destroy?.(this.renderer)
-    }
-    if (this.filterInput) {
-      this.filterInput.blur()
-    }
-    if (this.selectElement) {
-      this.selectElement.blur()
-    }
-    if (this.menuContainer) {
-      this.menuContainer.destroy()
-    }
-    this.renderer.destroy()
-  }
-}
-
-const renderer = await createCliRenderer({
-  exitOnCtrlC: false,
-  targetFps: 60,
-  // useAlternateScreen: false,
-})
-
-renderer.setBackgroundColor("transparent")
-new ExampleSelector(renderer)