opentui

OpenTUI Habilidade em plataformas

Conjunto de habilidades para a criação de interfaces de usuário de terminais com o OpenTUI. Use as árvores de decisão abaixo para encontrar a estrutura e os componentes adequados e, em seguida, acesse as referências detalhadas.

Regras essenciais

Siga estas regras em todo o código do OpenTUI:

1. Use o create-tui para novos projetos. Consulte os REFERENCE.md guias de introdução rápida.
2. create-tui As opções devem vir antes dos argumentos. bunx create-tui -t react my-app funciona, bunx create-tui my-app -t react NÃO funciona.
3. Nunca chame process.exit() diretamente. Use renderer.destroy() (veja core/gotchas.md).
4. A formatação de texto requer tags aninhadas no React/Solid. Use elementos modificadores, não props (veja components/text-display.md).

Como usar esta habilidade

Estrutura do arquivo de referência

As referências à estrutura seguem um padrão de 5 arquivos. Conceitos transversais são guias de um único arquivo.

Cada framework em ./references// contém:

Conceitos transversais em ./references// têm REFERENCE.md como ponto de entrada.

Ordem de leitura

1. Comece com REFERENCE.md pela estrutura escolhida
2. Em seguida, leia os arquivos adicionais relevantes para sua tarefa:
   • Criação de componentes -> api.md + components/.md
   • Configurar o projeto -> configuration.md
   • Layout/posicionamento -> layout/REFERENCE.md
   • Manipulação do teclado/entrada -> keyboard/REFERENCE.md
   • Animações -> animation/REFERENCE.md
   • Solução de problemas -> gotchas.md + testing/REFERENCE.md

Caminhos de exemplo

./references/react/REFERENCE.md           # Start here for React
./references/react/api.md              # React components and hooks
./references/solid/configuration.md    # Solid project setup
./references/components/inputs.md      # Input, Textarea, Select docs
./references/core/gotchas.md           # Core debugging tips

Notas de execução

OpenTUI É executado no Bun e usa o Zig para compilações nativas. Leia ./references/core/gotchas.md os requisitos de execução e as orientações de compilação.

Árvores de decisão rápidas

“Qual framework devo usar?”

Which framework?
├─ I want full control, maximum performance, no framework overhead
│  └─ core/ (imperative API)
├─ I know React, want familiar component patterns
│  └─ react/ (React reconciler)
├─ I want fine-grained reactivity, optimal re-renders
│  └─ solid/ (Solid reconciler)
└─ I'm building a library/framework on top of OpenTUI
   └─ core/ (imperative API)

“Preciso exibir conteúdo”

Display content?
├─ Plain or styled text -> components/text-display.md
├─ Container with borders/background -> components/containers.md
├─ Scrollable content area -> components/containers.md (scrollbox)
├─ ASCII art banner/title -> components/text-display.md (ascii-font)
├─ Data table with borders/wrapping -> components/code-diff.md (TextTable)
├─ Code with syntax highlighting -> components/code-diff.md
├─ Diff viewer (unified/split) -> components/code-diff.md
├─ Line numbers with diagnostics -> components/code-diff.md
└─ Markdown content (streaming) -> components/code-diff.md (markdown)

“Preciso de entrada do usuário”

User input?
├─ Single-line text field -> components/inputs.md (input)
├─ Multi-line text editor -> components/inputs.md (textarea)
├─ Select from a list (vertical) -> components/inputs.md (select)
├─ Tab-based selection (horizontal) -> components/inputs.md (tab-select)
└─ Custom keyboard shortcuts -> keyboard/REFERENCE.md

“Preciso de layout/posicionamento”

Layout?
├─ Flexbox-style layouts (row, column, wrap) -> layout/REFERENCE.md
├─ Absolute positioning -> layout/patterns.md
├─ Responsive to terminal size -> layout/patterns.md
├─ Centering content -> layout/patterns.md
└─ Complex nested layouts -> layout/patterns.md

“Preciso de animações”

Animations?
├─ Timeline-based animations -> animation/REFERENCE.md
├─ Easing functions -> animation/REFERENCE.md
├─ Property transitions -> animation/REFERENCE.md
└─ Looping animations -> animation/REFERENCE.md

"Preciso processar entradas"

Input handling?
├─ Keyboard events (keypress, release) -> keyboard/REFERENCE.md
├─ Focus management -> keyboard/REFERENCE.md
├─ Paste events -> keyboard/REFERENCE.md
├─ Mouse events -> components/containers.md
├─ Text selection & copy-on-select -> keyboard/REFERENCE.md (selection)
└─ Clipboard (OSC 52) -> keyboard/REFERENCE.md (clipboard)

"Preciso testar minha TUI"

Testing?
├─ Snapshot testing -> testing/REFERENCE.md
├─ Interaction testing -> testing/REFERENCE.md
├─ Test renderer setup -> testing/REFERENCE.md
└─ Debugging tests -> testing/REFERENCE.md

"Preciso depurar/resolver problemas"

Troubleshooting?
├─ Runtime errors, crashes -> /gotchas.md
├─ Layout issues -> layout/REFERENCE.md + layout/patterns.md
├─ Input/focus issues -> keyboard/REFERENCE.md
└─ Repro + regression tests -> testing/REFERENCE.md

Índice de resolução de problemas

• Limpeza do terminal, travamentos -> core/gotchas.md
• Estilo do texto não está sendo aplicado -> components/text-display.md
• Foco de entrada/atalhos -> keyboard/REFERENCE.md
• Desalinhamento do layout -> layout/REFERENCE.md
• Instantâneos instáveis -> testing/REFERENCE.md

Para diferenças na nomenclatura de componentes e modificadores de texto, consulte components/REFERENCE.md.

Índice de Produtos

Frameworks

Conceitos Transversais

Categorias de componentes

Recursos

Repositório : https://github.com/anomalyco/opentui Documentação do núcleo : https://github.com/anomalyco/ opentui /tree/main/packages/core/docs Exemplos : https://github.com/anomalyco/ opentui /tree/main/packages/core/src/examples Lista do Awesome : https://github.com/msmps/awesome- opentui