[Documentation] Update README to fix quick start example nesting

README.md

@@ -90,7 +90,7 @@ int main() {
                 .id = CLAY_ID("SideBar"),
                 .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16 },
                 .backgroundColor = COLOR_LIGHT }
-            ) {
+            }) {
                 CLAY({ .id = CLAY_ID("ProfilePictureOuter"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .backgroundColor = COLOR_RED }) {
                     CLAY({ .id = CLAY_ID("ProfilePicture"), .layout = { .sizing = { .width = CLAY_SIZING_FIXED(60), .height = CLAY_SIZING_FIXED(60) }}, .image = { .imageData = &profilePicture, .sourceDimensions = {60, 60} } }) {}
                     CLAY_TEXT(CLAY_STRING("Clay - UI Library"), CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {255, 255, 255, 255} }));
@@ -103,22 +103,20 @@ int main() {
 
                 CLAY({ .id = CLAY_ID("MainContent"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0) } }, .backgroundColor = COLOR_LIGHT }) {}
             }
+        }
 
-            // All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout
-            Clay_RenderCommandArray renderCommands = Clay_EndLayout();
+        // All clay layouts are declared between Clay_BeginLayout and Clay_EndLayout
+        Clay_RenderCommandArray renderCommands = Clay_EndLayout();
 
-            // More comprehensive rendering examples can be found in the renderers/ directory
-            for (int i = 0; i < renderCommands.length; i++) {
-                Clay_RenderCommand *renderCommand = &renderCommands.internalArray[i];
+        // More comprehensive rendering examples can be found in the renderers/ directory
+        for (int i = 0; i < renderCommands.length; i++) {
+            Clay_RenderCommand *renderCommand = &renderCommands.internalArray[i];
 
-                switch (renderCommand->commandType) {
-                    case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
-                        DrawRectangle(
-                                renderCommand->boundingBox,
-                                renderCommand->renderData.rectangle.backgroundColor);
-                    }
-                        // ... Implement handling of other command types
+            switch (renderCommand->commandType) {
+                case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
+                    DrawRectangle( renderCommand->boundingBox, renderCommand->renderData.rectangle.backgroundColor);
                 }
+                // ... Implement handling of other command types
             }
         }
     }

bindings/odin/clay-odin/clay.odin

@@ -75,19 +75,6 @@ when ODIN_OS == .Windows {
     EnumBackingType :: u8
 }
 
