Merge 0e82579926 into fd97d8179e

The bulk of the instructions were generated using GitHub copilot which were tested and edited manually by me.

examples/README.md

@@ -0,0 +1,140 @@
+# Building the Examples
+
+This guide explains how to build and run the examples in this project.
+
+## Prerequisites
+
+Before building the examples, ensure you have:
+
+- **CMake** (version 3.25 or newer recommended)
+- **C compiler with WebAssembly support** (GCC, Clang, or MSVC)
+- **Platform-specific dependencies** for certain examples:
+    - [Playdate SDK](https://play.date/dev/) for Playdate examples
+
+Most dependencies (Raylib, Sokol, stb, termbox2) are automatically downloaded by CMake.
+
+## Quick Start
+
+1. **Clone the repository:**
+   ```sh
+   git clone https://github.com/nicbarker/clay.git
+   cd clay
+   ```
+
+2. **Build all examples (except Playdate):**
+   ```sh
+   cmake -B cmake-build
+   cmake --build cmake-build
+   ```
+
+## Selective Building
+
+For more control over which examples to build, use these CMake options:
+
+| CMake Option | Description |
+|---|---|
+| (no options) | Builds all examples except Playdate |
+| `-DCLAY_INCLUDE_ALL_EXAMPLES=OFF` | Builds no examples unless specified |
+| `-DCLAY_INCLUDE_DEMOS=ON` | Builds video demo and website |
+| `-DCLAY_INCLUDE_CPP_EXAMPLE=ON` | Builds C++ example |
+| `-DCLAY_INCLUDE_RAYLIB_EXAMPLES=ON` | Builds Raylib examples |
+| `-DCLAY_INCLUDE_SDL2_EXAMPLES=ON` | Builds SDL2 examples |
+| `-DCLAY_INCLUDE_SDL3_EXAMPLES=ON` | Builds SDL3 examples |
+| `-DCLAY_INCLUDE_WIN32_GDI_EXAMPLES=ON` | Builds Win32 GDI examples |
+| `-DCLAY_INCLUDE_SOKOL_EXAMPLES=ON` | Builds Sokol examples |
+| `-DCLAY_INCLUDE_PLAYDATE_EXAMPLES=ON` | Builds Playdate examples |
+
+### Example Commands
+
+**Build only Playdate examples:**
+```sh
+cmake -DCLAY_INCLUDE_ALL_EXAMPLES=OFF -DCLAY_INCLUDE_PLAYDATE_EXAMPLES=ON -B cmake-build
+cmake --build cmake-build
+```
+
+**Build specific example types:**
+
+| Example Type | Command |
+|---|---|
+| Raylib only | `cmake -DCLAY_INCLUDE_ALL_EXAMPLES=OFF -DCLAY_INCLUDE_RAYLIB_EXAMPLES=ON -B cmake-build` |
+| SDL2 only | `cmake -DCLAY_INCLUDE_ALL_EXAMPLES=OFF -DCLAY_INCLUDE_SDL2_EXAMPLES=ON -B cmake-build` |
+| Sokol only | `cmake -DCLAY_INCLUDE_ALL_EXAMPLES=OFF -DCLAY_INCLUDE_SOKOL_EXAMPLES=ON -B cmake-build` |
+| Terminal demos only | `cmake -DCLAY_INCLUDE_ALL_EXAMPLES=OFF -DCLAY_INCLUDE_DEMOS=ON -B cmake-build` |
+
+## Platform-Specific Instructions
+
+### Playdate Examples
+
+> **Note:** The [Playdate SDK](https://play.date/dev/) must be installed before building Playdate examples.
+
+The compiled `.pdx` file will be located at:
+```
+cmake-build/examples/playdate-project-example/clay_playdate_example.pdx
+```
+
+Open this file in the Playdate simulator to run it.
+
+**Building for Playdate hardware:**
+```sh
+cmake -DTOOLCHAIN=armgcc \
+      -DCMAKE_TOOLCHAIN_FILE=/path/to/PlaydateSDK/C_API/buildsupport/arm.cmake \
+      -DCLAY_INCLUDE_ALL_EXAMPLES=OFF \
+      -DCLAY_INCLUDE_PLAYDATE_EXAMPLES=ON \
+      -B cmake-release-playdate
+cmake --build cmake-release-playdate
+```
+
+Replace `/path/to/PlaydateSDK` with your actual Playdate SDK installation path.
+
+### WebAssembly Example
+
+To build the official website demo for browsers:
+
+```sh
+cd examples/clay-official-website
+./build.sh
+```
+
+**macOS WebAssembly Build Issues:**
+If you encounter this error on macOS:
+```
+error: unable to create target: 'No available targets are compatible with triple "wasm32"'
+```
+
+**Solution 1 (Recommended):** Install LLVM via Homebrew:
+```sh
+brew install llvm
+export PATH="/opt/homebrew/bin:$PATH"
+```
+
+**Solution 2:** Use Emscripten (requires modifying the `build.sh` script):
+```sh
+brew install emscripten
+```
+
+**Viewing the WebAssembly example:**
+1. The build creates files in `./build/clay/`:
+   - `build/clay/index.html`
+   - `build/clay/index.wasm`
+
+2. Serve the `build` folder using a web server (the files won't work when opened directly in a browser)
+
+3. Navigate to `index.html` in your browser
+
+**Using VS Code:** Open the `build` directory and use the Live Preview extension to serve the files.
+
+## Running Examples
+
+After building, find executables in their respective subfolders within `cmake-build/examples`:
+
+```sh
+./cmake-build/examples/introducing-clay-video-demo/clay_examples_introducing_clay_video_demo
+```
+
+If an executable is missing, run `make` in the respective example subfolder.
+
+## Additional Notes
+
+- Dependencies like Raylib, Sokol, stb, and termbox2 are automatically fetched by CMake
+- For example-specific instructions, check the README files in individual `examples/` folders
+- Most examples work out of the box once built, with no additional setup required

examples/clay-official-website/build.sh

@@ -15,5 +15,5 @@ mkdir -p build/clay                                                       \
 -Wl,--initial-memory=6553600                                              \
 -o build/clay/index.wasm                                                  \
 main.c                                                                    \
-&& cp index.html build/clay/index.html && cp -r fonts/ build/clay/fonts   \
-&& cp index.html build/clay/index.html && cp -r images/ build/clay/images
+&& cp index.html build/index.html && cp -r fonts/ build/clay/fonts   \
+&& cp -r images/ build/clay/images

examples/termbox2-demo/CMakeLists.txt

@@ -8,7 +8,7 @@ set(FETCHCONTENT_QUIET FALSE)
 FetchContent_Declare(
     termbox2
     GIT_REPOSITORY "https://github.com/termbox/termbox2.git"
-    GIT_TAG "9c9281a9a4c971a2be57f8645e828ec99fd555e8"
+    GIT_TAG "ffd159c2a6106dd5eef338a6702ad15d4d4aa809"
     GIT_PROGRESS TRUE
     GIT_SHALLOW TRUE
 )
@@ -17,7 +17,7 @@ FetchContent_MakeAvailable(termbox2)
 FetchContent_Declare(
     stb
     GIT_REPOSITORY "https://github.com/nothings/stb.git"
-    GIT_TAG "f58f558c120e9b32c217290b80bad1a0729fbb2c"
+    GIT_TAG "fede005abaf93d9d7f3a679d1999b2db341b360f"
     GIT_PROGRESS TRUE
     GIT_SHALLOW TRUE
 )

examples/termbox2-demo/main.c

@@ -90,7 +90,7 @@ void component_text_pair(const char *key, const char *value)
 
 void component_termbox_settings(void)
 {
-    CLAY_AUTO_ID({
+    CLAY(CLAY_ID("Termbox Settings"), {
         .floating = {
             .attachTo = CLAY_ATTACH_TO_PARENT,
             .zIndex = 1,
@@ -509,13 +509,18 @@ Clay_RenderCommandArray CreateLayout(clay_tb_image *image1, clay_tb_image *image
 {
     Clay_BeginLayout();
     CLAY_AUTO_ID({
+        .clip = {
+            .vertical = false,
+            .horizontal = true,
+            .childOffset = Clay_GetScrollOffset(),
+        },
         .layout = {
             .sizing = {
                 .width = CLAY_SIZING_GROW(),
                 .height = CLAY_SIZING_GROW()
             },
             .childAlignment = {
-                .x = CLAY_ALIGN_X_CENTER,
+                .x = CLAY_ALIGN_X_LEFT,
                 .y = CLAY_ALIGN_Y_CENTER
             },
             .childGap = 64
@@ -714,12 +719,12 @@ void handle_termbox_events(void)
                             break;
                         }
                         case TB_KEY_MOUSE_WHEEL_UP: {
-                            Clay_Vector2 scrollDelta = { 0, 1 * Clay_Termbox_Cell_Height() };
+                            Clay_Vector2 scrollDelta = { 0.5 * Clay_Termbox_Cell_Width(), 0 };
                             Clay_UpdateScrollContainers(false, scrollDelta, 1);
                             break;
                         }
                         case TB_KEY_MOUSE_WHEEL_DOWN: {
-                            Clay_Vector2 scrollDelta = { 0, -1 * Clay_Termbox_Cell_Height() };
+                            Clay_Vector2 scrollDelta = { -0.5 * Clay_Termbox_Cell_Width(), 0 };
                             Clay_UpdateScrollContainers(false, scrollDelta, 1);
                             break;
                         }

renderers/termbox2/clay_renderer_termbox2.c

@@ -3,6 +3,8 @@
 
     Copyright (c) 2025 Mivirl
 
+    altered by Godje (Sep 2025)
+
     This software is provided 'as-is', without any express or implied warranty.
     In no event will the authors be held liable for any damages arising from the
     use of this software.
@@ -1616,6 +1618,20 @@ void Clay_Termbox_Render(Clay_RenderCommandArray commands)
 
                 Clay_StringSlice *text = &render_data.stringContents;
                 int32_t i = 0;
+
+                // culling text characters that are outside of the layout
+                int h_clip = 0 - cell_box.x;
+                while(h_clip > 0 && i < text->length){
+                    uint32_t ch = ' ';
+                    int codepoint_length = tb_utf8_char_to_unicode(&ch, text->chars + i);
+                    if (0 > codepoint_length) {
+                        clay_tb_assert(false, "Invalid utf8");
+                    }
+                    i += codepoint_length;
+                    h_clip -= 1;
+                }
+
+                // printing the rest of the characters
                 for (int y = box_begin_y; y < box_end_y; ++y) {
                     for (int x = box_begin_x; x < box_end_x;) {
                         uint32_t ch = ' ';