@fairyhunter13/opentui-core 0.1.113 → 0.1.114

package/src/examples/relative-positioning-demo.ts

@@ -0,0 +1,323 @@
+import { TextAttributes, createCliRenderer, TextRenderable, BoxRenderable, type KeyEvent } from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import type { CliRenderer } from "../index.js"
+
+let globalKeyboardHandler: ((key: KeyEvent) => void) | null = null
+let animationSpeed = 4000
+let animationTime = 0
+
+export function run(renderer: CliRenderer): void {
+  renderer.start()
+  renderer.setBackgroundColor("#001122")
+
+  const rootContainer = new BoxRenderable(renderer, {
+    id: "root-container",
+    position: "relative",
+    left: 0,
+    top: 0,
+    zIndex: 10,
+  })
+  renderer.root.add(rootContainer)
+
+  const title = new TextRenderable(renderer, {
+    id: "main-title",
+    content: "Relative Positioning Demo - Child positions are relative to parent",
+    position: "absolute",
+    left: 5,
+    top: 1,
+    fg: "#FFFF00",
+    attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE,
+    zIndex: 1000,
+  })
+  rootContainer.add(title)
+
+  const parentContainerA = new BoxRenderable(renderer, {
+    id: "parent-container-a",
+    position: "absolute",
+    left: 10,
+    top: 5,
+    zIndex: 50,
+  })
+  rootContainer.add(parentContainerA)
+
+  const parentBoxA = new BoxRenderable(renderer, {
+    id: "parent-box-a",
+    left: 0,
+    top: 0,
+    width: 40,
+    height: 12,
+    backgroundColor: "#220044",
+    zIndex: 1,
+    borderStyle: "double",
+    borderColor: "#FF44FF",
+    title: "Parent A (moves in circle)",
+    titleAlignment: "center",
+    flexDirection: "row",
+    alignItems: "stretch",
+    justifyContent: "space-between",
+    border: true,
+  })
+  parentContainerA.add(parentBoxA)
+
+  const childA1 = new BoxRenderable(renderer, {
+    id: "child-a1",
+    width: "auto",
+    height: "auto",
+    backgroundColor: "#440066",
+    zIndex: 2,
+    borderStyle: "single",
+    borderColor: "#FF88FF",
+    title: "Child 1",
+    titleAlignment: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 8,
+    border: true,
+  })
+  parentBoxA.add(childA1)
+
+  const childA2 = new BoxRenderable(renderer, {
+    id: "child-a2",
+    width: "auto",
+    height: "auto",
+    backgroundColor: "#660044",
+    zIndex: 2,
+    borderStyle: "single",
+    borderColor: "#FF88FF",
+    title: "Child 2",
+    titleAlignment: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 8,
+    border: true,
+  })
+  parentBoxA.add(childA2)
+
+  const childA3 = new BoxRenderable(renderer, {
+    id: "child-a3",
+    width: "auto",
+    height: "auto",
+    backgroundColor: "#440044",
+    zIndex: 2,
+    borderStyle: "single",
+    borderColor: "#FF88FF",
+    title: "Child 3",
+    titleAlignment: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 8,
+    border: true,
+  })
+  parentBoxA.add(childA3)
+
+  const parentContainerB = new BoxRenderable(renderer, {
+    id: "parent-container-b",
+    position: "absolute",
+    left: 50,
+    top: 8,
+    zIndex: 50,
+  })
+  rootContainer.add(parentContainerB)
+
+  const parentBoxB = new BoxRenderable(renderer, {
+    id: "parent-box-b",
+    left: 0,
+    top: 0,
+    width: 40,
+    height: 10,
+    backgroundColor: "#004422",
+    zIndex: 1,
+    borderStyle: "rounded",
+    borderColor: "#44FF44",
+    title: "Parent B (moves vertically)",
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    justifyContent: "space-between",
+    border: true,
+  })
+  parentContainerB.add(parentBoxB)
+
+  const parentLabelB = new TextRenderable(renderer, {
+    id: "parent-label-b",
+    content: "Parent B Position: (50, 8)",
+    fg: "#44FF44",
+    attributes: TextAttributes.BOLD,
+    zIndex: 2,
+  })
+  parentBoxB.add(parentLabelB)
+
+  const childB1 = new TextRenderable(renderer, {
+    id: "child-b1",
+    content: "Child at (1,3) - relative to parent",
+    fg: "#88FF88",
+    zIndex: 2,
+  })
+  parentBoxB.add(childB1)
+
+  const childB2 = new TextRenderable(renderer, {
+    id: "child-b2",
+    content: "Child at (1,5) - relative to parent",
+    fg: "#88FF88",
+    zIndex: 2,
+  })
+  parentBoxB.add(childB2)
+
+  const staticContainer = new BoxRenderable(renderer, {
+    id: "static-container",
+    position: "absolute",
+    left: 5,
+    top: 20,
+    zIndex: 50,
+  })
+  rootContainer.add(staticContainer)
+
+  const staticBox = new BoxRenderable(renderer, {
+    id: "static-box",
+    left: 0,
+    top: 0,
+    width: 40,
+    height: 8,
+    backgroundColor: "#442200",
+    zIndex: 1,
+    borderStyle: "single",
+    borderColor: "#FFFF44",
+    title: "Static Parent (doesn't move)",
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    border: true,
+    overflow: "hidden",
+  })
+  staticContainer.add(staticBox)
+
+  const staticChild1 = new TextRenderable(renderer, {
+    id: "static-child1",
+    content: "Static child at (2,2) - never moves",
+    fg: "#FFFF88",
+    zIndex: 2,
+  })
+  staticBox.add(staticChild1)
+
+  const staticChild2 = new TextRenderable(renderer, {
+    id: "static-child2",
+    content: "Static child at (2,4) - never moves",
+    fg: "#FFFF88",
+    zIndex: 2,
+  })
+  staticBox.add(staticChild2)
+
+  const explanation1 = new TextRenderable(renderer, {
+    id: "explanation1",
+    content: "Key Concept: Parent A uses flex layout - children are arranged in a row",
+    position: "absolute",
+    left: 5,
+    top: 30,
+    fg: "#AAAAAA",
+    attributes: TextAttributes.BOLD,
+    zIndex: 1000,
+  })
+  rootContainer.add(explanation1)
+
+  const explanation2 = new TextRenderable(renderer, {
+    id: "explanation2",
+    content: "When parent moves, children move with it while maintaining flex layout",
+    position: "absolute",
+    left: 5,
+    top: 31,
+    fg: "#AAAAAA",
+    zIndex: 1000,
+  })
+  rootContainer.add(explanation2)
+
+  const explanation3 = new TextRenderable(renderer, {
+    id: "explanation3",
+    content: "Flex children automatically fit parent width and grow/shrink as needed",
+    position: "absolute",
+    left: 5,
+    top: 32,
+    fg: "#AAAAAA",
+    zIndex: 1000,
+  })
+  rootContainer.add(explanation3)
+
+  const controls = new TextRenderable(renderer, {
+    id: "controls",
+    content: "Controls: +/- to change animation speed",
+    position: "absolute",
+    left: 5,
+    top: 34,
+    fg: "#FFFFFF",
+    attributes: TextAttributes.BOLD,
+    zIndex: 1000,
+  })
+  rootContainer.add(controls)
+
+  const speedDisplay = new TextRenderable(renderer, {
+    id: "speed-display",
+    content: `Animation Speed: ${animationSpeed}ms (min: 500, max: 8000)`,
+    position: "absolute",
+    left: 5,
+    top: 35,
+    fg: "#CCCCCC",
+    zIndex: 1000,
+  })
+  rootContainer.add(speedDisplay)
+
+  renderer.setFrameCallback(async (deltaMs) => {
+    animationTime += deltaMs
+
+    const circleRadius = 15
+    const circleSpeed = (animationTime / animationSpeed) * Math.PI * 2
+    const parentAX = 20 + Math.cos(circleSpeed) * circleRadius
+    const parentAY = 8 + (Math.sin(circleSpeed) * circleRadius) / 2
+
+    parentContainerA.setPosition({
+      left: Math.round(parentAX),
+      top: Math.round(parentAY),
+    })
+
+    const verticalSpeed = (animationTime / (animationSpeed * 1.5)) * Math.PI * 2
+    const parentBY = 8 + Math.sin(verticalSpeed) * 8
+
+    parentContainerB.setPosition({
+      left: 50,
+      top: Math.round(parentBY),
+    })
+    parentLabelB.content = `Parent B Position: (50, ${Math.round(parentBY)})`
+  })
+
+  globalKeyboardHandler = (key: KeyEvent) => {
+    if (key.name === "+" || key.name === "=") {
+      animationSpeed = Math.max(500, animationSpeed - 300)
+      speedDisplay.content = `Animation Speed: ${animationSpeed}ms (min: 500, max: 8000)`
+    } else if (key.name === "-" || key.name === "_") {
+      animationSpeed = Math.min(8000, animationSpeed + 300)
+      speedDisplay.content = `Animation Speed: ${animationSpeed}ms (min: 500, max: 8000)`
+    }
+  }
+
+  renderer.keyInput.on("keypress", globalKeyboardHandler)
+}
+
+export function destroy(renderer: CliRenderer): void {
+  if (globalKeyboardHandler) {
+    renderer.keyInput.off("keypress", globalKeyboardHandler)
+    globalKeyboardHandler = null
+  }
+
+  renderer.root.remove("root-container")
+
+  renderer.clearFrameCallbacks()
+  renderer.setCursorPosition(0, 0, false)
+  animationTime = 0
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

package/src/examples/scroll-example.ts

@@ -0,0 +1,214 @@
+import {
+  ASCIIFontRenderable,
+  BoxRenderable,
+  type CliRenderer,
+  createCliRenderer,
+  TextRenderable,
+  RGBA,
+  t,
+  fg,
+  bold,
+  underline,
+  italic,
+} 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 nextIndex = 1000
+
+function addBox(i: number) {
+  if (!renderer || !scrollBox) return
+
+  const box = new BoxRenderable(renderer, {
+    id: `box-${i + 1}`,
+    width: "auto",
+    padding: 1,
+    marginBottom: 1,
+    backgroundColor: i % 2 === 0 ? "#292e42" : "#2f3449",
+  })
+
+  const content = makeMultilineContent(i)
+  const text = new TextRenderable(renderer, {
+    content,
+  })
+
+  box.add(text)
+  scrollBox.add(box)
+}
+
+function addAsciiRenderable(i: number) {
+  if (!renderer || !scrollBox) return
+
+  const fonts = ["tiny", "block", "shade", "slick"] as const
+  const font = fonts[i % fonts.length]
+  const colors = [
+    [RGBA.fromInts(166, 227, 161, 255), RGBA.fromInts(122, 162, 247, 255)],
+    [RGBA.fromInts(247, 118, 142, 255), RGBA.fromInts(245, 194, 231, 255)],
+    [RGBA.fromInts(125, 196, 228, 255), RGBA.fromInts(199, 146, 234, 255)],
+    [RGBA.fromInts(244, 191, 117, 255), RGBA.fromInts(249, 226, 175, 255)],
+  ][i % 4]
+
+  const longText =
+    `ASCII FONT RENDERABLE #${i + 1} - ${font.toUpperCase()} STYLE - This is an extremely long piece of text that will definitely exceed the width of the scrollbox and trigger horizontal scrolling functionality. `.repeat(
+      15,
+    ) +
+    `Additional content includes: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. `.repeat(
+      12,
+    ) +
+    `The quick brown fox jumps over the lazy dog while the sly red panda silently observes from the treetops, contemplating the mysteries of the universe and wondering about the meaning of life. Meanwhile, technology continues to advance at an unprecedented rate, bringing both amazing opportunities and challenging ethical dilemmas to humanity's doorstep. From artificial intelligence to quantum computing, the future holds limitless possibilities that our ancestors could only dream of in their wildest imaginations.`.repeat(
+      8,
+    )
+
+  const asciiRenderable = new ASCIIFontRenderable(renderer, {
+    id: `ascii-${i + 1}`,
+    text: longText,
+    font: font,
+    color: colors,
+    backgroundColor: RGBA.fromInts(26, 27, 38, 255),
+    selectionBg: "#f7768e",
+    selectionFg: "#c0caf5",
+    zIndex: 10,
+  })
+
+  scrollBox.add(asciiRenderable)
+}
+
+function makeMultilineContent(i: number) {
+  const palette = [fg("#7aa2f7"), fg("#9ece6a"), fg("#f7768e"), fg("#7dcfff"), fg("#bb9af7"), fg("#e0af68")]
+  const colorize = palette[i % palette.length]
+  const id = (i + 1).toString().padStart(4, "0")
+  const tag = i % 3 === 0 ? underline("INFO") : i % 3 === 1 ? bold("WARN") : bold(fg("#f7768e")("ERROR"))
+
+  const barUnits = 10 + (i % 30)
+  const bar = "█".repeat(Math.floor(barUnits * 0.6)).padEnd(barUnits, "░")
+  const details = "data ".repeat((i % 4) + 2)
+
+  return t`${fg("#565f89")(`[${id}]`)} ${bold(colorize(`Box ${i + 1}`))} ${fg("#565f89")("|")} ${tag}
+${fg("#9aa5ce")("Multiline content with mixed styles for stress testing.")}
+${colorize("• Title:")} ${bold(italic(`Lorem ipsum ${i}`))}
+${fg("#9ece6a")("• Detail A:")} ${fg("#c0caf5")(details.trim())}
+${fg("#bb9af7")("• Detail B:")} ${fg("#a9b1d6")("The quick brown fox jumps over the lazy dog.")}
+${fg("#7dcfff")("• Progress:")} ${fg("#73daca")(bar)} ${fg("#565f89")(barUnits)}
+${fg("#565f89")("— end of box —")}`
+}
+
+export function run(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#1a1b26")
+
+  mainContainer = new BoxRenderable(renderer, {
+    id: "main-container",
+    flexGrow: 1,
+    maxHeight: "100%",
+    maxWidth: "100%",
+    flexDirection: "column",
+    backgroundColor: "#1a1b26",
+  })
+
+  scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "scroll-box",
+    rootOptions: {
+      backgroundColor: "#24283b",
+      border: true,
+    },
+    wrapperOptions: {
+      backgroundColor: "#1f2335",
+    },
+    viewportOptions: {
+      backgroundColor: "#1a1b26",
+    },
+    contentOptions: {
+      backgroundColor: "#16161e",
+    },
+    scrollbarOptions: {
+      //   showArrows: true,
+      trackOptions: {
+        foregroundColor: "#7aa2f7",
+        backgroundColor: "#414868",
+      },
+    },
+  })
+
+  instructionsBox = new BoxRenderable(renderer, {
+    id: "instructions",
+    width: "100%",
+    flexDirection: "column",
+    backgroundColor: "#2a2b3a",
+    paddingLeft: 1,
+    flexShrink: 0,
+  })
+
+  const instructionsText1 = new TextRenderable(renderer, {
+    content: t`${bold(fg("#7aa2f7")("Controls:"))} ${fg("#c0caf5")("↑/↓/PgUp/PgDn/Home/End")} ${fg("#565f89")("|")} ${bold(fg("#9ece6a")("A"))} ${fg("#c0caf5")("Toggle arrows")} ${fg("#565f89")("|")} ${bold(fg("#bb9af7")("Tab"))} ${fg("#c0caf5")("Focus scrollbox")} ${fg("#565f89")("|")} ${bold(fg("#f7768e")("N"))} ${fg("#c0caf5")("Add child")}`,
+  })
+
+  const instructionsText2 = new TextRenderable(renderer, {
+    content: t`${bold(fg("#7aa2f7")("Scrollbars:"))} ${bold(fg("#e0af68")("V"))} ${fg("#c0caf5")("Toggle vertical")} ${fg("#565f89")("|")} ${bold(fg("#f7768e")("H"))} ${fg("#c0caf5")("Toggle horizontal")}`,
+  })
+
+  instructionsBox.add(instructionsText1)
+  instructionsBox.add(instructionsText2)
+
+  mainContainer.add(scrollBox)
+  mainContainer.add(instructionsBox)
+
+  renderer.root.add(mainContainer)
+
+  scrollBox.focus()
+
+  // Generate 1000 boxes, each with multiline styled text
+  // Add an ASCII renderable at the top (index 0) for immediate visibility
+  addAsciiRenderable(0)
+
+  for (let index = 1; index < nextIndex; index++) {
+    if ((index + 1) % 100 === 0) {
+      addAsciiRenderable(index)
+    } else {
+      addBox(index)
+    }
+  }
+
+  rendererInstance.keyInput.on("keypress", (key) => {
+    if (key.name === "a" && scrollBox) {
+      const currentState = scrollBox.verticalScrollBar?.showArrows ?? false
+      scrollBox.verticalScrollBar!.showArrows = !currentState
+      scrollBox.horizontalScrollBar!.showArrows = !currentState
+      console.log(`Arrows ${!currentState ? "enabled" : "disabled"}`)
+    } else if (key.name === "v" && scrollBox) {
+      const currentState = scrollBox.verticalScrollBar.visible
+      scrollBox.verticalScrollBar.visible = !currentState
+      console.log(`Vertical scrollbar ${!currentState ? "shown" : "hidden"}`)
+    } else if (key.name === "h" && scrollBox) {
+      const currentState = scrollBox.horizontalScrollBar.visible
+      scrollBox.horizontalScrollBar.visible = !currentState
+      console.log(`Horizontal scrollbar ${!currentState ? "shown" : "hidden"}`)
+    } else if (key.name === "n" && scrollBox) {
+      addBox(nextIndex)
+      nextIndex++
+    }
+  })
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  if (mainContainer) {
+    rendererInstance.root.remove(mainContainer.id)
+    mainContainer.destroyRecursively()
+    mainContainer = null
+  }
+  scrollBox = null
+  instructionsBox = null
+  renderer = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

