@fairyhunter13/opentui-core 0.1.91 → 0.1.94

package/src/examples/draggable-three-demo.ts

@@ -1,259 +0,0 @@
-#!/usr/bin/env bun
-
-import {
-  CliRenderer,
-  createCliRenderer,
-  RGBA,
-  BoxRenderable,
-  TextRenderable,
-  type KeyEvent,
-  type MouseEvent,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-import {
-  Scene as ThreeScene,
-  Mesh as ThreeMesh,
-  PerspectiveCamera,
-  Color,
-  DirectionalLight,
-  AmbientLight,
-  BoxGeometry,
-  MeshPhongMaterial,
-  Vector3,
-} from "three"
-import { ThreeRenderable } from "../3d.js"
-
-let nextZIndex = 200
-let keyListener: ((key: KeyEvent) => void) | null = null
-let resizeListener: ((width: number, height: number) => void) | null = null
-let parentContainer: BoxRenderable | null = null
-let draggableCube: DraggableThreeRenderable | null = null
-
-const HEADER_HEIGHT = 4
-
-class DraggableThreeRenderable extends ThreeRenderable {
-  private isDragging = false
-  private dragOffsetX = 0
-  private dragOffsetY = 0
-  private dragBoundsTop: number
-
-  constructor(ctx: CliRenderer, dragBoundsTop: number, options: ConstructorParameters<typeof ThreeRenderable>[1]) {
-    super(ctx, options)
-    this.dragBoundsTop = dragBoundsTop
-  }
-
-  public setDragBoundsTop(top: number): void {
-    this.dragBoundsTop = top
-  }
-
-  protected override onMouseEvent(event: MouseEvent): void {
-    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":
-        if (!this.isDragging) return
-        this.updateDragPosition(event.x, event.y)
-        event.stopPropagation()
-        break
-      case "drag-end":
-        if (this.isDragging) {
-          this.isDragging = false
-          event.stopPropagation()
-        }
-        break
-    }
-  }
-
-  private updateDragPosition(pointerX: number, pointerY: number): void {
-    const newX = pointerX - this.dragOffsetX
-    const newY = pointerY - this.dragOffsetY
-    const maxX = this._ctx.width - this.width
-    const maxY = this._ctx.height - this.height
-
-    this.x = Math.max(0, Math.min(newX, maxX))
-    this.y = Math.max(this.dragBoundsTop, Math.min(newY, maxY))
-  }
-}
-
-function getRenderSize(width: number, height: number): { width: number; height: number } {
-  return {
-    width: Math.max(24, Math.min(64, Math.floor(width * 0.55))),
-    height: Math.max(12, Math.min(28, Math.floor(height * 0.55))),
-  }
-}
-
-export function run(renderer: CliRenderer): void {
-  renderer.start()
-  renderer.setBackgroundColor("#0A0E14")
-
-  const width = renderer.terminalWidth
-  const height = renderer.terminalHeight
-  const size = getRenderSize(width, height)
-
-  parentContainer = new BoxRenderable(renderer, {
-    id: "draggable-three-container",
-    zIndex: 10,
-  })
-  renderer.root.add(parentContainer)
-
-  const titleText = new TextRenderable(renderer, {
-    id: "draggable-three-title",
-    content: "Draggable ThreeRenderable - rotating cube (drag with mouse)",
-    position: "absolute",
-    left: 2,
-    top: 1,
-    fg: "#E2E8F0",
-    zIndex: 20,
-  })
-  parentContainer.add(titleText)
-
-  const instructionsText = new TextRenderable(renderer, {
-    id: "draggable-three-instructions",
-    content: "Space: toggle rotation | P: screenshot | Esc: return",
-    position: "absolute",
-    left: 2,
-    top: 2,
-    fg: "#94A3B8",
-    zIndex: 20,
-  })
-  parentContainer.add(instructionsText)
-
-  const controlsText = new TextRenderable(renderer, {
-    id: "draggable-three-controls",
-    content: "Drag the cube to see transparency and live rendering",
-    position: "absolute",
-    left: 2,
-    top: height - 2,
-    fg: "#CBD5F5",
-    zIndex: 20,
-  })
-  parentContainer.add(controlsText)
-
-  const sceneRoot = new ThreeScene()
-
-  const ambientLight = new AmbientLight(new Color(0.35, 0.35, 0.35), 1.0)
-  sceneRoot.add(ambientLight)
-
-  const keyLight = new DirectionalLight(new Color(1.0, 0.95, 0.9), 1.2)
-  keyLight.position.set(2.5, 2.0, 3.0)
-  sceneRoot.add(keyLight)
-
-  const fillLight = new DirectionalLight(new Color(0.5, 0.7, 1.0), 0.6)
-  fillLight.position.set(-2.0, -1.5, 2.5)
-  sceneRoot.add(fillLight)
-
-  const cubeGeometry = new BoxGeometry(1.0, 1.0, 1.0)
-  const cubeMaterial = new MeshPhongMaterial({
-    color: new Color(0.25, 0.8, 1.0),
-    shininess: 80,
-    specular: new Color(0.9, 0.9, 1.0),
-  })
-  const cubeMesh = new ThreeMesh(cubeGeometry, cubeMaterial)
-  cubeMesh.name = "cube"
-  sceneRoot.add(cubeMesh)
-
-  const cameraNode = new PerspectiveCamera(45, 1, 0.1, 100)
-  cameraNode.position.set(0, 0, 3)
-  cameraNode.name = "main_camera"
-
-  const startX = Math.max(2, Math.floor((width - size.width) / 2))
-  const startY = Math.max(HEADER_HEIGHT, Math.floor((height - size.height) / 2))
-
-  draggableCube = new DraggableThreeRenderable(renderer, HEADER_HEIGHT, {
-    id: "draggable-three",
-    width: size.width,
-    height: size.height,
-    position: "absolute",
-    left: startX,
-    top: startY,
-    zIndex: 50,
-    scene: sceneRoot,
-    camera: cameraNode,
-    renderer: {
-      focalLength: 8,
-      alpha: true,
-      backgroundColor: RGBA.fromValues(0, 0, 0, 0),
-    },
-  })
-  renderer.root.add(draggableCube)
-
-  const rotationSpeed = new Vector3(0.6, 0.4, 0.2)
-  let rotationEnabled = true
-
-  renderer.setFrameCallback(async (deltaMs) => {
-    const deltaTime = deltaMs / 1000
-    if (!rotationEnabled) return
-    cubeMesh.rotation.x += rotationSpeed.x * deltaTime
-    cubeMesh.rotation.y += rotationSpeed.y * deltaTime
-    cubeMesh.rotation.z += rotationSpeed.z * deltaTime
-  })
-
-  resizeListener = (newWidth: number, newHeight: number) => {
-    controlsText.y = newHeight - 2
-
-    if (!draggableCube) return
-
-    const nextSize = getRenderSize(newWidth, newHeight)
-    draggableCube.width = nextSize.width
-    draggableCube.height = nextSize.height
-    draggableCube.setDragBoundsTop(HEADER_HEIGHT)
-
-    const maxX = newWidth - draggableCube.width
-    const maxY = newHeight - draggableCube.height
-    draggableCube.x = Math.max(0, Math.min(draggableCube.x, maxX))
-    draggableCube.y = Math.max(HEADER_HEIGHT, Math.min(draggableCube.y, maxY))
-  }
-
-  renderer.on("resize", resizeListener)
-
-  keyListener = (key: KeyEvent) => {
-    if (key.name === "p" && draggableCube) {
-      draggableCube.renderer.saveToFile(`screenshot-${Date.now()}.png`)
-    }
-
-    if (key.name === "space") {
-      rotationEnabled = !rotationEnabled
-    }
-  }
-
-  renderer.keyInput.on("keypress", keyListener)
-}
-
-export function destroy(renderer: CliRenderer): void {
-  renderer.clearFrameCallbacks()
-
-  if (resizeListener) {
-    renderer.off("resize", resizeListener)
-    resizeListener = null
-  }
-
-  if (keyListener) {
-    renderer.keyInput.off("keypress", keyListener)
-    keyListener = null
-  }
-
-  if (draggableCube) {
-    draggableCube.destroy()
-    draggableCube = null
-  }
-
-  if (parentContainer) {
-    renderer.root.remove("draggable-three-container")
-    parentContainer = null
-  }
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 60,
-  })
-
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}

