@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/examples/keypress-debug-demo.ts

@@ -0,0 +1,452 @@
+#!/usr/bin/env bun
+
+import {
+  type CliRenderer,
+  createCliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  type KeyEvent,
+  type PasteEvent,
+  decodePasteBytes,
+} from "../index.js"
+import { ScrollBoxRenderable } from "../renderables/ScrollBox.js"
+import { TextNodeRenderable } from "../renderables/TextNode.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { env, registerEnvVar } from "../lib/env.js"
+
+registerEnvVar({
+  name: "OTUI_KEYPRESS_DEBUG_SHOW_JSON",
+  description: "Show full JSON alongside formatted output in keypress debug tool",
+  type: "boolean",
+  default: false,
+})
+
+let scrollBox: ScrollBoxRenderable | null = null
+let eventCount = 0
+let helpModal: BoxRenderable | null = null
+let helpContent: TextRenderable | null = null
+let scrollHint: TextRenderable | null = null
+let showingHelp = false
+let showJson = false
+let inputHandler: ((sequence: string) => boolean) | null = null
+let keypressHandler: ((event: KeyEvent) => void) | null = null
+let keyreleaseHandler: ((event: KeyEvent) => void) | null = null
+let pasteHandler: ((event: PasteEvent) => void) | null = null
+
+// Storage for all captured data
+let allRawInputs: Array<{ timestamp: string; sequence: string }> = []
+let allKeyEvents: Array<{ timestamp: string; type: string; event: any }> = []
+
+function saveToFile(capabilities: CliRenderer["capabilities"]) {
+  const timestamp = new Date().toISOString().replace(/[:.]/g, "-")
+  const filename = `keypress-debug-${timestamp}.json`
+
+  const data = {
+    exportedAt: new Date().toISOString(),
+    rawInputs: allRawInputs,
+    keyEvents: allKeyEvents,
+    summary: {
+      totalRawInputs: allRawInputs.length,
+      totalKeyEvents: allKeyEvents.length,
+    },
+    capabilities,
+  }
+
+  try {
+    Bun.write(filename, JSON.stringify(data, null, 2))
+    console.log(`Saved debug data to ${filename}`)
+  } catch (error) {
+    console.error(`Failed to save file: ${error}`)
+  }
+}
+
+function formatEventAsText(renderer: CliRenderer, eventType: string, event: any): TextRenderable {
+  const eventText = new TextRenderable(renderer, {
+    id: `event-text-${eventCount}`,
+  })
+
+  // Event type header with icon
+  let icon = "⌨️ "
+  let typeColor = "#A5D6FF"
+  if (eventType === "keypress") {
+    icon = "↓ "
+    typeColor = "#7EE787"
+  } else if (eventType === "keyrelease") {
+    icon = "↑ "
+    typeColor = "#FFA657"
+  } else if (eventType === "paste") {
+    icon = "📋 "
+    typeColor = "#D2A8FF"
+  } else if (eventType === "capabilities") {
+    icon = "ℹ️  "
+    typeColor = "#79C0FF"
+  }
+
+  const typeNode = TextNodeRenderable.fromString(`${icon}${eventType.toUpperCase()}`, {
+    fg: typeColor,
+    attributes: 1, // bold
+  })
+  eventText.textNode.add(typeNode)
+
+  // Key name (if available)
+  if (event.name) {
+    const keyNode = TextNodeRenderable.fromString(` ${event.name}`, {
+      fg: "#FFA657",
+      attributes: 1,
+    })
+    eventText.textNode.add(keyNode)
+  }
+
+  // Modifiers
+  const modifiers: string[] = []
+  if (event.ctrl) modifiers.push("Ctrl")
+  if (event.meta) modifiers.push("Meta")
+  if (event.shift) modifiers.push("Shift")
+  if (event.option) modifiers.push("Option")
+  if (event.super) modifiers.push("Super")
+  if (event.hyper) modifiers.push("Hyper")
+
+  if (modifiers.length > 0) {
+    const modNode = TextNodeRenderable.fromString(` [${modifiers.join("+")}]`, {
+      fg: "#D2A8FF",
+    })
+    eventText.textNode.add(modNode)
+  }
+
+  // Sequence/Raw
+  if (event.raw || event.sequence) {
+    const raw = event.raw || event.sequence
+    const displayRaw = JSON.stringify(raw)
+    const rawNode = TextNodeRenderable.fromString(` ${displayRaw}`, {
+      fg: "#79C0FF",
+    })
+    eventText.textNode.add(rawNode)
+  }
+
+  // Source
+  if (event.source) {
+    const sourceNode = TextNodeRenderable.fromString(` (${event.source})`, {
+      fg: "#8B949E",
+    })
+    eventText.textNode.add(sourceNode)
+  }
+
+  // Paste text
+  if (eventType === "paste") {
+    const pasteText = decodePasteBytes(event.bytes)
+    const textPreview = pasteText.length > 50 ? pasteText.substring(0, 47) + "..." : pasteText
+    const pasteNode = TextNodeRenderable.fromString(`\n  "${textPreview}"`, {
+      fg: "#A5D6FF",
+    })
+    eventText.textNode.add(pasteNode)
+  }
+
+  // Capabilities info - show full details
+  if (eventType === "capabilities") {
+    const capsText = JSON.stringify(event, null, 2)
+    const capsNode = TextNodeRenderable.fromString(`\n${capsText}`, {
+      fg: "#8B949E",
+    })
+    eventText.textNode.add(capsNode)
+  }
+
+  // Timestamp
+  const time = new Date().toLocaleTimeString()
+  const timeNode = TextNodeRenderable.fromString(`\n  ${time}`, {
+    fg: "#6E7681",
+  })
+  eventText.textNode.add(timeNode)
+
+  // Show full JSON if enabled
+  if (showJson && eventType !== "capabilities") {
+    const jsonText = JSON.stringify({ type: eventType, timestamp: new Date().toISOString(), ...event }, null, 2)
+    const jsonNode = TextNodeRenderable.fromString(`\n\n${jsonText}`, {
+      fg: "#8B949E",
+    })
+    eventText.textNode.add(jsonNode)
+  }
+
+  return eventText
+}
+
+function addEvent(renderer: CliRenderer, eventType: string, event: object) {
+  if (!scrollBox) return
+
+  eventCount++
+
+  const eventBox = new BoxRenderable(renderer, {
+    id: `event-${eventCount}`,
+    width: "auto",
+    marginBottom: 1,
+    padding: 1,
+    backgroundColor: "#1f2937",
+    borderColor: "#374151",
+    borderStyle: "single",
+    border: true,
+  })
+
+  const eventDisplay = formatEventAsText(renderer, eventType, event)
+  eventBox.add(eventDisplay)
+  scrollBox.add(eventBox)
+
+  const children = scrollBox.getChildren()
+  if (children.length > 50) {
+    const oldest = children[0]
+    if (oldest) {
+      scrollBox.remove(oldest.id)
+      oldest.destroyRecursively()
+    }
+  }
+}
+
+export function run(renderer: CliRenderer): void {
+  renderer.setBackgroundColor("#0D1117")
+
+  // Initialize showJson from env var
+  showJson = env.OTUI_KEYPRESS_DEBUG_SHOW_JSON
+
+  // Get any debug inputs captured before this tool started (e.g., during setupTerminal)
+  const cachedDebugInputs = renderer.getDebugInputs()
+  if (cachedDebugInputs.length > 0) {
+    allRawInputs.push(...cachedDebugInputs)
+    console.log(`Loaded ${cachedDebugInputs.length} pre-captured debug inputs (including terminal setup)`)
+  }
+
+  const mainContainer = new BoxRenderable(renderer, {
+    id: "main-container",
+    flexGrow: 1,
+    flexDirection: "column",
+  })
+
+  renderer.root.add(mainContainer)
+
+  scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "event-scroll-box",
+    stickyScroll: true,
+    stickyStart: "bottom",
+    border: true,
+    borderColor: "#6BCF7F",
+    title: "Keypress Debug Tool (Press ? for keys)",
+    titleAlignment: "center",
+    contentOptions: {
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 1,
+    },
+  })
+
+  mainContainer.add(scrollBox)
+
+  // Create help modal (hidden by default)
+  helpModal = new BoxRenderable(renderer, {
+    id: "help-modal",
+    position: "absolute",
+    left: "5%",
+    top: "5%",
+    width: "90%",
+    height: "90%",
+    border: true,
+    borderStyle: "double",
+    borderColor: "#4ECDC4",
+    backgroundColor: "#0D1117",
+    title: "Keybindings",
+    titleAlignment: "center",
+    flexDirection: "column",
+    zIndex: 100,
+    visible: false,
+  })
+
+  helpContent = new TextRenderable(renderer, {
+    id: "help-content",
+    content: `Actions:
+  Shift+C : Refresh terminal capabilities
+  Shift+J : Toggle JSON view (show full JSON)
+  Shift+S : Save all captured data to JSON file
+  ?       : Toggle this help screen
+  ESC     : Return to main menu
+
+Events Captured:
+  • All keypress events
+  • All keyrelease events
+  • Paste events
+  • Raw input sequences (including unhandled)
+
+Env Vars:
+  OTUI_KEYPRESS_DEBUG_SHOW_JSON=true
+    Enable JSON view at startup
+
+The debug tool displays all keyboard and
+input events in real-time. Use Shift+S to
+save all captured data to a timestamped
+JSON file in the current directory.`,
+    fg: "#E6EDF3",
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  helpModal.add(helpContent)
+
+  // Scroll hint (shown only when there's content to scroll)
+  scrollHint = new TextRenderable(renderer, {
+    id: "scroll-hint",
+    content: "↑↓ to scroll",
+    fg: "#6E7681",
+    flexShrink: 0,
+    height: 1,
+    visible: false,
+  })
+  helpModal.add(scrollHint)
+
+  renderer.root.add(helpModal)
+
+  addEvent(renderer, "capabilities", renderer.capabilities)
+
+  inputHandler = (sequence: string) => {
+    // Store all raw input
+    allRawInputs.push({
+      timestamp: new Date().toISOString(),
+      sequence,
+    })
+
+    addEvent(renderer, "raw-input", { sequence })
+    return false
+  }
+  // Prepend to capture everything, even what other handlers process
+  renderer.prependInputHandler(inputHandler)
+
+  keypressHandler = (event: KeyEvent) => {
+    // Store all keypress events
+    allKeyEvents.push({
+      timestamp: new Date().toISOString(),
+      type: "keypress",
+      event: { ...event },
+    })
+
+    // Handle help modal toggle
+    if (event.raw === "?" && helpModal) {
+      showingHelp = !showingHelp
+      helpModal.visible = showingHelp
+
+      // Update scroll hint visibility when modal opens
+      if (showingHelp && helpContent && scrollHint) {
+        const canScroll = helpContent.maxScrollY > 0
+        scrollHint.visible = canScroll
+      }
+      return
+    }
+
+    // Handle scrolling when help modal is open
+    if (showingHelp && helpContent) {
+      if (event.name === "up") {
+        helpContent.scrollY = Math.max(0, helpContent.scrollY - 1)
+        return
+      } else if (event.name === "down") {
+        helpContent.scrollY = Math.min(helpContent.maxScrollY, helpContent.scrollY + 1)
+        return
+      }
+    }
+
+    // Handle JSON view toggle
+    if (event.name === "j" && event.shift) {
+      showJson = !showJson
+      return
+    }
+
+    // Handle save to file
+    if (event.name === "s" && event.shift) {
+      saveToFile(renderer.capabilities)
+      return
+    }
+
+    // Don't log modal toggle key
+    if (showingHelp && event.raw === "?") {
+      return
+    }
+
+    addEvent(renderer, "keypress", event)
+
+    if (event.name === "c" && event.shift) {
+      addEvent(renderer, "capabilities", renderer.capabilities)
+    }
+  }
+  renderer.keyInput.on("keypress", keypressHandler)
+
+  keyreleaseHandler = (event: KeyEvent) => {
+    // Store all keyrelease events
+    allKeyEvents.push({
+      timestamp: new Date().toISOString(),
+      type: "keyrelease",
+      event: { ...event },
+    })
+
+    addEvent(renderer, "keyrelease", event)
+  }
+  renderer.keyInput.on("keyrelease", keyreleaseHandler)
+
+  pasteHandler = (event: PasteEvent) => {
+    // Store all paste events
+    allKeyEvents.push({
+      timestamp: new Date().toISOString(),
+      type: "paste",
+      event: { ...event },
+    })
+
+    addEvent(renderer, "paste", event)
+  }
+  renderer.keyInput.on("paste", pasteHandler)
+
+  renderer.requestRender()
+}
+
+export function destroy(renderer: CliRenderer): void {
+  renderer.clearFrameCallbacks()
+
+  // Remove event listeners
+  if (keypressHandler) {
+    renderer.keyInput.off("keypress", keypressHandler)
+    keypressHandler = null
+  }
+
+  if (keyreleaseHandler) {
+    renderer.keyInput.off("keyrelease", keyreleaseHandler)
+    keyreleaseHandler = null
+  }
+
+  if (pasteHandler) {
+    renderer.keyInput.off("paste", pasteHandler)
+    pasteHandler = null
+  }
+
+  if (inputHandler) {
+    renderer.removeInputHandler(inputHandler)
+    inputHandler = null
+  }
+
+  if (scrollBox) {
+    renderer.root.remove("main-container")
+    scrollBox = null
+  }
+
+  helpModal?.destroy()
+  helpModal = null
+  helpContent = null
+  scrollHint = null
+
+  eventCount = 0
+  showingHelp = false
+  showJson = false
+
+  // Clear captured data
+  allRawInputs = []
+  allKeyEvents = []
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    targetFps: 60,
+    useKittyKeyboard: { events: true },
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

package/src/examples/lib/HexList.ts

@@ -0,0 +1,122 @@
+import type { RenderableOptions } from "../../Renderable.js"
+import { RGBA } from "../../lib/RGBA.js"
+import { FrameBufferRenderable, type FrameBufferOptions } from "../../renderables/FrameBuffer.js"
+import type { RenderContext } from "../../types.js"
+import { TextAttributes } from "../../index.js"
+
+export interface HexListOptions extends Omit<RenderableOptions<HexListRenderable>, "width" | "height"> {
+  colors: string[]
+  columns?: number
+  blockWidth?: number
+  blockHeight?: number
+  maxHeight?: number
+}
+
+export class HexListRenderable extends FrameBufferRenderable {
+  private _colors: string[]
+  private _columns: number
+  private _blockWidth: number
+  private _blockHeight: number
+  private _maxHeight: number
+  private _itemWidth: number
+
+  constructor(ctx: RenderContext, options: HexListOptions) {
+    const columns = options.columns ?? 4
+    const blockWidth = options.blockWidth ?? 4
+    const blockHeight = options.blockHeight ?? 2
+    const itemWidth = 18 // Space for color box + spacing + index + hex
+    const maxHeight = options.maxHeight ?? Math.ceil(256 / columns) * (blockHeight + 1)
+
+    const colors = options.colors ?? []
+    const numRows = Math.ceil(colors.length / columns)
+    const requiredHeight = numRows * (blockHeight + 1)
+    const height = Math.min(requiredHeight, maxHeight)
+    const width = columns * itemWidth
+
+    super(ctx, {
+      ...options,
+      width,
+      height: Math.max(height, 1),
+    } as FrameBufferOptions)
+
+    this._colors = colors
+    this._columns = columns
+    this._blockWidth = blockWidth
+    this._blockHeight = blockHeight
+    this._maxHeight = maxHeight
+    this._itemWidth = itemWidth
+
+    this.renderHexList()
+  }
+
+  get colors(): string[] {
+    return this._colors
+  }
+
+  set colors(value: string[]) {
+    this._colors = value
+    this.updateDimensions()
+    this.renderHexList()
+    this.requestRender()
+  }
+
+  private updateDimensions(): void {
+    const numRows = Math.ceil(this._colors.length / this._columns)
+    const requiredHeight = numRows * (this._blockHeight + 1)
+    const newHeight = Math.min(requiredHeight, this._maxHeight)
+
+    if (this.height !== newHeight) {
+      this.height = Math.max(newHeight, 1)
+    }
+  }
+
+  protected onResize(width: number, height: number): void {
+    super.onResize(width, height)
+    this.renderHexList()
+  }
+
+  private renderHexList(): void {
+    if (this.isDestroyed) return
+
+    const buffer = this.frameBuffer
+    buffer.clear(RGBA.fromInts(30, 41, 59, 255)) // Slate-800 background
+
+    const actualSize = Math.min(this._colors.length, 256)
+
+    for (let i = 0; i < actualSize; i++) {
+      const color = this._colors[i]
+      if (!color) continue
+
+      const row = Math.floor(i / this._columns)
+      const col = i % this._columns
+
+      const x = col * this._itemWidth
+      const y = row * (this._blockHeight + 1) // Add spacing between rows
+
+      // Parse hex color
+      const hex = color.replace("#", "")
+      const r = parseInt(hex.substring(0, 2), 16)
+      const g = parseInt(hex.substring(2, 4), 16)
+      const b = parseInt(hex.substring(4, 6), 16)
+      const rgba = RGBA.fromInts(r, g, b)
+
+      // Draw colored box
+      for (let dy = 0; dy < this._blockHeight; dy++) {
+        for (let dx = 0; dx < this._blockWidth; dx++) {
+          buffer.setCell(x + dx, y + dy, " ", RGBA.fromInts(255, 255, 255), rgba)
+        }
+      }
+
+      // Draw index and hex value next to the box
+      const text = `${i.toString().padStart(3, " ")}: ${color.toUpperCase()}`
+      const textColor = RGBA.fromInts(148, 163, 184)
+      const bgColor = RGBA.fromInts(30, 41, 59, 255)
+      const textStartX = x + this._blockWidth + 1
+      const spacing = 2
+
+      for (let ci = 0; ci < text.length && textStartX + ci < x + this._itemWidth - spacing; ci++) {
+        buffer.drawText(text[ci], textStartX + ci, y, textColor, bgColor, TextAttributes.NONE)
+      }
+    }
+  }
+}

package/src/examples/lib/PaletteGrid.ts

@@ -0,0 +1,125 @@
+import type { RenderableOptions } from "../../Renderable.js"
+import { RGBA } from "../../lib/RGBA.js"
+import { FrameBufferRenderable, type FrameBufferOptions } from "../../renderables/FrameBuffer.js"
+import type { RenderContext } from "../../types.js"
+import { TextAttributes } from "../../index.js"
+
+export interface PaletteGridOptions extends Omit<RenderableOptions<PaletteGridRenderable>, "width" | "height"> {
+  colors: string[]
+  blockWidth?: number
+  blockHeight?: number
+  colorsPerRow?: number
+  maxHeight?: number
+}
+
+export class PaletteGridRenderable extends FrameBufferRenderable {
+  private _colors: string[]
+  private _blockWidth: number
+  private _blockHeight: number
+  private _colorsPerRow: number
+  private _maxHeight: number
+
+  constructor(ctx: RenderContext, options: PaletteGridOptions) {
+    const blockWidth = options.blockWidth ?? 4
+    const blockHeight = options.blockHeight ?? 2
+    const colorsPerRow = options.colorsPerRow ?? 16
+    const maxHeight = options.maxHeight ?? 32
+
+    const colors = options.colors ?? []
+    const numRows = Math.ceil(colors.length / colorsPerRow)
+    const requiredHeight = numRows * blockHeight
+    const height = Math.min(requiredHeight, maxHeight)
+    const width = colorsPerRow * blockWidth
+
+    super(ctx, {
+      ...options,
+      width,
+      height: Math.max(height, 1),
+    } as FrameBufferOptions)
+
+    this._colors = colors
+    this._blockWidth = blockWidth
+    this._blockHeight = blockHeight
+    this._colorsPerRow = colorsPerRow
+    this._maxHeight = maxHeight
+
+    this.renderPalette()
+  }
+
+  get colors(): string[] {
+    return this._colors
+  }
+
+  set colors(value: string[]) {
+    this._colors = value
+    this.updateDimensions()
+    this.renderPalette()
+    this.requestRender()
+  }
+
+  private updateDimensions(): void {
+    const numRows = Math.ceil(this._colors.length / this._colorsPerRow)
+    const requiredHeight = numRows * this._blockHeight
+    const newHeight = Math.min(requiredHeight, this._maxHeight)
+
+    if (this.height !== newHeight) {
+      this.height = Math.max(newHeight, 1)
+    }
+  }
+
+  protected onResize(width: number, height: number): void {
+    super.onResize(width, height)
+    this.renderPalette()
+  }
+
+  private renderPalette(): void {
+    if (this.isDestroyed) return
+
+    const buffer = this.frameBuffer
+    buffer.clear(RGBA.fromInts(30, 41, 59, 255)) // Slate-800 background
+
+    const size = this._colors.length
+
+    for (let i = 0; i < size; i++) {
+      const color = this._colors[i]
+      if (!color) continue
+
+      const row = Math.floor(i / this._colorsPerRow)
+      const col = i % this._colorsPerRow
+
+      const x = col * this._blockWidth
+      const y = row * this._blockHeight
+
+      // Parse hex color
+      const hex = color.replace("#", "")
+      const r = parseInt(hex.substring(0, 2), 16)
+      const g = parseInt(hex.substring(2, 4), 16)
+      const b = parseInt(hex.substring(4, 6), 16)
+      const rgba = RGBA.fromInts(r, g, b)
+
+      // Draw the color block using spaces with background color
+      for (let dy = 0; dy < this._blockHeight; dy++) {
+        for (let dx = 0; dx < this._blockWidth; dx++) {
+          buffer.setCell(x + dx, y + dy, " ", RGBA.fromInts(255, 255, 255), rgba)
+        }
+      }
+
+      // Add color index number in the center of the block (if block is large enough)
+      if (this._blockWidth >= 3 && this._blockHeight >= 1) {
+        const indexStr = i.toString()
+        const textX = x + Math.floor((this._blockWidth - indexStr.length) / 2)
+        const textY = y + Math.floor(this._blockHeight / 2)
+
+        // Choose text color based on background brightness
+        const brightness = (r * 299 + g * 587 + b * 114) / 1000
+        const textColor = brightness > 128 ? RGBA.fromInts(0, 0, 0) : RGBA.fromInts(255, 255, 255)
+
+        if (indexStr.length <= this._blockWidth) {
+          for (let ci = 0; ci < indexStr.length; ci++) {
+            buffer.drawText(indexStr[ci], textX + ci, textY, textColor, rgba, TextAttributes.NONE)
+          }
+        }
+      }
+    }
+  }
+}