update to zig 0.14.0 and clay 0.13

examples/raylib-clay-official-website/build.zig

@@ -0,0 +1,64 @@
+const std = @import("std");
+const B = std.Build;
+
+pub fn build(b: *B) void {
+    const target = b.standardTargetOptions(.{});
+    const optimize = b.standardOptimizeOption(.{});
+
+    const root_module = b.createModule(.{
+        .root_source_file = b.path("src/main.zig"),
+        .target = target,
+        .optimize = optimize,
+    });
+    addDependencies(root_module, b, target, optimize);
+
+    {
+        const exe = b.addExecutable(.{ .name = "zclay-example", .root_module = root_module });
+
+        b.installArtifact(exe);
+        const run_cmd = b.addRunArtifact(exe);
+        run_cmd.step.dependOn(b.getInstallStep());
+
+        if (b.args) |args| run_cmd.addArgs(args);
+
+        const run_step = b.step("run", "Run the app");
+        run_step.dependOn(&run_cmd.step);
+    }
+
+    {
+        const exe_unit_tests = b.addTest(.{ .root_module = root_module });
+
+        const run_exe_unit_tests = b.addRunArtifact(exe_unit_tests);
+        const test_step = b.step("test", "Run unit tests");
+        test_step.dependOn(&run_exe_unit_tests.step);
+    }
+
+    {
+        const exe_check = b.addExecutable(.{ .name = "check", .root_module = root_module });
+        const tests_check = b.addTest(.{ .name = "check", .root_module = root_module });
+
+        const check = b.step("check", "Check if exe and tests compile");
+        check.dependOn(&exe_check.step);
+        check.dependOn(&tests_check.step);
+    }
+}
+
+fn addDependencies(
+    module: *B.Module,
+    b: *B,
+    target: B.ResolvedTarget,
+    optimize: std.builtin.OptimizeMode,
+) void {
+    const zclay_dep = b.dependency("zclay", .{
+        .target = target,
+        .optimize = optimize,
+    });
+    module.addImport("zclay", zclay_dep.module("zclay"));
+
+    const raylib_dep = b.dependency("raylib_zig", .{
+        .target = target,
+        .optimize = optimize,
+    });
+    module.addImport("raylib", raylib_dep.module("raylib"));
+    module.linkLibrary(raylib_dep.artifact("raylib"));
+}

examples/raylib-clay-official-website/build.zig.zon

@@ -0,0 +1,21 @@
+.{
+    .name = .clay_website_example,
+    .version = "0.0.0",
+    .dependencies = .{
+        .zclay = .{
+            .path = "../../",
+        },
+        .raylib_zig = .{
+            .url = "https://github.com/Not-Nik/raylib-zig/archive/57a8a21b486af47d62cb8ce39a0c7902019a86d2.tar.gz",
+            .hash = "raylib_zig-5.6.0-dev-KE8RELUtBQD9ynf9BONdwukHlR4Ib8k_hZZUkqUPO7uJ",
+        },
+    },
+    .paths = .{
+        "build.zig",
+        "build.zig.zon",
+        "src",
+        "LICENSE",
+        "README.md",
+    },
+    .fingerprint = 0x5a04d39cd5b4f3dd,
+}

examples/raylib-clay-official-website/src/main.zig

