@fairyhunter13/opentui-core 0.1.89 → 0.1.91

package/src/examples/input-select-layout-demo.ts

@@ -0,0 +1,425 @@
+import { CliRenderer, BoxRenderable, TextRenderable, createCliRenderer, type KeyEvent } from "../index.js"
+import { InputRenderable, InputRenderableEvents } from "../renderables/Input.js"
+import { SelectRenderable, SelectRenderableEvents, type SelectOption } from "../renderables/Select.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+
+let renderer: CliRenderer | null = null
+let header: TextRenderable | null = null
+let headerBox: BoxRenderable | null = null
+let selectContainer: BoxRenderable | null = null
+let selectContainerBox: BoxRenderable | null = null
+let leftSelect: SelectRenderable | null = null
+let leftSelectBox: BoxRenderable | null = null
+let rightSelect: SelectRenderable | null = null
+let rightSelectBox: BoxRenderable | null = null
+let inputContainer: BoxRenderable | null = null
+let inputContainerBox: BoxRenderable | null = null
+let inputLabel: TextRenderable | null = null
+let textInput: InputRenderable | null = null
+let textInputBox: BoxRenderable | null = null
+let footer: TextRenderable | null = null
+let footerBox: BoxRenderable | null = null
+let currentFocusIndex = 0
+
+const focusableElements: Array<InputRenderable | SelectRenderable> = []
+const focusableBoxes: Array<BoxRenderable | null> = []
+
+const colorOptions: SelectOption[] = [
+  { name: "Red", description: "A warm primary color", value: "#ff0000" },
+  { name: "Blue", description: "A cool primary color", value: "#0066ff" },
+  { name: "Green", description: "A natural color", value: "#00aa00" },
+  { name: "Purple", description: "A regal color", value: "#8a2be2" },
+  { name: "Orange", description: "A vibrant color", value: "#ff8c00" },
+  { name: "Teal", description: "A calming color", value: "#008080" },
+]
+
+const sizeOptions: SelectOption[] = [
+  { name: "Small", description: "Compact size (8px)", value: 8 },
+  { name: "Medium", description: "Standard size (12px)", value: 12 },
+  { name: "Large", description: "Big size (16px)", value: 16 },
+  { name: "Extra Large", description: "Huge size (20px)", value: 20 },
+]
+
+function createLayoutElements(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#001122")
+
+  headerBox = new BoxRenderable(renderer, {
+    id: "header-box",
+    zIndex: 0,
+    width: "auto",
+    height: 3,
+    backgroundColor: "#3b82f6",
+    borderStyle: "single",
+    borderColor: "#2563eb",
+    flexGrow: 0,
+    flexShrink: 0,
+    border: true,
+  })
+
+  header = new TextRenderable(renderer, {
+    id: "header",
+    content: "INPUT & SELECT LAYOUT DEMO",
+    fg: "#ffffff",
+    bg: "transparent",
+    zIndex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  headerBox.add(header)
+
+  selectContainerBox = new BoxRenderable(renderer, {
+    id: "select-container-box",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    flexGrow: 1,
+    flexShrink: 1,
+    minHeight: 10,
+    backgroundColor: "#1e293b",
+    borderStyle: "single",
+    borderColor: "#475569",
+    border: true,
+  })
+
+  selectContainer = new BoxRenderable(renderer, {
+    id: "select-container",
+    zIndex: 1,
+    width: "auto",
+    height: "auto",
+    flexDirection: "row",
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  selectContainerBox.add(selectContainer)
+
+  leftSelectBox = new BoxRenderable(renderer, {
+    id: "color-select-box",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    minHeight: 8,
+    borderStyle: "single",
+    borderColor: "#475569",
+    focusedBorderColor: "#3b82f6",
+    title: "Color Selection",
+    titleAlignment: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    backgroundColor: "transparent",
+    border: true,
+  })
+
+  leftSelect = new SelectRenderable(renderer, {
+    id: "color-select",
+    zIndex: 1,
+    width: "auto",
+    height: "auto",
+    minHeight: 6,
+    options: colorOptions,
+    backgroundColor: "#1e293b",
+    focusedBackgroundColor: "#2d3748",
+    textColor: "#e2e8f0",
+    focusedTextColor: "#f7fafc",
+    selectedBackgroundColor: "#3b82f6",
+    selectedTextColor: "#ffffff",
+    descriptionColor: "#94a3b8",
+    selectedDescriptionColor: "#cbd5e1",
+    showScrollIndicator: true,
+    wrapSelection: true,
+    showDescription: true,
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  leftSelectBox.add(leftSelect)
+
+  rightSelectBox = new BoxRenderable(renderer, {
+    id: "size-select-box",
+    zIndex: 0,
+    width: "auto",
+    height: "auto",
+    minHeight: 8,
+    borderStyle: "single",
+    borderColor: "#475569",
+    focusedBorderColor: "#059669",
+    title: "Size Selection",
+    titleAlignment: "center",
+    flexGrow: 1,
+    flexShrink: 1,
+    backgroundColor: "transparent",
+    border: true,
+  })
+
+  rightSelect = new SelectRenderable(renderer, {
+    id: "size-select",
+    zIndex: 1,
+    width: "auto",
+    height: "auto",
+    minHeight: 6,
+    options: sizeOptions,
+    backgroundColor: "#1e293b",
+    focusedBackgroundColor: "#2d3748",
+    textColor: "#e2e8f0",
+    focusedTextColor: "#f7fafc",
+    selectedBackgroundColor: "#059669",
+    selectedTextColor: "#ffffff",
+    descriptionColor: "#94a3b8",
+    selectedDescriptionColor: "#cbd5e1",
+    showScrollIndicator: true,
+    wrapSelection: true,
+    showDescription: true,
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  rightSelectBox.add(rightSelect)
+
+  inputContainerBox = new BoxRenderable(renderer, {
+    id: "input-container-box",
+    zIndex: 0,
+    width: "auto",
+    height: 7,
+    flexGrow: 0,
+    flexShrink: 0,
+    backgroundColor: "#0f172a",
+    borderStyle: "single",
+    borderColor: "#334155",
+    border: true,
+  })
+
+  inputContainer = new BoxRenderable(renderer, {
+    id: "input-container",
+    zIndex: 1,
+    width: "auto",
+    height: "auto",
+    flexDirection: "column",
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  inputContainerBox.add(inputContainer)
+
+  inputLabel = new TextRenderable(renderer, {
+    id: "input-label",
+    content: "Enter your text:",
+    fg: "#f1f5f9",
+    bg: "#0f172a",
+    zIndex: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+  })
+
+  textInputBox = new BoxRenderable(renderer, {
+    id: "text-input-box",
+    zIndex: 0,
+    width: "auto",
+    height: 3,
+    borderStyle: "single",
+    borderColor: "#475569",
+    focusedBorderColor: "#eab308",
+    flexGrow: 0,
+    flexShrink: 0,
+    marginTop: 1,
+    backgroundColor: "transparent",
+    border: true,
+  })
+
+  textInput = new InputRenderable(renderer, {
+    id: "text-input",
+    zIndex: 1,
+    width: "auto",
+    height: 1,
+    placeholder: "Type something here...",
+    backgroundColor: "#1e293b",
+    focusedBackgroundColor: "#334155",
+    textColor: "#f1f5f9",
+    focusedTextColor: "#ffffff",
+    placeholderColor: "#64748b",
+    cursorColor: "#f1f5f9",
+    maxLength: 100,
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  textInputBox.add(textInput)
+
+  footerBox = new BoxRenderable(renderer, {
+    id: "footer-box",
+    zIndex: 0,
+    width: "auto",
+    height: 3,
+    backgroundColor: "#1e40af",
+    borderStyle: "single",
+    borderColor: "#1d4ed8",
+    flexGrow: 0,
+    flexShrink: 0,
+    border: true,
+  })
+
+  footer = new TextRenderable(renderer, {
+    id: "footer",
+    content: "TAB: focus next | SHIFT+TAB: focus prev | ARROWS/JK: navigate | ESC: quit",
+    fg: "#dbeafe",
+    bg: "transparent",
+    zIndex: 1,
+    flexGrow: 1,
+    flexShrink: 1,
+  })
+
+  footerBox.add(footer)
+
+  selectContainer.add(leftSelectBox)
+  selectContainer.add(rightSelectBox)
+  inputContainer.add(inputLabel)
+  inputContainer.add(textInputBox)
+
+  renderer.root.add(headerBox)
+  renderer.root.add(selectContainerBox)
+  renderer.root.add(inputContainerBox)
+  renderer.root.add(footerBox)
+
+  focusableElements.push(leftSelect, rightSelect, textInput)
+  focusableBoxes.push(leftSelectBox, rightSelectBox, textInputBox)
+  setupEventHandlers()
+  updateFocus()
+
+  renderer.on("resize", handleResize)
+}
+
+function setupEventHandlers(): void {
+  if (!leftSelect || !rightSelect || !textInput) return
+
+  leftSelect.on(SelectRenderableEvents.SELECTION_CHANGED, (index: number, option: SelectOption) => {
+    updateDisplay()
+  })
+
+  leftSelect.on(SelectRenderableEvents.ITEM_SELECTED, (index: number, option: SelectOption) => {
+    updateDisplay()
+  })
+
+  rightSelect.on(SelectRenderableEvents.SELECTION_CHANGED, (index: number, option: SelectOption) => {
+    updateDisplay()
+  })
+
+  rightSelect.on(SelectRenderableEvents.ITEM_SELECTED, (index: number, option: SelectOption) => {
+    updateDisplay()
+  })
+
+  textInput.on(InputRenderableEvents.INPUT, (value: string) => {
+    updateDisplay()
+  })
+
+  textInput.on(InputRenderableEvents.CHANGE, (value: string) => {
+    updateDisplay()
+  })
+}
+
+function updateDisplay(): void {
+  if (!leftSelect || !rightSelect || !textInput || !inputLabel) return
+
+  const selectedColor = leftSelect.getSelectedOption()
+  const selectedSize = rightSelect.getSelectedOption()
+  const inputValue = textInput.value
+
+  let displayText = "Enter your text:"
+  if (inputValue) {
+    displayText += ` "${inputValue}"`
+  }
+  if (selectedColor) {
+    displayText += ` in ${selectedColor.name}`
+  }
+  if (selectedSize) {
+    displayText += ` (${selectedSize.name})`
+  }
+
+  inputLabel.content = displayText
+}
+
+function handleResize(width: number, height: number): void {
+  // Root layout is automatically resized by the renderer
+}
+
+function updateFocus(): void {
+  focusableElements.forEach((element) => element.blur())
+  focusableBoxes.forEach((box) => {
+    if (box) box.blur()
+  })
+
+  if (focusableElements[currentFocusIndex]) {
+    focusableElements[currentFocusIndex].focus()
+  }
+  if (focusableBoxes[currentFocusIndex]) {
+    focusableBoxes[currentFocusIndex]!.focus()
+  }
+}
+
+function handleKeyPress(key: KeyEvent): void {
+  if (key.name === "tab") {
+    if (key.shift) {
+      currentFocusIndex = (currentFocusIndex - 1 + focusableElements.length) % focusableElements.length
+    } else {
+      currentFocusIndex = (currentFocusIndex + 1) % focusableElements.length
+    }
+    updateFocus()
+    return
+  }
+}
+
+export function run(rendererInstance: CliRenderer): void {
+  createLayoutElements(rendererInstance)
+  rendererInstance.keyInput.on("keypress", handleKeyPress)
+  updateDisplay()
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  rendererInstance.keyInput.off("keypress", handleKeyPress)
+
+  if (renderer) {
+    renderer.off("resize", handleResize)
+  }
+
+  // Properly destroy all elements that need cleanup
+  if (leftSelect) leftSelect.destroy()
+  if (rightSelect) rightSelect.destroy()
+  if (textInput) textInput.destroy()
+
+  // Clean up elements directly from root
+  if (headerBox) rendererInstance.root.remove(headerBox.id)
+  if (selectContainerBox) rendererInstance.root.remove(selectContainerBox.id)
+  if (inputContainerBox) rendererInstance.root.remove(inputContainerBox.id)
+  if (footerBox) rendererInstance.root.remove(footerBox.id)
+
+  // Clean up all elements
+  header = null
+  headerBox = null
+  selectContainer = null
+  selectContainerBox = null
+  leftSelect = null
+  leftSelectBox = null
+  rightSelect = null
+  rightSelectBox = null
+  inputContainer = null
+  inputContainerBox = null
+  inputLabel = null
+  textInput = null
+  textInputBox = null
+  footer = null
+  footerBox = null
+  renderer = null
+  currentFocusIndex = 0
+  focusableElements.length = 0
+  focusableBoxes.length = 0
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    targetFps: 30,
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+  renderer.start()
+}

package/src/examples/install.sh

@@ -0,0 +1,143 @@
+#!/bin/sh
+set -e
+
+# OpenTUI Examples Installation Script
+# Downloads and runs the latest opentui-examples binary
+
+REPO="anomalyco/opentui"
+GITHUB_API="https://api.github.com/repos/$REPO"
+
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Default to stable releases
+USE_PRERELEASE=false
+
+# Parse arguments
+while [ $# -gt 0 ]; do
+  case $1 in
+    --pre|--prerelease)
+      USE_PRERELEASE=true
+      shift
+      ;;
+    -h|--help)
+      echo "Usage: $0 [OPTIONS]"
+      echo ""
+      echo "Options:"
+      echo "  --pre, --prerelease    Download the latest pre-release version"
+      echo "  -h, --help            Show this help message"
+      exit 0
+      ;;
+    *)
+      printf "${RED}Error: Unknown option: $1${NC}\n"
+      echo "Use --help for usage information"
+      exit 1
+      ;;
+  esac
+done
+
+printf "${GREEN}OpenTUI Examples Installer${NC}\n"
+echo "Installing opentui-examples binary..."
+echo ""
+
+# Detect platform
+OS=$(uname -s | tr '[:upper:]' '[:lower:]')
+ARCH=$(uname -m)
+
+case "$ARCH" in
+    x86_64|amd64) ARCH="x64" ;;
+    arm64|aarch64) ARCH="arm64" ;;
+    *) printf "${RED}Error: Unsupported architecture: $ARCH${NC}\n"; exit 1 ;;
+esac
+
+case "$OS" in
+    darwin) OS="darwin" ;;
+    linux) OS="linux" ;;
+    mingw*|cygwin*|msys*) OS="windows" ;;
+    *) printf "${RED}Error: Unsupported OS: $OS${NC}\n"; exit 1 ;;
+esac
+
+PLATFORM="${OS}-${ARCH}"
+echo "Detected platform: $PLATFORM"
+
+# Find the latest release
+echo "Fetching latest release information..."
+
+if [ "$USE_PRERELEASE" = "true" ]; then
+  printf "${YELLOW}Looking for latest pre-release...${NC}\n"
+  # Get all releases and find the first one (which could be a pre-release)
+  RELEASE_DATA=$(curl -s "$GITHUB_API/releases" | grep -m 1 '"tag_name"' | cut -d '"' -f 4)
+  if [ -z "$RELEASE_DATA" ]; then
+    printf "${RED}Error: Failed to fetch release information${NC}\n"
+    exit 1
+  fi
+  VERSION="$RELEASE_DATA"
+else
+  # Get the latest stable release
+  RELEASE_DATA=$(curl -s "$GITHUB_API/releases/latest")
+  VERSION=$(echo "$RELEASE_DATA" | grep '"tag_name"' | cut -d '"' -f 4)
+  if [ -z "$VERSION" ]; then
+    printf "${RED}Error: Failed to fetch latest release information${NC}\n"
+    exit 1
+  fi
+fi
+
+# Remove 'v' prefix if present
+VERSION_NO_V="${VERSION#v}"
+
+printf "${BLUE}Version: $VERSION${NC}\n"
+
+# Construct download URL
+ASSET_NAME="opentui-examples-v${VERSION_NO_V}-${PLATFORM}.zip"
+DOWNLOAD_URL="https://github.com/$REPO/releases/download/${VERSION}/${ASSET_NAME}"
+
+echo "Download URL: $DOWNLOAD_URL"
+echo ""
+
+# Create temporary directory
+TEMP_DIR=$(mktemp -d)
+trap "rm -rf $TEMP_DIR" EXIT
+
+# Download the zip file
+echo "Downloading $ASSET_NAME..."
+if ! curl -L -f -o "$TEMP_DIR/examples.zip" "$DOWNLOAD_URL"; then
+  printf "${RED}Error: Failed to download examples binary${NC}\n"
+  echo "URL attempted: $DOWNLOAD_URL"
+  exit 1
+fi
+
+# Unzip to current directory
+echo "Extracting to current directory..."
+if ! unzip -q -o "$TEMP_DIR/examples.zip" -d .; then
+  printf "${RED}Error: Failed to extract archive${NC}\n"
+  exit 1
+fi
+
+# Make executable (if not on Windows)
+if [ "$OS" != "windows" ]; then
+  if [ -f "./opentui-examples" ]; then
+    chmod +x ./opentui-examples
+    EXEC_NAME="./opentui-examples"
+  elif [ -f "./opentui-examples.exe" ]; then
+    EXEC_NAME="./opentui-examples.exe"
+  else
+    printf "${RED}Error: Executable not found after extraction${NC}\n"
+    ls -la
+    exit 1
+  fi
+else
+  EXEC_NAME="./opentui-examples.exe"
+fi
+
+printf "${GREEN}✓ OpenTUI Examples installed successfully!${NC}\n"
+echo ""
+printf "${BLUE}To run the examples, execute:${NC}\n"
+if [ "$OS" = "windows" ]; then
+  printf "  ${GREEN}.\\\\opentui-examples.exe${NC}\n"
+else
+  printf "  ${GREEN}./opentui-examples${NC}\n"
+fi
+echo ""