Some cleanup

need todo string interning next....

code/api.odin

@@ -100,7 +100,7 @@ startup :: proc( persistent_mem, frame_mem, transient_mem, files_buffer_mem : ^V
 
 		engine_refresh_hz = 30
 
-		ui_resize_border_width = 20
+		ui_resize_border_width = 10
 	}
 
 	Desired_OS_Scheduler_MS :: 1

code/tick_render.odin

@@ -105,6 +105,8 @@ render_mode_2d :: proc()
 			style    := current.style
 			computed := & current.computed
 
+			// bg_color := 
+
 			// TODO(Ed) : Render Borders
 
 			render_bounds := Range2 { pts = {

code/tick_update.odin

@@ -191,6 +191,7 @@ update :: proc( delta_time : f64 ) -> b32
 	{
 		// Creates the root box node, set its as the first parent.
 		ui_graph_build( & state.project.workspace.ui )
+		ui := ui_context
 
 		frame_style_flags : UI_StyleFlags = {
 			.Fixed_Position_X, .Fixed_Position_Y,
@@ -201,15 +202,15 @@ update :: proc( delta_time : f64 ) -> b32
 			bg_color = Color_BG_TextBox,
 		}
 		frame_style_disabled := UI_Style {
-			flags = frame_style_flags,
+			flags    = frame_style_flags,
 			bg_color = Color_Frame_Disabled,
 		}
 		frame_style_hovered := UI_Style {
-			flags = frame_style_flags,
+			flags    = frame_style_flags,
 			bg_color = Color_Frame_Hover,
 		}
 		frame_style_select := UI_Style {
-			flags = frame_style_flags,
+			flags    = frame_style_flags,
 			bg_color = Color_Frame_Select,
 		}
 		frame_theme := UI_StyleTheme { styles = {
@@ -234,67 +235,10 @@ update :: proc( delta_time : f64 ) -> b32
 		Test_HoverNClick :: false
 		Test_Draggable   :: true
 
-		when Test_HoverNClick
-		{
-			first_flags : UI_BoxFlags = { .Mouse_Clickable, .Focusable, .Click_To_Focus  }
-			first_box := ui_box_make( first_flags, "FIRST BOX!" )
-			signal    := ui_signal_from_box( first_box )
+		// test_hover_n_click()
+		// test_draggable()
 
-			if signal.left_clicked || debug.frame_2_created {
-				second_layout := default_layout
-				second_layout.pos = { 250, 0 }
-				ui_set_layout( second_layout )
-
-				second_box := ui_box_make( first_flags, "SECOND BOX!" )
-				signal     := ui_signal_from_box( second_box )
-
-				debug.frame_2_created = true
-			}
-		}
-
-		config.ui_resize_border_width = 10
-		when Test_Draggable
-		{
-			// draggable_box_layout := default_layout
-			// draggable_box_layout.pos  = debug.draggable_box_pos
-			// draggable_box_layout.size = debug.draggable_box_size
-			// ui_set_layout(draggable_box_layout)
-
-			draggable_flags := UI_BoxFlags { .Mouse_Clickable, .Focusable, .Click_To_Focus }
-			draggable_box   := ui_box_make( draggable_flags, "Draggable Box!" )
-			signal          := ui_signal_from_box( draggable_box )
-
-			if draggable_box.first_frame {
-				debug.draggable_box_pos  = draggable_box.style.layout.pos
-				debug.draggable_box_size = draggable_box.style.layout.size
-			}
-
-			// Dragging
-			if signal.dragging {
-				debug.draggable_box_pos += mouse_world_delta()
-			}
-
-			// Resize
-			if signal.resizing
-			{
-				if signal.pressed {
-					debug.box_original_size = debug.draggable_box_size
-				}
-				center            := debug.draggable_box_pos
-				original_distance := linalg.distance(ui_context.cursor_active_start, center)
-				cursor_distance   := linalg.distance(signal.cursor_pos, center)
-				scale_factor      := cursor_distance * (1 / original_distance)
-
-				debug.draggable_box_size = debug.box_original_size * scale_factor
-			}
-
-			if workspace.ui.hot_resizable || workspace.ui.active_resizing {
-				draggable_box.style.bg_color = Color_Blue
-			}
-
-			draggable_box.style.layout.pos  = debug.draggable_box_pos
-			draggable_box.style.layout.size = debug.draggable_box_size
-		}
+		
 	}
 	//endregion Imgui Tick
 

code/ui.odin

@@ -148,8 +148,6 @@ UI_Layout :: struct {
 }
 
 UI_Signal :: struct {
-	box : ^ UI_Box,
-
 	cursor_pos : Vec2,
 	drag_delta : Vec2,
 	scroll     : Vec2,
@@ -274,8 +272,8 @@ UI_State :: struct {
 	layout_dirty  : b32,
 
 	// TODO(Ed) : Look into using a build arena like Ryan does for these possibly (and thus have a linked-list stack)
-	theme_stack   : StackFixed( UI_StyleTheme, UI_Style_Stack_Size ),
-	parent_stack  : StackFixed( ^UI_Box, UI_Parent_Stack_Size ),
+	theme_stack  : StackFixed( UI_StyleTheme, UI_Style_Stack_Size ),
+	parent_stack : StackFixed( ^UI_Box, UI_Parent_Stack_Size ),
 	// flag_stack    : Stack( UI_BoxFlags, UI_BoxFlags_Stack_Size ),
 
 	hot             : UI_Key,
@@ -333,6 +331,11 @@ ui_box_equal :: proc( a, b : ^ UI_Box ) -> b32 {
 	return result
 }
 
+UI_Widget :: struct {
+	using box    : ^UI_Box,
+	using signal : UI_Signal,
+}
+
 ui_box_make :: proc( flags : UI_BoxFlags, label : string ) -> (^ UI_Box)
 {
 	using ui := get_state().ui_context

code/ui_signal.odin

@@ -7,7 +7,7 @@ ui_signal_from_box :: proc ( box : ^ UI_Box ) -> UI_Signal
 
 	frame_delta := frametime_delta32()
 
-	signal := UI_Signal { box = box }
+	signal := UI_Signal {}
 
 	// Cursor Collision
 		signal.cursor_pos  = ui_cursor_pos()
@@ -36,9 +36,11 @@ ui_signal_from_box :: proc ( box : ^ UI_Box ) -> UI_Signal
 		ui.hot                         = box.key
 		ui.active                      = box.key
 		ui.active_mouse[MouseBtn.Left] = box.key
-		ui.last_pressed_key            = box.key
+
+		ui.last_pressed_key = box.key
 
 		ui.cursor_active_start = signal.cursor_pos
+		ui.active_start_style  = box.style
 
 		signal.pressed = true
 		// TODO(Ed) : Support double-click detection
@@ -99,6 +101,8 @@ ui_signal_from_box :: proc ( box : ^ UI_Box ) -> UI_Signal
 	{
 		ui.hot = box.key
 		is_hot = true
+
+		ui.hot_start_style = box.style
 	}
 
 	if ! is_active {

code/ui_tests.odin

@@ -0,0 +1,57 @@
+package sectr
+
+import "core:math/linalg"
+
+test_hover_n_click :: proc()
+{
+	state := get_state(); using state
+
+	first_btn := ui_button( "FIRST BOX!" )
+	if first_btn.left_clicked || debug.frame_2_created {
+		debug.frame_2_created = true
+
+		second_layout := first_btn.style.layout
+		second_layout.pos = { 250, 0 }
+		ui_set_layout( second_layout )
+
+		second_box := ui_button( "SECOND BOX!")
+	}
+}
+
+test_draggable :: proc()
+{
+	state := get_state(); using state
+	ui    := ui_context
+
+	draggable := ui_widget( "Draggable Box!", UI_BoxFlags { .Mouse_Clickable, .Focusable, .Click_To_Focus } )
+
+	if draggable.first_frame {
+		debug.draggable_box_pos  = draggable.style.layout.pos
+		debug.draggable_box_size = draggable.style.layout.size
+	}
+
+	// Dragging
+	if draggable.dragging {
+		debug.draggable_box_pos += mouse_world_delta()
+	}
+
+	// Resize
+	if draggable.resizing
+	{
+		og_layout := ui_context.active_start_style.layout
+
+		center            := debug.draggable_box_pos
+		original_distance := linalg.distance(ui.cursor_active_start, center)
+		cursor_distance   := linalg.distance(draggable.cursor_pos, center)
+		scale_factor      := cursor_distance * (1 / original_distance)
+
+		debug.draggable_box_size = og_layout.size * scale_factor
+	}
+
+	if ui.hot_resizable || ui.active_resizing {
+		draggable.style.bg_color = Color_Blue
+	}
+
+	draggable.style.layout.pos  = debug.draggable_box_pos
+	draggable.style.layout.size = debug.draggable_box_size
+}

code/ui_widgets.odin

@@ -1,4 +1,17 @@
 package sectr
 
+ui_widget :: proc( label : string, flags : UI_BoxFlags ) -> (widget : UI_Widget)
+{
+	widget.box    = ui_box_make( flags, label )
+	widget.signal = ui_signal_from_box( widget.box )
+	return
+}
+
+ui_button :: proc( label : string, flags : UI_BoxFlags = {} ) -> (btn : UI_Widget)
+{
+	btn_flags := UI_BoxFlags { .Mouse_Clickable, .Focusable, .Click_To_Focus }
+	btn.box    = ui_box_make( btn_flags | flags, label )
+	btn.signal = ui_signal_from_box( btn.box )
+	return
+}
 
-ui_button :: proc( )