@fairyhunter13/opentui-core 0.1.114 → 0.1.115

package/src/examples/code-demo.ts

@@ -1,924 +0,0 @@
-import {
-  CliRenderer,
-  createCliRenderer,
-  CodeRenderable,
-  BoxRenderable,
-  TextRenderable,
-  type ParsedKey,
-  ScrollBoxRenderable,
-  LineNumberRenderable,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-import { parseColor } from "../lib/RGBA.js"
-import { SyntaxStyle } from "../syntax-style.js"
-
-// Code examples to cycle through
-const examples = [
-  {
-    name: "TypeScript",
-    filetype: "typescript" as const,
-    code: `interface User {
-  name: string;
-  age: number;
-  email?: string;
-}
-
-class UserManager {
-  private users: User[] = [];
-
-  constructor(initialUsers: User[] = []) {
-    this.users = initialUsers;
-  }
-
-  addUser(user: User): void {
-    if (!user.name || user.age < 0) {
-      throw new Error("Invalid user data");
-    }
-    this.users.push(user);
-  }
-
-  findUser(name: string): User | undefined {
-    return this.users.find(u => u.name === name);
-  }
-
-  getUserCount(): number {
-    return this.users.length;
-  }
-
-  // Get users over a certain age
-  getAdults(minAge: number = 18): User[] {
-    return this.users.filter(user => user.age >= minAge);
-  }
-}
-
-// Usage example
-const manager = new UserManager();
-manager.addUser({ name: "Alice", age: 25, email: "alice@example.com" });
-manager.addUser({ name: "Bob", age: 17 });
-
-console.log(\`Total users: \${manager.getUserCount()}\`);
-console.log(\`Adults: \${manager.getAdults().length}\`);`,
-  },
-  {
-    name: "JavaScript",
-    filetype: "javascript" as const,
-    code: `// React Component Example
-import React, { useState, useEffect } from 'react';
-
-function TodoApp() {
-  const [todos, setTodos] = useState([]);
-  const [input, setInput] = useState('');
-
-  useEffect(() => {
-    // Load todos from localStorage
-    const saved = localStorage.getItem('todos');
-    if (saved) {
-      setTodos(JSON.parse(saved));
-    }
-  }, []);
-
-  const addTodo = () => {
-    if (input.trim()) {
-      const newTodo = {
-        id: Date.now(),
-        text: input,
-        completed: false
-      };
-      setTodos([...todos, newTodo]);
-      setInput('');
-    }
-  };
-
-  const toggleTodo = (id) => {
-    setTodos(todos.map(todo =>
-      todo.id === id ? { ...todo, completed: !todo.completed } : todo
-    ));
-  };
-
-  return (
-    <div className="todo-app">
-      <h1>My Todo List</h1>
-      <input
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
-      />
-      <button onClick={addTodo}>Add</button>
-      <ul>
-        {todos.map(todo => (
-          <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
-            {todo.completed ? '✓' : '○'} {todo.text}
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}`,
-  },
-  {
-    name: "Markdown",
-    filetype: "markdown" as const,
-    code: `# OpenTUI Documentation
-
-## Getting Started
-
-OpenTUI is a modern terminal UI framework built on **tree-sitter** and WebGPU.
-
-### Features
-
-- 🚀 Fast rendering with WebGPU
-- 🎨 Syntax highlighting via tree-sitter
-- 📦 Component-based architecture
-- ⌨️ Rich keyboard input handling
-
-### Installation
-
-\`\`\`bash
-bun install opentui
-\`\`\`
-
-### Quick Example
-
-\`\`\`typescript
-import { createCliRenderer, BoxRenderable } from 'opentui';
-
-const renderer = await createCliRenderer();
-const box = new BoxRenderable(renderer, {
-  border: true,
-  title: "Hello World"
-});
-renderer.root.add(box);
-\`\`\`
-
-## API Reference
-
-### CodeRenderable
-
-The \`CodeRenderable\` component provides syntax highlighting:
-
-| Property | Type | Description |
-|----------|------|-------------|
-| content | string | Code to display |
-| filetype | string | Language type |
-| syntaxStyle | SyntaxStyle | Styling rules |
-
-> **Note**: Tree-sitter parsers are loaded lazily for performance.
-
-CJK: 알겠습니다. Task 에이전트에 ktlint + detekt 검사를 위임하겠습니다.
-
----
-
-For more info, visit [github.com/opentui](https://github.com)`,
-  },
-  {
-    name: "Zig",
-    filetype: "zig" as const,
-    code: `const std = @import("std");
-const Allocator = std.mem.Allocator;
-
-/// A simple text buffer implementation
-pub const TextBuffer = struct {
-    allocator: Allocator,
-    lines: std.ArrayList([]u8),
-    dirty: bool,
-
-    pub fn init(allocator: Allocator) !TextBuffer {
-        return TextBuffer{
-            .allocator = allocator,
-            .lines = std.ArrayList([]u8).init(allocator),
-            .dirty = false,
-        };
-    }
-
-    pub fn deinit(self: *TextBuffer) void {
-        for (self.lines.items) |line| {
-            self.allocator.free(line);
-        }
-        self.lines.deinit();
-    }
-
-    /// Insert a line at the specified position
-    pub fn insertLine(self: *TextBuffer, line_num: usize, content: []const u8) !void {
-        const line = try self.allocator.dupe(u8, content);
-        errdefer self.allocator.free(line);
-
-        try self.lines.insert(line_num, line);
-        self.dirty = true;
-    }
-
-    /// Get the content of a line
-    pub fn getLine(self: *const TextBuffer, line_num: usize) ?[]const u8 {
-        if (line_num >= self.lines.items.len) return null;
-        return self.lines.items[line_num];
-    }
-
-    /// Count total characters in buffer
-    pub fn countChars(self: *const TextBuffer) usize {
-        var total: usize = 0;
-        for (self.lines.items) |line| {
-            total += line.len;
-        }
-        return total;
-    }
-};
-
-test "TextBuffer basic operations" {
-    const allocator = std.testing.allocator;
-    var buffer = try TextBuffer.init(allocator);
-    defer buffer.deinit();
-
-    try buffer.insertLine(0, "Hello, World!");
-    try buffer.insertLine(1, "This is Zig.");
-
-    try std.testing.expectEqual(@as(usize, 2), buffer.lines.items.len);
-    try std.testing.expect(buffer.dirty);
-    
-    const first_line = buffer.getLine(0).?;
-    try std.testing.expectEqualStrings("Hello, World!", first_line);
-}`,
-  },
-]
-
-interface SyntaxPalette {
-  keyword: string
-  keywordCoroutine: string
-  operatorKeyword: string
-  string: string
-  comment: string
-  number: string
-  function: string
-  constructor: string
-  type: string
-  operator: string
-  variable: string
-  property: string
-  bracket: string
-  delimiter: string
-  heading1: string
-  heading2: string
-  heading3: string
-  heading4: string
-  heading5: string
-  heading6: string
-  list: string
-  quote: string
-  raw: string
-  rawBg: string
-  link: string
-  label: string
-  conceal: string
-  default: string
-}
-
-interface CodeDemoTheme {
-  name: string
-  backgroundColor: string
-  panelBackgroundColor: string
-  titleBorderColor: string
-  codeBorderColor: string
-  instructionsColor: string
-  helpTextColor: string
-  timingColor: string
-  lineNumberFg: string
-  lineNumberBg: string
-  selectionBg: string
-  selectionFg: string
-  syntaxOverrides?: Partial<SyntaxPalette>
-}
-
-const BASE_SYNTAX_PALETTE: SyntaxPalette = {
-  keyword: "#FF7B72",
-  keywordCoroutine: "#FF9492",
-  operatorKeyword: "#FF7B72",
-  string: "#A5D6FF",
-  comment: "#8B949E",
-  number: "#79C0FF",
-  function: "#D2A8FF",
-  constructor: "#FFA657",
-  type: "#FFA657",
-  operator: "#FF7B72",
-  variable: "#E6EDF3",
-  property: "#79C0FF",
-  bracket: "#F0F6FC",
-  delimiter: "#C9D1D9",
-  heading1: "#00FF88",
-  heading2: "#00D7FF",
-  heading3: "#FF69B4",
-  heading4: "#FFA657",
-  heading5: "#FF7B72",
-  heading6: "#8B949E",
-  list: "#FF7B72",
-  quote: "#8B949E",
-  raw: "#A5D6FF",
-  rawBg: "#161B22",
-  link: "#58A6FF",
-  label: "#7EE787",
-  conceal: "#6E7681",
-  default: "#E6EDF3",
-}
-
-const themes: CodeDemoTheme[] = [
-  {
-    name: "GitHub Dark",
-    backgroundColor: "#0D1117",
-    panelBackgroundColor: "#0D1117",
-    titleBorderColor: "#4ECDC4",
-    codeBorderColor: "#6BCF7F",
-    instructionsColor: "#888888",
-    helpTextColor: "#E6EDF3",
-    timingColor: "#A5D6FF",
-    lineNumberFg: "#6b7280",
-    lineNumberBg: "#161b22",
-    selectionBg: "#264F78",
-    selectionFg: "#FFFFFF",
-  },
-  {
-    name: "Monokai",
-    backgroundColor: "#272822",
-    panelBackgroundColor: "#272822",
-    titleBorderColor: "#FD971F",
-    codeBorderColor: "#A6E22E",
-    instructionsColor: "#75715E",
-    helpTextColor: "#F8F8F2",
-    timingColor: "#66D9EF",
-    lineNumberFg: "#75715E",
-    lineNumberBg: "#1E1F1C",
-    selectionBg: "#49483E",
-    selectionFg: "#F8F8F2",
-    syntaxOverrides: {
-      keyword: "#F92672",
-      keywordCoroutine: "#F92672",
-      operatorKeyword: "#F92672",
-      string: "#E6DB74",
-      comment: "#75715E",
-      number: "#AE81FF",
-      function: "#A6E22E",
-      constructor: "#FD971F",
-      type: "#66D9EF",
-      operator: "#F92672",
-      variable: "#F8F8F2",
-      property: "#66D9EF",
-      bracket: "#F8F8F2",
-      delimiter: "#F8F8F2",
-      heading1: "#A6E22E",
-      heading2: "#66D9EF",
-      heading3: "#FD971F",
-      heading4: "#E6DB74",
-      heading5: "#F92672",
-      heading6: "#AE81FF",
-      list: "#FD971F",
-      quote: "#75715E",
-      raw: "#E6DB74",
-      rawBg: "#1E1F1C",
-      link: "#66D9EF",
-      label: "#A6E22E",
-      conceal: "#75715E",
-      default: "#F8F8F2",
-    },
-  },
-  {
-    name: "Dracula",
-    backgroundColor: "#282A36",
-    panelBackgroundColor: "#282A36",
-    titleBorderColor: "#BD93F9",
-    codeBorderColor: "#50FA7B",
-    instructionsColor: "#6272A4",
-    helpTextColor: "#F8F8F2",
-    timingColor: "#8BE9FD",
-    lineNumberFg: "#6272A4",
-    lineNumberBg: "#21222C",
-    selectionBg: "#44475A",
-    selectionFg: "#F8F8F2",
-    syntaxOverrides: {
-      keyword: "#FF79C6",
-      keywordCoroutine: "#FF79C6",
-      operatorKeyword: "#FF79C6",
-      string: "#F1FA8C",
-      comment: "#6272A4",
-      number: "#BD93F9",
-      function: "#50FA7B",
-      constructor: "#FFB86C",
-      type: "#8BE9FD",
-      operator: "#FF79C6",
-      variable: "#F8F8F2",
-      property: "#8BE9FD",
-      bracket: "#F8F8F2",
-      delimiter: "#F8F8F2",
-      heading1: "#50FA7B",
-      heading2: "#8BE9FD",
-      heading3: "#FF79C6",
-      heading4: "#FFB86C",
-      heading5: "#BD93F9",
-      heading6: "#6272A4",
-      list: "#FF79C6",
-      quote: "#6272A4",
-      raw: "#F1FA8C",
-      rawBg: "#21222C",
-      link: "#8BE9FD",
-      label: "#50FA7B",
-      conceal: "#6272A4",
-      default: "#F8F8F2",
-    },
-  },
-  {
-    name: "Solarized Dark",
-    backgroundColor: "#002b36",
-    panelBackgroundColor: "#002b36",
-    titleBorderColor: "#2aa198",
-    codeBorderColor: "#859900",
-    instructionsColor: "#586e75",
-    helpTextColor: "#93a1a1",
-    timingColor: "#2aa198",
-    lineNumberFg: "#586e75",
-    lineNumberBg: "#073642",
-    selectionBg: "#073642",
-    selectionFg: "#93a1a1",
-    syntaxOverrides: {
-      keyword: "#859900",
-      keywordCoroutine: "#859900",
-      operatorKeyword: "#859900",
-      string: "#2aa198",
-      comment: "#586e75",
-      number: "#d33682",
-      function: "#268bd2",
-      constructor: "#cb4b16",
-      type: "#cb4b16",
-      operator: "#859900",
-      variable: "#839496",
-      property: "#268bd2",
-      bracket: "#839496",
-      delimiter: "#839496",
-      heading1: "#859900",
-      heading2: "#2aa198",
-      heading3: "#268bd2",
-      heading4: "#b58900",
-      heading5: "#cb4b16",
-      heading6: "#586e75",
-      list: "#cb4b16",
-      quote: "#586e75",
-      raw: "#2aa198",
-      rawBg: "#073642",
-      link: "#268bd2",
-      label: "#859900",
-      conceal: "#586e75",
-      default: "#839496",
-    },
-  },
-  {
-    name: "One Dark",
-    backgroundColor: "#282c34",
-    panelBackgroundColor: "#282c34",
-    titleBorderColor: "#61afef",
-    codeBorderColor: "#98c379",
-    instructionsColor: "#5c6370",
-    helpTextColor: "#abb2bf",
-    timingColor: "#61afef",
-    lineNumberFg: "#636d83",
-    lineNumberBg: "#21252b",
-    selectionBg: "#3E4451",
-    selectionFg: "#abb2bf",
-    syntaxOverrides: {
-      keyword: "#c678dd",
-      keywordCoroutine: "#c678dd",
-      operatorKeyword: "#c678dd",
-      string: "#98c379",
-      comment: "#5c6370",
-      number: "#d19a66",
-      function: "#61afef",
-      constructor: "#e5c07b",
-      type: "#e5c07b",
-      operator: "#56b6c2",
-      variable: "#abb2bf",
-      property: "#e06c75",
-      bracket: "#abb2bf",
-      delimiter: "#abb2bf",
-      heading1: "#98c379",
-      heading2: "#61afef",
-      heading3: "#c678dd",
-      heading4: "#e5c07b",
-      heading5: "#e06c75",
-      heading6: "#5c6370",
-      list: "#e06c75",
-      quote: "#5c6370",
-      raw: "#98c379",
-      rawBg: "#21252b",
-      link: "#61afef",
-      label: "#98c379",
-      conceal: "#5c6370",
-      default: "#abb2bf",
-    },
-  },
-]
-
-function createSyntaxStyle(theme: CodeDemoTheme): SyntaxStyle {
-  const palette = {
-    ...BASE_SYNTAX_PALETTE,
-    ...theme.syntaxOverrides,
-  }
-
-  return SyntaxStyle.fromStyles({
-    keyword: { fg: parseColor(palette.keyword), bold: true },
-    "keyword.import": { fg: parseColor(palette.keyword), bold: true },
-    "keyword.coroutine": { fg: parseColor(palette.keywordCoroutine) },
-    "keyword.operator": { fg: parseColor(palette.operatorKeyword) },
-    string: { fg: parseColor(palette.string) },
-    comment: { fg: parseColor(palette.comment), italic: true },
-    number: { fg: parseColor(palette.number) },
-    boolean: { fg: parseColor(palette.number) },
-    constant: { fg: parseColor(palette.number) },
-    function: { fg: parseColor(palette.function) },
-    "function.call": { fg: parseColor(palette.function) },
-    "function.method.call": { fg: parseColor(palette.function) },
-    constructor: { fg: parseColor(palette.constructor) },
-    type: { fg: parseColor(palette.type) },
-    operator: { fg: parseColor(palette.operator) },
-    variable: { fg: parseColor(palette.variable) },
-    "variable.member": { fg: parseColor(palette.property) },
-    property: { fg: parseColor(palette.property) },
-    bracket: { fg: parseColor(palette.bracket) },
-    "punctuation.bracket": { fg: parseColor(palette.bracket) },
-    "punctuation.delimiter": { fg: parseColor(palette.delimiter) },
-    punctuation: { fg: parseColor(palette.bracket) },
-
-    "markup.heading": { fg: parseColor(palette.heading2), bold: true },
-    "markup.heading.1": { fg: parseColor(palette.heading1), bold: true, underline: true },
-    "markup.heading.2": { fg: parseColor(palette.heading2), bold: true },
-    "markup.heading.3": { fg: parseColor(palette.heading3) },
-    "markup.heading.4": { fg: parseColor(palette.heading4), bold: true },
-    "markup.heading.5": { fg: parseColor(palette.heading5), bold: true },
-    "markup.heading.6": { fg: parseColor(palette.heading6), bold: true },
-    "markup.bold": { fg: parseColor(palette.default), bold: true },
-    "markup.strong": { fg: parseColor(palette.default), bold: true },
-    "markup.italic": { fg: parseColor(palette.default), italic: true },
-    "markup.list": { fg: parseColor(palette.list) },
-    "markup.quote": { fg: parseColor(palette.quote), italic: true },
-    "markup.raw": { fg: parseColor(palette.raw), bg: parseColor(palette.rawBg) },
-    "markup.raw.block": { fg: parseColor(palette.raw), bg: parseColor(palette.rawBg) },
-    "markup.raw.inline": { fg: parseColor(palette.raw), bg: parseColor(palette.rawBg) },
-    "markup.link": { fg: parseColor(palette.link), underline: true },
-    "markup.link.label": { fg: parseColor(palette.link), underline: true },
-    "markup.link.url": { fg: parseColor(palette.link), underline: true },
-    label: { fg: parseColor(palette.label) },
-    spell: { fg: parseColor(palette.default) },
-    nospell: { fg: parseColor(palette.default) },
-    conceal: { fg: parseColor(palette.conceal) },
-    "punctuation.special": { fg: parseColor(palette.quote) },
-
-    default: { fg: parseColor(palette.default) },
-  })
-}
-
-let renderer: CliRenderer | null = null
-let keyboardHandler: ((key: ParsedKey) => void) | null = null
-let parentContainer: BoxRenderable | null = null
-let codeScrollBox: ScrollBoxRenderable | null = null
-let codeDisplay: CodeRenderable | null = null
-let codeWithLineNumbers: LineNumberRenderable | null = null
-let timingText: TextRenderable | null = null
-let syntaxStyle: SyntaxStyle | null = null
-let helpModal: BoxRenderable | null = null
-let currentExampleIndex = 0
-let currentThemeIndex = 0
-let concealEnabled = true
-let highlightsEnabled = false
-let diagnosticsEnabled = false
-let showingHelp = false
-
-export async function run(rendererInstance: CliRenderer): Promise<void> {
-  renderer = rendererInstance
-  showingHelp = false
-  renderer.start()
-  const getCurrentTheme = () => themes[currentThemeIndex]
-  renderer.setBackgroundColor(getCurrentTheme().backgroundColor)
-
-  parentContainer = new BoxRenderable(renderer, {
-    id: "parent-container",
-    zIndex: 10,
-    padding: 1,
-  })
-  renderer.root.add(parentContainer)
-
-  const titleBox = new BoxRenderable(renderer, {
-    id: "title-box",
-    height: 3,
-    borderStyle: "double",
-    borderColor: getCurrentTheme().titleBorderColor,
-    backgroundColor: getCurrentTheme().panelBackgroundColor,
-    title: `Code Demo - ${getCurrentTheme().name}`,
-    titleAlignment: "center",
-    border: true,
-  })
-  parentContainer.add(titleBox)
-
-  const instructionsText = new TextRenderable(renderer, {
-    id: "instructions",
-    content: "ESC to return | Press ? for keybindings",
-    fg: getCurrentTheme().instructionsColor,
-  })
-  titleBox.add(instructionsText)
-
-  // Create help modal (hidden by default)
-  helpModal = new BoxRenderable(renderer, {
-    id: "help-modal",
-    position: "absolute",
-    left: "50%",
-    top: "50%",
-    width: 60,
-    height: 18,
-    marginLeft: -30, // Center horizontally
-    marginTop: -9, // Center vertically
-    border: true,
-    borderStyle: "double",
-    borderColor: getCurrentTheme().titleBorderColor,
-    backgroundColor: getCurrentTheme().panelBackgroundColor,
-    title: "Keybindings",
-    titleAlignment: "center",
-    padding: 2,
-    zIndex: 100,
-    visible: false,
-  })
-
-  const helpContent = new TextRenderable(renderer, {
-    id: "help-content",
-    content: `Navigation:
-  ← → : Switch between code examples
-
-View Controls:
-  L : Toggle line numbers
-  C : Toggle concealment (Markdown links, etc.)
-  T : Cycle themes
-
-Diff Highlighting:
-  H : Toggle diff highlights (+ green, - red)
-
-Diagnostics:
-  D : Toggle diagnostic signs (❌ ⚠️  💡)
-
-Other:
-  ? : Toggle this help screen
-  ESC : Return to main menu`,
-    fg: getCurrentTheme().helpTextColor,
-  })
-
-  helpModal.add(helpContent)
-  renderer.root.add(helpModal)
-
-  codeScrollBox = new ScrollBoxRenderable(renderer, {
-    id: "code-scroll-box",
-    borderStyle: "single",
-    borderColor: getCurrentTheme().codeBorderColor,
-    backgroundColor: getCurrentTheme().panelBackgroundColor,
-    title: `${examples[currentExampleIndex].name} (CodeRenderable) - ${getCurrentTheme().name}`,
-    titleAlignment: "left",
-    border: true,
-    scrollY: true,
-    scrollX: false,
-    flexGrow: 1,
-    flexShrink: 1,
-  })
-  parentContainer.add(codeScrollBox)
-
-  syntaxStyle = createSyntaxStyle(getCurrentTheme())
-
-  // Create code display using CodeRenderable wrapped in LineNumberRenderable
-  codeDisplay = new CodeRenderable(renderer, {
-    id: "code-display",
-    content: examples[currentExampleIndex].code,
-    filetype: examples[currentExampleIndex].filetype,
-    syntaxStyle,
-    selectable: true,
-    selectionBg: getCurrentTheme().selectionBg,
-    selectionFg: getCurrentTheme().selectionFg,
-    conceal: concealEnabled,
-    width: "100%",
-  })
-
-  codeWithLineNumbers = new LineNumberRenderable(renderer, {
-    id: "code-with-lines",
-    target: codeDisplay,
-    minWidth: 3,
-    paddingRight: 1,
-    fg: getCurrentTheme().lineNumberFg,
-    bg: getCurrentTheme().lineNumberBg,
-    width: "100%",
-  })
-
-  codeScrollBox.add(codeWithLineNumbers)
-
-  timingText = new TextRenderable(renderer, {
-    id: "timing-display",
-    content: "Initializing...",
-    fg: getCurrentTheme().timingColor,
-    wrapMode: "word",
-    flexShrink: 0,
-  })
-  parentContainer.add(timingText)
-
-  const updateCodeTitle = () => {
-    const example = examples[currentExampleIndex]
-    const theme = getCurrentTheme()
-    if (codeScrollBox) {
-      codeScrollBox.title = `${example.name} (CodeRenderable) - ${theme.name}`
-    }
-  }
-
-  const updateTimingText = () => {
-    if (timingText) {
-      const theme = getCurrentTheme()
-      const lineNums = codeWithLineNumbers?.showLineNumbers ? "ON" : "OFF"
-      const diff = highlightsEnabled ? "ON" : "OFF"
-      const diag = diagnosticsEnabled ? "ON" : "OFF"
-      timingText.content = `${examples[currentExampleIndex].name} (${currentExampleIndex + 1}/${examples.length}) | Theme: ${theme.name} (${currentThemeIndex + 1}/${themes.length}) | Conceal: ${concealEnabled ? "ON" : "OFF"} | Lines: ${lineNums} | Diff: ${diff} | Diag: ${diag}`
-    }
-  }
-
-  const applyTheme = () => {
-    const theme = getCurrentTheme()
-    renderer?.setBackgroundColor(theme.backgroundColor)
-
-    titleBox.title = `Code Demo - ${theme.name}`
-    titleBox.borderColor = theme.titleBorderColor
-    titleBox.backgroundColor = theme.panelBackgroundColor
-    instructionsText.fg = theme.instructionsColor
-
-    if (helpModal) {
-      helpModal.borderColor = theme.titleBorderColor
-      helpModal.backgroundColor = theme.panelBackgroundColor
-    }
-    helpContent.fg = theme.helpTextColor
-
-    if (codeScrollBox) {
-      codeScrollBox.borderColor = theme.codeBorderColor
-      codeScrollBox.backgroundColor = theme.panelBackgroundColor
-    }
-
-    updateCodeTitle()
-
-    if (timingText) {
-      timingText.fg = theme.timingColor
-    }
-
-    if (codeWithLineNumbers) {
-      codeWithLineNumbers.fg = theme.lineNumberFg
-      codeWithLineNumbers.bg = theme.lineNumberBg
-    }
-
-    if (codeDisplay) {
-      codeDisplay.selectionBg = theme.selectionBg
-      codeDisplay.selectionFg = theme.selectionFg
-    }
-
-    const previousSyntaxStyle = syntaxStyle
-    const nextSyntaxStyle = createSyntaxStyle(theme)
-    syntaxStyle = nextSyntaxStyle
-    if (codeDisplay) {
-      codeDisplay.syntaxStyle = nextSyntaxStyle
-    }
-    previousSyntaxStyle?.destroy()
-
-    updateTimingText()
-  }
-
-  updateCodeTitle()
-  updateTimingText()
-
-  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 === "right" || key.name === "left") {
-      // Navigate between examples
-      if (key.name === "right") {
-        currentExampleIndex = (currentExampleIndex + 1) % examples.length
-      } else {
-        currentExampleIndex = (currentExampleIndex - 1 + examples.length) % examples.length
-      }
-
-      updateCodeTitle()
-
-      if (codeDisplay) {
-        const example = examples[currentExampleIndex]
-        codeDisplay.content = example.code
-        codeDisplay.filetype = example.filetype
-        updateTimingText()
-      }
-    } else if (key.name === "c" && !key.ctrl && !key.meta) {
-      // Toggle conceal
-      concealEnabled = !concealEnabled
-      if (codeDisplay) {
-        codeDisplay.conceal = concealEnabled
-      }
-      updateTimingText()
-    } else if (key.name === "l" && !key.ctrl && !key.meta) {
-      // Toggle line numbers
-      if (codeWithLineNumbers) {
-        codeWithLineNumbers.showLineNumbers = !codeWithLineNumbers.showLineNumbers
-      }
-      updateTimingText()
-    } else if (key.name === "t" && !key.ctrl && !key.meta) {
-      currentThemeIndex = (currentThemeIndex + 1) % themes.length
-      applyTheme()
-    } else if (key.name === "h" && !key.ctrl && !key.meta) {
-      // Toggle diff highlights
-      if (codeWithLineNumbers && codeDisplay) {
-        highlightsEnabled = !highlightsEnabled
-        if (highlightsEnabled) {
-          // Add diff-style highlights for demonstration
-          const lineCount = codeDisplay.virtualLineCount
-          for (let i = 0; i < lineCount; i += 7) {
-            if (i % 14 === 0) {
-              codeWithLineNumbers.setLineColor(i, "#1a4d1a")
-              codeWithLineNumbers.setLineSign(i, { after: " +", afterColor: "#22c55e" })
-            } else {
-              codeWithLineNumbers.setLineColor(i, "#4d1a1a")
-              codeWithLineNumbers.setLineSign(i, { after: " -", afterColor: "#ef4444" })
-            }
-          }
-        } else {
-          codeWithLineNumbers.clearAllLineColors()
-          // Clear only after signs
-          const currentSigns = codeWithLineNumbers.getLineSigns()
-          for (const [line, sign] of currentSigns) {
-            if (sign.after) {
-              if (sign.before) {
-                codeWithLineNumbers.setLineSign(line, { before: sign.before, beforeColor: sign.beforeColor })
-              } else {
-                codeWithLineNumbers.clearLineSign(line)
-              }
-            }
-          }
-        }
-      }
-      updateTimingText()
-    } else if (key.name === "d" && !key.ctrl && !key.meta) {
-      // Toggle diagnostics
-      if (codeWithLineNumbers && codeDisplay) {
-        diagnosticsEnabled = !diagnosticsEnabled
-        if (diagnosticsEnabled) {
-          // Add diagnostic signs for demonstration
-          const lineCount = codeDisplay.virtualLineCount
-          for (let i = 0; i < lineCount; i += 9) {
-            if (i % 27 === 0) {
-              codeWithLineNumbers.setLineSign(i, { before: "❌", beforeColor: "#ef4444" })
-            } else if (i % 18 === 0) {
-              codeWithLineNumbers.setLineSign(i, { before: "⚠️", beforeColor: "#f59e0b" })
-            } else {
-              codeWithLineNumbers.setLineSign(i, { before: "💡", beforeColor: "#3b82f6" })
-            }
-          }
-        } else {
-          // Clear only before signs
-          const currentSigns = codeWithLineNumbers.getLineSigns()
-          for (const [line, sign] of currentSigns) {
-            if (sign.before) {
-              if (sign.after) {
-                codeWithLineNumbers.setLineSign(line, { after: sign.after, afterColor: sign.afterColor })
-              } else {
-                codeWithLineNumbers.clearLineSign(line)
-              }
-            }
-          }
-        }
-      }
-      updateTimingText()
-    }
-  }
-
-  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
-  codeScrollBox = null
-  codeDisplay = null
-  codeWithLineNumbers = null
-  timingText = null
-  syntaxStyle = null
-  helpModal = null
-  showingHelp = false
-
-  renderer = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 60,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}