autosample/src/ui/ui_core.h

#pragma once
// ui_core.h - Thin wrapper around Clay (https://github.com/nicbarker/clay)
// Provides Clay initialization, per-frame lifecycle, and text measurement bridging.

#include "base/base_inc.h"
#include "clay.h"

////////////////////////////////
// Text measurement callback (provided by renderer)
// This is our app-level callback; we adapt it to Clay's signature internally.

typedef Vec2F32 (*UI_MeasureTextFn)(const char *text, S32 length, F32 font_size, void *user_data);

////////////////////////////////
// UI Context

struct UI_Context {
    Clay_Context  *clay_ctx;
    void          *clay_memory;

    // Text measurement
    UI_MeasureTextFn measure_text_fn;
    void            *measure_text_user_data;
};

////////////////////////////////
// Lifecycle

UI_Context *ui_create(F32 viewport_w, F32 viewport_h);
void        ui_destroy(UI_Context *ctx);

// Call each frame before declaring layout
void ui_begin_frame(UI_Context *ctx, F32 viewport_w, F32 viewport_h,
                    Vec2F32 mouse_pos, B32 mouse_down,
                    Vec2F32 scroll_delta, F32 dt);

// Call after layout is declared; returns Clay's render command array
Clay_RenderCommandArray ui_end_frame(UI_Context *ctx);

////////////////////////////////
// Text measurement

void ui_set_measure_text_fn(UI_Context *ctx, UI_MeasureTextFn fn, void *user_data);

// Measure text using the registered callback (available after ui_begin_frame)
Vec2F32 ui_measure_text(const char *text, S32 length, F32 font_size);

////////////////////////////////
// Theme colors (convenience - 0-255 Clay_Color)

struct UI_Theme {
    Clay_Color bg_dark;
    Clay_Color bg_medium;
    Clay_Color bg_light;
    Clay_Color bg_lighter;
    Clay_Color border;
    Clay_Color text;
    Clay_Color text_dim;
    Clay_Color accent;
    Clay_Color accent_hover;
    Clay_Color button_text;
    Clay_Color disabled_bg;
    Clay_Color disabled_text;
    Clay_Color title_bar;
    Clay_Color scrollbar_bg;
    Clay_Color scrollbar_grab;
    Clay_Color shadow;          // Semi-transparent black for drop shadows

    // Tab bar colors
    Clay_Color tab_active_top;
    Clay_Color tab_active_bottom;
    Clay_Color tab_inactive;
    Clay_Color tab_inactive_hover;
    Clay_Color tab_text;       // Always light — readable on colored tab gradient

    // Corner radius (unscaled pixels, applied via uis())
    F32 corner_radius;
};

extern UI_Theme g_theme;
extern S32 g_theme_id;

// Set theme by index: 0 = Dark, 1 = Light
void ui_set_theme(S32 theme_id);

// Accent color palette: 0=Blue, 1=Turquoise, 2=Orange, 3=Purple, 4=Pink, 5=Red, 6=Green
extern S32 g_accent_id;
void ui_set_accent(S32 accent_id);

////////////////////////////////
// UI scale (Cmd+/Cmd- zoom)

extern F32 g_ui_scale;

// Scale a float value (for CLAY_SIZING_FIXED, corner radii, etc.)
static inline float uis(float x) { return x * g_ui_scale; }

// Scale to uint16_t (for Clay_Padding, childGap, etc.)
static inline uint16_t uip(float x) { return (uint16_t)(x * g_ui_scale + 0.5f); }

// Scale to uint16_t font size
static inline uint16_t uifs(float x) { return (uint16_t)(x * g_ui_scale + 0.5f); }

////////////////////////////////
// Tab styling

#define TAB_ACTIVE_TOP       g_theme.tab_active_top
#define TAB_ACTIVE_BOTTOM    g_theme.tab_active_bottom
#define TAB_INACTIVE_BG      g_theme.tab_inactive
#define TAB_INACTIVE_HOVER   g_theme.tab_inactive_hover
#define TAB_HEIGHT           uis(26)
#define TAB_CORNER_RADIUS    CORNER_RADIUS
#define TAB_PADDING_H        uip(10)

////////////////////////////////
// Custom render types (for gradient rects via CLAY_RENDER_COMMAND_TYPE_CUSTOM)

enum CustomRenderType {
    CUSTOM_RENDER_VGRADIENT = 1,
    CUSTOM_RENDER_ICON = 2,
    CUSTOM_RENDER_ROTATED_ICON = 3,
};

struct CustomGradientData {
    CustomRenderType type;
    Clay_Color top_color;
    Clay_Color bottom_color;
};

struct CustomIconData {
    CustomRenderType type;   // CUSTOM_RENDER_ICON
    S32              icon_id;
    Clay_Color       color;
};

struct CustomRotatedIconData {
    CustomRenderType type;   // CUSTOM_RENDER_ROTATED_ICON
    S32              icon_id;
    Clay_Color       color;
    F32              angle_rad;
};

////////////////////////////////
// Font sizes

#define FONT_SIZE_NORMAL     uifs(15)
#define FONT_SIZE_SMALL      uifs(12)

////////////////////////////////
// Widget sizing

#define WIDGET_BUTTON_HEIGHT    uis(30)
#define WIDGET_CHECKBOX_HEIGHT  uis(28)
#define WIDGET_CHECKBOX_SIZE    uis(18)
#define WIDGET_RADIO_OUTER      uis(16)
#define WIDGET_RADIO_INNER      uis(8)
#define WIDGET_INPUT_HEIGHT     uis(30)
#define WIDGET_DROPDOWN_HEIGHT  uis(30)
#define WIDGET_DROPDOWN_ITEM_H  uis(28)
#define WIDGET_KNOB_SIZE        uis(48)
#define WIDGET_KNOB_LABEL_GAP   uip(4)

#define WIDGET_SLIDER_H_WIDTH     uis(160)
#define WIDGET_SLIDER_H_TRACK_H   uis(6)
#define WIDGET_SLIDER_H_THUMB_W   uis(14)
#define WIDGET_SLIDER_H_THUMB_H   uis(20)
#define WIDGET_SLIDER_V_HEIGHT    uis(100)
#define WIDGET_SLIDER_V_TRACK_W   uis(6)
#define WIDGET_SLIDER_V_THUMB_W   uis(20)
#define WIDGET_SLIDER_V_THUMB_H   uis(14)
#define WIDGET_FADER_HEIGHT       uis(160)
#define WIDGET_FADER_TRACK_W      uis(4)
#define WIDGET_FADER_CAP_W        uis(25)
#define WIDGET_FADER_CAP_H        uis(52)
#define WIDGET_FADER_TICK_MAJOR_W uis(8)
#define WIDGET_FADER_TICK_MINOR_W uis(4)
#define WIDGET_FADER_TICK_H       uis(1)

////////////////////////////////
// Corner radius (from theme)

#define CORNER_RADIUS        uis(g_theme.corner_radius)

////////////////////////////////
// Modal / window styling

#define MODAL_OVERLAY_COLOR  Clay_Color{  0,   0,   0, 120}
#define MODAL_WIDTH          uis(400)
#define WINDOW_TITLE_HEIGHT  uis(32)

////////////////////////////////
// Panel sizing

#define PANEL_BROWSER_WIDTH     uis(200)
#define PANEL_RIGHT_COL_WIDTH   uis(250)
#define PANEL_LOG_HEIGHT        uis(180)