Enhance documentation, improve theming, and refine GUI components

- Added detailed comments explaining module functionality in `view_rtf.v`, `fonts.v`, `stats.v`, and other key files.
- Introduced a new `theme_blue_bordered` configuration in `theme.v`.
- Improved font initialization logic in `fonts.v` for better reliability.
- Refined color and style assignments to align with updated theming principles.
- Fixed minor typos and enhanced clarity in event handling and rendering functions.
- Updated examples to reflect the new `theme_blue_bordered` usage.

Author: mike-ward

_gui.v

@@ -10,4 +10,4 @@ __global gui_tooltip = TooltipState{}
 __global gui_stats = Stats{}
 
 pub const version = '0.1.0'
-pub const app_title = 'GUI'
+pub const app_title = 'v-gui'

examples/test_layout.v

@@ -31,7 +31,7 @@ fn main() {
 			w.set_id_focus(2)
 		}
 	)
-	window.set_theme(gui.theme_dark_bordered)
+	window.set_theme(gui.theme_blue_bordered)
 	window.run()
 }
 
@@ -44,7 +44,6 @@ fn main_view(w &gui.Window) gui.View {
 		width:   width
 		height:  height
 		sizing:  gui.fixed_fixed
-		color:   gui.dark_blue
 		fill:    true
 		content: [
 			gui.column(
@@ -78,9 +77,9 @@ fn main_view(w &gui.Window) gui.View {
 				content: [
 					gui.column(
 						id:      'col'
+						color:   gui.theme().color_panel
 						sizing:  gui.fill_fill
 						fill:    true
-						color:   gui.rgb(0x30, 0x30, 0x30)
 						spacing: gui.theme().spacing_large
 						content: [
 							gui.row(
@@ -151,9 +150,9 @@ fn main_view(w &gui.Window) gui.View {
 				]
 			),
 			gui.column(
+				color:   gui.theme().color_panel
 				fill:    true
 				sizing:  gui.fill_fill
-				color:   gui.rgb(0x30, 0x30, 0x30)
 				spacing: gui.spacing_large
 				content: [
 					gui.input(
@@ -169,7 +168,6 @@ fn main_view(w &gui.Window) gui.View {
 						}
 					),
 					gui.column(
-						color:   gui.gray
 						sizing:  gui.fill_fit
 						text:    '  mode = .wrap  '
 						content: [
@@ -181,7 +179,6 @@ fn main_view(w &gui.Window) gui.View {
 						]
 					),
 					gui.column(
-						color:   gui.gray
 						sizing:  gui.fill_fit
 						text:    '  model = .wrap_keep_spaces  '
 						content: [

fonts.v

@@ -1,5 +1,8 @@
 module gui
 
+// Currently, `gg` only supports static font files like `.ttf`. If/when this
+// changes, support for variable fonts like those in Google fonts will be used.
+//
 import log
 import os
 import os.font
@@ -13,12 +16,15 @@ pub:
 	mono   string
 }
 
-pub const font_file_regular = os.join_path(os.data_dir(), 'gui_deja-vu-sans-regular.ttf')
-pub const font_file_bold = os.join_path(os.data_dir(), 'gui_deja-vu-sans-bold.ttf')
-pub const font_file_italic = os.join_path(os.data_dir(), 'gui_deja-vu-sans-italic.ttf')
-pub const font_file_mono = os.join_path(os.data_dir(), 'gui_deja-vu-sans-mono.ttf')
-pub const font_file_icon = os.join_path(os.data_dir(), 'gui_feathericon.ttf')
+pub const font_file_regular = os.join_path(os.data_dir(), 'v_gui_deja-vu-sans-regular.ttf')
+pub const font_file_bold = os.join_path(os.data_dir(), 'v_gui_deja-vu-sans-bold.ttf')
+pub const font_file_italic = os.join_path(os.data_dir(), 'v_gui_deja-vu-sans-italic.ttf')
+pub const font_file_mono = os.join_path(os.data_dir(), 'v_gui_deja-vu-sans-mono.ttf')
+pub const font_file_icon = os.join_path(os.data_dir(), 'v_gui_feathericon.ttf')
 
+// initialize_fonts ensures all required font files exist in the data directory by checking for
+// each font file and writing the embedded font data if not found. It writes regular, bold,
+// italic, mono and icon font files.
 fn initialize_fonts() {
 	if !os.exists(font_file_regular) {
 		os.write_file(font_file_regular, $embed_file('assets/DejaVuSans-Regular.ttf').to_string()) or {
@@ -75,6 +81,8 @@ fn path_variant(path string, variant font.Variant) string {
 	return if os.exists(vpath) { vpath } else { path }
 }
 
+// Map of icons names to their unicode values. Describes only
+// the icons included in `assets/feathericon.ttf`
 pub const icons_map = {
 	'icon_arrow_down':              icon_arrow_down
 	'icon_arrow_left':              icon_arrow_left

stats.v

@@ -1,5 +1,22 @@
 module gui
 
+// This file is intended to be active only during debug builds of the application.
+// Its primary purpose is to serve as a comprehensive monitoring tool for tracking
+// and analyzing the program's resource usage and internal state in real-time.
+//
+// The functionality provided within this file allows developers to:
+// - Monitor the instantiation and rendering of various UI components, such as
+//   containers, text elements, images, and rich text fields, providing insight
+//   into the complexity and overhead of the current view hierarchy.
+// - Track memory allocation and garbage collection statistics, including heap
+//   usage, free memory, and total bytes allocated, which is crucial for identifying
+//   memory leaks and optimizing performance.
+// - Inspect the memory footprint of core data structures used within the GUI
+//   framework, helping to ensure that memory is being used efficiently.
+// - Visualize the internal state of the window and view system, including input
+//   states, scroll offsets, and other dynamic properties that affect the user
+//   experience.
+//
 import gg
 
 const stat_top_div = '=================================='

styles.v

@@ -188,9 +188,9 @@ pub:
 	size           f32     = 7
 	thumb_size     f32     = 15
 	color          Color   = color_interior_dark
-	color_click    Color   = color_active_dark
-	color_thumb    Color   = color_select_dark
-	color_left     Color   = color_select_dark
+	color_click    Color   = color_select_dark
+	color_thumb    Color   = color_active_dark
+	color_left     Color   = color_active_dark
 	color_focus    Color   = color_focus_dark
 	color_hover    Color   = color_hover_dark
 	color_border   Color   = color_border_dark

theme.v

@@ -390,6 +390,21 @@ pub const theme_light_bordered_cfg = ThemeCfg{
 }
 pub const theme_light_bordered = theme_maker(theme_light_bordered_cfg)
 
+pub const theme_blue_bordered_cfg = ThemeCfg{
+	...theme_dark_cfg
+	name:               'blue-dark-bordered'
+	color_background:   color_from_string('#0c1d3a')
+	color_panel:        color_from_string('#122c58')
+	color_interior:     color_from_string('#193b75')
+	color_hover:        color_from_string('#1f4992')
+	color_active:       color_from_string('#2558b0')
+	color_focus:        color_from_string('#2c67cd')
+	color_border:       color_from_string('#467bd7')
+	color_select:       color_from_string('#427BDD')
+	color_border_focus: color_from_string('#81a5e3')
+}
+pub const theme_blue_bordered = theme_maker(theme_blue_bordered_cfg)
+
 // theme_maker sets all styles to a common set of values using
 // [ThemeCfg](#ThemeCfg). v-gui allows each view type (button,
 // input, etc) to be styled independent of the other view styles.
@@ -553,12 +568,12 @@ pub fn theme_maker(cfg &ThemeCfg) Theme {
 		}
 		range_slider_style: RangeSliderStyle{
 			color:          cfg.color_interior
-			color_left:     cfg.color_select
-			color_thumb:    cfg.color_select
-			color_focus:    cfg.color_focus
+			color_left:     cfg.color_active
+			color_thumb:    cfg.color_active
+			color_focus:    cfg.color_border_focus
 			color_hover:    cfg.color_hover
 			color_border:   cfg.color_border
-			color_click:    cfg.color_active
+			color_click:    cfg.color_select
 			fill:           true
 			fill_border:    true
 			padding:        padding_none

view_range_slider.v

@@ -186,7 +186,7 @@ fn (cfg &RangeSliderCfg) amend_layout_slide(mut layout Layout, mut w Window) {
 		return
 	}
 	if w.is_focus(layout.shape.id_focus) {
-		layout.children[0].shape.color = cfg.color_focus
+		layout.children[0].children[1].shape.color = cfg.color_focus
 	}
 }
 
@@ -264,7 +264,7 @@ fn (cfg &RangeSliderCfg) on_mouse_down(layout &Layout, mut e Event, mut w Window
 	e.is_handled = true
 }
 
-// mouse_move expects the events mouse coordinates to MOT be adjusted (see on_mouse_down)
+// mouse_move expects the events mouse coordinates to NOT be adjusted (see on_mouse_down)
 fn (cfg &RangeSliderCfg) mouse_move(layout &Layout, mut e Event, mut w Window) {
 	id := cfg.id
 

view_rtf.v

@@ -1,5 +1,9 @@
 module gui
 
+// view_rtf.v defines the Rich Text Format (RTF) view component.
+// It allows rendering text with multiple typefaces, sizes, and styles within a single view.
+// It supports text wrapping, clickable links, and custom text spans.
+//
 import datatypes
 import os
 

view_select.v

@@ -142,7 +142,7 @@ pub fn (window &Window) select(cfg SelectCfg) View {
 	)
 }
 
-fn option_view(cfg SelectCfg, option string) View {
+fn option_view(cfg &SelectCfg, option string) View {
 	select_multiple := cfg.select_multiple
 	on_select := cfg.on_select
 	select_array := cfg.select
@@ -207,7 +207,7 @@ fn option_view(cfg SelectCfg, option string) View {
 	)
 }
 
-fn sub_header(cfg SelectCfg, option string) View {
+fn sub_header(cfg &SelectCfg, option string) View {
 	return column(
 		spacing: 0
 		padding: padding(gui_theme.padding_medium.top, 0, 0, 0)

xtra_render.v

@@ -105,7 +105,7 @@ fn draw_rounded_rect_filled(x f32, y f32, w f32, h f32, radius f32, c gg.Color,
 		// left top quarter
 		sgl.c4b(c.r, c.g, c.b, 10)
 		// Small offset to minimize visible seams on some platforms
-		sgl_arc_triangle_strip_with_offset(p.ltx, p.lty, p.dxs, p.dys, -1, -1, -1, -1)
+		sgl_arc_triangle_strip(p.ltx, p.lty, p.dxs, p.dys, -1, -1)
 
 		sgl.c4b(c.r, c.g, c.b, c.a)
 		sgl_arc_triangle_strip(p.ltx, p.lty, p.dxs, p.dys, -1, -1)