@fairyhunter13/opentui-core 0.1.91 → 0.1.92

package/src/examples/sticky-scroll-example.ts

@@ -1,308 +0,0 @@
-import { BoxRenderable, type CliRenderer, createCliRenderer, TextRenderable, t, fg, bold } from "../index.js"
-import { ScrollBoxRenderable } from "../renderables/ScrollBox.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let scrollBox: ScrollBoxRenderable | null = null
-let renderer: CliRenderer | null = null
-let mainContainer: BoxRenderable | null = null
-let instructionsBox: BoxRenderable | null = null
-let itemCount = 0
-let animationInterval: ReturnType<typeof setInterval> | null = null
-
-// Track items with their creation time for animation
-interface AnimatedItem {
-  box: BoxRenderable
-  text: TextRenderable
-  createdAt: number
-  originalContent: string
-  normalBgColor: string
-  isAtTop: boolean
-}
-
-const animatedItems = new Map<string, AnimatedItem>()
-
-// Clear all items from the scroll box
-function clearAllItems() {
-  if (!scrollBox) return
-
-  // Stop any running animations
-  if (animationInterval) {
-    clearInterval(animationInterval)
-    animationInterval = null
-  }
-
-  // Clear animated items tracking
-  animatedItems.clear()
-
-  // Remove all children from scroll box
-  const children = scrollBox.getChildren()
-  for (const child of children) {
-    scrollBox.remove(child.id)
-    child.destroyRecursively()
-  }
-
-  // Reset item count
-  itemCount = 0
-}
-
-// Color interpolation helper
-function interpolateColor(color1: string, color2: string, factor: number): string {
-  const c1 = parseInt(color1.slice(1), 16)
-  const c2 = parseInt(color2.slice(1), 16)
-
-  const r1 = (c1 >> 16) & 0xff
-  const g1 = (c1 >> 8) & 0xff
-  const b1 = c1 & 0xff
-
-  const r2 = (c2 >> 16) & 0xff
-  const g2 = (c2 >> 8) & 0xff
-  const b2 = c2 & 0xff
-
-  const r = Math.round(r1 + (r2 - r1) * factor)
-  const g = Math.round(g1 + (g2 - g1) * factor)
-  const b = Math.round(b1 + (b2 - b1) * factor)
-
-  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`
-}
-
-// Animation update function
-function updateAnimations() {
-  const now = Date.now()
-
-  for (const [id, item] of animatedItems) {
-    const age = now - item.createdAt
-    const duration = 800 // 800ms animation
-
-    if (age >= duration) {
-      // Animation complete, set to final colors
-      item.box.backgroundColor = item.normalBgColor
-
-      // Set final content with normal colors
-      const itemNumber = id.split("-")[1]
-      const timeString = new Date(item.createdAt).toLocaleTimeString()
-      const finalContent = t`${bold(fg("#7aa2f7")(`Item #${itemNumber}`))}
-${fg("#9aa5ce")("This is a dynamically added item with enhanced content.")}
-${fg("#c0caf5")("Contains additional information and styling.")}
-${fg("#565f89")("Added at:")} ${timeString}
-${fg("#565f89")("Position:")} ${item.isAtTop ? "TOP" : "BOTTOM"}
-${fg("#565f89")("Status:")} ${fg("#9ece6a")("ACTIVE")}`
-
-      item.text.content = finalContent
-      animatedItems.delete(id)
-      continue
-    }
-
-    const progress = age / duration
-    const easeProgress = 1 - Math.pow(1 - progress, 3) // Ease out cubic
-
-    // Interpolate background color (bright to normal)
-    const brightBg = "#4c4f69"
-    item.box.backgroundColor = interpolateColor(brightBg, item.normalBgColor, easeProgress)
-
-    // Update text with flashy purple fading to normal blue
-    const itemNumber = id.split("-")[1]
-    const currentTitleColor = interpolateColor("#bb9af7", "#7aa2f7", easeProgress)
-    const timeString = new Date(item.createdAt).toLocaleTimeString()
-
-    // Reconstruct content with interpolated color
-    const updatedContent = t`${bold(fg(currentTitleColor)(`Item #${itemNumber}`))}
-${fg("#9aa5ce")("This is a dynamically added item with enhanced content.")}
-${fg("#c0caf5")("Contains additional information and styling.")}
-${fg("#565f89")("Added at:")} ${timeString}
-${fg("#565f89")("Position:")} ${item.isAtTop ? "TOP" : "BOTTOM"}
-${fg("#565f89")("Status:")} ${fg("#9ece6a")("ACTIVE")}`
-
-    item.text.content = updatedContent
-  }
-
-  // Stop animation loop if no items are animating
-  if (animatedItems.size === 0 && animationInterval) {
-    clearInterval(animationInterval)
-    animationInterval = null
-  }
-}
-
-function addItem(atTop: boolean = false) {
-  if (!renderer || !scrollBox) return
-
-  itemCount++
-
-  const boxId = `item-${itemCount}`
-  const normalBgColor = itemCount % 2 === 0 ? "#24283b" : "#1f2335"
-
-  // Start with flashy colors
-  const box = new BoxRenderable(renderer, {
-    id: boxId,
-    width: "auto",
-    padding: 1,
-    marginBottom: 1,
-    backgroundColor: "#4c4f69", // Bright initial background
-  })
-
-  const timeString = new Date().toLocaleTimeString()
-
-  // Store original content as string (without template literal processing)
-  const originalContent = `Item #${itemCount}\nThis is a dynamically added item with enhanced content.\nContains additional information and styling.\nAdded at: ${timeString}\nPosition: ${atTop ? "TOP" : "BOTTOM"}\nStatus: ACTIVE`
-
-  // Start with flashy purple title using template literal
-  const flashyContent = t`${bold(fg("#bb9af7")(`Item #${itemCount}`))}
-${fg("#9aa5ce")("This is a dynamically added item with enhanced content.")}
-${fg("#c0caf5")("Contains additional information and styling.")}
-${fg("#565f89")("Added at:")} ${timeString}
-${fg("#565f89")("Position:")} ${atTop ? "TOP" : "BOTTOM"}
-${fg("#565f89")("Status:")} ${fg("#9ece6a")("ACTIVE")}`
-
-  const text = new TextRenderable(renderer, {
-    content: flashyContent,
-  })
-
-  box.add(text)
-
-  if (atTop) {
-    scrollBox.add(box, 0) // Add at the beginning
-  } else {
-    scrollBox.add(box) // Add at the end
-  }
-
-  // Track for animation
-  animatedItems.set(boxId, {
-    box,
-    text,
-    createdAt: Date.now(),
-    originalContent,
-    normalBgColor,
-    isAtTop: atTop,
-  })
-
-  // Start animation loop if not running
-  if (!animationInterval) {
-    animationInterval = setInterval(updateAnimations, 16) // ~60fps
-  }
-}
-
-export function run(rendererInstance: CliRenderer): void {
-  renderer = rendererInstance
-  renderer.setBackgroundColor("#0a0a14")
-
-  mainContainer = new BoxRenderable(renderer, {
-    id: "main-container",
-    flexGrow: 1,
-    maxHeight: "100%",
-    maxWidth: "100%",
-    flexDirection: "column",
-    backgroundColor: "#0f0f23",
-  })
-
-  scrollBox = new ScrollBoxRenderable(renderer, {
-    id: "sticky-scroll-box",
-    stickyScroll: true,
-    stickyStart: "bottom",
-    rootOptions: {
-      backgroundColor: "#1e1e2e",
-      border: true,
-    },
-    wrapperOptions: {
-      backgroundColor: "#181825",
-    },
-    viewportOptions: {
-      backgroundColor: "#11111b",
-    },
-    contentOptions: {
-      backgroundColor: "#0f0f0f",
-    },
-    scrollbarOptions: {
-      // width: 2,
-      // showArrows: true,
-      trackOptions: {
-        foregroundColor: "#7aa2f7",
-        backgroundColor: "#313244",
-      },
-    },
-  })
-
-  instructionsBox = new BoxRenderable(renderer, {
-    id: "instructions",
-    width: "100%",
-    flexDirection: "column",
-    backgroundColor: "#1e1e2e",
-    paddingLeft: 1,
-    flexShrink: 0,
-  })
-
-  const instructionsText1 = new TextRenderable(renderer, {
-    content: t`${bold(fg("#7aa2f7")("Sticky Scroll Demo"))} ${fg("#565f89")("-")} ${bold(fg("#9ece6a")("S"))} ${fg("#c0caf5")("Toggle sticky scroll")} ${fg("#565f89")("|")} ${bold(fg("#bb9af7")("T"))} ${fg("#c0caf5")("Add item at top")} ${fg("#565f89")("|")} ${bold(fg("#f7768e")("B"))} ${fg("#c0caf5")("Add item at bottom")} ${fg("#565f89")("|")} ${bold(fg("#e0af68")("E"))} ${fg("#c0caf5")("Clear all items")}`,
-  })
-
-  const instructionsText2 = new TextRenderable(renderer, {
-    content: t`${bold(fg("#7aa2f7")("Behavior:"))} ${fg("#c0caf5")("Scroll to top/bottom, then add items to see sticky behavior")}`,
-  })
-
-  const instructionsText3 = new TextRenderable(renderer, {
-    content: t`${bold(fg("#7aa2f7")("Status:"))} ${fg("#c0caf5")("Sticky Scroll:")} ${scrollBox.stickyScroll ? fg("#9ece6a")("ENABLED") : fg("#f7768e")("DISABLED")}`,
-  })
-
-  instructionsBox.add(instructionsText1)
-  instructionsBox.add(instructionsText2)
-  instructionsBox.add(instructionsText3)
-
-  mainContainer.add(scrollBox)
-  mainContainer.add(instructionsBox)
-
-  renderer.root.add(mainContainer)
-
-  scrollBox.focus()
-
-  // Add some initial items
-  for (let i = 0; i < 10; i++) {
-    addItem(false)
-  }
-
-  rendererInstance.keyInput.on("keypress", (key) => {
-    if (key.name === "s" && scrollBox) {
-      // Toggle sticky scroll
-      const currentSticky = scrollBox.stickyScroll
-      scrollBox.stickyScroll = !currentSticky
-      console.log(`Sticky scroll ${!currentSticky ? "enabled" : "disabled"}`)
-
-      // Update status display
-      if (instructionsBox && instructionsBox.getChildren().length >= 3) {
-        const statusText = instructionsBox.getChildren()[2] as TextRenderable
-        statusText.content = t`${bold(fg("#7aa2f7")("Status:"))} ${fg("#c0caf5")("Sticky Scroll:")} ${(scrollBox as any).stickyScroll ? fg("#9ece6a")("ENABLED") : fg("#f7768e")("DISABLED")}`
-      }
-    } else if (key.name === "t" && scrollBox) {
-      addItem(true) // Add at top
-      console.log("Added item at top")
-    } else if (key.name === "b" && scrollBox) {
-      addItem(false) // Add at bottom
-      console.log("Added item at bottom")
-    } else if (key.name === "e" && scrollBox) {
-      clearAllItems() // Clear all items
-    }
-  })
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  if (mainContainer) {
-    rendererInstance.root.remove(mainContainer.id)
-    mainContainer.destroyRecursively()
-    mainContainer = null
-  }
-
-  // Clean up animation
-  if (animationInterval) {
-    clearInterval(animationInterval)
-    animationInterval = null
-  }
-  animatedItems.clear()
-
-  renderer = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}

package/src/examples/styled-text-demo.ts

@@ -1,282 +0,0 @@
-import {
-  CliRenderer,
-  createCliRenderer,
-  t,
-  blue,
-  bold,
-  underline,
-  red,
-  green,
-  bgYellow,
-  fg,
-  link,
-  BoxRenderable,
-  type KeyEvent,
-} from "../index.js"
-import { TextRenderable } from "../renderables/Text.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let parentContainer: BoxRenderable | null = null
-let counter = 0
-let frameCallback: ((deltaTime: number) => Promise<void>) | null = null
-let updateFrequency = 1 // Updates per frame (1 = every frame, 2 = every 2 frames, etc.)
-let complexTemplateCounter = 0
-let startTime = Date.now()
-let keyboardHandler: ((key: KeyEvent) => void) | null = null
-let dashboardBox: BoxRenderable | null = null
-let complexDisplay: TextRenderable | null = null
-
-export function run(rendererInstance: CliRenderer): void {
-  const renderer = rendererInstance
-  renderer.start()
-  renderer.setBackgroundColor("#001122")
-
-  parentContainer = new BoxRenderable(renderer, {
-    id: "styled-text-container",
-    zIndex: 15,
-  })
-  renderer.root.add(parentContainer)
-
-  counter = 0
-
-  // Example 1
-  const houseText = t`  
-There's a ${underline(blue("house"))},
-With a ${bold(blue("window"))},
-And a ${blue("corvette")}
-And everything is blue`
-
-  const houseDisplay = new TextRenderable(renderer, {
-    id: "house-text",
-    content: houseText,
-    width: 30,
-    height: 6,
-    position: "absolute",
-    left: 2,
-    top: 2,
-    zIndex: 1,
-  })
-  parentContainer.add(houseDisplay)
-
-  // Example 2
-  const statusText = t`${bold(red("ERROR:"))} Connection failed
-${bold(green("SUCCESS:"))} Data loaded
-${bold(fg("#FFA500")("WARNING:"))} Low memory
-${bgYellow(fg("black")(" NOTICE "))} System update available`
-
-  const statusDisplay = new TextRenderable(renderer, {
-    id: "status-text",
-    content: statusText,
-    width: 50,
-    height: 6,
-    position: "absolute",
-    left: 2,
-    top: 8,
-    zIndex: 1,
-  })
-  parentContainer.add(statusDisplay)
-
-  // Example 3 - Original dynamic text (updates every second)
-  dashboardBox = new BoxRenderable(renderer, {
-    id: "dashboard-box",
-    width: 72,
-    height: 21,
-    position: "absolute",
-    left: 2,
-    top: 27,
-    zIndex: 1,
-    backgroundColor: "#001122",
-    borderColor: "#00FFFF",
-    borderStyle: "single",
-    title: "COMPLEX REAL-TIME DASHBOARD",
-    titleAlignment: "center",
-    border: true,
-  })
-  parentContainer.add(dashboardBox)
-
-  const initialText = t`${bold("System Stats:")} ${fg("#888")("[Initializing...]")}
-${blue("Uptime:")} ${fg("#00FF00")("0.00")}s ${fg("#666")("(0m 0s)")}
-${red("CPU Load:")} ${green("0.0%")}
-${fg("#FF6B6B")("Memory:")} ${fg("#FFA500")("0.0%")}
-${fg("#9B59B6")("Network:")} ${fg("#FFA500")("0 KB/s")}
-${fg("#E74C3C")("Temp:")} ${blue("0.0°C")}
-${fg("#F39C12")("Battery:")} ${green("100%")}
-${underline("Connection:")} ${green(bold("ONLINE"))}
-${underline("Health:")} ${green(bold("GOOD"))}
-${underline("Alert:")} ${green(bold("NORMAL"))}
-${fg("#3498DB")("Random ID:")} ${fg("#E67E22")("0000")}
-${fg("#1ABC9C")("Wave:")} ${green("+0.00")}
-${fg("#9B59B6")("Progress:")} ${fg("#00FF00")("░".repeat(20))}
-${fg("#34495E")("Frame:")} ${fg("#ECF0F1")("0")} ${fg("#7F8C8D")("(Total: 0)")}
-${fg("#2ECC71")("Status:")} ${bold(fg("#E74C3C")("●"))} ${green("ALL SYSTEMS GO")}
-
-${bold(fg("#F1C40F")("Controls:"))} ${fg("#BDC3C7")("↑/↓ = Speed, ESC = Exit")}`
-
-  complexDisplay = new TextRenderable(renderer, {
-    id: "complex-template",
-    content: initialText,
-    left: 1,
-    top: 1,
-    zIndex: 1,
-  })
-  dashboardBox.add(complexDisplay)
-
-  frameCallback = async (deltaTime) => {
-    counter++
-    complexTemplateCounter++
-
-    if (counter % 60 === 0) {
-      // Update every second
-      const dynamicText = t`${bold("Frame:")} ${counter}
-${blue("Time:")} ${(counter / 60).toFixed(1)}s
-${underline("Dynamic:")} ${bold(fg("#FF6B6B")(Math.sin(counter * 0.1) > 0 ? "UP" : "DOWN"))}`
-
-      const dynamicDisplay = parentContainer?.getRenderable("dynamic-text") as TextRenderable
-      if (dynamicDisplay) {
-        dynamicDisplay.content = dynamicText
-      } else {
-        const newDynamicDisplay = new TextRenderable(renderer, {
-          id: "dynamic-text",
-          content: dynamicText,
-          width: 40,
-          height: 4,
-          position: "absolute",
-          left: 2,
-          top: 15,
-          zIndex: 1,
-        })
-        parentContainer?.add(newDynamicDisplay)
-      }
-    }
-
-    if (complexTemplateCounter % updateFrequency === 0 && complexDisplay) {
-      const currentTime = Date.now()
-      const elapsedMs = currentTime - startTime
-      const elapsedSeconds = elapsedMs / 1000
-
-      const cpuLoad = Math.sin(elapsedSeconds * 0.5) * 50 + 50
-      const memoryUsage = Math.cos(elapsedSeconds * 0.3) * 30 + 70
-      const networkSpeed = Math.abs(Math.sin(elapsedSeconds * 2)) * 1000
-      const temperature = Math.sin(elapsedSeconds * 0.1) * 20 + 60
-      const batteryLevel = Math.max(0, 100 - elapsedSeconds * 0.5)
-      const randomValue = Math.floor(Math.random() * 9999)
-      const waveValue = Math.sin(elapsedSeconds * 3) * 10
-      const progressBar = "█".repeat(Math.floor(((elapsedSeconds % 10) / 10) * 20))
-
-      const connectionStatus = Math.sin(elapsedSeconds) > 0 ? "ONLINE" : "OFFLINE"
-      const systemHealth = cpuLoad < 80 ? "GOOD" : "HIGH"
-      const alertLevel = temperature > 75 ? "CRITICAL" : "NORMAL"
-
-      const complexText = t`${bold("System Stats:")} ${fg("#888")(`[Update: ${updateFrequency === 1 ? "Every Frame" : `Every ${updateFrequency} frames`}]`)}
-${blue("Uptime:")} ${fg("#00FF00")(elapsedSeconds.toFixed(2))}s ${fg("#666")(`(${Math.floor(elapsedSeconds / 60)}m ${Math.floor(elapsedSeconds % 60)}s)`)}
-${red("CPU Load:")} ${cpuLoad > 80 ? red(bold(`${cpuLoad.toFixed(1)}%`)) : green(`${cpuLoad.toFixed(1)}%`)} ${fg("#444")("█".repeat(Math.floor(cpuLoad / 5)))}
-${fg("#FF6B6B")("Memory:")} ${memoryUsage > 85 ? red(bold(`${memoryUsage.toFixed(1)}%`)) : fg("#FFA500")(`${memoryUsage.toFixed(1)}%`)}
-${fg("#9B59B6")("Network:")} ${networkSpeed > 500 ? green(bold(`${networkSpeed.toFixed(0)} KB/s`)) : fg("#FFA500")(`${networkSpeed.toFixed(0)} KB/s`)}
-${fg("#E74C3C")("Temp:")} ${temperature > 75 ? red(bold(`${temperature.toFixed(1)}°C`)) : blue(`${temperature.toFixed(1)}°C`)}
-${fg("#F39C12")("Battery:")} ${batteryLevel < 20 ? red(bold(`${batteryLevel.toFixed(0)}%`)) : green(`${batteryLevel.toFixed(0)}%`)}
-${underline("Connection:")} ${connectionStatus === "ONLINE" ? green(bold(connectionStatus)) : red(bold(connectionStatus))}
-${underline("Health:")} ${systemHealth === "GOOD" ? green(bold(systemHealth)) : red(bold(systemHealth))}
-${underline("Alert:")} ${alertLevel === "NORMAL" ? green(bold(alertLevel)) : bgYellow(red(bold(alertLevel)))}
-${fg("#3498DB")("Random ID:")} ${fg("#E67E22")(randomValue.toString().padStart(4, "0"))}
-${fg("#1ABC9C")("Wave:")} ${waveValue >= 0 ? green(`+${waveValue.toFixed(2)}`) : red(waveValue.toFixed(2))}
-${fg("#9B59B6")("Progress:")} ${fg("#00FF00")(progressBar.padEnd(20, "░"))}
-${fg("#34495E")("Frame:")} ${fg("#ECF0F1")(complexTemplateCounter)} ${fg("#7F8C8D")(`(Total: ${counter})`)}
-${fg("#2ECC71")("Status:")} ${bold(fg("#E74C3C")("●"))} ${alertLevel === "CRITICAL" ? red("SYSTEM ALERT") : green("ALL SYSTEMS GO")}
-
-${bold(fg("#F1C40F")("Controls:"))} ${fg("#BDC3C7")("↑/↓ = Speed, ESC = Exit")}`
-
-      complexDisplay.content = complexText
-    }
-  }
-
-  renderer.setFrameCallback(frameCallback)
-
-  // Add keyboard controls for update frequency
-  keyboardHandler = (key: KeyEvent) => {
-    if (key.name === "up" || key.name === "arrowup") {
-      updateFrequency = Math.max(1, updateFrequency - 1)
-    } else if (key.name === "down" || key.name === "arrowdown") {
-      updateFrequency = Math.min(60, updateFrequency + 1)
-    }
-  }
-  rendererInstance.keyInput.on("keypress", keyboardHandler)
-
-  const instructionsText = t`${bold("Styled Text Demo")}
-${fg("#888")("ESC to return, ↑/↓ to control speed")}
-
-${underline("Features demonstrated:")}
-• Template literals with ${blue("colors")}
-• ${bold("Bold")}, ${underline("underlined")}, and other styles
-• Background colors like ${bgYellow(fg("black")("this"))}
-• Custom hex colors like ${fg("#FF6B6B")("this red")}
-• Dynamic updates with ${green("controllable frequency")}
-• Complex templates with ${red("many variables")}
-• Hyperlinks: ${underline(blue(link("https://opentui.com")("opentui")))}`
-
-  const instructionsDisplay = new TextRenderable(renderer, {
-    id: "instructions",
-    content: instructionsText,
-    width: 60,
-    height: 12,
-    position: "absolute",
-    left: 40,
-    top: 2,
-    zIndex: 1,
-    fg: "#CCCCCC",
-  })
-  parentContainer.add(instructionsDisplay)
-
-  // Examples showing number and boolean support
-  const typesText = t`${bold("Type Examples:")}
-Number: ${green(42)}
-Boolean: ${red(true)}
-Float: ${blue((3.14159).toFixed(2))}
-Calculated: ${fg("#00FFFF")(Math.floor(Math.random() * 100))}`
-
-  const typesDisplay = new TextRenderable(renderer, {
-    id: "types-text",
-    content: typesText,
-    width: 30,
-    height: 6,
-    position: "absolute",
-    left: 2,
-    top: 20,
-    zIndex: 1,
-  })
-  parentContainer.add(typesDisplay)
-
-  renderer.requestRender()
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  if (frameCallback) {
-    rendererInstance.removeFrameCallback(frameCallback)
-    frameCallback = null
-  }
-
-  if (keyboardHandler) {
-    rendererInstance.keyInput.off("keypress", keyboardHandler)
-    keyboardHandler = null
-  }
-
-  if (parentContainer) {
-    rendererInstance.root.remove("styled-text-container")
-    parentContainer = null
-  }
-
-  counter = 0
-  updateFrequency = 1
-  complexTemplateCounter = 0
-  startTime = Date.now()
-  dashboardBox = null
-  complexDisplay = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 60,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}