Pre-configured SwiftUI layout containers that automatically apply TTBaseUIKit's default spacing (P_CONS_DEF) and alignment options. These wrappers eliminate repetitive spacing and alignment boilerplate while keeping a consistent visual rhythm across the app.

Component	Description
TTBaseSUIHStack	Horizontal stack with default spacing + alignment
TTBaseSUIVStack	Vertical stack with default spacing + alignment
TTBaseSUIScrollView	ScrollView with keyboard dismiss on drag
TTBaseSUILazyVGrid	Lazy vertical grid with configurable columns
TTBaseSUILazyHStack	Lazy horizontal stack for large collections

---

↔️ TTBaseSUIHStack

// Default spacing + center alignment
TTBaseSUIHStack {
    TTBaseSUIImage(awesomeIcon: .user, color: .systemBlue)
        .frame(width: 24, height: 24)
    TTBaseSUIText(text: "John Doe", type: .TITLE)
    Spacer()
    TTBaseSUIText(text: "Admin", type: .SUB_TITLE)
}

// Custom spacing + leading alignment
TTBaseSUIHStack(spacing: 4, alignment: .top) {
    Circle().fill(.green).frame(width: 8, height: 8)
    TTBaseSUIText(text: "Online", type: .DESC)
}

---

↕️ TTBaseSUIVStack

// Default spacing + leading alignment
TTBaseSUIVStack {
    TTBaseSUIText(text: "Product Name", type: .TITLE)
    TTBaseSUIText(text: "Electronics • Headphones", type: .SUB_TITLE)
    TTBaseSUIText(text: "$29.99", type: .BODY)
}

// Center-aligned with custom spacing
TTBaseSUIVStack(spacing: 24, alignment: .center) {
    TTBaseSUIImage(systemName: "checkmark.circle.fill")
        .foregroundStyle(.green)
        .frame(width: 48, height: 48)
    TTBaseSUIText(text: "Payment Successful!", type: .TITLE)
    TTBaseSUIText(text: "Your order has been placed.", type: .BODY)
}

---

📜 TTBaseSUIScrollView

// Vertical scroll (default)
TTBaseSUIScrollView {
    TTBaseSUIVStack {
        ForEach(items) { item in
            ItemRowView(item: item)
        }
    }
}

// Horizontal scroll
TTBaseSUIScrollView(axis: .horizontal, showsIndicators: false) {
    TTBaseSUIHStack(spacing: 12) {
        ForEach(categories) { cat in
            CategoryChipView(category: cat)
        }
    }
    .padding(.horizontal, 16)
}

---

⚡ TTBaseSUILazyVGrid

// 2-column grid
TTBaseSUILazyVGrid(columns: 2) {
    ForEach(products) { product in
        ProductCardView(product: product)
    }
}

// 3-column compact grid
TTBaseSUILazyVGrid(
    columns: 3,
    spacing: 8,
    itemSpacing: 8
) {
    ForEach(photos) { photo in
        TTBaseSUIAsyncImage(url: photo.url)
            .scaledToFill()
            .frame(height: 120)
            .clipped()
    }
}

---

📖 Common Parameters

Parameter	Default	Description
spacing	TTSize.P_CONS_DEF	Space between items
alignment	.leading / .center	Item alignment
columns	2 (grid)	Grid column count
itemSpacing	TTSize.P_CONS_DEF	Space between grid items