opentui

OpenTUI Competencia en plataformas

Habilidad consolidada para crear interfaces de usuario de terminales con OpenTUI. Utiliza los árboles de decisión que aparecen a continuación para encontrar el marco y los componentes adecuados y, a continuación, consulta las referencias detalladas.

Normas fundamentales

Sigue estas reglas en todo el código de OpenTUI:

1. Utiliza create-tui para los nuevos proyectos. Consulta las REFERENCE.md guías de inicio rápido del marco de trabajo.
2. create-tui Las opciones deben ir antes que los argumentos. bunx create-tui -t react my-app funciona, bunx create-tui my-app -t react NO funciona.
3. Nunca llames directamente a process.exit(). Utiliza renderer.destroy() (véase core/gotchas.md).
4. El estilo del texto requiere etiquetas anidadas en React/Solid. Utiliza elementos modificadores, no props (véase components/text-display.md).

Cómo utilizar esta habilidad

Estructura de los archivos de referencia

Las referencias al marco siguen un patrón de 5 archivos. Los conceptos transversales se tratan en guías de un solo archivo.

Cada marco de trabajo en ./references// contiene:

Los conceptos transversales en ./references// tienen REFERENCE.md como punto de partida.

Orden de lectura

1. Empieza por REFERENCE.md el marco que hayas elegido
2. A continuación, lee los archivos adicionales relevantes para tu tarea:
   • Creación de componentes -> api.md + components/.md
   • Configuración del proyecto -> configuration.md
   • Diseño/posicionamiento -> layout/REFERENCE.md
   • Manejo del teclado y las entradas -> keyboard/REFERENCE.md
   • Animaciones -> animation/REFERENCE.md
   • Solución de problemas -> gotchas.md + testing/REFERENCE.md

Rutas de ejemplo

./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 sobre el tiempo de ejecución

OpenTUI Se ejecuta en Bun y utiliza Zig para las compilaciones nativas. Consulta ./references/core/gotchas.md los requisitos de ejecución y las instrucciones de compilación.

Árboles de decisión rápidos

«¿Qué marco de trabajo debería utilizar?»

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)

«Necesito mostrar contenido»

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)

«Necesito que el usuario introduzca datos»

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

«Necesito diseño/posicionamiento»

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

«Necesito animaciones»

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

«Necesito gestionar la entrada de datos».

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)

«Necesito probar mi interfaz de usuario textual (TUI)»

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

«Necesito depurar o solucionar 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 resolución de problemas

• Limpieza del terminal, fallos -> core/gotchas.md
• El estilo del texto no se aplica -> components/text-display.md
• Foco de entrada/atajos -> keyboard/REFERENCE.md
• Desalineación del diseño -> layout/REFERENCE.md
• Instantáneas inestables -> testing/REFERENCE.md

Para conocer las diferencias en la nomenclatura de los componentes y los modificadores de texto, consulta components/REFERENCE.md.

Índice de productos

Marcos de trabajo

Conceptos transversales

Categorías de componentes

Recursos

Repositorio : https://github.com/anomalyco/opentui Documentación básica : https://github.com/anomalyco/ opentui /tree/main/packages/core/docs Ejemplos : https://github.com/anomalyco/ opentui /tree/main/packages/core/src/examples Lista de recursos destacados : https://github.com/msmps/awesome- opentui