Merge 63a74a92a8 into 6d23a35d15

README.md

@@ -808,7 +808,7 @@ Clay_TextElementConfig {
 
 `CLAY_TEXT_CONFIG(.textColor = {120, 120, 120, 255})`
 
-Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
+Uses [Clay_Color](#clay_color). Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
 
 ---
 
@@ -990,28 +990,95 @@ typedef struct {
     Clay_CustomElementConfig custom;
     Clay_ScrollElementConfig scroll;
     Clay_BorderElementConfig border;
-    uintptr_t userData;
+    void *userData;
 } Clay_ElementDeclaration;
 ```
 
 **Fields**
 
-**`.color`** - `Clay_Color`
+**`.id`** - `Clay_ElementID`
 
-`.backgroundColor = {120, 120, 120, 255} })`
+`CLAY({ .id = CLAY_ID("FileButton") })`
 
-Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
+Uses [Clay_ElementId](#clay_elementid). Tags the element with an ID that can be later used to query data about the element, and gives it a human readable name in the debug tools.
+IDs are typically generated using the [CLAY_ID](#clay_id), [CLAY_IDI](#clay_idi), [CLAY_ID_LOCAL](#clay_id_local) and [CLAY_IDI_LOCAL](#clay_idi_local) macros.
+
+---
+
+**`.layout`** - `Clay_LayoutConfig`
+
+`CLAY({ .layout = { .padding = { 16, 16, 12, 12 }, .layoutDirection = CLAY_TOP_TO_BOTTOM } })`
+
+Uses [Clay_LayoutConfig](#clay_layoutconfig). Controls various settings related to _layout_, which can be thought of as "the size and position of this element and its children".
+
+---
+
+**`.backgroundColor`** - `Clay_Color`
+
+`CLAY({ .backgroundColor = {120, 120, 120, 255} } })`
+
+Uses [Clay_Color](#clay_color). Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
 
 ---
 
 **`.cornerRadius`** - `float`
 
-`CLAY_RECTANGLE({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 })`
+`CLAY({ .cornerRadius = { .topLeft = 16, .topRight = 16, .bottomLeft = 16, .bottomRight = 16 } })`
 
 Defines the radius in pixels for the arc of rectangle corners (`0` is square, `rectangle.width / 2` is circular).
 
 Note that the `CLAY_CORNER_RADIUS(radius)` function-like macro is available to provide short hand for setting all four corner radii to the same value. e.g. `CLAY_BORDER({ .cornerRadius = CLAY_CORNER_RADIUS(10) })`
 
+---
+
+**`.image`** - `Clay_ImageElementConfig`
+
+`CLAY({ .image = { .imageData = &myImage, .sourceDimensions = { 640, 480 } } })`
+
+Uses [Clay_ImageElementConfig](#clay_imageelementconfig). Configures the element as an image element. Causes a render command with type `IMAGE` to be emitted.
+
+---
+
+**`.floating`** - `Clay_FloatingElementConfig`
+
+`CLAY({ .floating = { .attachTo = CLAY_ATTACH_TO_PARENT } })`
+
+Uses [Clay_FloatingElementConfig](#clay_floatingelementconfig). Configures the element as an floating element, which allows it to stack "in front" and "on top" of other elements without affecting sibling or parent size or position. 
+
+---
+
+**`.custom`** - `Clay_CustomElementConfig`
+
+`CLAY({ .custom = { .customData = &my3DModel } })`
+
+Uses [Clay_CustomElementConfig](#clay_customelementconfig). Configures the element as a custom element, which allows you to pass custom data through to the renderer. Causes a render command with type `CUSTOM` to be emitted.
+
+---
+
+**`.scroll`** - `Clay_ScrollElementConfig`
+
+`CLAY({ .scroll = { .vertical = true } })`
+
+Uses [Clay_ScrollElementConfig](#clay_scrollelementconfig). Configures the element as a scroll element, which causes child elements to be clipped / masked if they overflow, and together with [Clay_UpdateScrollContainer](#clay_updatescrollcontainers) enables scrolling of child contents.
+
+---
+
+**`.border`** - `Clay_BorderElementConfig`
+
+`CLAY({ .border = { .width = { .left = 5 }, .color = COLOR_BLUE } })`
+
+Uses [Clay_BorderElementConfig](#clay_borderelementconfig). Configures the element as a border element, which instructs the renderer to draw coloured border lines along the perimeter of this element's bounding box. Causes a render command with type `BORDER` to be emitted.
+
+---
+
+**`.userData`** - `void *`
+
+`CLAY({ .userData = &extraData })`
+
+Transparently passes a pointer through to the corresponding [Clay_RenderCommands](#clay_rendercommand)s generated by this element.
+
+---
+
 **Examples**
 
 ```C
@@ -1285,6 +1352,14 @@ typedef struct Clay_BorderElementConfig
 
 **Fields**
 
