Button

pub fn buildButton(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const icons = ui.assets.common;
    const c = try col(cx, 16);

    const variant_specs = [_]struct { v: W.ButtonVariant, t: []const u8 }{
        .{ .v = .primary, .t = "Primary" },
        .{ .v = .secondary, .t = "Secondary" },
        .{ .v = .ghost, .t = "Ghost" },
        .{ .v = .danger, .t = "Danger" },
        .{ .v = .link, .t = "Link" },
    };
    const size_specs = [_]struct { s: W.ButtonSize, t: []const u8 }{
        .{ .s = .xs, .t = "XS" },
        .{ .s = .sm, .t = "SM" },
        .{ .s = .md, .t = "MD" },
        .{ .s = .lg, .t = "LG" },
    };

    // ── variant × size 全矩阵 ──
    try c.appendChild(a, try label(cx, "Variants × Sizes"));
    const matrix = try col(cx, 8);
    inline for (variant_specs) |vs| {
        const r = try row(cx, 10);
        inline for (size_specs) |ss| {
            try r.appendChild(a, try W.Button(.{
                .label = vs.t,
                .variant = vs.v,
                .size = ss.s,
            }).mount(scope, cx));
        }
        try matrix.appendChild(a, r);
    }
    try c.appendChild(a, matrix);

    // ── 带前置图标（leading icon）每个 variant ──
    try c.appendChild(a, try label(cx, "With leading icon"));
    const icon_row = try row(cx, 10);
    inline for (variant_specs) |vs| {
        try icon_row.appendChild(a, try W.Button(.{
            .label = vs.t,
            .variant = vs.v,
            .icon_asset = icons.plus,
        }).mount(scope, cx));
    }
    try c.appendChild(a, icon_row);

    // ── leading icon × sizes（图标随尺寸缩放）──
    try c.appendChild(a, try label(cx, "Leading icon × sizes"));
    const icon_size_row = try row(cx, 10);
    inline for (size_specs) |ss| {
        try icon_size_row.appendChild(a, try W.Button(.{
            .label = "Download",
            .variant = .secondary,
            .size = ss.s,
            .icon_asset = icons.folder,
            .icon_size = cx.tokens.control.get(ss.s).icon_size,
        }).mount(scope, cx));
    }
    try c.appendChild(a, icon_size_row);

    // ── icon-only（仅图标）每个 variant ──
    try c.appendChild(a, try label(cx, "Icon only"));
    const icon_only_row = try row(cx, 10);
    inline for (variant_specs) |vs| {
        try icon_only_row.appendChild(a, try W.Button(.{
            .variant = vs.v,
            .icon_only = true,
            .icon_asset = icons.star,
        }).mount(scope, cx));
    }
    try c.appendChild(a, icon_only_row);

    // ── icon-only × sizes ──
    try c.appendChild(a, try label(cx, "Icon only × sizes"));
    const icon_only_sizes = try row(cx, 10);
    inline for (size_specs) |ss| {
        try icon_only_sizes.appendChild(a, try W.Button(.{
            .variant = .secondary,
            .icon_only = true,
            .icon_asset = icons.search,
            .size = ss.s,
            .icon_size = cx.tokens.control.get(ss.s).icon_size,
        }).mount(scope, cx));
    }
    try c.appendChild(a, icon_only_sizes);

    // ── loading（加载中）每个 variant ──
    try c.appendChild(a, try label(cx, "Loading"));
    const loading_row = try row(cx, 10);
    inline for (variant_specs) |vs| {
        try loading_row.appendChild(a, try W.Button(.{
            .label = "Saving…",
            .variant = vs.v,
            .loading = true,
        }).mount(scope, cx));
    }
    try c.appendChild(a, loading_row);

    // ── loading × sizes（spinner 随尺寸缩放）──
    try c.appendChild(a, try label(cx, "Loading × sizes"));
    const loading_sizes = try row(cx, 10);
    inline for (size_specs) |ss| {
        try loading_sizes.appendChild(a, try W.Button(.{
            .label = "Loading",
            .variant = .primary,
            .size = ss.s,
            .loading = true,
        }).mount(scope, cx));
    }
    try c.appendChild(a, loading_sizes);

    // ── 状态：normal / disabled / disabled+icon / loading+icon-only ──
    try c.appendChild(a, try label(cx, "States"));
    const states = try row(cx, 10);
    try states.appendChild(a, try W.Button(.{ .label = "Normal" }).mount(scope, cx));
    try states.appendChild(a, try W.Button(.{ .label = "Disabled", .disabled = true }).mount(scope, cx));
    try states.appendChild(a, try W.Button(.{ .label = "Disabled", .disabled = true, .icon_asset = icons.plus }).mount(scope, cx));
    try states.appendChild(a, try W.Button(.{ .label = "Loading", .loading = true }).mount(scope, cx));
    try states.appendChild(a, try W.Button(.{ .icon_only = true, .icon_asset = icons.x_close, .loading = true, .variant = .secondary }).mount(scope, cx));
    try c.appendChild(a, states);

    // ── block（块级，宽度填充）──
    try c.appendChild(a, try label(cx, "Block (full width)"));
    const block_col = try col(cx, 8);
    block_col.style.width = .{ .px = 280 };
    try block_col.appendChild(a, try W.Button(.{ .label = "Block primary", .block = true }).mount(scope, cx));
    try block_col.appendChild(a, try W.Button(.{ .label = "Block + icon", .block = true, .variant = .secondary, .icon_asset = icons.check }).mount(scope, cx));
    try c.appendChild(a, block_col);

    return c;
}