@fairyhunter13/opentui-core 0.1.90 → 0.1.92

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

@@ -1,452 +0,0 @@
-#!/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

@@ -1,122 +0,0 @@
-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

@@ -1,125 +0,0 @@
-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)
-          }
-        }
-      }
-    }
-  }
-}