Card

// ── Card ──
pub fn buildCard(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 12);

    // ── 变体 ──
    try c.appendChild(a, try label(cx, "Variants (default / outlined / elevated)"));
    try c.appendChild(a, try W.Card(.{ .title = "Default", .subtitle = "with subtitle", .variant = .default, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Outlined", .variant = .outlined, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Elevated", .variant = .elevated, .width = 320 }).mount(scope, cx));

    // ── body ──
    try c.appendChild(a, try label(cx, "With body"));
    const res = try W.Card(.{ .title = "Card with body", .width = 320 }).mountBody(scope, cx);
    try res.body.appendChild(a, try ui.text(cx, "Body content goes here.", .{ .font_size = 13, .color = light.color.fg_secondary }));
    try c.appendChild(a, res.card);

    // ── 交互态 ──
    try c.appendChild(a, try label(cx, "States (selected / hoverable / interactive / no-pad)"));
    try c.appendChild(a, try W.Card(.{ .title = "Selected", .selected = true, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Hoverable", .hoverable = true, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "Interactive", .interactive = true, .width = 320 }).mount(scope, cx));
    try c.appendChild(a, try W.Card(.{ .title = "No padding", .padded = false, .width = 320 }).mount(scope, cx));
    return c;
}