+**`.color`** - `Clay_Color`
+
+`CLAY({ .border = { .color = { 255, 0, 0, 255 } } })`
+
+Uses [Clay_Color](#clay_color). Specifies the shared color for all borders configured by this element. Conventionally accepts `rgba` float values between 0 and 255, but interpretation is left up to the renderer and does not affect layout.
+
+---
+
 **`.width`** - `Clay_BorderWidth`
 
 `CLAY({ .border = { .width = { .left = 2, .right = 10 } } })`
@@ -1303,12 +1378,6 @@ Configures the width and color of borders to be drawn between children. These bo
 
 ---
 
-**`.color`** - `Clay_Color`
-
-`CLAY({ .border = { .color = { 255, 0, 0, 255 } } })`
-
-Defines the radius in pixels for the arc of border corners (`0` is square, `rectangle.width / 2` is circular). It is up to the renderer to decide how to interpolate between differing border widths and colors across shared corners.
-
 **Examples**
 
 ```C
@@ -1657,6 +1726,17 @@ switch (renderCommand->commandType) {
 
 Element is subject to [culling](#visibility-culling). Otherwise, a single `Clay_RenderCommand` with `commandType = CLAY_RENDER_COMMAND_TYPE_CUSTOM` will be created.
 
+### Clay_Color
+
+```C
+typedef struct {
+    float r, g, b, a;
+} Clay_Color;
+```
+
+`Clay_Color` is an RGBA color struct used in Clay's declarations and rendering. By convention the channels are represented as 0-255, but this is left up to the renderer.
+Note: when using the debug tools, their internal colors are represented as 0-255.
+
 ### Clay_String
 
 ```C

bindings/csharp/README

@@ -0,0 +1 @@
+https://github.com/Orcolom/clay-cs

bindings/odin/clay-odin/clay.odin

@@ -96,6 +96,12 @@ TextWrapMode :: enum EnumBackingType {
     None,
 }
 
+TextAlignment :: enum EnumBackingType {
+    Left,
+    Center,
+    Right,
+}
+
 TextElementConfig :: struct {
     textColor:          Color,
     fontId:             u16,
@@ -103,6 +109,7 @@ TextElementConfig :: struct {
     letterSpacing:      u16,
     lineHeight:         u16,
     wrapMode:           TextWrapMode,
+    textAlignment:      TextAlignment,
     hashStringContents: bool,
 }
 
@@ -317,7 +324,7 @@ ElementDeclaration :: struct {
     userData: rawptr
 }
 
-ErrorType :: enum {
+ErrorType :: enum EnumBackingType {
     TextMeasurementFunctionNotProvided,
     ArenaCapacityExceeded,
     ElementsCapacityExceeded,

examples/clay-official-website/build/clay/index.html

@@ -86,6 +86,10 @@
     ];
     let elementCache = {};
     let imageCache = {};
+    let dimensionsDefinition = { type: 'struct', members: [
+        {name: 'width', type: 'float'},
+        {name: 'height', type: 'float'},
+    ]};
     let colorDefinition = { type: 'struct', members: [
         {name: 'r', type: 'float' },
         {name: 'g', type: 'float' },
@@ -101,9 +105,12 @@
         {name: 'chars', type: 'uint32_t' },
         {name: 'baseChars', type: 'uint32_t' },
     ]};
-    let borderDefinition = { type: 'struct', members: [
-        {name: 'width', type: 'uint32_t'},
-        {name: 'color', ...colorDefinition},
+    let borderWidthDefinition = { type: 'struct', members: [
+        {name: 'left', type: 'uint16_t'},
+        {name: 'right', type: 'uint16_t'},
+        {name: 'top', type: 'uint16_t'},
+        {name: 'bottom', type: 'uint16_t'},
+        {name: 'betweenChildren', type: 'uint16_t'},
     ]};
     let cornerRadiusDefinition = { type: 'struct', members: [
         {name: 'topLeft', type: 'float'},
@@ -111,44 +118,53 @@
         {name: 'bottomLeft', type: 'float'},
         {name: 'bottomRight', type: 'float'},
     ]};
-    let rectangleConfigDefinition = { name: 'rectangle', type: 'struct', members: [
-        { name: 'color', ...colorDefinition },
-        { name: 'link', ...stringDefinition },
-        { name: 'cursorPointer', type: 'uint8_t' },
-    ]};
-    let borderConfigDefinition = { name: 'text', type: 'struct', members: [
-        { name: 'left', ...borderDefinition },
-        { name: 'right', ...borderDefinition },
-        { name: 'top', ...borderDefinition },
-        { name: 'bottom', ...borderDefinition },
-        { name: 'betweenChildren', ...borderDefinition },
-    ]};
     let textConfigDefinition = { name: 'text', type: 'struct', members: [
         { name: 'textColor', ...colorDefinition },
         { name: 'fontId', type: 'uint16_t' },
         { name: 'fontSize', type: 'uint16_t' },
         { name: 'letterSpacing', type: 'uint16_t' },
         { name: 'lineSpacing', type: 'uint16_t' },
-       { name: 'wrapMode', type: 'uint32_t' },
-       { name: 'disablePointerEvents', type: 'uint8_t' }
+        { name: 'wrapMode', type: 'uint8_t' },
+        { name: 'disablePointerEvents', type: 'uint8_t' },
+        { name: '_padding', type: 'uint16_t' },
     ]};
-    let scrollConfigDefinition = { name: 'text', type: 'struct', members: [
+    let textRenderDataDefinition = { type: 'struct', members: [
+        { name: 'stringContents', ...stringSliceDefinition },
+        { name: 'textColor', ...colorDefinition },
+        { name: 'fontId', type: 'uint16_t' },
+        { name: 'fontSize', type: 'uint16_t' },
+        { name: 'letterSpacing', type: 'uint16_t' },
+        { name: 'lineHeight', type: 'uint16_t' },
+    ]};
+    let rectangleRenderDataDefinition = { type: 'struct', members: [
+        { name: 'backgroundColor', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+    ]};
+    let imageRenderDataDefinition = { type: 'struct', members: [
+        { name: 'backgroundColor', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+        { name: 'sourceDimensions', ...dimensionsDefinition },
+        { name: 'imageData', type: 'uint32_t' },
+    ]};
+    let customRenderDataDefinition = { type: 'struct', members: [
+        { name: 'backgroundColor', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+        { name: 'customData', type: 'uint32_t' },
+    ]};
+    let borderRenderDataDefinition = { type: 'struct', members: [
+        { name: 'color', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+        { name: 'width', ...borderWidthDefinition },
+        { name: 'padding', type: 'uint16_t'}
+    ]};
+    let scrollRenderDataDefinition = { type: 'struct', members: [
         { name: 'horizontal', type: 'bool' },
         { name: 'vertical', type: 'bool' },
     ]};
-    let imageConfigDefinition = { name: 'image', type: 'struct', members: [
-        { name: 'imageData', type: 'uint32_t' },
-        { name: 'sourceDimensions', type: 'struct', members: [
-            { name: 'width', type: 'float' },
-            { name: 'height', type: 'float' },
-        ]},
-        { name: 'sourceURL', ...stringDefinition }
-    ]};
-    let customConfigDefinition = { name: 'custom', type: 'struct', members: [
-        { name: 'customData', type: 'uint32_t' },
-    ]}
-    let sharedConfigDefinition = { name: 'shared', type: 'struct', members: [
-        { name: 'cornerRadius', ...cornerRadiusDefinition },
+    let customHTMLDataDefinition = { type: 'struct', members: [
+        { name: 'link', ...stringDefinition },
+        { name: 'cursorPointer', type: 'uint8_t' },
+        { name: 'disablePointerEvents', type: 'uint8_t' },
     ]};
     let renderCommandDefinition = {
         name: 'CLay_RenderCommand',
@@ -160,14 +176,19 @@
                 { name: 'width', type: 'float' },
                 { name: 'height', type: 'float' },
             ]},
-            { name: 'config', type: 'uint32_t'},
-            { name: 'textOrSharedConfig', type: 'union', members: [
-                { name: 'text', ...stringSliceDefinition },
-                { name: 'sharedConfig', type: 'uint32_t' }
+            { name: 'renderData', type: 'union', members: [
+                { name: 'rectangle', ...rectangleRenderDataDefinition },
+                { name: 'text', ...textRenderDataDefinition },
+                { name: 'image', ...imageRenderDataDefinition },
+                { name: 'custom', ...customRenderDataDefinition },
+                { name: 'border', ...borderRenderDataDefinition },
+                { name: 'scroll', ...scrollRenderDataDefinition },
             ]},
-            { name: 'zIndex', type: 'int32_t' },
+            { name: 'userData', type: 'uint32_t'},
             { name: 'id', type: 'uint32_t' },
-            { name: 'commandType', type: 'uint32_t', },
+            { name: 'zIndex', type: 'int16_t' },
+            { name: 'commandType', type: 'uint8_t' },
+            { name: '_padding', type: 'uint8_t' },
         ]
     };
 
@@ -190,6 +211,7 @@
             case 'uint32_t': return 4;
             case 'int32_t': return 4;
             case 'uint16_t': return 2;
+            case 'int16_t': return 2;
             case 'uint8_t': return 1;
             case 'bool': return 1;
             default: {
@@ -219,6 +241,7 @@
             case 'uint32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
             case 'int32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
             case 'uint16_t': return { value: memoryDataView.getUint16(address, true), __size: 2 };
+            case 'int16_t': return { value: memoryDataView.getInt16(address, true), __size: 2 };
             case 'uint8_t': return { value: memoryDataView.getUint8(address, true), __size: 1 };
             case 'bool': return { value: memoryDataView.getUint8(address, true), __size: 1 };
             default: {
@@ -340,7 +363,7 @@
                         memoryDataView.setFloat32(addressOfOffset, -container.scrollLeft, true);
                         memoryDataView.setFloat32(addressOfOffset + 4, -container.scrollTop, true);
                     }
-                }
+                },
             },
         };
         const { instance } = await WebAssembly.instantiateStreaming(
@@ -348,13 +371,15 @@
         );
         memoryDataView = new DataView(new Uint8Array(instance.exports.memory.buffer).buffer);
         scratchSpaceAddress = instance.exports.__heap_base.value;
-        heapSpaceAddress = instance.exports.__heap_base.value + 1024;
+        let clayScratchSpaceAddress = instance.exports.__heap_base.value + 1024;
+        heapSpaceAddress = instance.exports.__heap_base.value + 2048;
         let arenaAddress = scratchSpaceAddress + 8;
         window.instance = instance;
         createMainArena(arenaAddress, heapSpaceAddress);
         memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true);
         memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true);
         instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value);
+        instance.exports.SetScratchMemory(arenaAddress, clayScratchSpaceAddress);
         renderCommandSize = getStructTotalSize(renderCommandDefinition);
         renderLoop();
     }
@@ -368,6 +393,22 @@
         return false;
     }
 
+    function SetElementBackgroundColorAndRadius(element, cornerRadius, backgroundColor) {
+        element.style.backgroundColor = `rgba(${backgroundColor.r.value}, ${backgroundColor.g.value}, ${backgroundColor.b.value}, ${backgroundColor.a.value / 255})`;
+        if (cornerRadius.topLeft.value > 0) {
+            element.style.borderTopLeftRadius = cornerRadius.topLeft.value + 'px';
+        }
+        if (cornerRadius.topRight.value > 0) {
+            element.style.borderTopRightRadius = cornerRadius.topRight.value + 'px';
+        }
+        if (cornerRadius.bottomLeft.value > 0) {
+            element.style.borderBottomLeftRadius = cornerRadius.bottomLeft.value + 'px';
+        }
+        if (cornerRadius.bottomRight.value > 0) {
+            element.style.borderBottomRightRadius = cornerRadius.bottomRight.value + 'px';
+        }
+    }
+
     function renderLoopHTML() {
         let capacity = memoryDataView.getInt32(scratchSpaceAddress, true);
         let length = memoryDataView.getInt32(scratchSpaceAddress + 4, true);
@@ -375,7 +416,7 @@
         let scissorStack = [{ nextAllocation: { x: 0, y: 0 }, element: htmlRoot, nextElementIndex: 0 }];
         let previousId = 0;
         for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
-            let entireRenderCommandMemory = new Uint32Array(memoryDataView.buffer.slice(arrayOffset, arrayOffset + renderCommandSize));
+            let entireRenderCommandMemory = new Uint8Array(memoryDataView.buffer.slice(arrayOffset, arrayOffset + renderCommandSize));
             let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
             let parentElement = scissorStack[scissorStack.length - 1];
             let element = null;
@@ -384,13 +425,12 @@
                 let elementType = 'div';
                 switch (renderCommand.commandType.value & 0xff) {
                     case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
-                        if (readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition).link.length.value > 0) {
-                            elementType = 'a';
-                        }
+                        // if (readStructAtAddress(renderCommand.renderData.rectangle.value, rectangleRenderDataDefinition).link.length.value > 0) { TODO reimplement links
+                        //     elementType = 'a';
+                        // }
                         break;
                     }
                     case CLAY_RENDER_COMMAND_TYPE_IMAGE: {
-                        console.log('test5');
                         elementType = 'img'; break;
                     }
                     default: break;
@@ -443,93 +483,82 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_RECTANGLE): {
-                    let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
-                    let sharedConfig = readStructAtAddress( renderCommand.textOrSharedConfig.sharedConfig.value, sharedConfigDefinition);
-                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
-                    let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
+                    let config = renderCommand.renderData.rectangle;
+                    let configMemory = JSON.stringify(config);
+                    if (configMemory === elementData.previousMemoryConfig) {
+                        break;
+                    }
+
+                    SetElementBackgroundColorAndRadius(element, config.cornerRadius, config.backgroundColor);
+                    if (renderCommand.userData.value !== 0) {
+                        let customData = readStructAtAddress(renderCommand.userData.value, customHTMLDataDefinition);
+
+                        let linkContents = customData.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(customData.link.chars.value, customData.link.chars.value + customData.link.length.value))) : 0;
                         memoryDataView.setUint32(0, renderCommand.id.value, true);
                         if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
                             window.location.href = linkContents;
                         }
-                    if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
-                        break;
-                    }
                         if (linkContents.length > 0) {
                             element.href = linkContents;
                         }
 
-                    if (linkContents.length > 0 || config.cursorPointer.value) {
+                        if (linkContents.length > 0 || customData.cursorPointer.value) {
                             element.style.pointerEvents = 'all';
                             element.style.cursor = 'pointer';
                         }
+                    }
+
                     elementData.previousMemoryConfig = configMemory;
-                    let color = config.color;
-                    element.style.backgroundColor = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
-                    if (sharedConfig.cornerRadius.topLeft.value > 0) {
-                        element.style.borderTopLeftRadius = sharedConfig.cornerRadius.topLeft.value + 'px';
-                    }
-                    if (sharedConfig.cornerRadius.topRight.value > 0) {
-                        element.style.borderTopRightRadius = sharedConfig.cornerRadius.topRight.value + 'px';
-                    }
-                    if (sharedConfig.cornerRadius.bottomLeft.value > 0) {
-                        element.style.borderBottomLeftRadius = sharedConfig.cornerRadius.bottomLeft.value + 'px';
-                    }
-                    if (sharedConfig.cornerRadius.bottomRight.value > 0) {
-                        element.style.borderBottomRightRadius = sharedConfig.cornerRadius.bottomRight.value + 'px';
-                    }
+
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_BORDER): {
-                    let config = readStructAtAddress(renderCommand.config.value, borderConfigDefinition);
-                    let sharedConfig = readStructAtAddress( renderCommand.textOrSharedConfig.sharedConfig.value, sharedConfigDefinition);
-                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
-                    if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                    let config = renderCommand.renderData.border;
+                    let configMemory = JSON.stringify(config);
+                    if (configMemory === elementData.previousMemoryConfig) {
                         break;
                     }
+                    let color = config.color;
                     elementData.previousMemoryConfig = configMemory;
-                    if (config.left.width.value > 0) {
-                        let color = config.left.color;
-                        element.style.borderLeft = `${config.left.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.left.value > 0) {
+                        element.style.borderLeft = `${config.width.left.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (config.right.width.value > 0) {
-                        let color = config.right.color;
-                        element.style.borderRight = `${config.right.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.right.value > 0) {
+                        element.style.borderRight = `${config.width.right.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (config.top.width.value > 0) {
-                        let color = config.top.color;
-                        element.style.borderTop = `${config.top.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.top.value > 0) {
+                        element.style.borderTop = `${config.width.top.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (config.bottom.width.value > 0) {
-                        let color = config.bottom.color;
-                        element.style.borderBottom = `${config.bottom.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.bottom.value > 0) {
+                        element.style.borderBottom = `${config.width.bottom.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (sharedConfig.cornerRadius.topLeft.value > 0) {
-                        element.style.borderTopLeftRadius = sharedConfig.cornerRadius.topLeft.value + 'px';
+                    if (config.cornerRadius.topLeft.value > 0) {
+                        element.style.borderTopLeftRadius = config.cornerRadius.topLeft.value + 'px';
                     }
-                    if (sharedConfig.cornerRadius.topRight.value > 0) {
-                        element.style.borderTopRightRadius = sharedConfig.cornerRadius.topRight.value + 'px';
+                    if (config.cornerRadius.topRight.value > 0) {
+                        element.style.borderTopRightRadius = config.cornerRadius.topRight.value + 'px';
                     }
-                    if (sharedConfig.cornerRadius.bottomLeft.value > 0) {
-                        element.style.borderBottomLeftRadius = sharedConfig.cornerRadius.bottomLeft.value + 'px';
+                    if (config.cornerRadius.bottomLeft.value > 0) {
+                        element.style.borderBottomLeftRadius = config.cornerRadius.bottomLeft.value + 'px';
                     }
-                    if (sharedConfig.cornerRadius.bottomRight.value > 0) {
-                        element.style.borderBottomRightRadius = sharedConfig.cornerRadius.bottomRight.value + 'px';
+                    if (config.cornerRadius.bottomRight.value > 0) {
+                        element.style.borderBottomRightRadius = config.cornerRadius.bottomRight.value + 'px';
                     }
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_TEXT): {
-                    let config = readStructAtAddress(renderCommand.config.value, textConfigDefinition);
-                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
-                    let textContents = renderCommand.textOrSharedConfig.text;
-                    let stringContents = new Uint8Array(memoryDataView.buffer.slice(textContents.chars.value, textContents.chars.value + textContents.length.value));
-                    if (MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                    let config = renderCommand.renderData.text;
+                    let customData = readStructAtAddress(renderCommand.userData.value, customHTMLDataDefinition);
+                    let configMemory = JSON.stringify(config);
+                    let stringContents = new Uint8Array(memoryDataView.buffer.slice(config.stringContents.chars.value, config.stringContents.chars.value + config.stringContents.length.value));
+                    if (configMemory !== elementData.previousMemoryConfig) {
                         element.className = 'text';
                         let textColor = config.textColor;
                         let fontSize = Math.round(config.fontSize.value * GLOBAL_FONT_SCALING_FACTOR);
                         element.style.color = `rgba(${textColor.r.value}, ${textColor.g.value}, ${textColor.b.value}, ${textColor.a.value})`;
                         element.style.fontFamily = fontsById[config.fontId.value];
                         element.style.fontSize = fontSize + 'px';
-                        element.style.pointerEvents = config.disablePointerEvents.value ? 'none' : 'all';
+                        element.style.pointerEvents = customData.disablePointerEvents.value ? 'none' : 'all';
                         elementData.previousMemoryConfig = configMemory;
                     }
                     if (stringContents.length !== elementData.previousMemoryText.length || MemoryIsDifferent(stringContents, elementData.previousMemoryText, stringContents.length)) {
@@ -540,7 +569,11 @@
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
                     scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 });
-                    let config = readStructAtAddress(renderCommand.config.value, scrollConfigDefinition);
+                    let config = renderCommand.renderData.scroll;
+                    let configMemory = JSON.stringify(config);
+                    if (configMemory === elementData.previousMemoryConfig) {
+                        break;
+                    }
                     if (config.horizontal.value) {
                         element.style.overflowX = 'scroll';
                         element.style.pointerEvents = 'auto';
@@ -549,6 +582,7 @@
                         element.style.overflowY = 'scroll';
                         element.style.pointerEvents = 'auto';
                     }
+                    elementData.previousMemoryConfig = configMemory;
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
@@ -556,9 +590,9 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
-                    console.log('test1');
-                    let config = readStructAtAddress(renderCommand.config.value, imageConfigDefinition);
-                    let srcContents = new Uint8Array(memoryDataView.buffer.slice(config.sourceURL.chars.value, config.sourceURL.chars.value + config.sourceURL.length.value));
+                    let config = renderCommand.renderData.image;
+                    let imageURL = readStructAtAddress(config.imageData.value, stringDefinition);
+                    let srcContents = new Uint8Array(memoryDataView.buffer.slice(imageURL.chars.value, imageURL.chars.value + imageURL.length.value));
                     if (srcContents.length !== elementData.previousMemoryText.length || MemoryIsDifferent(srcContents, elementData.previousMemoryText, srcContents.length)) {
                         element.src = textDecoder.decode(srcContents);
                     }
@@ -566,6 +600,9 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_CUSTOM): break;
+                default: {
+                    console.log("Error: unhandled render command");
+                }
             }
         }
 
@@ -602,8 +639,8 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_RECTANGLE): {
-                    let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
-                    let color = config.color;
+                    let config = renderCommand.renderData.rectangle;
+                    let color = config.backgroundColor;
                     ctx.beginPath();
                     window.canvasContext.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                     window.canvasContext.roundRect(
@@ -615,33 +652,35 @@
                     ctx.fill();
                     ctx.closePath();
                     // Handle link clicks
-                    let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
+                    if (renderCommand.userData.value !== 0) {
+                        let customData = readStructAtAddress(renderCommand.userData.value, customHTMLDataDefinition);
+                        let linkContents = customData.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(customData.link.chars.value, customData.link.chars.value + customData.link.length.value))) : 0;
                         memoryDataView.setUint32(0, renderCommand.id.value, true);
                         if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
                             window.location.href = linkContents;
                         }
+                    }
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_BORDER): {
-                    let config = readStructAtAddress(renderCommand.config.value, borderConfigDefinition);
+                    let config = renderCommand.renderData.border;
+                    let color = config.color;
                     ctx.beginPath();
                     ctx.moveTo(boundingBox.x.value * scale, boundingBox.y.value * scale);
                     // Top Left Corner
                     if (config.cornerRadius.topLeft.value > 0) {
-                        let lineWidth = config.top.width.value;
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale);
-                        let color = config.top.color;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                         ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, config.cornerRadius.topLeft.value * scale);
                         ctx.stroke();
                     }
                     // Top border
-                    if (config.top.width.value > 0) {
-                        let lineWidth = config.top.width.value;
+                    if (config.width.top.value > 0) {
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
-                        let color = config.top.color;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                         ctx.moveTo((boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
@@ -650,19 +689,17 @@
                     }
                     // Top Right Corner
                     if (config.cornerRadius.topRight.value > 0) {
-                        let lineWidth = config.top.width.value;
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
-                        let color = config.top.color;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                         ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale, config.cornerRadius.topRight.value * scale);
                         ctx.stroke();
                     }
                     // Right border
-                    if (config.right.width.value > 0) {
-                        let color = config.right.color;
-                        let lineWidth = config.right.width.value;
+                    if (config.width.right.value > 0) {
+                        let lineWidth = config.width.right.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
@@ -672,8 +709,7 @@
                     }
                     // Bottom Right Corner
                     if (config.cornerRadius.bottomRight.value > 0) {
-                        let color = config.top.color;
-                        let lineWidth = config.top.width.value;
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale);
                         ctx.lineWidth = lineWidth * scale;
@@ -682,9 +718,8 @@
                         ctx.stroke();
                     }
                     // Bottom Border
-                    if (config.bottom.width.value > 0) {
-                        let color = config.bottom.color;
-                        let lineWidth = config.bottom.width.value;
+                    if (config.width.bottom.value > 0) {
+                        let lineWidth = config.width.bottom.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
@@ -694,8 +729,7 @@
                     }
                     // Bottom Left Corner
                     if (config.cornerRadius.bottomLeft.value > 0) {
-                        let color = config.bottom.color;
-                        let lineWidth = config.bottom.width.value;
+                        let lineWidth = config.width.bottom.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
                         ctx.lineWidth = lineWidth * scale;
@@ -704,9 +738,8 @@
                         ctx.stroke();
                     }
                     // Left Border
-                    if (config.left.width.value > 0) {
-                        let color = config.left.color;
-                        let lineWidth = config.left.width.value;
+                    if (config.width.left.value > 0) {
+                        let lineWidth = config.width.left.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
@@ -718,8 +751,8 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_TEXT): {
-                    let config = readStructAtAddress(renderCommand.config.value, textConfigDefinition);
-                    let textContents = renderCommand.text;
+                    let config = renderCommand.renderData.text;
+                    let textContents = config.stringContents;
                     let stringContents = new Uint8Array(memoryDataView.buffer.slice(textContents.chars.value, textContents.chars.value + textContents.length.value));
                     let fontSize = config.fontSize.value * GLOBAL_FONT_SCALING_FACTOR * scale;
                     ctx.font = `${fontSize}px ${fontsById[config.fontId.value]}`;
@@ -742,8 +775,9 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
-                    let config = readStructAtAddress(renderCommand.config.value, imageConfigDefinition);
-                    let src = textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.sourceURL.chars.value, config.sourceURL.chars.value + config.sourceURL.length.value)));
+                    let config = renderCommand.renderData.image;
+                    let imageURL = readStructAtAddress(config.imageData.value, stringDefinition);
+                    let src = textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(imageURL.chars.value, imageURL.chars.value + imageURL.length.value)));
                     if (!imageCache[src]) {
                         imageCache[src] = {
                             image: new Image(),

examples/clay-official-website/index.html

@@ -86,6 +86,10 @@
     ];
     let elementCache = {};
     let imageCache = {};
+    let dimensionsDefinition = { type: 'struct', members: [
+        {name: 'width', type: 'float'},
+        {name: 'height', type: 'float'},
+    ]};
     let colorDefinition = { type: 'struct', members: [
         {name: 'r', type: 'float' },
         {name: 'g', type: 'float' },
@@ -101,9 +105,12 @@
         {name: 'chars', type: 'uint32_t' },
         {name: 'baseChars', type: 'uint32_t' },
     ]};
-    let borderDefinition = { type: 'struct', members: [
-        {name: 'width', type: 'uint32_t'},
-        {name: 'color', ...colorDefinition},
+    let borderWidthDefinition = { type: 'struct', members: [
+        {name: 'left', type: 'uint16_t'},
+        {name: 'right', type: 'uint16_t'},
+        {name: 'top', type: 'uint16_t'},
+        {name: 'bottom', type: 'uint16_t'},
+        {name: 'betweenChildren', type: 'uint16_t'},
     ]};
     let cornerRadiusDefinition = { type: 'struct', members: [
         {name: 'topLeft', type: 'float'},
@@ -111,44 +118,53 @@
         {name: 'bottomLeft', type: 'float'},
         {name: 'bottomRight', type: 'float'},
     ]};
-    let rectangleConfigDefinition = { name: 'rectangle', type: 'struct', members: [
-        { name: 'color', ...colorDefinition },
-        { name: 'link', ...stringDefinition },
-        { name: 'cursorPointer', type: 'uint8_t' },
-    ]};
-    let borderConfigDefinition = { name: 'text', type: 'struct', members: [
-        { name: 'left', ...borderDefinition },
-        { name: 'right', ...borderDefinition },
-        { name: 'top', ...borderDefinition },
-        { name: 'bottom', ...borderDefinition },
-        { name: 'betweenChildren', ...borderDefinition },
-    ]};
     let textConfigDefinition = { name: 'text', type: 'struct', members: [
         { name: 'textColor', ...colorDefinition },
         { name: 'fontId', type: 'uint16_t' },
         { name: 'fontSize', type: 'uint16_t' },
         { name: 'letterSpacing', type: 'uint16_t' },
         { name: 'lineSpacing', type: 'uint16_t' },
-       { name: 'wrapMode', type: 'uint32_t' },
-       { name: 'disablePointerEvents', type: 'uint8_t' }
+        { name: 'wrapMode', type: 'uint8_t' },
+        { name: 'disablePointerEvents', type: 'uint8_t' },
+        { name: '_padding', type: 'uint16_t' },
     ]};
-    let scrollConfigDefinition = { name: 'text', type: 'struct', members: [
+    let textRenderDataDefinition = { type: 'struct', members: [
+        { name: 'stringContents', ...stringSliceDefinition },
+        { name: 'textColor', ...colorDefinition },
+        { name: 'fontId', type: 'uint16_t' },
+        { name: 'fontSize', type: 'uint16_t' },
+        { name: 'letterSpacing', type: 'uint16_t' },
+        { name: 'lineHeight', type: 'uint16_t' },
+    ]};
+    let rectangleRenderDataDefinition = { type: 'struct', members: [
+        { name: 'backgroundColor', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+    ]};
+    let imageRenderDataDefinition = { type: 'struct', members: [
+        { name: 'backgroundColor', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+        { name: 'sourceDimensions', ...dimensionsDefinition },
+        { name: 'imageData', type: 'uint32_t' },
+    ]};
+    let customRenderDataDefinition = { type: 'struct', members: [
+        { name: 'backgroundColor', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+        { name: 'customData', type: 'uint32_t' },
+    ]};
+    let borderRenderDataDefinition = { type: 'struct', members: [
+        { name: 'color', ...colorDefinition },
+        { name: 'cornerRadius', ...cornerRadiusDefinition },
+        { name: 'width', ...borderWidthDefinition },
+        { name: 'padding', type: 'uint16_t'}
+    ]};
+    let scrollRenderDataDefinition = { type: 'struct', members: [
         { name: 'horizontal', type: 'bool' },
         { name: 'vertical', type: 'bool' },
     ]};
-    let imageConfigDefinition = { name: 'image', type: 'struct', members: [
-        { name: 'imageData', type: 'uint32_t' },
-        { name: 'sourceDimensions', type: 'struct', members: [
-            { name: 'width', type: 'float' },
-            { name: 'height', type: 'float' },
-        ]},
-        { name: 'sourceURL', ...stringDefinition }
-    ]};
-    let customConfigDefinition = { name: 'custom', type: 'struct', members: [
-        { name: 'customData', type: 'uint32_t' },
-    ]}
-    let sharedConfigDefinition = { name: 'shared', type: 'struct', members: [
-        { name: 'cornerRadius', ...cornerRadiusDefinition },
+    let customHTMLDataDefinition = { type: 'struct', members: [
+        { name: 'link', ...stringDefinition },
+        { name: 'cursorPointer', type: 'uint8_t' },
+        { name: 'disablePointerEvents', type: 'uint8_t' },
     ]};
     let renderCommandDefinition = {
         name: 'CLay_RenderCommand',
@@ -160,14 +176,19 @@
                 { name: 'width', type: 'float' },
                 { name: 'height', type: 'float' },
             ]},
-            { name: 'config', type: 'uint32_t'},
-            { name: 'textOrSharedConfig', type: 'union', members: [
-                { name: 'text', ...stringSliceDefinition },
-                { name: 'sharedConfig', type: 'uint32_t' }
+            { name: 'renderData', type: 'union', members: [
+                { name: 'rectangle', ...rectangleRenderDataDefinition },
+                { name: 'text', ...textRenderDataDefinition },
+                { name: 'image', ...imageRenderDataDefinition },
+                { name: 'custom', ...customRenderDataDefinition },
+                { name: 'border', ...borderRenderDataDefinition },
+                { name: 'scroll', ...scrollRenderDataDefinition },
             ]},
-            { name: 'zIndex', type: 'int32_t' },
+            { name: 'userData', type: 'uint32_t'},
             { name: 'id', type: 'uint32_t' },
-            { name: 'commandType', type: 'uint32_t', },
+            { name: 'zIndex', type: 'int16_t' },
+            { name: 'commandType', type: 'uint8_t' },
+            { name: '_padding', type: 'uint8_t' },
         ]
     };
 
@@ -190,6 +211,7 @@
             case 'uint32_t': return 4;
             case 'int32_t': return 4;
             case 'uint16_t': return 2;
+            case 'int16_t': return 2;
             case 'uint8_t': return 1;
             case 'bool': return 1;
             default: {
@@ -219,6 +241,7 @@
             case 'uint32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
             case 'int32_t': return { value: memoryDataView.getUint32(address, true), __size: 4 };
             case 'uint16_t': return { value: memoryDataView.getUint16(address, true), __size: 2 };
+            case 'int16_t': return { value: memoryDataView.getInt16(address, true), __size: 2 };
             case 'uint8_t': return { value: memoryDataView.getUint8(address, true), __size: 1 };
             case 'bool': return { value: memoryDataView.getUint8(address, true), __size: 1 };
             default: {
@@ -340,7 +363,7 @@
                         memoryDataView.setFloat32(addressOfOffset, -container.scrollLeft, true);
                         memoryDataView.setFloat32(addressOfOffset + 4, -container.scrollTop, true);
                     }
-                }
+                },
             },
         };
         const { instance } = await WebAssembly.instantiateStreaming(
@@ -348,13 +371,15 @@
         );
         memoryDataView = new DataView(new Uint8Array(instance.exports.memory.buffer).buffer);
         scratchSpaceAddress = instance.exports.__heap_base.value;
-        heapSpaceAddress = instance.exports.__heap_base.value + 1024;
+        let clayScratchSpaceAddress = instance.exports.__heap_base.value + 1024;
+        heapSpaceAddress = instance.exports.__heap_base.value + 2048;
         let arenaAddress = scratchSpaceAddress + 8;
         window.instance = instance;
         createMainArena(arenaAddress, heapSpaceAddress);
         memoryDataView.setFloat32(instance.exports.__heap_base.value, window.innerWidth, true);
         memoryDataView.setFloat32(instance.exports.__heap_base.value + 4, window.innerHeight, true);
         instance.exports.Clay_Initialize(arenaAddress, instance.exports.__heap_base.value);
+        instance.exports.SetScratchMemory(arenaAddress, clayScratchSpaceAddress);
         renderCommandSize = getStructTotalSize(renderCommandDefinition);
         renderLoop();
     }
@@ -368,6 +393,22 @@
         return false;
     }
 
+    function SetElementBackgroundColorAndRadius(element, cornerRadius, backgroundColor) {
+        element.style.backgroundColor = `rgba(${backgroundColor.r.value}, ${backgroundColor.g.value}, ${backgroundColor.b.value}, ${backgroundColor.a.value / 255})`;
+        if (cornerRadius.topLeft.value > 0) {
+            element.style.borderTopLeftRadius = cornerRadius.topLeft.value + 'px';
+        }
+        if (cornerRadius.topRight.value > 0) {
+            element.style.borderTopRightRadius = cornerRadius.topRight.value + 'px';
+        }
+        if (cornerRadius.bottomLeft.value > 0) {
+            element.style.borderBottomLeftRadius = cornerRadius.bottomLeft.value + 'px';
+        }
+        if (cornerRadius.bottomRight.value > 0) {
+            element.style.borderBottomRightRadius = cornerRadius.bottomRight.value + 'px';
+        }
+    }
+
     function renderLoopHTML() {
         let capacity = memoryDataView.getInt32(scratchSpaceAddress, true);
         let length = memoryDataView.getInt32(scratchSpaceAddress + 4, true);
@@ -375,7 +416,7 @@
         let scissorStack = [{ nextAllocation: { x: 0, y: 0 }, element: htmlRoot, nextElementIndex: 0 }];
         let previousId = 0;
         for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
-            let entireRenderCommandMemory = new Uint32Array(memoryDataView.buffer.slice(arrayOffset, arrayOffset + renderCommandSize));
+            let entireRenderCommandMemory = new Uint8Array(memoryDataView.buffer.slice(arrayOffset, arrayOffset + renderCommandSize));
             let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
             let parentElement = scissorStack[scissorStack.length - 1];
             let element = null;
@@ -384,13 +425,12 @@
                 let elementType = 'div';
                 switch (renderCommand.commandType.value & 0xff) {
                     case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
-                        if (readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition).link.length.value > 0) {
-                            elementType = 'a';
-                        }
+                        // if (readStructAtAddress(renderCommand.renderData.rectangle.value, rectangleRenderDataDefinition).link.length.value > 0) { TODO reimplement links
+                        //     elementType = 'a';
+                        // }
                         break;
                     }
                     case CLAY_RENDER_COMMAND_TYPE_IMAGE: {
-                        console.log('test5');
                         elementType = 'img'; break;
                     }
                     default: break;
@@ -443,93 +483,82 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_RECTANGLE): {
-                    let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
-                    let sharedConfig = readStructAtAddress( renderCommand.textOrSharedConfig.sharedConfig.value, sharedConfigDefinition);
-                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
-                    let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
+                    let config = renderCommand.renderData.rectangle;
+                    let configMemory = JSON.stringify(config);
+                    if (configMemory === elementData.previousMemoryConfig) {
+                        break;
+                    }
+
+                    SetElementBackgroundColorAndRadius(element, config.cornerRadius, config.backgroundColor);
+                    if (renderCommand.userData.value !== 0) {
+                        let customData = readStructAtAddress(renderCommand.userData.value, customHTMLDataDefinition);
+
+                        let linkContents = customData.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(customData.link.chars.value, customData.link.chars.value + customData.link.length.value))) : 0;
                         memoryDataView.setUint32(0, renderCommand.id.value, true);
                         if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
                             window.location.href = linkContents;
                         }
-                    if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
-                        break;
-                    }
                         if (linkContents.length > 0) {
                             element.href = linkContents;
                         }
 
-                    if (linkContents.length > 0 || config.cursorPointer.value) {
+                        if (linkContents.length > 0 || customData.cursorPointer.value) {
                             element.style.pointerEvents = 'all';
                             element.style.cursor = 'pointer';
                         }
+                    }
+
                     elementData.previousMemoryConfig = configMemory;
-                    let color = config.color;
-                    element.style.backgroundColor = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
-                    if (sharedConfig.cornerRadius.topLeft.value > 0) {
-                        element.style.borderTopLeftRadius = sharedConfig.cornerRadius.topLeft.value + 'px';
-                    }
-                    if (sharedConfig.cornerRadius.topRight.value > 0) {
-                        element.style.borderTopRightRadius = sharedConfig.cornerRadius.topRight.value + 'px';
-                    }
-                    if (sharedConfig.cornerRadius.bottomLeft.value > 0) {
-                        element.style.borderBottomLeftRadius = sharedConfig.cornerRadius.bottomLeft.value + 'px';
-                    }
-                    if (sharedConfig.cornerRadius.bottomRight.value > 0) {
-                        element.style.borderBottomRightRadius = sharedConfig.cornerRadius.bottomRight.value + 'px';
-                    }
+
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_BORDER): {
-                    let config = readStructAtAddress(renderCommand.config.value, borderConfigDefinition);
-                    let sharedConfig = readStructAtAddress( renderCommand.textOrSharedConfig.sharedConfig.value, sharedConfigDefinition);
-                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
-                    if (!dirty && !MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                    let config = renderCommand.renderData.border;
+                    let configMemory = JSON.stringify(config);
+                    if (configMemory === elementData.previousMemoryConfig) {
                         break;
                     }
+                    let color = config.color;
                     elementData.previousMemoryConfig = configMemory;
-                    if (config.left.width.value > 0) {
-                        let color = config.left.color;
-                        element.style.borderLeft = `${config.left.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.left.value > 0) {
+                        element.style.borderLeft = `${config.width.left.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (config.right.width.value > 0) {
-                        let color = config.right.color;
-                        element.style.borderRight = `${config.right.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.right.value > 0) {
+                        element.style.borderRight = `${config.width.right.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (config.top.width.value > 0) {
-                        let color = config.top.color;
-                        element.style.borderTop = `${config.top.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.top.value > 0) {
+                        element.style.borderTop = `${config.width.top.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (config.bottom.width.value > 0) {
-                        let color = config.bottom.color;
-                        element.style.borderBottom = `${config.bottom.width.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
+                    if (config.width.bottom.value > 0) {
+                        element.style.borderBottom = `${config.width.bottom.value}px solid rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`
                     }
-                    if (sharedConfig.cornerRadius.topLeft.value > 0) {
-                        element.style.borderTopLeftRadius = sharedConfig.cornerRadius.topLeft.value + 'px';
+                    if (config.cornerRadius.topLeft.value > 0) {
+                        element.style.borderTopLeftRadius = config.cornerRadius.topLeft.value + 'px';
                     }
-                    if (sharedConfig.cornerRadius.topRight.value > 0) {
-                        element.style.borderTopRightRadius = sharedConfig.cornerRadius.topRight.value + 'px';
+                    if (config.cornerRadius.topRight.value > 0) {
+                        element.style.borderTopRightRadius = config.cornerRadius.topRight.value + 'px';
                     }
-                    if (sharedConfig.cornerRadius.bottomLeft.value > 0) {
-                        element.style.borderBottomLeftRadius = sharedConfig.cornerRadius.bottomLeft.value + 'px';
+                    if (config.cornerRadius.bottomLeft.value > 0) {
+                        element.style.borderBottomLeftRadius = config.cornerRadius.bottomLeft.value + 'px';
                     }
-                    if (sharedConfig.cornerRadius.bottomRight.value > 0) {
-                        element.style.borderBottomRightRadius = sharedConfig.cornerRadius.bottomRight.value + 'px';
+                    if (config.cornerRadius.bottomRight.value > 0) {
+                        element.style.borderBottomRightRadius = config.cornerRadius.bottomRight.value + 'px';
                     }
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_TEXT): {
-                    let config = readStructAtAddress(renderCommand.config.value, textConfigDefinition);
-                    let configMemory = new Uint8Array(memoryDataView.buffer.slice(renderCommand.config.value, renderCommand.config.value + config.__size));
-                    let textContents = renderCommand.textOrSharedConfig.text;
-                    let stringContents = new Uint8Array(memoryDataView.buffer.slice(textContents.chars.value, textContents.chars.value + textContents.length.value));
-                    if (MemoryIsDifferent(configMemory, elementData.previousMemoryConfig, config.__size)) {
+                    let config = renderCommand.renderData.text;
+                    let customData = readStructAtAddress(renderCommand.userData.value, customHTMLDataDefinition);
+                    let configMemory = JSON.stringify(config);
+                    let stringContents = new Uint8Array(memoryDataView.buffer.slice(config.stringContents.chars.value, config.stringContents.chars.value + config.stringContents.length.value));
+                    if (configMemory !== elementData.previousMemoryConfig) {
                         element.className = 'text';
                         let textColor = config.textColor;
                         let fontSize = Math.round(config.fontSize.value * GLOBAL_FONT_SCALING_FACTOR);
                         element.style.color = `rgba(${textColor.r.value}, ${textColor.g.value}, ${textColor.b.value}, ${textColor.a.value})`;
                         element.style.fontFamily = fontsById[config.fontId.value];
                         element.style.fontSize = fontSize + 'px';
-                        element.style.pointerEvents = config.disablePointerEvents.value ? 'none' : 'all';
+                        element.style.pointerEvents = customData.disablePointerEvents.value ? 'none' : 'all';
                         elementData.previousMemoryConfig = configMemory;
                     }
                     if (stringContents.length !== elementData.previousMemoryText.length || MemoryIsDifferent(stringContents, elementData.previousMemoryText, stringContents.length)) {
@@ -540,7 +569,11 @@
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_START): {
                     scissorStack.push({ nextAllocation: { x: renderCommand.boundingBox.x.value, y: renderCommand.boundingBox.y.value }, element, nextElementIndex: 0 });
-                    let config = readStructAtAddress(renderCommand.config.value, scrollConfigDefinition);
+                    let config = renderCommand.renderData.scroll;
+                    let configMemory = JSON.stringify(config);
+                    if (configMemory === elementData.previousMemoryConfig) {
+                        break;
+                    }
                     if (config.horizontal.value) {
                         element.style.overflowX = 'scroll';
                         element.style.pointerEvents = 'auto';
@@ -549,6 +582,7 @@
                         element.style.overflowY = 'scroll';
                         element.style.pointerEvents = 'auto';
                     }
+                    elementData.previousMemoryConfig = configMemory;
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_SCISSOR_END): {
@@ -556,9 +590,9 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
-                    console.log('test1');
-                    let config = readStructAtAddress(renderCommand.config.value, imageConfigDefinition);
-                    let srcContents = new Uint8Array(memoryDataView.buffer.slice(config.sourceURL.chars.value, config.sourceURL.chars.value + config.sourceURL.length.value));
+                    let config = renderCommand.renderData.image;
+                    let imageURL = readStructAtAddress(config.imageData.value, stringDefinition);
+                    let srcContents = new Uint8Array(memoryDataView.buffer.slice(imageURL.chars.value, imageURL.chars.value + imageURL.length.value));
                     if (srcContents.length !== elementData.previousMemoryText.length || MemoryIsDifferent(srcContents, elementData.previousMemoryText, srcContents.length)) {
                         element.src = textDecoder.decode(srcContents);
                     }
@@ -566,6 +600,9 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_CUSTOM): break;
+                default: {
+                    console.log("Error: unhandled render command");
+                }
             }
         }
 
@@ -602,8 +639,8 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_RECTANGLE): {
-                    let config = readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition);
-                    let color = config.color;
+                    let config = renderCommand.renderData.rectangle;
+                    let color = config.backgroundColor;
                     ctx.beginPath();
                     window.canvasContext.fillStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                     window.canvasContext.roundRect(
@@ -615,33 +652,35 @@
                     ctx.fill();
                     ctx.closePath();
                     // Handle link clicks
-                    let linkContents = config.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.link.chars.value, config.link.chars.value + config.link.length.value))) : 0;
+                    if (renderCommand.userData.value !== 0) {
+                        let customData = readStructAtAddress(renderCommand.userData.value, customHTMLDataDefinition);
+                        let linkContents = customData.link.length.value > 0 ? textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(customData.link.chars.value, customData.link.chars.value + customData.link.length.value))) : 0;
                         memoryDataView.setUint32(0, renderCommand.id.value, true);
                         if (linkContents.length > 0 && (window.mouseDownThisFrame || window.touchDown) && instance.exports.Clay_PointerOver(0)) {
                             window.location.href = linkContents;
                         }
+                    }
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_BORDER): {
-                    let config = readStructAtAddress(renderCommand.config.value, borderConfigDefinition);
+                    let config = renderCommand.renderData.border;
+                    let color = config.color;
                     ctx.beginPath();
                     ctx.moveTo(boundingBox.x.value * scale, boundingBox.y.value * scale);
                     // Top Left Corner
                     if (config.cornerRadius.topLeft.value > 0) {
-                        let lineWidth = config.top.width.value;
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale);
-                        let color = config.top.color;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                         ctx.arcTo((boundingBox.x.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, config.cornerRadius.topLeft.value * scale);
                         ctx.stroke();
                     }
                     // Top border
-                    if (config.top.width.value > 0) {
-                        let lineWidth = config.top.width.value;
+                    if (config.width.top.value > 0) {
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
-                        let color = config.top.color;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                         ctx.moveTo((boundingBox.x.value + config.cornerRadius.topLeft.value + halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
@@ -650,19 +689,17 @@
                     }
                     // Top Right Corner
                     if (config.cornerRadius.topRight.value > 0) {
-                        let lineWidth = config.top.width.value;
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + boundingBox.width.value - config.cornerRadius.topRight.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale);
-                        let color = config.top.color;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
                         ctx.arcTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + halfLineWidth) * scale, (boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + config.cornerRadius.topRight.value + halfLineWidth) * scale, config.cornerRadius.topRight.value * scale);
                         ctx.stroke();
                     }
                     // Right border
-                    if (config.right.width.value > 0) {
-                        let color = config.right.color;
-                        let lineWidth = config.right.width.value;
+                    if (config.width.right.value > 0) {
+                        let lineWidth = config.width.right.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
@@ -672,8 +709,7 @@
                     }
                     // Bottom Right Corner
                     if (config.cornerRadius.bottomRight.value > 0) {
-                        let color = config.top.color;
-                        let lineWidth = config.top.width.value;
+                        let lineWidth = config.width.top.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + boundingBox.width.value - halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - config.cornerRadius.bottomRight.value - halfLineWidth) * scale);
                         ctx.lineWidth = lineWidth * scale;
@@ -682,9 +718,8 @@
                         ctx.stroke();
                     }
                     // Bottom Border
-                    if (config.bottom.width.value > 0) {
-                        let color = config.bottom.color;
-                        let lineWidth = config.bottom.width.value;
+                    if (config.width.bottom.value > 0) {
+                        let lineWidth = config.width.bottom.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
@@ -694,8 +729,7 @@
                     }
                     // Bottom Left Corner
                     if (config.cornerRadius.bottomLeft.value > 0) {
-                        let color = config.bottom.color;
-                        let lineWidth = config.bottom.width.value;
+                        let lineWidth = config.width.bottom.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.moveTo((boundingBox.x.value + config.cornerRadius.bottomLeft.value + halfLineWidth) * scale, (boundingBox.y.value + boundingBox.height.value - halfLineWidth) * scale);
                         ctx.lineWidth = lineWidth * scale;
@@ -704,9 +738,8 @@
                         ctx.stroke();
                     }
                     // Left Border
-                    if (config.left.width.value > 0) {
-                        let color = config.left.color;
-                        let lineWidth = config.left.width.value;
+                    if (config.width.left.value > 0) {
+                        let lineWidth = config.width.left.value;
                         let halfLineWidth = lineWidth / 2;
                         ctx.lineWidth = lineWidth * scale;
                         ctx.strokeStyle = `rgba(${color.r.value}, ${color.g.value}, ${color.b.value}, ${color.a.value / 255})`;
@@ -718,8 +751,8 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_TEXT): {
-                    let config = readStructAtAddress(renderCommand.config.value, textConfigDefinition);
-                    let textContents = renderCommand.text;
+                    let config = renderCommand.renderData.text;
+                    let textContents = config.stringContents;
                     let stringContents = new Uint8Array(memoryDataView.buffer.slice(textContents.chars.value, textContents.chars.value + textContents.length.value));
                     let fontSize = config.fontSize.value * GLOBAL_FONT_SCALING_FACTOR * scale;
                     ctx.font = `${fontSize}px ${fontsById[config.fontId.value]}`;
@@ -742,8 +775,9 @@
                     break;
                 }
                 case (CLAY_RENDER_COMMAND_TYPE_IMAGE): {
-                    let config = readStructAtAddress(renderCommand.config.value, imageConfigDefinition);
-                    let src = textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(config.sourceURL.chars.value, config.sourceURL.chars.value + config.sourceURL.length.value)));
+                    let config = renderCommand.renderData.image;
+                    let imageURL = readStructAtAddress(config.imageData.value, stringDefinition);
+                    let src = textDecoder.decode(new Uint8Array(memoryDataView.buffer.slice(imageURL.chars.value, imageURL.chars.value + imageURL.length.value)));
                     if (!imageCache[src]) {
                         imageCache[src] = {
                             image: new Image(),

examples/clay-official-website/main.c

@@ -52,13 +52,21 @@ typedef struct {
 
 CustomHTMLData* FrameAllocateCustomData(CustomHTMLData data) {
     CustomHTMLData *customData = (CustomHTMLData *)(frameArena.memory + frameArena.offset);
+    *customData = data;
     frameArena.offset += sizeof(CustomHTMLData);
     return customData;
 }
 
-void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, char* imageURL) {
+Clay_String* FrameAllocateString(Clay_String string) {
+    Clay_String *allocated = (Clay_String *)(frameArena.memory + frameArena.offset);
+    *allocated = string;
+    frameArena.offset += sizeof(Clay_String);
+    return allocated;
+}
+
+void LandingPageBlob(int index, int fontSize, Clay_Color color, Clay_String text, Clay_String imageURL) {
     CLAY({ .id = CLAY_IDI("HeroBlob", index), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 480) }, .padding = CLAY_PADDING_ALL(16), .childGap = 16, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER} }, .border = { .color = color, .width = { 2, 2, 2, 2 }}, .cornerRadius = CLAY_CORNER_RADIUS(10) }) {
-        CLAY({ .id = CLAY_IDI("CheckImage", index), .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .image = { .sourceDimensions = { 128, 128 }, .imageData = imageURL } }) {}
+        CLAY({ .id = CLAY_IDI("CheckImage", index), .layout = { .sizing = { CLAY_SIZING_FIXED(32) } }, .image = { .sourceDimensions = { 128, 128 }, .imageData = FrameAllocateString(imageURL) } }) {}
         CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = fontSize, .fontId = FONT_ID_BODY_24, .textColor = color }));
     }
 }
@@ -72,11 +80,11 @@ void LandingPageDesktop() {
                 CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE }));
             }
             CLAY({ .id = CLAY_ID("HeroImageOuter"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 } }) {
-                LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), "/clay/images/check_5.png");
-                LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), "/clay/images/check_4.png");
-                LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), "/clay/images/check_3.png");
-                LandingPageBlob(4, 32, COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"), "/clay/images/check_2.png");
-                LandingPageBlob(5, 32, COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"), "/clay/images/check_1.png");
+                LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png"));
+                LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png"));
+                LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png"));
+                LandingPageBlob(4, 32, COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"), CLAY_STRING("/clay/images/check_2.png"));
+                LandingPageBlob(5, 32, COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"), CLAY_STRING("/clay/images/check_1.png"));
             }
         }
     }
@@ -90,11 +98,11 @@ void LandingPageMobile() {
             CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE }));
         }
         CLAY({ .id = CLAY_ID("HeroImageOuter"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_GROW(0) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 } }) {
-            LandingPageBlob(1, 28, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), "/clay/images/check_5.png");
-            LandingPageBlob(2, 28, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), "/clay/images/check_4.png");
-            LandingPageBlob(3, 28, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), "/clay/images/check_3.png");
-            LandingPageBlob(4, 28, COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"), "/clay/images/check_2.png");
-            LandingPageBlob(5, 28, COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"), "/clay/images/check_1.png");
+            LandingPageBlob(1, 28, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png"));
+            LandingPageBlob(2, 28, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png"));
+            LandingPageBlob(3, 28, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png"));
+            LandingPageBlob(4, 28, COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"), CLAY_STRING("/clay/images/check_2.png"));
+            LandingPageBlob(5, 28, COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"), CLAY_STRING("/clay/images/check_1.png"));
         }
     }
 }
@@ -148,7 +156,7 @@ void DeclarativeSyntaxPageDesktop() {
                 CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED }));
             }
             CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
-                CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .image = { .sourceDimensions = {1136, 1194}, .imageData = "/clay/images/declarative.png" } }) {}
+                CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .image = { .sourceDimensions = {1136, 1194}, .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {}
             }
         }
     }
@@ -164,7 +172,7 @@ void DeclarativeSyntaxPageMobile() {
             CLAY_TEXT(CLAY_STRING("Create your own library of re-usable components from UI primitives like text, images and rectangles."), CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED }));
         }
         CLAY({ .id = CLAY_ID("SyntaxPageRightImage"), .layout = { .sizing = { CLAY_SIZING_GROW(0) }, .childAlignment = {.x = CLAY_ALIGN_X_CENTER} } }) {
-            CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .image = { .sourceDimensions = {1136, 1194}, .imageData = "/clay/images/declarative.png" } }) {}
+            CLAY({ .id = CLAY_ID("SyntaxPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 568) } }, .image = { .sourceDimensions = {1136, 1194}, .imageData = FrameAllocateString(CLAY_STRING("/clay/images/declarative.png")) } }) {}
         }
     }
 }
@@ -237,7 +245,7 @@ void RendererButtonActive(Clay_String text) {
         .layout = { .sizing = {CLAY_SIZING_FIXED(300) }, .padding = CLAY_PADDING_ALL(16) },
         .backgroundColor = Clay_Hovered() ? COLOR_RED_HOVER : COLOR_RED,
         .cornerRadius = CLAY_CORNER_RADIUS(10),
-        .custom = { .customData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true, .cursorPointer = true })}
+        .userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true, .cursorPointer = true })
     }) {
         CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_LIGHT }));
     }
@@ -249,7 +257,7 @@ void RendererButtonInactive(Clay_String text, size_t rendererIndex) {
         .border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
         .backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
         .cornerRadius = CLAY_CORNER_RADIUS(10),
-        .custom = { .customData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true, .cursorPointer = true })}
+        .userData = FrameAllocateCustomData((CustomHTMLData) { .disablePointerEvents = true, .cursorPointer = true })
     }) {
         Clay_OnHover(HandleRendererButtonInteraction, rendererIndex);
         CLAY_TEXT(text, CLAY_TEXT_CONFIG({ .fontSize = 28, .fontId = FONT_ID_BODY_36, .textColor = COLOR_RED }));
@@ -315,7 +323,7 @@ void DebuggerPageDesktop() {
             CLAY_TEXT(CLAY_STRING("Press the \"d\" key to try it out now!"), CLAY_TEXT_CONFIG({ .fontSize = 32, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE }));
         }
         CLAY({ .id = CLAY_ID("DebuggerRightImageOuter"), .layout = { .sizing = { CLAY_SIZING_PERCENT(0.50) }, .childAlignment = {CLAY_ALIGN_X_CENTER} } }) {
-            CLAY({ .id = CLAY_ID("DebuggerPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 558) } }, .image = { .sourceDimensions = {1620, 1474}, .imageData = "/clay/images/debugger.png" } }) {}
+            CLAY({ .id = CLAY_ID("DebuggerPageRightImageInner"), .layout = { .sizing = { CLAY_SIZING_GROW(.max = 558) } }, .image = { .sourceDimensions = {1620, 1474}, .imageData = FrameAllocateString(CLAY_STRING("/clay/images/debugger.png")) } }) {}
         }
     }
 }
@@ -337,10 +345,10 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
             CLAY_TEXT(CLAY_STRING("Clay"), &headerTextConfig);
             CLAY({ .id = CLAY_ID("Spacer"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) } } }) {}
             if (!mobileScreen) {
-                CLAY({ .id = CLAY_ID("LinkExamplesOuter"), .layout = { .padding = {8, 8} }, .custom = { .customData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples") }) } }) {
+                CLAY({ .id = CLAY_ID("LinkExamplesOuter"), .layout = { .padding = {8, 8} }, .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples") }) }) {
                     CLAY_TEXT(CLAY_STRING("Examples"), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }));
                 }
-                CLAY({ .id = CLAY_ID("LinkDocsOuter"), .layout = { .padding = {8, 8} }, .custom = { .customData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/blob/main/README.md") }) } }) {
+                CLAY({ .id = CLAY_ID("LinkDocsOuter"), .layout = { .padding = {8, 8} }, .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/blob/main/README.md") }) }) {
                     CLAY_TEXT(CLAY_STRING("Docs"), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }));
                 }
             }
@@ -349,7 +357,7 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
                 .backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
                 .border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
                 .cornerRadius = CLAY_CORNER_RADIUS(10),
-                .custom = { .customData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples") }) },
+                .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay/tree/main/examples") }),
             }) {
                 CLAY_TEXT(CLAY_STRING("Discord"), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }));
             }
@@ -358,7 +366,7 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
                 .backgroundColor = Clay_Hovered() ? COLOR_LIGHT_HOVER : COLOR_LIGHT,
                 .border = { .width = {2, 2, 2, 2}, .color = COLOR_RED },
                 .cornerRadius = CLAY_CORNER_RADIUS(10),
-                .custom = { .customData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay") }) },
+                .userData = FrameAllocateCustomData((CustomHTMLData) { .link = CLAY_STRING("https://github.com/nicbarker/clay") }),
             }) {
                 CLAY_TEXT(CLAY_STRING("Github"), CLAY_TEXT_CONFIG({ .fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {61, 26, 5, 255} }));
             }
@@ -413,7 +421,12 @@ Clay_RenderCommandArray CreateLayout(bool mobileScreen, float lerpValue) {
 
 bool debugModeEnabled = false;
 
+CLAY_WASM_EXPORT("SetScratchMemory") void SetScratchMemory(void * memory) {
+    frameArena.memory = memory;
+}
+
 CLAY_WASM_EXPORT("UpdateDrawFrame") Clay_RenderCommandArray UpdateDrawFrame(float width, float height, float mouseWheelX, float mouseWheelY, float mousePositionX, float mousePositionY, bool isTouchDown, bool isMouseDown, bool arrowKeyDownPressedThisFrame, bool arrowKeyUpPressedThisFrame, bool dKeyPressedThisFrame, float deltaTime) {
+    frameArena.offset = 0;
     windowWidth = width;
     windowHeight = height;
     Clay_SetLayoutDimensions((Clay_Dimensions) { width, height });

examples/raylib-sidebar-scrolling-container/main.c

@@ -48,7 +48,7 @@ Clay_RenderCommandArray CreateLayout(void) {
         CLAY({ .id = CLAY_ID("SideBar"), .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, .padding = {16, 16, 16, 16 }, .childGap = 16 }, .backgroundColor = {150, 150, 255, 255} }) {
             CLAY({ .id = CLAY_ID("ProfilePictureOuter"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0) }, .padding = { 8, 8, 8, 8 }, .childGap = 8, .childAlignment = { .y = CLAY_ALIGN_Y_CENTER } }, .backgroundColor = {130, 130, 255, 255} }) {
                 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(profileText, CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {0, 0, 0, 255} }));
+                CLAY_TEXT(profileText, CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {0, 0, 0, 255}, .textAlignment = CLAY_TEXT_ALIGN_RIGHT }));
             }
             CLAY({ .id = CLAY_ID("SidebarBlob1"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }}, .backgroundColor = {110, 110, 255, 255} }) {}
             CLAY({ .id = CLAY_ID("SidebarBlob2"), .layout = { .sizing = { .width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_FIXED(50) }}, .backgroundColor = {110, 110, 255, 255} }) {}
@@ -63,7 +63,7 @@ Clay_RenderCommandArray CreateLayout(void) {
                 RenderHeaderButton(CLAY_STRING("Header Item 3"));
             }
             CLAY({.id = CLAY_ID("MainContent"),
-                .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .padding = {16, 16, 16, 16}, .childGap = 16, .sizing = { CLAY_SIZING_GROW(0) } },
+                .layout = { .layoutDirection = CLAY_TOP_TO_BOTTOM, .padding = {16, 16, 16, 16}, .childGap = 16, .sizing = { .width = CLAY_SIZING_GROW(0) } },
                 .backgroundColor = {200, 200, 255, 255},
                 .scroll = { .vertical = true },
             })
@@ -87,7 +87,7 @@ Clay_RenderCommandArray CreateLayout(void) {
                  }
 
                  CLAY_TEXT(CLAY_STRING("Faucibus purus in massa tempor nec. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Diam vulputate ut pharetra sit amet aliquam id diam. Lacus suspendisse faucibus interdum posuere lorem. A diam sollicitudin tempor id. Amet massa vitae tortor condimentum lacinia. Aliquet nibh praesent tristique magna."),
-                     CLAY_TEXT_CONFIG({ .fontSize = 24, .lineHeight = 60, .textColor = {0,0,0,255} }));
+                           CLAY_TEXT_CONFIG({ .fontSize = 24, .lineHeight = 60, .textColor = {0,0,0,255}, .textAlignment = CLAY_TEXT_ALIGN_CENTER }));
 
                  CLAY_TEXT(CLAY_STRING("Suspendisse in est ante in nibh. Amet venenatis urna cursus eget nunc scelerisque viverra. Elementum sagittis vitae et leo duis ut diam quam nulla. Enim nulla aliquet porttitor lacus. Pellentesque habitant morbi tristique senectus et. Facilisi nullam vehicula ipsum a arcu cursus vitae.\nSem fringilla ut morbi tincidunt. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Velit sed ullamcorper morbi tincidunt ornare massa. Varius quam quisque id diam vel quam. Nulla pellentesque dignissim enim sit amet venenatis. Enim lobortis scelerisque fermentum dui faucibus in. Pretium viverra suspendisse potenti nullam ac tortor vitae. Lectus vestibulum mattis ullamcorper velit sed. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Habitant morbi tristique senectus et. Integer vitae justo eget magna fermentum iaculis eu. Semper quis lectus nulla at volutpat diam. Enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis vel."),
                      CLAY_TEXT_CONFIG({ .fontSize = 24, .textColor = {0,0,0,255} }));
@@ -225,7 +225,7 @@ void HandleClayErrors(Clay_ErrorData errorData) {
 int main(void) {
     uint64_t totalMemorySize = Clay_MinMemorySize();
     Clay_Arena clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
-    Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors });
+    Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors, 0 });
     Clay_Raylib_Initialize(1024, 768, "Clay - Raylib Renderer Example", FLAG_VSYNC_HINT | FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI | FLAG_MSAA_4X_HINT);
     profilePicture = LoadTextureFromImage(LoadImage("resources/profile-picture.png"));
 
@@ -245,7 +245,7 @@ int main(void) {
             Clay_SetMaxElementCount(8192);
             totalMemorySize = Clay_MinMemorySize();
             clayMemory = Clay_CreateArenaWithCapacityAndMemory(totalMemorySize, malloc(totalMemorySize));
-            Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors });
+            Clay_Initialize(clayMemory, (Clay_Dimensions) { (float)GetScreenWidth(), (float)GetScreenHeight() }, (Clay_ErrorHandler) { HandleClayErrors, 0 });
             reinitializeClay = false;
         }
         UpdateDrawFrame(fonts);

fuzz/fuzzing_target.c

@@ -0,0 +1,24 @@
+#include "clay.h"
+#include <stdint.h>
+#include <stddef.h>
+
+extern "C" int LLVMFuzzerTestOneInput(const uint8_t *data, size_t size) {
+    if (size < sizeof(Clay_String)) return 0;
+
+    Clay_String testString = { .length = size, .chars = (const char *)data };
+
+    Clay_Dimensions dimensions = MeasureText(&testString, NULL);
+
+    // Call other critical functions
+    Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(1024, (void*)data);
+    Clay_Initialize(arena, (Clay_Dimensions){1024, 768});
+    Clay_SetPointerState((Clay_Vector2){0, 0}, false);
+    Clay_BeginLayout();
+    Clay_EndLayout();
+
+    // Handle pointer state changes
+    Clay_SetPointerState((Clay_Vector2){1, 1}, true);
+    Clay_SetPointerState((Clay_Vector2){2, 2}, false);
+
+    return 0;
+}

renderers/raylib/clay_renderer_raylib.c

@@ -144,7 +144,7 @@ void Clay_Raylib_Render(Clay_RenderCommandArray renderCommands, Font* fonts)
             case CLAY_RENDER_COMMAND_TYPE_IMAGE: {
                 Texture2D imageTexture = *(Texture2D *)renderCommand->renderData.image.imageData;
                 Clay_Color tintColor = renderCommand->renderData.image.backgroundColor;
-                if (tintColor.r == 0 && tintColor.g == 0 || tintColor.b == 0 || tintColor.a == 0) {
+                if (tintColor.r == 0 && tintColor.g == 0 && tintColor.b == 0 && tintColor.a == 0) {
                     tintColor = (Clay_Color) { 255, 255, 255, 255 };
                 }
                 DrawTextureEx(