@fairyhunter13/opentui-core 0.1.89 → 0.1.90

package/src/examples/extmarks-demo.ts

@@ -0,0 +1,204 @@
+import {
+  CliRenderer,
+  createCliRenderer,
+  TextareaRenderable,
+  BoxRenderable,
+  TextRenderable,
+  KeyEvent,
+  type ExtmarksController,
+  type ExtmarkDeletedEvent,
+} from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { SyntaxStyle } from "../syntax-style.js"
+import { RGBA } from "../lib/RGBA.js"
+
+const initialContent = `Welcome to the Extmarks Demo!
+
+This demo showcases virtual extmarks - text ranges that the cursor jumps over.
+
+Try moving your cursor through the [VIRTUAL] markers below:
+- Use arrow keys to navigate
+- Notice how the cursor skips over [VIRTUAL] ranges
+- Try backspacing at the end of a [VIRTUAL] marker
+- It will delete the entire marker!
+
+Example text with [LINK:https://example.com] embedded links.
+You can also have [TAG:important] tags that act like atoms.
+
+Regular text here can be edited normally.
+
+Press Ctrl+L to add a new [MARKER] at cursor position.
+Press ESC to return to main menu.`
+
+let renderer: CliRenderer | null = null
+let parentContainer: BoxRenderable | null = null
+let editor: TextareaRenderable | null = null
+let statusText: TextRenderable | null = null
+let helpText: TextRenderable | null = null
+let extmarksController: ExtmarksController | null = null
+let syntaxStyle: SyntaxStyle | null = null
+let virtualStyleId: number = 0
+
+export async function run(rendererInstance: CliRenderer): Promise<void> {
+  renderer = rendererInstance
+  renderer.start()
+  renderer.setBackgroundColor("#0D1117")
+
+  syntaxStyle = SyntaxStyle.create()
+  virtualStyleId = syntaxStyle.registerStyle("virtual", {
+    fg: RGBA.fromValues(0.3, 0.7, 1.0, 1.0),
+    bg: RGBA.fromValues(0.1, 0.2, 0.3, 1.0),
+  })
+
+  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: "Extmarks Demo - Virtual Text Ranges",
+    titleAlignment: "left",
+    paddingLeft: 1,
+    paddingRight: 1,
+    border: true,
+  })
+  parentContainer.add(editorBox)
+
+  editor = new TextareaRenderable(renderer, {
+    id: "editor",
+    initialValue: initialContent,
+    textColor: "#F0F6FC",
+    selectionBg: "#264F78",
+    selectionFg: "#FFFFFF",
+    wrapMode: "word",
+    showCursor: true,
+    cursorColor: "#4ECDC4",
+    syntaxStyle,
+  })
+  editorBox.add(editor)
+
+  extmarksController = editor.extmarks
+  if (!extmarksController) {
+    throw new Error("Failed to create extmarks controller")
+  }
+
+  findAndMarkVirtualRanges()
+
+  extmarksController.on("extmark-deleted", (event: ExtmarkDeletedEvent) => {
+    if (helpText) {
+      const extmark = event.extmark
+      helpText.content = `Deleted extmark at ${extmark.start}-${extmark.end} via ${event.trigger}`
+    }
+  })
+
+  helpText = new TextRenderable(renderer, {
+    id: "help",
+    content: "Move cursor with arrows. Try backspacing at end of [VIRTUAL] markers!",
+    fg: "#FFA657",
+    height: 1,
+  })
+  parentContainer.add(helpText)
+
+  statusText = new TextRenderable(renderer, {
+    id: "status",
+    content: "",
+    fg: "#A5D6FF",
+    height: 1,
+  })
+  parentContainer.add(statusText)
+
+  editor.focus()
+
+  rendererInstance.setFrameCallback(async () => {
+    if (statusText && editor && !editor.isDestroyed && extmarksController) {
+      try {
+        const cursor = editor.logicalCursor
+        const offset = editor.cursorOffset
+        const extmarksAtCursor = extmarksController.getAtOffset(offset)
+        const virtualCount = extmarksController.getVirtual().length
+
+        let extmarkInfo = ""
+        if (extmarksAtCursor.length > 0) {
+          extmarkInfo = ` | Inside extmark(s): ${extmarksAtCursor.length}`
+        }
+
+        statusText.content = `Line ${cursor.row + 1}, Col ${cursor.col + 1}, Offset ${offset} | Virtual extmarks: ${virtualCount}${extmarkInfo}`
+      } catch (error) {
+        // Ignore errors during shutdown
+      }
+    }
+  })
+
+  rendererInstance.keyInput.on("keypress", (key: KeyEvent) => {
+    if (key.ctrl && key.name === "l") {
+      key.preventDefault()
+      if (editor && !editor.isDestroyed && extmarksController) {
+        const offset = editor.cursorOffset
+        const markerText = "[MARKER]"
+        editor.insertText(markerText)
+
+        extmarksController.create({
+          start: offset,
+          end: offset + markerText.length,
+          virtual: true,
+          styleId: virtualStyleId,
+          data: { type: "marker", added: "manual" },
+        })
+
+        if (helpText) {
+          helpText.content = `Added virtual marker at offset ${offset}!`
+        }
+      }
+    }
+  })
+}
+
+function findAndMarkVirtualRanges(): void {
+  if (!editor || !extmarksController) return
+
+  const text = editor.plainText
+  const pattern = /\[(VIRTUAL|LINK:[^\]]+|TAG:[^\]]+|MARKER)\]/g
+  let match: RegExpExecArray | null
+
+  while ((match = pattern.exec(text)) !== null) {
+    const start = match.index
+    const end = match.index + match[0].length
+
+    extmarksController.create({
+      start,
+      end,
+      virtual: true,
+      styleId: virtualStyleId,
+      data: { type: "auto-detected", content: match[0] },
+    })
+  }
+}
+
+export function destroy(rendererInstance: CliRenderer): void {
+  rendererInstance.clearFrameCallbacks()
+  extmarksController?.destroy()
+  extmarksController = null
+  syntaxStyle?.destroy()
+  syntaxStyle = null
+  parentContainer?.destroy()
+  parentContainer = null
+  editor = null
+  statusText = null
+  helpText = null
+  renderer = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    targetFps: 60,
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}

