otter-ui

const ui = @import("otter_ui");

const caps = ui.ui_frame.Capacities{ .elements = 64, .hit_regions = 64, .overlays = 8 };
var state: ui.UiState(caps) = .{};

var frame = state.begin(.{
    .viewport = .{ .x = 0, .y = 0, .width = width, .height = height },
    .scale = surface.scale,
    .font = font,
    .theme = &theme,
});

const save_id = ui.SurfaceId.namedComptime("save");
const children = [_]ui.SurfaceNode{
    ui.SurfaceNode.label(ui.SurfaceId.namedComptime("title"), "Settings", 18, null),
    ui.SurfaceNode.button(save_id, "Save"),
};
const root = ui.SurfaceNode.column(ui.SurfaceId.namedComptime("root"), .{
    .width = .fill,
    .height = .fill,
    .gap = 8,
    .padding = ui.Padding.uniform(12),
}, &children);

_ = try frame.render(&root, frame.viewport);
try frame.finish();

state.rasterize(surface, damage_rects, full_redraw);

if (state.hitTest(pointer)) |hit| {
    if (hit.id.eql(save_id)) { /* handle click */ }
}