@@ -0,0 +1,620 @@
+const std = @import("std");
+const rl = @import("raylib");
+const cl = @import("zclay");
+const renderer = @import("raylib_render_clay.zig");
+
+var syntaxImage: rl.Texture2D = undefined;
+var checkImage1: rl.Texture2D = undefined;
+var checkImage2: rl.Texture2D = undefined;
+var checkImage3: rl.Texture2D = undefined;
+var checkImage4: rl.Texture2D = undefined;
+var checkImage5: rl.Texture2D = undefined;
+var zig_logo_image6: rl.Texture2D = undefined;
+
+const FONT_ID_BODY_16 = 0;
+const FONT_ID_TITLE_56 = 9;
+const FONT_ID_TITLE_52 = 1;
+const FONT_ID_TITLE_48 = 2;
+const FONT_ID_TITLE_36 = 3;
+const FONT_ID_TITLE_32 = 4;
+const FONT_ID_BODY_36 = 5;
+const FONT_ID_BODY_30 = 6;
+const FONT_ID_BODY_28 = 7;
+const FONT_ID_BODY_24 = 8;
+
+const COLOR_LIGHT = cl.Color{ 244, 235, 230, 255 };
+const COLOR_LIGHT_HOVER = cl.Color{ 224, 215, 210, 255 };
+const COLOR_BUTTON_HOVER = cl.Color{ 238, 227, 225, 255 };
+const COLOR_BROWN = cl.Color{ 61, 26, 5, 255 };
+const COLOR_RED = cl.Color{ 168, 66, 28, 255 };
+const COLOR_RED_HOVER = cl.Color{ 148, 46, 8, 255 };
+const COLOR_ORANGE = cl.Color{ 225, 138, 50, 255 };
+const COLOR_BLUE = cl.Color{ 111, 173, 162, 255 };
+const COLOR_TEAL = cl.Color{ 111, 173, 162, 255 };
+const COLOR_BLUE_DARK = cl.Color{ 2, 32, 82, 255 };
+const COLOR_ZIG_LOGO = cl.Color{ 247, 164, 29, 255 };
+
+// Colors for top stripe
+const COLORS_TOP_BORDER = [_]cl.Color{
+    .{ 240, 213, 137, 255 },
+    .{ 236, 189, 80, 255 },
+    .{ 225, 138, 50, 255 },
+    .{ 223, 110, 44, 255 },
+    .{ 168, 66, 28, 255 },
+};
+
+const COLOR_BLOB_BORDER_1 = cl.Color{ 168, 66, 28, 255 };
+const COLOR_BLOB_BORDER_2 = cl.Color{ 203, 100, 44, 255 };
+const COLOR_BLOB_BORDER_3 = cl.Color{ 225, 138, 50, 255 };
+const COLOR_BLOB_BORDER_4 = cl.Color{ 236, 159, 70, 255 };
+const COLOR_BLOB_BORDER_5 = cl.Color{ 240, 189, 100, 255 };
+
+const border_data = cl.BorderData{ .width = 2, .color = COLOR_RED };
+
+var window_height: isize = 0;
+var window_width: isize = 0;
+var mobile_screen: bool = false;
+
+fn landingPageBlob(index: u32, font_size: u16, font_id: u16, color: cl.Color, image_size: f32, max_width: f32, text: []const u8, image: *rl.Texture2D) void {
+    cl.UI()(.{
+        .id = .IDI("HeroBlob", index),
+        .layout = .{ .sizing = .{ .w = .growMinMax(.{ .max = max_width }) }, .padding = .all(16), .child_gap = 16, .child_alignment = .{ .y = .center } },
+        .border = .{ .width = .outside(2), .color = color },
+        .corner_radius = .all(10),
+    })({
+        cl.UI()(.{
+            .id = .IDI("CheckImage", index),
+            .layout = .{ .sizing = .{ .w = .fixed(image_size) } },
+            .image = .{ .image_data = image, .source_dimensions = .{ .w = 128, .h = 128 } },
+        })({});
+        cl.text(text, .{ .font_size = font_size, .font_id = font_id, .color = color });
+    });
+}
+
+fn landingPageDesktop() void {
+    cl.UI()(.{
+        .id = .ID("LandingPage1Desktop"),
+        .layout = .{
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
+            .child_alignment = .{ .y = .center },
+            .padding = .{ .left = 50, .right = 50 },
+            .child_gap = 16,
+        },
+    })({
+        cl.UI()(.{
+            .id = .ID("LandingPage1"),
+            .layout = .{
+                .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
+                .direction = .top_to_bottom,
+                .child_alignment = .{ .x = .center },
+                .padding = .all(32),
+                .child_gap = 32,
+            },
+            .border = .{ .width = .{ .left = 2, .right = 2 }, .color = COLOR_RED },
+        })({
+            landingPageBlob(0, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
+            cl.UI()(.{
+                .id = .ID("ClayPresentation"),
+                .layout = .{
+                    .sizing = .grow,
+                    .child_alignment = .{ .y = .center },
+                    .child_gap = 16,
+                },
+            })({
+                cl.UI()(.{
+                    .id = .ID("LeftText"),
+                    .layout = .{ .sizing = .{ .w = .percent(0.55) }, .direction = .top_to_bottom, .child_gap = 8 },
+                })({
+                    cl.text(
+                        "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
+                        .{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED },
+                    );
+                    cl.UI()(.{ .layout = .{ .sizing = .{ .w = .grow, .h = .fixed(32) } } })({});
+                    cl.text(
+                        "Clay is laying out this webpage right now!",
+                        .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE },
+                    );
+                });
+
+                cl.UI()(.{
+                    .id = .ID("HeroImageOuter"),
+                    .layout = .{ .sizing = .{ .w = .percent(0.45) }, .direction = .top_to_bottom, .child_alignment = .{ .x = .center }, .child_gap = 16 },
+                })({
+                    landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5);
+                    landingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4);
+                    landingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3);
+                    landingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2);
+                    landingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1);
+                });
+            });
+        });
+    });
+}
+
+fn landingPageMobile() void {
+    cl.UI()(.{
+        .id = .ID("LandingPage1Mobile"),
+        .layout = .{
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 70) }) },
+            .direction = .top_to_bottom,
+            .child_alignment = .center,
+            .padding = .{ .left = 16, .right = 16, .top = 32, .bottom = 32 },
+            .child_gap = 16,
+        },
+    })({
+        landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_ZIG_LOGO, 64, 510, "The official Clay website recreated with zclay: clay-zig-bindings", &zig_logo_image6);
+        cl.UI()(.{
+            .id = .ID("LeftText"),
+            .layout = .{ .sizing = .{ .w = .grow }, .direction = .top_to_bottom, .child_gap = 8 },
+        })({
+            cl.text(
+                "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
+                .{ .font_size = 56, .font_id = FONT_ID_TITLE_56, .color = COLOR_RED },
+            );
+            cl.UI()(.{ .layout = .{ .sizing = .{ .w = .grow, .h = .fixed(32) } } })({});
+            cl.text(
+                "Clay is laying out this webpage .right now!",
+                .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE },
+            );
+        });
+
+        cl.UI()(.{
+            .id = .ID("HeroImageOuter"),
+            .layout = .{ .sizing = .{ .w = .grow }, .direction = .top_to_bottom, .child_alignment = .{ .x = .center }, .child_gap = 16 },
+        })({
+            landingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, 32, 480, "High performance", &checkImage5);
+            landingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, 32, 480, "Flexbox-style responsive layout", &checkImage4);
+            landingPageBlob(3, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_3, 32, 480, "Declarative syntax", &checkImage3);
+            landingPageBlob(4, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_2, 32, 480, "Single .h file for C/C++", &checkImage2);
+            landingPageBlob(5, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_1, 32, 480, "Compile to 15kb .wasm", &checkImage1);
+        });
+    });
+}
+
+fn featureBlocks(width_sizing: cl.SizingAxis, outer_padding: u16) void {
+    const text_config = cl.TextElementConfig{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_RED };
+    cl.UI()(.{
+        .id = .ID("HFileBoxOuter"),
+        .layout = .{
+            .direction = .top_to_bottom,
+            .sizing = .{ .w = width_sizing },
+            .child_alignment = .{ .y = .center },
+            .padding = .{ .left = outer_padding, .right = outer_padding, .top = 32, .bottom = 32 },
+            .child_gap = 8,
+        },
+    })({
+        cl.UI()(.{
+            .id = .ID("HFileIncludeOuter"),
+            .layout = .{ .padding = .{ .left = 8, .right = 8, .top = 4, .bottom = 4 } },
+            .background_color = COLOR_RED,
+            .corner_radius = .all(8),
+        })({
+            cl.text("#include cl.h", .{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_LIGHT });
+        });
+        cl.text("~2000 lines of C99.", text_config);
+        cl.text("Zero dependencies, including no C standard library", text_config);
+    });
+    cl.UI()(.{
+        .id = .ID("BringYourOwnRendererOuter"),
+        .layout = .{
+            .direction = .top_to_bottom,
+            .sizing = .{ .w = width_sizing },
+            .child_alignment = .{ .y = .center },
+            .padding = .{ .left = outer_padding, .right = outer_padding, .top = 32, .bottom = 32 },
+            .child_gap = 8,
+        },
+    })({
+        cl.text("Renderer agnostic.", .{ .font_size = 24, .font_id = FONT_ID_BODY_24, .color = COLOR_ORANGE });
+        cl.text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", text_config);
+        cl.text("Flexible output for easy compositing in your custom engine or environment.", text_config);
+    });
+}
+
+fn featureBlocksDesktop() void {
+    cl.UI()(.{
+        .id = .ID("FeatureBlocksOuter"),
+        .layout = .{
+            .sizing = .{ .w = .grow },
+            .child_alignment = .{ .y = .center },
+        },
+        .border = .{ .width = .{ .between_children = 2 }, .color = COLOR_RED },
+    })({
+        featureBlocks(.percent(0.5), 50);
+    });
+}
+
+fn featureBlocksMobile() void {
+    cl.UI()(.{
+        .id = .ID("FeatureBlocksOuter"),
+        .layout = .{
+            .sizing = .{ .w = .grow },
+            .direction = .top_to_bottom,
+        },
+        .border = .{ .width = .{ .between_children = 2 }, .color = COLOR_RED },
+    })({
+        featureBlocks(.grow, 16);
+    });
+}
+
+fn declarativeSyntaxPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
+    cl.UI()(.{ .id = .ID("SyntaxPageLeftText"), .layout = .{ .sizing = .{ .w = width_sizing }, .direction = .top_to_bottom, .child_gap = 8 } })({
+        cl.text("Declarative Syntax", title_text_config);
+        cl.UI()(.{
+            .layout = .{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } },
+        })({});
+        const text_conf = cl.TextElementConfig{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED };
+        cl.text("Flexible and readable declarative syntax with nested UI element hierarchies.", text_conf);
+        cl.text("Mix elements with standard C code like loops, conditionals and functions.", text_conf);
+        cl.text("Create your own library of re-usable components from UI primitives like text, images and rectangles.", text_conf);
+    });
+    cl.UI()(.{ .id = .ID("SyntaxPageRightImageOuter"), .layout = .{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .center } } })({
+        cl.UI()(.{
+            .id = .ID("SyntaxPageRightImage"),
+            .layout = .{ .sizing = .{ .w = .growMinMax(.{ .max = 568 }) } },
+            .image = .{ .image_data = &syntaxImage, .source_dimensions = .{ .h = 1136, .w = 1194 } },
+        })({});
+    });
+}
+
+fn declarativeSyntaxPageDesktop() void {
+    cl.UI()(.{
+        .id = .ID("SyntaxPageDesktop"),
+        .layout = .{ .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) }, .child_alignment = .{ .y = .center }, .padding = .{ .left = 50, .right = 50 } },
+    })({
+        cl.UI()(.{
+            .id = .ID("SyntaxPage"),
+            .layout = .{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .center }, .padding = .all(32), .child_gap = 32 },
+            .border = .{ .width = .{ .left = 2, .right = 2 }, .color = COLOR_RED },
+        })({
+            declarativeSyntaxPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
+        });
+    });
+}
+
+fn declarativeSyntaxPageMobile() void {
+    cl.UI()(.{
+        .id = .ID("SyntaxPageMobile"),
+        .layout = .{
+            .direction = .top_to_bottom,
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .child_alignment = .center,
+            .padding = .{ .left = 16, .right = 16, .top = 32, .bottom = 32 },
+            .child_gap = 16,
+        },
+    })({
+        declarativeSyntaxPage(.{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_RED }, .grow);
+    });
+}
+
+fn colorLerp(a: cl.Color, b: cl.Color, amount: f32) cl.Color {
+    return cl.Color{ a[0] + (b[0] - a[0]) * amount, a[1] + (b[1] - a[1]) * amount, a[2] + (b[2] - a[2]) * amount, a[3] + (b[3] - a[3]) * amount };
+}
+
+const LOREM_IPSUM_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
+
+fn highPerformancePage(lerp_value: f32, title_text_tonfig: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
+    cl.UI()(.{ .id = .ID("PerformanceLeftText"), .layout = .{ .sizing = .{ .w = width_sizing }, .direction = .top_to_bottom, .child_gap = 8 } })({
+        cl.text("High Performance", title_text_tonfig);
+        cl.UI()(.{ .layout = .{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } } })({});
+        cl.text(
+            "Fast enough to recompute your entire UI every frame.",
+            .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
+        );
+        cl.text(
+            "Small memory footprint (3.5mb default) with static allocation & reuse. No malloc / free.",
+            .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
+        );
+        cl.text(
+            "Simplify animations and reactive UI design by avoiding the standard performance hacks.",
+            .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_LIGHT },
+        );
+    });
+    cl.UI()(.{ .id = .ID("PerformanceRightImageOuter"), .layout = .{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .center } } })({
+        cl.UI()(.{
+            .id = .ID("PerformanceRightBorder"),
+            .layout = .{ .sizing = .{ .w = .grow, .h = .fixed(400) } },
+            .border = .{ .width = .all(2), .color = COLOR_LIGHT },
+        })({
+            cl.UI()(.{
+                .id = .ID("AnimationDemoContainerLeft"),
+                .layout = .{ .sizing = .{ .w = .percent(0.35 + 0.3 * lerp_value), .h = .grow }, .child_alignment = .{ .y = .center }, .padding = .all(16) },
+                .background_color = colorLerp(COLOR_RED, COLOR_ORANGE, lerp_value),
+            })({
+                cl.text(LOREM_IPSUM_TEXT, .{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT });
+            });
+            cl.UI()(.{
+                .id = .ID("AnimationDemoContainerRight"),
+                .layout = .{ .sizing = .{ .w = .grow, .h = .grow }, .child_alignment = .{ .y = .center }, .padding = .all(16) },
+                .background_color = colorLerp(COLOR_ORANGE, COLOR_RED, lerp_value),
+            })({
+                cl.text(LOREM_IPSUM_TEXT, .{ .font_size = 16, .font_id = FONT_ID_BODY_16, .color = COLOR_LIGHT });
+            });
+        });
+    });
+}
+
+fn highPerformancePageDesktop(lerp_value: f32) void {
+    cl.UI()(.{
+        .id = .ID("PerformanceDesktop"),
+        .layout = .{
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .child_alignment = .{ .y = .center },
+            .padding = .{ .left = 82, .right = 82, .top = 32, .bottom = 32 },
+            .child_gap = 64,
+        },
+        .background_color = COLOR_RED,
+    })({
+        highPerformancePage(lerp_value, .{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_LIGHT }, .percent(0.5));
+    });
+}
+
+fn highPerformancePageMobile(lerp_value: f32) void {
+    cl.UI()(.{
+        .id = .ID("PerformanceMobile"),
+        .layout = .{
+            .direction = .top_to_bottom,
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .child_alignment = .center,
+            .padding = .{ .left = 16, .right = 16, .top = 32, .bottom = 32 },
+            .child_gap = 32,
+        },
+        .background_color = COLOR_RED,
+    })({
+        highPerformancePage(lerp_value, .{ .font_size = 48, .font_id = FONT_ID_TITLE_48, .color = COLOR_LIGHT }, .grow);
+    });
+}
+
+fn rendererButtonActive(text: []const u8) void {
+    cl.UI()(.{
+        .layout = .{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) },
+        .background_color = COLOR_RED,
+        .corner_radius = .all(10),
+    })({
+        cl.text(text, .{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_LIGHT });
+    });
+}
+
+fn rendererButtonInactive(index: u32, text: []const u8) void {
+    cl.UI()(.{ .layout = .{}, .border = .outside(.{ 2, COLOR_RED }, 10) })({
+        cl.UI()(.{
+            .id = .ID("RendererButtonInactiveInner", index),
+            .layout = .{ .sizing = .{ .w = .fixed(300) }, .padding = .all(16) },
+            .background_color = COLOR_LIGHT,
+            .corner_radius = .all(10),
+        })({
+            cl.text(text, .{ .font_size = 28, .font_id = FONT_ID_BODY_28, .color = COLOR_RED });
+        });
+    });
+}
+
+fn rendererPage(title_text_config: cl.TextElementConfig, width_sizing: cl.SizingAxis) void {
+    cl.UI()(.{ .id = .ID("RendererLeftText"), .layout = .{ .sizing = .{ .w = width_sizing }, .direction = .top_to_bottom, .child_gap = 8 } })({
+        cl.text("Renderer & Platform Agnostic", title_text_config);
+        cl.UI()(.{ .layout = .{ .sizing = .{ .w = .growMinMax(.{ .max = 16 }) } } })({});
+        cl.text(
+            "Clay outputs a sorted array of primitive render commands, such as RECTANGLE, TEXT or IMAGE.",
+            .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
+        );
+        cl.text(
+            "Write your own renderer in a few hundred lines of code, or use the provided examples for Raylib, WebGL canvas and more.",
+            .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
+        );
+        cl.text(
+            "There's even an HTML renderer - you're looking at it right now!",
+            .{ .font_size = 28, .font_id = FONT_ID_BODY_36, .color = COLOR_RED },
+        );
+    });
+    cl.UI()(.{
+        .id = .ID("RendererRightText"),
+        .layout = .{ .sizing = .{ .w = width_sizing }, .child_alignment = .{ .x = .center }, .direction = .top_to_bottom, .child_gap = 16 },
+    })({
+        cl.text("Try changing renderer!", .{ .font_size = 36, .font_id = FONT_ID_BODY_36, .color = COLOR_ORANGE });
+        cl.UI()(.{ .layout = .{ .sizing = .{ .w = .growMinMax(.{ .max = 32 }) } } })({});
+        rendererButtonActive("Raylib Renderer");
+    });
+}
+
+fn rendererPageDesktop() void {
+    cl.UI()(.{
+        .id = .ID("RendererPageDesktop"),
+        .layout = .{
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .child_alignment = .{ .y = .center },
+            .padding = .{ .left = 50, .right = 50 },
+        },
+    })({
+        cl.UI()(.{
+            .id = .ID("RendererPage"),
+            .layout = .{ .sizing = .grow, .child_alignment = .{ .y = .center }, .padding = .all(32), .child_gap = 32 },
+            .border = .{ .width = .{ .left = 2, .right = 2 }, .color = COLOR_RED },
+        })({
+            rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .percent(0.5));
+        });
+    });
+}
+
+fn rendererPageMobile() void {
+    cl.UI()(.{
+        .id = .ID("RendererMobile"),
+        .layout = .{
+            .direction = .top_to_bottom,
+            .sizing = .{ .w = .grow, .h = .fitMinMax(.{ .min = @floatFromInt(window_height - 50) }) },
+            .child_alignment = .center,
+            .padding = .{ .left = 16, .right = 16, .top = 32, .bottom = 32 },
+            .child_gap = 32,
+        },
+        .background_color = COLOR_LIGHT,
+    })({
+        rendererPage(.{ .font_size = 52, .font_id = FONT_ID_TITLE_52, .color = COLOR_RED }, .grow);
+    });
+}
+
+fn createLayout(lerp_value: f32) cl.ClayArray(cl.RenderCommand) {
+    cl.beginLayout();
+    cl.UI()(.{
+        .id = .ID("OuterContainer"),
+        .layout = .{ .sizing = .grow, .direction = .top_to_bottom },
+        .background_color = COLOR_LIGHT,
+    })({
+        cl.UI()(.{
+            .id = .ID("Header"),
+            .layout = .{
+                .sizing = .{ .h = .fixed(50), .w = .grow },
+                .child_alignment = .{ .y = .center },
+                .padding = .{ .left = 32, .right = 32 },
+                .child_gap = 24,
+            },
+        })({
+            cl.text("Clay", .{
+                .font_id = FONT_ID_BODY_24,
+                .font_size = 24,
+                .color = .{ 61, 26, 5, 255 },
+            });
+            cl.UI()(.{ .layout = .{ .sizing = .{ .w = .grow } } })({});
+
+            if (!mobile_screen) {
+                cl.UI()(.{ .id = .ID("LinkExamplesInner"), .layout = .{}, .background_color = .{ 0, 0, 0, 0 } })({
+                    cl.text("Examples", .{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } });
+                });
+                cl.UI()(.{ .id = .ID("LinkDocsOuter"), .layout = .{}, .background_color = .{ 0, 0, 0, 0 } })({
+                    cl.text("Docs", .{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } });
+                });
+            }
+
+            cl.UI()(.{
+                .layout = .{ .padding = .{ .left = 32, .right = 32, .top = 6, .bottom = 6 } },
+                .border = .{ .width = .all(2), .color = COLOR_RED },
+                .corner_radius = .all(10),
+                .background_color = if (cl.hovered()) COLOR_LIGHT_HOVER else COLOR_LIGHT,
+            })({
+                cl.text(
+                    "Github",
+                    .{ .font_id = FONT_ID_BODY_24, .font_size = 24, .color = .{ 61, 26, 5, 255 } },
+                );
+            });
+        });
+        inline for (COLORS_TOP_BORDER, 0..) |color, i| {
+            cl.UI()(.{
+                .id = .ID("TopBorder" ++ .{i}),
+                .layout = .{ .sizing = .{ .h = .fixed(4), .w = .grow } },
+                .background_color = color,
+            })({});
+        }
+
+        cl.UI()(.{
+            .id = .ID("ScrollContainerBackgroundRectangle"),
+            .scroll = .{ .vertical = true },
+            .layout = .{ .sizing = .grow, .direction = .top_to_bottom },
+            .background_color = COLOR_LIGHT,
+            .border = .{ .width = .{ .between_children = 2 }, .color = COLOR_RED },
+        })({
+            if (!mobile_screen) {
+                landingPageDesktop();
+                featureBlocksDesktop();
+                declarativeSyntaxPageDesktop();
+                highPerformancePageDesktop(lerp_value);
+                rendererPageDesktop();
+            } else {
+                landingPageMobile();
+                featureBlocksMobile();
+                declarativeSyntaxPageMobile();
+                highPerformancePageMobile(lerp_value);
+                rendererPageMobile();
+            }
+        });
+    });
+    return cl.endLayout();
+}
+
+fn loadFont(file_data: ?[]const u8, font_id: u16, font_size: i32) !void {
+    renderer.raylib_fonts[font_id] = try rl.loadFontFromMemory(".ttf", file_data, font_size * 2, null);
+    rl.setTextureFilter(renderer.raylib_fonts[font_id].?.texture, .bilinear);
+}
+
+fn loadImage(comptime path: [:0]const u8) !rl.Texture2D {
+    const texture = try rl.loadTextureFromImage(try rl.loadImageFromMemory(@ptrCast(std.fs.path.extension(path)), @embedFile(path)));
+    rl.setTextureFilter(texture, .bilinear);
+    return texture;
+}
+
+pub fn main() !void {
+    const allocator = std.heap.page_allocator;
+
+    // init clay
+    const min_memory_size: u32 = cl.minMemorySize();
+    const memory = try allocator.alloc(u8, min_memory_size);
+    defer allocator.free(memory);
+    const arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory);
+    _ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{});
+    cl.setMeasureTextFunction({}, renderer.measureText);
+
+    // init raylib
+    rl.setConfigFlags(.{
+        .msaa_4x_hint = true,
+        .window_resizable = true,
+    });
+    rl.initWindow(1000, 1000, "Raylib zig Example");
+    rl.setWindowMinSize(300, 100);
+    rl.setTargetFPS(60);
+
+    // load assets
+    try loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_56, 56);
+    try loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_52, 52);
+    try loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_48, 48);
+    try loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_36, 36);
+    try loadFont(@embedFile("resources/Calistoga-Regular.ttf"), FONT_ID_TITLE_32, 32);
+    try loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_36, 36);
+    try loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_30, 30);
+    try loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_28, 28);
+    try loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_24, 24);
+    try loadFont(@embedFile("resources/Quicksand-Semibold.ttf"), FONT_ID_BODY_16, 16);
+
+    syntaxImage = try loadImage("resources/declarative.png");
+    checkImage1 = try loadImage("resources/check_1.png");
+    checkImage2 = try loadImage("resources/check_2.png");
+    checkImage3 = try loadImage("resources/check_3.png");
+    checkImage4 = try loadImage("resources/check_4.png");
+    checkImage5 = try loadImage("resources/check_5.png");
+    zig_logo_image6 = try loadImage("resources/zig-mark.png");
+
+    var animation_lerp_value: f32 = -1.0;
+    var debug_mode_enabled = false;
+    while (!rl.windowShouldClose()) {
+        if (rl.isKeyPressed(.d)) {
+            debug_mode_enabled = !debug_mode_enabled;
+            cl.setDebugModeEnabled(debug_mode_enabled);
+        }
+
+        animation_lerp_value += rl.getFrameTime();
+        if (animation_lerp_value > 1) {
+            animation_lerp_value = animation_lerp_value - 2;
+        }
+
+        window_width = rl.getScreenWidth();
+        window_height = rl.getScreenHeight();
+        mobile_screen = (window_width - if (debug_mode_enabled) @as(i32, @intCast(cl.Clay__debugViewWidth)) else 0) < 750;
+
+        const mouse_pos = rl.getMousePosition();
+        cl.setPointerState(.{
+            .x = mouse_pos.x,
+            .y = mouse_pos.y,
+        }, rl.isMouseButtonDown(.left));
+
+        const scroll_delta = rl.getMouseWheelMoveV().multiply(.{ .x = 6, .y = 6 });
+        cl.updateScrollContainers(
+            false,
+            .{ .x = scroll_delta.x, .y = scroll_delta.y },
+            rl.getFrameTime(),
+        );
+
+        cl.setLayoutDimensions(.{
+            .w = @floatFromInt(window_width),
+            .h = @floatFromInt(window_height),
+        });
+        var render_commands = createLayout(if (animation_lerp_value < 0) animation_lerp_value + 1 else 1 - animation_lerp_value);
+
+        rl.beginDrawing();
+        try renderer.clayRaylibRender(&render_commands, allocator);
+        rl.endDrawing();
+    }
+}