-ElementConfigType :: enum EnumBackingType {
-    Rectangle = 1,
-    Border    = 2,
-    Floating  = 4,
-    Scroll    = 8,
-    Image     = 16,
-    Text      = 32,
-    Custom    = 64,
-    // Odin specific enum types
-    Id        = 65,
-    Layout    = 66,
-}
-
 RenderCommandType :: enum EnumBackingType {
     None,
     Rectangle,
@@ -247,10 +234,10 @@ ScrollContainerData :: struct {
 }
 
 SizingType :: enum EnumBackingType {
-    FIT,
-    GROW,
-    PERCENT,
-    FIXED,
+    Fit,
+    Grow,
+    Percent,
+    Fixed,
 }
 
 SizingConstraintsMinMax :: struct {
@@ -282,20 +269,20 @@ Padding :: struct {
 }
 
 LayoutDirection :: enum EnumBackingType {
-    LEFT_TO_RIGHT,
-    TOP_TO_BOTTOM,
+    LeftToRight,
+    TopToBottom,
 }
 
 LayoutAlignmentX :: enum EnumBackingType {
-    LEFT,
-    RIGHT,
-    CENTER,
+    Left,
+    Right,
+    Center,
 }
 
 LayoutAlignmentY :: enum EnumBackingType {
-    TOP,
-    BOTTOM,
-    CENTER,
+    Top,
+    Bottom,
+    Center,
 }
 
 ChildAlignment :: struct {
@@ -331,13 +318,14 @@ ElementDeclaration :: struct {
 }
 
 ErrorType :: enum {
-    TEXT_MEASUREMENT_FUNCTION_NOT_PROVIDED,
-    ARENA_CAPACITY_EXCEEDED,
-    ELEMENTS_CAPACITY_EXCEEDED,
-    TEXT_MEASUREMENT_CAPACITY_EXCEEDED,
-    DUPLICATE_ID,
-    FLOATING_CONTAINER_PARENT_NOT_FOUND,
-    INTERNAL_ERROR,
+    TextMeasurementFunctionNotProvided,
+    ArenaCapacityExceeded,
+    ElementsCapacityExceeded,
+    TextMeasurementCapacityExceeded,
+    DuplicateId,
+    FloatingContainerParentNotFound,
+    PercentageOver1,
+    InternalError,
 }
 
 ErrorData :: struct {
@@ -412,19 +400,19 @@ CornerRadiusAll :: proc(radius: f32) -> CornerRadius {
 }
 
 SizingFit :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis {
-    return SizingAxis{type = SizingType.FIT, constraints = {sizeMinMax = sizeMinMax}}
+    return SizingAxis{type = SizingType.Fit, constraints = {sizeMinMax = sizeMinMax}}
 }
 
 SizingGrow :: proc(sizeMinMax: SizingConstraintsMinMax) -> SizingAxis {
-    return SizingAxis{type = SizingType.GROW, constraints = {sizeMinMax = sizeMinMax}}
+    return SizingAxis{type = SizingType.Grow, constraints = {sizeMinMax = sizeMinMax}}
 }
 
 SizingFixed :: proc(size: c.float) -> SizingAxis {
-    return SizingAxis{type = SizingType.FIXED, constraints = {sizeMinMax = {size, size}}}
+    return SizingAxis{type = SizingType.Fixed, constraints = {sizeMinMax = {size, size}}}
 }
 
 SizingPercent :: proc(sizePercent: c.float) -> SizingAxis {
-    return SizingAxis{type = SizingType.PERCENT, constraints = {sizePercent = sizePercent}}
+    return SizingAxis{type = SizingType.Percent, constraints = {sizePercent = sizePercent}}
 }
 
 MakeString :: proc(label: string) -> String {

bindings/odin/examples/clay-official-website/clay-official-website.odin

@@ -65,7 +65,7 @@ border2pxRed := clay.BorderElementConfig {
 LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Color, text: string, image: ^raylib.Texture2D) {
     if clay.UI().configure({
         id = clay.ID("HeroBlob", index),
-        layout = { sizing = { width = clay.SizingGrow({ max = 480 }) }, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{ y = .CENTER } },
+        layout = { sizing = { width = clay.SizingGrow({ max = 480 }) }, padding = clay.PaddingAll(16), childGap = 16, childAlignment = clay.ChildAlignment{ y = .Center } },
         border = border2pxRed,
         cornerRadius = clay.CornerRadiusAll(10)
     }) {
@@ -81,14 +81,14 @@ LandingPageBlob :: proc(index: u32, fontSize: u16, fontId: u16, color: clay.Colo
 LandingPageDesktop :: proc() {
     if clay.UI().configure({
         id = clay.ID("LandingPage1Desktop"),
-        layout = { sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } },
+        layout = { sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } },
     }) {
         if clay.UI().configure({
             id = clay.ID("LandingPage1"),
-            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 },
+            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 },
             border = { COLOR_RED, { left = 2, right = 2 } },
         }) {
-            if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
+            if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingPercent(0.55) }, layoutDirection = .TopToBottom, childGap = 8 } }) {
                 clay.Text(
                     "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
                     clay.TextConfig({fontSize = 56, fontId = FONT_ID_TITLE_56, textColor = COLOR_RED}),
@@ -101,7 +101,7 @@ LandingPageDesktop :: proc() {
             }
             if clay.UI().configure({
                 id = clay.ID("HeroImageOuter"),
-                layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .CENTER }, childGap = 16 },
+                layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingPercent(0.45) }, childAlignment = { x = .Center }, childGap = 16 },
             }) {
                 LandingPageBlob(1, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_5, "High performance", &checkImage5)
                 LandingPageBlob(2, 30, FONT_ID_BODY_30, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4)
@@ -117,14 +117,14 @@ LandingPageMobile :: proc() {
     if clay.UI().configure({
         id = clay.ID("LandingPage1Mobile"),
         layout = {
-            layoutDirection = .TOP_TO_BOTTOM,
+            layoutDirection = .TopToBottom,
             sizing = { width = clay.SizingGrow({ }), height = clay.SizingFit({ min = cast(f32)windowHeight - 70 }) },
-            childAlignment = { x = .CENTER, y = .CENTER },
+            childAlignment = { x = .Center, y = .Center },
             padding = { 16, 16, 32, 32 },
             childGap = 32,
         },
     }) {
-        if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
+        if clay.UI().configure({ id = clay.ID("LeftText"), layout = { sizing = { width = clay.SizingGrow({ }) }, layoutDirection = .TopToBottom, childGap = 8 } }) {
             clay.Text(
                 "Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance.",
                 clay.TextConfig({fontSize = 48, fontId = FONT_ID_TITLE_48, textColor = COLOR_RED}),
@@ -137,7 +137,7 @@ LandingPageMobile :: proc() {
         }
         if clay.UI().configure({
             id = clay.ID("HeroImageOuter"),
-            layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .CENTER }, childGap = 16 },
+            layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) }, childAlignment = { x = .Center }, childGap = 16 },
         }) {
             LandingPageBlob(1, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_5, "High performance", &checkImage5)
             LandingPageBlob(2, 24, FONT_ID_BODY_24, COLOR_BLOB_BORDER_4, "Flexbox-style responsive layout", &checkImage4)
@@ -152,7 +152,7 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
     textConfig := clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_RED})
     if clay.UI().configure({
         id = clay.ID("HFileBoxOuter"),
-        layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = widthSizing }, childAlignment = { y = .CENTER }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
+        layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
     }) {
         if clay.UI().configure({ id = clay.ID("HFileIncludeOuter"), layout = { padding = { 8, 8, 4, 4 } }, backgroundColor = COLOR_RED, cornerRadius = clay.CornerRadiusAll(8) }) {
             clay.Text("#include clay.h", clay.TextConfig({fontSize = 24, fontId = FONT_ID_BODY_24, textColor = COLOR_LIGHT}))
@@ -162,7 +162,7 @@ FeatureBlocks :: proc(widthSizing: clay.SizingAxis, outerPadding: u16) {
     }
     if clay.UI().configure({
         id = clay.ID("BringYourOwnRendererOuter"),
-        layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = widthSizing }, childAlignment = { y = .CENTER }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
+        layout = { layoutDirection = .TopToBottom, sizing = { width = widthSizing }, childAlignment = { y = .Center }, padding = { outerPadding, outerPadding, 32, 32 }, childGap = 8 },
     }) {
         clay.Text("Renderer agnostic.", clay.TextConfig({fontId = FONT_ID_BODY_24, fontSize = 24, textColor = COLOR_ORANGE}))
         clay.Text("Layout with clay, then render with Raylib, WebGL Canvas or even as HTML.", textConfig)
@@ -174,7 +174,7 @@ FeatureBlocksDesktop :: proc() {
     if clay.UI().configure({ id = clay.ID("FeatureBlocksOuter"), layout = { sizing = { width = clay.SizingGrow({}) } } }) {
         if clay.UI().configure({
             id = clay.ID("FeatureBlocksInner"),
-            layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .CENTER } },
+            layout = { sizing = { width = clay.SizingGrow({ }) }, childAlignment = { y = .Center } },
             border = { width = { betweenChildren = 2}, color = COLOR_RED },
         }) {
             FeatureBlocks(clay.SizingPercent(0.5), 50)
@@ -185,7 +185,7 @@ FeatureBlocksDesktop :: proc() {
 FeatureBlocksMobile :: proc() {
     if clay.UI().configure({
         id = clay.ID("FeatureBlocksInner"),
-        layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { width = clay.SizingGrow({ }) } },
+        layout = { layoutDirection = .TopToBottom, sizing = { width = clay.SizingGrow({ }) } },
         border = { width = { betweenChildren = 2}, color = COLOR_RED },
     }) {
         FeatureBlocks(clay.SizingGrow({}), 16)
@@ -193,7 +193,7 @@ FeatureBlocksMobile :: proc() {
 }
 
 DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
-    if clay.UI().configure({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
+    if clay.UI().configure({ id = clay.ID("SyntaxPageLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
         clay.Text("Declarative Syntax", clay.TextConfig(titleTextConfig))
         if clay.UI().configure({ id = clay.ID("SyntaxSpacer"), layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
         clay.Text(
@@ -209,7 +209,7 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
             clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_28, textColor = COLOR_RED}),
         )
     }
-    if clay.UI().configure({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER } } }) {
+    if clay.UI().configure({ id = clay.ID("SyntaxPageRightImage"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
         if clay.UI().configure({
             id = clay.ID("SyntaxPageRightImageInner"),
             layout = { sizing = { width = clay.SizingGrow({ max = 568 }) } },
@@ -221,11 +221,11 @@ DeclarativeSyntaxPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizi
 DeclarativeSyntaxPageDesktop :: proc() {
     if clay.UI().configure({
         id = clay.ID("SyntaxPageDesktop"),
-        layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } },
+        layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } },
     }) {
         if clay.UI().configure({
             id = clay.ID("SyntaxPage"),
-            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 },
+            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 },
             border = border2pxRed,
         }) {
             DeclarativeSyntaxPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
@@ -237,9 +237,9 @@ DeclarativeSyntaxPageMobile :: proc() {
     if clay.UI().configure({
         id = clay.ID("SyntaxPageMobile"),
         layout = {
-            layoutDirection = .TOP_TO_BOTTOM,
+            layoutDirection = .TopToBottom,
             sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
-            childAlignment = { x = .CENTER, y = .CENTER },
+            childAlignment = { x = .Center, y = .Center },
             padding = { 16, 16, 32, 32 },
             childGap = 16,
         },
@@ -255,7 +255,7 @@ ColorLerp :: proc(a: clay.Color, b: clay.Color, amount: f32) -> clay.Color {
 LOREM_IPSUM_TEXT := "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
 
 HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
-    if clay.UI().configure({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
+    if clay.UI().configure({ id = clay.ID("PerformanceLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
         clay.Text("High Performance", clay.TextConfig(titleTextConfig))
         if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } }}) {}
         clay.Text(
@@ -271,7 +271,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
             clay.TextConfig({fontSize = 28, fontId = FONT_ID_BODY_36, textColor = COLOR_LIGHT}),
         )
     }
-    if clay.UI().configure({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER } } }) {
+    if clay.UI().configure({ id = clay.ID("PerformanceRightImageOuter"), layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center } } }) {
         if clay.UI().configure({
             id = clay.ID("PerformanceRightBorder"),
             layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(400) } },
@@ -279,14 +279,14 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
         }) {
             if clay.UI().configure({
                 id = clay.ID("AnimationDemoContainerLeft"),
-                layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(16) },
+                layout = { sizing = { clay.SizingPercent(0.35 + 0.3 * lerpValue), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) },
                 backgroundColor = ColorLerp(COLOR_RED, COLOR_ORANGE, lerpValue),
             }) {
                 clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
             }
             if clay.UI().configure({
                 id = clay.ID("AnimationDemoContainerRight"),
-                layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(16) },
+                layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(16) },
                 backgroundColor = ColorLerp(COLOR_ORANGE, COLOR_RED, lerpValue),
             }) {
                 clay.Text(LOREM_IPSUM_TEXT, clay.TextConfig({fontSize = 16, fontId = FONT_ID_BODY_16, textColor = COLOR_LIGHT}))
@@ -298,7 +298,7 @@ HighPerformancePage :: proc(lerpValue: f32, titleTextConfig: clay.TextElementCon
 HighPerformancePageDesktop :: proc(lerpValue: f32) {
     if clay.UI().configure({
         id = clay.ID("PerformanceDesktop"),
-        layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { 82, 82, 32, 32 }, childGap = 64 },
+        layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { 82, 82, 32, 32 }, childGap = 64 },
         backgroundColor = COLOR_RED,
     }) {
         HighPerformancePage(lerpValue, {fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_LIGHT}, clay.SizingPercent(0.5))
@@ -309,9 +309,9 @@ HighPerformancePageMobile :: proc(lerpValue: f32) {
     if clay.UI().configure({
         id = clay.ID("PerformanceMobile"),
         layout = {
-            layoutDirection = .TOP_TO_BOTTOM,
+            layoutDirection = .TopToBottom,
             sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
-            childAlignment = { x = .CENTER, y = .CENTER },
+            childAlignment = { x = .Center, y = .Center },
             padding = { 16, 16, 32, 32 },
             childGap = 32,
         },
@@ -345,7 +345,7 @@ RendererButtonInactive :: proc(index: u32, text: string) {
 }
 
 RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.SizingAxis) {
-    if clay.UI().configure({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TOP_TO_BOTTOM, childGap = 8 } }) {
+    if clay.UI().configure({ id = clay.ID("RendererLeftText"), layout = { sizing = { width = widthSizing }, layoutDirection = .TopToBottom, childGap = 8 } }) {
         clay.Text("Renderer & Platform Agnostic", clay.TextConfig(titleTextConfig))
         if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 16 }) } } }) {}
         clay.Text(
@@ -363,7 +363,7 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
     }
     if clay.UI().configure({
         id = clay.ID("RendererRightText"),
-        layout = { sizing = { width = widthSizing }, childAlignment = { x = .CENTER }, layoutDirection = .TOP_TO_BOTTOM, childGap = 16 },
+        layout = { sizing = { width = widthSizing }, childAlignment = { x = .Center }, layoutDirection = .TopToBottom, childGap = 16 },
     }) {
         clay.Text("Try changing renderer!", clay.TextConfig({fontSize = 36, fontId = FONT_ID_BODY_36, textColor = COLOR_ORANGE}))
         if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ max = 32 }) } } }) {}
@@ -374,11 +374,11 @@ RendererPage :: proc(titleTextConfig: clay.TextElementConfig, widthSizing: clay.
 RendererPageDesktop :: proc() {
     if clay.UI().configure({
         id = clay.ID("RendererPageDesktop"),
-        layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .CENTER }, padding = { left = 50, right = 50 } },
+        layout = { sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) }, childAlignment = { y = .Center }, padding = { left = 50, right = 50 } },
     }) {
         if clay.UI().configure({
             id = clay.ID("RendererPage"),
-            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .CENTER }, padding = clay.PaddingAll(32), childGap = 32 },
+            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, childAlignment = { y = .Center }, padding = clay.PaddingAll(32), childGap = 32 },
             border = { COLOR_RED, { left = 2, right = 2 } },
         }) {
             RendererPage({fontSize = 52, fontId = FONT_ID_TITLE_52, textColor = COLOR_RED}, clay.SizingPercent(0.5))
@@ -390,9 +390,9 @@ RendererPageMobile :: proc() {
     if clay.UI().configure({
         id = clay.ID("RendererMobile"),
         layout = {
-            layoutDirection = .TOP_TO_BOTTOM,
+            layoutDirection = .TopToBottom,
             sizing = { clay.SizingGrow({ }), clay.SizingFit({ min = cast(f32)windowHeight - 50 }) },
-            childAlignment = { x = .CENTER, y = .CENTER },
+            childAlignment = { x = .Center, y = .Center },
             padding = { 16, 16, 32, 32 },
             childGap = 32,
         },
@@ -416,12 +416,12 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
     clay.BeginLayout()
     if clay.UI().configure({
         id = clay.ID("OuterContainer"),
-        layout = { layoutDirection = .TOP_TO_BOTTOM, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } },
+        layout = { layoutDirection = .TopToBottom, sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) } },
         backgroundColor = COLOR_LIGHT,
     }) {
         if clay.UI().configure({
             id = clay.ID("Header"),
-            layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(50) }, childAlignment = { y = .CENTER }, childGap = 24, padding = { left = 32, right = 32 } },
+            layout = { sizing = { clay.SizingGrow({ }), clay.SizingFixed(50) }, childAlignment = { y = .Center }, childGap = 24, padding = { left = 32, right = 32 } },
         }) {
             clay.Text("Clay", &headerTextConfig)
             if clay.UI().configure({ layout = { sizing = { width = clay.SizingGrow({ }) } } }) {}
@@ -452,7 +452,7 @@ createLayout :: proc(lerpValue: f32) -> clay.ClayArray(clay.RenderCommand) {
         if clay.UI().configure({
             id = clay.ID("ScrollContainerBackgroundRectangle"),
             scroll = { vertical = true },
-            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TOP_TO_BOTTOM },
+            layout = { sizing = { clay.SizingGrow({ }), clay.SizingGrow({ }) }, layoutDirection = clay.LayoutDirection.TopToBottom },
             backgroundColor = COLOR_LIGHT,
             border = { COLOR_RED, { betweenChildren = 2} },
         }) {
@@ -483,8 +483,8 @@ loadFont :: proc(fontId: u16, fontSize: u16, path: cstring) {
 }
 
 errorHandler :: proc "c" (errorData: clay.ErrorData) {
-    if (errorData.errorType == clay.ErrorType.DUPLICATE_ID) {
-
+    if (errorData.errorType == clay.ErrorType.DuplicateId) {
+        // etc
     }
 }
 

clay.h

@@ -15,9 +15,9 @@
 #include <stddef.h>
 
 // SIMD includes on supported platforms
-#if defined(__x86_64__) || defined(_M_X64) || defined(_M_AMD64)
+#if !defined(CLAY_DISABLE_SIMD) && (defined(__x86_64__) || defined(_M_X64) || defined(_M_AMD64))
 #include <emmintrin.h>
-#elif __aarch64__
+#elif !defined(CLAY_DISABLE_SIMD) && defined(__aarch64__)
 #include <arm_neon.h>
 #endif
 
@@ -519,6 +519,7 @@ typedef CLAY_PACKED_ENUM {
     CLAY_ERROR_TYPE_TEXT_MEASUREMENT_CAPACITY_EXCEEDED,
     CLAY_ERROR_TYPE_DUPLICATE_ID,
     CLAY_ERROR_TYPE_FLOATING_CONTAINER_PARENT_NOT_FOUND,
+    CLAY_ERROR_TYPE_PERCENTAGE_OVER_1,
     CLAY_ERROR_TYPE_INTERNAL_ERROR,
 } Clay_ErrorType;
 
@@ -1384,13 +1385,13 @@ void Clay__CloseElement(void) {
 }
 
 bool Clay__MemCmp(const char *s1, const char *s2, int32_t length);
-#if defined(__x86_64__) || defined(_M_X64) || defined(_M_AMD64)
+#if !defined(CLAY_DISABLE_SIMD) && (defined(__x86_64__) || defined(_M_X64) || defined(_M_AMD64))
     bool Clay__MemCmp(const char *s1, const char *s2, int32_t length) {
         while (length >= 16) {
             __m128i v1 = _mm_loadu_si128((const __m128i *)s1);
             __m128i v2 = _mm_loadu_si128((const __m128i *)s2);
 
-            if (_mm_movemask_epi8(_mm_cmpeq_epi8(v1, v2)) != 0xFFFFFFFF) { // If any byte differs
+            if (_mm_movemask_epi8(_mm_cmpeq_epi8(v1, v2)) != 0xFFFF) { // If any byte differs
                 return false;
             }
 
@@ -1410,7 +1411,7 @@ bool Clay__MemCmp(const char *s1, const char *s2, int32_t length);
 
         return true;
     }
-#elif defined(__aarch64__)
+#elif !defined(CLAY_DISABLE_SIMD) && defined(__aarch64__)
     bool Clay__MemCmp(const char *s1, const char *s2, int32_t length) {
         while (length >= 16) {
             uint8x16_t v1 = vld1q_u8((const uint8_t *)s1);
@@ -1502,6 +1503,12 @@ void Clay__ConfigureOpenElement(const Clay_ElementDeclaration declaration) {
     Clay_Context* context = Clay_GetCurrentContext();
     Clay_LayoutElement *openLayoutElement = Clay__GetOpenLayoutElement();
     openLayoutElement->layoutConfig = Clay__StoreLayoutConfig(declaration.layout);
+    if ((declaration.layout.sizing.width.type == CLAY__SIZING_TYPE_PERCENT && declaration.layout.sizing.width.size.percent > 1) || (declaration.layout.sizing.height.type == CLAY__SIZING_TYPE_PERCENT && declaration.layout.sizing.height.size.percent > 1)) {
+        context->errorHandler.errorHandlerFunction(CLAY__INIT(Clay_ErrorData) {
+                .errorType = CLAY_ERROR_TYPE_PERCENTAGE_OVER_1,
+                .errorText = CLAY_STRING("An element was configured with CLAY_SIZING_PERCENT, but the provided percentage value was over 1.0. Clay expects a value between 0 and 1, i.e. 20% is 0.2."),
+                .userData = context->errorHandler.userData });
+    }
     if (declaration.id.id != 0) {
         Clay__AttachId(declaration.id);
     } else if (openLayoutElement->id == 0) {
@@ -2212,10 +2219,10 @@ void Clay__CalculateFinalLayout(void) {
                     sortMax--;
                 }
 
-                bool emitRectangle;
+                bool emitRectangle = false;
                 // Create the render commands for this element
                 Clay_SharedElementConfig *sharedConfig = Clay__FindElementConfigWithType(currentElement, CLAY__ELEMENT_CONFIG_TYPE_SHARED).sharedElementConfig;
-                if (sharedConfig) {
+                if (sharedConfig && sharedConfig->backgroundColor.a > 0) {
                    emitRectangle = true;
                 }
                 else if (!sharedConfig) {
@@ -2248,7 +2255,7 @@ void Clay__CalculateFinalLayout(void) {
                             renderCommand.commandType = CLAY_RENDER_COMMAND_TYPE_IMAGE;
                             renderCommand.renderData = CLAY__INIT(Clay_RenderData) {
                                 .image = {
-                                    .backgroundColor = emitRectangle ? sharedConfig->backgroundColor : CLAY__INIT(Clay_Color) { 255, 255, 255, 255 },
+                                    .backgroundColor = sharedConfig->backgroundColor,
                                     .cornerRadius = sharedConfig->cornerRadius,
                                     .sourceDimensions = elementConfig->config.imageElementConfig->sourceDimensions,
                                     .imageData = elementConfig->config.imageElementConfig->imageData,
@@ -2647,6 +2654,23 @@ Clay__RenderDebugLayoutData Clay__RenderDebugLayoutElementsList(int32_t initialR
                 }
                 for (int32_t elementConfigIndex = 0; elementConfigIndex < currentElement->elementConfigs.length; ++elementConfigIndex) {
                     Clay_ElementConfig *elementConfig = Clay__ElementConfigArraySlice_Get(&currentElement->elementConfigs, elementConfigIndex);
+                    if (elementConfig->type == CLAY__ELEMENT_CONFIG_TYPE_SHARED) {
+                        Clay_Color labelColor = {243,134,48,90};
+                        labelColor.a = 90;
+                        Clay_Color backgroundColor = elementConfig->config.sharedElementConfig->backgroundColor;
+                        Clay_CornerRadius radius = elementConfig->config.sharedElementConfig->cornerRadius;
+                        if (backgroundColor.a > 0) {
+                            CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1 } } }) {
+                                CLAY_TEXT(CLAY_STRING("Color"), CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+                            }
+                        }
+                        if (radius.bottomLeft > 0) {
+                            CLAY({ .layout = { .padding = { 8, 8, 2, 2 } }, .backgroundColor = labelColor, .cornerRadius = CLAY_CORNER_RADIUS(4), .border = { .color = labelColor, .width = { 1, 1, 1, 1 } } }) {
+                                CLAY_TEXT(CLAY_STRING("Radius"), CLAY_TEXT_CONFIG({ .textColor = offscreen ? CLAY__DEBUGVIEW_COLOR_3 : CLAY__DEBUGVIEW_COLOR_4, .fontSize = 16 }));
+                            }
+                        }
+                        continue;
+                    }
                     Clay__DebugElementConfigTypeLabelConfig config = Clay__DebugGetElementConfigTypeLabel(elementConfig->type);
                     Clay_Color backgroundColor = config.color;
                     backgroundColor.a = 90;
@@ -2964,8 +2988,11 @@ void Clay__RenderDebugView(void) {
                         case CLAY__ELEMENT_CONFIG_TYPE_SHARED: {
                             Clay_SharedElementConfig *sharedConfig = elementConfig->config.sharedElementConfig;
                             CLAY({ .layout = { .padding = attributeConfigPadding, .childGap = 8, .layoutDirection = CLAY_TOP_TO_BOTTOM }}) {
+                                // .backgroundColor
+                                CLAY_TEXT(CLAY_STRING("Background Color"), infoTitleConfig);
+                                Clay__RenderDebugViewColor(sharedConfig->backgroundColor, infoTextConfig);
                                 // .cornerRadius
-                                CLAY_TEXT(CLAY_STRING("Color"), infoTitleConfig);
+                                CLAY_TEXT(CLAY_STRING("Corner Radius"), infoTitleConfig);
                                 Clay__RenderDebugViewCornerRadius(sharedConfig->cornerRadius, infoTextConfig);
                             }
                             break;

renderers/SDL2/README

@@ -1,7 +1,3 @@
-Please note, the SDL2 renderer is not 100% feature complete. It is currently missing:
-
-- Rounded rectangle corners
-
 Note: on Mac OSX, SDL2 for some reason decides to automatically disable momentum scrolling on macbook trackpads.
 You can re enable it in objective C using:
 

renderers/SDL2/clay_renderer_SDL2.c

@@ -33,6 +33,114 @@ static Clay_Dimensions SDL2_MeasureText(Clay_StringSlice text, Clay_TextElementC
     };
 }
 
+/* Global for convenience. Even in 4K this is enough for smooth curves (low radius or rect size coupled with
+ * no AA or low resolution might make it appear as jagged curves) */
+static int NUM_CIRCLE_SEGMENTS = 16;
+
+//all rendering is performed by a single SDL call, avoiding multiple RenderRect + plumbing choice for circles.
+static void SDL_RenderFillRoundedRect(SDL_Renderer* renderer, const SDL_FRect rect, const float cornerRadius, const Clay_Color _color) {
+    const SDL_Color color = (SDL_Color) {
+            .r = (Uint8)_color.r,
+            .g = (Uint8)_color.g,
+            .b = (Uint8)_color.b,
+            .a = (Uint8)_color.a,
+    };
+
+    int indexCount = 0, vertexCount = 0;
+
+    const float minRadius = SDL_min(rect.w, rect.h) / 2.0f;
+    const float clampedRadius = SDL_min(cornerRadius, minRadius);
+
+    const int numCircleSegments = SDL_max(NUM_CIRCLE_SEGMENTS, (int)clampedRadius * 0.5f);
+
+    SDL_Vertex vertices[512];
+    int indices[512];
+
+    //define center rectangle
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y + clampedRadius}, color, {0, 0} }; //0 center TL
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y + clampedRadius}, color, {1, 0} }; //1 center TR
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y + rect.h - clampedRadius}, color, {1, 1} }; //2 center BR
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y + rect.h - clampedRadius}, color, {0, 1} }; //3 center BL
+
+    indices[indexCount++] = 0;
+    indices[indexCount++] = 1;
+    indices[indexCount++] = 3;
+    indices[indexCount++] = 1;
+    indices[indexCount++] = 2;
+    indices[indexCount++] = 3;
+
+    //define rounded corners as triangle fans
+    const float step = (M_PI / 2) / numCircleSegments;
+    for (int i = 0; i < numCircleSegments; i++) {
+        const float angle1 = (float)i * step;
+        const float angle2 = ((float)i + 1.0f) * step;
+
+        for (int j = 0; j < 4; j++) {  // Iterate over four corners
+            float cx, cy, signX, signY;
+
+            switch (j) {
+            case 0: cx = rect.x + clampedRadius; cy = rect.y + clampedRadius; signX = -1; signY = -1; break; // Top-left
+            case 1: cx = rect.x + rect.w - clampedRadius; cy = rect.y + clampedRadius; signX = 1; signY = -1; break; // Top-right
+            case 2: cx = rect.x + rect.w - clampedRadius; cy = rect.y + rect.h - clampedRadius; signX = 1; signY = 1; break; // Bottom-right
+            case 3: cx = rect.x + clampedRadius; cy = rect.y + rect.h - clampedRadius; signX = -1; signY = 1; break; // Bottom-left
+            default: return;
+            }
+
+            vertices[vertexCount++] = (SDL_Vertex){ {cx + SDL_cosf(angle1) * clampedRadius * signX, cy + SDL_sinf(angle1) * clampedRadius * signY}, color, {0, 0} };
+            vertices[vertexCount++] = (SDL_Vertex){ {cx + SDL_cosf(angle2) * clampedRadius * signX, cy + SDL_sinf(angle2) * clampedRadius * signY}, color, {0, 0} };
+
+            indices[indexCount++] = j;  // Connect to corresponding central rectangle vertex
+            indices[indexCount++] = vertexCount - 2;
+            indices[indexCount++] = vertexCount - 1;
+        }
+    }
+
+    //Define edge rectangles
+    // Top edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y}, color, {0, 0} }; //TL
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y}, color, {1, 0} }; //TR
+
+    indices[indexCount++] = 0;
+    indices[indexCount++] = vertexCount - 2; //TL
+    indices[indexCount++] = vertexCount - 1; //TR
+    indices[indexCount++] = 1;
+    indices[indexCount++] = 0;
+    indices[indexCount++] = vertexCount - 1; //TR
+    // Right edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w, rect.y + clampedRadius}, color, {1, 0} }; //RT
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w, rect.y + rect.h - clampedRadius}, color, {1, 1} }; //RB
+
+    indices[indexCount++] = 1;
+    indices[indexCount++] = vertexCount - 2; //RT
+    indices[indexCount++] = vertexCount - 1; //RB
+    indices[indexCount++] = 2;
+    indices[indexCount++] = 1;
+    indices[indexCount++] = vertexCount - 1; //RB
+    // Bottom edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + rect.w - clampedRadius, rect.y + rect.h}, color, {1, 1} }; //BR
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x + clampedRadius, rect.y + rect.h}, color, {0, 1} }; //BL
+
+    indices[indexCount++] = 2;
+    indices[indexCount++] = vertexCount - 2; //BR
+    indices[indexCount++] = vertexCount - 1; //BL
+    indices[indexCount++] = 3;
+    indices[indexCount++] = 2;
+    indices[indexCount++] = vertexCount - 1; //BL
+    // Left edge
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x, rect.y + rect.h - clampedRadius}, color, {0, 1} }; //LB
+    vertices[vertexCount++] = (SDL_Vertex){ {rect.x, rect.y + clampedRadius}, color, {0, 0} }; //LT
+
+    indices[indexCount++] = 3;
+    indices[indexCount++] = vertexCount - 2; //LB
+    indices[indexCount++] = vertexCount - 1; //LT
+    indices[indexCount++] = 0;
+    indices[indexCount++] = 3;
+    indices[indexCount++] = vertexCount - 1; //LT
+
+    // Render everything
+    SDL_RenderGeometry(renderer, NULL, vertices, vertexCount, indices, indexCount);
+}
+
 SDL_Rect currentClippingRectangle;
 
 static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray renderCommands, SDL2_Font *fonts)
@@ -53,7 +161,12 @@ static void Clay_SDL2_Render(SDL_Renderer *renderer, Clay_RenderCommandArray ren
                         .w = boundingBox.width,
                         .h = boundingBox.height,
                 };
-                SDL_RenderFillRectF(renderer, &rect);
+                if (config->cornerRadius.topLeft > 0) {
+                    SDL_RenderFillRoundedRect(renderer, rect, config->cornerRadius.topLeft, color);
+                }
+                else {
+                    SDL_RenderFillRectF(renderer, &rect);
+                }
                 break;
             }
             case CLAY_RENDER_COMMAND_TYPE_TEXT: {