SizedBox

// Fixed width and height
SizedBox(width: 100, height: 100) {
    ColoredBox(color: Color(0xFF_FF6B6B))
}

// Width only
SizedBox(width: 200) {
    Text("200px wide")
}

// Height only
SizedBox(height: 50) {
    Text("50px tall")
}

// Empty spacer
SizedBox(width: 20)  // Horizontal space
SizedBox(height: 20) // Vertical space

import Foundation
import JavaScriptKit
import Observation
import Shaft
import ShaftWeb

Shaft.backend = ShaftWebBackend { _ in
    JSObject.global.document.querySelector("canvas")
}

runApp(SizedBoxDemoApp())

final class SizedBoxDemoApp: StatelessWidget {
    func build(context: any BuildContext) -> any Widget {
        Column(mainAxisAlignment: .center, spacing: 24) {
            Text("SizedBox Examples")
                .textStyle(.init(fontSize: 24, fontWeight: .bold))

            // Fixed size box
            SizedBox(width: 150, height: 100) {
                Text("150×100")
                    .textStyle(.init(color: Color(0xFF_FFFFFF)))
                    .center()
            }
            .decoration(.box(color: Color(0xFF_4CAF50)))

            // Width only
            SizedBox(width: 200) {
                Text("200px wide, natural height")
                    .center()
            }
            .decoration(.box(color: Color(0xFF_2196F3)))
            .padding(.all(12))

            // Height only
            SizedBox(height: 80) {
                Text("Natural width, 80px tall")
                    .center()
            }
            .decoration(.box(color: Color(0xFF_FF9800)))
            .padding(.horizontal(20))

            // Spacing
            Text("SizedBox for spacing:")
            Column(crossAxisAlignment: .start) {
                Text("Text 1")
                SizedBox(height: 20)
                Text("Text 2 (20px below)")
            }
        }
        .padding(.all(24))
    }
}

SizedBox.shrink()  // 0×0 box

condition ? Widget() : SizedBox.shrink()

SizedBox.expand() {
    ColoredBox(color: Color(0xFF_E0E0E0))
}