@fairyhunter13/opentui-core 0.1.91 → 0.1.94

package/dev/thai-debug-test.ts

@@ -1,68 +0,0 @@
-#!/usr/bin/env bun
-import { TextRenderable, createCliRenderer } from "../src/index.js"
-import { ScrollBoxRenderable } from "../src/renderables/ScrollBox.js"
-async function main() {
-  const renderer = await createCliRenderer({ exitOnCtrlC: true })
-  console.log("capabilities:", renderer.capabilities)
-  const scrollBox = new ScrollBoxRenderable(renderer, {
-    id: "scroll-box",
-    border: true,
-    height: 20,
-    title: "Thai Render Debug (Up/Down to scroll, Ctrl+C to exit)",
-    titleAlignment: "center",
-  })
-  const thaiLorem = `ภาษาไทยเป็นภาษาที่มีความสวยงามและซับซ้อนมาก มีพยัญชนะ 44 ตัว สระ 32 รูป และวรรณยุกต์ 4 รูป
-มอญเป็นชนชาติที่มีอิทธิพลต่อภาษาไทยมาก คำว่า "มอ" เป็นพยัญชนะที่ใช้บ่อยในภาษาไทย
-ตัวอย่างคำที่มี มอ: มา มี มือ มอง มัว มอบ มวย มอม มอด มอก
-การเขียนภาษาไทยต้องใส่ใจเรื่องวรรณยุกต์ เช่น ม่า ม้า หม่า หม้า
-สระลอยและสระเปลี่ยนรูปทำให้ภาษาไทยมีความพิเศษ เช่น เมือง แมว ไม้ ใหม่
-คำผสมที่น่าสนใจ: มอมแมม มอดมอด มอมเมา มืดมอม มอมดำ
-ภาษาไทยมีระบบการเขียนที่ไม่เว้นวรรคระหว่างคำ ทำให้การอ่านต้องอาศัยความเข้าใจ
-ตัวอักษรไทยมีสามระดับ: บน กลาง ล่าง เช่น ก็ ปี่ ฎุ ฏู ญ ฐ ฑ
-วรรณยุกต์ไทยมี 5 เสียง: สามัญ เอก โท ตรี จัตวา
-ตัวอย่างเสียงวรรณยุกต์: มา ม่า ม้า หมา หม่า หม้า
-การสะกดคำในภาษาไทยมีกฎเกณฑ์ที่ซับซ้อน มีทั้งตัวสะกดมาตราแม่ ก กา และตัวสะกดไม่ตรงมาตรา
-คำยืมจากภาษาบาลีสันสกฤต: กรรม ธรรม สงฆ์ ศาสนา พระ มหา
-คำยืมจากภาษาเขมร: ถนน เสวย ขนม ตำรวจ ทหาร
-คำยืมจากภาษาจีน: ก๋วยเตี๋ยว เต้าหู้ บะหมี่ เกี๊ยว ซาลาเปา
-ภาษาไทยถิ่นมีหลายภาษา: ภาษาเหนือ ภาษาอีสาน ภาษาใต้ ภาษากลาง
-มอญกับไทยมีความสัมพันธ์ทางวัฒนธรรมมายาวนาน
-ตัวเลขไทย: ๐ ๑ ๒ ๓ ๔ ๕ ๖ ๗ ๘ ๙
-เครื่องหมายวรรคตอน: ฯ ๆ ฯลฯ « » ๏
-อักษรไทยมีต้นกำเนิดจากอักษรเขมร ซึ่งมาจากอักษรปัลลวะของอินเดียใต้
-พ่อขุนรามคำแหงมหาราชทรงประดิษฐ์อักษรไทยเมื่อ พ.ศ. 1826
-ภาษาไทยเป็นภาษาที่มีวรรณยุกต์ การออกเสียงผิดวรรณยุกต์ทำให้ความหมายเปลี่ยน
-ตัวอย่าง: ขาว (สีขาว) ข่าว (news) ข้าว (rice) เข้า (enter)
-มอเตอร์ไซค์ มอนิเตอร์ มอลต์ มอร์ฟีน เป็นคำทับศัพท์ที่มี มอ
-สำนวนไทยที่มี มอ: มอมเมา หมอมหมาม มืดมอม มอดไหม้
-คำกริยาที่มี มอ: มอง มอบ มอม มอด มอก
-คำนามที่มี มอ: มอญ มอด หมอ มอเตอร์
-การผันวรรณยุกต์ของ มอ: มอ ม่อ ม้อ หมอ หม่อ หม้อ
-ภาษาไทยมีคำควบกล้ำ: กร กล กว ขร ขล ขว คร คล คว
-ตัวอย่างคำควบกล้ำ: กราบ กลาง กวาง ครู คลอง ความ
-อักษรสูง กลาง ต่ำ มีผลต่อการผันวรรณยุกต์
-อักษรสูง: ข ฃ ฉ ฐ ถ ผ ฝ ศ ษ ส ห
-อักษรกลาง: ก จ ฎ ฏ ด ต บ ป อ
-อักษรต่ำ: ค ฅ ฆ ง ช ซ ฌ ญ ฑ ฒ ณ ท ธ น พ ฟ ภ ม ย ร ล ว ฬ ฮ`
-  const text = new TextRenderable(renderer, {
-    id: "thai-text",
-    content: thaiLorem,
-  })
-  scrollBox.add(text)
-  renderer.root.add(scrollBox)
-  renderer.keyInput.on("keypress", (event) => {
-    if (event.name === "down") scrollBox.scrollDown()
-    if (event.name === "up") scrollBox.scrollUp()
-  })
-  renderer.requestRender()
-
-  renderer.keyInput.on("keypress", (event) => {
-    if (event.name === "`") {
-      renderer.console.toggle()
-    }
-  })
-}
-main().catch((err) => {
-  console.error("Error:", err)
-  process.exit(1)
-})