examples/raylib-clay-official-website/src/raylib_render_clay.zig

@@ -0,0 +1,239 @@
+const std = @import("std");
+const rl = @import("raylib");
+const cl = @import("zclay");
+const math = std.math;
+
+pub fn clayColorToRaylibColor(color: cl.Color) rl.Color {
+    return rl.Color{
+        .r = @intFromFloat(color[0]),
+        .g = @intFromFloat(color[1]),
+        .b = @intFromFloat(color[2]),
+        .a = @intFromFloat(color[3]),
+    };
+}
+
+pub var raylib_fonts: [10]?rl.Font = .{null} ** 10;
+
+pub fn clayRaylibRender(render_commands: *cl.ClayArray(cl.RenderCommand), allocator: std.mem.Allocator) !void {
+    var i: usize = 0;
+    while (i < render_commands.length) : (i += 1) {
+        const render_command = cl.renderCommandArrayGet(render_commands, @intCast(i));
+        const bounding_box = render_command.bounding_box;
+        switch (render_command.command_type) {
+            .none => {},
+            .text => {
+                const config = render_command.render_data.text;
+                const text = config.string_contents.chars[0..@intCast(config.string_contents.length)];
+                // Raylib uses standard C strings so isn't compatible with cheap slices, we need to clone the string to append null terminator
+                const cloned = try allocator.dupeZ(u8, text);
+                defer allocator.free(cloned);
+                const fontToUse: rl.Font = raylib_fonts[config.font_id].?;
+                rl.setTextLineSpacing(config.line_height);
+                rl.drawTextEx(
+                    fontToUse,
+                    cloned,
+                    rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
+                    @floatFromInt(config.font_size),
+                    @floatFromInt(config.letter_spacing),
+                    clayColorToRaylibColor(config.text_color),
+                );
+            },
+            .image => {
+                const config = render_command.render_data.image;
+
+                const image_texture: *const rl.Texture2D = @ptrCast(
+                    @alignCast(config.image_data),
+                );
+                rl.drawTextureEx(
+                    image_texture.*,
+                    rl.Vector2{ .x = bounding_box.x, .y = bounding_box.y },
+                    0,
+                    bounding_box.width / @as(f32, @floatFromInt(image_texture.width)),
+                    rl.Color.white,
+                );
+            },
+            .scissor_start => {
+                rl.beginScissorMode(
+                    @intFromFloat(@round(bounding_box.x)),
+                    @intFromFloat(@round(bounding_box.y)),
+                    @intFromFloat(@round(bounding_box.width)),
+                    @intFromFloat(@round(bounding_box.height)),
+                );
+            },
+            .scissor_end => rl.endScissorMode(),
+            .rectangle => {
+                const config = render_command.render_data.rectangle;
+                if (config.corner_radius.top_left > 0) {
+                    const radius: f32 = (config.corner_radius.top_left * 2) / @min(bounding_box.width, bounding_box.height);
+                    rl.drawRectangleRounded(
+                        rl.Rectangle{
+                            .x = bounding_box.x,
+                            .y = bounding_box.y,
+                            .width = bounding_box.width,
+                            .height = bounding_box.height,
+                        },
+                        radius,
+                        8,
+                        clayColorToRaylibColor(config.background_color),
+                    );
+                } else {
+                    rl.drawRectangle(
+                        @intFromFloat(bounding_box.x),
+                        @intFromFloat(bounding_box.y),
+                        @intFromFloat(bounding_box.width),
+                        @intFromFloat(bounding_box.height),
+                        clayColorToRaylibColor(config.background_color),
+                    );
+                }
+            },
+            .border => {
+                const config = render_command.render_data.border;
+                // Left border
+                if (config.width.left > 0) {
+                    rl.drawRectangle(
+                        @intFromFloat(@round(bounding_box.x)),
+                        @intFromFloat(@round(bounding_box.y + config.corner_radius.top_left)),
+                        @intCast(config.width.left),
+                        @intFromFloat(@round(bounding_box.height - config.corner_radius.top_left - config.corner_radius.bottom_left)),
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                // Right border
+                if (config.width.right > 0) {
+                    rl.drawRectangle(
+                        @intFromFloat(@round(bounding_box.x + bounding_box.width - @as(f32, @floatFromInt(config.width.right)))),
+                        @intFromFloat(@round(bounding_box.y + config.corner_radius.top_right)),
+                        @intCast(config.width.right),
+                        @intFromFloat(@round(bounding_box.height - config.corner_radius.top_right - config.corner_radius.bottom_right)),
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                // Top border
+                if (config.width.top > 0) {
+                    rl.drawRectangle(
+                        @intFromFloat(@round(bounding_box.x + config.corner_radius.top_left)),
+                        @intFromFloat(@round(bounding_box.y)),
+                        @intFromFloat(@round(bounding_box.width - config.corner_radius.top_left - config.corner_radius.top_right)),
+                        @intCast(config.width.top),
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                // Bottom border
+                if (config.width.bottom > 0) {
+                    rl.drawRectangle(
+                        @intFromFloat(@round(bounding_box.x + config.corner_radius.bottom_left)),
+                        @intFromFloat(@round(bounding_box.y + bounding_box.height - @as(f32, @floatFromInt(config.width.bottom)))),
+                        @intFromFloat(@round(bounding_box.width - config.corner_radius.bottom_left - config.corner_radius.bottom_right)),
+                        @intCast(config.width.bottom),
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                if (config.corner_radius.top_left > 0) {
+                    rl.drawRing(
+                        rl.Vector2{
+                            .x = @round(bounding_box.x + config.corner_radius.top_left),
+                            .y = @round(bounding_box.y + config.corner_radius.top_left),
+                        },
+                        @round(config.corner_radius.top_left - @as(f32, @floatFromInt(config.width.top))),
+                        config.corner_radius.top_left,
+                        180,
+                        270,
+                        10,
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                if (config.corner_radius.top_right > 0) {
+                    rl.drawRing(
+                        rl.Vector2{
+                            .x = @round(bounding_box.x + bounding_box.width - config.corner_radius.top_right),
+                            .y = @round(bounding_box.y + config.corner_radius.top_right),
+                        },
+                        @round(config.corner_radius.top_right - @as(f32, @floatFromInt(config.width.top))),
+                        config.corner_radius.top_right,
+                        270,
+                        360,
+                        10,
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                if (config.corner_radius.bottom_left > 0) {
+                    rl.drawRing(
+                        rl.Vector2{
+                            .x = @round(bounding_box.x + config.corner_radius.bottom_left),
+                            .y = @round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_left),
+                        },
+                        @round(config.corner_radius.bottom_left - @as(f32, @floatFromInt(config.width.top))),
+                        config.corner_radius.bottom_left,
+                        90,
+                        180,
+                        10,
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+                if (config.corner_radius.bottom_right > 0) {
+                    rl.drawRing(
+                        rl.Vector2{
+                            .x = @round(bounding_box.x + bounding_box.width - config.corner_radius.bottom_right),
+                            .y = @round(bounding_box.y + bounding_box.height - config.corner_radius.bottom_right),
+                        },
+                        @round(config.corner_radius.bottom_right - @as(f32, @floatFromInt(config.width.bottom))),
+                        config.corner_radius.bottom_right,
+                        0.1,
+                        90,
+                        10,
+                        clayColorToRaylibColor(config.color),
+                    );
+                }
+            },
+            .custom => {
+                // Implement custom element rendering here
+            },
+        }
+    }
+}
+
+pub fn measureText(clay_text: []const u8, config: *cl.TextElementConfig, _: void) cl.Dimensions {
+    const font = raylib_fonts[config.font_id].?;
+    const text: []const u8 = clay_text;
+    const font_size: f32 = @floatFromInt(config.font_size);
+    const letter_spacing: f32 = @floatFromInt(config.letter_spacing);
+    const line_height = config.line_height;
+
+    var temp_byte_counter: usize = 0;
+    var byte_counter: usize = 0;
+    var text_width: f32 = 0.0;
+    var temp_text_width: f32 = 0.0;
+    var text_height: f32 = font_size;
+    const scale_factor: f32 = font_size / @as(f32, @floatFromInt(font.baseSize));
+
+    var utf8 = std.unicode.Utf8View.initUnchecked(text).iterator();
+
+    while (utf8.nextCodepoint()) |codepoint| {
+        byte_counter += std.unicode.utf8CodepointSequenceLength(codepoint) catch 1;
+        const index: usize = @intCast(
+            rl.getGlyphIndex(font, @as(i32, @intCast(codepoint))),
+        );
+
+        if (codepoint != '\n') {
+            if (font.glyphs[index].advanceX != 0) {
+                text_width += @floatFromInt(font.glyphs[index].advanceX);
+            } else {
+                text_width += font.recs[index].width + @as(f32, @floatFromInt(font.glyphs[index].offsetX));
+            }
+        } else {
+            if (temp_text_width < text_width) temp_text_width = text_width;
+            byte_counter = 0;
+            text_width = 0;
+            text_height += font_size + @as(f32, @floatFromInt(line_height));
+        }
+
+        if (temp_byte_counter < byte_counter) temp_byte_counter = byte_counter;
+    }
+
+    if (temp_text_width < text_width) temp_text_width = text_width;
+
+    return cl.Dimensions{
+        .h = text_height,
+        .w = temp_text_width * scale_factor + (@as(f32, @floatFromInt(temp_byte_counter)) - 1) * letter_spacing,
+    };
+}