@fairyhunter13/opentui-core 0.1.114 → 0.1.116

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

@@ -1,404 +0,0 @@
-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

@@ -1,280 +0,0 @@
-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

@@ -1,24 +0,0 @@
-// 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"