1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
//! Macro-based DSL for building TUI components
//!
//! This module provides the `tui!` macro for composing termtui components
//! with an ergonomic, declarative syntax.
//!
//! # Overview
//!
//! The `tui!` macro reduces boilerplate by 50-70% compared to the builder pattern
//! while maintaining type safety and readability.
//!
//! # Syntax
//!
//! The macro uses a clean syntax:
//! - Containers: `container(props) [children]`
//! - Text: `text("content", props)`
//! - Components use parentheses `()` for properties
//! - Containers use brackets `[]` for children
//! - Event handlers use the `@` prefix
//!
//! # Quick Example
//!
//! ```ignore
//! use termtui::prelude::*;
//!
//! fn view(&self, ctx: &Context) -> Node {
//! tui! {
//! container(bg: black, pad: 2) [
//! text("Hello World", color: white, bold),
//! spacer(1),
//!
//! container(bg: blue, w: 50) [
//! text("Click me!", color: white),
//! @click: ctx.handler(Msg::Clicked),
//! ]
//! ]
//! }
//! }
//! ```
//!
//! # Color Support
//!
//! Colors can be specified in multiple ways:
//! - **Named**: `red`, `blue`, `green`, `white`, `black`, etc.
//! - **Bright variants**: `bright_red`, `bright_blue`, etc.
//! - **Hex**: `"#FF5733"`, `"#FFF"`
//! - **Conditional**: `(if dark { white } else { black })`
//!
//! # Property Shortcuts
//!
//! Common properties have short aliases:
//! - `bg` → background color
//! - `dir` → direction (vertical/v, horizontal/h)
//! - `pad` → padding
//! - `w` → width
//! - `h` → height
//! - `w_pct` → width percentage
//! - `h_pct` → height percentage
//!
//! # Event Handlers
//!
//! Events use the `@` prefix:
//! - `@click: handler` - Mouse click
//! - `@char('q'): handler` - Character key
//! - `@key(Enter): handler` - Special key
//! - `@char_global('q'): handler` - Global character
//! - `@key_global(Esc): handler` - Global key
//! - `@focus: handler` - Focus gained
//! - `@blur: handler` - Focus lost