@fairyhunter13/opentui-core 0.1.91 → 0.1.92

package/src/examples/link-demo.ts

@@ -1,220 +0,0 @@
-import {
-  CliRenderer,
-  createCliRenderer,
-  t,
-  fg,
-  underline,
-  link,
-  bold,
-  italic,
-  BoxRenderable,
-  RGBA,
-  TextRenderable,
-  type MouseEvent,
-  type RenderContext,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let nextZIndex = 100
-let draggableBoxes: DraggableBox[] = []
-let dragModeEnabled = false
-
-class DraggableBox extends BoxRenderable {
-  private isDragging = false
-  private dragOffsetX = 0
-  private dragOffsetY = 0
-
-  constructor(
-    ctx: RenderContext,
-    id: string,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    backgroundColor: RGBA,
-  ) {
-    super(ctx, {
-      id,
-      width,
-      height,
-      zIndex: nextZIndex++,
-      backgroundColor,
-      position: "absolute",
-      left: x,
-      top: y,
-      borderStyle: "rounded",
-      borderColor: RGBA.fromHex("#ffffff"),
-      padding: 1,
-      flexDirection: "column",
-    })
-  }
-
-  protected override onMouseEvent(event: MouseEvent): void {
-    if (!dragModeEnabled) return
-
-    switch (event.type) {
-      case "down":
-        this.isDragging = true
-        this.dragOffsetX = event.x - this.x
-        this.dragOffsetY = event.y - this.y
-        this.zIndex = nextZIndex++
-        event.stopPropagation()
-        break
-
-      case "drag-end":
-        if (this.isDragging) {
-          this.isDragging = false
-          event.stopPropagation()
-        }
-        break
-
-      case "drag":
-        if (this.isDragging) {
-          const newX = event.x - this.dragOffsetX
-          const newY = event.y - this.dragOffsetY
-
-          this.x = Math.max(0, Math.min(newX, this._ctx.width - this.width))
-          this.y = Math.max(0, Math.min(newY, this._ctx.height - this.height))
-
-          event.stopPropagation()
-        }
-        break
-    }
-  }
-}
-
-function getHeaderContent(): ReturnType<typeof t> {
-  const dragStatus = dragModeEnabled ? fg("#34d399")("ON") : fg("#f87171")("OFF")
-  return t`${bold(fg("#38bdf8")("OpenTUI Interactive Link Demo"))}
-${fg("#94a3b8")("Click the links to open them.")} ${fg("#64748b")("Press")} ${bold(fg("#fbbf24")("d"))} ${fg("#64748b")("to toggle drag mode:")} ${dragStatus}
-${italic(fg("#64748b")("(Terminal must support OSC 8 hyperlinks)"))}`
-}
-
-export function run(renderer: CliRenderer): void {
-  renderer.start()
-  renderer.setBackgroundColor("#0f172a") // Deep slate blue background
-
-  const container = new BoxRenderable(renderer, {
-    id: "main-container",
-    width: "100%",
-    height: "100%",
-  })
-  renderer.root.add(container)
-
-  // Header
-  const header = new TextRenderable(renderer, {
-    id: "header",
-    content: getHeaderContent(),
-    position: "absolute",
-    left: 2,
-    top: 1,
-    zIndex: 10,
-    width: 80,
-    height: 4,
-  })
-  container.add(header)
-
-  // Toggle drag mode with 'd' key
-  renderer.keyInput.on("keypress", (event) => {
-    if (event.name === "d") {
-      dragModeEnabled = !dragModeEnabled
-      header.content = getHeaderContent()
-    }
-  })
-
-  // Card 1: Project Info
-  createCard(
-    renderer,
-    container,
-    "project-card",
-    5,
-    6,
-    40,
-    8,
-    RGBA.fromHex("#1e293be6"), // Dark slate
-    t`${bold(fg("#f472b6")("♥ Project Info"))}
-
-${fg("#e2e8f0")("Source:")} ${link("https://github.com/anomalyco/opentui")(underline(fg("#38bdf8")("GitHub Repository")))}
-${fg("#e2e8f0")("Web:")}    ${link("https://opentui.com")(underline(fg("#34d399")("Official Website")))}
-${fg("#e2e8f0")("License:")} ${link("https://github.com/anomalyco/opentui/blob/main/LICENSE")(underline(fg("#fbbf24")("MIT")))}`,
-  )
-
-  // Card 2: Documentation
-  createCard(
-    renderer,
-    container,
-    "docs-card",
-    50,
-    8,
-    35,
-    9,
-    RGBA.fromHex("#334155e6"),
-    t`${bold(fg("#a78bfa")("📚 Documentation"))}
-
-${fg("#cbd5e1")("Get started with:")}
-• ${link("https://github.com/anomalyco/opentui#readme")(bold(fg("#fff")("Quick Start")))}
-• ${link("https://github.com/anomalyco/opentui/tree/main/packages/core/src/examples")(fg("#fff")("Examples"))}
-• ${link("https://github.com/anomalyco/opentui/issues")(fg("#fff")("Known Issues"))}`,
-  )
-
-  // Card 3: Socials
-  createCard(
-    renderer,
-    container,
-    "social-card",
-    20,
-    16,
-    30,
-    7,
-    RGBA.fromHex("#0f766ecc"), // Teal
-    t`${bold(fg("#2dd4bf")("👋 Connect"))}
-
-${link("https://x.com/anomalyco")(fg("#60a5fa")("Twitter / X"))}
-${link("https://discord.gg/Fc8UPAeV")(fg("#818cf8")("Discord Community"))}`,
-  )
-}
-
-function createCard(
-  renderer: CliRenderer,
-  container: BoxRenderable,
-  id: string,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  bg: RGBA,
-  content: any,
-) {
-  const card = new DraggableBox(renderer, id, x, y, width, height, bg)
-
-  const text = new TextRenderable(renderer, {
-    id: `${id}-text`,
-    content: content,
-    width: width - 2, // Account for padding
-    height: height - 2,
-  })
-
-  card.add(text)
-  container.add(card)
-  draggableBoxes.push(card)
-}
-
-export function destroy(renderer: CliRenderer): void {
-  for (const box of draggableBoxes) {
-    renderer.root.remove(box.id)
-  }
-  draggableBoxes = []
-  dragModeEnabled = false
-  renderer.root.remove("main-container")
-  renderer.setCursorPosition(0, 0, false)
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 60,
-  })
-
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}

