@fairyhunter13/opentui-core 0.1.89 → 0.1.90

package/src/examples/scrollbox-overlay-hit-test.ts

@@ -0,0 +1,206 @@
+#!/usr/bin/env bun
+import {
+  BoxRenderable,
+  type CliRenderer,
+  createCliRenderer,
+  TextRenderable,
+  t,
+  fg,
+  bold,
+  type KeyEvent,
+} from "../index.js"
+import { ScrollBoxRenderable } from "../renderables/ScrollBox.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+
+let overlay: BoxRenderable | null = null
+let dialog: BoxRenderable | null = null
+let scrollBox: ScrollBoxRenderable | null = null
+let baseStatusText: TextRenderable | null = null
+let dialogStatusText: TextRenderable | null = null
+let keyHandler: ((key: KeyEvent) => void) | null = null
+let dialogOpen = false
+let lastClick = "none"
+
+const updateStatus = () => {
+  const content = t`${fg("#9aa5ce")("Last click:")} ${fg("#9ece6a")(lastClick)}`
+  if (baseStatusText) {
+    baseStatusText.content = content
+  }
+  if (dialogStatusText) {
+    dialogStatusText.content = content
+  }
+}
+
+const setDialogVisible = (visible: boolean) => {
+  dialogOpen = visible
+  if (overlay) {
+    overlay.visible = visible
+  }
+}
+
+const setLastClick = (value: string) => {
+  lastClick = value
+  updateStatus()
+}
+
+export function run(renderer: CliRenderer): void {
+  renderer.setBackgroundColor("#1a1b26")
+
+  const app = new BoxRenderable(renderer, {
+    id: "app",
+    flexDirection: "column",
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#1a1b26",
+    paddingLeft: 1,
+    paddingTop: 1,
+    gap: 1,
+  })
+  renderer.root.add(app)
+
+  const title = new TextRenderable(renderer, {
+    content: t`${bold(fg("#7aa2f7")("Scrollbox Overlay Hit Test"))}`,
+  })
+  app.add(title)
+
+  const instructions = new TextRenderable(renderer, {
+    content: t`${fg("#c0caf5")("Press 'd' to toggle dialog, 'esc' to close, 'q' to quit")}`,
+  })
+  app.add(instructions)
+
+  baseStatusText = new TextRenderable(renderer, {
+    content: t`${fg("#9aa5ce")("Last click:")} ${fg("#9ece6a")(lastClick)}`,
+  })
+  app.add(baseStatusText)
+
+  overlay = new BoxRenderable(renderer, {
+    id: "overlay",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    backgroundColor: "#ff000033",
+    zIndex: 100,
+    visible: false,
+    onMouseDown: () => {
+      setLastClick("overlay (red)")
+      setDialogVisible(false)
+    },
+  })
+  renderer.root.add(overlay)
+
+  dialog = new BoxRenderable(renderer, {
+    id: "dialog",
+    position: "absolute",
+    top: "25%",
+    left: "25%",
+    width: "50%",
+    height: "50%",
+    flexDirection: "column",
+    gap: 1,
+    padding: 1,
+    backgroundColor: "#0f172a",
+    border: true,
+    borderColor: "#7aa2f7",
+    onMouseDown: (event) => {
+      setLastClick("dialog (blue)")
+      event.stopPropagation()
+    },
+  })
+  overlay.add(dialog)
+
+  const dialogTitle = new TextRenderable(renderer, {
+    content: t`${bold(fg("#7aa2f7")("Dialog"))} ${fg("#565f89")("- scroll, then click outside the list")}`,
+  })
+  dialog.add(dialogTitle)
+
+  const dialogHint = new TextRenderable(renderer, {
+    content: t`${fg("#c0caf5")("Click the red overlay above/below the dialog to close it")}`,
+  })
+  dialog.add(dialogHint)
+
+  dialogStatusText = new TextRenderable(renderer, {
+    content: t`${fg("#9aa5ce")("Last click:")} ${fg("#9ece6a")(lastClick)}`,
+  })
+  dialog.add(dialogStatusText)
+
+  scrollBox = new ScrollBoxRenderable(renderer, {
+    id: "scrollbox",
+    flexGrow: 1,
+    scrollY: true,
+    onMouseDown: (event) => {
+      setLastClick("scrollbox (yellow)")
+      event.stopPropagation()
+    },
+    rootOptions: {
+      backgroundColor: "#eab308",
+      border: true,
+      borderColor: "#0f172a",
+    },
+    contentOptions: {
+      backgroundColor: "#111827",
+    },
+  })
+  dialog.add(scrollBox)
+
+  for (let i = 0; i < 50; i++) {
+    const item = new BoxRenderable(renderer, {
+      id: `line-${i}`,
+      width: "100%",
+      height: 1,
+      paddingLeft: 1,
+      backgroundColor: i % 2 === 0 ? "#1f2937" : "#111827",
+    })
+    const text = new TextRenderable(renderer, {
+      content: t`${fg("#cbd5f5")(`Line ${i + 1}: This is some content`)}`,
+    })
+    item.add(text)
+    scrollBox.add(item)
+  }
+
+  keyHandler = (key: KeyEvent) => {
+    if (key.name === "q") {
+      renderer.destroy()
+      process.exit(0)
+    }
+    if (key.name === "d") {
+      setDialogVisible(!dialogOpen)
+    }
+    if (key.name === "escape") {
+      setDialogVisible(false)
+    }
+  }
+  renderer.keyInput.on("keypress", keyHandler)
+
+  updateStatus()
+}
+
+export function destroy(renderer: CliRenderer): void {
+  if (keyHandler) {
+    renderer.keyInput.off("keypress", keyHandler)
+  }
+
+  renderer.root.getChildren().forEach((child) => {
+    renderer.root.remove(child.id)
+    child.destroyRecursively()
+  })
+
+  overlay = null
+  dialog = null
+  scrollBox = null
+  baseStatusText = null
+  dialogStatusText = null
+  keyHandler = null
+  dialogOpen = false
+  lastClick = "none"
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

package/src/examples/select-demo.ts

@@ -0,0 +1,237 @@
+import {
+  createCliRenderer,
+  SelectRenderable,
+  SelectRenderableEvents,
+  RenderableEvents,
+  type SelectOption,
+  type CliRenderer,
+  t,
+  bold,
+  fg,
+  BoxRenderable,
+} from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { TextRenderable } from "../renderables/Text.js"
+
+let selectElement: SelectRenderable | null = null
+let renderer: CliRenderer | null = null
+let keyboardHandler: ((key: any) => void) | null = null
+let keyLegendDisplay: TextRenderable | null = null
+let statusDisplay: TextRenderable | null = null
+let lastActionText: string = "Welcome to SelectRenderable demo! Use the controls to test features."
+let lastActionColor: string = "#FFCC00"
+
+const selectOptions: SelectOption[] = [
+  { name: "Home", description: "Navigate to the home page", value: "home" },
+  { name: "Profile", description: "View and edit your user profile", value: "profile" },
+  { name: "Settings", description: "Configure application preferences", value: "settings" },
+  { name: "Dashboard", description: "View analytics and key metrics", value: "dashboard" },
+  { name: "Projects", description: "Manage your active projects", value: "projects" },
+  { name: "Reports", description: "Generate and view detailed reports", value: "reports" },
+  { name: "Users", description: "Manage user accounts and permissions", value: "users" },
+  { name: "Analytics", description: "Deep dive into usage analytics", value: "analytics" },
+  { name: "Tools", description: "Access various utility tools", value: "tools" },
+  { name: "API Documentation", description: "Browse API endpoints and examples", value: "api" },
+  { name: "Help Center", description: "Find answers to common questions", value: "help" },
+  { name: "Support", description: "Contact our support team", value: "support" },
+  { name: "Billing", description: "Manage your subscription and billing", value: "billing" },
+  { name: "Integrations", description: "Connect with third-party services", value: "integrations" },
+  { name: "Security", description: "Configure security settings", value: "security" },
+  { name: "Notifications", description: "Manage your notification preferences", value: "notifications" },
+  { name: "Backup", description: "Backup and restore your data", value: "backup" },
+  { name: "Import/Export", description: "Import or export your data", value: "import-export" },
+  { name: "Advanced Settings", description: "Configure advanced options", value: "advanced" },
+  { name: "About", description: "Learn more about this application", value: "about" },
+]
+
+function updateDisplays() {
+  if (!selectElement) return
+
+  const scrollIndicator = selectElement.showScrollIndicator ? "on" : "off"
+  const description = selectElement.showDescription ? "on" : "off"
+  const wrap = selectElement.wrapSelection ? "on" : "off"
+
+  const keyLegendText = t`${bold(fg("#FFFFFF")("Key Controls:"))}
+↑/↓ or j/k: Navigate items
+Shift+↑/↓ or Shift+j/k: Fast scroll
+Enter: Select item
+F: Toggle focus
+D: Toggle descriptions
+S: Toggle scroll indicator
+W: Toggle wrap selection`
+
+  if (keyLegendDisplay) {
+    keyLegendDisplay.content = keyLegendText
+  }
+
+  const currentSelection = selectElement.getSelectedOption()
+  const selectionText = currentSelection
+    ? `Selection: ${currentSelection.name} (${currentSelection.value}) - Index: ${selectElement.getSelectedIndex()}`
+    : "No selection"
+
+  const focusText = selectElement.focused ? "Select element is FOCUSED" : "Select element is BLURRED"
+  const focusColor = selectElement.focused ? "#00FF00" : "#FF0000"
+
+  const statusText = t`${fg("#00FF00")(selectionText)}
+
+${fg(focusColor)(focusText)}
+
+${fg("#CCCCCC")(`Scroll indicator: ${scrollIndicator} | Description: ${description} | Wrap: ${wrap}`)}
+
+${fg(lastActionColor)(lastActionText)}`
+
+  if (statusDisplay) {
+    statusDisplay.content = statusText
+  }
+}
+
+export function run(rendererInstance: CliRenderer): void {
+  renderer = rendererInstance
+  renderer.setBackgroundColor("#001122")
+
+  const parentContainer = new BoxRenderable(renderer, {
+    id: "parent-container",
+    zIndex: 10,
+  })
+  renderer.root.add(parentContainer)
+
+  selectElement = new SelectRenderable(renderer, {
+    id: "demo-select",
+    position: "absolute",
+    left: 5,
+    top: 2,
+    width: 50,
+    height: 20,
+    options: selectOptions,
+    zIndex: 100,
+    backgroundColor: "#1e293b",
+    focusedBackgroundColor: "#2d3748",
+    textColor: "#e2e8f0",
+    focusedTextColor: "#f7fafc",
+    selectedBackgroundColor: "#3b82f6",
+    selectedTextColor: "#ffffff",
+    descriptionColor: "#94a3b8",
+    selectedDescriptionColor: "#cbd5e1",
+    showDescription: true,
+    showScrollIndicator: true,
+    wrapSelection: false,
+    fastScrollStep: 5,
+  })
+
+  renderer.root.add(selectElement)
+
+  keyLegendDisplay = new TextRenderable(renderer, {
+    id: "key-legend",
+    content: t``,
+    width: 40,
+    height: 9,
+    position: "absolute",
+    left: 60,
+    top: 3,
+    zIndex: 50,
+    fg: "#AAAAAA",
+  })
+  parentContainer.add(keyLegendDisplay)
+
+  statusDisplay = new TextRenderable(renderer, {
+    id: "status-display",
+    content: t``,
+    width: 80,
+    height: 8,
+    position: "absolute",
+    left: 5,
+    top: 24,
+    zIndex: 50,
+  })
+  parentContainer.add(statusDisplay)
+
+  selectElement.on(SelectRenderableEvents.SELECTION_CHANGED, (index: number, option: SelectOption) => {
+    lastActionText = `Navigation: Moved to "${option.name}"`
+    lastActionColor = "#FFCC00"
+    updateDisplays()
+  })
+
+  selectElement.on(SelectRenderableEvents.ITEM_SELECTED, (index: number, option: SelectOption) => {
+    lastActionText = `*** ACTIVATED: ${option.name} (${option.value}) ***`
+    lastActionColor = "#FF00FF"
+    updateDisplays()
+    setTimeout(() => {
+      lastActionColor = "#FFCC00"
+      updateDisplays()
+    }, 1000)
+  })
+
+  selectElement.on(RenderableEvents.FOCUSED, () => {
+    updateDisplays()
+  })
+
+  selectElement.on(RenderableEvents.BLURRED, () => {
+    updateDisplays()
+  })
+
+  updateDisplays()
+
+  keyboardHandler = (key) => {
+    if (key.name === "f") {
+      if (selectElement?.focused) {
+        selectElement.blur()
+        lastActionText = "Focus removed from select element"
+      } else {
+        selectElement?.focus()
+        lastActionText = "Select element focused"
+      }
+      lastActionColor = "#FFCC00"
+      updateDisplays()
+    } else if (key.name === "d") {
+      const newState = !selectElement?.showDescription
+      selectElement!.showDescription = newState
+      lastActionText = `Descriptions ${newState ? "enabled" : "disabled"}`
+      lastActionColor = "#FFCC00"
+      updateDisplays()
+    } else if (key.name === "s") {
+      const newState = !selectElement?.showScrollIndicator
+      selectElement!.showScrollIndicator = newState
+      lastActionText = `Scroll indicator ${newState ? "enabled" : "disabled"}`
+      lastActionColor = "#FFCC00"
+      updateDisplays()
+    } else if (key.name === "w") {
+      const newState = !selectElement?.wrapSelection
+      selectElement!.wrapSelection = newState
+      lastActionText = `Wrap selection ${newState ? "enabled" : "disabled"}`
+      lastActionColor = "#FFCC00"
+      updateDisplays()
+    }
+  }
+
+  rendererInstance.keyInput.on("keypress", keyboardHandler)
+  selectElement.focus()
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  if (keyboardHandler) {
+    rendererInstance.keyInput.off("keypress", keyboardHandler)
+    keyboardHandler = null
+  }
+
+  if (selectElement) {
+    rendererInstance.root.remove(selectElement.id)
+    selectElement.destroy()
+    selectElement = null
+  }
+
+  rendererInstance.root.remove("parent-container")
+
+  keyLegendDisplay = null
+  statusDisplay = null
+  renderer = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+  renderer.start()
+}