package/src/examples/focus-restore-demo.ts

@@ -0,0 +1,310 @@
+#!/usr/bin/env bun
+
+// Interactive demo to test the focus restore fix on Windows Terminal.
+//
+// How to test:
+//   1. Run from the example selector, or: bun src/examples/focus-restore-demo.ts
+//   2. Move the mouse around - you should see the mouse position update live
+//   3. Alt-tab away from the terminal, then alt-tab back
+//   4. Move the mouse again - if the fix works, mouse tracking resumes immediately
+//   5. Try minimizing and restoring the window too
+//   6. Press Escape to return to menu, Ctrl+C to exit
+
+import {
+  type CliRenderer,
+  createCliRenderer,
+  BoxRenderable,
+  TextRenderable,
+  RGBA,
+  TextAttributes,
+  type MouseEvent,
+} from "../index"
+import { setupCommonDemoKeys } from "./lib/standalone-keys"
+
+let container: BoxRenderable | null = null
+let mouseArea: BoxRenderable | null = null
+
+let mouseX = 0
+let mouseY = 0
+let mouseEvents = 0
+let focusCount = 0
+let blurCount = 0
+let restoreCount = 0
+let lastFocusTime = ""
+let lastBlurTime = ""
+let lastMouseTime = ""
+let focused = true
+let originalRestore: any = null
+let focusHandler: (() => void) | null = null
+let blurHandler: (() => void) | null = null
+
+// Log storage
+const logEntries: Array<{ text: string; color: RGBA }> = []
+const maxLogEntries = 20
+
+// Renderable references for updates
+let focusStatus: TextRenderable | null = null
+let mouseStatus: TextRenderable | null = null
+let countersStatus: TextRenderable | null = null
+let timestampStatus: TextRenderable | null = null
+let logBox: BoxRenderable | null = null
+const logRenderables: TextRenderable[] = []
+
+function ts(): string {
+  return new Date().toLocaleTimeString("en-US", { hour12: false })
+}
+
+function addLogLine(renderer: CliRenderer, text: string, color: RGBA) {
+  if (!logBox) return
+
+  logEntries.push({ text, color })
+  while (logEntries.length > maxLogEntries) {
+    logEntries.shift()
+  }
+
+  // Remove old renderables
+  for (const r of logRenderables) {
+    logBox.remove(r.id)
+    r.destroy()
+  }
+  logRenderables.length = 0
+
+  // Rebuild from entries
+  for (let i = 0; i < logEntries.length; i++) {
+    const entry = logEntries[i]
+    const line = new TextRenderable(renderer, {
+      id: `focus-demo-log-${i}`,
+      content: entry.text,
+      fg: entry.color,
+      height: 1,
+    })
+    logBox.add(line)
+    logRenderables.push(line)
+  }
+}
+
+function updateDisplay() {
+  if (focusStatus) {
+    focusStatus.content = focused
+      ? "Focus: YES  (terminal modes active)"
+      : "Focus: NO   (modes may be stripped by terminal)"
+    focusStatus.fg = focused ? RGBA.fromInts(126, 231, 135) : RGBA.fromInts(255, 100, 100)
+  }
+  if (mouseStatus) {
+    mouseStatus.content = `Mouse: (${mouseX}, ${mouseY}) | Events: ${mouseEvents}`
+  }
+  if (countersStatus) {
+    countersStatus.content = `Focus-in: ${focusCount} | Focus-out: ${blurCount} | Mode restores: ${restoreCount}`
+  }
+  if (timestampStatus) {
+    timestampStatus.content = `Last focus: ${lastFocusTime || "--"} | Last blur: ${lastBlurTime || "--"} | Last mouse: ${lastMouseTime || "--"}`
+  }
+}
+
+export function run(renderer: CliRenderer): void {
+  renderer.setBackgroundColor("#0D1117")
+
+  // Reset state
+  mouseX = 0
+  mouseY = 0
+  mouseEvents = 0
+  focusCount = 0
+  blurCount = 0
+  restoreCount = 0
+  lastFocusTime = ""
+  lastBlurTime = ""
+  lastMouseTime = ""
+  focused = true
+  logEntries.length = 0
+
+  container = new BoxRenderable(renderer, {
+    id: "focus-demo-main",
+    flexDirection: "column",
+    padding: 1,
+  })
+  renderer.root.add(container)
+
+  // Title
+  const title = new TextRenderable(renderer, {
+    id: "focus-demo-title",
+    content: "Focus Restore Demo - Mouse Tracking + Terminal Mode Restore",
+    fg: RGBA.fromInts(72, 209, 204),
+    attributes: TextAttributes.BOLD,
+    height: 2,
+  })
+  container.add(title)
+
+  // Instructions
+  const instructions = new TextRenderable(renderer, {
+    id: "focus-demo-instructions",
+    content:
+      "Move mouse to see tracking. Alt-tab away and back. Mouse should resume.\n" +
+      "Minimize and restore. Try clicking after returning. Escape to return to menu.",
+    fg: RGBA.fromInts(160, 160, 180),
+    height: 3,
+  })
+  container.add(instructions)
+
+  // Status box
+  const statusBox = new BoxRenderable(renderer, {
+    id: "focus-demo-status-box",
+    border: true,
+    borderColor: "#4ECDC4",
+    borderStyle: "rounded",
+    title: "Terminal State",
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    marginTop: 1,
+  })
+  container.add(statusBox)
+
+  focusStatus = new TextRenderable(renderer, {
+    id: "focus-demo-focus-status",
+    content: "Focus: YES  (terminal modes active)",
+    fg: RGBA.fromInts(126, 231, 135),
+    height: 1,
+  })
+  statusBox.add(focusStatus)
+
+  mouseStatus = new TextRenderable(renderer, {
+    id: "focus-demo-mouse-status",
+    content: "Mouse: (0, 0) | Events: 0",
+    fg: RGBA.fromInts(165, 214, 255),
+    height: 1,
+  })
+  statusBox.add(mouseStatus)
+
+  countersStatus = new TextRenderable(renderer, {
+    id: "focus-demo-counters",
+    content: "Focus-in: 0 | Focus-out: 0 | Mode restores: 0",
+    fg: RGBA.fromInts(210, 168, 255),
+    height: 1,
+  })
+  statusBox.add(countersStatus)
+
+  timestampStatus = new TextRenderable(renderer, {
+    id: "focus-demo-timestamps",
+    content: "Last focus: -- | Last blur: -- | Last mouse: --",
+    fg: RGBA.fromInts(139, 148, 158),
+    height: 1,
+  })
+  statusBox.add(timestampStatus)
+
+  // Event log box
+  logBox = new BoxRenderable(renderer, {
+    id: "focus-demo-log-box",
+    border: true,
+    borderColor: "#6BCF7F",
+    borderStyle: "rounded",
+    title: "Event Log (latest 20)",
+    titleAlignment: "center",
+    padding: 1,
+    flexDirection: "column",
+    marginTop: 1,
+    flexGrow: 1,
+  })
+  container.add(logBox)
+
+  // Mouse tracking area (covers whole screen, behind everything)
+  mouseArea = new BoxRenderable(renderer, {
+    id: "focus-demo-mouse-area",
+    position: "absolute",
+    left: 0,
+    top: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    onMouse(event: MouseEvent) {
+      mouseX = event.x
+      mouseY = event.y
+      mouseEvents++
+      lastMouseTime = ts()
+      updateDisplay()
+    },
+  })
+  renderer.root.add(mouseArea)
+
+  // Spy on restoreTerminalModes to count restore calls
+  originalRestore = (renderer as any).lib.restoreTerminalModes
+  ;(renderer as any).lib.restoreTerminalModes = (...args: any[]) => {
+    restoreCount++
+    return originalRestore.call((renderer as any).lib, ...args)
+  }
+
+  // Focus/blur handlers
+  focusHandler = () => {
+    focused = true
+    focusCount++
+    lastFocusTime = ts()
+    addLogLine(
+      renderer,
+      `[${ts()}] FOCUS IN  - terminal modes restored (restore #${restoreCount})`,
+      RGBA.fromInts(126, 231, 135),
+    )
+    updateDisplay()
+  }
+
+  blurHandler = () => {
+    focused = false
+    blurCount++
+    lastBlurTime = ts()
+    addLogLine(renderer, `[${ts()}] FOCUS OUT - terminal may strip escape codes`, RGBA.fromInts(255, 165, 0))
+    updateDisplay()
+  }
+
+  renderer.on("focus", focusHandler)
+  renderer.on("blur", blurHandler)
+
+  addLogLine(renderer, `[${ts()}] Demo started. Move mouse, then alt-tab away and back.`, RGBA.fromInts(165, 214, 255))
+  updateDisplay()
+
+  renderer.requestRender()
+}
+
+export function destroy(renderer: CliRenderer): void {
+  // Restore spy
+  if (originalRestore) {
+    ;(renderer as any).lib.restoreTerminalModes = originalRestore
+    originalRestore = null
+  }
+
+  // Remove event listeners
+  if (focusHandler) {
+    renderer.off("focus", focusHandler)
+    focusHandler = null
+  }
+  if (blurHandler) {
+    renderer.off("blur", blurHandler)
+    blurHandler = null
+  }
+
+  // Clean up renderables
+  if (mouseArea) {
+    renderer.root.remove(mouseArea.id)
+    mouseArea.destroy()
+    mouseArea = null
+  }
+  if (container) {
+    renderer.root.remove(container.id)
+    container.destroyRecursively()
+    container = null
+  }
+
+  logRenderables.length = 0
+  logEntries.length = 0
+  focusStatus = null
+  mouseStatus = null
+  countersStatus = null
+  timestampStatus = null
+  logBox = null
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+    enableMouseMovement: true,
+  })
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+}