#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 header_bg; 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 F32 value (for CLAY_SIZING_FIXED, corner radii, etc.) static inline F32 uis(F32 x) { return x * g_ui_scale; } // Scale to U16 (for Clay_Padding, childGap, etc.) static inline U16 uip(F32 x) { return (U16)(x * g_ui_scale + 0.5f); } // Scale to U16 font size static inline U16 uifs(F32 x) { return (U16)(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) #define FONT_SIZE_TAB uifs(13) //////////////////////////////// // 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) //////////////////////////////// // Panel sizing #define PANEL_BROWSER_WIDTH uis(200) #define PANEL_RIGHT_COL_WIDTH uis(250) #define PANEL_LOG_HEIGHT uis(180)