@fairyhunter13/opentui-core 0.1.112 → 0.1.114

package/src/examples/vnode-composition-demo.ts

@@ -0,0 +1,404 @@
+import { createCliRenderer, MouseEvent, type CliRenderer } from "../renderer.js"
+import {
+  Box,
+  Text,
+  Generic,
+  type VNode,
+  instantiate,
+  delegate,
+  Input,
+  BoxRenderable,
+  type BoxOptions,
+  vstyles,
+} from "../renderables/index.js"
+import type { RenderContext } from "../types.js"
+import type { OptimizedBuffer } from "../buffer.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+import { RGBA, parseColor } from "../lib/index.js"
+import type { Renderable } from "../Renderable.js"
+import { TextAttributes } from "../types.js"
+
+const textColor = parseColor("#FFFFFF")
+const globalbgColor = parseColor("#333333")
+const transparent = parseColor("transparent")
+
+const { bold, italic, underline, dim, boldItalic, boldUnderline, italicUnderline, color, bgColor, styled } = vstyles
+
+// This is NOT react and not reactive, it's just a declarative way to compose renderables
+// and mount them into a parent container.
+function MyRenderable(props: any, children: VNode[] = []) {
+  const mouseHandler = (event: MouseEvent) => {
+    console.log("mouseHandler", event.type)
+  }
+
+  return Box({ id: "inner" }, [
+    Box(
+      {
+        border: true,
+        borderStyle: "double",
+        padding: 1,
+        onMouseDown: mouseHandler,
+        flexDirection: "row",
+      },
+      children,
+    ),
+  ])
+}
+
+function Button(
+  props: {
+    title: string
+    onClick: () => void
+    borderColor?: string | RGBA
+  },
+  children: VNode[] = [],
+) {
+  return Box(
+    {
+      id: "button",
+      border: true,
+      onMouseDown: props.onClick,
+      borderColor: props.borderColor,
+    },
+    Text({ content: props.title, selectable: false }),
+    ...children,
+  )
+}
+
+// Custom Rendering Functional Construct
+function VNodeButton(
+  props: {
+    title: string
+    onClick: () => void
+    borderColor?: RGBA
+  },
+  children: VNode[] = [],
+) {
+  return Generic(
+    {
+      render: (buffer, deltaTime, renderable) => demoRenderFn(props, buffer, deltaTime, renderable),
+      maxWidth: props.title.length + 4,
+      margin: 1,
+    },
+    Box(
+      {
+        id: "button",
+        height: 3,
+        onMouseDown: props.onClick,
+      },
+      children,
+    ),
+  )
+}
+
+// Custom Rendering - Class Method Example
+class MyRoot {
+  width: number
+
+  constructor(private readonly props: { title: string; borderColor?: RGBA }) {
+    this.width = Math.max(props.title.length + 4, 12)
+    Object.assign(this, props)
+  }
+
+  render(buffer: OptimizedBuffer, deltaTime: number, renderable: Renderable) {
+    demoRenderFn(this.props, buffer, deltaTime, renderable)
+  }
+}
+
+function ButtonWithClassRender(
+  props: { title: string; onClick: () => void; borderColor?: RGBA; marginLeft?: number },
+  children: VNode[] = [],
+) {
+  return Generic(
+    new MyRoot(props),
+    Box(
+      {
+        id: "button",
+        height: 3,
+        onMouseDown: props.onClick,
+      },
+      ...children,
+    ),
+  )
+}
+
+// Host Override Example
+function MyDelegateToVNodeRenderable(props: any, children: VNode[] = []) {
+  return delegate(
+    {
+      add: `${props.id}_box3`,
+      remove: `${props.id}_box3`,
+    },
+    Box({ id: `${props.id}_outer3`, border: true, borderColor: "blue" }, [
+      Box({ id: `${props.id}_inner3`, border: true, borderColor: "magenta" }, [
+        Box({ id: `${props.id}_box3`, flexDirection: "row", border: true, padding: 1 }, children),
+      ]),
+    ]),
+  )
+}
+
+function MyDelegateToRenderableComponent(renderer: RenderContext, props: any, children: VNode[] = []) {
+  return delegate(
+    {
+      add: "__box4",
+      remove: "__box4",
+    },
+    instantiate(
+      renderer,
+      Box({ id: "__outer4", border: true, borderColor: "blue" }, [
+        Box({ id: "__inner4", border: true, borderColor: "magenta" }, [
+          Box({ id: "__box4", flexDirection: "row", border: true, padding: 1 }, children),
+        ]),
+      ]),
+    ),
+  )
+}
+
+function MyInstancedRenderable(renderer: RenderContext, props: any, children: VNode[] = []) {
+  return instantiate(renderer, MyDelegateToVNodeRenderable(props, children))
+}
+
+function LabeledInput(props: { id: string; label: string; placeholder: string }) {
+  return delegate(
+    {
+      focus: `${props.id}-input`,
+    },
+    Box(
+      { flexDirection: "row", id: `${props.id}-labeled-outer` },
+      Text({ content: props.label + " " }),
+      Input({
+        id: `${props.id}-input`,
+        placeholder: props.placeholder,
+        width: 20,
+        backgroundColor: "white",
+        textColor: "black",
+        cursorColor: "blue",
+        focusedBackgroundColor: "orange",
+      }),
+    ),
+  )
+}
+
+function BaseBox(props: BoxOptions, children: VNode[] = []) {
+  return Box(
+    {
+      id: "base-box",
+      border: true,
+      borderColor: "blue",
+      backgroundColor: "orange",
+      ...props,
+      renderAfter(buffer: OptimizedBuffer, deltaTime: number) {
+        buffer.drawText("Hello", this.x + 1, this.y + 1, RGBA.fromInts(255, 255, 255, 255))
+        props.renderAfter?.call(this, buffer, deltaTime)
+      },
+    },
+    children,
+  )
+}
+
+function ExtendedBaseBox(props: BoxOptions, children: VNode[] = []) {
+  return BaseBox(
+    {
+      id: "extended-base-box",
+      ...props,
+      renderAfter(buffer: OptimizedBuffer, deltaTime: number) {
+        buffer.drawText("Extended", this.x + 1, this.y + 2, RGBA.fromInts(255, 255, 255, 255))
+      },
+    },
+    children,
+  )
+}
+
+export function run(renderer: CliRenderer) {
+  renderer.start()
+  const mainGroup = new BoxRenderable(renderer, {
+    id: "main-group",
+  })
+  renderer.root.add(mainGroup)
+
+  // BaseBox example
+  mainGroup.add(ExtendedBaseBox({ width: 20, height: 10, position: "absolute", left: 55, top: 10, zIndex: 1000 }))
+
+  // Proxied VNode example
+  const tree = MyRenderable({ id: "demo-root" }, [
+    Box({ id: "child-1", width: 20, height: 3, border: true, marginBottom: 1 }, [Text({ content: "Hello" })]),
+    Box({ id: "child-2", width: 24, height: 3, border: true }, [Text({ content: "VNode world" })]),
+  ])
+  tree.backgroundColor = RGBA.fromInts(0, 155, 155, 100)
+
+  mainGroup.add(tree)
+
+  const input = LabeledInput({ id: "labeled-input", label: "Label:", placeholder: "Enter your text..." })
+  input.focus()
+  mainGroup.add(input)
+
+  //
+  // VNode delegated version
+  const instance1 = MyDelegateToVNodeRenderable({ id: "delegated-demo-root" }, [
+    Box({ id: "child-1", width: 20, height: 3, border: true, marginBottom: 1 }, [
+      Text({ content: "Hello delegated 1" }),
+    ]),
+    Box({ id: "child-2", width: 24, height: 3, border: true }, [Text({ content: "VNode world delegated 1" })]),
+  ])
+  instance1.backgroundColor = RGBA.fromInts(155, 0, 155, 100)
+
+  mainGroup.add(instance1)
+
+  //
+  // Instaced Delegated version
+  const instance = MyInstancedRenderable(renderer, { id: "demo-root" }, [
+    Box({ id: "child-1", width: 20, height: 3, border: true, marginBottom: 1 }, [Text({ content: "Hello 2" })]),
+    Box({ id: "child-2", width: 24, height: 3, border: true }, [Text({ content: "VNode world 2" })]),
+  ])
+
+  mainGroup.add(instance)
+
+  // Delegated to __box3, would otherwise end up in the top-level group!
+  instance.add(Box({ id: "child-3", width: 24, height: 3, border: true }, [Text({ content: "VNode world 3" })]))
+  instance.add(Button({ title: "Click me", onClick: () => console.log("clicked"), borderColor: "red" }))
+
+  //
+  // Renderable delegated version
+  const renderableInstance = MyDelegateToRenderableComponent(renderer, { id: "demo-root" }, [
+    Box({ id: "child-1", width: 20, height: 3, border: true, marginBottom: 1 }, [Text({ content: "Hello 4" })]),
+    Box({ id: "child-2", width: 24, height: 3, border: true }, [Text({ content: "VNode world 4" })]),
+  ])
+  mainGroup.add(renderableInstance)
+
+  // Delegated to __box4, would otherwise end up in the top-level group!
+  renderableInstance.add(Button({ title: "Click me too!", onClick: () => console.log("clicked"), borderColor: "red" }))
+
+  //
+  // Add animated VNode button
+  mainGroup.add(
+    VNodeButton({
+      title: "Animated VNode",
+      onClick: () => console.log("vnode 1 clicked"),
+      borderColor: RGBA.fromInts(0, 0, 255, 255),
+    }),
+  )
+  mainGroup.add(
+    VNodeButton({
+      title: "Same VNode, different props",
+      onClick: () => console.log("vnode 2 clicked"),
+      borderColor: RGBA.fromInts(255, 0, 255, 255),
+    }),
+  )
+
+  //
+  // Add button with class render function
+  mainGroup.add(
+    ButtonWithClassRender({
+      marginLeft: 1,
+      title: "ClassRender",
+      onClick: () => console.log("clicked"),
+      borderColor: RGBA.fromInts(0, 0, 255, 255),
+    }),
+  )
+
+  mainGroup.add(
+    Box({ flexDirection: "column", marginTop: 2 }, [
+      // Basic styles
+      Text({}, bold("Bold Text")),
+      Text({}, italic("Italic Text")),
+      Text({}, underline("Underlined Text")),
+      Text({}, dim("Dim Text")),
+
+      // Combined styles
+      Text({}, boldItalic("Bold and Italic")),
+      Text({}, boldUnderline("Bold and Underlined")),
+      Text({}, italicUnderline("Italic and Underlined")),
+
+      // Colors
+      Text({}, color("#ff6b6b", "Red Text")),
+      Text({}, bgColor("#4ecdc4", "Text with Background")),
+
+      // Custom styling
+      Text({}, styled(TextAttributes.BOLD | TextAttributes.UNDERLINE, "Custom Styled")),
+
+      // Stacked styles
+      Text({}, bold(underline("hello"), " world")),
+      Text({}, color("#ff6b6b", bold("Bold Red"), " normal")),
+      Text({}, italic(color("#4ecdc4", "Green Italic"), " normal again")),
+    ]),
+  )
+}
+
+export function destroy(renderer: CliRenderer) {
+  renderer.root.getRenderable("main-group")?.destroyRecursively()
+  renderer.requestRender()
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+  renderer.start()
+}
+
+function demoRenderFn(
+  props: { title: string; borderColor?: RGBA },
+  buffer: OptimizedBuffer,
+  deltaTime: number,
+  renderable: Renderable,
+) {
+  const x = renderable.x
+  const y = renderable.y
+  const width = renderable.width
+  const height = renderable.height
+
+  const borderColor = props.borderColor ?? RGBA.fromInts(255, 255, 0, 255)
+
+  // Draw a simple animated button with pulsing border
+  const timeInSeconds = Date.now() / 1000
+  const pulse = Math.sin(timeInSeconds * 4) * 0.5 + 0.5 // Fast pulsing, 0-1 oscillation
+
+  const pulsingBorderColor = RGBA.fromValues(
+    borderColor.r * (0.1 + pulse * 0.9),
+    borderColor.g * (0.1 + pulse * 0.9),
+    borderColor.b * (0.1 + pulse * 0.9),
+    borderColor.a,
+  )
+
+  const bgPulse = Math.sin(timeInSeconds * 2 + Math.PI / 2) * 0.4 + 0.6 // Different frequency and phase
+  const pulsingBgColor = RGBA.fromValues(
+    globalbgColor.r * bgPulse,
+    globalbgColor.g * bgPulse,
+    globalbgColor.b * bgPulse,
+    globalbgColor.a,
+  )
+
+  for (let row = 0; row < height; row++) {
+    for (let col = 0; col < width; col++) {
+      const isTop = row === 0
+      const isBottom = row === height - 1
+      const isLeft = col === 0
+      const isRight = col === width - 1
+      const isBorder = isTop || isBottom || isLeft || isRight
+
+      if (isBorder) {
+        buffer.setCell(x + col, y + row, "█", pulsingBorderColor, pulsingBgColor)
+      } else {
+        buffer.setCell(x + col, y + row, " ", textColor, pulsingBgColor)
+      }
+    }
+  }
+
+  const titlePulse = Math.sin(timeInSeconds * 6) * 0.5 + 0.5 // Even faster text pulse
+  const textScale = 0.3 + titlePulse * 0.7
+  const pulsingTextColor = RGBA.fromValues(
+    textColor.r * textScale,
+    textColor.g * textScale,
+    textColor.b * textScale,
+    textColor.a,
+  )
+
+  const titleX = x + Math.floor((width - props.title.length) / 2)
+  const titleY = y + Math.floor(height / 2)
+  if (titleY >= y && titleY < y + height) {
+    buffer.drawText(props.title, titleX, titleY, pulsingTextColor, transparent)
+  }
+}