package/src/examples/live-state-demo.ts

@@ -1,480 +0,0 @@
-#!/usr/bin/env bun
-
-import {
-  CliRenderer,
-  createCliRenderer,
-  RGBA,
-  TextAttributes,
-  TextRenderable,
-  BoxRenderable,
-  type MouseEvent,
-  t,
-  bold,
-  red,
-  green,
-  blue,
-  fg,
-  parseColor,
-  Box,
-} from "../index.js"
-import type { BoxOptions } from "../renderables/Box.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-let mainGroup: BoxRenderable | null = null
-let titleText: TextRenderable | null = null
-let instructionsText: TextRenderable | null = null
-let statusText: TextRenderable | null = null
-let rendererStateText: TextRenderable | null = null
-let renderableStateText: TextRenderable | null = null
-let liveButtons: ReturnType<typeof LiveButton>[] = []
-let demoRenderable: BoxRenderable | null = null
-let currentRenderer: CliRenderer | null = null
-let frameCounter = 0
-let animationCounter = 0
-let frameCallback: ((deltaTime: number) => Promise<void>) | null = null
-
-function LiveButton(options: BoxOptions & { label: string }) {
-  const base = parseColor(options.backgroundColor ?? "transparent")
-  const hoverBg = RGBA.fromValues(
-    Math.min(1.0, base.r * 1.4),
-    Math.min(1.0, base.g * 1.4),
-    Math.min(1.0, base.b * 1.4),
-    base.a,
-  )
-  const pressBg = RGBA.fromValues(base.r * 0.6, base.g * 0.6, base.b * 0.6, base.a)
-
-  return Box({
-    ...options,
-    renderAfter(buffer, deltaTime) {
-      const textColor = RGBA.fromValues(1, 1, 1, 1)
-      const centerY = this.y + Math.floor(this.height / 2)
-      const startX = this.x + Math.floor((this.width - options.label.length) / 2)
-
-      buffer.drawText(options.label, startX, centerY, textColor)
-    },
-    onMouse(event: MouseEvent) {
-      switch (event.type) {
-        case "down":
-          this.backgroundColor = pressBg
-          event.stopPropagation()
-          break
-
-        case "up":
-          this.backgroundColor = base
-          event.stopPropagation()
-          break
-
-        case "over":
-          this.backgroundColor = hoverBg
-          break
-
-        case "out":
-          this.backgroundColor = base
-          break
-      }
-    },
-  })
-}
-
-function updateStatusText(message: string): void {
-  if (statusText) {
-    const timestamp = new Date().toLocaleTimeString()
-    statusText.content = `[${timestamp}] ${message}`
-  }
-}
-
-function updateRendererState(renderer: CliRenderer): void {
-  if (rendererStateText) {
-    const running = renderer.isRunning
-    const liveCount = renderer.liveRequestCount
-    const controlState = renderer.currentControlState
-
-    const liveIndicators = ["▘", "▝", "▗", "▖"]
-    const liveIndicator = liveCount > 0 ? liveIndicators[animationCounter % liveIndicators.length] : " "
-    const styledContent = t`${bold("Renderer State:")} ${running ? green(bold("RUNNING")) : red(bold("STOPPED"))} | ${bold("Live Requests:")} ${liveCount > 0 ? green(bold(liveCount.toString())) : fg("#666")(liveCount.toString())} ${liveCount > 0 ? fg("#00FFFF")(liveIndicator) : ""} | ${bold("Control State:")} ${controlState === "live" ? green(bold(controlState.toUpperCase())) : blue(bold(controlState.toUpperCase()))} | ${bold("Frame:")} ${fg("#888")(frameCounter.toString())}`
-
-    rendererStateText.content = styledContent
-  }
-}
-
-function updateRenderableState(): void {
-  if (renderableStateText) {
-    const exists = demoRenderable !== null
-    const live = demoRenderable?.live || false
-    const visible = demoRenderable?.visible ?? false
-
-    const styledContent = t`${bold("Demo Renderable:")} ${exists ? green(bold("ADDED")) : fg("#666")(bold("NOT ADDED"))} | ${bold("Live:")} ${live ? green(bold("TRUE")) : red(bold("FALSE"))} | ${bold("Visible:")} ${visible ? blue(bold("TRUE")) : fg("#666")(bold("FALSE"))}`
-
-    renderableStateText.content = styledContent
-  }
-}
-
-function addDemoRenderable(renderer: CliRenderer): void {
-  if (demoRenderable) {
-    updateStatusText("Demo renderable already exists!")
-    return
-  }
-
-  demoRenderable = new BoxRenderable(renderer, {
-    id: "demo-renderable",
-    position: "absolute",
-    left: 60,
-    top: 15,
-    width: 30,
-    height: 8,
-    backgroundColor: RGBA.fromInts(100, 200, 150, 255),
-    borderColor: RGBA.fromInts(150, 255, 200, 255),
-    borderStyle: "double",
-    title: "Demo Renderable",
-    titleAlignment: "center",
-    border: true,
-  })
-
-  renderer.root.getRenderable("live-demo-main-group")?.add(demoRenderable)
-  updateStatusText("Added demo renderable")
-}
-
-function removeDemoRenderable(renderer: CliRenderer): void {
-  if (!demoRenderable) {
-    updateStatusText("No demo renderable to remove!")
-    return
-  }
-
-  renderer.root.getRenderable("live-demo-main-group")?.remove(demoRenderable.id)
-  demoRenderable = null
-  updateStatusText("Removed demo renderable")
-}
-
-export function run(renderer: CliRenderer): void {
-  currentRenderer = renderer
-
-  mainGroup = new BoxRenderable(renderer, {
-    id: "live-demo-main-group",
-    zIndex: 10,
-  })
-  renderer.root.add(mainGroup)
-
-  const backgroundColor = RGBA.fromInts(25, 30, 45, 255)
-  renderer.setBackgroundColor(backgroundColor)
-
-  titleText = new TextRenderable(renderer, {
-    id: "live_demo_title",
-    content: "Live State Management Demo",
-    position: "absolute",
-    left: 2,
-    top: 1,
-    fg: RGBA.fromInts(255, 215, 135),
-    attributes: TextAttributes.BOLD,
-    zIndex: 1000,
-  })
-  mainGroup.add(titleText)
-
-  instructionsText = new TextRenderable(renderer, {
-    id: "live_demo_instructions",
-    content: "Test the live state management system • Escape: return to menu",
-    position: "absolute",
-    left: 2,
-    top: 2,
-    fg: RGBA.fromInts(176, 196, 222),
-    zIndex: 1000,
-  })
-  mainGroup.add(instructionsText)
-
-  statusText = new TextRenderable(renderer, {
-    id: "live_demo_status",
-    content: "Ready - Click buttons to test live state management",
-    position: "absolute",
-    left: 2,
-    top: 4,
-    fg: RGBA.fromInts(144, 238, 144),
-    attributes: TextAttributes.ITALIC,
-    zIndex: 1000,
-  })
-  mainGroup.add(statusText)
-
-  rendererStateText = new TextRenderable(renderer, {
-    id: "renderer_state",
-    content: "",
-    position: "absolute",
-    left: 2,
-    top: 6,
-    fg: RGBA.fromInts(255, 255, 100),
-    zIndex: 1000,
-  })
-  mainGroup.add(rendererStateText)
-
-  renderableStateText = new TextRenderable(renderer, {
-    id: "renderable_state",
-    content: "",
-    position: "absolute",
-    left: 2,
-    top: 7,
-    fg: RGBA.fromInts(255, 255, 100),
-    zIndex: 1000,
-  })
-  mainGroup.add(renderableStateText)
-
-  // Button colors
-  const rendererColor = RGBA.fromInts(100, 140, 180, 255) // Blue - darker for better contrast
-  const renderableColor = RGBA.fromInts(180, 100, 140, 255) // Pink - darker for better contrast
-  const liveColor = RGBA.fromInts(140, 180, 100, 255) // Green - darker for better contrast
-  const visibilityColor = RGBA.fromInts(180, 140, 100, 255) // Orange - for visibility controls
-
-  const startY = 10
-  const buttonWidth = 20
-  const buttonHeight = 3
-  const spacing = 22
-
-  // Renderer control buttons
-  liveButtons = [
-    LiveButton({
-      id: "request-live-btn",
-      position: "absolute",
-      left: 2,
-      top: startY,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: rendererColor,
-      label: "REQUEST LIVE",
-      onMouseDown: () => {
-        if (!currentRenderer) return
-        currentRenderer.requestLive()
-        updateStatusText("Manually requested live")
-        updateRendererState(currentRenderer)
-        updateRenderableState()
-      },
-    }),
-    LiveButton({
-      id: "drop-live-btn",
-      position: "absolute",
-      left: 2 + spacing,
-      top: startY,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: rendererColor,
-      label: "DROP LIVE",
-      onMouseDown: () => {
-        if (!currentRenderer) return
-        currentRenderer.dropLive()
-        updateStatusText("Manually dropped live")
-        updateRendererState(currentRenderer)
-        updateRenderableState()
-      },
-    }),
-
-    // Renderable management buttons
-    LiveButton({
-      id: "add-renderable-btn",
-      position: "absolute",
-      left: 2,
-      top: startY + 5,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: renderableColor,
-      label: "ADD RENDERABLE",
-      onMouseDown: () => {
-        if (!currentRenderer) return
-        addDemoRenderable(currentRenderer)
-        updateRendererState(currentRenderer)
-        updateRenderableState()
-      },
-    }),
-    LiveButton({
-      id: "remove-renderable-btn",
-      position: "absolute",
-      left: 2 + spacing,
-      top: startY + 5,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: renderableColor,
-      label: "REMOVE RENDERABLE",
-      onMouseDown: () => {
-        if (!currentRenderer) return
-        removeDemoRenderable(currentRenderer)
-        updateRendererState(currentRenderer)
-        updateRenderableState()
-      },
-    }),
-
-    // Live state buttons
-    LiveButton({
-      id: "set-live-true-btn",
-      position: "absolute",
-      left: 2,
-      top: startY + 10,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: liveColor,
-      label: "LIVE = TRUE",
-      onMouseDown: () => {
-        if (demoRenderable) {
-          demoRenderable.live = true
-          updateStatusText("Set demo renderable live = true")
-        } else {
-          updateStatusText("No demo renderable to set live!")
-        }
-        if (currentRenderer) {
-          updateRendererState(currentRenderer)
-        }
-        updateRenderableState()
-      },
-    }),
-    LiveButton({
-      id: "set-live-false-btn",
-      position: "absolute",
-      left: 2 + spacing,
-      top: startY + 10,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: liveColor,
-      label: "LIVE = FALSE",
-      onMouseDown: () => {
-        if (demoRenderable) {
-          demoRenderable.live = false
-          updateStatusText("Set demo renderable live = false")
-        } else {
-          updateStatusText("No demo renderable to set live!")
-        }
-        if (currentRenderer) {
-          updateRendererState(currentRenderer)
-        }
-        updateRenderableState()
-      },
-    }),
-
-    // Visibility state buttons
-    LiveButton({
-      id: "set-visible-true-btn",
-      position: "absolute",
-      left: 2,
-      top: startY + 15,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: visibilityColor,
-      label: "VISIBLE = TRUE",
-      onMouseDown: () => {
-        if (demoRenderable) {
-          demoRenderable.visible = true
-          updateStatusText("Set demo renderable visible = true")
-        } else {
-          updateStatusText("No demo renderable to set visible!")
-        }
-        if (currentRenderer) {
-          updateRendererState(currentRenderer)
-        }
-        updateRenderableState()
-      },
-    }),
-    LiveButton({
-      id: "set-visible-false-btn",
-      position: "absolute",
-      left: 2 + spacing,
-      top: startY + 15,
-      width: buttonWidth,
-      height: buttonHeight,
-      backgroundColor: visibilityColor,
-      label: "VISIBLE = FALSE",
-      onMouseDown: () => {
-        if (demoRenderable) {
-          demoRenderable.visible = false
-          updateStatusText("Set demo renderable visible = false")
-        } else {
-          updateStatusText("No demo renderable to set visible!")
-        }
-        if (currentRenderer) {
-          updateRendererState(currentRenderer)
-        }
-        updateRenderableState()
-      },
-    }),
-  ]
-
-  for (const button of liveButtons) {
-    mainGroup.add(button)
-  }
-
-  // Add section labels
-  const rendererLabel = new TextRenderable(renderer, {
-    id: "renderer_label",
-    content: "Renderer Control:",
-    position: "absolute",
-    left: 2,
-    top: startY - 1,
-    fg: rendererColor,
-    attributes: TextAttributes.BOLD,
-    zIndex: 500,
-  })
-  mainGroup.add(rendererLabel)
-
-  const renderableLabel = new TextRenderable(renderer, {
-    id: "renderable_label",
-    content: "Renderable Management:",
-    position: "absolute",
-    left: 2,
-    top: startY + 4,
-    fg: renderableColor,
-    attributes: TextAttributes.BOLD,
-    zIndex: 500,
-  })
-  mainGroup.add(renderableLabel)
-
-  const liveLabel = new TextRenderable(renderer, {
-    id: "live_label",
-    content: "Live State Control:",
-    position: "absolute",
-    left: 2,
-    top: startY + 9,
-    fg: liveColor,
-    attributes: TextAttributes.BOLD,
-    zIndex: 500,
-  })
-  mainGroup.add(liveLabel)
-
-  const visibilityLabel = new TextRenderable(renderer, {
-    id: "visibility_label",
-    content: "Visibility Control:",
-    position: "absolute",
-    left: 2,
-    top: startY + 14,
-    fg: visibilityColor,
-    attributes: TextAttributes.BOLD,
-    zIndex: 500,
-  })
-  mainGroup.add(visibilityLabel)
-
-  frameCallback = async (deltaTime) => {
-    frameCounter++
-    if (frameCounter % 10 === 0) {
-      animationCounter++
-      updateRendererState(renderer)
-      updateRenderableState()
-    }
-  }
-  renderer.setFrameCallback(frameCallback)
-
-  updateRendererState(renderer)
-  updateRenderableState()
-
-  console.log("Live State Demo initialized! Test the automatic live state management system.")
-}
-
-export function destroy(renderer: CliRenderer): void {
-  if (frameCallback) {
-    renderer.removeFrameCallback(frameCallback)
-    frameCallback = null
-  }
-
-  currentRenderer = null
-  frameCounter = 0
-  animationCounter = 0
-
-  renderer.root.getRenderable("live-demo-main-group")?.destroyRecursively()
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}