@fairyhunter13/opentui-core 0.1.113 → 0.1.114

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

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

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