package/src/examples/wide-grapheme-overlay-demo.ts

@@ -0,0 +1,280 @@
+import {
+  createCliRenderer,
+  FrameBufferRenderable,
+  RGBA,
+  TextRenderable,
+  BoxRenderable,
+  OptimizedBuffer,
+  t,
+  bold,
+  underline,
+  fg,
+  type MouseEvent,
+  type KeyEvent,
+} from "../index.js"
+import type { CliRenderer, RenderContext } from "../index.js"
+import { setupCommonDemoKeys } from "./lib/standalone-keys.js"
+
+const GRAPHEME_LINES: string[] = [
+  "東京都  北京市  서울시  大阪府  名古屋  横浜市  上海市",
+  "👨‍👩‍👧‍👦  👩🏽‍💻  🏳️‍🌈  🇺🇸  🇩🇪  🇯🇵  🇮🇳  家族  絵文字  🎉🎊🎈",
+  "こんにちは世界  你好世界  안녕하세요  สวัสดี  مرحبا",
+  "漢字テスト  中文测试  한국어  日本語  繁體中文  简体中文",
+  "🚀 Full-width: ＡＢＣＤＥＦ  Half: abcdef  ½ ⅞ ⅓",
+  "混合テキスト mixed text with 漢字 and emoji 🎯",
+]
+
+const HEADER_HEIGHT = 2
+
+let nextZIndex = 101
+let draggableBoxes: DraggableBox[] = []
+let scrimVisible = false
+let scrim: BoxRenderable | null = null
+let headerDisplay: TextRenderable | null = null
+
+class DraggableBox extends BoxRenderable {
+  private isDragging = false
+  private dragOffsetX = 0
+  private dragOffsetY = 0
+  private alphaPercentage: number
+
+  constructor(
+    ctx: RenderContext,
+    id: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    bg: RGBA,
+    zIndex: number,
+  ) {
+    super(ctx, {
+      id,
+      width,
+      height,
+      zIndex,
+      backgroundColor: bg,
+      position: "absolute",
+      left: x,
+      top: y,
+    })
+    this.alphaPercentage = Math.round(bg.a * 100)
+  }
+
+  protected renderSelf(buffer: OptimizedBuffer): void {
+    super.renderSelf(buffer)
+
+    const alphaText = `${this.alphaPercentage}%`
+    const centerX = this.x + Math.floor(this.width / 2 - alphaText.length / 2)
+    const centerY = this.y + Math.floor(this.height / 2)
+
+    buffer.drawText(alphaText, centerX, centerY, RGBA.fromInts(255, 255, 255, 220))
+  }
+
+  protected 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-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
+    }
+  }
+}
+
+class GraphemeBackground extends FrameBufferRenderable {
+  constructor(ctx: RenderContext, id: string, width: number, height: number) {
+    super(ctx, {
+      id,
+      width,
+      height,
+      position: "absolute",
+      left: 0,
+      top: HEADER_HEIGHT,
+      respectAlpha: false,
+    })
+
+    this.fillGraphemes(width, height)
+  }
+
+  private fillGraphemes(width: number, height: number) {
+    const fgColor = RGBA.fromInts(220, 220, 220, 255)
+    const bgColor = RGBA.fromInts(10, 14, 20, 255)
+    this.frameBuffer.clear(bgColor)
+    for (let y = 0; y < height; y++) {
+      const line = GRAPHEME_LINES[y % GRAPHEME_LINES.length]
+      this.frameBuffer.drawText(line, 2, y, fgColor, bgColor)
+    }
+  }
+}
+
+function toggleScrim(renderer: CliRenderer) {
+  scrimVisible = !scrimVisible
+  if (scrim) scrim.visible = scrimVisible
+  updateHeader()
+  renderer.requestRender()
+}
+
+function updateHeader() {
+  if (!headerDisplay) return
+  const dimLabel = scrimVisible ? "D: hide scrim" : "D: show scrim"
+  headerDisplay.content = t`${bold(fg("#00D4AA")("Wide Grapheme Overlay"))} ${fg("#A8A8B2")(`| ${dimLabel} | Drag boxes over CJK/emoji | Ctrl+C: quit`)}`
+}
+
+export function run(renderer: CliRenderer): void {
+  renderer.start()
+  renderer.setBackgroundColor("#0A0E14")
+
+  const root = new BoxRenderable(renderer, { id: "wg-overlay-root" })
+  renderer.root.add(root)
+
+  // Header row
+  headerDisplay = new TextRenderable(renderer, {
+    id: "wg-header",
+    height: HEADER_HEIGHT,
+    position: "absolute",
+    left: 2,
+    top: 0,
+    zIndex: 200,
+    selectable: false,
+  })
+  updateHeader()
+  root.add(headerDisplay)
+
+  // Background filled with repeating wide grapheme lines, below the header
+  const bgHeight = renderer.terminalHeight - HEADER_HEIGHT
+  const background = new GraphemeBackground(renderer, "wg-background", renderer.terminalWidth, bgHeight)
+  root.add(background)
+
+  // Full-screen dimming scrim (same as opencode dialog backdrop: RGBA(0,0,0,150))
+  scrim = new BoxRenderable(renderer, {
+    id: "wg-scrim",
+    position: "absolute",
+    left: 0,
+    top: HEADER_HEIGHT,
+    width: renderer.terminalWidth,
+    height: bgHeight,
+    backgroundColor: RGBA.fromInts(0, 0, 0, 150),
+    zIndex: 50,
+  })
+  scrim.visible = false
+  root.add(scrim)
+
+  // Draggable boxes at various alpha levels
+  const box1 = new DraggableBox(
+    renderer,
+    "wg-box-50",
+    4,
+    HEADER_HEIGHT + 1,
+    25,
+    8,
+    RGBA.fromValues(64 / 255, 176 / 255, 255 / 255, 128 / 255),
+    100,
+  )
+  root.add(box1)
+  draggableBoxes.push(box1)
+
+  const box2 = new DraggableBox(
+    renderer,
+    "wg-box-75",
+    20,
+    HEADER_HEIGHT + 5,
+    25,
+    8,
+    RGBA.fromValues(255 / 255, 107 / 255, 129 / 255, 192 / 255),
+    100,
+  )
+  root.add(box2)
+  draggableBoxes.push(box2)
+
+  const box3 = new DraggableBox(
+    renderer,
+    "wg-box-25",
+    40,
+    HEADER_HEIGHT + 3,
+    25,
+    8,
+    RGBA.fromValues(139 / 255, 69 / 255, 193 / 255, 64 / 255),
+    100,
+  )
+  root.add(box3)
+  draggableBoxes.push(box3)
+
+  const box4 = new DraggableBox(
+    renderer,
+    "wg-box-opaque",
+    60,
+    HEADER_HEIGHT + 7,
+    25,
+    8,
+    RGBA.fromValues(30 / 255, 30 / 255, 42 / 255, 1.0),
+    100,
+  )
+  root.add(box4)
+  draggableBoxes.push(box4)
+
+  renderer.keyInput.on("keypress", (key: KeyEvent) => {
+    if (key.name === "d") {
+      key.preventDefault()
+      toggleScrim(renderer)
+    }
+  })
+
+  renderer.on("resize", (width: number, height: number) => {
+    const h = height - HEADER_HEIGHT
+    background.width = width
+    background.height = h
+    if (scrim) {
+      scrim.width = width
+      scrim.height = h
+    }
+    renderer.requestRender()
+  })
+}
+
+export function destroy(renderer: CliRenderer): void {
+  renderer.clearFrameCallbacks()
+
+  for (const box of draggableBoxes) {
+    renderer.root.remove(box.id)
+  }
+  draggableBoxes = []
+  nextZIndex = 101
+  scrimVisible = false
+  scrim = null
+  headerDisplay = null
+
+  renderer.root.remove("wg-overlay-root")
+  renderer.setCursorPosition(0, 0, false)
+}
+
+if (import.meta.main) {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: true,
+  })
+
+  run(renderer)
+  setupCommonDemoKeys(renderer)
+  renderer.start()
+}

package/src/index.ts

@@ -0,0 +1,24 @@
+// Core exports without 3D dependencies
+export * from "./Renderable.js"
+export * from "./types.js"
+export * from "./utils.js"
+export * from "./buffer.js"
+export * from "./text-buffer.js"
+export * from "./text-buffer-view.js"
+export * from "./edit-buffer.js"
+export * from "./editor-view.js"
+export * from "./syntax-style.js"
+export * from "./post/effects.js"
+export * from "./post/filters.js"
+export * from "./post/matrices.js"
+export * from "./animation/Timeline.js"
+export * from "./lib/index.js"
+export * from "./renderer.js"
+export * from "./plugins/types.js"
+export * from "./plugins/registry.js"
+export * from "./plugins/core-slot.js"
+export * from "./NativeSpanFeed.js"
+export * from "./renderables/index.js"
+export * from "./zig.js"
+export * from "./console.js"
+export * as Yoga from "yoga-layout"