package/src/examples/scrollbox-mouse-test.ts

@@ -0,0 +1,112 @@
+#!/usr/bin/env bun
+import { BoxRenderable, type CliRenderer, createCliRenderer, TextRenderable, RGBA, 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 statusText: TextRenderable | null = null
+let hoveredItem: string | null = null
+
+export function run(renderer: CliRenderer): void {
+  renderer.setBackgroundColor("#1a1b26")
+
+  const mainContainer = new BoxRenderable(renderer, {
+    id: "main-container",
+    flexGrow: 1,
+    maxHeight: "100%",
+    maxWidth: "100%",
+    flexDirection: "column",
+    backgroundColor: "#1a1b26",
+  })
+
+  const header = new BoxRenderable(renderer, {
+    id: "header",
+    width: "100%",
+    height: 3,
+    backgroundColor: "#24283b",
+    paddingLeft: 1,
+    flexShrink: 0,
+  })
+
+  const title = new TextRenderable(renderer, {
+    content: t`${bold(fg("#7aa2f7")("ScrollBox Mouse Hit Test"))} - Scroll and hover items to test hit detection`,
+  })
+  header.add(title)
+
+  statusText = new TextRenderable(renderer, {
+    content: t`${fg("#565f89")("Hovered:")} ${fg("#c0caf5")("none")}`,
+  })
+  header.add(statusText)
+
+  scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "scroll-box",
+    rootOptions: {
+      backgroundColor: "#24283b",
+      border: true,
+    },
+    contentOptions: {
+      backgroundColor: "#16161e",
+    },
+  })
+
+  for (let i = 0; i < 50; i++) {
+    const item = new BoxRenderable(renderer, {
+      id: `item-${i}`,
+      width: "100%",
+      height: 2,
+      backgroundColor: i % 2 === 0 ? "#292e42" : "#2f3449",
+      paddingLeft: 1,
+      onMouseOver: () => {
+        hoveredItem = `item-${i}`
+        updateStatus()
+      },
+      onMouseOut: () => {
+        if (hoveredItem === `item-${i}`) {
+          hoveredItem = null
+          updateStatus()
+        }
+      },
+      onClick: () => {
+        console.log(`Clicked item-${i}`)
+      },
+    })
+
+    const text = new TextRenderable(renderer, {
+      content: t`${fg("#7aa2f7")(`[${i.toString().padStart(2, "0")}]`)} ${fg("#c0caf5")(`Item ${i} - Hover over me to test hit detection`)}`,
+    })
+    item.add(text)
+    scrollBox.add(item)
+  }
+
+  mainContainer.add(header)
+  mainContainer.add(scrollBox)
+  renderer.root.add(mainContainer)
+
+  scrollBox.focus()
+
+  function updateStatus() {
+    if (statusText) {
+      const hovered = hoveredItem || "none"
+      statusText.content = t`${fg("#565f89")("Hovered:")} ${fg("#9ece6a")(hovered)}`
+    }
+  }
+}
+
+export function destroy(renderer: CliRenderer): void {
+  renderer.root.getChildren().forEach((child) => {
+    renderer.root.remove(child.id)
+    child.destroyRecursively()
+  })
+  scrollBox = null
+  statusText = null
+  hoveredItem = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}