@fairyhunter13/opentui-core 0.1.91 → 0.1.94

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

@@ -1,206 +0,0 @@
-#!/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

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