@fairyhunter13/opentui-core 0.1.113 → 0.1.114

package/src/examples/tab-select-demo.ts

@@ -0,0 +1,219 @@
+import {
+  createCliRenderer,
+  TabSelectRenderable,
+  TabSelectRenderableEvents,
+  RenderableEvents,
+  BoxRenderable,
+  type TabSelectOption,
+  type CliRenderer,
+  t,
+  bold,
+  fg,
+} from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { TextRenderable } from "../renderables/Text.js"
+
+let tabSelect: TabSelectRenderable | null = null
+let renderer: CliRenderer | null = null
+let keyboardHandler: ((key: any) => void) | null = null
+let parentContainer: BoxRenderable | null = null
+let keyLegendDisplay: TextRenderable | null = null
+let statusDisplay: TextRenderable | null = null
+let lastSelectedItem: TabSelectOption | null = null
+
+const tabOptions: TabSelectOption[] = [
+  { name: "Home", description: "Welcome to the home page", value: "home" },
+  { name: "Profile", description: "Manage your user profile", value: "profile" },
+  { name: "Settings", description: "Configure application settings", value: "settings" },
+  { name: "About", description: "Learn more about this application", value: "about" },
+  { name: "Help", description: "Get help and support", value: "help" },
+  { name: "Projects", description: "View and manage your projects", value: "projects" },
+  { name: "Dashboard", description: "View analytics and statistics", value: "dashboard" },
+  { name: "Reports", description: "Generate and view reports", value: "reports" },
+  { name: "Users", description: "Manage user accounts", value: "users" },
+  { name: "Admin", description: "Administrative functions", value: "admin" },
+  { name: "Tools", description: "Various utility tools", value: "tools" },
+  { name: "API", description: "API documentation and testing", value: "api" },
+]
+
+function updateDisplays() {
+  if (!tabSelect || !parentContainer) return
+
+  const underlineStatus = tabSelect.showUnderline ? "on" : "off"
+  const description = tabSelect.showDescription ? "on" : "off"
+  const scrollArrows = tabSelect.showScrollArrows ? "on" : "off"
+  const wrap = tabSelect.wrapSelection ? "on" : "off"
+
+  const keyLegendText = t`${bold(fg("#FFFFFF")("Key Controls:"))}
+←/→ or [/]: Navigate tabs
+Enter: Select tab
+F: Toggle focus
+U: Toggle underline
+P: Toggle description
+S: Toggle scroll arrows
+W: Toggle wrap selection`
+
+  if (keyLegendDisplay) {
+    keyLegendDisplay.content = keyLegendText
+  }
+
+  const currentHighlighted = tabSelect.getSelectedOption()
+  const highlightedText = currentHighlighted
+    ? `Highlighted: ${currentHighlighted.name} (${currentHighlighted.value}) - Index: ${tabSelect.getSelectedIndex()}`
+    : "No highlighted item"
+
+  const selectedText = lastSelectedItem
+    ? `Last Selected: ${lastSelectedItem.name} (${lastSelectedItem.value})`
+    : "No item selected yet (press Enter to select)"
+
+  const focusText = tabSelect.focused ? "Tab selector is FOCUSED" : "Tab selector is BLURRED"
+  const focusColor = tabSelect.focused ? "#00FF00" : "#FF0000"
+
+  const statusText = t`${fg("#00FF00")(highlightedText)}
+${fg("#FFFF00")(selectedText)}
+
+${fg(focusColor)(focusText)}
+
+${fg("#CCCCCC")(`Underline: ${underlineStatus} | Description: ${description} | Scroll arrows: ${scrollArrows} | Wrap: ${wrap}`)}`
+
+  if (statusDisplay) {
+    statusDisplay.content = statusText
+  }
+}
+
+export function run(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#001122")
+
+  parentContainer = new BoxRenderable(renderer, {
+    id: "tab-select-container",
+    zIndex: 10,
+  })
+  renderer.root.add(parentContainer)
+
+  tabSelect = new TabSelectRenderable(renderer, {
+    id: "main-tabs",
+    position: "absolute",
+    left: 5,
+    top: 2,
+    width: 70,
+    options: tabOptions,
+    zIndex: 100,
+    tabWidth: 12,
+    backgroundColor: "#1e293b",
+    focusedBackgroundColor: "#2d3748",
+    textColor: "#e2e8f0",
+    focusedTextColor: "#f7fafc",
+    selectedBackgroundColor: "#3b82f6",
+    selectedTextColor: "#ffffff",
+    selectedDescriptionColor: "#cbd5e1",
+    showDescription: true,
+    showUnderline: true,
+    showScrollArrows: true,
+    wrapSelection: false,
+  })
+
+  renderer.root.add(tabSelect)
+
+  keyLegendDisplay = new TextRenderable(renderer, {
+    id: "key-legend",
+    content: t``,
+    width: 40,
+    height: 10,
+    position: "absolute",
+    left: 5,
+    top: 8,
+    zIndex: 50,
+    fg: "#AAAAAA",
+  })
+  parentContainer.add(keyLegendDisplay)
+
+  // Create status display
+  statusDisplay = new TextRenderable(renderer, {
+    id: "status-display",
+    content: t``,
+    width: 80,
+    height: 6,
+    position: "absolute",
+    left: 5,
+    top: 19,
+    zIndex: 50,
+  })
+  parentContainer.add(statusDisplay)
+
+  tabSelect.on(TabSelectRenderableEvents.SELECTION_CHANGED, (index: number, option: TabSelectOption) => {
+    updateDisplays()
+  })
+
+  tabSelect.on(TabSelectRenderableEvents.ITEM_SELECTED, (index: number, option: TabSelectOption) => {
+    lastSelectedItem = option
+    updateDisplays()
+  })
+
+  tabSelect.on(RenderableEvents.FOCUSED, () => {
+    updateDisplays()
+  })
+
+  tabSelect.on(RenderableEvents.BLURRED, () => {
+    updateDisplays()
+  })
+
+  updateDisplays()
+
+  keyboardHandler = (key) => {
+    if (key.name === "f") {
+      if (tabSelect?.focused) {
+        tabSelect.blur()
+      } else {
+        tabSelect?.focus()
+      }
+    } else if (key.name === "u") {
+      tabSelect!.showUnderline = !tabSelect!.showUnderline
+      updateDisplays()
+    } else if (key.name === "p") {
+      tabSelect!.showDescription = !tabSelect!.showDescription
+      updateDisplays()
+    } else if (key.name === "s") {
+      tabSelect!.showScrollArrows = !tabSelect!.showScrollArrows
+      updateDisplays()
+    } else if (key.name === "w") {
+      tabSelect!.wrapSelection = !tabSelect!.wrapSelection
+      updateDisplays()
+    }
+  }
+
+  rendererInstance.keyInput.on("keypress", keyboardHandler)
+  tabSelect.focus()
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  if (keyboardHandler) {
+    rendererInstance.keyInput.off("keypress", keyboardHandler)
+    keyboardHandler = null
+  }
+
+  if (tabSelect) {
+    rendererInstance.root.remove(tabSelect.id)
+    tabSelect.destroy()
+    tabSelect = null
+  }
+
+  if (parentContainer) {
+    rendererInstance.root.remove("tab-select-container")
+    parentContainer = null
+  }
+
+  keyLegendDisplay = null
+  statusDisplay = null
+  lastSelectedItem = null
+  renderer = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

package/src/examples/terminal-title.ts

@@ -0,0 +1,29 @@
+import { TextRenderable, createCliRenderer } from "../index.js"
+
+async function testTerminalTitle() {
+  const renderer = await createCliRenderer({ exitOnCtrlC: true })
+  renderer.console.show()
+
+  const text = new TextRenderable(renderer, {
+    content: "Press Ctrl+C to exit",
+    margin: 2,
+  })
+
+  renderer.root.add(text)
+  console.log("Setting title to: 'OpenTUI Test'")
+  renderer.setTerminalTitle("OpenTUI Test")
+
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  console.log("Setting title to: 'Terminal Title Demo'")
+  renderer.setTerminalTitle("Terminal Title Demo")
+
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+
+  console.log("Setting title to: '🎉 Success! 🎉'")
+  renderer.setTerminalTitle("🎉 Success! 🎉")
+
+  await new Promise((resolve) => setTimeout(resolve, 2000))
+}
+
+testTerminalTitle().catch(console.error)

package/src/examples/terminal.ts

@@ -0,0 +1,305 @@
+#!/usr/bin/env bun
+
+import {
+  CliRenderer,
+  createCliRenderer,
+  RGBA,
+  TextAttributes,
+  TextRenderable,
+  FrameBufferRenderable,
+  BoxRenderable,
+  InputRenderable,
+  InputRenderableEvents,
+} from "../index.js"
+import { ScrollBoxRenderable } from "../renderables/ScrollBox.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import type { TerminalColors } from "../lib/terminal-palette.js"
+import { PaletteGridRenderable } from "./lib/PaletteGrid.js"
+import { HexListRenderable } from "./lib/HexList.js"
+
+/**
+ * This demo showcases terminal palette detection.
+ * Enter a palette size (1-256) in the input field and press Enter to fetch colors.
+ */
+
+let scrollBox: ScrollBoxRenderable | null = null
+let contentContainer: BoxRenderable | null = null
+let paletteGrid: PaletteGridRenderable | null = null
+let statusText: TextRenderable | null = null
+let hexList: HexListRenderable | null = null
+let specialColorsBuffer: FrameBufferRenderable | null = null
+let terminalColors: TerminalColors | null = null
+let keyboardHandler: ((key: any) => void) | null = null
+let paletteSizeInput: InputRenderable | null = null
+
+export function run(renderer: CliRenderer): void {
+  renderer.start()
+  const backgroundColor = RGBA.fromInts(15, 23, 42) // Slate-900 inspired
+  renderer.setBackgroundColor(backgroundColor)
+
+  const mainContainer = new BoxRenderable(renderer, {
+    id: "main-container",
+    flexGrow: 1,
+    flexDirection: "column",
+  })
+  renderer.root.add(mainContainer)
+
+  scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "terminal-scroll-box",
+    stickyScroll: false,
+    border: true,
+    borderColor: "#8B5CF6",
+    title: "Terminal Palette Demo (Ctrl+C to exit)",
+    titleAlignment: "center",
+    contentOptions: {
+      paddingLeft: 2,
+      paddingRight: 2,
+      paddingTop: 1,
+    },
+  })
+  mainContainer.add(scrollBox)
+
+  contentContainer = new BoxRenderable(renderer, {
+    id: "terminal-palette-container",
+    width: "auto",
+    flexDirection: "column",
+  })
+  scrollBox.add(contentContainer)
+
+  const subtitleText = new TextRenderable(renderer, {
+    id: "terminal_subtitle",
+    content: "Enter palette size (1-256) and press Enter to fetch | Press 'c' to clear cache",
+    fg: RGBA.fromInts(148, 163, 184), // Slate-400 - softer contrast
+  })
+  contentContainer.add(subtitleText)
+
+  // Add input field for palette size
+  const inputContainer = new BoxRenderable(renderer, {
+    id: "input-container",
+    flexDirection: "row",
+    marginTop: 1,
+  })
+  contentContainer.add(inputContainer)
+
+  const inputLabel = new TextRenderable(renderer, {
+    id: "input-label",
+    content: "Palette Size: ",
+    fg: RGBA.fromInts(148, 163, 184),
+  })
+  inputContainer.add(inputLabel)
+
+  paletteSizeInput = new InputRenderable(renderer, {
+    id: "palette-size-input",
+    width: 10,
+    height: 1,
+    backgroundColor: RGBA.fromInts(30, 41, 59),
+    textColor: RGBA.fromInts(255, 255, 255),
+    placeholder: "16",
+    placeholderColor: RGBA.fromInts(100, 116, 139),
+    cursorColor: RGBA.fromInts(139, 92, 246), // Purple cursor
+    value: "16",
+    maxLength: 3,
+  })
+  inputContainer.add(paletteSizeInput)
+
+  statusText = new TextRenderable(renderer, {
+    id: "terminal_status",
+    content: "Status: Ready to fetch palette",
+    marginTop: 1,
+    fg: RGBA.fromInts(56, 189, 248), // Sky blue - modern accent
+  })
+  contentContainer.add(statusText)
+
+  const instructionsText = new TextRenderable(renderer, {
+    id: "terminal_instructions",
+    content: "Press Escape to return to menu",
+    marginTop: 1,
+    fg: RGBA.fromInts(100, 116, 139), // Slate-500 - muted but readable
+  })
+  contentContainer.add(instructionsText)
+
+  // Create palette grid - will be populated when palette is fetched
+  paletteGrid = new PaletteGridRenderable(renderer, {
+    id: "palette-grid",
+    colors: [],
+    marginTop: 2,
+  })
+  contentContainer.add(paletteGrid)
+
+  // Set up input submit handler
+  paletteSizeInput.on(InputRenderableEvents.ENTER, async (value: string) => {
+    const size = parseInt(value, 10)
+    if (isNaN(size) || size < 1 || size > 256) {
+      if (statusText) {
+        statusText.content = "Status: Invalid palette size. Please enter a number between 1 and 256."
+        statusText.fg = RGBA.fromInts(239, 68, 68) // Red error
+      }
+      return
+    }
+    await fetchAndDisplayPalette(renderer, size)
+  })
+
+  // Set up keyboard handler
+  keyboardHandler = async (key) => {
+    if (key.name === "c") {
+      clearPaletteCache(renderer)
+    }
+  }
+
+  renderer.keyInput.on("keypress", keyboardHandler)
+
+  // Focus the input field on start
+  paletteSizeInput.focus()
+}
+
+async function fetchAndDisplayPalette(renderer: CliRenderer, size: number): Promise<void> {
+  if (!statusText || !paletteGrid) return
+
+  try {
+    const wasAlreadyCached = renderer.paletteDetectionStatus === "cached"
+    statusText.content = `Status: ${wasAlreadyCached ? "Using cached palette" : "Fetching palette..."}`
+    statusText.fg = RGBA.fromInts(250, 204, 21) // Amber - warm loading state
+
+    const startTime = performance.now()
+    terminalColors = await renderer.getPalette({ size })
+    const elapsed = Math.round(performance.now() - startTime)
+
+    statusText.content = `Status: Palette (${size} colors) fetched in ${elapsed}ms (${wasAlreadyCached ? "from cache" : "from terminal"})`
+    statusText.fg = RGBA.fromInts(34, 197, 94) // Emerald - fresh success state
+
+    drawPalette(renderer, terminalColors, size)
+  } catch (error) {
+    if (statusText) {
+      statusText.content = `Status: Error - ${error instanceof Error ? error.message : String(error)}`
+      statusText.fg = RGBA.fromInts(239, 68, 68) // Red-500 - modern error state
+    }
+  }
+}
+
+function clearPaletteCache(renderer: CliRenderer): void {
+  if (!statusText) return
+
+  renderer.clearPaletteCache()
+  statusText.content = "Status: Cache cleared. Enter a size and press Enter to fetch palette again."
+  statusText.fg = RGBA.fromInts(148, 163, 184) // Slate-400 - neutral info state
+}
+
+function drawPalette(renderer: CliRenderer, terminalColors: TerminalColors, size: number): void {
+  const colors = terminalColors.palette.slice(0, size)
+
+  // Update the palette grid with new colors
+  if (paletteGrid) {
+    paletteGrid.colors = colors
+  }
+
+  // Create special colors list with colored boxes
+  const specialColors = [
+    { label: "Default FG", value: terminalColors.defaultForeground },
+    { label: "Default BG", value: terminalColors.defaultBackground },
+    { label: "Cursor", value: terminalColors.cursorColor },
+    { label: "Mouse FG", value: terminalColors.mouseForeground },
+    { label: "Mouse BG", value: terminalColors.mouseBackground },
+    { label: "Tek FG", value: terminalColors.tekForeground },
+    { label: "Tek BG", value: terminalColors.tekBackground },
+    { label: "Highlight BG", value: terminalColors.highlightBackground },
+    { label: "Highlight FG", value: terminalColors.highlightForeground },
+  ]
+
+  // Create a framebuffer for special colors with colored boxes
+  const specialBufferWidth = 30
+  const specialBufferHeight = specialColors.length * 2
+
+  if (!specialColorsBuffer) {
+    specialColorsBuffer = new FrameBufferRenderable(renderer, {
+      id: "special-colors-buffer",
+      width: specialBufferWidth,
+      height: specialBufferHeight,
+      marginTop: 2,
+    })
+    contentContainer!.add(specialColorsBuffer)
+  }
+
+  const specialBuffer = specialColorsBuffer.frameBuffer
+  specialBuffer.clear(RGBA.fromInts(30, 41, 59, 255)) // Slate-800 background
+
+  specialColors.forEach(({ label, value }, index) => {
+    const y = index * 2
+    const boxWidth = 4
+
+    if (value) {
+      // Parse hex color
+      const hex = value.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 (4x2 block)
+      for (let dy = 0; dy < 2; dy++) {
+        for (let dx = 0; dx < boxWidth; dx++) {
+          specialBuffer.setCell(dx, y + dy, " ", RGBA.fromInts(255, 255, 255), rgba)
+        }
+      }
+
+      // Draw label and hex value
+      const text = `${label}: ${value.toUpperCase()}`
+      const textColor = RGBA.fromInts(148, 163, 184)
+      const bgColor = RGBA.fromInts(30, 41, 59, 255)
+      for (let i = 0; i < text.length; i++) {
+        specialBuffer.drawText(text[i], boxWidth + 1 + i, y, textColor, bgColor, TextAttributes.NONE)
+      }
+    } else {
+      // Draw N/A
+      const text = `${label}: N/A`
+      const textColor = RGBA.fromInts(100, 116, 139)
+      const bgColor = RGBA.fromInts(30, 41, 59, 255)
+      for (let i = 0; i < text.length; i++) {
+        specialBuffer.drawText(text[i], boxWidth + 1 + i, y, textColor, bgColor, TextAttributes.NONE)
+      }
+    }
+  })
+
+  // Update the hex list with new colors
+  if (!hexList) {
+    hexList = new HexListRenderable(renderer, {
+      id: "hex-list",
+      colors: colors,
+      marginTop: 2,
+    })
+    contentContainer!.add(hexList)
+  } else {
+    hexList.colors = colors
+  }
+}
+
+export function destroy(renderer: CliRenderer): void {
+  if (keyboardHandler) {
+    renderer.keyInput.off("keypress", keyboardHandler)
+    keyboardHandler = null
+  }
+
+  if (paletteSizeInput) {
+    paletteSizeInput.destroy()
+    paletteSizeInput = null
+  }
+
+  if (scrollBox) {
+    renderer.root.remove("main-container")
+    scrollBox = null
+  }
+
+  contentContainer = null
+  paletteGrid = null
+  hexList = null
+  specialColorsBuffer = null
+  statusText = null
+  terminalColors = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}