package/docs/development.md

@@ -1,141 +0,0 @@
-# Development Guide
-
-## Prerequisites
-
-- [Bun](https://bun.sh) - JavaScript runtime and package manager
-- [Zig](https://ziglang.org/learn/getting-started/) - Required for building native modules
-
-## Setup
-
-```bash
-git clone https://github.com/anomalyco/opentui.git
-cd opentui
-bun install
-```
-
-## Building
-
-```bash
-bun run build
-```
-
-**Note:** Only needed when changing native Zig code. TypeScript changes don't require rebuilding.
-
-## Running Examples
-
-```bash
-cd packages/core
-bun run src/examples/index.ts
-```
-
-## Testing
-
-```bash
-# TypeScript tests
-cd packages/core
-bun test
-
-# Native tests
-bun run test:native
-
-# Filter native tests
-bun run test:native -Dtest-filter="test name"
-
-# Benchmarks
-bun run bench:native
-```
-
-## Local Development Linking
-
-Link your local OpenTUI to another project:
-
-```bash
-./scripts/link-opentui-dev.sh /path/to/your/project
-```
-
-**Options:**
-
-- `--react` - Also link `@fairyhunter13/opentui-react` and React dependencies
-- `--solid` - Also link `@fairyhunter13/opentui-solid` and SolidJS dependencies
-- `--dist` - Link built `dist` directories instead of source
-- `--copy` - Copy instead of symlink (requires `--dist`)
-- `--subdeps` - Find and link packages that depend on opentui (e.g., `opentui-spinner`)
-
-**Examples:**
-
-```bash
-# Link core only
-./scripts/link-opentui-dev.sh /path/to/your/project
-
-# Link core and solid with subdependency discovery
-./scripts/link-opentui-dev.sh /path/to/your/project --solid --subdeps
-
-# Link built artifacts
-./scripts/link-opentui-dev.sh /path/to/your/project --react --dist
-
-# Copy for Docker/Windows
-./scripts/link-opentui-dev.sh /path/to/your/project --dist --copy
-```
-
-The script automatically links:
-
-- Main packages: `@fairyhunter13/opentui-core`, `@fairyhunter13/opentui-solid`, `@fairyhunter13/opentui-react`
-- Peer dependencies: `yoga-layout`, `solid-js`, `react`, `react-dom`, `react-reconciler`
-- Subdependencies (with `--subdeps`): Packages like `opentui-spinner` that depend on opentui
-
-**Requirements:** Target project must have `node_modules` (run `bun install` first).
-
-## Debugging
-
-OpenTUI captures `console.log` output. Toggle the built-in console with backtick or use [Environment Variables](./env-vars.md) for debugging.
-
-## Terminal Compatibility
-
-### OSC 66 Artifacts on Older Terminals
-
-**Problem:** If you see weird artifacts containing "66" in your terminal when running OpenTUI applications, your terminal emulator doesn't support OSC 66 escape sequences (used for explicit character width detection).
-
-**Affected Terminals:**
-
-- GNOME Terminal
-- Konsole (older versions)
-- xterm (older versions)
-- Many VT100/VT220 emulators
-
-**Solution:** Disable OSC 66 queries by setting an environment variable:
-
-```bash
-export OPENTUI_FORCE_EXPLICIT_WIDTH=false
-```
-
-Or run your application with:
-
-```bash
-OPENTUI_FORCE_EXPLICIT_WIDTH=false your-app
-```
-
-**For Application Developers:**
-
-Set it in your code before creating the renderer:
-
-```typescript
-process.env.OPENTUI_FORCE_EXPLICIT_WIDTH = "false"
-
-const renderer = new CliRenderer()
-// ... rest of your app
-```
-
-Or add to your `.env` file:
-
-```bash
-OPENTUI_FORCE_EXPLICIT_WIDTH=false
-```
-
-**What This Does:**
-
-- Prevents OSC 66 detection queries from being sent
-- Disables the explicit width feature
-- Falls back to standard width calculation
-- No visual artifacts on unsupported terminals
-
-**Modern Terminals:** If your terminal supports OSC 66 (Kitty, Ghostty, WezTerm, Alacritty, iTerm2), you don't need this setting - they work correctly by default.

package/docs/env-vars.md

@@ -1,140 +0,0 @@
-# Environment Variables
-
-# Environment Variables
-
-## OTUI_TS_STYLE_WARN
-
-Enable warnings for missing syntax styles
-
-**Type:** `string`  
-**Default:** `false`
-
-## OTUI_TREE_SITTER_WORKER_PATH
-
-Path to the TreeSitter worker
-
-**Type:** `string`  
-**Default:** `""`
-
-## XDG_CONFIG_HOME
-
-Base directory for user-specific configuration files
-
-**Type:** `string`  
-**Default:** `""`
-
-## XDG_DATA_HOME
-
-Base directory for user-specific data files
-
-**Type:** `string`  
-**Default:** `""`
-
-## OTUI_DEBUG_FFI
-
-Enable debug logging for the FFI bindings.
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OTUI_SHOW_STATS
-
-Show the debug overlay at startup.
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OTUI_TRACE_FFI
-
-Enable tracing for the FFI bindings.
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OPENTUI_FORCE_WCWIDTH
-
-Use wcwidth for character width calculations
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OPENTUI_FORCE_UNICODE
-
-Force Mode 2026 Unicode support in terminal capabilities
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OPENTUI_GRAPHICS
-
-Enable Kitty graphics protocol detection
-
-**Type:** `boolean`  
-**Default:** `true`
-
-## OPENTUI_FORCE_NOZWJ
-
-Use no_zwj width method (Unicode without ZWJ joining)
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OPENTUI_FORCE_EXPLICIT_WIDTH
-
-Force explicit width capability in terminal to true or false. Set to "true" or "1" to enable, "false" or "0" to disable. When set to "false" or "0", also skips sending OSC 66 detection queries to prevent artifacts on older terminals (e.g., GNOME Terminal).
-
-**Type:** `string`
-**Values:** `"true"`, `"1"`, `"false"`, `"0"`
-
-## OTUI_USE_CONSOLE
-
-Whether to use the console. Will not capture console output if set to false.
-
-**Type:** `boolean`  
-**Default:** `true`
-
-## SHOW_CONSOLE
-
-Show the console at startup if set to true.
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OTUI_DUMP_CAPTURES
-
-Dump captured output when the renderer exits.
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OTUI_NO_NATIVE_RENDER
-
-Disable native rendering. This will not actually output ansi and is useful for debugging.
-
-**Type:** `boolean`  
-**Default:** `false`
-
-## OTUI_USE_ALTERNATE_SCREEN
-
-Whether to use the console. Will not capture console output if set to false.
-
-**Type:** `boolean`  
-**Default:** `true`
-
-## OTUI_OVERRIDE_STDOUT
-
-Override the stdout stream. This is useful for debugging.
-
-**Type:** `boolean`  
-**Default:** `true`
-
-## OTUI_DEBUG
-
-Enable debug mode to capture all raw input for debugging purposes.
-
-**Type:** `boolean`  
-**Default:** `false`
-
----
-
-_generated via packages/core/dev/print-env-vars.ts_

package/docs/getting-started.md

@@ -1,353 +0,0 @@
-# Getting Started with OpenTUI
-
-OpenTUI is a native terminal UI core written in Zig with TypeScript bindings. The native core exposes a C ABI and can be used from any language. OpenTUI powers OpenCode in production today and will also power terminal.shop. It is an extensible core with a focus on correctness, stability, and high performance. It provides a component-based architecture with flexible layout capabilities, allowing you to create complex terminal applications.
-
-## Core Concepts
-
-### Renderer
-
-The `CliRenderer` is the heart of OpenTUI. It manages the terminal output, handles input events, and orchestrates the rendering loop. Think of it as the canvas that draws your interface to the terminal. It can run in a "live" mode, when calling `renderer.start()`, which runs a loop capped at the specified target FPS. It also just works without calling `renderer.start()`, which will only re-render when the renderable tree or layout changes.
-
-By default, left-clicking auto-focuses the closest focusable renderable. Disable this with `createCliRenderer({ autoFocus: false })` if you need manual focus control.
-
-### Theme Mode
-
-OpenTUI can detect the terminal's preferred color scheme (dark or light) when the terminal supports DEC mode 2031 color scheme updates. Read the current mode via `renderer.themeMode` and subscribe to `theme_mode` to react to changes. Possible values are `"dark"`, `"light"`, or `null` when unsupported, and no events fire in the unsupported case.
-
-```typescript
-import { type ThemeMode } from "@fairyhunter13/opentui-core"
-
-const mode = renderer.themeMode
-
-renderer.on("theme_mode", (nextMode: ThemeMode) => {
-  console.log("Theme mode changed:", nextMode)
-})
-```
-
-### FrameBuffer (OptimizedBuffer)
-
-The `FrameBuffer` is a low-level rendering surface for custom graphics and complex visual effects. It is a 2D array of cells that can be drawn to using the `setCell`, `setCellWithAlphaBlending`, `drawText`, `fillRect`, and `drawFrameBuffer` methods. It is optimized for performance and memory usage. It allows for transparent cells and alpha blending, down to the viewport framebuffer.
-
-### Renderables
-
-Renderables are the building blocks of your UI - hierarchical objects that can be positioned, styled, and nested within each other. Each Renderable represents a visual element (like text, boxes, or input fields) and uses the Yoga layout engine for flexible positioning and sizing.
-
-### Constructs (Components)
-
-Constructs look just like React or Solid components, but are not render functions. You can think of them as constructors, a way to create new renderables by composing existing ones. They provide a more declarative way to build your UI. See a comparison on [this page](./renderables-vs-constructs.md).
-
-### Console
-
-OpenTUI includes a built-in console overlay that captures all `console.log`, `console.info`, `console.warn`, `console.error`, and `console.debug` calls. The console appears as a visual overlay that can be positioned at any edge of the terminal, with scrolling and focus management. It's particularly useful for debugging TUI applications without disrupting the main interface.
-
-## Basic Setup
-
-```typescript
-import { createCliRenderer, TextRenderable, Text } from "@fairyhunter13/opentui-core"
-
-const renderer = await createCliRenderer()
-
-// Raw Renderable
-const greeting = new TextRenderable(renderer, {
-  id: "greeting",
-  content: "Hello, OpenTUI!",
-  fg: "#00FF00",
-  position: "absolute",
-  left: 10,
-  top: 5,
-})
-
-renderer.root.add(greeting)
-
-// Construct/Component (VNode)
-const greeting2 = Text({
-  content: "Hello, OpenTUI!",
-  fg: "#00FF00",
-  position: "absolute",
-  left: 10,
-  top: 5,
-})
-
-renderer.root.add(greeting)
-```
-
-## Console
-
-When focused, you can use your arrow keys to scroll through the console. `renderer.console.toggle()` will toggle the console overlay, when open but not focused, it will focus the console. `+` and `-` will increase and decrease the size of the console.
-
-```typescript
-import { createCliRenderer, ConsolePosition } from "@fairyhunter13/opentui-core"
-
-const renderer = await createCliRenderer({
-  consoleOptions: {
-    position: ConsolePosition.BOTTOM,
-    sizePercent: 30,
-    colorInfo: "#00FFFF",
-    colorWarn: "#FFFF00",
-    colorError: "#FF0000",
-    startInDebugMode: false,
-  },
-})
-
-console.log("This appears in the overlay")
-console.error("Errors are color-coded red")
-console.warn("Warnings appear in yellow")
-
-renderer.console.toggle()
-```
-
-## Colors: RGBA
-
-OpenTUI uses the `RGBA` class for consistent color representation throughout the library. Colors are internally stored as normalized float values (0.0-1.0) for efficient processing, but the class provides convenient methods for working with different color formats.
-
-```typescript
-import { RGBA } from "@fairyhunter13/opentui-core"
-
-const redFromInts = RGBA.fromInts(255, 0, 0, 255) // RGB integers (0-255)
-const blueFromValues = RGBA.fromValues(0.0, 0.0, 1.0, 1.0) // Float values (0.0-1.0)
-const greenFromHex = RGBA.fromHex("#00FF00") // Hex strings
-const transparent = RGBA.fromValues(1.0, 1.0, 1.0, 0.5) // Semi-transparent white
-```
-
-The `parseColor()` utility function accepts both RGBA objects and color strings (hex, CSS color names, "transparent") for flexible color input throughout the API.
-
-## Keyboard
-
-OpenTUI provides a keyboard handler that parses terminal input and provides structured key events. Get the handler via `renderer.keyInput`, an EventEmitter that emits `keypress` and `paste` events with detailed key information.
-
-```typescript
-import { type KeyEvent } from "@fairyhunter13/opentui-core"
-
-const keyHandler = renderer.keyInput
-
-keyHandler.on("keypress", (key: KeyEvent) => {
-  console.log("Key name:", key.name)
-  console.log("Sequence:", key.sequence)
-  console.log("Ctrl pressed:", key.ctrl)
-  console.log("Shift pressed:", key.shift)
-  console.log("Alt pressed:", key.meta)
-  console.log("Option pressed:", key.option)
-
-  if (key.name === "escape") {
-    console.log("Escape pressed!")
-  } else if (key.ctrl && key.name === "c") {
-    console.log("Ctrl+C pressed!")
-  } else if (key.shift && key.name === "f1") {
-    console.log("Shift+F1 pressed!")
-  }
-})
-```
-
-## Available Renderables
-
-OpenTUI provides several primitive components that you can use to build your interfaces:
-
-### Text
-
-Display styled text content with support for colors, attributes, and text selection.
-
-```typescript
-import { TextRenderable, TextAttributes, t, bold, underline, fg } from "@fairyhunter13/opentui-core"
-
-const plainText = new TextRenderable(renderer, {
-  id: "plain-text",
-  content: "Important Message",
-  fg: "#FFFF00",
-  attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE, // bitwise OR to combine attributes
-  position: "absolute",
-  left: 5,
-  top: 2,
-})
-
-// You can also use the `t` template literal to create more complex styled text:
-const styledTextRenderable = new TextRenderable(renderer, {
-  id: "styled-text",
-  content: t`${bold("Important Message")} ${fg("#FF0000")(underline("Important Message"))}`,
-  position: "absolute",
-  left: 5,
-  top: 3,
-})
-```
-
-### Box
-
-A container component with borders, background colors, and layout capabilities. Perfect for creating panels, frames, and organized sections.
-
-```typescript
-import { BoxRenderable } from "@fairyhunter13/opentui-core"
-
-const panel = new BoxRenderable(renderer, {
-  id: "panel",
-  width: 30,
-  height: 10,
-  backgroundColor: "#333366",
-  borderStyle: "double",
-  borderColor: "#FFFFFF",
-  title: "Settings Panel",
-  titleAlignment: "center",
-  position: "absolute",
-  left: 10,
-  top: 5,
-})
-```
-
-### Input
-
-Text input field with cursor support, placeholder text, and focus states for user interaction.
-Has to be focused to receive input.
-
-```typescript
-import { InputRenderable, InputRenderableEvents } from "@fairyhunter13/opentui-core"
-
-const nameInput = new InputRenderable(renderer, {
-  id: "name-input",
-  width: 25,
-  placeholder: "Enter your name...",
-  focusedBackgroundColor: "#1a1a1a",
-  position: "absolute",
-  left: 10,
-  top: 8,
-})
-
-// The change event is currently emitted when pressing return or enter. (this will be fixed in the future)
-nameInput.on(InputRenderableEvents.CHANGE, (value) => {
-  console.log("Input changed:", value)
-})
-nameInput.focus()
-```
-
-### Select
-
-A list selection component for choosing from multiple options.
-Has to be focused to receive input. Default keybindings are `up/k` and `down/j` to navigate the list, `enter` to select.
-
-```typescript
-import { SelectRenderable, SelectRenderableEvents } from "@fairyhunter13/opentui-core"
-
-const menu = new SelectRenderable(renderer, {
-  id: "menu",
-  width: 30,
-  height: 8,
-  options: [
-    { name: "New File", description: "Create a new file" },
-    { name: "Open File", description: "Open an existing file" },
-    { name: "Save", description: "Save current file" },
-    { name: "Exit", description: "Exit the application" },
-  ],
-  position: "absolute",
-  left: 5,
-  top: 3,
-})
-
-menu.on(SelectRenderableEvents.ITEM_SELECTED, (index, option) => {
-  console.log("Selected:", option.name)
-})
-menu.focus()
-```
-
-### TabSelect
-
-Horizontal tab-based selection component with descriptions and scroll support.
-Has to be focused to receive input. Default keybindings are `left/[` and `right/]` to navigate the tabs, `enter` to select.
-
-```typescript
-import { TabSelectRenderable, TabSelectRenderableEvents } from "@fairyhunter13/opentui-core"
-
-const tabs = new TabSelectRenderable(renderer, {
-  id: "tabs",
-  width: 60,
-  options: [
-    { name: "Home", description: "Dashboard and overview" },
-    { name: "Files", description: "File management" },
-    { name: "Settings", description: "Application settings" },
-  ],
-  tabWidth: 20,
-  position: "absolute",
-  left: 2,
-  top: 1,
-})
-
-tabs.on(TabSelectRenderableEvents.ITEM_SELECTED, (index, option) => {
-  console.log("Selected:", option.name)
-})
-
-tabs.focus()
-```
-
-### ASCIIFont
-
-Display text using ASCII art fonts with multiple font styles available.
-
-```typescript
-import { ASCIIFontRenderable, RGBA } from "@fairyhunter13/opentui-core"
-
-const title = new ASCIIFontRenderable(renderer, {
-  id: "title",
-  text: "OPENTUI",
-  font: "tiny",
-  color: RGBA.fromInts(255, 255, 255, 255),
-  position: "absolute",
-  left: 10,
-  top: 2,
-})
-```
-
-### FrameBuffer
-
-A low-level rendering surface for custom graphics and complex visual effects.
-
-```typescript
-import { FrameBufferRenderable, RGBA } from "@fairyhunter13/opentui-core"
-
-const canvas = new FrameBufferRenderable(renderer, {
-  id: "canvas",
-  width: 50,
-  height: 20,
-  position: "absolute",
-  left: 5,
-  top: 5,
-})
-
-// Custom rendering in the frame buffer
-canvas.frameBuffer.fillRect(10, 5, 20, 8, RGBA.fromHex("#FF0000"))
-canvas.frameBuffer.drawText("Custom Graphics", 12, 7, RGBA.fromHex("#FFFFFF"))
-```
-
-## Layout System
-
-OpenTUI uses the Yoga layout engine, providing CSS Flexbox-like capabilities for responsive layouts:
-
-```typescript
-import { BoxRenderable } from "@fairyhunter13/opentui-core"
-
-const container = new BoxRenderable(renderer, {
-  id: "container",
-  flexDirection: "row",
-  justifyContent: "space-between",
-  alignItems: "center",
-  width: "100%",
-  height: 10,
-})
-
-const leftPanel = new BoxRenderable(renderer, {
-  id: "left",
-  flexGrow: 1,
-  height: 10,
-  backgroundColor: "#444",
-})
-
-const rightPanel = new BoxRenderable(renderer, {
-  id: "right",
-  width: 20,
-  height: 10,
-  backgroundColor: "#666",
-})
-
-container.add(leftPanel)
-container.add(rightPanel)
-```
-
-## Next Steps
-
-- Explore the [examples](../src/examples) directory for more complex use cases
-- Check out the React and Solid integrations for declarative UI development