zig version
# 预期输出：0.13.0 或更高版本

# 使用 Bun 创建 SolidJS 项目
bun create tui

# 创建过程中会有交互式提示：
# ? Select a framework: (Use arrow keys)
#   > Solid.js
#     React

# ? Enter a project name: my-first-tui

# 然后 Bun 会自动：
# 1. 创建项目目录结构
# 2. 安装所有依赖
# 3. 配置好 tsconfig.json 的 jsxImportSource
# 4. 配置好 bunfig.toml 的 preload

mkdir my-tui && cd my-tui
bun init -y
bun add solid-js @opentui/solid

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@opentui/solid",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true
  }
}

[install]
preload = ["@opentui/solid/preload"]

import { render } from "@opentui/solid"

const App = () => <text>Hello, OpenTUI World!</text>

render(App)

bun index.tsx

const Greeting = () => (
  <text>Hello, OpenTUI!</text>
)

const StyledText = () => (
  <text style={{ fg: "cyan", bg: "black" }}>
    Cyan text on black background
  </text>
)

const BasicBox = () => (
  <box
    width={40}
    height={10}
    border="single"
    padding={1}
    flexDirection="row"
    justifyContent="center"
    alignItems="center"
  >
    <text>Hello from a box!</text>
  </box>
)

const FlexLayout = () => (
  <box flexDirection="row" padding={1}>
    <box width={10} border="single">
      <text>Left</text>
    </box>
    <box flexGrow={1} border="double">
      <text>Center (grows)</text>
    </box>
    <box width={10} border="single">
      <text>Right</text>
    </box>
  </box>
)

const ScrollDemo = () => {
  const items = Array.from({ length: 50 }, (_, i) => `Item ${i + 1}`)

  return (
    <scrollbox width={30} height={15} border="single">
      {items.map((item) => (
        <text>{item}</text>
      ))}
    </scrollbox>
  )
}

const ASCIITitle = () => (
  <box border="double">
    <ascii_font value="OPEN" font="block" />
  </box>
)

const TextModifiersDemo = () => (
  <text>
    <b>Bold text</b>
    {" | "}
    <i>Italic text</i>
    {" | "}
    <u>Underlined text</u>
    <br />
    <a href="https://opentui.com">Clickable link (OSC 8)</a>
  </text>
)

const InputDemo = () => {
  const [value, setValue] = createSignal("")

  return (
    <box border="single" padding={1}>
      <text>Type something: {value()}</text>
      <input
        value={value()}
        onInput={(v) => setValue(v)}
        placeholder="Enter text..."
      />
    </box>
  )
}

const TextareaDemo = () => {
  const [content, setContent] = createSignal("")

  return (
    <box border="single">
      <textarea
        value={content()}
        onInput={(v) => setContent(v)}
        width={50}
        height={10}
        placeholder="Multi-line input..."
      />
    </box>
  )
}

const SelectDemo = () => {
  const options = ["Option A", "Option B", "Option C"]
  const [selected, setSelected] = createSignal(0)

  return (
    <box border="single" padding={1}>
      <text>Selected: {options[selected()]}</text>
      <select
        options={options}
        selectedIndex={selected()}
        onSelect={(index) => setSelected(index)}
      />
    </box>
  )
}

const TabsDemo = () => {
  const tabs = ["Home", "Settings", "Profile"]
  const [activeTab, setActiveTab] = createSignal(0)

  return (
    <tab_select
      tabs={tabs}
      activeIndex={activeTab()}
      onSelect={(index) => setActiveTab(index)}
    />
  )
}

const CodeDemo = () => (
  <code
    language="typescript"
    code={`const greet = (name: string) => {
  return \`Hello, \${name}!\`
}`}
  />
)

const DiffDemo = () => (
  <diff
    language="typescript"
    oldCode={`const a = 1
const b = 2`}
    newCode={`const a = 1
const c = 3`}
    mode="unified"
  />
)