package/src/examples/editor-demo.ts

@@ -1,322 +0,0 @@
-import {
-  CliRenderer,
-  createCliRenderer,
-  TextareaRenderable,
-  BoxRenderable,
-  TextRenderable,
-  LineNumberRenderable,
-  KeyEvent,
-  t,
-  bold,
-  cyan,
-  fg,
-} from "../index.js"
-import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
-
-const initialContent = `Welcome to the TextareaRenderable Demo!
-
-This is an interactive text editor powered by EditBuffer and EditorView.
-
-\tThis is a tab
-\t\t\tMultiple tabs
-
-Emojis:
-👩🏽‍💻  👨‍👩‍👧‍👦  🏳️‍🌈  🇺🇸  🇩🇪  🇯🇵  🇮🇳
-
-NAVIGATION:
-  • Arrow keys to move cursor
-  • Ctrl+A/Ctrl+E for line start/end
-  • Home/End for buffer start/end
-  • Ctrl+F/Ctrl+B to move right/left (Emacs-style)
-  • Alt+F/Alt+B for word forward/backward
-  • Alt+Left/Alt+Right for word forward/backward
-  • Ctrl+Left/Ctrl+Right for word forward/backward
-  • Alt+A/Alt+E for visual line start/end
-
-SELECTION:
-  • Shift+Arrow keys to select
-  • Ctrl+Shift+A/E to select to line start/end
-  • Shift+Home/End to select to buffer start/end
-  • Alt+Shift+F/B to select word forward/backward
-  • Alt+Shift+Left/Right to select word forward/backward
-  • Alt+Shift+A/E to select to visual line start/end
-
-EDITING:
-  • Type any text to insert
-  • Backspace/Delete to remove text
-  • Enter to create new lines
-  • Ctrl+Shift+D to delete current line
-  • Ctrl+D to delete character forward
-  • Ctrl+K to delete to line end
-  • Ctrl+U to delete to line start
-  • Alt+D to delete word forward
-  • Alt+Backspace or Ctrl+W to delete word backward
-  • Ctrl+Delete or Alt+Delete to delete word forward
-
-UNDO/REDO:
-  • Ctrl+- to undo or Cmd+Z (Mac)
-  • Ctrl+. to redo or Cmd+Shift+Z (Mac)
-
-VIEW:
-  • Shift+W to toggle wrap mode (word/char/none)
-  • Shift+L to toggle line numbers
-  • Shift+H to toggle diff highlights (colors + +/- signs)
-  • Shift+D to toggle diagnostics (error/warning/info emojis)
-  • Ctrl+] to increase scroll speed
-  • Ctrl+[ to decrease scroll speed
-
-FEATURES:
-  ✓ Grapheme-aware cursor movement
-  ✓ Unicode (emoji 🌟 and CJK 世界, 你好世界, 中文, 한글)
-  ✓ Incremental editing
-  ✓ Text wrapping and viewport management
-  ✓ Undo/redo support
-  ✓ Word-based navigation and deletion
-  ✓ Text selection with shift keys
-
-Press ESC to return to main menu`
-
-let renderer: CliRenderer | null = null
-let parentContainer: BoxRenderable | null = null
-let editor: TextareaRenderable | null = null
-let editorWithLines: LineNumberRenderable | null = null
-let statusText: TextRenderable | null = null
-let highlightsEnabled: boolean = false
-let diagnosticsEnabled: boolean = false
-
-export async function run(rendererInstance: CliRenderer): Promise<void> {
-  renderer = rendererInstance
-  renderer.setBackgroundColor("#0D1117")
-
-  parentContainer = new BoxRenderable(renderer, {
-    id: "parent-container",
-    zIndex: 10,
-    padding: 1,
-  })
-  renderer.root.add(parentContainer)
-
-  const editorBox = new BoxRenderable(renderer, {
-    id: "editor-box",
-    borderStyle: "single",
-    borderColor: "#6BCF7F",
-    backgroundColor: "#0D1117",
-    title: "Interactive Editor (TextareaRenderable)",
-    titleAlignment: "left",
-    border: true,
-  })
-  parentContainer.add(editorBox)
-
-  // Create interactive editor
-  editor = new TextareaRenderable(renderer, {
-    id: "editor",
-    initialValue: initialContent,
-    textColor: "#F0F6FC",
-    selectionBg: "#264F78",
-    selectionFg: "#FFFFFF",
-    wrapMode: "word",
-    showCursor: true,
-    cursorColor: "#4ECDC4",
-    placeholder: t`${fg("#333333")("Enter")} ${cyan(bold("text"))} ${fg("#333333")("here...")}`,
-    tabIndicator: "→",
-    tabIndicatorColor: "#30363D",
-  })
-
-  editorWithLines = new LineNumberRenderable(renderer, {
-    id: "editor-lines",
-    target: editor,
-    minWidth: 3,
-    paddingRight: 1,
-    fg: "#6b7280", // Dimmed gray for line numbers
-    bg: "#161b22", // Slightly darker than editor background for distinction
-    width: "100%",
-    height: "100%",
-  })
-
-  editorBox.add(editorWithLines)
-
-  statusText = new TextRenderable(renderer, {
-    id: "status",
-    content: "",
-    fg: "#A5D6FF",
-    height: 1,
-  })
-  parentContainer.add(statusText)
-
-  editor.focus()
-
-  rendererInstance.setFrameCallback(async () => {
-    if (statusText && editor && !editor.isDestroyed) {
-      try {
-        const cursor = editor.logicalCursor
-        const wrap = editor.wrapMode !== "none" ? "ON" : "OFF"
-        const highlights = highlightsEnabled ? "ON" : "OFF"
-        const diagnostics = diagnosticsEnabled ? "ON" : "OFF"
-        const scrollSpeed = editor.scrollSpeed
-        statusText.content = `Line ${cursor.row + 1}, Col ${cursor.col + 1} | Wrap: ${wrap} | Diff: ${highlights} | Diag: ${diagnostics} | Scroll: ${scrollSpeed} lines/s`
-      } catch (error) {
-        // Ignore errors during shutdown
-      }
-    }
-  })
-
-  rendererInstance.keyInput.on("keypress", (key: KeyEvent) => {
-    if (key.shift && key.name === "l") {
-      key.preventDefault()
-      if (editorWithLines && !editorWithLines.isDestroyed) {
-        editorWithLines.showLineNumbers = !editorWithLines.showLineNumbers
-      }
-    }
-    if (key.shift && key.name === "w") {
-      key.preventDefault()
-      if (editor && !editor.isDestroyed) {
-        const currentMode = editor.wrapMode
-        const nextMode = currentMode === "word" ? "char" : currentMode === "char" ? "none" : "word"
-        editor.wrapMode = nextMode
-      }
-    }
-    if (key.shift && key.name === "h") {
-      key.preventDefault()
-      if (editorWithLines && !editorWithLines.isDestroyed) {
-        highlightsEnabled = !highlightsEnabled
-        if (highlightsEnabled) {
-          // Add modern diff-style line colors and +/- signs throughout the document
-          editorWithLines.setLineColor(2, "#1a4d1a") // Line 3: Added (fresh green)
-          editorWithLines.setLineSign(2, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(5, "#4d1a1a") // Line 6: Removed (vibrant red)
-          editorWithLines.setLineSign(5, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(8, "#1a4d1a") // Line 9: Added (fresh green)
-          editorWithLines.setLineSign(8, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(11, "#4d1a1a") // Line 12: Removed (vibrant red)
-          editorWithLines.setLineSign(11, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(14, "#1a4d1a") // Line 15: Added (fresh green)
-          editorWithLines.setLineSign(14, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(17, "#4d1a1a") // Line 18: Removed (vibrant red)
-          editorWithLines.setLineSign(17, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(20, "#1a4d1a") // Line 21: Added (fresh green)
-          editorWithLines.setLineSign(20, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(23, "#4d1a1a") // Line 24: Removed (vibrant red)
-          editorWithLines.setLineSign(23, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(27, "#1a4d1a") // Line 28: Added (fresh green)
-          editorWithLines.setLineSign(27, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(30, "#4d1a1a") // Line 31: Removed (vibrant red)
-          editorWithLines.setLineSign(30, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(34, "#1a4d1a") // Line 35: Added (fresh green)
-          editorWithLines.setLineSign(34, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(38, "#4d1a1a") // Line 39: Removed (vibrant red)
-          editorWithLines.setLineSign(38, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(42, "#1a4d1a") // Line 43: Added (fresh green)
-          editorWithLines.setLineSign(42, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(46, "#4d1a1a") // Line 47: Removed (vibrant red)
-          editorWithLines.setLineSign(46, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(50, "#1a4d1a") // Line 51: Added (fresh green)
-          editorWithLines.setLineSign(50, { after: " +", afterColor: "#22c55e" })
-
-          editorWithLines.setLineColor(54, "#4d1a1a") // Line 55: Removed (vibrant red)
-          editorWithLines.setLineSign(54, { after: " -", afterColor: "#ef4444" })
-
-          editorWithLines.setLineColor(58, "#1a4d1a") // Line 59: Added (fresh green)
-          editorWithLines.setLineSign(58, { after: " +", afterColor: "#22c55e" })
-        } else {
-          editorWithLines.clearAllLineColors()
-          // Clear only the after signs (keep diagnostics if enabled)
-          const currentSigns = editorWithLines.getLineSigns()
-          for (const [line, sign] of currentSigns) {
-            if (sign.after) {
-              if (sign.before) {
-                // Keep the before sign, remove only after
-                editorWithLines.setLineSign(line, { before: sign.before, beforeColor: sign.beforeColor })
-              } else {
-                // No before sign, remove entirely
-                editorWithLines.clearLineSign(line)
-              }
-            }
-          }
-        }
-      }
-    }
-    if (key.shift && key.name === "d") {
-      key.preventDefault()
-      if (editorWithLines && !editorWithLines.isDestroyed) {
-        diagnosticsEnabled = !diagnosticsEnabled
-        if (diagnosticsEnabled) {
-          // Add diagnostic signs (errors, warnings, info) on some lines
-          editorWithLines.setLineSign(0, { before: "❌", beforeColor: "#ef4444" }) // Line 1: Error
-          editorWithLines.setLineSign(4, { before: "⚠️", beforeColor: "#f59e0b" }) // Line 5: Warning
-          editorWithLines.setLineSign(10, { before: "💡", beforeColor: "#3b82f6" }) // Line 11: Info
-          editorWithLines.setLineSign(25, { before: "❌", beforeColor: "#ef4444" }) // Line 26: Error
-          editorWithLines.setLineSign(40, { before: "⚠️", beforeColor: "#f59e0b" }) // Line 41: Warning
-          editorWithLines.setLineSign(52, { before: "💡", beforeColor: "#3b82f6" }) // Line 53: Info
-        } else {
-          // Clear only the before signs (keep diff signs if enabled)
-          const currentSigns = editorWithLines.getLineSigns()
-          for (const [line, sign] of currentSigns) {
-            if (sign.before) {
-              if (sign.after) {
-                // Keep the after sign, remove only before
-                editorWithLines.setLineSign(line, { after: sign.after, afterColor: sign.afterColor })
-              } else {
-                // No after sign, remove entirely
-                editorWithLines.clearLineSign(line)
-              }
-            }
-          }
-        }
-      }
-    }
-    if (key.ctrl && (key.name === "pageup" || key.name === "pagedown")) {
-      key.preventDefault()
-      if (editor && !editor.isDestroyed) {
-        if (key.name === "pageup") {
-          editor.editBuffer.setCursor(0, 0)
-        } else {
-          editor.gotoBufferEnd()
-        }
-      }
-    }
-    if (key.ctrl && key.name === "]") {
-      key.preventDefault()
-      if (editor && !editor.isDestroyed) {
-        editor.scrollSpeed = Math.min(100, editor.scrollSpeed + 4)
-      }
-    }
-    if (key.ctrl && key.name === "[") {
-      key.preventDefault()
-      if (editor && !editor.isDestroyed) {
-        editor.scrollSpeed = Math.max(4, editor.scrollSpeed - 4)
-      }
-    }
-  })
-}
-
-export function destroy(rendererInstance: CliRenderer): void {
-  rendererInstance.clearFrameCallbacks()
-  parentContainer?.destroy()
-  parentContainer = null
-  editorWithLines = null
-  editor = null
-  statusText = null
-  renderer = null
-}
-
-if (import.meta.main) {
-  const renderer = await createCliRenderer({
-    exitOnCtrlC: true,
-    targetFps: 60,
-  })
-  run(renderer)
-  setupCommonDemoKeys(renderer)
-}