Tabs

pub fn buildTabs(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const c = try col(cx, 16);
    const items = [_]W.tabs.TabItem{
        .{ .id = "t1", .label_text = "Overview" },
        .{ .id = "t2", .label_text = "Details" },
        .{ .id = "t3", .label_text = "Settings", .badge = 3 },
        .{ .id = "t4", .label_text = "Disabled", .disabled = true },
    };

    const status = try ui.text(cx, "active → (none)", .{ .font_size = 13, .color = light.color.fg_secondary });
    status.meta.ownership.meta.test_id = "story.tabs.status";
    try c.appendChild(a, status);
    const story = try cx.bindState(TabsStory, .{ .status = status });

    // ── 变体 ──
    inline for (.{ W.tabs.TabsVariant.underline, .pill, .tab }, .{ "underline", "pill", "tab" }) |variant, name| {
        try c.appendChild(a, try label(cx, name));
        const tabs_node = try W.Tabs(.{
            .items = &items,
            .variant = variant,
            .on_change = ui.Cx.strHandlerFrom(TabsStory, story, TabsStory.onChange),
        }).mount(scope, cx);
        if (variant == .underline) tabs_node.meta.ownership.meta.test_id = "story.tabs.underline";
        try c.appendChild(a, tabs_node);
    }

    // ── 尺寸 ──
    const size_items = [_]W.tabs.TabItem{
        .{ .id = "a", .label_text = "One" },
        .{ .id = "b", .label_text = "Two" },
        .{ .id = "c", .label_text = "Three" },
    };
    try c.appendChild(a, try label(cx, "Sizes (xs / sm / md / lg)"));
    inline for (.{ W.tabs.TabsSize.xs, .sm, .md, .lg }) |sz| {
        try c.appendChild(a, try W.Tabs(.{ .items = &size_items, .variant = .pill, .size = sz }).mount(scope, cx));
    }
    return c;
}