const ControlledInput = () => {
  const [query, setQuery] = createSignal("")
  const [results, setResults] = createSignal<string[]>([])

  const handleSearch = () => {
    const q = query()
    setResults(
      q.length > 0
        ? [\`Result for "\${q}" #1\`, \`Result for "\${q}" #2\`]
        : []
    )
  }

  return (
    <box border="single" padding={1}>
      <text>Search:</text>
      <input
        value={query()}
        onInput={(v) => setQuery(v)}
        onSubmit={handleSearch}
      />
      <box marginTop={1}>
        {results().map((r) => (
          <text>&gt; {r}</text>
        ))}
      </box>
    </box>
  )
}

const WithEffect = () => {
  const [count, setCount] = createSignal(0)

  createEffect(() => {
    console.log(\`Count changed to: \${count()}\`)
  })

  return (
    <box border="single">
      <text>Count: {count()}</text>
      <button onClick={() => setCount((c) => c + 1)}>
        <text>+1</text>
      </button>
    </box>
  )
}

const ControlFlowDemo = () => {
  const [mode, setMode] = createSignal<"view" | "edit">("view")
  const [data, setData] = createSignal({ name: "Alice", age: 30 })

  return (
    <box border="single" padding={1}>
      <Show when={mode() === "view"}>
        <box>
          <text>Name: {data().name}</text>
          <text>Age: {data().age}</text>
        </box>
      </Show>

      <Show when={mode() === "edit"}>
        <box>
          <input
            value={data().name}
            onInput={(v) => setData({ ...data(), name: v })}
          />
        </box>
      </Show>

      <button onClick={() => setMode(mode() === "view" ? "edit" : "view")}>
        <text>{mode() === "view" ? "Edit" : "Save"}</text>
      </button>

      <For each={[1, 2, 3]}>
        {(n) => <text>Item #{n}</text>}
      </For>
    </box>
  )
}

const MemoDemo = () => {
  const [items, setItems] = createSignal<number[]>([1, 2, 3, 4, 5])
  const [filter, setFilter] = createSignal("even")

  const filteredItems = createMemo(() => {
    return items().filter((n) =>
      filter() === "even" ? n % 2 === 0 : n % 2 !== 0
    )
  })

  return (
    <box border="single">
      <text>Filter: {filter()}</text>
      <text>Numbers: {filteredItems().join(", ")}</text>
      <button onClick={() => setFilter(filter() === "even" ? "odd" : "even")}>
        <text>Toggle Filter</text>
      </button>
    </box>
  )
}

import { useRenderer } from "@opentui/solid"

const Demo = () => {
  const renderer = useRenderer()
  renderer.setBackgroundColor("#1a1a2e")

  return <box><text>Hello</text></box>
}

import { useTerminalDimensions } from "@opentui/solid"

const FullScreenBox = () => {
  const [width, height] = useTerminalDimensions()

  return (
    <box width={width()} height={height()} border="double">
      <text>Terminal: {width()}x{height()}</text>
    </box>
  )
}

import { useKeyboard } from "@opentui/solid"

const KeyboardDemo = () => {
  const [log, setLog] = createSignal<string[]>([])

  useKeyboard((event) => {
    if (event.key === "q" && event.ctrl) {
      process.exit(0)
    }
    setLog((prev) => [...prev.slice(-9), \`Key: \${event.key}\`])
  })

  return (
    <box border="single" height={12}>
      <For each={log()}>
        {(entry) => <text>{entry}</text>}
      </For>
    </box>
  )
}

interface KeyboardEvent {
  key: string          // 按键标识："a", "Enter", "ArrowUp", "Escape"
  ctrl: boolean        // Ctrl 键是否按下
  shift: boolean       // Shift 键是否按下
  alt: boolean         // Alt 键是否按下
  meta: boolean        // Meta (Cmd) 键是否按下
  code: string         // 物理键码
}

const PasteDemo = () => {
  const [pasted, setPasted] = createSignal("")

  usePaste((text) => {
    setPasted(text)
  })

  return (
    <box border="single">
      <text>Pasted: {pasted()}</text>
      <text>(Ctrl+Shift+V to paste)</text>
    </box>
  )
}

import { onResize, useTerminalDimensions } from "@opentui/solid"

const ResizeDemo = () => {
  const [width, height] = useTerminalDimensions()

  onResize((dims) => {
    console.log(\`Resized to \${dims.width}x\${dims.height}\`)
  })

  return <text>Size: {width()}x{height()}</text>
}

import { useTimeline } from "@opentui/solid"

const AnimationDemo = () => {
  const [x, setX] = createSignal(0)

  useTimeline(({ frame, deltaTime }) => {
    setX((prev) => (prev + 1) % 40)
  })

  return (
    <box height={3}>
      <text>{" ".repeat(x())}●</text>
    </box>
  )
}

import { Portal } from "@opentui/solid"

const Modal = () => {
  const [visible, setVisible] = createSignal(false)

  return (
    <>
      <button onClick={() => setVisible(true)}>
        <text>Open Modal</text>
      </button>

      <Show when={visible()}>
        <Portal mount={useRenderer().root}>
          <box border="double" padding={2} style={{ bg: "white", fg: "black" }}>
            <text>This is a modal overlay!</text>
            <button onClick={() => setVisible(false)}>
              <text>Close</text>
            </button>
          </box>
        </Portal>
      </Show>
    </>
  )
}

import { Dynamic } from "@opentui/solid"

const DynamicDemo = () => {
  const [componentType, setComponentType] = createSignal("box")

  return (
    <Dynamic component={componentType()} border="single">
      <text>Dynamic component content</text>
    </Dynamic>
  )
}

export interface Message {
  id: string
  role: "user" | "assistant"
  content: string
  timestamp: number
}

export interface Session {
  id: string
  title: string
  messages: Message[]
  createdAt: number
}

import { createSignal, createMemo } from "solid-js"

export function useChatSession() {
  const [sessions, setSessions] = createSignal<Session[]>([
    { id: "1", title: "New Chat", messages: [], createdAt: Date.now() },
  ])
  const [activeSessionId, setActiveSessionId] = createSignal("1")

  const activeSession = createMemo(() =>
    sessions().find((s) => s.id === activeSessionId()) ?? sessions()[0]
  )

  const addMessage = (role: "user" | "assistant", content: string) => {
    const newMessage: Message = {
      id: crypto.randomUUID(),
      role,
      content,
      timestamp: Date.now(),
    }
    setSessions((prev) =>
      prev.map((s) =>
        s.id === activeSessionId()
          ? { ...s, messages: [...s.messages, newMessage] }
          : s
      )
    )
  }

  const createSession = () => {
    const newSession: Session = {
      id: crypto.randomUUID(),
      title: \`Chat \${sessions().length + 1}\`,
      messages: [],
      createdAt: Date.now(),
    }
    setSessions((prev) => [...prev, newSession])
    setActiveSessionId(newSession.id)
  }

  return {
    sessions,
    activeSession,
    activeSessionId,
    setActiveSessionId,
    addMessage,
    createSession,
  }
}

import { TextAttributes } from "@opentui/core"

interface ChatMessageProps {
  role: "user" | "assistant"
  content: string
}

export function ChatMessage(props: ChatMessageProps) {
  const isUser = () => props.role === "user"

  return (
    <box marginTop={1} paddingLeft={isUser() ? 0 : 2} flexDirection="row">
      <text
        style={{
          fg: isUser() ? "cyan" : "green",
          attributes: TextAttributes.BOLD,
        }}
      >
        {isUser() ? "❯ " : "◀ "}
      </text>
      <box flexGrow={1}>
        <text style={{ fg: isUser() ? "white" : "#e0e0e0" }}>
          {props.content}
        </text>
      </box>
    </box>
  )
}

import { createSignal, Show } from "solid-js"

interface ChatInputProps {
  onSend: (message: string) => void
  disabled?: boolean
}

export function ChatInput(props: ChatInputProps) {
  const [value, setValue] = createSignal("")
  const [history, setHistory] = createSignal<string[]>([])
  const [historyIndex, setHistoryIndex] = createSignal(-1)

  const handleSubmit = () => {
    const msg = value().trim()
    if (!msg || props.disabled) return
    props.onSend(msg)
    setHistory((prev) => [msg, ...prev.slice(0, 49)])
    setHistoryIndex(-1)
    setValue("")
  }

  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === "ArrowUp") {
      const nextIndex = Math.min(historyIndex() + 1, history().length - 1)
      setHistoryIndex(nextIndex)
      setValue(history()[nextIndex] ?? "")
    } else if (event.key === "ArrowDown") {
      const nextIndex = Math.max(historyIndex() - 1, -1)
      setHistoryIndex(nextIndex)
      setValue(nextIndex === -1 ? "" : history()[nextIndex] ?? "")
    }
  }

  return (
    <box border="single" padding={1} flexDirection="column">
      <Show when={!props.disabled}>
        <textarea
          value={value()}
          onInput={(v) => setValue(v)}
          onKeyDown={handleKeyDown}
          width={60}
          height={3}
          placeholder="Type your message..."
        />
        <box marginTop={1} flexDirection="row" justifyContent="flex-end">
          <text style={{ fg: "#888" }}>{value().length} chars</text>
          <box width={2} />
          <button onClick={handleSubmit} style={{ fg: value().trim() ? "green" : "#555" }}>
            <text>[ Send ]</text>
          </button>
        </box>
      </Show>

      <Show when={props.disabled}>
        <text style={{ fg: "#888" }}>Waiting for response...</text>
      </Show>
    </box>
  )
}

import { createSignal, Show, For } from "solid-js"
import { useKeyboard } from "@opentui/solid"
import { useChatSession } from "./hooks/useChatSession"
import { ChatMessage } from "./components/ChatMessage"
import { ChatInput } from "./components/ChatInput"

export function App() {
  const { sessions, activeSession, activeSessionId, setActiveSessionId, addMessage, createSession } = useChatSession()
  const [connected, setConnected] = createSignal(true)
  const [tokenCount, setTokenCount] = createSignal(0)
  const [streaming, setStreaming] = createSignal(false)
  const [model] = createSignal("claude-sonnet-4")

  useKeyboard((event) => {
    if (event.ctrl && event.key === "n") createSession()
  })

  const handleSend = async (message: string) => {
    addMessage("user", message)
    setStreaming(true)
    const response = \`Simulated AI response to: "\${message}"\`
    await new Promise((r) => setTimeout(r, 500))
    addMessage("assistant", response)
    setTokenCount((prev) => prev + message.length + response.length)
    setStreaming(false)
  }

  return (
    <box flexDirection="column" width={90} height={30}>
      <box flexGrow={1} flexDirection="row">
        {/* 侧边栏 */}
        <box width={20} border="single" flexDirection="column">
          <box paddingX={1} style={{ bg: "#2d2d44", fg: "white" }}>
            <text>Sessions</text>
          </box>
          <box paddingX={1} paddingY={1} onClick={createSession}>
            <text style={{ fg: "yellow" }}>+ New Chat</text>
          </box>
          <scrollbox flexGrow={1}>
            <For each={sessions()}>
              {(session) => (
                <box
                  paddingX={1} paddingY={1}
                  style={{
                    fg: session.id === activeSessionId() ? "white" : "#888",
                    bg: session.id === activeSessionId() ? "#3d3d5c" : "transparent",
                  }}
                  onClick={() => setActiveSessionId(session.id)}
                >
                  <text>{session.title.slice(0, 18)}</text>
                </box>
              )}
            </For>
          </scrollbox>
        </box>

        {/* 聊天区 */}
        <box flexGrow={1} border="single" marginLeft={1} flexDirection="column">
          <scrollbox flexGrow={1} padding={1}>
            <Show when={activeSession().messages.length > 0} fallback={
              <text style={{ fg: "#888" }}>No messages yet. Start a conversation!</text>
            }>
              <For each={activeSession().messages}>
                {(msg) => <ChatMessage role={msg.role} content={msg.content} />}
              </For>
            </Show>
          </scrollbox>
          <ChatInput onSend={handleSend} disabled={streaming()} />
        </box>
      </box>

      {/* 状态栏 */}
      <box height={1} style={{ bg: "#1a1a2e", fg: "#888" }}>
        <text>
          <span style={{ fg: connected() ? "green" : "red" }}>{connected() ? "●" : "○"}</span>
          {" "}{model()}{" | "}Tokens: {tokenCount().toLocaleString()}{" | "}
          <span style={{ fg: streaming() ? "yellow" : "#555" }}>
            {streaming() ? "◐ Streaming" : "● Ready"}
          </span>
        </text>
      </box>
    </box>
  )
}

import { render } from "@opentui/solid"
import { ConsolePosition } from "@opentui/core"
import { App } from "./App"

render(App, {
  targetFps: 60,
  exitOnCtrlC: true,
  consoleOptions: {
    position: ConsolePosition.BOTTOM,
    maxStoredLogs: 1000,
    sizePercent: 30,
  },
})

import { extend } from "@opentui/solid"
import { BoxRenderable } from "@opentui/core"

class ProgressBarRenderable extends BoxRenderable {
  private _progress: number = 0
  constructor(options: any) {
    super(options)
    this.updateProgress(options.progress ?? 0)
  }
  updateProgress(progress: number) {
    this._progress = Math.max(0, Math.min(1, progress))
  }
}

extend({ progressbar: ProgressBarRenderable })

const ProgressDemo = () => {
  const [progress, setProgress] = createSignal(0)
  return (
    <box>
      <text>Uploading... {Math.round(progress() * 100)}%</text>
      <progressbar width={40} height={1} progress={progress()} />
    </box>
  )
}

const VirtualizedList = () => {
  const [scrollTop, setScrollTop] = createSignal(0)
  const [itemHeight] = createSignal(3)
  const allItems = createSignal(Array.from({ length: 1000 }, (_, i) => \`Item \${i}\`))

  const visibleItems = createMemo(() => {
    const start = Math.floor(scrollTop() / itemHeight())
    return allItems().slice(start, start + 15)
  })

  return (
    <scrollbox height={20} onScroll={(info) => setScrollTop(info.scrollTop)}>
      <For each={visibleItems()}>
        {(item) => <text>{item}</text>}
      </For>
    </scrollbox>
  )
}

import { testRender } from "@opentui/solid"

test("App renders correctly", async () => {
  const { root } = await testRender(() => <App />, {
    width: 80,
    height: 24,
  })

  expect(root.children).toMatchSnapshot()
})

import solidPlugin from "@opentui/solid/bun-plugin"

await Bun.build({
  entrypoints: ["./index.tsx"],
  target: "bun",
  outdir: "./build",
  plugins: [solidPlugin],
  compile: {
    target: "bun-darwin-arm64",
    outfile: "my-tui-macos",
  },
})

git clone https://github.com/anomalyco/opentui.git
cd opentui
bun install
cd packages/solid && bun run build
bun test