Migrate to Clay main branch rather than release (#27)

Co-authored-by: Zachary Levy <zachary@sunforge.is>
Reviewed-on: #27

draw/examples/hellope.odin

@@ -244,9 +244,8 @@ hellope_clay :: proc() {
 		base_layer := draw.begin({width = 500, height = 500})
 		clay.SetLayoutDimensions({width = base_layer.bounds.width, height = base_layer.bounds.height})
 		clay.BeginLayout()
-		if clay.UI()(
+		if clay.UI(clay.ID("outer"))(
 		{
-			id = clay.ID("outer"),
 			layout = {
 				sizing = {clay.SizingGrow({}), clay.SizingGrow({})},
 				childAlignment = {x = .Center, y = .Center},
@@ -254,11 +253,11 @@ hellope_clay :: proc() {
 			backgroundColor = {127, 127, 127, 255},
 		},
 		) {
-			clay.Text("Hellope!", &text_config)
+			clay.Text("Hellope!", text_config)
 		}
 		clay_batch := draw.ClayBatch {
 			bounds = base_layer.bounds,
-			cmds   = clay.EndLayout(),
+			cmds   = clay.EndLayout(0),
 		}
 		draw.prepare_clay_batch(base_layer, &clay_batch, {0, 0})
 		draw.end(gpu, window)
@@ -280,12 +279,14 @@ hellope_custom :: proc() {
 	}
 
 	gauge := Gauge {
-		value = 0.73,
-		color = {50, 200, 100, 255},
+		value    = 0.73,
+		color    = {50, 200, 100, 255},
+		bg_color = {80, 80, 80, 255},
 	}
 	gauge2 := Gauge {
-		value = 0.45,
-		color = {200, 100, 50, 255},
+		value    = 0.45,
+		color    = {200, 100, 50, 255},
+		bg_color = {80, 80, 80, 255},
 	}
 
 	// `clay.CustomElementConfig.customData` is a rawptr; the Clay integration in `draw`
@@ -320,9 +321,8 @@ hellope_custom :: proc() {
 		clay.SetLayoutDimensions({width = base_layer.bounds.width, height = base_layer.bounds.height})
 		clay.BeginLayout()
 
-		if clay.UI()(
+		if clay.UI(clay.ID("outer"))(
 		{
-			id = clay.ID("outer"),
 			layout = {
 				sizing = {clay.SizingGrow({}), clay.SizingGrow({})},
 				childAlignment = {x = .Center, y = .Center},
@@ -332,8 +332,8 @@ hellope_custom :: proc() {
 			backgroundColor = {50, 50, 50, 255},
 		},
 		) {
-			if clay.UI()({id = clay.ID("title"), layout = {sizing = {clay.SizingFit({}), clay.SizingFit({})}}}) {
-				clay.Text("Custom Draw Demo", &text_config)
+			if clay.UI(clay.ID("title"))({layout = {sizing = {clay.SizingFit({}), clay.SizingFit({})}}}) {
+				clay.Text("Custom Draw Demo", text_config)
 			}
 
 			// gauge1 is BEHIND the backdrop — the backdrop is declared as a floating CHILD
@@ -344,17 +344,15 @@ hellope_custom :: proc() {
 			// reflection inside the strip), and gauge2 is deferred-replayed by
 			// `prepare_clay_batch` after the bracket closes (renders crisp on top of the
 			// bracket output — unrelated to the strip since they don't overlap).
-			if clay.UI()(
+			// `backgroundColor` is omitted on the gauges; bg lives on `Gauge.bg_color`. See `draw_custom`.
+			if clay.UI(clay.ID("gauge"))(
 			{
-				id = clay.ID("gauge"),
 				layout = {sizing = {clay.SizingFixed(300), clay.SizingFixed(30)}},
 				custom = {customData = &gauge_custom},
-				backgroundColor = {80, 80, 80, 255},
 			},
 			) {
-				if clay.UI()(
+				if clay.UI(clay.ID("backdrop"))(
 				{
-					id = clay.ID("backdrop"),
 					floating = {attachTo = .Parent, attachment = {parent = .LeftTop, element = .LeftTop}},
 					layout = {sizing = {clay.SizingFixed(300), clay.SizingFixed(30)}},
 					custom = {customData = &backdrop_custom},
@@ -362,27 +360,26 @@ hellope_custom :: proc() {
 				) {}
 			}
 
-			if clay.UI()(
+			if clay.UI(clay.ID("gauge2"))(
 			{
-				id = clay.ID("gauge2"),
 				layout = {sizing = {clay.SizingFixed(300), clay.SizingFixed(30)}},
 				custom = {customData = &gauge2_custom},
-				backgroundColor = {80, 80, 80, 255},
 			},
 			) {}
 		}
 
 		clay_batch := draw.ClayBatch {
 			bounds = base_layer.bounds,
-			cmds   = clay.EndLayout(),
+			cmds   = clay.EndLayout(0),
 		}
 		draw.prepare_clay_batch(base_layer, &clay_batch, {0, 0}, custom_draw = draw_custom)
 		draw.end(gpu, window)
 	}
 
 	Gauge :: struct {
-		value: f32,
-		color: draw.Color,
+		value:    f32,
+		color:    draw.Color,
+		bg_color: draw.Color,
 	}
 
 	draw_custom :: proc(layer: ^draw.Layer, bounds: draw.Rectangle, render_data: clay.CustomRenderData) {
@@ -391,14 +388,12 @@ hellope_custom :: proc() {
 		// before the union refactor.
 		gauge := cast(^Gauge)render_data.customData
 
+		// `gauge.bg_color` instead of `render_data.backgroundColor`: under Clay master, an
+		// element with both `custom.customData` and `backgroundColor` emits a Custom AND a
+		// Rectangle for the same bounds, in that order — the Rectangle paints over the
+		// callback's output. Carrying bg on user data sidesteps it.
 		border_width: f32 = 2
-		draw.rectangle(
-			layer,
-			bounds,
-			draw.color_from_clay(render_data.backgroundColor),
-			outline_color = draw.WHITE,
-			outline_width = border_width,
-		)
+		draw.rectangle(layer, bounds, gauge.bg_color, outline_color = draw.WHITE, outline_width = border_width)
 
 		fill := draw.Rectangle {
 			x      = bounds.x,