diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 342c640..519f76a 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -52,6 +52,6 @@ sublime_fuzzy = "0.7"
 similar = { version = "2", features = ["inline"] }
 
 [dev-dependencies]
-insta = "1.45"
+insta = "1.45.1"
 tempfile = "3.23.0"
 
diff --git a/src-tauri/src/asciiscript/ast.rs b/src-tauri/src/asciiscript/ast.rs
new file mode 100644
index 0000000..4b20d01
--- /dev/null
+++ b/src-tauri/src/asciiscript/ast.rs
@@ -0,0 +1,297 @@
+//! AST types for asciiscript DSL.
+//!
+//! The AST closely mirrors the grammar defined in docs/asciiscript-spec.md.
+
+use std::fmt;
+
+/// A complete asciiscript program.
+#[derive(Debug, Clone, PartialEq)]
+pub struct Program {
+    pub layout: Layout,
+}
+
+/// The root layout container.
+#[derive(Debug, Clone, PartialEq)]
+pub struct Layout {
+    pub statements: Vec<Statement>,
+    pub span: Span,
+}
+
+/// A statement in a block - either a container or primitive.
+#[derive(Debug, Clone, PartialEq)]
+pub enum Statement {
+    Container(Container),
+    Primitive(Primitive),
+}
+
+/// Container types that hold other statements.
+#[derive(Debug, Clone, PartialEq)]
+pub struct Container {
+    pub kind: ContainerKind,
+    pub title: Option<String>,
+    pub modifiers: Modifiers,
+    pub statements: Vec<Statement>,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum ContainerKind {
+    Window,
+    Box,
+    Section,
+    Row,
+    Column,
+}
+
+impl fmt::Display for ContainerKind {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            ContainerKind::Window => write!(f, "window"),
+            ContainerKind::Box => write!(f, "box"),
+            ContainerKind::Section => write!(f, "section"),
+            ContainerKind::Row => write!(f, "row"),
+            ContainerKind::Column => write!(f, "column"),
+        }
+    }
+}
+
+/// Primitive elements (leaf nodes).
+#[derive(Debug, Clone, PartialEq)]
+pub enum Primitive {
+    Text {
+        content: String,
+        modifiers: Modifiers,
+        span: Span,
+    },
+    Input {
+        modifiers: Modifiers,
+        span: Span,
+    },
+    Checkbox {
+        label: String,
+        checked: bool,
+        span: Span,
+    },
+    Radio {
+        label: String,
+        selected: bool,
+        span: Span,
+    },
+    Select {
+        value: String,
+        modifiers: Modifiers,
+        span: Span,
+    },
+    Button {
+        label: String,
+        modifiers: Modifiers,
+        span: Span,
+    },
+    Link {
+        text: String,
+        span: Span,
+    },
+    Code {
+        content: String,
+        span: Span,
+    },
+    Raw {
+        content: String,
+        span: Span,
+    },
+    Separator {
+        span: Span,
+    },
+    Spacer {
+        span: Span,
+    },
+    Progress {
+        value: u8, // 0-100
+        span: Span,
+    },
+    Alert {
+        alert_type: AlertType,
+        statements: Vec<Statement>,
+        span: Span,
+    },
+    Table(Table),
+    List(List),
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum AlertType {
+    Error,
+    Warn,
+    Info,
+}
+
+impl fmt::Display for AlertType {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            AlertType::Error => write!(f, "error"),
+            AlertType::Warn => write!(f, "warn"),
+            AlertType::Info => write!(f, "info"),
+        }
+    }
+}
+
+/// Table structure with header and rows.
+#[derive(Debug, Clone, PartialEq)]
+pub struct Table {
+    pub header: Option<TableHeader>,
+    pub rows: Vec<TableRow>,
+    pub modifiers: Modifiers,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct TableHeader {
+    pub columns: Vec<TableColumn>,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct TableColumn {
+    pub label: String,
+    pub modifiers: Modifiers,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct TableRow {
+    pub cells: Vec<TableCell>,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct TableCell {
+    pub content: String,
+    pub modifiers: Modifiers,
+    pub span: Span,
+}
+
+/// List with selectable items.
+#[derive(Debug, Clone, PartialEq)]
+pub struct List {
+    pub items: Vec<ListItem>,
+    pub span: Span,
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct ListItem {
+    pub content: String,
+    pub selected: bool,
+    pub span: Span,
+}
+
+/// Modifiers (attributes + flags).
+#[derive(Debug, Clone, PartialEq, Default)]
+pub struct Modifiers {
+    pub width: Option<u32>,
+    pub height: Option<u32>,
+    pub padding: Option<u32>,
+    pub gap: Option<u32>,
+    pub align: Option<Align>,
+    pub style: Option<Style>,
+    pub alert_type: Option<AlertType>,
+    pub placeholder: Option<String>,
+}
+
+impl Modifiers {
+    pub fn new() -> Self {
+        Self::default()
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Align {
+    Left,
+    Center,
+    Right,
+}
+
+impl fmt::Display for Align {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Align::Left => write!(f, "left"),
+            Align::Center => write!(f, "center"),
+            Align::Right => write!(f, "right"),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Style {
+    Bold,
+    Dim,
+    Danger,
+}
+
+impl fmt::Display for Style {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            Style::Bold => write!(f, "bold"),
+            Style::Dim => write!(f, "dim"),
+            Style::Danger => write!(f, "danger"),
+        }
+    }
+}
+
+/// Source location for error reporting.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct Span {
+    pub start: Position,
+    pub end: Position,
+}
+
+impl Span {
+    pub fn new(start: Position, end: Position) -> Self {
+        Self { start, end }
+    }
+
+    pub fn from_positions(start_line: u32, start_col: u32, end_line: u32, end_col: u32) -> Self {
+        Self {
+            start: Position::new(start_line, start_col),
+            end: Position::new(end_line, end_col),
+        }
+    }
+
+    pub fn merge(self, other: Span) -> Self {
+        Self {
+            start: self.start,
+            end: other.end,
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
+pub struct Position {
+    pub line: u32,   // 1-indexed
+    pub column: u32, // 1-indexed
+}
+
+impl Position {
+    pub fn new(line: u32, column: u32) -> Self {
+        Self { line, column }
+    }
+}
+
+impl fmt::Display for Position {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}:{}", self.line, self.column)
+    }
+}
+
+impl fmt::Display for Span {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        if self.start.line == self.end.line {
+            write!(
+                f,
+                "{}:{}-{}",
+                self.start.line, self.start.column, self.end.column
+            )
+        } else {
+            write!(f, "{}-{}", self.start, self.end)
+        }
+    }
+}
diff --git a/src-tauri/src/asciiscript/lexer.rs b/src-tauri/src/asciiscript/lexer.rs
new file mode 100644
index 0000000..ab677f2
--- /dev/null
+++ b/src-tauri/src/asciiscript/lexer.rs
@@ -0,0 +1,867 @@
+//! Lexer for asciiscript DSL.
+//!
+//! Tokenizes source into a stream of tokens for the parser.
+
+use crate::asciiscript::ast::{Position, Span};
+use std::fmt;
+
+/// Token types produced by the lexer.
+#[derive(Debug, Clone, PartialEq)]
+pub enum TokenKind {
+    // Keywords - Containers
+    Layout,
+    Window,
+    Box,
+    Section,
+    Row,
+    Column,
+
+    // Keywords - Primitives
+    Text,
+    Input,
+    Checkbox,
+    Radio,
+    Select,
+    Button,
+    Link,
+    Code,
+    Raw,
+    Separator,
+    Spacer,
+    Progress,
+    Alert,
+
+    // Keywords - Table
+    Table,
+    Header,
+    Tr,
+    Td,
+    Col,
+
+    // Keywords - List
+    List,
+    Item,
+
+    // Flags
+    Checked,
+    Selected,
+
+    // Literals
+    String(String),      // "..."
+    MultilineString(String), // ```...```
+    Number(u32),
+    Ident(String),       // for attribute names and enum values
+
+    // Symbols
+    LBrace,  // {
+    RBrace,  // }
+    Colon,   // :
+
+    // Special
+    Eof,
+}
+
+impl fmt::Display for TokenKind {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            TokenKind::Layout => write!(f, "layout"),
+            TokenKind::Window => write!(f, "window"),
+            TokenKind::Box => write!(f, "box"),
+            TokenKind::Section => write!(f, "section"),
+            TokenKind::Row => write!(f, "row"),
+            TokenKind::Column => write!(f, "column"),
+            TokenKind::Text => write!(f, "text"),
+            TokenKind::Input => write!(f, "input"),
+            TokenKind::Checkbox => write!(f, "checkbox"),
+            TokenKind::Radio => write!(f, "radio"),
+            TokenKind::Select => write!(f, "select"),
+            TokenKind::Button => write!(f, "button"),
+            TokenKind::Link => write!(f, "link"),
+            TokenKind::Code => write!(f, "code"),
+            TokenKind::Raw => write!(f, "raw"),
+            TokenKind::Separator => write!(f, "separator"),
+            TokenKind::Spacer => write!(f, "spacer"),
+            TokenKind::Progress => write!(f, "progress"),
+            TokenKind::Alert => write!(f, "alert"),
+            TokenKind::Table => write!(f, "table"),
+            TokenKind::Header => write!(f, "header"),
+            TokenKind::Tr => write!(f, "tr"),
+            TokenKind::Td => write!(f, "td"),
+            TokenKind::Col => write!(f, "col"),
+            TokenKind::List => write!(f, "list"),
+            TokenKind::Item => write!(f, "item"),
+            TokenKind::Checked => write!(f, "checked"),
+            TokenKind::Selected => write!(f, "selected"),
+            TokenKind::String(s) => write!(f, "\"{}\"", s),
+            TokenKind::MultilineString(s) => write!(f, "```{}```", s),
+            TokenKind::Number(n) => write!(f, "{}", n),
+            TokenKind::Ident(s) => write!(f, "{}", s),
+            TokenKind::LBrace => write!(f, "{{"),
+            TokenKind::RBrace => write!(f, "}}"),
+            TokenKind::Colon => write!(f, ":"),
+            TokenKind::Eof => write!(f, "EOF"),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+pub struct Token {
+    pub kind: TokenKind,
+    pub span: Span,
+}
+
+impl Token {
+    pub fn new(kind: TokenKind, span: Span) -> Self {
+        Self { kind, span }
+    }
+}
+
+/// Lexer error with location.
+#[derive(Debug, Clone, PartialEq)]
+pub struct LexerError {
+    pub message: String,
+    pub position: Position,
+}
+
+impl fmt::Display for LexerError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}:{}: {}", self.position.line, self.position.column, self.message)
+    }
+}
+
+impl std::error::Error for LexerError {}
+
+/// Lexer state.
+pub struct Lexer<'a> {
+    #[allow(dead_code)]
+    source: &'a str,
+    chars: std::iter::Peekable<std::str::CharIndices<'a>>,
+    line: u32,
+    column: u32,
+    current_pos: usize,
+}
+
+impl<'a> Lexer<'a> {
+    pub fn new(source: &'a str) -> Self {
+        Self {
+            source,
+            chars: source.char_indices().peekable(),
+            line: 1,
+            column: 1,
+            current_pos: 0,
+        }
+    }
+
+    /// Tokenize the entire source into a vector of tokens.
+    pub fn tokenize(source: &str) -> Result<Vec<Token>, LexerError> {
+        let mut lexer = Lexer::new(source);
+        let mut tokens = Vec::new();
+
+        loop {
+            let token = lexer.next_token()?;
+            let is_eof = token.kind == TokenKind::Eof;
+            tokens.push(token);
+            if is_eof {
+                break;
+            }
+        }
+
+        Ok(tokens)
+    }
+
+    fn position(&self) -> Position {
+        Position::new(self.line, self.column)
+    }
+
+    fn advance(&mut self) -> Option<char> {
+        if let Some((pos, ch)) = self.chars.next() {
+            self.current_pos = pos;
+            if ch == '\n' {
+                self.line += 1;
+                self.column = 1;
+            } else {
+                self.column += 1;
+            }
+            Some(ch)
+        } else {
+            None
+        }
+    }
+
+    fn peek(&mut self) -> Option<char> {
+        self.chars.peek().map(|(_, ch)| *ch)
+    }
+
+    fn skip_whitespace_and_comments(&mut self) {
+        loop {
+            // Skip whitespace
+            while let Some(ch) = self.peek() {
+                if ch.is_whitespace() {
+                    self.advance();
+                } else {
+                    break;
+                }
+            }
+
+            // Skip comments
+            if self.peek() == Some('#') {
+                while let Some(ch) = self.advance() {
+                    if ch == '\n' {
+                        break;
+                    }
+                }
+            } else {
+                break;
+            }
+        }
+    }
+
+    fn read_string(&mut self) -> Result<String, LexerError> {
+        let start_pos = self.position();
+        self.advance(); // consume opening "
+
+        let mut result = String::new();
+        loop {
+            match self.advance() {
+                Some('"') => return Ok(result),
+                Some('\\') => {
+                    // Handle escape sequences
+                    match self.advance() {
+                        Some('n') => result.push('\n'),
+                        Some('t') => result.push('\t'),
+                        Some('\\') => result.push('\\'),
+                        Some('"') => result.push('"'),
+                        Some(ch) => result.push(ch),
+                        None => {
+                            return Err(LexerError {
+                                message: "Unterminated string".to_string(),
+                                position: start_pos,
+                            })
+                        }
+                    }
+                }
+                Some(ch) => result.push(ch),
+                None => {
+                    return Err(LexerError {
+                        message: "Unterminated string".to_string(),
+                        position: start_pos,
+                    })
+                }
+            }
+        }
+    }
+
+    fn read_multiline_string(&mut self) -> Result<String, LexerError> {
+        let start_pos = self.position();
+
+        // Consume opening ```
+        self.advance(); // `
+        self.advance(); // `
+        self.advance(); // `
+
+        // Skip optional newline after opening ```
+        if self.peek() == Some('\n') {
+            self.advance();
+        }
+
+        let mut result = String::new();
+        let mut backtick_count = 0;
+
+        loop {
+            match self.advance() {
+                Some('`') => {
+                    backtick_count += 1;
+                    if backtick_count == 3 {
+                        // Remove the two backticks we added
+                        result.pop();
+                        result.pop();
+                        // Trim trailing newline if present
+                        if result.ends_with('\n') {
+                            result.pop();
+                        }
+                        return Ok(result);
+                    }
+                    result.push('`');
+                }
+                Some(ch) => {
+                    backtick_count = 0;
+                    result.push(ch);
+                }
+                None => {
+                    return Err(LexerError {
+                        message: "Unterminated multiline string".to_string(),
+                        position: start_pos,
+                    })
+                }
+            }
+        }
+    }
+
+    fn read_number(&mut self) -> u32 {
+        let mut result = 0u32;
+        while let Some(ch) = self.peek() {
+            if ch.is_ascii_digit() {
+                result = result * 10 + (ch as u32 - '0' as u32);
+                self.advance();
+            } else {
+                break;
+            }
+        }
+        result
+    }
+
+    fn read_identifier(&mut self) -> String {
+        let mut result = String::new();
+        while let Some(ch) = self.peek() {
+            if ch.is_ascii_lowercase() || ch == '_' {
+                result.push(ch);
+                self.advance();
+            } else {
+                break;
+            }
+        }
+        result
+    }
+
+    fn keyword_or_ident(&self, s: &str) -> TokenKind {
+        match s {
+            // Containers
+            "layout" => TokenKind::Layout,
+            "window" => TokenKind::Window,
+            "box" => TokenKind::Box,
+            "section" => TokenKind::Section,
+            "row" => TokenKind::Row,
+            "column" => TokenKind::Column,
+            // Primitives
+            "text" => TokenKind::Text,
+            "input" => TokenKind::Input,
+            "checkbox" => TokenKind::Checkbox,
+            "radio" => TokenKind::Radio,
+            "select" => TokenKind::Select,
+            "button" => TokenKind::Button,
+            "link" => TokenKind::Link,
+            "code" => TokenKind::Code,
+            "raw" => TokenKind::Raw,
+            "separator" => TokenKind::Separator,
+            "spacer" => TokenKind::Spacer,
+            "progress" => TokenKind::Progress,
+            "alert" => TokenKind::Alert,
+            // Table
+            "table" => TokenKind::Table,
+            "header" => TokenKind::Header,
+            "tr" => TokenKind::Tr,
+            "td" => TokenKind::Td,
+            "col" => TokenKind::Col,
+            // List
+            "list" => TokenKind::List,
+            "item" => TokenKind::Item,
+            // Flags
+            "checked" => TokenKind::Checked,
+            "selected" => TokenKind::Selected,
+            // Identifier
+            _ => TokenKind::Ident(s.to_string()),
+        }
+    }
+
+    pub fn next_token(&mut self) -> Result<Token, LexerError> {
+        self.skip_whitespace_and_comments();
+
+        let start = self.position();
+
+        let Some(ch) = self.peek() else {
+            return Ok(Token::new(TokenKind::Eof, Span::new(start, start)));
+        };
+
+        let kind = match ch {
+            '{' => {
+                self.advance();
+                TokenKind::LBrace
+            }
+            '}' => {
+                self.advance();
+                TokenKind::RBrace
+            }
+            ':' => {
+                self.advance();
+                TokenKind::Colon
+            }
+            '"' => {
+                let s = self.read_string()?;
+                TokenKind::String(s)
+            }
+            '`' => {
+                // Check for ```
+                let mut is_multiline = false;
+                let mut chars_copy = self.chars.clone();
+                if chars_copy.next().map(|(_, c)| c) == Some('`') {
+                    if chars_copy.next().map(|(_, c)| c) == Some('`') {
+                        if chars_copy.next().map(|(_, c)| c) == Some('`') {
+                            is_multiline = true;
+                        }
+                    }
+                }
+
+                if is_multiline {
+                    let s = self.read_multiline_string()?;
+                    TokenKind::MultilineString(s)
+                } else {
+                    return Err(LexerError {
+                        message: "Unexpected character '`'. Did you mean '```' for multiline string?".to_string(),
+                        position: start,
+                    });
+                }
+            }
+            '0'..='9' => {
+                let n = self.read_number();
+                TokenKind::Number(n)
+            }
+            'a'..='z' | '_' => {
+                let ident = self.read_identifier();
+                self.keyword_or_ident(&ident)
+            }
+            _ => {
+                return Err(LexerError {
+                    message: format!("Unexpected character '{}'", ch),
+                    position: start,
+                });
+            }
+        };
+
+        let end = self.position();
+        Ok(Token::new(kind, Span::new(start, end)))
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn tokenize(source: &str) -> Vec<TokenKind> {
+        Lexer::tokenize(source)
+            .unwrap()
+            .into_iter()
+            .map(|t| t.kind)
+            .collect()
+    }
+
+    fn tokenize_err(source: &str) -> LexerError {
+        Lexer::tokenize(source).unwrap_err()
+    }
+
+    // ========== Basic token tests ==========
+
+    #[test]
+    fn empty_source_returns_eof() {
+        assert_eq!(tokenize(""), vec![TokenKind::Eof]);
+    }
+
+    #[test]
+    fn whitespace_only_returns_eof() {
+        assert_eq!(tokenize("   \n\t  "), vec![TokenKind::Eof]);
+    }
+
+    #[test]
+    fn comment_only_returns_eof() {
+        assert_eq!(tokenize("# this is a comment"), vec![TokenKind::Eof]);
+    }
+
+    #[test]
+    fn comment_with_content_after() {
+        assert_eq!(
+            tokenize("# comment\nlayout"),
+            vec![TokenKind::Layout, TokenKind::Eof]
+        );
+    }
+
+    // ========== Symbol tests ==========
+
+    #[test]
+    fn braces() {
+        assert_eq!(
+            tokenize("{ }"),
+            vec![TokenKind::LBrace, TokenKind::RBrace, TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn colon() {
+        assert_eq!(
+            tokenize(":"),
+            vec![TokenKind::Colon, TokenKind::Eof]
+        );
+    }
+
+    // ========== Keyword tests ==========
+
+    #[test]
+    fn container_keywords() {
+        assert_eq!(
+            tokenize("layout window box section row column"),
+            vec![
+                TokenKind::Layout,
+                TokenKind::Window,
+                TokenKind::Box,
+                TokenKind::Section,
+                TokenKind::Row,
+                TokenKind::Column,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn primitive_keywords() {
+        assert_eq!(
+            tokenize("text input checkbox radio select button link"),
+            vec![
+                TokenKind::Text,
+                TokenKind::Input,
+                TokenKind::Checkbox,
+                TokenKind::Radio,
+                TokenKind::Select,
+                TokenKind::Button,
+                TokenKind::Link,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn more_primitive_keywords() {
+        assert_eq!(
+            tokenize("code raw separator spacer progress alert"),
+            vec![
+                TokenKind::Code,
+                TokenKind::Raw,
+                TokenKind::Separator,
+                TokenKind::Spacer,
+                TokenKind::Progress,
+                TokenKind::Alert,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn table_keywords() {
+        assert_eq!(
+            tokenize("table header tr td col"),
+            vec![
+                TokenKind::Table,
+                TokenKind::Header,
+                TokenKind::Tr,
+                TokenKind::Td,
+                TokenKind::Col,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn list_keywords() {
+        assert_eq!(
+            tokenize("list item"),
+            vec![TokenKind::List, TokenKind::Item, TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn flag_keywords() {
+        assert_eq!(
+            tokenize("checked selected"),
+            vec![TokenKind::Checked, TokenKind::Selected, TokenKind::Eof]
+        );
+    }
+
+    // ========== String tests ==========
+
+    #[test]
+    fn simple_string() {
+        assert_eq!(
+            tokenize(r#""hello""#),
+            vec![TokenKind::String("hello".to_string()), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn string_with_spaces() {
+        assert_eq!(
+            tokenize(r#""hello world""#),
+            vec![TokenKind::String("hello world".to_string()), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn string_with_escapes() {
+        assert_eq!(
+            tokenize(r#""line1\nline2""#),
+            vec![TokenKind::String("line1\nline2".to_string()), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn string_with_escaped_quote() {
+        assert_eq!(
+            tokenize(r#""say \"hi\"""#),
+            vec![TokenKind::String("say \"hi\"".to_string()), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn unterminated_string_error() {
+        let err = tokenize_err(r#""hello"#);
+        assert!(err.message.contains("Unterminated string"));
+    }
+
+    // ========== Multiline string tests ==========
+
+    #[test]
+    fn multiline_string_simple() {
+        let source = "```\nhello\nworld\n```";
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::MultilineString("hello\nworld".to_string()),
+                TokenKind::Eof
+            ]
+        );
+    }
+
+    #[test]
+    fn multiline_string_preserves_whitespace() {
+        let source = "```\n  indented\n    more\n```";
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::MultilineString("  indented\n    more".to_string()),
+                TokenKind::Eof
+            ]
+        );
+    }
+
+    #[test]
+    fn multiline_string_no_leading_newline() {
+        let source = "```hello```";
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::MultilineString("hello".to_string()),
+                TokenKind::Eof
+            ]
+        );
+    }
+
+    #[test]
+    fn unterminated_multiline_string_error() {
+        let err = tokenize_err("```\nhello");
+        assert!(err.message.contains("Unterminated multiline string"));
+    }
+
+    // ========== Number tests ==========
+
+    #[test]
+    fn single_digit() {
+        assert_eq!(
+            tokenize("5"),
+            vec![TokenKind::Number(5), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn multi_digit() {
+        assert_eq!(
+            tokenize("123"),
+            vec![TokenKind::Number(123), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn zero() {
+        assert_eq!(
+            tokenize("0"),
+            vec![TokenKind::Number(0), TokenKind::Eof]
+        );
+    }
+
+    // ========== Identifier tests ==========
+
+    #[test]
+    fn identifier_simple() {
+        assert_eq!(
+            tokenize("foo"),
+            vec![TokenKind::Ident("foo".to_string()), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn identifier_with_underscore() {
+        assert_eq!(
+            tokenize("foo_bar"),
+            vec![TokenKind::Ident("foo_bar".to_string()), TokenKind::Eof]
+        );
+    }
+
+    #[test]
+    fn identifier_all_underscore() {
+        assert_eq!(
+            tokenize("_"),
+            vec![TokenKind::Ident("_".to_string()), TokenKind::Eof]
+        );
+    }
+
+    // ========== Complex expression tests ==========
+
+    #[test]
+    fn attribute_expression() {
+        assert_eq!(
+            tokenize("width:40"),
+            vec![
+                TokenKind::Ident("width".to_string()),
+                TokenKind::Colon,
+                TokenKind::Number(40),
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn simple_layout() {
+        let source = r#"layout {
+            window "Title" {
+            }
+        }"#;
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::Layout,
+                TokenKind::LBrace,
+                TokenKind::Window,
+                TokenKind::String("Title".to_string()),
+                TokenKind::LBrace,
+                TokenKind::RBrace,
+                TokenKind::RBrace,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn row_with_elements() {
+        let source = r#"row { text "Label:" input width:20 }"#;
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::Row,
+                TokenKind::LBrace,
+                TokenKind::Text,
+                TokenKind::String("Label:".to_string()),
+                TokenKind::Input,
+                TokenKind::Ident("width".to_string()),
+                TokenKind::Colon,
+                TokenKind::Number(20),
+                TokenKind::RBrace,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn checkbox_with_flag() {
+        let source = r#"checkbox "Enable" checked"#;
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::Checkbox,
+                TokenKind::String("Enable".to_string()),
+                TokenKind::Checked,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn table_structure() {
+        let source = r#"table {
+            header { col "Name" width:10 }
+            tr { td "value" }
+        }"#;
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::Table,
+                TokenKind::LBrace,
+                TokenKind::Header,
+                TokenKind::LBrace,
+                TokenKind::Col,
+                TokenKind::String("Name".to_string()),
+                TokenKind::Ident("width".to_string()),
+                TokenKind::Colon,
+                TokenKind::Number(10),
+                TokenKind::RBrace,
+                TokenKind::Tr,
+                TokenKind::LBrace,
+                TokenKind::Td,
+                TokenKind::String("value".to_string()),
+                TokenKind::RBrace,
+                TokenKind::RBrace,
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    #[test]
+    fn code_with_multiline() {
+        let source = r#"code ```
+fn main() {
+    println!("hi");
+}
+```"#;
+        assert_eq!(
+            tokenize(source),
+            vec![
+                TokenKind::Code,
+                TokenKind::MultilineString("fn main() {\n    println!(\"hi\");\n}".to_string()),
+                TokenKind::Eof,
+            ]
+        );
+    }
+
+    // ========== Error tests ==========
+
+    #[test]
+    fn unexpected_character_error() {
+        let err = tokenize_err("@");
+        assert!(err.message.contains("Unexpected character '@'"));
+        assert_eq!(err.position.line, 1);
+        assert_eq!(err.position.column, 1);
+    }
+
+    #[test]
+    fn lone_backtick_error() {
+        let err = tokenize_err("`");
+        assert!(err.message.contains("Did you mean '```'"));
+    }
+
+    // ========== Position tracking tests ==========
+
+    #[test]
+    fn token_positions() {
+        let tokens = Lexer::tokenize("layout {\n  window\n}").unwrap();
+
+        // layout starts at 1:1
+        assert_eq!(tokens[0].span.start.line, 1);
+        assert_eq!(tokens[0].span.start.column, 1);
+
+        // { at 1:8
+        assert_eq!(tokens[1].span.start.line, 1);
+        assert_eq!(tokens[1].span.start.column, 8);
+
+        // window at 2:3
+        assert_eq!(tokens[2].span.start.line, 2);
+        assert_eq!(tokens[2].span.start.column, 3);
+
+        // } at 3:1
+        assert_eq!(tokens[3].span.start.line, 3);
+        assert_eq!(tokens[3].span.start.column, 1);
+    }
+}
diff --git a/src-tauri/src/asciiscript/mod.rs b/src-tauri/src/asciiscript/mod.rs
new file mode 100644
index 0000000..cfdfbfb
--- /dev/null
+++ b/src-tauri/src/asciiscript/mod.rs
@@ -0,0 +1,17 @@
+//! asciiscript DSL parser and renderer.
+//!
+//! A declarative DSL for agents to describe UI mockups that compile to ASCII box art.
+//! See docs/asciiscript-spec.md for the full specification.
+
+pub mod ast;
+pub mod lexer;
+pub mod parser;
+pub mod render;
+
+#[cfg(test)]
+mod tests;
+
+pub use ast::*;
+pub use lexer::{Lexer, LexerError, Token, TokenKind};
+pub use parser::{ParseError, Parser};
+pub use render::render;
diff --git a/src-tauri/src/asciiscript/parser.rs b/src-tauri/src/asciiscript/parser.rs
new file mode 100644
index 0000000..3f87e6f
--- /dev/null
+++ b/src-tauri/src/asciiscript/parser.rs
@@ -0,0 +1,1507 @@
+//! Parser for asciiscript DSL.
+//!
+//! Parses a token stream into an AST.
+
+use crate::asciiscript::ast::*;
+use crate::asciiscript::lexer::{Lexer, LexerError, Token, TokenKind};
+use std::fmt;
+
+/// Parser error with location.
+#[derive(Debug, Clone, PartialEq)]
+pub struct ParseError {
+    pub message: String,
+    pub span: Span,
+}
+
+impl fmt::Display for ParseError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        write!(f, "{}: {}", self.span, self.message)
+    }
+}
+
+impl std::error::Error for ParseError {}
+
+impl From<LexerError> for ParseError {
+    fn from(err: LexerError) -> Self {
+        ParseError {
+            message: err.message,
+            span: Span::new(err.position, err.position),
+        }
+    }
+}
+
+/// Parser state.
+pub struct Parser {
+    tokens: Vec<Token>,
+    pos: usize,
+}
+
+impl Parser {
+    pub fn new(tokens: Vec<Token>) -> Self {
+        Self { tokens, pos: 0 }
+    }
+
+    /// Parse source string into a Program.
+    pub fn parse(source: &str) -> Result<Program, ParseError> {
+        let tokens = Lexer::tokenize(source)?;
+        let mut parser = Parser::new(tokens);
+        parser.parse_program()
+    }
+
+    fn current(&self) -> &Token {
+        // tokens always ends with Eof, so this is safe
+        &self.tokens[self.pos.min(self.tokens.len() - 1)]
+    }
+
+    fn peek(&self) -> &TokenKind {
+        &self.current().kind
+    }
+
+    fn advance(&mut self) -> &Token {
+        if self.pos < self.tokens.len() - 1 {
+            self.pos += 1;
+        }
+        // Return previous token (the one we just passed)
+        &self.tokens[self.pos.saturating_sub(1)]
+    }
+
+    fn expect(&mut self, expected: TokenKind) -> Result<&Token, ParseError> {
+        if *self.peek() == expected {
+            Ok(self.advance())
+        } else {
+            Err(ParseError {
+                message: format!("Expected {}, found {}", expected, self.peek()),
+                span: self.current().span,
+            })
+        }
+    }
+
+    fn check(&self, kind: &TokenKind) -> bool {
+        self.peek() == kind
+    }
+
+    fn is_at_end(&self) -> bool {
+        matches!(self.peek(), TokenKind::Eof)
+    }
+
+    // ========== Parsing methods ==========
+
+    fn parse_program(&mut self) -> Result<Program, ParseError> {
+        let layout = self.parse_layout()?;
+
+        if !self.is_at_end() {
+            return Err(ParseError {
+                message: format!("Unexpected token after layout: {}", self.peek()),
+                span: self.current().span,
+            });
+        }
+
+        Ok(Program { layout })
+    }
+
+    fn parse_layout(&mut self) -> Result<Layout, ParseError> {
+        let start = self.current().span;
+        self.expect(TokenKind::Layout)?;
+        self.expect(TokenKind::LBrace)?;
+
+        let statements = self.parse_statements()?;
+
+        let end_token = self.expect(TokenKind::RBrace)?;
+        let span = start.merge(end_token.span);
+
+        Ok(Layout { statements, span })
+    }
+
+    fn parse_statements(&mut self) -> Result<Vec<Statement>, ParseError> {
+        let mut statements = Vec::new();
+
+        while !self.check(&TokenKind::RBrace) && !self.is_at_end() {
+            statements.push(self.parse_statement()?);
+        }
+
+        Ok(statements)
+    }
+
+    fn parse_statement(&mut self) -> Result<Statement, ParseError> {
+        match self.peek() {
+            // Containers
+            TokenKind::Window | TokenKind::Box | TokenKind::Section
+            | TokenKind::Row | TokenKind::Column => {
+                Ok(Statement::Container(self.parse_container()?))
+            }
+            // Primitives
+            TokenKind::Text => Ok(Statement::Primitive(self.parse_text()?)),
+            TokenKind::Input => Ok(Statement::Primitive(self.parse_input()?)),
+            TokenKind::Checkbox => Ok(Statement::Primitive(self.parse_checkbox()?)),
+            TokenKind::Radio => Ok(Statement::Primitive(self.parse_radio()?)),
+            TokenKind::Select => Ok(Statement::Primitive(self.parse_select()?)),
+            TokenKind::Button => Ok(Statement::Primitive(self.parse_button()?)),
+            TokenKind::Link => Ok(Statement::Primitive(self.parse_link()?)),
+            TokenKind::Code => Ok(Statement::Primitive(self.parse_code()?)),
+            TokenKind::Raw => Ok(Statement::Primitive(self.parse_raw()?)),
+            TokenKind::Separator => Ok(Statement::Primitive(self.parse_separator()?)),
+            TokenKind::Spacer => Ok(Statement::Primitive(self.parse_spacer()?)),
+            TokenKind::Progress => Ok(Statement::Primitive(self.parse_progress()?)),
+            TokenKind::Alert => Ok(Statement::Primitive(self.parse_alert()?)),
+            TokenKind::Table => Ok(Statement::Primitive(self.parse_table()?)),
+            TokenKind::List => Ok(Statement::Primitive(self.parse_list()?)),
+            _ => Err(ParseError {
+                message: format!("Unexpected token: {}", self.peek()),
+                span: self.current().span,
+            }),
+        }
+    }
+
+    fn parse_container(&mut self) -> Result<Container, ParseError> {
+        let start = self.current().span;
+        let kind = match self.peek() {
+            TokenKind::Window => { self.advance(); ContainerKind::Window }
+            TokenKind::Box => { self.advance(); ContainerKind::Box }
+            TokenKind::Section => { self.advance(); ContainerKind::Section }
+            TokenKind::Row => { self.advance(); ContainerKind::Row }
+            TokenKind::Column => { self.advance(); ContainerKind::Column }
+            _ => unreachable!(),
+        };
+
+        // Parse optional title (required for section)
+        let title = if let TokenKind::String(s) = self.peek().clone() {
+            self.advance();
+            Some(s)
+        } else if kind == ContainerKind::Section {
+            return Err(ParseError {
+                message: "section requires a title".to_string(),
+                span: self.current().span,
+            });
+        } else {
+            None
+        };
+
+        // Parse modifiers
+        let modifiers = self.parse_modifiers()?;
+
+        // Parse block
+        self.expect(TokenKind::LBrace)?;
+        let statements = self.parse_statements()?;
+        let end_token = self.expect(TokenKind::RBrace)?;
+
+        let span = start.merge(end_token.span);
+
+        Ok(Container {
+            kind,
+            title,
+            modifiers,
+            statements,
+            span,
+        })
+    }
+
+    fn parse_modifiers(&mut self) -> Result<Modifiers, ParseError> {
+        let mut modifiers = Modifiers::new();
+
+        loop {
+            match self.peek() {
+                TokenKind::Ident(name) => {
+                    let name = name.clone();
+                    let attr_span = self.current().span;
+                    self.advance();
+
+                    // Expect colon
+                    self.expect(TokenKind::Colon)?;
+
+                    // Parse value
+                    match name.as_str() {
+                        "width" => {
+                            if let TokenKind::Number(n) = self.peek() {
+                                modifiers.width = Some(*n);
+                                self.advance();
+                            } else {
+                                return Err(ParseError {
+                                    message: format!("width requires a number, found {}", self.peek()),
+                                    span: self.current().span,
+                                });
+                            }
+                        }
+                        "height" => {
+                            if let TokenKind::Number(n) = self.peek() {
+                                modifiers.height = Some(*n);
+                                self.advance();
+                            } else {
+                                return Err(ParseError {
+                                    message: format!("height requires a number, found {}", self.peek()),
+                                    span: self.current().span,
+                                });
+                            }
+                        }
+                        "padding" => {
+                            if let TokenKind::Number(n) = self.peek() {
+                                modifiers.padding = Some(*n);
+                                self.advance();
+                            } else {
+                                return Err(ParseError {
+                                    message: format!("padding requires a number, found {}", self.peek()),
+                                    span: self.current().span,
+                                });
+                            }
+                        }
+                        "gap" => {
+                            if let TokenKind::Number(n) = self.peek() {
+                                modifiers.gap = Some(*n);
+                                self.advance();
+                            } else {
+                                return Err(ParseError {
+                                    message: format!("gap requires a number, found {}", self.peek()),
+                                    span: self.current().span,
+                                });
+                            }
+                        }
+                        "align" => {
+                            match self.peek() {
+                                TokenKind::Ident(v) if v == "left" => {
+                                    modifiers.align = Some(Align::Left);
+                                    self.advance();
+                                }
+                                TokenKind::Ident(v) if v == "center" => {
+                                    modifiers.align = Some(Align::Center);
+                                    self.advance();
+                                }
+                                TokenKind::Ident(v) if v == "right" => {
+                                    modifiers.align = Some(Align::Right);
+                                    self.advance();
+                                }
+                                _ => {
+                                    return Err(ParseError {
+                                        message: format!("align requires left/center/right, found {}", self.peek()),
+                                        span: self.current().span,
+                                    });
+                                }
+                            }
+                        }
+                        "style" => {
+                            match self.peek() {
+                                TokenKind::Ident(v) if v == "bold" => {
+                                    modifiers.style = Some(Style::Bold);
+                                    self.advance();
+                                }
+                                TokenKind::Ident(v) if v == "dim" => {
+                                    modifiers.style = Some(Style::Dim);
+                                    self.advance();
+                                }
+                                TokenKind::Ident(v) if v == "danger" => {
+                                    modifiers.style = Some(Style::Danger);
+                                    self.advance();
+                                }
+                                _ => {
+                                    return Err(ParseError {
+                                        message: format!("style requires bold/dim/danger, found {}", self.peek()),
+                                        span: self.current().span,
+                                    });
+                                }
+                            }
+                        }
+                        "type" => {
+                            match self.peek() {
+                                TokenKind::Ident(v) if v == "error" => {
+                                    modifiers.alert_type = Some(AlertType::Error);
+                                    self.advance();
+                                }
+                                TokenKind::Ident(v) if v == "warn" => {
+                                    modifiers.alert_type = Some(AlertType::Warn);
+                                    self.advance();
+                                }
+                                TokenKind::Ident(v) if v == "info" => {
+                                    modifiers.alert_type = Some(AlertType::Info);
+                                    self.advance();
+                                }
+                                _ => {
+                                    return Err(ParseError {
+                                        message: format!("type requires error/warn/info, found {}", self.peek()),
+                                        span: self.current().span,
+                                    });
+                                }
+                            }
+                        }
+                        "placeholder" => {
+                            if let TokenKind::String(s) = self.peek().clone() {
+                                modifiers.placeholder = Some(s);
+                                self.advance();
+                            } else {
+                                return Err(ParseError {
+                                    message: format!("placeholder requires a string, found {}", self.peek()),
+                                    span: self.current().span,
+                                });
+                            }
+                        }
+                        _ => {
+                            return Err(ParseError {
+                                message: format!("Unknown attribute: {}", name),
+                                span: attr_span,
+                            });
+                        }
+                    }
+                }
+                _ => break,
+            }
+        }
+
+        Ok(modifiers)
+    }
+
+    // ========== Primitive parsers ==========
+
+    fn parse_text(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'text'
+
+        let content = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("text requires a string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let modifiers = self.parse_modifiers()?;
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Text {
+            content,
+            modifiers,
+            span,
+        })
+    }
+
+    fn parse_input(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'input'
+
+        let modifiers = self.parse_modifiers()?;
+
+        // Validate: width is required
+        if modifiers.width.is_none() {
+            return Err(ParseError {
+                message: "input requires width attribute".to_string(),
+                span: start,
+            });
+        }
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Input { modifiers, span })
+    }
+
+    fn parse_checkbox(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'checkbox'
+
+        let label = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("checkbox requires a label string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let checked = if self.check(&TokenKind::Checked) {
+            self.advance();
+            true
+        } else {
+            false
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Checkbox {
+            label,
+            checked,
+            span,
+        })
+    }
+
+    fn parse_radio(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'radio'
+
+        let label = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("radio requires a label string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let selected = if self.check(&TokenKind::Selected) {
+            self.advance();
+            true
+        } else {
+            false
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Radio {
+            label,
+            selected,
+            span,
+        })
+    }
+
+    fn parse_select(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'select'
+
+        let value = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("select requires a value string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let modifiers = self.parse_modifiers()?;
+
+        // Validate: width is required
+        if modifiers.width.is_none() {
+            return Err(ParseError {
+                message: "select requires width attribute".to_string(),
+                span: start,
+            });
+        }
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Select {
+            value,
+            modifiers,
+            span,
+        })
+    }
+
+    fn parse_button(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'button'
+
+        let label = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("button requires a label string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let modifiers = self.parse_modifiers()?;
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Button {
+            label,
+            modifiers,
+            span,
+        })
+    }
+
+    fn parse_link(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'link'
+
+        let text = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("link requires a text string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Link { text, span })
+    }
+
+    fn parse_code(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'code'
+
+        let content = match self.peek().clone() {
+            TokenKind::String(s) | TokenKind::MultilineString(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("code requires a string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Code { content, span })
+    }
+
+    fn parse_raw(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'raw'
+
+        let content = match self.peek().clone() {
+            TokenKind::String(s) | TokenKind::MultilineString(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("raw requires a string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Raw { content, span })
+    }
+
+    fn parse_separator(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'separator'
+
+        Ok(Primitive::Separator { span: start })
+    }
+
+    fn parse_spacer(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'spacer'
+
+        Ok(Primitive::Spacer { span: start })
+    }
+
+    fn parse_progress(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'progress'
+
+        let value = match self.peek() {
+            TokenKind::Number(n) => {
+                let n = *n;
+                self.advance();
+                if n > 100 {
+                    return Err(ParseError {
+                        message: format!("progress value must be 0-100, found {}", n),
+                        span: self.current().span,
+                    });
+                }
+                n as u8
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("progress requires a number, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(Primitive::Progress { value, span })
+    }
+
+    fn parse_alert(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'alert'
+
+        let modifiers = self.parse_modifiers()?;
+
+        // Validate: type is required
+        let alert_type = modifiers.alert_type.ok_or_else(|| ParseError {
+            message: "alert requires type attribute (error/warn/info)".to_string(),
+            span: start,
+        })?;
+
+        self.expect(TokenKind::LBrace)?;
+        let statements = self.parse_statements()?;
+        let end_token = self.expect(TokenKind::RBrace)?;
+
+        let span = start.merge(end_token.span);
+
+        Ok(Primitive::Alert {
+            alert_type,
+            statements,
+            span,
+        })
+    }
+
+    fn parse_table(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'table'
+
+        let modifiers = self.parse_modifiers()?;
+
+        self.expect(TokenKind::LBrace)?;
+
+        // Parse optional header
+        let header = if self.check(&TokenKind::Header) {
+            Some(self.parse_table_header()?)
+        } else {
+            None
+        };
+
+        // Parse rows
+        let mut rows = Vec::new();
+        while self.check(&TokenKind::Tr) {
+            rows.push(self.parse_table_row()?);
+        }
+
+        let end_token = self.expect(TokenKind::RBrace)?;
+        let span = start.merge(end_token.span);
+
+        Ok(Primitive::Table(Table {
+            header,
+            rows,
+            modifiers,
+            span,
+        }))
+    }
+
+    fn parse_table_header(&mut self) -> Result<TableHeader, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'header'
+
+        self.expect(TokenKind::LBrace)?;
+
+        let mut columns = Vec::new();
+        while self.check(&TokenKind::Col) {
+            columns.push(self.parse_table_column()?);
+        }
+
+        if columns.is_empty() {
+            return Err(ParseError {
+                message: "header requires at least one col".to_string(),
+                span: start,
+            });
+        }
+
+        let end_token = self.expect(TokenKind::RBrace)?;
+        let span = start.merge(end_token.span);
+
+        Ok(TableHeader { columns, span })
+    }
+
+    fn parse_table_column(&mut self) -> Result<TableColumn, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'col'
+
+        let label = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("col requires a label string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let modifiers = self.parse_modifiers()?;
+
+        // Validate: width is required
+        if modifiers.width.is_none() {
+            return Err(ParseError {
+                message: "col requires width attribute".to_string(),
+                span: start,
+            });
+        }
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(TableColumn {
+            label,
+            modifiers,
+            span,
+        })
+    }
+
+    fn parse_table_row(&mut self) -> Result<TableRow, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'tr'
+
+        self.expect(TokenKind::LBrace)?;
+
+        let mut cells = Vec::new();
+        while self.check(&TokenKind::Td) {
+            cells.push(self.parse_table_cell()?);
+        }
+
+        if cells.is_empty() {
+            return Err(ParseError {
+                message: "tr requires at least one td".to_string(),
+                span: start,
+            });
+        }
+
+        let end_token = self.expect(TokenKind::RBrace)?;
+        let span = start.merge(end_token.span);
+
+        Ok(TableRow { cells, span })
+    }
+
+    fn parse_table_cell(&mut self) -> Result<TableCell, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'td'
+
+        let content = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("td requires a content string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let modifiers = self.parse_modifiers()?;
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(TableCell {
+            content,
+            modifiers,
+            span,
+        })
+    }
+
+    fn parse_list(&mut self) -> Result<Primitive, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'list'
+
+        self.expect(TokenKind::LBrace)?;
+
+        let mut items = Vec::new();
+        while self.check(&TokenKind::Item) {
+            items.push(self.parse_list_item()?);
+        }
+
+        if items.is_empty() {
+            return Err(ParseError {
+                message: "list requires at least one item".to_string(),
+                span: start,
+            });
+        }
+
+        let end_token = self.expect(TokenKind::RBrace)?;
+        let span = start.merge(end_token.span);
+
+        Ok(Primitive::List(List { items, span }))
+    }
+
+    fn parse_list_item(&mut self) -> Result<ListItem, ParseError> {
+        let start = self.current().span;
+        self.advance(); // consume 'item'
+
+        let content = match self.peek().clone() {
+            TokenKind::String(s) => {
+                self.advance();
+                s
+            }
+            _ => {
+                return Err(ParseError {
+                    message: format!("item requires a content string, found {}", self.peek()),
+                    span: self.current().span,
+                });
+            }
+        };
+
+        let selected = if self.check(&TokenKind::Selected) {
+            self.advance();
+            true
+        } else {
+            false
+        };
+
+        let span = start.merge(self.tokens[self.pos.saturating_sub(1)].span);
+
+        Ok(ListItem {
+            content,
+            selected,
+            span,
+        })
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn parse(source: &str) -> Program {
+        Parser::parse(source).unwrap()
+    }
+
+    fn parse_err(source: &str) -> ParseError {
+        Parser::parse(source).unwrap_err()
+    }
+
+    // ========== Basic layout tests ==========
+
+    #[test]
+    fn empty_layout() {
+        let program = parse("layout { }");
+        assert!(program.layout.statements.is_empty());
+    }
+
+    #[test]
+    fn layout_required() {
+        let err = parse_err("window { }");
+        assert!(err.message.contains("Expected layout"));
+    }
+
+    // ========== Container tests ==========
+
+    #[test]
+    fn window_with_title() {
+        let program = parse(r#"layout { window "My Window" { } }"#);
+        assert_eq!(program.layout.statements.len(), 1);
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.kind, ContainerKind::Window);
+            assert_eq!(c.title, Some("My Window".to_string()));
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn window_without_title() {
+        let program = parse("layout { window { } }");
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.kind, ContainerKind::Window);
+            assert_eq!(c.title, None);
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn box_with_title() {
+        let program = parse(r#"layout { box "Section" { } }"#);
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.kind, ContainerKind::Box);
+            assert_eq!(c.title, Some("Section".to_string()));
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn section_requires_title() {
+        let err = parse_err("layout { section { } }");
+        assert!(err.message.contains("section requires a title"));
+    }
+
+    #[test]
+    fn section_with_title() {
+        let program = parse(r#"layout { section "Options" { } }"#);
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.kind, ContainerKind::Section);
+            assert_eq!(c.title, Some("Options".to_string()));
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn row_container() {
+        let program = parse("layout { row { } }");
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.kind, ContainerKind::Row);
+            assert_eq!(c.title, None);
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn column_container() {
+        let program = parse("layout { column { } }");
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.kind, ContainerKind::Column);
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn container_with_width() {
+        let program = parse("layout { window width:50 { } }");
+
+        if let Statement::Container(c) = &program.layout.statements[0] {
+            assert_eq!(c.modifiers.width, Some(50));
+        } else {
+            panic!("Expected container");
+        }
+    }
+
+    #[test]
+    fn nested_containers() {
+        let program = parse(r#"layout {
+            window "Outer" {
+                box "Inner" {
+                    row { }
+                }
+            }
+        }"#);
+
+        if let Statement::Container(window) = &program.layout.statements[0] {
+            assert_eq!(window.kind, ContainerKind::Window);
+            assert_eq!(window.statements.len(), 1);
+
+            if let Statement::Container(box_c) = &window.statements[0] {
+                assert_eq!(box_c.kind, ContainerKind::Box);
+                assert_eq!(box_c.statements.len(), 1);
+
+                if let Statement::Container(row) = &box_c.statements[0] {
+                    assert_eq!(row.kind, ContainerKind::Row);
+                }
+            }
+        }
+    }
+
+    // ========== Primitive tests ==========
+
+    #[test]
+    fn text_simple() {
+        let program = parse(r#"layout { text "Hello" }"#);
+
+        if let Statement::Primitive(Primitive::Text { content, .. }) = &program.layout.statements[0] {
+            assert_eq!(content, "Hello");
+        } else {
+            panic!("Expected text primitive");
+        }
+    }
+
+    #[test]
+    fn text_with_modifiers() {
+        let program = parse(r#"layout { text "Hello" align:center style:bold }"#);
+
+        if let Statement::Primitive(Primitive::Text { content, modifiers, .. }) = &program.layout.statements[0] {
+            assert_eq!(content, "Hello");
+            assert_eq!(modifiers.align, Some(Align::Center));
+            assert_eq!(modifiers.style, Some(Style::Bold));
+        } else {
+            panic!("Expected text primitive");
+        }
+    }
+
+    #[test]
+    fn input_requires_width() {
+        let err = parse_err("layout { input }");
+        assert!(err.message.contains("input requires width"));
+    }
+
+    #[test]
+    fn input_with_width() {
+        let program = parse("layout { input width:20 }");
+
+        if let Statement::Primitive(Primitive::Input { modifiers, .. }) = &program.layout.statements[0] {
+            assert_eq!(modifiers.width, Some(20));
+        } else {
+            panic!("Expected input primitive");
+        }
+    }
+
+    #[test]
+    fn input_with_placeholder() {
+        let program = parse(r#"layout { input width:20 placeholder:"email" }"#);
+
+        if let Statement::Primitive(Primitive::Input { modifiers, .. }) = &program.layout.statements[0] {
+            assert_eq!(modifiers.width, Some(20));
+            assert_eq!(modifiers.placeholder, Some("email".to_string()));
+        } else {
+            panic!("Expected input primitive");
+        }
+    }
+
+    #[test]
+    fn checkbox_unchecked() {
+        let program = parse(r#"layout { checkbox "Enable" }"#);
+
+        if let Statement::Primitive(Primitive::Checkbox { label, checked, .. }) = &program.layout.statements[0] {
+            assert_eq!(label, "Enable");
+            assert!(!checked);
+        } else {
+            panic!("Expected checkbox primitive");
+        }
+    }
+
+    #[test]
+    fn checkbox_checked() {
+        let program = parse(r#"layout { checkbox "Enable" checked }"#);
+
+        if let Statement::Primitive(Primitive::Checkbox { label, checked, .. }) = &program.layout.statements[0] {
+            assert_eq!(label, "Enable");
+            assert!(checked);
+        } else {
+            panic!("Expected checkbox primitive");
+        }
+    }
+
+    #[test]
+    fn radio_unselected() {
+        let program = parse(r#"layout { radio "Option A" }"#);
+
+        if let Statement::Primitive(Primitive::Radio { label, selected, .. }) = &program.layout.statements[0] {
+            assert_eq!(label, "Option A");
+            assert!(!selected);
+        } else {
+            panic!("Expected radio primitive");
+        }
+    }
+
+    #[test]
+    fn radio_selected() {
+        let program = parse(r#"layout { radio "Option A" selected }"#);
+
+        if let Statement::Primitive(Primitive::Radio { label, selected, .. }) = &program.layout.statements[0] {
+            assert_eq!(label, "Option A");
+            assert!(selected);
+        } else {
+            panic!("Expected radio primitive");
+        }
+    }
+
+    #[test]
+    fn select_requires_width() {
+        let err = parse_err(r#"layout { select "Value" }"#);
+        assert!(err.message.contains("select requires width"));
+    }
+
+    #[test]
+    fn select_with_width() {
+        let program = parse(r#"layout { select "Mono" width:12 }"#);
+
+        if let Statement::Primitive(Primitive::Select { value, modifiers, .. }) = &program.layout.statements[0] {
+            assert_eq!(value, "Mono");
+            assert_eq!(modifiers.width, Some(12));
+        } else {
+            panic!("Expected select primitive");
+        }
+    }
+
+    #[test]
+    fn button_simple() {
+        let program = parse(r#"layout { button "OK" }"#);
+
+        if let Statement::Primitive(Primitive::Button { label, .. }) = &program.layout.statements[0] {
+            assert_eq!(label, "OK");
+        } else {
+            panic!("Expected button primitive");
+        }
+    }
+
+    #[test]
+    fn button_with_style() {
+        let program = parse(r#"layout { button "Delete" style:danger }"#);
+
+        if let Statement::Primitive(Primitive::Button { label, modifiers, .. }) = &program.layout.statements[0] {
+            assert_eq!(label, "Delete");
+            assert_eq!(modifiers.style, Some(Style::Danger));
+        } else {
+            panic!("Expected button primitive");
+        }
+    }
+
+    #[test]
+    fn link_simple() {
+        let program = parse(r#"layout { link "Click here" }"#);
+
+        if let Statement::Primitive(Primitive::Link { text, .. }) = &program.layout.statements[0] {
+            assert_eq!(text, "Click here");
+        } else {
+            panic!("Expected link primitive");
+        }
+    }
+
+    #[test]
+    fn separator_simple() {
+        let program = parse("layout { separator }");
+
+        if let Statement::Primitive(Primitive::Separator { .. }) = &program.layout.statements[0] {
+            // OK
+        } else {
+            panic!("Expected separator primitive");
+        }
+    }
+
+    #[test]
+    fn spacer_simple() {
+        let program = parse("layout { spacer }");
+
+        if let Statement::Primitive(Primitive::Spacer { .. }) = &program.layout.statements[0] {
+            // OK
+        } else {
+            panic!("Expected spacer primitive");
+        }
+    }
+
+    #[test]
+    fn progress_valid() {
+        let program = parse("layout { progress 75 }");
+
+        if let Statement::Primitive(Primitive::Progress { value, .. }) = &program.layout.statements[0] {
+            assert_eq!(*value, 75);
+        } else {
+            panic!("Expected progress primitive");
+        }
+    }
+
+    #[test]
+    fn progress_zero() {
+        let program = parse("layout { progress 0 }");
+
+        if let Statement::Primitive(Primitive::Progress { value, .. }) = &program.layout.statements[0] {
+            assert_eq!(*value, 0);
+        } else {
+            panic!("Expected progress primitive");
+        }
+    }
+
+    #[test]
+    fn progress_hundred() {
+        let program = parse("layout { progress 100 }");
+
+        if let Statement::Primitive(Primitive::Progress { value, .. }) = &program.layout.statements[0] {
+            assert_eq!(*value, 100);
+        } else {
+            panic!("Expected progress primitive");
+        }
+    }
+
+    #[test]
+    fn progress_over_100_error() {
+        let err = parse_err("layout { progress 101 }");
+        assert!(err.message.contains("0-100"));
+    }
+
+    // ========== Code/Raw tests ==========
+
+    #[test]
+    fn code_single_line() {
+        let program = parse(r#"layout { code "fn main() {}" }"#);
+
+        if let Statement::Primitive(Primitive::Code { content, .. }) = &program.layout.statements[0] {
+            assert_eq!(content, "fn main() {}");
+        } else {
+            panic!("Expected code primitive");
+        }
+    }
+
+    #[test]
+    fn code_multiline() {
+        let program = parse(r#"layout {
+            code ```
+fn main() {
+    println!("hi");
+}
+```
+        }"#);
+
+        if let Statement::Primitive(Primitive::Code { content, .. }) = &program.layout.statements[0] {
+            assert!(content.contains("fn main()"));
+            assert!(content.contains("println!"));
+        } else {
+            panic!("Expected code primitive");
+        }
+    }
+
+    #[test]
+    fn raw_multiline() {
+        let program = parse(r#"layout {
+            raw ```
+┌───┐
+│ A │
+└───┘
+```
+        }"#);
+
+        if let Statement::Primitive(Primitive::Raw { content, .. }) = &program.layout.statements[0] {
+            assert!(content.contains("┌───┐"));
+            assert!(content.contains("│ A │"));
+        } else {
+            panic!("Expected raw primitive");
+        }
+    }
+
+    // ========== Alert tests ==========
+
+    #[test]
+    fn alert_requires_type() {
+        let err = parse_err("layout { alert { } }");
+        assert!(err.message.contains("alert requires type"));
+    }
+
+    #[test]
+    fn alert_error() {
+        let program = parse(r#"layout { alert type:error { text "Error!" } }"#);
+
+        if let Statement::Primitive(Primitive::Alert { alert_type, statements, .. }) = &program.layout.statements[0] {
+            assert_eq!(*alert_type, AlertType::Error);
+            assert_eq!(statements.len(), 1);
+        } else {
+            panic!("Expected alert primitive");
+        }
+    }
+
+    #[test]
+    fn alert_warn() {
+        let program = parse(r#"layout { alert type:warn { text "Warning" } }"#);
+
+        if let Statement::Primitive(Primitive::Alert { alert_type, .. }) = &program.layout.statements[0] {
+            assert_eq!(*alert_type, AlertType::Warn);
+        } else {
+            panic!("Expected alert primitive");
+        }
+    }
+
+    #[test]
+    fn alert_info() {
+        let program = parse(r#"layout { alert type:info { text "Info" } }"#);
+
+        if let Statement::Primitive(Primitive::Alert { alert_type, .. }) = &program.layout.statements[0] {
+            assert_eq!(*alert_type, AlertType::Info);
+        } else {
+            panic!("Expected alert primitive");
+        }
+    }
+
+    // ========== Table tests ==========
+
+    #[test]
+    fn table_with_header_and_rows() {
+        let program = parse(r#"layout {
+            table {
+                header { col "Name" width:10 col "Age" width:5 }
+                tr { td "Alice" td "30" }
+                tr { td "Bob" td "25" }
+            }
+        }"#);
+
+        if let Statement::Primitive(Primitive::Table(table)) = &program.layout.statements[0] {
+            assert!(table.header.is_some());
+            let header = table.header.as_ref().unwrap();
+            assert_eq!(header.columns.len(), 2);
+            assert_eq!(header.columns[0].label, "Name");
+            assert_eq!(header.columns[0].modifiers.width, Some(10));
+            assert_eq!(header.columns[1].label, "Age");
+            assert_eq!(header.columns[1].modifiers.width, Some(5));
+
+            assert_eq!(table.rows.len(), 2);
+            assert_eq!(table.rows[0].cells.len(), 2);
+            assert_eq!(table.rows[0].cells[0].content, "Alice");
+            assert_eq!(table.rows[0].cells[1].content, "30");
+        } else {
+            panic!("Expected table primitive");
+        }
+    }
+
+    #[test]
+    fn table_col_requires_width() {
+        let err = parse_err(r#"layout { table { header { col "Name" } } }"#);
+        assert!(err.message.contains("col requires width"));
+    }
+
+    #[test]
+    fn table_header_requires_col() {
+        let err = parse_err("layout { table { header { } } }");
+        assert!(err.message.contains("header requires at least one col"));
+    }
+
+    #[test]
+    fn table_row_requires_cell() {
+        let err = parse_err("layout { table { tr { } } }");
+        assert!(err.message.contains("tr requires at least one td"));
+    }
+
+    #[test]
+    fn table_cell_with_align() {
+        let program = parse(r#"layout {
+            table {
+                header { col "Value" width:10 align:right }
+                tr { td "123" align:right }
+            }
+        }"#);
+
+        if let Statement::Primitive(Primitive::Table(table)) = &program.layout.statements[0] {
+            let header = table.header.as_ref().unwrap();
+            assert_eq!(header.columns[0].modifiers.align, Some(Align::Right));
+            assert_eq!(table.rows[0].cells[0].modifiers.align, Some(Align::Right));
+        } else {
+            panic!("Expected table primitive");
+        }
+    }
+
+    // ========== List tests ==========
+
+    #[test]
+    fn list_with_items() {
+        let program = parse(r#"layout {
+            list {
+                item "First"
+                item "Second" selected
+                item "Third"
+            }
+        }"#);
+
+        if let Statement::Primitive(Primitive::List(list)) = &program.layout.statements[0] {
+            assert_eq!(list.items.len(), 3);
+            assert_eq!(list.items[0].content, "First");
+            assert!(!list.items[0].selected);
+            assert_eq!(list.items[1].content, "Second");
+            assert!(list.items[1].selected);
+            assert_eq!(list.items[2].content, "Third");
+            assert!(!list.items[2].selected);
+        } else {
+            panic!("Expected list primitive");
+        }
+    }
+
+    #[test]
+    fn list_requires_item() {
+        let err = parse_err("layout { list { } }");
+        assert!(err.message.contains("list requires at least one item"));
+    }
+
+    // ========== Modifier validation tests ==========
+
+    #[test]
+    fn unknown_attribute_error() {
+        let err = parse_err("layout { window foo:bar { } }");
+        assert!(err.message.contains("Unknown attribute"));
+    }
+
+    #[test]
+    fn invalid_align_value() {
+        let err = parse_err(r#"layout { text "hi" align:middle }"#);
+        assert!(err.message.contains("align requires left/center/right"));
+    }
+
+    #[test]
+    fn invalid_style_value() {
+        let err = parse_err(r#"layout { text "hi" style:italic }"#);
+        assert!(err.message.contains("style requires bold/dim/danger"));
+    }
+
+    #[test]
+    fn invalid_type_value() {
+        let err = parse_err(r#"layout { alert type:critical { } }"#);
+        assert!(err.message.contains("type requires error/warn/info"));
+    }
+
+    #[test]
+    fn width_requires_number() {
+        let err = parse_err(r#"layout { window width:"big" { } }"#);
+        assert!(err.message.contains("width requires a number"));
+    }
+
+    // ========== Complex structure tests ==========
+
+    #[test]
+    fn login_form() {
+        let program = parse(r#"layout {
+            window "Login" {
+                row { text "Username:" input width:20 }
+                row { text "Password:" input width:20 }
+                separator
+                row { spacer button "Cancel" button "Login" }
+            }
+        }"#);
+
+        if let Statement::Container(window) = &program.layout.statements[0] {
+            assert_eq!(window.title, Some("Login".to_string()));
+            assert_eq!(window.statements.len(), 4);
+        } else {
+            panic!("Expected window container");
+        }
+    }
+
+    #[test]
+    fn settings_panel() {
+        let program = parse(r#"layout {
+            window "Preferences" width:45 {
+                section "Appearance" {
+                    row { text "Theme:" radio "Dark" selected radio "Light" }
+                    checkbox "Line numbers" checked
+                    checkbox "Word wrap"
+                }
+                section "Editor" {
+                    row { text "Tab size:" input width:4 placeholder:"4" }
+                    row { text "Font:" select "Mono" width:12 }
+                }
+                separator
+                row { spacer button "Apply" }
+            }
+        }"#);
+
+        if let Statement::Container(window) = &program.layout.statements[0] {
+            assert_eq!(window.title, Some("Preferences".to_string()));
+            assert_eq!(window.modifiers.width, Some(45));
+            // 2 sections + separator + 1 row = 4
+            assert_eq!(window.statements.len(), 4);
+        } else {
+            panic!("Expected window container");
+        }
+    }
+
+    #[test]
+    fn build_status() {
+        let program = parse(r#"layout {
+            window "Build" width:35 {
+                text "Compiling project..."
+                progress 65
+                separator
+                alert type:warn {
+                    text "unused variable"
+                }
+            }
+        }"#);
+
+        if let Statement::Container(window) = &program.layout.statements[0] {
+            assert_eq!(window.statements.len(), 4);
+        } else {
+            panic!("Expected window container");
+        }
+    }
+}
diff --git a/src-tauri/src/asciiscript/render.rs b/src-tauri/src/asciiscript/render.rs
new file mode 100644
index 0000000..da62ad5
--- /dev/null
+++ b/src-tauri/src/asciiscript/render.rs
@@ -0,0 +1,1078 @@
+//! Renderer for asciiscript AST.
+//!
+//! Converts AST to ASCII box art following the render pipeline:
+//! 1. Measure: Bottom-up natural width computation
+//! 2. Resolve: Top-down width assignment
+//! 3. Allocate: Distribute space in rows, expand spacers
+//! 4. Render: Generate ASCII lines
+
+use crate::asciiscript::ast::*;
+use crate::asciiscript::parser::{ParseError, Parser};
+use unicode_width::UnicodeWidthStr;
+
+/// Get the visual display width of a string (handles Unicode, emoji, CJK).
+fn display_width(s: &str) -> usize {
+    UnicodeWidthStr::width(s)
+}
+
+/// Pad a string to a target visual width using spaces.
+/// Standard format! padding doesn't work for Unicode because it counts codepoints, not display width.
+fn pad_to_width(s: &str, target_width: usize) -> String {
+    let current_width = display_width(s);
+    if current_width >= target_width {
+        s.to_string()
+    } else {
+        format!("{}{}", s, " ".repeat(target_width - current_width))
+    }
+}
+
+/// Truncate a string to fit within a maximum visual width.
+/// Adds "…" suffix if truncated.
+fn truncate_to_width(s: &str, max_width: usize) -> String {
+    if max_width == 0 {
+        return String::new();
+    }
+    let current_width = display_width(s);
+    if current_width <= max_width {
+        return s.to_string();
+    }
+    // Need to truncate - walk characters and accumulate width
+    let mut result = String::new();
+    let mut width = 0;
+    let ellipsis_width = 1; // "…" is width 1
+    let target = max_width.saturating_sub(ellipsis_width);
+
+    for c in s.chars() {
+        let char_width = unicode_width::UnicodeWidthChar::width(c).unwrap_or(0);
+        if width + char_width > target {
+            break;
+        }
+        result.push(c);
+        width += char_width;
+    }
+    result.push('…');
+    result
+}
+
+/// Fit a string to exactly the target visual width: truncate if too long, pad if too short.
+fn fit_to_width(s: &str, target_width: usize) -> String {
+    let current_width = display_width(s);
+    if current_width > target_width {
+        truncate_to_width(s, target_width)
+    } else if current_width < target_width {
+        pad_to_width(s, target_width)
+    } else {
+        s.to_string()
+    }
+}
+
+/// Render asciiscript source to ASCII art.
+pub fn render(source: &str) -> Result<String, ParseError> {
+    let program = Parser::parse(source)?;
+    Ok(render_program(&program))
+}
+
+/// Render a parsed program to ASCII art.
+pub fn render_program(program: &Program) -> String {
+    let mut ctx = RenderContext::new();
+    render_layout(&program.layout, &mut ctx, None);
+    ctx.build()
+}
+
+/// Rendering context that accumulates output lines.
+struct RenderContext {
+    lines: Vec<String>,
+    indent: usize,
+}
+
+impl RenderContext {
+    fn new() -> Self {
+        Self {
+            lines: Vec::new(),
+            indent: 0,
+        }
+    }
+
+    fn push_line(&mut self, line: &str) {
+        let indent = " ".repeat(self.indent);
+        self.lines.push(format!("{}{}", indent, line));
+    }
+
+    fn push_lines(&mut self, lines: &[String]) {
+        for line in lines {
+            self.push_line(line);
+        }
+    }
+
+    fn with_indent<F>(&mut self, delta: usize, f: F)
+    where
+        F: FnOnce(&mut Self),
+    {
+        self.indent += delta;
+        f(self);
+        self.indent -= delta;
+    }
+
+    fn build(self) -> String {
+        self.lines.join("\n")
+    }
+}
+
+// ========== Measurement ==========
+
+/// Measured dimensions for an element.
+#[derive(Debug, Clone, Default)]
+struct Measured {
+    width: usize,
+    height: usize,
+    is_spacer: bool,
+}
+
+impl Measured {
+    fn new(width: usize, height: usize) -> Self {
+        Self { width, height, is_spacer: false }
+    }
+
+    fn spacer() -> Self {
+        Self { width: 0, height: 1, is_spacer: true }
+    }
+}
+
+fn measure_statement(stmt: &Statement) -> Measured {
+    match stmt {
+        Statement::Container(c) => measure_container(c),
+        Statement::Primitive(p) => measure_primitive(p),
+    }
+}
+
+fn measure_container(c: &Container) -> Measured {
+    // Measure all children
+    let child_measurements: Vec<Measured> = c.statements.iter().map(measure_statement).collect();
+
+    match c.kind {
+        ContainerKind::Row => {
+            // Row: width = sum of children + gaps, height = max height
+            let gap = c.modifiers.gap.unwrap_or(1) as usize;
+            let non_spacer_count = child_measurements.iter().filter(|m| !m.is_spacer).count();
+            let gaps = if non_spacer_count > 1 { (non_spacer_count - 1) * gap } else { 0 };
+            let width: usize = child_measurements.iter().map(|m| m.width).sum::<usize>() + gaps;
+            let height = child_measurements.iter().map(|m| m.height).max().unwrap_or(1);
+            Measured::new(width, height)
+        }
+        ContainerKind::Column | ContainerKind::Section => {
+            // Column/Section: width = max width, height = sum of heights + gaps
+            let gap = c.modifiers.gap.unwrap_or(0) as usize;
+            let width = child_measurements.iter().map(|m| m.width).max().unwrap_or(0);
+            let height: usize = child_measurements.iter().map(|m| m.height).sum::<usize>()
+                + if child_measurements.len() > 1 { (child_measurements.len() - 1) * gap } else { 0 };
+
+            // Section adds 2 for indent
+            if c.kind == ContainerKind::Section {
+                Measured::new(width + 2, height + 1) // +1 for header
+            } else {
+                Measured::new(width, height)
+            }
+        }
+        ContainerKind::Window | ContainerKind::Box => {
+            // Box/Window: add borders + padding
+            let padding = c.modifiers.padding.unwrap_or(1) as usize;
+            let content_width = child_measurements.iter().map(|m| m.width).max().unwrap_or(0);
+            let content_height: usize = child_measurements.iter().map(|m| m.height).sum();
+
+            // Title affects width
+            let title_width = c.title.as_ref().map(|t| display_width(t) + 4).unwrap_or(0); // "-- Title "
+            let inner_width = content_width.max(title_width);
+
+            // Border (2) + padding on each side
+            let measured_width = inner_width + 2 + (padding * 2);
+            // Respect explicit width if set, but ensure content still fits
+            let width = c.modifiers.width
+                .map(|w| (w as usize).max(measured_width))
+                .unwrap_or(measured_width);
+            let height = content_height + 2 + (padding * 2); // top/bottom border + padding
+
+            Measured::new(width, height)
+        }
+    }
+}
+
+fn measure_primitive(p: &Primitive) -> Measured {
+    match p {
+        Primitive::Text { content, .. } => {
+            let lines: Vec<&str> = content.lines().collect();
+            let width = lines.iter().map(|l| display_width(l)).max().unwrap_or(0);
+            Measured::new(width, lines.len().max(1))
+        }
+        Primitive::Input { modifiers, .. } => {
+            let width = modifiers.width.unwrap_or(10) as usize;
+            Measured::new(width, 1)
+        }
+        Primitive::Checkbox { label, .. } => {
+            // [x] Label
+            Measured::new(4 + display_width(label), 1)
+        }
+        Primitive::Radio { label, .. } => {
+            // (o) Label
+            Measured::new(4 + display_width(label), 1)
+        }
+        Primitive::Select { modifiers, .. } => {
+            let width = modifiers.width.unwrap_or(10) as usize;
+            Measured::new(width, 1)
+        }
+        Primitive::Button { label, .. } => {
+            // [ Label ]
+            Measured::new(display_width(label) + 4, 1)
+        }
+        Primitive::Link { text, .. } => {
+            Measured::new(display_width(text), 1)
+        }
+        Primitive::Code { content, .. } | Primitive::Raw { content, .. } => {
+            let lines: Vec<&str> = content.lines().collect();
+            let width = lines.iter().map(|l| display_width(l)).max().unwrap_or(0);
+            Measured::new(width, lines.len().max(1))
+        }
+        Primitive::Separator { .. } => {
+            // Will expand to container width
+            Measured::new(1, 1)
+        }
+        Primitive::Spacer { .. } => {
+            Measured::spacer()
+        }
+        Primitive::Progress { .. } => {
+            // Default progress bar width
+            Measured::new(20, 1)
+        }
+        Primitive::Alert { statements, .. } => {
+            // Measure children + add alert chrome
+            let child_measurements: Vec<Measured> = statements.iter().map(measure_statement).collect();
+            let content_width = child_measurements.iter().map(|m| m.width).max().unwrap_or(0);
+            let content_height: usize = child_measurements.iter().map(|m| m.height).sum();
+            // Alert adds "═ TYPE ═" header + borders
+            Measured::new(content_width + 4, content_height + 2)
+        }
+        Primitive::Table(table) => measure_table(table),
+        Primitive::List(list) => measure_list(list),
+    }
+}
+
+fn measure_table(table: &Table) -> Measured {
+    // Calculate total width from column definitions
+    let col_widths: Vec<usize> = table.header.as_ref()
+        .map(|h| h.columns.iter().map(|c| c.modifiers.width.unwrap_or(10) as usize).collect())
+        .unwrap_or_else(|| vec![10]); // fallback
+
+    // Width = sum of columns + separators (| around each + | between)
+    let width = col_widths.iter().sum::<usize>() + col_widths.len() + 1 + (col_widths.len() * 2);
+
+    // Height = header (2 lines with separator) + rows
+    let header_height = if table.header.is_some() { 2 } else { 0 };
+    let height = header_height + table.rows.len() + 2; // +2 for top/bottom border
+
+    Measured::new(width, height)
+}
+
+fn measure_list(list: &List) -> Measured {
+    let width = list.items.iter()
+        .map(|item| display_width(&item.content) + 3) // "   " or " > "
+        .max()
+        .unwrap_or(0);
+    Measured::new(width, list.items.len())
+}
+
+// ========== Rendering ==========
+
+fn render_layout(layout: &Layout, ctx: &mut RenderContext, width: Option<usize>) {
+    for stmt in &layout.statements {
+        render_statement(stmt, ctx, width);
+    }
+}
+
+fn render_statement(stmt: &Statement, ctx: &mut RenderContext, width: Option<usize>) {
+    match stmt {
+        Statement::Container(c) => render_container(c, ctx, width),
+        Statement::Primitive(p) => render_primitive(p, ctx, width),
+    }
+}
+
+fn render_container(c: &Container, ctx: &mut RenderContext, parent_width: Option<usize>) {
+    // Determine our width
+    let explicit_width = c.modifiers.width.map(|w| w as usize);
+    let measured = measure_container(c);
+
+    // For windows/boxes: use max of (explicit, measured) to ensure content fits
+    // For other containers: prefer explicit/parent width, fall back to measured
+    let width = match c.kind {
+        ContainerKind::Window | ContainerKind::Box => {
+            let base = explicit_width.or(parent_width).unwrap_or(measured.width);
+            base.max(measured.width)
+        }
+        _ => explicit_width.or(parent_width).unwrap_or(measured.width),
+    };
+
+    match c.kind {
+        ContainerKind::Window | ContainerKind::Box => {
+            render_box(c, ctx, width);
+        }
+        ContainerKind::Section => {
+            render_section(c, ctx, width);
+        }
+        ContainerKind::Row => {
+            render_row(c, ctx, width);
+        }
+        ContainerKind::Column => {
+            for stmt in &c.statements {
+                render_statement(stmt, ctx, Some(width));
+            }
+        }
+    }
+}
+
+fn render_box(c: &Container, ctx: &mut RenderContext, width: usize) {
+    let padding = c.modifiers.padding.unwrap_or(1) as usize;
+    let content_width = width.saturating_sub(2 + padding * 2);
+
+    // Top border with optional title
+    let top_border = if let Some(title) = &c.title {
+        // Truncate title if it would overflow: need room for "+-- " and " -+"
+        let max_title_width = width.saturating_sub(6); // +-- title -+
+        let display_title = if display_width(title) > max_title_width {
+            truncate_to_width(title, max_title_width)
+        } else {
+            title.clone()
+        };
+        let title_part = format!("-- {} ", display_title);
+        let title_visual_width = display_width(&title_part);
+        let remaining = width.saturating_sub(title_visual_width + 2); // +2 for the two '+' chars
+        format!("+{}{}+", title_part, "-".repeat(remaining))
+    } else {
+        format!("+{}+", "-".repeat(width.saturating_sub(2)))
+    };
+    ctx.push_line(&top_border);
+
+    // Top padding
+    for _ in 0..padding {
+        ctx.push_line(&format!("|{}|", " ".repeat(width.saturating_sub(2))));
+    }
+
+    // Render children
+    let mut child_lines: Vec<String> = Vec::new();
+    let mut child_ctx = RenderContext::new();
+    for stmt in &c.statements {
+        render_statement(stmt, &mut child_ctx, Some(content_width));
+    }
+
+    // Wrap child lines in borders (truncate if too wide, pad if too narrow)
+    for line in child_ctx.lines {
+        let fitted = fit_to_width(&line, content_width);
+        let padding_str = " ".repeat(padding);
+        child_lines.push(format!("|{}{}{}|", padding_str, fitted, padding_str));
+    }
+
+    ctx.push_lines(&child_lines);
+
+    // Bottom padding
+    for _ in 0..padding {
+        ctx.push_line(&format!("|{}|", " ".repeat(width.saturating_sub(2))));
+    }
+
+    // Bottom border
+    ctx.push_line(&format!("+{}+", "-".repeat(width.saturating_sub(2))));
+}
+
+fn render_section(c: &Container, ctx: &mut RenderContext, width: usize) {
+    // Section header
+    if let Some(title) = &c.title {
+        ctx.push_line(&format!("## {}", title));
+    }
+
+    // Render children with 2-space indent
+    ctx.with_indent(2, |ctx| {
+        for stmt in &c.statements {
+            render_statement(stmt, ctx, Some(width.saturating_sub(2)));
+        }
+    });
+}
+
+fn render_row(c: &Container, ctx: &mut RenderContext, width: usize) {
+    let gap = c.modifiers.gap.unwrap_or(1) as usize;
+
+    // Measure children
+    let measurements: Vec<Measured> = c.statements.iter().map(measure_statement).collect();
+
+    // Count spacers and calculate fixed content width
+    let spacer_count = measurements.iter().filter(|m| m.is_spacer).count();
+    let fixed_width: usize = measurements.iter().filter(|m| !m.is_spacer).map(|m| m.width).sum();
+    let non_spacer_count = measurements.iter().filter(|m| !m.is_spacer).count();
+    let gaps_width = if non_spacer_count > 1 { (non_spacer_count - 1) * gap } else { 0 };
+
+    // Calculate spacer width
+    let remaining = width.saturating_sub(fixed_width + gaps_width);
+    let spacer_width = if spacer_count > 0 { remaining / spacer_count } else { 0 };
+
+    // Render each child and collect their lines + track if spacer
+    let mut child_outputs: Vec<(Vec<String>, usize, bool)> = Vec::new(); // (lines, width, is_spacer)
+    for (stmt, m) in c.statements.iter().zip(measurements.iter()) {
+        if m.is_spacer {
+            let sw = if spacer_width > 0 { spacer_width } else { 1 };
+            child_outputs.push((vec![" ".repeat(sw)], sw, true));
+        } else {
+            let mut child_ctx = RenderContext::new();
+            render_statement(stmt, &mut child_ctx, None);
+            let child_width = child_ctx.lines.iter().map(|l| display_width(l)).max().unwrap_or(0);
+            child_outputs.push((child_ctx.lines, child_width, false));
+        }
+    }
+
+    // Find max height across all children
+    let max_height = child_outputs.iter().map(|(lines, _, _)| lines.len()).max().unwrap_or(1);
+
+    // Helper: should we add a gap before element at index i?
+    // Gaps only between non-spacer elements (matching measurement logic)
+    let should_add_gap = |i: usize| -> bool {
+        if i == 0 {
+            return false;
+        }
+        let curr_is_spacer = child_outputs[i].2;
+        let prev_is_spacer = child_outputs[i - 1].2;
+        !curr_is_spacer && !prev_is_spacer
+    };
+
+    // If all children are single-line, use simple horizontal join
+    if max_height == 1 {
+        let gap_str = " ".repeat(gap);
+        let mut result = String::new();
+        for (i, (lines, _, _)) in child_outputs.iter().enumerate() {
+            if should_add_gap(i) {
+                result.push_str(&gap_str);
+            }
+            if let Some(line) = lines.first() {
+                result.push_str(line);
+            }
+        }
+        ctx.push_line(&result);
+    } else {
+        // Multi-line: join children horizontally, line by line
+        let gap_str = " ".repeat(gap);
+        for row_idx in 0..max_height {
+            let mut line = String::new();
+            for (i, (lines, child_width, _)) in child_outputs.iter().enumerate() {
+                if should_add_gap(i) {
+                    line.push_str(&gap_str);
+                }
+                if row_idx < lines.len() {
+                    let child_line = &lines[row_idx];
+                    line.push_str(child_line);
+                    // Pad to child width if needed for alignment (use visual width)
+                    let child_visual_width = display_width(child_line);
+                    if child_visual_width < *child_width {
+                        line.push_str(&" ".repeat(child_width - child_visual_width));
+                    }
+                } else {
+                    // Pad with spaces for shorter children
+                    line.push_str(&" ".repeat(*child_width));
+                }
+            }
+            ctx.push_line(&line);
+        }
+    }
+}
+
+fn render_primitive(p: &Primitive, ctx: &mut RenderContext, width: Option<usize>) {
+    match p {
+        Primitive::Text { content, modifiers, .. } => {
+            for line in content.lines() {
+                let output = if let Some(w) = width {
+                    let line_width = display_width(line);
+                    match modifiers.align {
+                        Some(Align::Center) => {
+                            let total_padding = w.saturating_sub(line_width);
+                            let left_pad = total_padding / 2;
+                            let right_pad = total_padding - left_pad;
+                            format!("{}{}{}", " ".repeat(left_pad), line, " ".repeat(right_pad))
+                        }
+                        Some(Align::Right) => {
+                            let padding = w.saturating_sub(line_width);
+                            format!("{}{}", " ".repeat(padding), line)
+                        }
+                        _ => line.to_string(),
+                    }
+                } else {
+                    line.to_string()
+                };
+                ctx.push_line(&output);
+            }
+        }
+        Primitive::Input { modifiers, .. } => {
+            let w = modifiers.width.unwrap_or(10) as usize;
+            let inner_width = w.saturating_sub(2);
+            let fill = if let Some(placeholder) = &modifiers.placeholder {
+                let p_width = display_width(placeholder);
+                if p_width >= inner_width {
+                    truncate_to_width(placeholder, inner_width)
+                } else {
+                    format!("{}{}", placeholder, "_".repeat(inner_width - p_width))
+                }
+            } else {
+                "_".repeat(inner_width)
+            };
+            ctx.push_line(&format!("[{}]", fill));
+        }
+        Primitive::Checkbox { label, checked, .. } => {
+            let mark = if *checked { "x" } else { " " };
+            ctx.push_line(&format!("[{}] {}", mark, label));
+        }
+        Primitive::Radio { label, selected, .. } => {
+            let mark = if *selected { "o" } else { " " };
+            ctx.push_line(&format!("({}) {}", mark, label));
+        }
+        Primitive::Select { value, modifiers, .. } => {
+            let w = modifiers.width.unwrap_or(10) as usize;
+            let inner_width = w.saturating_sub(3); // "[" + " v]"
+            let value_width = display_width(value);
+            let formatted = if value_width > inner_width {
+                truncate_to_width(value, inner_width)
+            } else {
+                pad_to_width(value, inner_width)
+            };
+            ctx.push_line(&format!("[{} v]", formatted));
+        }
+        Primitive::Button { label, .. } => {
+            ctx.push_line(&format!("[ {} ]", label));
+        }
+        Primitive::Link { text, .. } => {
+            ctx.push_line(text);
+        }
+        Primitive::Code { content, .. } | Primitive::Raw { content, .. } => {
+            for line in content.lines() {
+                ctx.push_line(line);
+            }
+        }
+        Primitive::Separator { .. } => {
+            let w = width.unwrap_or(40);
+            ctx.push_line(&"-".repeat(w));
+        }
+        Primitive::Spacer { .. } => {
+            // Spacer is handled in row rendering
+        }
+        Primitive::Progress { value, .. } => {
+            let bar_width = width.unwrap_or(20).saturating_sub(7); // " 100%"
+            let filled = (bar_width * (*value as usize)) / 100;
+            let empty = bar_width - filled;
+            ctx.push_line(&format!(
+                "[{}{}] {}%",
+                "█".repeat(filled),
+                "░".repeat(empty),
+                value
+            ));
+        }
+        Primitive::Alert { alert_type, statements, .. } => {
+            render_alert(*alert_type, statements, ctx, width);
+        }
+        Primitive::Table(table) => {
+            render_table(table, ctx);
+        }
+        Primitive::List(list) => {
+            render_list(list, ctx);
+        }
+    }
+}
+
+fn render_alert(alert_type: AlertType, statements: &[Statement], ctx: &mut RenderContext, width: Option<usize>) {
+    // Measure content
+    let measurements: Vec<Measured> = statements.iter().map(measure_statement).collect();
+    let content_width = measurements.iter().map(|m| m.width).max().unwrap_or(0);
+    // Use parent width if provided, otherwise size to content
+    let total_width = width.unwrap_or(content_width + 4);
+    let inner_width = total_width.saturating_sub(4);
+
+    let (border_h, border_v, corner_tl, corner_tr, corner_bl, corner_br) = match alert_type {
+        AlertType::Error => ('═', '║', '╔', '╗', '╚', '╝'),
+        AlertType::Warn | AlertType::Info => ('─', '│', '┌', '┐', '└', '┘'),
+    };
+
+    let type_str = match alert_type {
+        AlertType::Error => "ERROR",
+        AlertType::Warn => "WARNING",
+        AlertType::Info => "INFO",
+    };
+
+    // Top border with type label (must match content width: inner_width + 4)
+    let label_part = format!("{} {} ", border_h, type_str);
+    let label_visual_width = display_width(&label_part);
+    let remaining = (inner_width + 2).saturating_sub(label_visual_width);
+    ctx.push_line(&format!(
+        "{}{}{}{}",
+        corner_tl,
+        label_part,
+        border_h.to_string().repeat(remaining),
+        corner_tr
+    ));
+
+    // Content
+    let mut child_ctx = RenderContext::new();
+    for stmt in statements {
+        render_statement(stmt, &mut child_ctx, Some(inner_width));
+    }
+
+    for line in child_ctx.lines {
+        let fitted = fit_to_width(&line, inner_width);
+        ctx.push_line(&format!("{} {} {}", border_v, fitted, border_v));
+    }
+
+    // Bottom border
+    ctx.push_line(&format!(
+        "{}{}{}",
+        corner_bl,
+        border_h.to_string().repeat(inner_width + 2),
+        corner_br
+    ));
+}
+
+fn render_table(table: &Table, ctx: &mut RenderContext) {
+    // Get column widths
+    let col_widths: Vec<usize> = table.header.as_ref()
+        .map(|h| h.columns.iter().map(|c| c.modifiers.width.unwrap_or(10) as usize).collect())
+        .unwrap_or_else(|| vec![10]);
+
+    let col_aligns: Vec<Align> = table.header.as_ref()
+        .map(|h| h.columns.iter().map(|c| c.modifiers.align.unwrap_or(Align::Left)).collect())
+        .unwrap_or_else(|| vec![Align::Left]);
+
+    // Helper to render a row (uses visual width for proper Unicode support)
+    let render_row_line = |cells: &[&str], widths: &[usize], aligns: &[Align]| -> String {
+        let mut parts: Vec<String> = Vec::new();
+        for (i, cell) in cells.iter().enumerate() {
+            let w = widths.get(i).copied().unwrap_or(10);
+            let align = aligns.get(i).copied().unwrap_or(Align::Left);
+            let cell_width = display_width(cell);
+            let truncated = if cell_width > w {
+                truncate_to_width(cell, w)
+            } else {
+                cell.to_string()
+            };
+            let truncated_width = display_width(&truncated);
+            let padding_needed = w.saturating_sub(truncated_width);
+            let formatted = match align {
+                Align::Left => format!("{}{}", truncated, " ".repeat(padding_needed)),
+                Align::Center => {
+                    let left = padding_needed / 2;
+                    let right = padding_needed - left;
+                    format!("{}{}{}", " ".repeat(left), truncated, " ".repeat(right))
+                }
+                Align::Right => format!("{}{}", " ".repeat(padding_needed), truncated),
+            };
+            parts.push(formatted);
+        }
+        format!("| {} |", parts.join(" | "))
+    };
+
+    // Helper for separator line (matches row format: +-col1-+-col2-+-col3-+)
+    let separator = |widths: &[usize]| -> String {
+        let parts: Vec<String> = widths.iter().map(|w| "-".repeat(*w)).collect();
+        format!("+-{}-+", parts.join("-+-"))
+    };
+
+    // Top border
+    ctx.push_line(&separator(&col_widths));
+
+    // Header
+    if let Some(header) = &table.header {
+        let labels: Vec<&str> = header.columns.iter().map(|c| c.label.as_str()).collect();
+        ctx.push_line(&render_row_line(&labels, &col_widths, &col_aligns));
+        ctx.push_line(&separator(&col_widths));
+    }
+
+    // Rows
+    for row in &table.rows {
+        let cells: Vec<&str> = row.cells.iter().map(|c| c.content.as_str()).collect();
+        ctx.push_line(&render_row_line(&cells, &col_widths, &col_aligns));
+    }
+
+    // Bottom border
+    ctx.push_line(&separator(&col_widths));
+}
+
+fn render_list(list: &List, ctx: &mut RenderContext) {
+    for item in &list.items {
+        let prefix = if item.selected { " > " } else { "   " };
+        ctx.push_line(&format!("{}{}", prefix, item.content));
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    fn render_test(source: &str) -> String {
+        render(source).unwrap()
+    }
+
+    // ========== Basic tests ==========
+
+    #[test]
+    fn empty_layout() {
+        let output = render_test("layout { }");
+        assert_eq!(output, "");
+    }
+
+    #[test]
+    fn simple_text() {
+        let output = render_test(r#"layout { text "Hello" }"#);
+        assert_eq!(output, "Hello");
+    }
+
+    #[test]
+    fn multiline_text() {
+        let output = render_test(r#"layout { text "Line 1\nLine 2" }"#);
+        assert!(output.contains("Line 1"));
+        // Note: \n is literal in the string, not a newline
+    }
+
+    // ========== Input tests ==========
+
+    #[test]
+    fn input_basic() {
+        let output = render_test("layout { input width:10 }");
+        assert_eq!(output, "[________]");
+    }
+
+    #[test]
+    fn input_with_placeholder() {
+        let output = render_test(r#"layout { input width:15 placeholder:"email" }"#);
+        assert_eq!(output, "[email________]");
+    }
+
+    // ========== Checkbox/Radio tests ==========
+
+    #[test]
+    fn checkbox_unchecked() {
+        let output = render_test(r#"layout { checkbox "Enable" }"#);
+        assert_eq!(output, "[ ] Enable");
+    }
+
+    #[test]
+    fn checkbox_checked() {
+        let output = render_test(r#"layout { checkbox "Enable" checked }"#);
+        assert_eq!(output, "[x] Enable");
+    }
+
+    #[test]
+    fn radio_unselected() {
+        let output = render_test(r#"layout { radio "Option A" }"#);
+        assert_eq!(output, "( ) Option A");
+    }
+
+    #[test]
+    fn radio_selected() {
+        let output = render_test(r#"layout { radio "Option A" selected }"#);
+        assert_eq!(output, "(o) Option A");
+    }
+
+    // ========== Select tests ==========
+
+    #[test]
+    fn select_basic() {
+        let output = render_test(r#"layout { select "Mono" width:10 }"#);
+        assert_eq!(output, "[Mono    v]");
+    }
+
+    // ========== Button tests ==========
+
+    #[test]
+    fn button_basic() {
+        let output = render_test(r#"layout { button "OK" }"#);
+        assert_eq!(output, "[ OK ]");
+    }
+
+    #[test]
+    fn button_cancel() {
+        let output = render_test(r#"layout { button "Cancel" }"#);
+        assert_eq!(output, "[ Cancel ]");
+    }
+
+    // ========== Link tests ==========
+
+    #[test]
+    fn link_basic() {
+        let output = render_test(r#"layout { link "Click here" }"#);
+        assert_eq!(output, "Click here");
+    }
+
+    // ========== Separator tests ==========
+
+    #[test]
+    fn separator_basic() {
+        let output = render_test("layout { separator }");
+        assert!(output.starts_with("-"));
+        assert!(output.len() >= 10);
+    }
+
+    // ========== Progress tests ==========
+
+    #[test]
+    fn progress_zero() {
+        let output = render_test("layout { progress 0 }");
+        assert!(output.contains("░"));
+        assert!(output.contains("0%"));
+    }
+
+    #[test]
+    fn progress_fifty() {
+        let output = render_test("layout { progress 50 }");
+        assert!(output.contains("█"));
+        assert!(output.contains("░"));
+        assert!(output.contains("50%"));
+    }
+
+    #[test]
+    fn progress_hundred() {
+        let output = render_test("layout { progress 100 }");
+        assert!(output.contains("█"));
+        assert!(output.contains("100%"));
+    }
+
+    // ========== Row tests ==========
+
+    #[test]
+    fn row_simple() {
+        let output = render_test(r#"layout { row { text "A" text "B" } }"#);
+        assert!(output.contains("A"));
+        assert!(output.contains("B"));
+    }
+
+    #[test]
+    fn row_with_spacer() {
+        let output = render_test(r#"layout {
+            window width:30 {
+                row { text "Left" spacer text "Right" }
+            }
+        }"#);
+        assert!(output.contains("Left"));
+        assert!(output.contains("Right"));
+        // Spacer should create space between them
+    }
+
+    // ========== Section tests ==========
+
+    #[test]
+    fn section_header() {
+        let output = render_test(r#"layout { section "Options" { text "Content" } }"#);
+        assert!(output.contains("## Options"));
+        assert!(output.contains("Content"));
+    }
+
+    #[test]
+    fn section_indentation() {
+        let output = render_test(r#"layout { section "Options" { text "Indented" } }"#);
+        let lines: Vec<&str> = output.lines().collect();
+        assert_eq!(lines[0], "## Options");
+        assert!(lines[1].starts_with("  ")); // 2-space indent
+    }
+
+    // ========== Box/Window tests ==========
+
+    #[test]
+    fn window_empty() {
+        let output = render_test(r#"layout { window "Test" { } }"#);
+        assert!(output.contains("+--"));
+        assert!(output.contains("Test"));
+        assert!(output.contains("+"));
+    }
+
+    #[test]
+    fn window_with_content() {
+        let output = render_test(r#"layout {
+            window "Title" {
+                text "Hello"
+            }
+        }"#);
+        assert!(output.contains("Title"));
+        assert!(output.contains("Hello"));
+        assert!(output.contains("|"));
+    }
+
+    #[test]
+    fn box_nested() {
+        let output = render_test(r#"layout {
+            window "Outer" {
+                box "Inner" {
+                    text "Content"
+                }
+            }
+        }"#);
+        assert!(output.contains("Outer"));
+        assert!(output.contains("Inner"));
+        assert!(output.contains("Content"));
+    }
+
+    // ========== Code/Raw tests ==========
+
+    #[test]
+    fn code_single_line() {
+        let output = render_test(r#"layout { code "fn main() {}" }"#);
+        assert_eq!(output, "fn main() {}");
+    }
+
+    #[test]
+    fn raw_ascii_art() {
+        let output = render_test(r#"layout {
+            raw ```
+┌───┐
+│ A │
+└───┘
+```
+        }"#);
+        assert!(output.contains("┌───┐"));
+        assert!(output.contains("│ A │"));
+        assert!(output.contains("└───┘"));
+    }
+
+    // ========== Alert tests ==========
+
+    #[test]
+    fn alert_error() {
+        let output = render_test(r#"layout { alert type:error { text "Error!" } }"#);
+        assert!(output.contains("ERROR"));
+        assert!(output.contains("Error!"));
+        assert!(output.contains("╔"));
+        assert!(output.contains("╝"));
+    }
+
+    #[test]
+    fn alert_warn() {
+        let output = render_test(r#"layout { alert type:warn { text "Warning" } }"#);
+        assert!(output.contains("WARNING"));
+        assert!(output.contains("Warning"));
+        assert!(output.contains("┌"));
+        assert!(output.contains("┘"));
+    }
+
+    #[test]
+    fn alert_info() {
+        let output = render_test(r#"layout { alert type:info { text "Info" } }"#);
+        assert!(output.contains("INFO"));
+        assert!(output.contains("Info"));
+    }
+
+    // ========== Table tests ==========
+
+    #[test]
+    fn table_simple() {
+        let output = render_test(r#"layout {
+            table {
+                header { col "Name" width:10 col "Age" width:5 }
+                tr { td "Alice" td "30" }
+                tr { td "Bob" td "25" }
+            }
+        }"#);
+        assert!(output.contains("Name"));
+        assert!(output.contains("Age"));
+        assert!(output.contains("Alice"));
+        assert!(output.contains("30"));
+        assert!(output.contains("Bob"));
+        assert!(output.contains("25"));
+        assert!(output.contains("|"));
+        assert!(output.contains("+"));
+    }
+
+    #[test]
+    fn table_alignment() {
+        let output = render_test(r#"layout {
+            table {
+                header { col "Value" width:10 align:right }
+                tr { td "123" }
+            }
+        }"#);
+        // Right-aligned "Value" and "123"
+        assert!(output.contains("Value"));
+        assert!(output.contains("123"));
+    }
+
+    // ========== List tests ==========
+
+    #[test]
+    fn list_simple() {
+        let output = render_test(r#"layout {
+            list {
+                item "First"
+                item "Second"
+                item "Third"
+            }
+        }"#);
+        assert!(output.contains("First"));
+        assert!(output.contains("Second"));
+        assert!(output.contains("Third"));
+    }
+
+    #[test]
+    fn list_with_selection() {
+        let output = render_test(r#"layout {
+            list {
+                item "A"
+                item "B" selected
+                item "C"
+            }
+        }"#);
+        let lines: Vec<&str> = output.lines().collect();
+        assert!(lines[0].contains("A"));
+        assert!(lines[1].contains(">"));
+        assert!(lines[1].contains("B"));
+        assert!(lines[2].contains("C"));
+    }
+
+    // ========== Complex examples ==========
+
+    #[test]
+    fn login_form() {
+        let output = render_test(r#"layout {
+            window "Login" {
+                row { text "Username:" input width:20 }
+                row { text "Password:" input width:20 }
+                separator
+                row { spacer button "Cancel" button "Login" }
+            }
+        }"#);
+        assert!(output.contains("Login"));
+        assert!(output.contains("Username:"));
+        assert!(output.contains("Password:"));
+        assert!(output.contains("[ Cancel ]"));
+        assert!(output.contains("[ Login ]"));
+    }
+
+    #[test]
+    fn settings_panel() {
+        let output = render_test(r#"layout {
+            window "Preferences" width:45 {
+                section "Appearance" {
+                    checkbox "Dark mode" checked
+                    checkbox "Line numbers"
+                }
+                separator
+                row { spacer button "Apply" }
+            }
+        }"#);
+        assert!(output.contains("Preferences"));
+        assert!(output.contains("## Appearance"));
+        assert!(output.contains("[x] Dark mode"));
+        assert!(output.contains("[ ] Line numbers"));
+        assert!(output.contains("[ Apply ]"));
+    }
+
+    #[test]
+    fn build_status() {
+        let output = render_test(r#"layout {
+            window "Build" {
+                text "Compiling..."
+                progress 65
+                alert type:warn {
+                    text "Unused variable"
+                }
+            }
+        }"#);
+        assert!(output.contains("Build"));
+        assert!(output.contains("Compiling..."));
+        assert!(output.contains("65%"));
+        assert!(output.contains("WARNING"));
+        assert!(output.contains("Unused variable"));
+    }
+}
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_error.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_error.snap
new file mode 100644
index 0000000..57f2b96
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_error.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        alert type:error {\n            text \"Something went wrong!\"\n        }\n    }\"#).unwrap()"
+---
+╔═ ERROR ═══════════════╗
+║ Something went wrong! ║
+╚═══════════════════════╝
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_info.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_info.snap
new file mode 100644
index 0000000..8710594
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_info.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        alert type:info {\n            text \"Here's some information\"\n        }\n    }\"#).unwrap()"
+---
+┌─ INFO ──────────────────┐
+│ Here's some information │
+└─────────────────────────┘
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_warning.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_warning.snap
new file mode 100644
index 0000000..7309c67
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_warning.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        alert type:warn {\n            text \"Proceed with caution\"\n        }\n    }\"#).unwrap()"
+---
+┌─ WARNING ────────────┐
+│ Proceed with caution │
+└──────────────────────┘
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_with_code.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_with_code.snap
new file mode 100644
index 0000000..542b978
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_with_code.snap
@@ -0,0 +1,8 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        alert type:warn {\n            text \"Deprecation warning:\"\n            code \"use_old_api() -> use_new_api()\"\n        }\n    }\"#).unwrap()"
+---
+┌─ WARNING ──────────────────────┐
+│ Deprecation warning:           │
+│ use_old_api() -> use_new_api() │
+└────────────────────────────────┘
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_with_multiple_lines.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_with_multiple_lines.snap
new file mode 100644
index 0000000..2a71140
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__alert_with_multiple_lines.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        alert type:error {\n            text \"Error: Operation failed\"\n            text \"Reason: Network timeout\"\n            text \"Action: Please retry\"\n        }\n    }\"#).unwrap()"
+---
+╔═ ERROR ═════════════════╗
+║ Error: Operation failed ║
+║ Reason: Network timeout ║
+║ Action: Please retry    ║
+╚═════════════════════════╝
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__box_titled.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__box_titled.snap
new file mode 100644
index 0000000..fa4aaf9
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__box_titled.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        box \"Settings\" {\n            text \"Box content\"\n        }\n    }\"#).unwrap()"
+---
++-- Settings --+
+|              |
+| Box content  |
+|              |
++--------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__build_status_dialog.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__build_status_dialog.snap
new file mode 100644
index 0000000..68139c0
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__build_status_dialog.snap
@@ -0,0 +1,15 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Build Status\" width:40 {\n            text \"Compiling project...\"\n            progress 65\n            separator\n            alert type:warn {\n                text \"unused variable `x`\"\n            }\n            spacer\n            row { spacer button \"Cancel\" }\n        }\n    }\"#).unwrap()"
+---
++-- Build Status ----------------------+
+|                                      |
+| Compiling project...                 |
+| [██████████████████░░░░░░░░░░░] 65%  |
+| ------------------------------------ |
+| ┌─ WARNING ────────────────────────┐ |
+| │ unused variable `x`              │ |
+| └──────────────────────────────────┘ |
+|                           [ Cancel ] |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__buttons.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__buttons.snap
new file mode 100644
index 0000000..15115cb
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__buttons.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        button \"OK\"\n        button \"Cancel\"\n        button \"Submit Form\"\n    }\"#).unwrap()"
+---
+[ OK ]
+[ Cancel ]
+[ Submit Form ]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__checkbox_states.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__checkbox_states.snap
new file mode 100644
index 0000000..c7492ce
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__checkbox_states.snap
@@ -0,0 +1,6 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        checkbox \"Unchecked option\"\n        checkbox \"Checked option\" checked\n    }\"#).unwrap()"
+---
+[ ] Unchecked option
+[x] Checked option
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__code_block.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__code_block.snap
new file mode 100644
index 0000000..0615862
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__code_block.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        code ```\nfn main() {\n    println!(\"Hello, world!\");\n}\n```\n    }\"#).unwrap()"
+---
+fn main() {
+    println!("Hello, world!");
+}
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__code_in_box.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__code_in_box.snap
new file mode 100644
index 0000000..7c38625
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__code_in_box.snap
@@ -0,0 +1,10 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        box \"Example\" {\n            code ```\nlet x = 42;\nprintln!(\"{}\", x);\n```\n        }\n    }\"#).unwrap()"
+---
++-- Example ---------+
+|                    |
+| let x = 42;        |
+| println!("{}", x); |
+|                    |
++--------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__complex_nested_rows.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__complex_nested_rows.snap
new file mode 100644
index 0000000..2086355
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__complex_nested_rows.snap
@@ -0,0 +1,11 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:60 {\n            row {\n                column {\n                    text \"Left Column\"\n                    checkbox \"Option A\"\n                    checkbox \"Option B\"\n                }\n                column {\n                    text \"Right Column\"\n                    radio \"Choice 1\"\n                    radio \"Choice 2\" selected\n                }\n            }\n        }\n    }\"#).unwrap()"
+---
++----------------------------------------------------------+
+|                                                          |
+| Left Column  Right Column                                |
+| [ ] Option A ( ) Choice 1                                |
+| [ ] Option B (o) Choice 2                                |
+|                                                          |
++----------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__confirmation_dialog.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__confirmation_dialog.snap
new file mode 100644
index 0000000..60ef650
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__confirmation_dialog.snap
@@ -0,0 +1,13 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Confirm Delete\" width:35 {\n            alert type:error {\n                text \"This action cannot be undone!\"\n            }\n            spacer\n            text \"Delete 5 selected files?\"\n            spacer\n            row { spacer button \"Cancel\" button \"Delete\" style:danger }\n        }\n    }\"#).unwrap()"
+---
++-- Confirm Delete -----------------+
+|                                   |
+| ╔═ ERROR ═══════════════════════╗ |
+| ║ This action cannot be undone! ║ |
+| ╚═══════════════════════════════╝ |
+| Delete 5 selected files?          |
+|             [ Cancel ] [ Delete ] |
+|                                   |
++-----------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__dashboard.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__dashboard.snap
new file mode 100644
index 0000000..700c768
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__dashboard.snap
@@ -0,0 +1,25 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Dashboard\" width:60 {\n            row {\n                box \"Stats\" {\n                    text \"Users: 1,234\"\n                    text \"Active: 567\"\n                    text \"New: 89\"\n                }\n                box \"Health\" {\n                    progress 85\n                    text \"System OK\" style:bold\n                }\n            }\n            separator\n            section \"Recent Activity\" {\n                table {\n                    header {\n                        col \"Time\" width:10\n                        col \"User\" width:15\n                        col \"Action\" width:20\n                    }\n                    tr { td \"10:30\" td \"alice\" td \"Login\" }\n                    tr { td \"10:25\" td \"bob\" td \"Upload file\" }\n                    tr { td \"10:20\" td \"charlie\" td \"Edit profile\" }\n                }\n            }\n            row { spacer button \"Refresh\" button \"Settings\" }\n        }\n    }\"#).unwrap()"
+---
++-- Dashboard ----------------------------------------------+
+|                                                           |
+| +-- Stats -----+ +-- Health ------------+                 |
+| |              | |                      |                 |
+| | Users: 1,234 | | [███████████░░] 85%  |                 |
+| | Active: 567  | | System OK            |                 |
+| | New: 89      | |                      |                 |
+| |              | +----------------------+                 |
+| +--------------+                                          |
+| --------------------------------------------------------- |
+| ## Recent Activity                                        |
+|   +------------+-----------------+----------------------+ |
+|   | Time       | User            | Action               | |
+|   +------------+-----------------+----------------------+ |
+|   | 10:30      | alice           | Login                | |
+|   | 10:25      | bob             | Upload file          | |
+|   | 10:20      | charlie         | Edit profile         | |
+|   +------------+-----------------+----------------------+ |
+|                                  [ Refresh ] [ Settings ] |
+|                                                           |
++-----------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__data_table_with_actions.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__data_table_with_actions.snap
new file mode 100644
index 0000000..c88a7f4
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__data_table_with_actions.snap
@@ -0,0 +1,17 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Users\" width:50 {\n            table {\n                header {\n                    col \"ID\" width:5 align:right\n                    col \"Name\" width:15\n                    col \"Email\" width:20\n                }\n                tr { td \"1\" td \"Alice\" td \"alice@example.com\" }\n                tr { td \"2\" td \"Bob\" td \"bob@example.com\" }\n                tr { td \"3\" td \"Charlie\" td \"charlie@ex.com\" }\n            }\n            separator\n            row { text \"3 users\" spacer button \"Add\" button \"Delete\" }\n        }\n    }\"#).unwrap()"
+---
++-- Users -------------------------------------------+
+|                                                    |
+| +-------+-----------------+----------------------+ |
+| |    ID | Name            | Email                | |
+| +-------+-----------------+----------------------+ |
+| |     1 | Alice           | alice@example.com    | |
+| |     2 | Bob             | bob@example.com      | |
+| |     3 | Charlie         | charlie@ex.com       | |
+| +-------+-----------------+----------------------+ |
+| -------------------------------------------------- |
+| 3 users                        [ Add ] [ Delete ]  |
+|                                                    |
++----------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__database_query_tool.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__database_query_tool.snap
new file mode 100644
index 0000000..bee3db0
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__database_query_tool.snap
@@ -0,0 +1,25 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"SQL Query\" width:65 {\n            text \"Enter query:\"\n            code ```\nSELECT id, name, email\nFROM users\nWHERE active = true\nORDER BY name;\n```\n            separator\n            alert type:info { text \"Query executed in 0.023s\" }\n            table {\n                header {\n                    col \"id\" width:5 align:right\n                    col \"name\" width:15\n                    col \"email\" width:25\n                }\n                tr { td \"1\" td \"Alice\" td \"alice@example.com\" }\n                tr { td \"2\" td \"Bob\" td \"bob@example.com\" }\n            }\n            separator\n            row { text \"2 rows\" spacer button \"Export\" button \"Run\" }\n        }\n    }\"#).unwrap()"
+---
++-- SQL Query --------------------------------------------------+
+|                                                               |
+| Enter query:                                                  |
+| SELECT id, name, email                                        |
+| FROM users                                                    |
+| WHERE active = true                                           |
+| ORDER BY name;                                                |
+| ------------------------------------------------------------- |
+| ┌─ INFO ────────────────────────────────────────────────────┐ |
+| │ Query executed in 0.023s                                  │ |
+| └───────────────────────────────────────────────────────────┘ |
+| +-------+-----------------+---------------------------+       |
+| |    id | name            | email                     |       |
+| +-------+-----------------+---------------------------+       |
+| |     1 | Alice           | alice@example.com         |       |
+| |     2 | Bob             | bob@example.com           |       |
+| +-------+-----------------+---------------------------+       |
+| ------------------------------------------------------------- |
+| 2 rows                                    [ Export ] [ Run ]  |
+|                                                               |
++---------------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__deeply_nested_boxes.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__deeply_nested_boxes.snap
new file mode 100644
index 0000000..f117803
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__deeply_nested_boxes.snap
@@ -0,0 +1,21 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Level 1\" {\n            box \"Level 2\" {\n                box \"Level 3\" {\n                    box \"Level 4\" {\n                        text \"Deep inside\"\n                    }\n                }\n            }\n        }\n    }\"#).unwrap()"
+---
++-- Level 1 --------------+
+|                         |
+| +-- Level 2 ----------+ |
+| |                     | |
+| | +-- Level 3 ------+ | |
+| | |                 | | |
+| | | +-- Level 4 --+ | | |
+| | | |             | | | |
+| | | | Deep inside | | | |
+| | | |             | | | |
+| | | +-------------+ | | |
+| | |                 | | |
+| | +-----------------+ | |
+| |                     | |
+| +---------------------+ |
+|                         |
++-------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_layout.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_layout.snap
new file mode 100644
index 0000000..9e75202
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_layout.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { }\"#).unwrap()"
+---
+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_row.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_row.snap
new file mode 100644
index 0000000..a321793
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_row.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { row { } }\"#).unwrap()"
+---
+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_section.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_section.snap
new file mode 100644
index 0000000..2749c5c
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_section.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { section \"Empty Section\" { } }\"#).unwrap()"
+---
+## Empty Section
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_window.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_window.snap
new file mode 100644
index 0000000..5e59800
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__empty_window.snap
@@ -0,0 +1,8 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { window \"Empty\" { } }\"#).unwrap()"
+---
++-- Empty --+
+|           |
+|           |
++-----------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__error_dialog_with_details.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__error_dialog_with_details.snap
new file mode 100644
index 0000000..ff31924
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__error_dialog_with_details.snap
@@ -0,0 +1,17 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Error\" width:50 {\n            alert type:error {\n                text \"Failed to save document\"\n            }\n            separator\n            section \"Details\" {\n                code \"Error: ENOSPC - No space left on device\"\n                text \"Location: /home/user/documents/file.txt\"\n            }\n            separator\n            row { checkbox \"Show technical details\" spacer button \"OK\" }\n        }\n    }\"#).unwrap()"
+---
++-- Error ---------------------------------------+
+|                                                |
+| ╔═ ERROR ════════════════════════════════════╗ |
+| ║ Failed to save document                    ║ |
+| ╚════════════════════════════════════════════╝ |
+| ---------------------------------------------- |
+| ## Details                                     |
+|   Error: ENOSPC - No space left on device      |
+|   Location: /home/user/documents/file.txt      |
+| ---------------------------------------------- |
+| [ ] Show technical details             [ OK ]  |
+|                                                |
++------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__file_browser.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__file_browser.snap
new file mode 100644
index 0000000..c4cedc1
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__file_browser.snap
@@ -0,0 +1,15 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Open File\" width:40 {\n            list {\n                item \"Documents\" selected\n                item \"Downloads\"\n                item \"Pictures\"\n                item \"Videos\"\n            }\n            separator\n            row { text \"File:\" input width:20 }\n            row { spacer button \"Cancel\" button \"Open\" }\n        }\n    }\"#).unwrap()"
+---
++-- Open File -------------------------+
+|                                      |
+|  > Documents                         |
+|    Downloads                         |
+|    Pictures                          |
+|    Videos                            |
+| ------------------------------------ |
+| File: [__________________]           |
+|                  [ Cancel ] [ Open ] |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__git_commit_dialog.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__git_commit_dialog.snap
new file mode 100644
index 0000000..fc8b57d
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__git_commit_dialog.snap
@@ -0,0 +1,20 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Commit Changes\" width:55 {\n            section \"Changed Files\" {\n                list {\n                    item \"src/main.rs\" selected\n                    item \"src/lib.rs\"\n                    item \"Cargo.toml\"\n                }\n            }\n            separator\n            text \"Commit message:\"\n            input width:45 placeholder:\"Enter commit message...\"\n            separator\n            checkbox \"Amend previous commit\"\n            checkbox \"Sign commit\"\n            separator\n            row { button \"Cancel\" spacer button \"Commit\" }\n        }\n    }\"#).unwrap()"
+---
++-- Commit Changes -----------------------------------+
+|                                                     |
+| ## Changed Files                                    |
+|    > src/main.rs                                    |
+|      src/lib.rs                                     |
+|      Cargo.toml                                     |
+| --------------------------------------------------- |
+| Commit message:                                     |
+| [Enter commit message...____________________]       |
+| --------------------------------------------------- |
+| [ ] Amend previous commit                           |
+| [ ] Sign commit                                     |
+| --------------------------------------------------- |
+| [ Cancel ]                              [ Commit ]  |
+|                                                     |
++-----------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_dashboard_complex.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_dashboard_complex.snap
new file mode 100644
index 0000000..e193dda
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_dashboard_complex.snap
@@ -0,0 +1,26 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Dashboard\" {\n            row gap:0 {\n                box \"Metrics\" width:30 {\n                    text \"Users: 1,234\"\n                    text \"Sessions: 5,678\"\n                    progress 75\n                }\n                box \"Status\" width:30 {\n                    text \"API: Online\" style:bold\n                    text \"DB: Online\" style:bold\n                    text \"Cache: Degraded\" style:danger\n                }\n            }\n            row gap:0 {\n                box \"A\" width:20 { text \"Widget A\" }\n                box \"B\" width:20 { text \"Widget B\" }\n                box \"C\" width:20 { text \"Widget C\" }\n            }\n            row gap:0 {\n                box \"Logs\" width:40 {\n                    code \"[10:30] Request received\"\n                    code \"[10:31] Processing...\"\n                }\n                box \"Quick Actions\" width:20 {\n                    button \"Refresh\"\n                    button \"Export\"\n                }\n            }\n        }\n    }\"#).unwrap()"
+---
++-- Dashboard --------------------------------------------------+
+|                                                               |
+| +-- Metrics -----------------++-- Status ------------------+  |
+| |                            ||                            |  |
+| | Users: 1,234               || API: Online                |  |
+| | Sessions: 5,678            || DB: Online                 |  |
+| | [██████████████░░░░░] 75%  || Cache: Degraded            |  |
+| |                            ||                            |  |
+| +----------------------------++----------------------------+  |
+| +-- A -------------++-- B -------------++-- C -------------+  |
+| |                  ||                  ||                  |  |
+| | Widget A         || Widget B         || Widget C         |  |
+| |                  ||                  ||                  |  |
+| +------------------++------------------++------------------+  |
+| +-- Logs ------------------------------++-- Quick Actions --+ |
+| |                                      ||                   | |
+| | [10:30] Request received             || [ Refresh ]       | |
+| | [10:31] Processing...                || [ Export ]        | |
+| |                                      ||                   | |
+| +--------------------------------------++-------------------+ |
+|                                                               |
++---------------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_masonry_3_row.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_masonry_3_row.snap
new file mode 100644
index 0000000..def2e3c
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_masonry_3_row.snap
@@ -0,0 +1,23 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window {\n            row gap:0 {\n                box \"F\" width:25 { text \"Panel F\" }\n                box \"G\" width:25 { text \"Panel G\" }\n            }\n            row gap:0 {\n                box \"C\" width:15 { text \"C\" }\n                box \"D\" width:20 { text \"D\" }\n                box \"E\" width:15 { text \"E\" }\n            }\n            row gap:0 {\n                box \"A\" width:25 { text \"Panel A\" }\n                box \"B\" width:25 { text \"Panel B\" }\n            }\n        }\n    }\"#).unwrap()"
+---
++----------------------------------------------------+
+|                                                    |
+| +-- F ------------------++-- G ------------------+ |
+| |                       ||                       | |
+| | Panel F               || Panel G               | |
+| |                       ||                       | |
+| +-----------------------++-----------------------+ |
+| +-- C --------++-- D -------------++-- E --------+ |
+| |             ||                  ||             | |
+| | C           || D                || E           | |
+| |             ||                  ||             | |
+| +-------------++------------------++-------------+ |
+| +-- A ------------------++-- B ------------------+ |
+| |                       ||                       | |
+| | Panel A               || Panel B               | |
+| |                       ||                       | |
+| +-----------------------++-----------------------+ |
+|                                                    |
++----------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_simple_2x2.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_simple_2x2.snap
new file mode 100644
index 0000000..a2677ab
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__grid_simple_2x2.snap
@@ -0,0 +1,16 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window {\n            row gap:0 { box \"A\" width:21 {} box \"B\" width:21 {} }\n            row gap:0 { box \"C\" width:21 {} box \"D\" width:21 {} }\n        }\n    }\"#).unwrap()"
+---
++--------------------------------------------+
+|                                            |
+| +-- A --------------++-- B --------------+ |
+| |                   ||                   | |
+| |                   ||                   | |
+| +-------------------++-------------------+ |
+| +-- C --------------++-- D --------------+ |
+| |                   ||                   | |
+| |                   ||                   | |
+| +-------------------++-------------------+ |
+|                                            |
++--------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__input_variants.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__input_variants.snap
new file mode 100644
index 0000000..e94ac5a
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__input_variants.snap
@@ -0,0 +1,6 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        input width:10\n        input width:20 placeholder:\"email@example.com\"\n    }\"#).unwrap()"
+---
+[________]
+[email@example.com_]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__list_basic.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__list_basic.snap
new file mode 100644
index 0000000..a0d2107
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__list_basic.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        list {\n            item \"First item\"\n            item \"Second item\"\n            item \"Third item\"\n        }\n    }\"#).unwrap()"
+---
+   First item
+   Second item
+   Third item
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__list_with_selection.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__list_with_selection.snap
new file mode 100644
index 0000000..ffdd8c9
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__list_with_selection.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        list {\n            item \"Option A\"\n            item \"Option B\" selected\n            item \"Option C\"\n        }\n    }\"#).unwrap()"
+---
+   Option A
+ > Option B
+   Option C
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__login_form.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__login_form.snap
new file mode 100644
index 0000000..0b8ddea
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__login_form.snap
@@ -0,0 +1,12 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Login\" width:40 {\n            row { text \"Username:\" input width:20 }\n            row { text \"Password:\" input width:20 }\n            spacer\n            separator\n            row { spacer button \"Cancel\" button \"Login\" }\n        }\n    }\"#).unwrap()"
+---
++-- Login -----------------------------+
+|                                      |
+| Username: [__________________]       |
+| Password: [__________________]       |
+| ------------------------------------ |
+|                 [ Cancel ] [ Login ] |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__long_list.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__long_list.snap
new file mode 100644
index 0000000..39f6bc6
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__long_list.snap
@@ -0,0 +1,16 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        list {\n            item \"Item 1\"\n            item \"Item 2\"\n            item \"Item 3\"\n            item \"Item 4\"\n            item \"Item 5\" selected\n            item \"Item 6\"\n            item \"Item 7\"\n            item \"Item 8\"\n            item \"Item 9\"\n            item \"Item 10\"\n            item \"Item 11\"\n            item \"Item 12\"\n        }\n    }\"#).unwrap()"
+---
+   Item 1
+   Item 2
+   Item 3
+   Item 4
+ > Item 5
+   Item 6
+   Item 7
+   Item 8
+   Item 9
+   Item 10
+   Item 11
+   Item 12
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_buttons_in_row.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_buttons_in_row.snap
new file mode 100644
index 0000000..c2c3ed4
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_buttons_in_row.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        row {\n            button \"A\"\n            button \"B\"\n            button \"C\"\n            button \"D\"\n            button \"E\"\n            button \"F\"\n            button \"G\"\n        }\n    }\"#).unwrap()"
+---
+[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_checkboxes.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_checkboxes.snap
new file mode 100644
index 0000000..48d95ee
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_checkboxes.snap
@@ -0,0 +1,18 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Options\" {\n            checkbox \"Option 1\" checked\n            checkbox \"Option 2\"\n            checkbox \"Option 3\" checked\n            checkbox \"Option 4\"\n            checkbox \"Option 5\" checked\n            checkbox \"Option 6\"\n            checkbox \"Option 7\"\n            checkbox \"Option 8\" checked\n            checkbox \"Option 9\"\n            checkbox \"Option 10\"\n        }\n    }\"#).unwrap()"
+---
++-- Options ----+
+|               |
+| [x] Option 1  |
+| [ ] Option 2  |
+| [x] Option 3  |
+| [ ] Option 4  |
+| [x] Option 5  |
+| [ ] Option 6  |
+| [ ] Option 7  |
+| [x] Option 8  |
+| [ ] Option 9  |
+| [ ] Option 10 |
+|               |
++---------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_rows.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_rows.snap
new file mode 100644
index 0000000..fd76d80
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__many_rows.snap
@@ -0,0 +1,18 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:40 {\n            row { text \"Row 1\" input width:10 }\n            row { text \"Row 2\" input width:10 }\n            row { text \"Row 3\" input width:10 }\n            row { text \"Row 4\" input width:10 }\n            row { text \"Row 5\" input width:10 }\n            row { text \"Row 6\" input width:10 }\n            row { text \"Row 7\" input width:10 }\n            row { text \"Row 8\" input width:10 }\n            row { text \"Row 9\" input width:10 }\n            row { text \"Row 10\" input width:10 }\n        }\n    }\"#).unwrap()"
+---
++--------------------------------------+
+|                                      |
+| Row 1 [________]                     |
+| Row 2 [________]                     |
+| Row 3 [________]                     |
+| Row 4 [________]                     |
+| Row 5 [________]                     |
+| Row 6 [________]                     |
+| Row 7 [________]                     |
+| Row 8 [________]                     |
+| Row 9 [________]                     |
+| Row 10 [________]                    |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__minimal_input.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__minimal_input.snap
new file mode 100644
index 0000000..ef6f33c
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__minimal_input.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { input width:3 }\"#).unwrap()"
+---
+[_]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__minimal_table.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__minimal_table.snap
new file mode 100644
index 0000000..70a830c
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__minimal_table.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        table {\n            header { col \"X\" width:1 }\n            tr { td \"1\" }\n        }\n    }\"#).unwrap()"
+---
++---+
+| X |
++---+
+| 1 |
++---+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__mixed_controls_row.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__mixed_controls_row.snap
new file mode 100644
index 0000000..80b65c2
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__mixed_controls_row.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:60 {\n            row {\n                text \"Status:\"\n                checkbox \"Active\" checked\n                select \"Priority\" width:12\n                button \"Save\"\n                button \"Cancel\"\n            }\n        }\n    }\"#).unwrap()"
+---
++----------------------------------------------------------+
+|                                                          |
+| Status: [x] Active [Priority  v] [ Save ] [ Cancel ]     |
+|                                                          |
++----------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__multiline_code.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__multiline_code.snap
new file mode 100644
index 0000000..9c03ca6
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__multiline_code.snap
@@ -0,0 +1,10 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        code ```\nfn factorial(n: u64) -> u64 {\n    match n {\n        0 | 1 => 1,\n        _ => n * factorial(n - 1),\n    }\n}\n```\n    }\"#).unwrap()"
+---
+fn factorial(n: u64) -> u64 {
+    match n {
+        0 | 1 => 1,
+        _ => n * factorial(n - 1),
+    }
+}
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__multiple_spacers_in_row.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__multiple_spacers_in_row.snap
new file mode 100644
index 0000000..a47c6cd
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__multiple_spacers_in_row.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:50 {\n            row { text \"A\" spacer text \"B\" spacer text \"C\" }\n        }\n    }\"#).unwrap()"
+---
++------------------------------------------------+
+|                                                |
+| A                    B                    C    |
+|                                                |
++------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__nested_containers.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__nested_containers.snap
new file mode 100644
index 0000000..f40361c
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__nested_containers.snap
@@ -0,0 +1,13 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Outer\" {\n            box \"Inner\" {\n                text \"Deeply nested\"\n            }\n        }\n    }\"#).unwrap()"
+---
++-- Outer ----------+
+|                   |
+| +-- Inner ------+ |
+| |               | |
+| | Deeply nested | |
+| |               | |
+| +---------------+ |
+|                   |
++-------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__nested_sections.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__nested_sections.snap
new file mode 100644
index 0000000..6960ec8
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__nested_sections.snap
@@ -0,0 +1,10 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        section \"Outer\" {\n            text \"Outer content\"\n            section \"Inner\" {\n                text \"Inner content\"\n                section \"Deep\" {\n                    text \"Deep content\"\n                }\n            }\n        }\n    }\"#).unwrap()"
+---
+## Outer
+  Outer content
+  ## Inner
+    Inner content
+    ## Deep
+      Deep content
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__only_spacers.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__only_spacers.snap
new file mode 100644
index 0000000..afa44a6
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__only_spacers.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:30 {\n            row { spacer spacer spacer }\n        }\n    }\"#).unwrap()"
+---
++----------------------------+
+|                            |
+|                            |
+|                            |
++----------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__package_manager.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__package_manager.snap
new file mode 100644
index 0000000..d52b8bc
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__package_manager.snap
@@ -0,0 +1,19 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Package Manager\" width:60 {\n            row { text \"Search:\" input width:35 button \"Search\" }\n            separator\n            table {\n                header {\n                    col \"Package\" width:20\n                    col \"Version\" width:10\n                    col \"Status\" width:12\n                }\n                tr { td \"react\" td \"18.2.0\" td \"Installed\" }\n                tr { td \"typescript\" td \"5.0.0\" td \"Outdated\" }\n                tr { td \"webpack\" td \"5.88.0\" td \"Available\" }\n            }\n            separator\n            row { text \"3 packages\" spacer button \"Update All\" button \"Install\" }\n        }\n    }\"#).unwrap()"
+---
++-- Package Manager ---------------------------------------+
+|                                                          |
+| Search: [_________________________________] [ Search ]   |
+| -------------------------------------------------------- |
+| +----------------------+------------+--------------+     |
+| | Package              | Version    | Status       |     |
+| +----------------------+------------+--------------+     |
+| | react                | 18.2.0     | Installed    |     |
+| | typescript           | 5.0.0      | Outdated     |     |
+| | webpack              | 5.88.0     | Available    |     |
+| +----------------------+------------+--------------+     |
+| -------------------------------------------------------- |
+| 3 packages                   [ Update All ] [ Install ]  |
+|                                                          |
++----------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__progress_bars.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__progress_bars.snap
new file mode 100644
index 0000000..ad67a36
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__progress_bars.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        progress 0\n        progress 25\n        progress 50\n        progress 75\n        progress 100\n    }\"#).unwrap()"
+---
+[░░░░░░░░░░░░░] 0%
+[███░░░░░░░░░░] 25%
+[██████░░░░░░░] 50%
+[█████████░░░░] 75%
+[█████████████] 100%
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__radio_states.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__radio_states.snap
new file mode 100644
index 0000000..9d9edd2
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__radio_states.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        radio \"Option A\"\n        radio \"Option B\" selected\n        radio \"Option C\"\n    }\"#).unwrap()"
+---
+( ) Option A
+(o) Option B
+( ) Option C
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__raw_ascii_art.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__raw_ascii_art.snap
new file mode 100644
index 0000000..d1195fb
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__raw_ascii_art.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        raw ```\n┌─────────────┐\n│  ASCII Art  │\n└─────────────┘\n```\n    }\"#).unwrap()"
+---
+┌─────────────┐
+│  ASCII Art  │
+└─────────────┘
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__registration_form.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__registration_form.snap
new file mode 100644
index 0000000..7ea0546
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__registration_form.snap
@@ -0,0 +1,21 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Create Account\" width:50 {\n            section \"Personal Information\" {\n                row { text \"First name:\" input width:20 }\n                row { text \"Last name:\" input width:20 }\n                row { text \"Email:\" input width:30 placeholder:\"you@example.com\" }\n            }\n            section \"Password\" {\n                row { text \"Password:\" input width:25 }\n                row { text \"Confirm:\" input width:25 }\n                text \"Password must be at least 8 characters\" style:dim\n            }\n            section \"Preferences\" {\n                checkbox \"Subscribe to newsletter\"\n                checkbox \"Accept terms and conditions\"\n            }\n            separator\n            row { spacer button \"Cancel\" button \"Create Account\" }\n        }\n    }\"#).unwrap()"
+---
++-- Create Account ------------------------------+
+|                                                |
+| ## Personal Information                        |
+|   First name: [__________________]             |
+|   Last name: [__________________]              |
+|   Email: [you@example.com_____________]        |
+| ## Password                                    |
+|   Password: [_______________________]          |
+|   Confirm: [_______________________]           |
+|   Password must be at least 8 characters       |
+| ## Preferences                                 |
+|   [ ] Subscribe to newsletter                  |
+|   [ ] Accept terms and conditions              |
+| ---------------------------------------------- |
+|                  [ Cancel ] [ Create Account ] |
+|                                                |
++------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_buttons_spaced.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_buttons_spaced.snap
new file mode 100644
index 0000000..e4934db
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_buttons_spaced.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:40 {\n            row { spacer button \"Cancel\" button \"OK\" }\n        }\n    }\"#).unwrap()"
+---
++--------------------------------------+
+|                                      |
+|                    [ Cancel ] [ OK ] |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_custom_gap.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_custom_gap.snap
new file mode 100644
index 0000000..dc76eff
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_custom_gap.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        row gap:5 { text \"A\" text \"B\" text \"C\" }\n    }\"#).unwrap()"
+---
+A     B     C
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_layout.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_layout.snap
new file mode 100644
index 0000000..388bcca
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_layout.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        row { text \"Label:\" input width:15 }\n    }\"#).unwrap()"
+---
+Label: [_____________]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_no_gap.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_no_gap.snap
new file mode 100644
index 0000000..d9e7ed6
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_no_gap.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        row gap:0 { button \"A\" button \"B\" button \"C\" }\n    }\"#).unwrap()"
+---
+[ A ][ B ][ C ]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_with_spacer.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_with_spacer.snap
new file mode 100644
index 0000000..17afb29
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__row_with_spacer.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:40 {\n            row { text \"Left\" spacer text \"Right\" }\n        }\n    }\"#).unwrap()"
+---
++--------------------------------------+
+|                                      |
+| Left                          Right  |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_dashboard.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_dashboard.snap
new file mode 100644
index 0000000..b073120
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_dashboard.snap
@@ -0,0 +1,18 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n  window \"Dashboard\" width:60 {\n    section \"Build Status\" {\n      row {\n        text \"main\"\n        progress 100\n        text \"passing\" style:bold\n      }\n      row {\n        text \"develop\"\n        progress 75\n        text \"building...\"\n      }\n      row {\n        text \"feature/auth\"\n        progress 30\n        text \"failing\" style:danger\n      }\n    }\n    separator\n    section \"Quick Actions\" {\n      row gap:2 {\n        button \"New Build\"\n        button \"Settings\"\n        spacer\n        link \"View Logs\"\n      }\n    }\n    alert type:info { text \"Last deploy: 2 hours ago\" }\n  }\n}\"#).unwrap()"
+---
++-- Dashboard ---------------------------------------------+
+|                                                          |
+| ## Build Status                                          |
+|   main [█████████████] 100% passing                      |
+|   develop [█████████░░░░] 75% building...                |
+|   feature/auth [███░░░░░░░░░░] 30% failing               |
+| -------------------------------------------------------- |
+| ## Quick Actions                                         |
+|   [ New Build ]  [ Settings ]                View Logs   |
+| ┌─ INFO ───────────────────────────────────────────────┐ |
+| │ Last deploy: 2 hours ago                             │ |
+| └──────────────────────────────────────────────────────┘ |
+|                                                          |
++----------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_export_dialog.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_export_dialog.snap
new file mode 100644
index 0000000..99541fd
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_export_dialog.snap
@@ -0,0 +1,18 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n  window \"Export Options\" width:45 {\n    section \"Format\" {\n      row { text \"Type:\" select \"PDF Document\" width:25 }\n      row { text \"Quality:\" select \"High (300 DPI)\" width:25 }\n    }\n    separator\n    section \"Destination\" {\n      row {\n        radio \"Local file\" selected\n      }\n      row {\n        radio \"Cloud storage\"\n      }\n      row {\n        radio \"Email attachment\"\n      }\n    }\n    separator\n    row gap:2 {\n      spacer\n      button \"Cancel\"\n      button \"Export\" style:bold\n    }\n  }\n}\"#).unwrap()"
+---
++-- Export Options -------------------------+
+|                                           |
+| ## Format                                 |
+|   Type: [PDF Document           v]        |
+|   Quality: [High (300 DPI)         v]     |
+| ----------------------------------------- |
+| ## Destination                            |
+|   (o) Local file                          |
+|   ( ) Cloud storage                       |
+|   ( ) Email attachment                    |
+| ----------------------------------------- |
+|                    [ Cancel ]  [ Export ] |
+|                                           |
++-------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_login_form.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_login_form.snap
new file mode 100644
index 0000000..d663b85
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__sample_login_form.snap
@@ -0,0 +1,13 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n  window \"Login\" width:40 {\n    section \"Credentials\" {\n      row { text \"Username:\" input width:20 }\n      row { text \"Password:\" input width:20 placeholder:\"********\" }\n    }\n    separator\n    row gap:2 {\n      checkbox \"Remember me\"\n      spacer\n      button \"Cancel\"\n      button \"Sign In\" style:bold\n    }\n  }\n}\"#).unwrap()"
+---
++-- Login ---------------------------------+
+|                                          |
+| ## Credentials                           |
+|   Username: [__________________]         |
+|   Password: [********__________]         |
+| ---------------------------------------- |
+| [ ] Remember me [ Cancel ]  [ Sign In ]  |
+|                                          |
++------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__search_filters.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__search_filters.snap
new file mode 100644
index 0000000..2595018
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__search_filters.snap
@@ -0,0 +1,17 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Search\" width:45 {\n            row { text \"Query:\" input width:30 button \"Search\" }\n            separator\n            section \"Filters\" {\n                row { text \"Category:\" select \"All\" width:15 }\n                row { text \"Date:\" select \"Any time\" width:15 }\n                checkbox \"Include archived\" checked\n                checkbox \"Exact match\"\n            }\n            separator\n            row { text \"0 results\" spacer button \"Clear\" button \"Apply\" }\n        }\n    }\"#).unwrap()"
+---
++-- Search ----------------------------------------+
+|                                                  |
+| Query: [____________________________] [ Search ] |
+| ------------------------------------------------ |
+| ## Filters                                       |
+|   Category: [All          v]                     |
+|   Date: [Any time     v]                         |
+|   [x] Include archived                           |
+|   [ ] Exact match                                |
+| ------------------------------------------------ |
+| 0 results                   [ Clear ] [ Apply ]  |
+|                                                  |
++--------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__section_with_content.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__section_with_content.snap
new file mode 100644
index 0000000..a485b77
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__section_with_content.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        section \"General\" {\n            checkbox \"Option 1\"\n            checkbox \"Option 2\" checked\n        }\n    }\"#).unwrap()"
+---
+## General
+  [ ] Option 1
+  [x] Option 2
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__select_dropdown.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__select_dropdown.snap
new file mode 100644
index 0000000..32f1702
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__select_dropdown.snap
@@ -0,0 +1,6 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        select \"Mono\" width:12\n        select \"Very Long Option Name\" width:12\n    }\"#).unwrap()"
+---
+[Mono      v]
+[Very Lon… v]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__separator.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__separator.snap
new file mode 100644
index 0000000..359c626
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__separator.snap
@@ -0,0 +1,11 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:30 {\n            text \"Above\"\n            separator\n            text \"Below\"\n        }\n    }\"#).unwrap()"
+---
++----------------------------+
+|                            |
+| Above                      |
+| -------------------------- |
+| Below                      |
+|                            |
++----------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__settings_panel.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__settings_panel.snap
new file mode 100644
index 0000000..3085f85
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__settings_panel.snap
@@ -0,0 +1,17 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Preferences\" width:45 {\n            section \"Appearance\" {\n                row { text \"Theme:\" radio \"Dark\" selected radio \"Light\" }\n                checkbox \"Show line numbers\" checked\n                checkbox \"Word wrap\"\n            }\n            section \"Editor\" {\n                row { text \"Tab size:\" input width:5 placeholder:\"4\" }\n                row { text \"Font:\" select \"Monospace\" width:15 }\n            }\n            separator\n            row { spacer button \"Cancel\" button \"Apply\" }\n        }\n    }\"#).unwrap()"
+---
++-- Preferences ----------------------------+
+|                                           |
+| ## Appearance                             |
+|   Theme: (o) Dark ( ) Light               |
+|   [x] Show line numbers                   |
+|   [ ] Word wrap                           |
+| ## Editor                                 |
+|   Tab size: [4__]                         |
+|   Font: [Monospace    v]                  |
+| ----------------------------------------- |
+|                      [ Cancel ] [ Apply ] |
+|                                           |
++-------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__single_item_list.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__single_item_list.snap
new file mode 100644
index 0000000..c81b533
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__single_item_list.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        list { item \"Only one\" }\n    }\"#).unwrap()"
+---
+   Only one
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__spacer_at_end.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__spacer_at_end.snap
new file mode 100644
index 0000000..5225db5
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__spacer_at_end.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:40 {\n            row { button \"Left-aligned\" spacer }\n        }\n    }\"#).unwrap()"
+---
++--------------------------------------+
+|                                      |
+| [ Left-aligned ]                     |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__spacer_at_start.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__spacer_at_start.snap
new file mode 100644
index 0000000..370a9c7
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__spacer_at_start.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:40 {\n            row { spacer button \"Right-aligned\" }\n        }\n    }\"#).unwrap()"
+---
++--------------------------------------+
+|                                      |
+|                    [ Right-aligned ] |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__special_chars_in_labels.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__special_chars_in_labels.snap
new file mode 100644
index 0000000..794efb3
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__special_chars_in_labels.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        button \"Save & Exit\"\n        checkbox \"Enable \\\"quotes\\\" option\"\n        text \"100% complete\"\n    }\"#).unwrap()"
+---
+[ Save & Exit ]
+[ ] Enable "quotes" option
+100% complete
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__stacked_alerts.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__stacked_alerts.snap
new file mode 100644
index 0000000..fd9eea7
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__stacked_alerts.snap
@@ -0,0 +1,13 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        alert type:error { text \"Critical error!\" }\n        alert type:warn { text \"Warning message\" }\n        alert type:info { text \"Information note\" }\n    }\"#).unwrap()"
+---
+╔═ ERROR ═════════╗
+║ Critical error! ║
+╚═════════════════╝
+┌─ WARNING ───────┐
+│ Warning message │
+└─────────────────┘
+┌─ INFO ───────────┐
+│ Information note │
+└──────────────────┘
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__table_aligned_columns.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__table_aligned_columns.snap
new file mode 100644
index 0000000..115fc83
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__table_aligned_columns.snap
@@ -0,0 +1,10 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        table {\n            header {\n                col \"Item\" width:15 align:left\n                col \"Qty\" width:5 align:center\n                col \"Price\" width:10 align:right\n            }\n            tr { td \"Widget\" td \"10\" td \"$99.00\" }\n            tr { td \"Gadget\" td \"5\" td \"$149.50\" }\n        }\n    }\"#).unwrap()"
+---
++-----------------+-------+------------+
+| Item            |  Qty  |      Price |
++-----------------+-------+------------+
+| Widget          |  10   |     $99.00 |
+| Gadget          |   5   |    $149.50 |
++-----------------+-------+------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__table_basic.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__table_basic.snap
new file mode 100644
index 0000000..caa22f4
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__table_basic.snap
@@ -0,0 +1,11 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        table {\n            header { col \"Name\" width:12 col \"Age\" width:5 }\n            tr { td \"Alice\" td \"30\" }\n            tr { td \"Bob\" td \"25\" }\n            tr { td \"Charlie\" td \"35\" }\n        }\n    }\"#).unwrap()"
+---
++--------------+-------+
+| Name         | Age   |
++--------------+-------+
+| Alice        | 30    |
+| Bob          | 25    |
+| Charlie      | 35    |
++--------------+-------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__tall_table.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__tall_table.snap
new file mode 100644
index 0000000..f041438
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__tall_table.snap
@@ -0,0 +1,18 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        table {\n            header { col \"Row\" width:5 col \"Value\" width:15 }\n            tr { td \"1\" td \"First\" }\n            tr { td \"2\" td \"Second\" }\n            tr { td \"3\" td \"Third\" }\n            tr { td \"4\" td \"Fourth\" }\n            tr { td \"5\" td \"Fifth\" }\n            tr { td \"6\" td \"Sixth\" }\n            tr { td \"7\" td \"Seventh\" }\n            tr { td \"8\" td \"Eighth\" }\n            tr { td \"9\" td \"Ninth\" }\n            tr { td \"10\" td \"Tenth\" }\n        }\n    }\"#).unwrap()"
+---
++-------+-----------------+
+| Row   | Value           |
++-------+-----------------+
+| 1     | First           |
+| 2     | Second          |
+| 3     | Third           |
+| 4     | Fourth          |
+| 5     | Fifth           |
+| 6     | Sixth           |
+| 7     | Seventh         |
+| 8     | Eighth          |
+| 9     | Ninth           |
+| 10    | Tenth           |
++-------+-----------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_aligned.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_aligned.snap
new file mode 100644
index 0000000..5649fa4
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_aligned.snap
@@ -0,0 +1,11 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:30 {\n            text \"Left\" align:left\n            text \"Center\" align:center\n            text \"Right\" align:right\n        }\n    }\"#).unwrap()"
+---
++----------------------------+
+|                            |
+| Left                       |
+|           Center           |
+|                      Right |
+|                            |
++----------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_simple.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_simple.snap
new file mode 100644
index 0000000..5906623
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_simple.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { text \"Hello, World!\" }\"#).unwrap()"
+---
+Hello, World!
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_with_newlines.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_with_newlines.snap
new file mode 100644
index 0000000..b3429a0
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__text_with_newlines.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { text \"Line one\\nLine two\\nLine three\" }\"#).unwrap()"
+---
+Line one
+Line two
+Line three
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__truncated_select_value.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__truncated_select_value.snap
new file mode 100644
index 0000000..4565cdc
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__truncated_select_value.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { select \"This value is way too long to fit\" width:15 }\"#).unwrap()"
+---
+[This value … v]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__unicode_box_alignment.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__unicode_box_alignment.snap
new file mode 100644
index 0000000..9a71000
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__unicode_box_alignment.snap
@@ -0,0 +1,24 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"日本語タイトル\" width:40 {\n            box \"设置 ⚙️\" {\n                text \"你好世界\"\n                text \"Hello World\"\n                checkbox \"启用 🔔 通知\" checked\n            }\n            separator\n            table {\n                header {\n                    col \"名前\" width:10\n                    col \"Status\" width:10\n                }\n                tr { td \"田中太郎\" td \"✅ Active\" }\n                tr { td \"Alice\" td \"❌ Inactive\" }\n                tr { td \"北京\" td \"🔄 Pending\" }\n            }\n            row { spacer button \"取消\" button \"确定 ✓\" }\n        }\n    }\"#).unwrap()"
+---
++-- 日本語タイトル --------------------+
+|                                      |
+| +-- 设置 ⚙️ -----------------------+ |
+| |                                  | |
+| | 你好世界                         | |
+| | Hello World                      | |
+| | [x] 启用 🔔 通知                 | |
+| |                                  | |
+| +----------------------------------+ |
+| ------------------------------------ |
+| +------------+------------+          |
+| | 名前       | Status     |          |
+| +------------+------------+          |
+| | 田中太郎   | ✅ Active  |          |
+| | Alice      | ❌ Inacti… |          |
+| | 北京       | 🔄 Pending |          |
+| +------------+------------+          |
+|                  [ 取消 ] [ 确定 ✓ ] |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__unicode_in_text.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__unicode_in_text.snap
new file mode 100644
index 0000000..d2a141e
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__unicode_in_text.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { text \"Hello 世界! 🌍 Привет мир!\" }\"#).unwrap()"
+---
+Hello 世界! 🌍 Привет мир!
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__very_long_button_label.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__very_long_button_label.snap
new file mode 100644
index 0000000..675f55a
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__very_long_button_label.snap
@@ -0,0 +1,5 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout { button \"This is an extremely long button label\" }\"#).unwrap()"
+---
+[ This is an extremely long button label ]
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__very_long_text.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__very_long_text.snap
new file mode 100644
index 0000000..3a4dac2
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__very_long_text.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window width:30 {\n            text \"This is a very long piece of text that should overflow the window boundaries\"\n        }\n    }\"#).unwrap()"
+---
++------------------------------------------------------------------------------+
+|                                                                              |
+| This is a very long piece of text that should overflow the window boundaries |
+|                                                                              |
++------------------------------------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__wide_table.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__wide_table.snap
new file mode 100644
index 0000000..531ebc3
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__wide_table.snap
@@ -0,0 +1,11 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        table {\n            header {\n                col \"ID\" width:5\n                col \"First Name\" width:12\n                col \"Last Name\" width:12\n                col \"Email\" width:25\n                col \"Status\" width:10\n            }\n            tr { td \"1\" td \"Alice\" td \"Johnson\" td \"alice.j@example.com\" td \"Active\" }\n            tr { td \"2\" td \"Bob\" td \"Smith\" td \"bob.smith@example.com\" td \"Inactive\" }\n            tr { td \"3\" td \"Charlie\" td \"Brown\" td \"charlie.b@company.org\" td \"Pending\" }\n        }\n    }\"#).unwrap()"
+---
++-------+--------------+--------------+---------------------------+------------+
+| ID    | First Name   | Last Name    | Email                     | Status     |
++-------+--------------+--------------+---------------------------+------------+
+| 1     | Alice        | Johnson      | alice.j@example.com       | Active     |
+| 2     | Bob          | Smith        | bob.smith@example.com     | Inactive   |
+| 3     | Charlie      | Brown        | charlie.b@company.org     | Pending    |
++-------+--------------+--------------+---------------------------+------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_explicit_width.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_explicit_width.snap
new file mode 100644
index 0000000..baa8b67
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_explicit_width.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Fixed Width\" width:40 {\n            text \"Content\"\n        }\n    }\"#).unwrap()"
+---
++-- Fixed Width -----------------------+
+|                                      |
+| Content                              |
+|                                      |
++--------------------------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_large_padding.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_large_padding.snap
new file mode 100644
index 0000000..7dadfdd
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_large_padding.snap
@@ -0,0 +1,13 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Large Padding\" padding:3 {\n            text \"Spacious\"\n        }\n    }\"#).unwrap()"
+---
++-- Large Padding ------+
+|                       |
+|                       |
+|                       |
+|   Spacious            |
+|                       |
+|                       |
+|                       |
++-----------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_no_padding.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_no_padding.snap
new file mode 100644
index 0000000..4a3e83f
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_no_padding.snap
@@ -0,0 +1,7 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"No Padding\" padding:0 {\n            text \"Tight fit\"\n        }\n    }\"#).unwrap()"
+---
++-- No Padding +
+|Tight fit     |
++--------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_titled.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_titled.snap
new file mode 100644
index 0000000..e23df6b
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__window_titled.snap
@@ -0,0 +1,9 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"My Application\" {\n            text \"Window content here\"\n        }\n    }\"#).unwrap()"
+---
++-- My Application ---+
+|                     |
+| Window content here |
+|                     |
++---------------------+
diff --git a/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__wizard_dialog.snap b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__wizard_dialog.snap
new file mode 100644
index 0000000..9e7a70c
--- /dev/null
+++ b/src-tauri/src/asciiscript/snapshots/annot_lib__asciiscript__tests__wizard_dialog.snap
@@ -0,0 +1,17 @@
+---
+source: src/asciiscript/tests.rs
+expression: "render(r#\"layout {\n        window \"Setup Wizard - Step 2 of 4\" width:50 {\n            progress 50\n            separator\n            section \"Select Installation Type\" {\n                radio \"Standard (recommended)\" selected\n                radio \"Custom\"\n                radio \"Minimal\"\n            }\n            spacer\n            text \"Standard installation includes all features.\"\n            separator\n            row { button \"Back\" spacer button \"Next\" }\n        }\n    }\"#).unwrap()"
+---
++-- Setup Wizard - Step 2 of 4 ------------------+
+|                                                |
+| [███████████████████░░░░░░░░░░░░░░░░░░░░] 50%  |
+| ---------------------------------------------- |
+| ## Select Installation Type                    |
+|   (o) Standard (recommended)                   |
+|   ( ) Custom                                   |
+|   ( ) Minimal                                  |
+| Standard installation includes all features.   |
+| ---------------------------------------------- |
+| [ Back ]                             [ Next ]  |
+|                                                |
++------------------------------------------------+
diff --git a/src-tauri/src/asciiscript/tests.rs b/src-tauri/src/asciiscript/tests.rs
new file mode 100644
index 0000000..ffd4d2b
--- /dev/null
+++ b/src-tauri/src/asciiscript/tests.rs
@@ -0,0 +1,1139 @@
+//! Snapshot tests for asciiscript using insta.
+//!
+//! Run `cargo insta review` to interactively accept/reject snapshots.
+
+use crate::asciiscript::render;
+
+// ========== Basic primitives ==========
+
+#[test]
+fn text_simple() {
+    insta::assert_snapshot!(render(r#"layout { text "Hello, World!" }"#).unwrap());
+}
+
+#[test]
+fn text_aligned() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:30 {
+            text "Left" align:left
+            text "Center" align:center
+            text "Right" align:right
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn input_variants() {
+    insta::assert_snapshot!(render(r#"layout {
+        input width:10
+        input width:20 placeholder:"email@example.com"
+    }"#).unwrap());
+}
+
+#[test]
+fn checkbox_states() {
+    insta::assert_snapshot!(render(r#"layout {
+        checkbox "Unchecked option"
+        checkbox "Checked option" checked
+    }"#).unwrap());
+}
+
+#[test]
+fn radio_states() {
+    insta::assert_snapshot!(render(r#"layout {
+        radio "Option A"
+        radio "Option B" selected
+        radio "Option C"
+    }"#).unwrap());
+}
+
+#[test]
+fn select_dropdown() {
+    insta::assert_snapshot!(render(r#"layout {
+        select "Mono" width:12
+        select "Very Long Option Name" width:12
+    }"#).unwrap());
+}
+
+#[test]
+fn buttons() {
+    insta::assert_snapshot!(render(r#"layout {
+        button "OK"
+        button "Cancel"
+        button "Submit Form"
+    }"#).unwrap());
+}
+
+#[test]
+fn progress_bars() {
+    insta::assert_snapshot!(render(r#"layout {
+        progress 0
+        progress 25
+        progress 50
+        progress 75
+        progress 100
+    }"#).unwrap());
+}
+
+#[test]
+fn separator() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:30 {
+            text "Above"
+            separator
+            text "Below"
+        }
+    }"#).unwrap());
+}
+
+// ========== Containers ==========
+
+#[test]
+fn window_titled() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "My Application" {
+            text "Window content here"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn window_explicit_width() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Fixed Width" width:40 {
+            text "Content"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn box_titled() {
+    insta::assert_snapshot!(render(r#"layout {
+        box "Settings" {
+            text "Box content"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn section_with_content() {
+    insta::assert_snapshot!(render(r#"layout {
+        section "General" {
+            checkbox "Option 1"
+            checkbox "Option 2" checked
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn row_layout() {
+    insta::assert_snapshot!(render(r#"layout {
+        row { text "Label:" input width:15 }
+    }"#).unwrap());
+}
+
+#[test]
+fn row_with_spacer() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:40 {
+            row { text "Left" spacer text "Right" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn row_buttons_spaced() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:40 {
+            row { spacer button "Cancel" button "OK" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn nested_containers() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Outer" {
+            box "Inner" {
+                text "Deeply nested"
+            }
+        }
+    }"#).unwrap());
+}
+
+// ========== Alerts ==========
+
+#[test]
+fn alert_error() {
+    insta::assert_snapshot!(render(r#"layout {
+        alert type:error {
+            text "Something went wrong!"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn alert_warning() {
+    insta::assert_snapshot!(render(r#"layout {
+        alert type:warn {
+            text "Proceed with caution"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn alert_info() {
+    insta::assert_snapshot!(render(r#"layout {
+        alert type:info {
+            text "Here's some information"
+        }
+    }"#).unwrap());
+}
+
+// ========== Tables ==========
+
+#[test]
+fn table_basic() {
+    insta::assert_snapshot!(render(r#"layout {
+        table {
+            header { col "Name" width:12 col "Age" width:5 }
+            tr { td "Alice" td "30" }
+            tr { td "Bob" td "25" }
+            tr { td "Charlie" td "35" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn table_aligned_columns() {
+    insta::assert_snapshot!(render(r#"layout {
+        table {
+            header {
+                col "Item" width:15 align:left
+                col "Qty" width:5 align:center
+                col "Price" width:10 align:right
+            }
+            tr { td "Widget" td "10" td "$99.00" }
+            tr { td "Gadget" td "5" td "$149.50" }
+        }
+    }"#).unwrap());
+}
+
+// ========== Lists ==========
+
+#[test]
+fn list_basic() {
+    insta::assert_snapshot!(render(r#"layout {
+        list {
+            item "First item"
+            item "Second item"
+            item "Third item"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn list_with_selection() {
+    insta::assert_snapshot!(render(r#"layout {
+        list {
+            item "Option A"
+            item "Option B" selected
+            item "Option C"
+        }
+    }"#).unwrap());
+}
+
+// ========== Code and Raw ==========
+
+#[test]
+fn code_block() {
+    insta::assert_snapshot!(render(r#"layout {
+        code ```
+fn main() {
+    println!("Hello, world!");
+}
+```
+    }"#).unwrap());
+}
+
+#[test]
+fn raw_ascii_art() {
+    insta::assert_snapshot!(render(r#"layout {
+        raw ```
+┌─────────────┐
+│  ASCII Art  │
+└─────────────┘
+```
+    }"#).unwrap());
+}
+
+// ========== Complex layouts ==========
+
+#[test]
+fn login_form() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Login" width:40 {
+            row { text "Username:" input width:20 }
+            row { text "Password:" input width:20 }
+            spacer
+            separator
+            row { spacer button "Cancel" button "Login" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn settings_panel() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Preferences" width:45 {
+            section "Appearance" {
+                row { text "Theme:" radio "Dark" selected radio "Light" }
+                checkbox "Show line numbers" checked
+                checkbox "Word wrap"
+            }
+            section "Editor" {
+                row { text "Tab size:" input width:5 placeholder:"4" }
+                row { text "Font:" select "Monospace" width:15 }
+            }
+            separator
+            row { spacer button "Cancel" button "Apply" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn build_status_dialog() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Build Status" width:40 {
+            text "Compiling project..."
+            progress 65
+            separator
+            alert type:warn {
+                text "unused variable `x`"
+            }
+            spacer
+            row { spacer button "Cancel" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn data_table_with_actions() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Users" width:50 {
+            table {
+                header {
+                    col "ID" width:5 align:right
+                    col "Name" width:15
+                    col "Email" width:20
+                }
+                tr { td "1" td "Alice" td "alice@example.com" }
+                tr { td "2" td "Bob" td "bob@example.com" }
+                tr { td "3" td "Charlie" td "charlie@ex.com" }
+            }
+            separator
+            row { text "3 users" spacer button "Add" button "Delete" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn confirmation_dialog() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Confirm Delete" width:35 {
+            alert type:error {
+                text "This action cannot be undone!"
+            }
+            spacer
+            text "Delete 5 selected files?"
+            spacer
+            row { spacer button "Cancel" button "Delete" style:danger }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn file_browser() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Open File" width:40 {
+            list {
+                item "Documents" selected
+                item "Downloads"
+                item "Pictures"
+                item "Videos"
+            }
+            separator
+            row { text "File:" input width:20 }
+            row { spacer button "Cancel" button "Open" }
+        }
+    }"#).unwrap());
+}
+
+// ========== Edge cases ==========
+
+#[test]
+fn empty_layout() {
+    insta::assert_snapshot!(render(r#"layout { }"#).unwrap());
+}
+
+#[test]
+fn empty_window() {
+    insta::assert_snapshot!(render(r#"layout { window "Empty" { } }"#).unwrap());
+}
+
+#[test]
+fn empty_row() {
+    insta::assert_snapshot!(render(r#"layout { row { } }"#).unwrap());
+}
+
+#[test]
+fn empty_section() {
+    insta::assert_snapshot!(render(r#"layout { section "Empty Section" { } }"#).unwrap());
+}
+
+#[test]
+fn minimal_input() {
+    insta::assert_snapshot!(render(r#"layout { input width:3 }"#).unwrap());
+}
+
+#[test]
+fn minimal_table() {
+    insta::assert_snapshot!(render(r#"layout {
+        table {
+            header { col "X" width:1 }
+            tr { td "1" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn single_item_list() {
+    insta::assert_snapshot!(render(r#"layout {
+        list { item "Only one" }
+    }"#).unwrap());
+}
+
+#[test]
+fn text_with_newlines() {
+    insta::assert_snapshot!(render(r#"layout { text "Line one\nLine two\nLine three" }"#).unwrap());
+}
+
+#[test]
+fn very_long_text() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:30 {
+            text "This is a very long piece of text that should overflow the window boundaries"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn very_long_button_label() {
+    insta::assert_snapshot!(render(r#"layout { button "This is an extremely long button label" }"#).unwrap());
+}
+
+#[test]
+fn truncated_select_value() {
+    insta::assert_snapshot!(render(r#"layout { select "This value is way too long to fit" width:15 }"#).unwrap());
+}
+
+#[test]
+fn unicode_in_text() {
+    insta::assert_snapshot!(render(r#"layout { text "Hello 世界! 🌍 Привет мир!" }"#).unwrap());
+}
+
+#[test]
+fn unicode_box_alignment() {
+    // Tests that boxes with CJK (width 2 per char) and emoji align correctly
+    insta::assert_snapshot!(render(r#"layout {
+        window "日本語タイトル" width:40 {
+            box "设置 ⚙️" {
+                text "你好世界"
+                text "Hello World"
+                checkbox "启用 🔔 通知" checked
+            }
+            separator
+            table {
+                header {
+                    col "名前" width:10
+                    col "Status" width:10
+                }
+                tr { td "田中太郎" td "✅ Active" }
+                tr { td "Alice" td "❌ Inactive" }
+                tr { td "北京" td "🔄 Pending" }
+            }
+            row { spacer button "取消" button "确定 ✓" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn special_chars_in_labels() {
+    insta::assert_snapshot!(render(r#"layout {
+        button "Save & Exit"
+        checkbox "Enable \"quotes\" option"
+        text "100% complete"
+    }"#).unwrap());
+}
+
+// ========== Deep nesting ==========
+
+#[test]
+fn deeply_nested_boxes() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Level 1" {
+            box "Level 2" {
+                box "Level 3" {
+                    box "Level 4" {
+                        text "Deep inside"
+                    }
+                }
+            }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn nested_sections() {
+    insta::assert_snapshot!(render(r#"layout {
+        section "Outer" {
+            text "Outer content"
+            section "Inner" {
+                text "Inner content"
+                section "Deep" {
+                    text "Deep content"
+                }
+            }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn complex_nested_rows() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:60 {
+            row {
+                column {
+                    text "Left Column"
+                    checkbox "Option A"
+                    checkbox "Option B"
+                }
+                column {
+                    text "Right Column"
+                    radio "Choice 1"
+                    radio "Choice 2" selected
+                }
+            }
+        }
+    }"#).unwrap());
+}
+
+// ========== Multiple spacers ==========
+
+#[test]
+fn multiple_spacers_in_row() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:50 {
+            row { text "A" spacer text "B" spacer text "C" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn spacer_at_start() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:40 {
+            row { spacer button "Right-aligned" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn spacer_at_end() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:40 {
+            row { button "Left-aligned" spacer }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn only_spacers() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:30 {
+            row { spacer spacer spacer }
+        }
+    }"#).unwrap());
+}
+
+// ========== Large tables ==========
+
+#[test]
+fn wide_table() {
+    insta::assert_snapshot!(render(r#"layout {
+        table {
+            header {
+                col "ID" width:5
+                col "First Name" width:12
+                col "Last Name" width:12
+                col "Email" width:25
+                col "Status" width:10
+            }
+            tr { td "1" td "Alice" td "Johnson" td "alice.j@example.com" td "Active" }
+            tr { td "2" td "Bob" td "Smith" td "bob.smith@example.com" td "Inactive" }
+            tr { td "3" td "Charlie" td "Brown" td "charlie.b@company.org" td "Pending" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn tall_table() {
+    insta::assert_snapshot!(render(r#"layout {
+        table {
+            header { col "Row" width:5 col "Value" width:15 }
+            tr { td "1" td "First" }
+            tr { td "2" td "Second" }
+            tr { td "3" td "Third" }
+            tr { td "4" td "Fourth" }
+            tr { td "5" td "Fifth" }
+            tr { td "6" td "Sixth" }
+            tr { td "7" td "Seventh" }
+            tr { td "8" td "Eighth" }
+            tr { td "9" td "Ninth" }
+            tr { td "10" td "Tenth" }
+        }
+    }"#).unwrap());
+}
+
+// ========== Alerts with content ==========
+
+#[test]
+fn alert_with_multiple_lines() {
+    insta::assert_snapshot!(render(r#"layout {
+        alert type:error {
+            text "Error: Operation failed"
+            text "Reason: Network timeout"
+            text "Action: Please retry"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn alert_with_code() {
+    insta::assert_snapshot!(render(r#"layout {
+        alert type:warn {
+            text "Deprecation warning:"
+            code "use_old_api() -> use_new_api()"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn stacked_alerts() {
+    insta::assert_snapshot!(render(r#"layout {
+        alert type:error { text "Critical error!" }
+        alert type:warn { text "Warning message" }
+        alert type:info { text "Information note" }
+    }"#).unwrap());
+}
+
+// ========== Complex forms ==========
+
+#[test]
+fn registration_form() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Create Account" width:50 {
+            section "Personal Information" {
+                row { text "First name:" input width:20 }
+                row { text "Last name:" input width:20 }
+                row { text "Email:" input width:30 placeholder:"you@example.com" }
+            }
+            section "Password" {
+                row { text "Password:" input width:25 }
+                row { text "Confirm:" input width:25 }
+                text "Password must be at least 8 characters" style:dim
+            }
+            section "Preferences" {
+                checkbox "Subscribe to newsletter"
+                checkbox "Accept terms and conditions"
+            }
+            separator
+            row { spacer button "Cancel" button "Create Account" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn search_filters() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Search" width:45 {
+            row { text "Query:" input width:30 button "Search" }
+            separator
+            section "Filters" {
+                row { text "Category:" select "All" width:15 }
+                row { text "Date:" select "Any time" width:15 }
+                checkbox "Include archived" checked
+                checkbox "Exact match"
+            }
+            separator
+            row { text "0 results" spacer button "Clear" button "Apply" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn wizard_dialog() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Setup Wizard - Step 2 of 4" width:50 {
+            progress 50
+            separator
+            section "Select Installation Type" {
+                radio "Standard (recommended)" selected
+                radio "Custom"
+                radio "Minimal"
+            }
+            spacer
+            text "Standard installation includes all features."
+            separator
+            row { button "Back" spacer button "Next" }
+        }
+    }"#).unwrap());
+}
+
+// ========== Stress tests ==========
+
+#[test]
+fn many_rows() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:40 {
+            row { text "Row 1" input width:10 }
+            row { text "Row 2" input width:10 }
+            row { text "Row 3" input width:10 }
+            row { text "Row 4" input width:10 }
+            row { text "Row 5" input width:10 }
+            row { text "Row 6" input width:10 }
+            row { text "Row 7" input width:10 }
+            row { text "Row 8" input width:10 }
+            row { text "Row 9" input width:10 }
+            row { text "Row 10" input width:10 }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn many_buttons_in_row() {
+    insta::assert_snapshot!(render(r#"layout {
+        row {
+            button "A"
+            button "B"
+            button "C"
+            button "D"
+            button "E"
+            button "F"
+            button "G"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn many_checkboxes() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Options" {
+            checkbox "Option 1" checked
+            checkbox "Option 2"
+            checkbox "Option 3" checked
+            checkbox "Option 4"
+            checkbox "Option 5" checked
+            checkbox "Option 6"
+            checkbox "Option 7"
+            checkbox "Option 8" checked
+            checkbox "Option 9"
+            checkbox "Option 10"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn long_list() {
+    insta::assert_snapshot!(render(r#"layout {
+        list {
+            item "Item 1"
+            item "Item 2"
+            item "Item 3"
+            item "Item 4"
+            item "Item 5" selected
+            item "Item 6"
+            item "Item 7"
+            item "Item 8"
+            item "Item 9"
+            item "Item 10"
+            item "Item 11"
+            item "Item 12"
+        }
+    }"#).unwrap());
+}
+
+// ========== Mixed content ==========
+
+#[test]
+fn dashboard() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Dashboard" width:60 {
+            row {
+                box "Stats" {
+                    text "Users: 1,234"
+                    text "Active: 567"
+                    text "New: 89"
+                }
+                box "Health" {
+                    progress 85
+                    text "System OK" style:bold
+                }
+            }
+            separator
+            section "Recent Activity" {
+                table {
+                    header {
+                        col "Time" width:10
+                        col "User" width:15
+                        col "Action" width:20
+                    }
+                    tr { td "10:30" td "alice" td "Login" }
+                    tr { td "10:25" td "bob" td "Upload file" }
+                    tr { td "10:20" td "charlie" td "Edit profile" }
+                }
+            }
+            row { spacer button "Refresh" button "Settings" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn error_dialog_with_details() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Error" width:50 {
+            alert type:error {
+                text "Failed to save document"
+            }
+            separator
+            section "Details" {
+                code "Error: ENOSPC - No space left on device"
+                text "Location: /home/user/documents/file.txt"
+            }
+            separator
+            row { checkbox "Show technical details" spacer button "OK" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn mixed_controls_row() {
+    insta::assert_snapshot!(render(r#"layout {
+        window width:60 {
+            row {
+                text "Status:"
+                checkbox "Active" checked
+                select "Priority" width:12
+                button "Save"
+                button "Cancel"
+            }
+        }
+    }"#).unwrap());
+}
+
+// ========== Padding and gaps ==========
+
+#[test]
+fn window_no_padding() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "No Padding" padding:0 {
+            text "Tight fit"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn window_large_padding() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Large Padding" padding:3 {
+            text "Spacious"
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn row_custom_gap() {
+    insta::assert_snapshot!(render(r#"layout {
+        row gap:5 { text "A" text "B" text "C" }
+    }"#).unwrap());
+}
+
+#[test]
+fn row_no_gap() {
+    insta::assert_snapshot!(render(r#"layout {
+        row gap:0 { button "A" button "B" button "C" }
+    }"#).unwrap());
+}
+
+// ========== Grid / Masonry layouts ==========
+
+#[test]
+fn grid_simple_2x2() {
+    // Basic 2x2 grid of equal-sized boxes
+    insta::assert_snapshot!(render(r#"layout {
+        window {
+            row gap:0 { box "A" width:21 {} box "B" width:21 {} }
+            row gap:0 { box "C" width:21 {} box "D" width:21 {} }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn grid_masonry_3_row() {
+    // Masonry layout: varying column widths across rows
+    // Row 1: F, G (2 equal)
+    // Row 2: C, D, E (3 columns, D wider)
+    // Row 3: A, B (2 equal)
+    insta::assert_snapshot!(render(r#"layout {
+        window {
+            row gap:0 {
+                box "F" width:25 { text "Panel F" }
+                box "G" width:25 { text "Panel G" }
+            }
+            row gap:0 {
+                box "C" width:15 { text "C" }
+                box "D" width:20 { text "D" }
+                box "E" width:15 { text "E" }
+            }
+            row gap:0 {
+                box "A" width:25 { text "Panel A" }
+                box "B" width:25 { text "Panel B" }
+            }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn grid_dashboard_complex() {
+    // Complex dashboard grid with nested content
+    insta::assert_snapshot!(render(r#"layout {
+        window "Dashboard" {
+            row gap:0 {
+                box "Metrics" width:30 {
+                    text "Users: 1,234"
+                    text "Sessions: 5,678"
+                    progress 75
+                }
+                box "Status" width:30 {
+                    text "API: Online" style:bold
+                    text "DB: Online" style:bold
+                    text "Cache: Degraded" style:danger
+                }
+            }
+            row gap:0 {
+                box "A" width:20 { text "Widget A" }
+                box "B" width:20 { text "Widget B" }
+                box "C" width:20 { text "Widget C" }
+            }
+            row gap:0 {
+                box "Logs" width:40 {
+                    code "[10:30] Request received"
+                    code "[10:31] Processing..."
+                }
+                box "Quick Actions" width:20 {
+                    button "Refresh"
+                    button "Export"
+                }
+            }
+        }
+    }"#).unwrap());
+}
+
+// ========== Code blocks ==========
+
+#[test]
+fn multiline_code() {
+    insta::assert_snapshot!(render(r#"layout {
+        code ```
+fn factorial(n: u64) -> u64 {
+    match n {
+        0 | 1 => 1,
+        _ => n * factorial(n - 1),
+    }
+}
+```
+    }"#).unwrap());
+}
+
+#[test]
+fn code_in_box() {
+    insta::assert_snapshot!(render(r#"layout {
+        box "Example" {
+            code ```
+let x = 42;
+println!("{}", x);
+```
+        }
+    }"#).unwrap());
+}
+
+// ========== Real-world scenarios ==========
+
+#[test]
+fn git_commit_dialog() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Commit Changes" width:55 {
+            section "Changed Files" {
+                list {
+                    item "src/main.rs" selected
+                    item "src/lib.rs"
+                    item "Cargo.toml"
+                }
+            }
+            separator
+            text "Commit message:"
+            input width:45 placeholder:"Enter commit message..."
+            separator
+            checkbox "Amend previous commit"
+            checkbox "Sign commit"
+            separator
+            row { button "Cancel" spacer button "Commit" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn package_manager() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "Package Manager" width:60 {
+            row { text "Search:" input width:35 button "Search" }
+            separator
+            table {
+                header {
+                    col "Package" width:20
+                    col "Version" width:10
+                    col "Status" width:12
+                }
+                tr { td "react" td "18.2.0" td "Installed" }
+                tr { td "typescript" td "5.0.0" td "Outdated" }
+                tr { td "webpack" td "5.88.0" td "Available" }
+            }
+            separator
+            row { text "3 packages" spacer button "Update All" button "Install" }
+        }
+    }"#).unwrap());
+}
+
+#[test]
+fn database_query_tool() {
+    insta::assert_snapshot!(render(r#"layout {
+        window "SQL Query" width:65 {
+            text "Enter query:"
+            code ```
+SELECT id, name, email
+FROM users
+WHERE active = true
+ORDER BY name;
+```
+            separator
+            alert type:info { text "Query executed in 0.023s" }
+            table {
+                header {
+                    col "id" width:5 align:right
+                    col "name" width:15
+                    col "email" width:25
+                }
+                tr { td "1" td "Alice" td "alice@example.com" }
+                tr { td "2" td "Bob" td "bob@example.com" }
+            }
+            separator
+            row { text "2 rows" spacer button "Export" button "Run" }
+        }
+    }"#).unwrap());
+}
+
+// ========== Sample.md examples ==========
+
+#[test]
+fn sample_login_form() {
+    insta::assert_snapshot!(render(r#"layout {
+  window "Login" width:40 {
+    section "Credentials" {
+      row { text "Username:" input width:20 }
+      row { text "Password:" input width:20 placeholder:"********" }
+    }
+    separator
+    row gap:2 {
+      checkbox "Remember me"
+      spacer
+      button "Cancel"
+      button "Sign In" style:bold
+    }
+  }
+}"#).unwrap());
+}
+
+#[test]
+fn sample_dashboard() {
+    insta::assert_snapshot!(render(r#"layout {
+  window "Dashboard" width:60 {
+    section "Build Status" {
+      row {
+        text "main"
+        progress 100
+        text "passing" style:bold
+      }
+      row {
+        text "develop"
+        progress 75
+        text "building..."
+      }
+      row {
+        text "feature/auth"
+        progress 30
+        text "failing" style:danger
+      }
+    }
+    separator
+    section "Quick Actions" {
+      row gap:2 {
+        button "New Build"
+        button "Settings"
+        spacer
+        link "View Logs"
+      }
+    }
+    alert type:info { text "Last deploy: 2 hours ago" }
+  }
+}"#).unwrap());
+}
+
+#[test]
+fn sample_export_dialog() {
+    insta::assert_snapshot!(render(r#"layout {
+  window "Export Options" width:45 {
+    section "Format" {
+      row { text "Type:" select "PDF Document" width:25 }
+      row { text "Quality:" select "High (300 DPI)" width:25 }
+    }
+    separator
+    section "Destination" {
+      row {
+        radio "Local file" selected
+      }
+      row {
+        radio "Cloud storage"
+      }
+      row {
+        radio "Email attachment"
+      }
+    }
+    separator
+    row gap:2 {
+      spacer
+      button "Cancel"
+      button "Export" style:bold
+    }
+  }
+}"#).unwrap());
+}
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index f621968..35a9c82 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -5,6 +5,7 @@ use parking_lot::Mutex;
 
 use tauri::WebviewWindowBuilder;
 
+pub mod asciiscript;
 pub mod commands;
 pub mod config;
 pub mod diff;
diff --git a/src-tauri/src/state.rs b/src-tauri/src/state.rs
index f982aed..3feb504 100644
--- a/src-tauri/src/state.rs
+++ b/src-tauri/src/state.rs
@@ -1037,6 +1037,39 @@ impl ContentModel {
             }
         }
 
+        // Pre-render asciiscript blocks
+        struct AsciiScriptBlock {
+            rendered_lines: Vec<String>,
+            original_line_count: u32,
+        }
+        let mut asciiscript_blocks: HashMap<u32, AsciiScriptBlock> = HashMap::new();
+        for block in &md_metadata.code_blocks {
+            if block.language.as_deref() == Some("asciiscript") {
+                // Collect content lines (between fences, 1-indexed)
+                let content_start = block.start_line as usize; // fence line
+                let content_end = block.end_line as usize; // closing fence
+                let content_lines: Vec<&str> = content
+                    .lines()
+                    .skip(content_start) // skip opening fence
+                    .take(content_end - content_start - 1) // exclude closing fence
+                    .collect();
+                let source = content_lines.join("\n");
+
+                let rendered_lines = match crate::asciiscript::render(&source) {
+                    Ok(output) => output.lines().map(String::from).collect(),
+                    Err(_) => continue, // On error, skip replacement (show raw source)
+                };
+
+                asciiscript_blocks.insert(
+                    block.start_line + 1, // First content line (after fence)
+                    AsciiScriptBlock {
+                        rendered_lines,
+                        original_line_count: (content_end - content_start - 1) as u32,
+                    },
+                );
+            }
+        }
+
         // Build set of table lines and map line numbers to their HTML cells
         let mut table_lines: HashSet<u32> = HashSet::new();
         let mut table_replacements: HashMap<u32, String> = HashMap::new();
@@ -1065,10 +1098,17 @@ impl ContentModel {
             }
         }
 
+        // Helper: check if line is inside asciiscript block (but not the first content line)
+        let is_asciiscript_skip_line = |line_num: u32| -> bool {
+            asciiscript_blocks.iter().any(|(&start, block)| {
+                line_num > start && line_num < start + block.original_line_count
+            })
+        };
+
         let mut lines: Vec<Line> = content
             .lines()
             .enumerate()
-            .map(|(i, line_content)| {
+            .flat_map(|(i, line_content)| {
                 let line_num = (i + 1) as u32;
 
                 // Use table replacement if available
@@ -1082,6 +1122,26 @@ impl ContentModel {
                     line: line_num,
                 };
 
+                // Check if this is the first content line of an asciiscript block
+                if let Some(block) = asciiscript_blocks.get(&line_num) {
+                    // Output all rendered lines instead of source
+                    return block
+                        .rendered_lines
+                        .iter()
+                        .map(|rendered| Line {
+                            content: rendered.clone(),
+                            html: Some(LineHtml::Full(html_escape(rendered))),
+                            origin: LineOrigin::Virtual,
+                            semantics: LineSemantics::Markdown(MarkdownSemantics::CodeBlockContent),
+                        })
+                        .collect::<Vec<_>>();
+                }
+
+                // Skip subsequent content lines inside asciiscript block
+                if is_asciiscript_skip_line(line_num) {
+                    return vec![];
+                }
+
                 // Determine HTML rendering strategy and semantics
                 if let Some(info) = code_block_lines.get(&line_num) {
                     // Inside a code block
@@ -1113,24 +1173,24 @@ impl ContentModel {
                         Some(html_escape(&display_content))
                     };
 
-                    Line {
+                    vec![Line {
                         content: display_content,
                         html: html.map(LineHtml::Full),
                         origin,
                         semantics,
-                    }
+                    }]
                 } else if table_lines.contains(&line_num) {
                     // Table row: use per-cell HTML if available
                     let html = table_html_cells
                         .get(&line_num)
                         .cloned()
                         .map(LineHtml::Cells);
-                    Line {
+                    vec![Line {
                         content: display_content.clone(),
                         html,
                         origin,
                         semantics: LineSemantics::Markdown(MarkdownSemantics::TableRow),
-                    }
+                    }]
                 } else {
                     // Regular markdown: render with structural markers preserved
                     let rendered = markdown::render_line(line_content);
@@ -1138,12 +1198,12 @@ impl ContentModel {
                         Some(md_sem) => LineSemantics::Markdown(md_sem),
                         None => LineSemantics::Plain,
                     };
-                    Line {
+                    vec![Line {
                         content: display_content,
                         html: Some(LineHtml::Full(rendered.html)),
                         origin,
                         semantics,
-                    }
+                    }]
                 }
             })
             .collect();
@@ -1578,4 +1638,73 @@ mod tests {
             }
         }
     }
+
+    #[test]
+    fn asciiscript_in_markdown_renders_ascii_art() {
+        let markdown_with_asciiscript = r#"# Test
+
+```asciiscript
+layout {
+  window "Test" width:30 {
+    text "Hello"
+  }
+}
+```
+
+Done.
+"#;
+
+        let state = test_markdown_state(markdown_with_asciiscript, "test.md");
+        let response = state.to_response();
+
+        // Find lines with rendered ASCII art (should have box characters)
+        let has_box_chars = response
+            .lines
+            .iter()
+            .any(|l| l.content.contains('+') && l.content.contains('-'));
+        assert!(has_box_chars, "Should have rendered ASCII box art");
+
+        // Should NOT have original source (layout { ... })
+        let has_source = response
+            .lines
+            .iter()
+            .any(|l| l.content.contains("layout {"));
+        assert!(!has_source, "Should NOT have original asciiscript source");
+
+        // Fence lines should still be present
+        let has_open_fence = response
+            .lines
+            .iter()
+            .any(|l| l.content.contains("```asciiscript"));
+        let has_close_fence = response
+            .lines
+            .iter()
+            .filter(|l| l.content.trim() == "```")
+            .count()
+            >= 1;
+        assert!(has_open_fence, "Should have opening fence");
+        assert!(has_close_fence, "Should have closing fence");
+    }
+
+    #[test]
+    fn asciiscript_parse_error_shows_raw_source() {
+        let markdown_with_invalid_asciiscript = r#"# Test
+
+```asciiscript
+invalid { not valid syntax
+```
+
+Done.
+"#;
+
+        let state = test_markdown_state(markdown_with_invalid_asciiscript, "test.md");
+        let response = state.to_response();
+
+        // On parse error, should show raw source
+        let has_source = response
+            .lines
+            .iter()
+            .any(|l| l.content.contains("invalid {"));
+        assert!(has_source, "Should show raw source on parse error");
+    }
 }
diff --git a/test-fixtures/sample.md b/test-fixtures/sample.md
index 08ff98d..951464d 100644
--- a/test-fixtures/sample.md
+++ b/test-fixtures/sample.md
@@ -158,6 +158,99 @@ The loop: human and AI taking turns until something crystallizes.
 
 ---
 
+## AsciiScript
+
+AI can generate UI mockups using AsciiScript — a DSL that renders to ASCII box art:
+
+```asciiscript
+layout {
+  window "Login" width:40 {
+    section "Credentials" {
+      row { text "Username:" input width:20 }
+      row { text "Password:" input width:20 placeholder:"********" }
+    }
+    separator
+    row gap:2 {
+      checkbox "Remember me"
+      spacer
+      button "Cancel"
+      button "Sign In" style:bold
+    }
+  }
+}
+```
+
+A more complex example with multiple components:
+
+```asciiscript
+layout {
+  window "Dashboard" width:60 {
+    section "Build Status" {
+      row {
+        text "main"
+        progress 100
+        text "passing" style:bold
+      }
+      row {
+        text "develop"
+        progress 75
+        text "building..."
+      }
+      row {
+        text "feature/auth"
+        progress 30
+        text "failing" style:danger
+      }
+    }
+    separator
+    section "Quick Actions" {
+      row gap:2 {
+        button "New Build"
+        button "Settings"
+        spacer
+        link "View Logs"
+      }
+    }
+    alert type:info { text "Last deploy: 2 hours ago" }
+  }
+}
+```
+
+A dropdown select with options:
+
+```asciiscript
+layout {
+  window "Export Options" width:45 {
+    section "Format" {
+      row { text "Type:" select "PDF Document" width:25 }
+      row { text "Quality:" select "High (300 DPI)" width:25 }
+    }
+    separator
+    section "Destination" {
+      row {
+        radio "Local file" selected
+      }
+      row {
+        radio "Cloud storage"
+      }
+      row {
+        radio "Email attachment"
+      }
+    }
+    separator
+    row gap:2 {
+      spacer
+      button "Cancel"
+      button "Export" style:bold
+    }
+  }
+}
+```
+
+AsciiScript supports windows, boxes, sections, rows, text, inputs, buttons, checkboxes, radio buttons, progress bars, tables, alerts, and more. See the spec for full details.
+
+---
+
 ## Portals
 
 Portals embed live code from other files: