Merge 6824a942a7 into fd97d8179e

bindings/odin/examples/shared_layouts/clay_video_demo.odin

@@ -0,0 +1,191 @@
+// Mimicing the project structure for C examples
+package shared_layouts
+
+import clay "../../clay-odin"
+
+VIDEO_DEMO_FONT_ID_BODY :: 0
+
+@(private="file")
+COLOR_WHITE := clay.Color{255, 255, 255, 255}
+
+@(private="file")
+header_button :: proc(text: string) {
+    if clay.UI()({layout = {padding = {16, 16, 8, 8}}, backgroundColor = {140, 140, 140, 255}, cornerRadius = clay.CornerRadiusAll(5)}) {
+        clay.TextDynamic(text, clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 16, textColor = {255, 255, 255, 255}}))
+    }
+}
+
+@(private="file")
+dropdown_menu_item :: proc(text: string) {
+    if clay.UI()({layout = {padding = clay.PaddingAll(16)}}) {
+        clay.TextDynamic(text, clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 16, textColor = {255, 255, 255, 255}}))
+    }
+}
+
+@(private="file")
+Document :: struct {
+    title:    string,
+    contents: string,
+}
+
+@(private="file")
+documents := [5]Document{}
+
+@(private="file")
+Video_Demo_Data :: struct {
+    selectedDocumentIndex: int,
+    yOffset:               f32,
+}
+
+@(private="file")
+Sidebar_Click_Data :: struct {
+    requestedDocumentIndex: int,
+    selectedDocumentIndex:  ^int,
+}
+
+@(private="file")
+sidebar_callback :: proc "c" (elementId: clay.ElementId, pointerData: clay.PointerData, userData: rawptr) {
+    clickData := (^Sidebar_Click_Data)(userData)
+    // If this button was clicked
+    if (pointerData.state == .PressedThisFrame) {
+        if (clickData.requestedDocumentIndex >= 0 && clickData.requestedDocumentIndex < len(documents)) {
+            // Select the corresponding document
+            clickData.selectedDocumentIndex^ = clickData.requestedDocumentIndex
+        }
+    }
+}
+
+video_demo_init :: proc() -> Video_Demo_Data {
+    documents[0] = Document {
+        title    = "Squirrels",
+        contents = "The Secret Life of Squirrels: Nature's Clever Acrobats\nSquirrels are often overlooked creatures, dismissed as mere park inhabitants or backyard nuisances. Yet, beneath their fluffy tails and twitching noses lies an intricate world of cunning, agility, and survival tactics that are nothing short of fascinating. As one of the most common mammals in North America, squirrels have adapted to a wide range of environments from bustling urban centers to tranquil forests and have developed a variety of unique behaviors that continue to intrigue scientists and nature enthusiasts alike.\n\nMaster Tree Climbers\nAt the heart of a squirrel's skill set is its impressive ability to navigate trees with ease. Whether they're darting from branch to branch or leaping across wide gaps, squirrels possess an innate talent for acrobatics. Their powerful hind legs, which are longer than their front legs, give them remarkable jumping power. With a tail that acts as a counterbalance, squirrels can leap distances of up to ten times the length of their body, making them some of the best aerial acrobats in the animal kingdom.\nBut it's not just their agility that makes them exceptional climbers. Squirrels' sharp, curved claws allow them to grip tree bark with precision, while the soft pads on their feet provide traction on slippery surfaces. Their ability to run at high speeds and scale vertical trunks with ease is a testament to the evolutionary adaptations that have made them so successful in their arboreal habitats.\n\nFood Hoarders Extraordinaire\nSquirrels are often seen frantically gathering nuts, seeds, and even fungi in preparation for winter. While this behavior may seem like instinctual hoarding, it is actually a survival strategy that has been honed over millions of years. Known as \"scatter hoarding,\" squirrels store their food in a variety of hidden locations, often burying it deep in the soil or stashing it in hollowed-out tree trunks.\nInterestingly, squirrels have an incredible memory for the locations of their caches. Research has shown that they can remember thousands of hiding spots, often returning to them months later when food is scarce. However, they don't always recover every stash some forgotten caches eventually sprout into new trees, contributing to forest regeneration. This unintentional role as forest gardeners highlights the ecological importance of squirrels in their ecosystems.\n\nThe Great Squirrel Debate: Urban vs. Wild\nWhile squirrels are most commonly associated with rural or wooded areas, their adaptability has allowed them to thrive in urban environments as well. In cities, squirrels have become adept at finding food sources in places like parks, streets, and even garbage cans. However, their urban counterparts face unique challenges, including traffic, predators, and the lack of natural shelters. Despite these obstacles, squirrels in urban areas are often observed using human infrastructure such as buildings, bridges, and power lines as highways for their acrobatic escapades.\nThere is, however, a growing concern regarding the impact of urban life on squirrel populations. Pollution, deforestation, and the loss of natural habitats are making it more difficult for squirrels to find adequate food and shelter. As a result, conservationists are focusing on creating squirrel-friendly spaces within cities, with the goal of ensuring these resourceful creatures continue to thrive in both rural and urban landscapes.\n\nA Symbol of Resilience\nIn many cultures, squirrels are symbols of resourcefulness, adaptability, and preparation. Their ability to thrive in a variety of environments while navigating challenges with agility and grace serves as a reminder of the resilience inherent in nature. Whether you encounter them in a quiet forest, a city park, or your own backyard, squirrels are creatures that never fail to amaze with their endless energy and ingenuity.\nIn the end, squirrels may be small, but they are mighty in their ability to survive and thrive in a world that is constantly changing. So next time you spot one hopping across a branch or darting across your lawn, take a moment to appreciate the remarkable acrobat at work a true marvel of the natural world.\n",
+    }
+    documents[1] = Document {
+        title    = "Lorem Ipsum",
+        contents = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+    }
+    documents[2] = Document {
+        title    = "Vacuum Instructions",
+        contents = "Chapter 3: Getting Started - Unpacking and Setup\n\nCongratulations on your new SuperClean Pro 5000 vacuum cleaner! In this section, we will guide you through the simple steps to get your vacuum up and running. Before you begin, please ensure that you have all the components listed in the \"Package Contents\" section on page 2.\n\n1. Unboxing Your Vacuum\nCarefully remove the vacuum cleaner from the box. Avoid using sharp objects that could damage the product. Once removed, place the unit on a flat, stable surface to proceed with the setup. Inside the box, you should find:\n\n    The main vacuum unit\n    A telescoping extension wand\n    A set of specialized cleaning tools (crevice tool, upholstery brush, etc.)\n    A reusable dust bag (if applicable)\n    A power cord with a 3-prong plug\n    A set of quick-start instructions\n\n2. Assembling Your Vacuum\nBegin by attaching the extension wand to the main body of the vacuum cleaner. Line up the connectors and twist the wand into place until you hear a click. Next, select the desired cleaning tool and firmly attach it to the wand's end, ensuring it is securely locked in.\n\nFor models that require a dust bag, slide the bag into the compartment at the back of the vacuum, making sure it is properly aligned with the internal mechanism. If your vacuum uses a bagless system, ensure the dust container is correctly seated and locked in place before use.\n\n3. Powering On\nTo start the vacuum, plug the power cord into a grounded electrical outlet. Once plugged in, locate the power switch, usually positioned on the side of the handle or body of the unit, depending on your model. Press the switch to the \"On\" position, and you should hear the motor begin to hum. If the vacuum does not power on, check that the power cord is securely plugged in, and ensure there are no blockages in the power switch.\n\nNote: Before first use, ensure that the vacuum filter (if your model has one) is properly installed. If unsure, refer to \"Section 5: Maintenance\" for filter installation instructions.",
+    }
+    documents[3] = Document {
+        title    = "Article 4",
+        contents = "Article 4",
+    }
+    documents[4] = Document {
+        title    = "Article 5",
+        contents = "Article 5",
+    }
+
+    data := Video_Demo_Data{}
+    return data
+}
+
+video_demo_layout :: proc(data: ^Video_Demo_Data) -> clay.ClayArray(clay.RenderCommand) {
+    free_all(context.temp_allocator)
+
+    clay.BeginLayout()
+
+    layoutExpand := clay.Sizing {
+        width  = clay.SizingGrow(),
+        height = clay.SizingGrow(),
+    }
+
+    contentBackgroundColor := clay.Color{90, 90, 90, 255}
+
+    // Build UI here
+    if clay.UI(clay.ID("OuterContainer"))(
+    {backgroundColor = {43, 41, 51, 255}, layout = {layoutDirection = .TopToBottom, sizing = layoutExpand, padding = clay.PaddingAll(16), childGap = 16}},
+    ) {
+        // Child elements go inside braces
+        if clay.UI(clay.ID("HeaderBar"))(
+        {
+            layout = {sizing = {height = clay.SizingFixed(60), width = clay.SizingGrow()}, padding = {16, 16, 0, 0}, childGap = 16, childAlignment = {y = .Center}},
+            backgroundColor = contentBackgroundColor,
+            cornerRadius = clay.CornerRadiusAll(8),
+        },
+        ) {
+            // Header buttons go here
+            if clay.UI(clay.ID("FileButton"))({layout = {padding = {16, 16, 8, 8}}, backgroundColor = {140, 140, 140, 255}, cornerRadius = clay.CornerRadiusAll(5)}) {
+                clay.TextDynamic("File", clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 16, textColor = {255, 255, 255, 255}}))
+
+                fileMenuVisible := clay.PointerOver(clay.GetElementId(clay.MakeString("FileButton"))) || clay.PointerOver(clay.GetElementId(clay.MakeString("FileMenu")))
+
+                if (fileMenuVisible) {     // Below has been changed slightly to fix the small bug where the menu would dismiss when mousing over the top gap
+                    if clay.UI(clay.ID("FileMenu"))({floating = {attachTo = .Parent, attachment = {parent = .LeftBottom}}, layout = {padding = {0, 0, 8, 8}}}) {
+                        if clay.UI()(
+                        {
+                            layout = {layoutDirection = .TopToBottom, sizing = {width = clay.SizingFixed(200)}},
+                            backgroundColor = {40, 40, 40, 255},
+                            cornerRadius = clay.CornerRadiusAll(8),
+                        },
+                        ) {
+                            // Render dropdown items here
+                            dropdown_menu_item("New")
+                            dropdown_menu_item("Open")
+                            dropdown_menu_item("Close")
+                        }
+                    }
+                }
+            }
+            header_button("Edit")
+            if clay.UI()({layout = {sizing = {width = clay.SizingGrow()}}}) {}
+            header_button("Upload")
+            header_button("Media")
+            header_button("Support")
+        }
+
+        if clay.UI(clay.ID("LowerContent"))( {layout = {sizing = layoutExpand, childGap = 16}}) {
+            if clay.UI(
+                clay.ID("Sidebar"))(
+                {
+                    backgroundColor = contentBackgroundColor,
+                    layout = {layoutDirection = .TopToBottom, padding = clay.PaddingAll(16), childGap = 8, sizing = {width = clay.SizingFixed(250), height = clay.SizingGrow()}},
+                },
+            ) {
+                for document, i in documents {
+                    sidebarButtonLayout := clay.LayoutConfig {
+                        sizing = {width = clay.SizingGrow()},
+                        padding = clay.PaddingAll(16),
+                    }
+
+                    if (i == data.selectedDocumentIndex) {
+                        if clay.UI()({layout = sidebarButtonLayout, backgroundColor = {120, 120, 120, 255}, cornerRadius = clay.CornerRadiusAll(8)}) {
+                            clay.TextDynamic(document.title, clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 20, textColor = {255, 255, 255, 255}}))
+                        }
+                    } else {
+                        clickData := new_clone(Sidebar_Click_Data {
+                            requestedDocumentIndex = i,
+                            selectedDocumentIndex = &data.selectedDocumentIndex,
+                        }, context.temp_allocator)
+                        if clay.UI()(
+                        {layout = sidebarButtonLayout, backgroundColor = (clay.Color){120, 120, 120, clay.Hovered() ? 120 : 0}, cornerRadius = clay.CornerRadiusAll(8)},
+                        ) {
+                            clay.OnHover(sidebar_callback, rawptr(clickData))
+                            clay.TextDynamic(document.title, clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 20, textColor = {255, 255, 255, 255}}))
+                        }
+                    }
+                }
+            }
+
+            if clay.UI(
+                clay.ID("MainContent"))(
+                {
+                    backgroundColor = contentBackgroundColor,
+                    clip = {vertical = true, childOffset = clay.GetScrollOffset()},
+                    layout = {layoutDirection = .TopToBottom, childGap = 16, padding = clay.PaddingAll(16), sizing = layoutExpand},
+                },
+            ) {
+                selectedDocument := documents[data.selectedDocumentIndex]
+                clay.TextDynamic(selectedDocument.title, clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 24, textColor = COLOR_WHITE}))
+                clay.TextDynamic(selectedDocument.contents, clay.TextConfig({fontId = VIDEO_DEMO_FONT_ID_BODY, fontSize = 24, textColor = COLOR_WHITE}))
+            }
+        }
+    }
+
+    renderCommands := clay.EndLayout()
+    for i in 0 ..< renderCommands.length {
+        clay.RenderCommandArray_Get(&renderCommands, i).boundingBox.y += data.yOffset
+    }
+    return renderCommands
+}

bindings/odin/examples/video_demo_raylib/clay_renderer_raylib.odin

@@ -0,0 +1,206 @@
+// This renderer is almost copied from the clay-official-website one.
+// It might be worth pulling into a separate "renderers" package
+package video_demo_raylib
+
+import "core:fmt"
+import "base:runtime"
+import clay "../../clay-odin"
+import "core:math"
+import "core:strings"
+import rl "vendor:raylib"
+
+Raylib_Font :: struct {
+    fontId: u16,
+    font:   rl.Font,
+}
+
+clay_color_to_rl_color :: proc(color: clay.Color) -> rl.Color {
+    return {u8(color.r), u8(color.g), u8(color.b), u8(color.a)}
+}
+
+raylib_fonts := [dynamic]Raylib_Font{}
+
+measure_text :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: rawptr) -> clay.Dimensions {
+    line_width: f32 = 0
+
+    font := raylib_fonts[config.fontId].font
+
+    for i in 0 ..< text.length {
+        glyph_index := text.chars[i] - 32
+
+        glyph := font.glyphs[glyph_index]
+
+        if glyph.advanceX != 0 {
+            line_width += f32(glyph.advanceX)
+        } else {
+            line_width += font.recs[glyph_index].width + f32(glyph.offsetX)
+        }
+    }
+
+    // Slight change to support rendering at a different font size than was loaded
+    return {width = line_width / 2 * (f32(config.fontSize) / f32(font.baseSize / 2)), height = f32(config.fontSize)}
+}
+
+clay_raylib_render :: proc(render_commands: ^clay.ClayArray(clay.RenderCommand), allocator := context.temp_allocator) {
+    for i in 0 ..< render_commands.length {
+        render_command := clay.RenderCommandArray_Get(render_commands, i)
+        bounds := render_command.boundingBox
+
+        switch render_command.commandType {
+        case .None: // None
+        case .Text:
+            config := render_command.renderData.text
+
+            text := string(config.stringContents.chars[:config.stringContents.length])
+
+            // Raylib uses C strings instead of Odin strings, so we need to clone
+            // Assume this will be freed elsewhere since we default to the temp allocator
+            cstr_text := strings.clone_to_cstring(text, allocator)
+
+            font := raylib_fonts[config.fontId].font
+            rl.DrawTextEx(font, cstr_text, {bounds.x, bounds.y}, f32(config.fontSize), f32(config.letterSpacing), clay_color_to_rl_color(config.textColor))
+        case .Image:
+            config := render_command.renderData.image
+            tint := config.backgroundColor
+            if tint == 0 {
+                tint = {255, 255, 255, 255}
+            }
+
+            imageTexture := (^rl.Texture2D)(config.imageData)
+            rl.DrawTextureEx(imageTexture^, {bounds.x, bounds.y}, 0, bounds.width / f32(imageTexture.width), clay_color_to_rl_color(tint))
+        case .ScissorStart:
+            rl.BeginScissorMode(i32(math.round(bounds.x)), i32(math.round(bounds.y)), i32(math.round(bounds.width)), i32(math.round(bounds.height)))
+        case .ScissorEnd:
+            rl.EndScissorMode()
+        case .Rectangle:
+            config := render_command.renderData.rectangle
+            if config.cornerRadius.topLeft > 0 {
+                radius: f32 = (config.cornerRadius.topLeft * 2) / min(bounds.width, bounds.height)
+                draw_rect_rounded(bounds.x, bounds.y, bounds.width, bounds.height, radius, config.backgroundColor)
+            } else {
+                draw_rect(bounds.x, bounds.y, bounds.width, bounds.height, config.backgroundColor)
+            }
+        case .Border:
+            config := render_command.renderData.border
+            // Left border
+            if config.width.left > 0 {
+                draw_rect(
+                    bounds.x,
+                    bounds.y + config.cornerRadius.topLeft,
+                    f32(config.width.left),
+                    bounds.height - config.cornerRadius.topLeft - config.cornerRadius.bottomLeft,
+                    config.color,
+                )
+            }
+            // Right border
+            if config.width.right > 0 {
+                draw_rect(
+                    bounds.x + bounds.width - f32(config.width.right),
+                    bounds.y + config.cornerRadius.topRight,
+                    f32(config.width.right),
+                    bounds.height - config.cornerRadius.topRight - config.cornerRadius.bottomRight,
+                    config.color,
+                )
+            }
+            // Top border
+            if config.width.top > 0 {
+                draw_rect(
+                    bounds.x + config.cornerRadius.topLeft,
+                    bounds.y,
+                    bounds.width - config.cornerRadius.topLeft - config.cornerRadius.topRight,
+                    f32(config.width.top),
+                    config.color,
+                )
+            }
+            // Bottom border
+            if config.width.bottom > 0 {
+                draw_rect(
+                    bounds.x + config.cornerRadius.bottomLeft,
+                    bounds.y + bounds.height - f32(config.width.bottom),
+                    bounds.width - config.cornerRadius.bottomLeft - config.cornerRadius.bottomRight,
+                    f32(config.width.bottom),
+                    config.color,
+                )
+            }
+
+            // Rounded Borders
+            if config.cornerRadius.topLeft > 0 {
+                draw_arc(
+                    bounds.x + config.cornerRadius.topLeft, 
+                    bounds.y + config.cornerRadius.topLeft,
+                    config.cornerRadius.topLeft - f32(config.width.top),
+                    config.cornerRadius.topLeft,
+                    180,
+                    270,
+                    config.color,
+                )
+            }
+            if config.cornerRadius.topRight > 0 {
+                draw_arc(
+                    bounds.x + bounds.width - config.cornerRadius.topRight,
+                    bounds.y + config.cornerRadius.topRight,
+                    config.cornerRadius.topRight - f32(config.width.top),
+                    config.cornerRadius.topRight,
+                    270,
+                    360,
+                    config.color,
+                )
+            }
+            if config.cornerRadius.bottomLeft > 0 {
+                draw_arc(
+                    bounds.x + config.cornerRadius.bottomLeft,
+                    bounds.y + bounds.height - config.cornerRadius.bottomLeft,
+                    config.cornerRadius.bottomLeft - f32(config.width.top),
+                    config.cornerRadius.bottomLeft,
+                    90,
+                    180,
+                    config.color,
+                )
+            }
+            if config.cornerRadius.bottomRight > 0 {
+                draw_arc(
+                    bounds.x + bounds.width - config.cornerRadius.bottomRight, 
+                    bounds.y + bounds.height - config.cornerRadius.bottomRight,
+                    config.cornerRadius.bottomRight - f32(config.width.bottom),
+                    config.cornerRadius.bottomRight,
+                    0.1,
+                    90,
+                    config.color,
+                )
+            }
+        case clay.RenderCommandType.Custom:
+            // Implement custom element rendering here
+        }
+    }
+}
+
+// Helper procs, mainly for repeated conversions
+
+@(private = "file")
+draw_arc :: proc(x, y: f32, inner_rad, outer_rad: f32,start_angle, end_angle: f32, color: clay.Color){
+    rl.DrawRing(
+        {math.round(x),math.round(y)},
+        math.round(inner_rad),
+        outer_rad,
+        start_angle,
+        end_angle,
+        10,
+        clay_color_to_rl_color(color),
+    )
+}
+
+@(private = "file")
+draw_rect :: proc(x, y, w, h: f32, color: clay.Color) {
+    rl.DrawRectangle(
+        i32(math.round(x)), 
+        i32(math.round(y)), 
+        i32(math.round(w)), 
+        i32(math.round(h)), 
+        clay_color_to_rl_color(color)
+    )
+}
+
+@(private = "file")
+draw_rect_rounded :: proc(x,y,w,h: f32, radius: f32, color: clay.Color){
+    rl.DrawRectangleRounded({x,y,w,h},radius,8,clay_color_to_rl_color(color))
+}

bindings/odin/examples/video_demo_raylib/main.odin

@@ -0,0 +1,55 @@
+package video_demo_raylib
+
+import clay "../../clay-odin"
+import layout "../shared_layouts"
+import "base:runtime"
+import "core:fmt"
+import rl "vendor:raylib"
+
+errorHandler :: proc "c" (errorData: clay.ErrorData) {
+    runtime.print_string("Clay Error:\n\t")
+    runtime.print_string(string(errorData.errorText.chars[:errorData.errorText.length]))
+    runtime.print_byte('\n')
+}
+
+load_font :: proc(data: []byte, size: i32, id: u16) {
+    // Multiply size by two because we divide by two in the measurement function.
+    // This is for smooth fonts on retina displays, and helps with subpixel accuracy.
+    font := rl.LoadFontFromMemory(".ttf", raw_data(data), i32(len(data)), size * 2, nil, 0)
+    rl.SetTextureFilter(font.texture, .BILINEAR)
+    assign_at(&raylib_fonts, int(id), Raylib_Font{font = font, fontId = id})
+}
+
+// Load at compile time, directly into the binary
+ROBOTO :: #load("./Roboto-Regular.ttf")
+
+main :: proc() {
+    rl.SetConfigFlags({.VSYNC_HINT, .WINDOW_RESIZABLE, .MSAA_4X_HINT})
+    rl.InitWindow(1280, 720, "Raylib Odin Example")
+
+    minMemorySize := (uint)(clay.MinMemorySize())
+    arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, make([^]u8, minMemorySize))
+    clay.Initialize(arena, {f32(rl.GetScreenWidth()), f32(rl.GetScreenHeight())}, {handler = errorHandler})
+    clay.SetMeasureTextFunction(measure_text, nil)
+
+    load_font(ROBOTO, 16, layout.VIDEO_DEMO_FONT_ID_BODY)
+
+    data := layout.video_demo_init()
+
+    for !rl.WindowShouldClose() {
+        clay.SetLayoutDimensions({width = f32(rl.GetScreenWidth()), height = f32(rl.GetScreenHeight())})
+
+        clay.SetPointerState(rl.GetMousePosition(), rl.IsMouseButtonDown(.LEFT))
+        clay.UpdateScrollContainers(true, rl.GetMouseWheelMoveV(), rl.GetFrameTime())
+
+        commands := layout.video_demo_layout(&data)
+
+        rl.BeginDrawing()
+
+        rl.ClearBackground(0)
+        clay_raylib_render(&commands)
+
+        rl.EndDrawing()
+    }
+
+}

bindings/odin/examples/video_demo_sdl/README.md

@@ -0,0 +1,4 @@
+Odin doesn't directly package SDL, so on Windows, you'll want to copy `SDL3.dll` and `SDL3_ttf.dll` into this directory from odin's `vendor/sdl3` directory located next to the compiler. You can use `odin root` to figure out where your compiler is installed. On Linux and Mac, you should install SDL3 via your package manager
+
+## Running on Windows
+In an embdedded termninal, missing dependencies will fail silently on Windows, so if you have any unexplainable crashes, make sure the DLLs are in your current working directory (the path you run the command from). It's easiest to just copy them next to this file, and run from here as well.

bindings/odin/examples/video_demo_sdl/main.odin

@@ -0,0 +1,116 @@
+package video_demo_sdl
+
+import "core:math"
+import clay "../../clay-odin"
+import layout "../shared_layouts"
+import "base:runtime"
+import "core:fmt"
+import sdl "vendor:sdl3"
+import "vendor:sdl3/ttf"
+
+App_State :: struct {
+    window:       ^sdl.Window,
+    rendererData: Clay_SDL_Render_Data,
+}
+
+state: App_State
+
+errorHandler :: proc "c" (errorData: clay.ErrorData) {
+    runtime.print_string("Clay Error:\n\t")
+    runtime.print_string(string(errorData.errorText.chars[:errorData.errorText.length]))
+    runtime.print_byte('\n')
+}
+
+load_font :: proc(data: []byte, size: f32, id: u16, fonts: ^[dynamic]^ttf.Font) {
+    font_stream := sdl.IOFromConstMem(raw_data(data), uint(len(data)))
+    font := ttf.OpenFontIO(font_stream, true, size * 2)
+    assign_at(fonts, int(id), font)
+}
+
+measure_text :: proc "c" (text: clay.StringSlice, config: ^clay.TextElementConfig, userData: rawptr) -> clay.Dimensions {
+
+    fonts := (^[dynamic]^ttf.Font)(userData)
+    font := fonts[config.fontId]
+    width, height: i32
+
+    ttf.SetFontSize(font, px_to_pt(f32(config.fontSize)))
+    if (!ttf.GetStringSize(font, cstring(text.chars), uint(text.length), &width, &height)) {
+        sdl.LogError(i32(sdl.LogCategory.ERROR), "Failed to measure text: %s", sdl.GetError())
+    }
+
+    return {f32(width), f32(height)}
+}
+// Load at compile time, directly into the binary
+ROBOTO := #load("./Roboto-Regular.ttf")
+
+main :: proc() {
+    if !sdl.Init({.VIDEO}) {
+        fmt.panicf("Failed to initialize sdl: %s", sdl.GetError())
+    }
+
+    if !ttf.Init() {
+        fmt.panicf("Failed to initialize SDL TTF: %s", sdl.GetError())
+    }
+
+    window: ^sdl.Window
+    renderer: ^sdl.Renderer
+    sdl.CreateWindowAndRenderer("SDL Odin Example", 1280, 720, {.RESIZABLE}, &window, &renderer)
+
+    state.window = window
+    state.rendererData.renderer = renderer
+    state.rendererData.text_engine = ttf.CreateRendererTextEngine(renderer)
+
+    minMemorySize := uint(clay.MinMemorySize())
+    arena: clay.Arena = clay.CreateArenaWithCapacityAndMemory(minMemorySize, make([^]u8, minMemorySize))
+    clay.Initialize(arena, {1280, 720}, {handler = errorHandler})
+    clay.SetMeasureTextFunction(measure_text, &state.rendererData.fonts)
+
+    load_font(ROBOTO, 16, layout.VIDEO_DEMO_FONT_ID_BODY, &state.rendererData.fonts)
+
+    data := layout.video_demo_init()
+
+    event: sdl.Event
+    done := false
+
+    NOW := sdl.GetPerformanceCounter()
+    LAST: u64 = 0
+
+    window_width, window_height: i32
+
+    for !done {
+        scrollDelta: clay.Vector2
+
+        for sdl.PollEvent(&event) {
+            if event.type == .QUIT {
+                done = true
+            } else if event.type == .MOUSE_WHEEL {
+                scrollDelta.x = event.wheel.x
+                scrollDelta.y = event.wheel.y
+            }
+        }
+
+        LAST = NOW
+        NOW = sdl.GetPerformanceCounter()
+        deltaTime := (f64(NOW - LAST) / f64(sdl.GetPerformanceFrequency()))
+
+        sdl.GetWindowSize(window, &window_width, &window_height)
+
+        clay.SetLayoutDimensions({width = f32(window_width), height = f32(window_height)})
+
+		mousePosition : clay.Vector2
+		mouseState := sdl.GetMouseState(&mousePosition.x, &mousePosition.y)
+		clay.SetPointerState(mousePosition, .LEFT in mouseState)
+
+		clay.UpdateScrollContainers(false, scrollDelta, f32(deltaTime))
+		clay.SetLayoutDimensions({f32(window_width), f32(window_height)})
+
+        commands := layout.video_demo_layout(&data)
+
+		sdl.SetRenderDrawColor(renderer, 0, 0, 0, 255)
+		sdl.RenderClear(renderer)
+		sdl_render_clay_commands(&state.rendererData, &commands)
+
+		sdl.RenderPresent(renderer)
+    }
+
+}

bindings/odin/examples/video_demo_sdl/renderer.odin

@@ -0,0 +1,311 @@
+// Basic port of the C example SDL3 renderer, with a dynamic array of fonts.
+package video_demo_sdl
+
+import clay "../../clay-odin"
+import "core:math"
+import "core:math/linalg"
+import sdl "vendor:sdl3"
+import "vendor:sdl3/ttf"
+
+Clay_SDL_Render_Data :: struct {
+    renderer:    ^sdl.Renderer,
+    text_engine: ^ttf.TextEngine,
+    fonts:       [dynamic]^ttf.Font,
+}
+
+// SDL_ttf works in pts, but clay expects pixels.
+// 0.85 looks correct from what I've seen, but this calculation is probably incorrect.
+px_to_pt :: proc "contextless" (pixels: f32) -> f32 {
+    return pixels * 0.85
+}
+
+
+/* Global for convenience. Even in 4K this is enough for smooth curves (low radius or rect size coupled with
+ * no AA or low resolution might make it appear as jagged curves) */
+NUM_CIRCLE_SEGMENTS :: 16
+
+//all rendering is performed by a single SDL call, avoiding multiple RenderRect + plumbing choice for circles.
+@(private = "file")
+fill_rounded_rect :: proc(rendererData: ^Clay_SDL_Render_Data, rect: sdl.FRect, cornerRadius: f32, _color: clay.Color) {
+    color := sdl.FColor(_color / 255)
+
+    indexCount: i32 = 0
+    vertexCount: i32 = 0
+
+    minRadius := min(rect.w, rect.h) / 2
+    clampedRadius := min(cornerRadius, minRadius)
+
+    numCircleSegments := max(NUM_CIRCLE_SEGMENTS, i32(clampedRadius * 0.5))
+
+    totalVertices := 4 + (4 * (numCircleSegments * 2)) + 2 * 4
+    totalIndices := 6 + (4 * (numCircleSegments * 3)) + 6 * 4
+
+    // Maybe instrinsics.alloca these?
+    vertices := make([]sdl.Vertex, totalVertices, allocator = context.temp_allocator)
+    indices := make([]i32, totalIndices, allocator = context.temp_allocator)
+
+    //define center rectangle
+    vertices[vertexCount + 0] = {{rect.x + clampedRadius, rect.y + clampedRadius}, color, {0, 0}} //0 center TL
+    vertices[vertexCount + 1] = {{rect.x + rect.w - clampedRadius, rect.y + clampedRadius}, color, {1, 0}} //1 center TR
+    vertices[vertexCount + 2] = {{rect.x + rect.w - clampedRadius, rect.y + rect.h - clampedRadius}, color, {1, 1}} //2 center BR
+    vertices[vertexCount + 3] = {{rect.x + clampedRadius, rect.y + rect.h - clampedRadius}, color, {0, 1}} //3 center BL
+
+    vertexCount += 4
+
+    indices[indexCount + 0] = 0
+    indices[indexCount + 1] = 1
+    indices[indexCount + 2] = 3
+    indices[indexCount + 3] = 1
+    indices[indexCount + 4] = 2
+    indices[indexCount + 5] = 3
+
+    indexCount += 6
+
+    //define rounded corners as triangle fans
+    step := (f32(math.PI) / 2) / f32(numCircleSegments)
+    for i in 0 ..< numCircleSegments {
+        angle1 := f32(i) * step
+        angle2 := (f32(i) + 1) * step
+
+        for j in i32(0) ..< 4 {     // Iterate over four corners
+            cx, cy, signX, signY: f32
+
+            switch j {
+            case 0:
+                cx = rect.x + clampedRadius
+                cy = rect.y + clampedRadius
+                signX = -1
+                signY = -1
+            // Top-left
+            case 1:
+                cx = rect.x + rect.w - clampedRadius
+                cy = rect.y + clampedRadius
+                signX = 1
+                signY = -1 // Top-right
+            case 2:
+                cx = rect.x + rect.w - clampedRadius
+                cy = rect.y + rect.h - clampedRadius
+                signX = 1
+                signY = 1 // Bottom-right
+            case 3:
+                cx = rect.x + clampedRadius
+                cy = rect.y + rect.h - clampedRadius
+                signX = -1
+                signY = 1 // Bottom-left
+            case:
+                return
+            }
+
+            vertices[vertexCount + 0] = {{cx + math.cos(angle1) * clampedRadius * signX, cy + math.sin(angle1) * clampedRadius * signY}, color, {0, 0}}
+            vertices[vertexCount + 1] = {{cx + math.cos(angle2) * clampedRadius * signX, cy + math.sin(angle2) * clampedRadius * signY}, color, {0, 0}}
+
+            vertexCount += 2
+
+            indices[indexCount + 0] = j // Connect to corresponding central rectangle vertex
+            indices[indexCount + 1] = vertexCount - 2
+            indices[indexCount + 2] = vertexCount - 1
+            indexCount += 3
+        }
+    }
+
+    //Define edge rectangles
+    // Top edge
+    vertices[vertexCount + 0] = {{rect.x + clampedRadius, rect.y}, color, {0, 0}} //TL
+    vertices[vertexCount + 1] = {{rect.x + rect.w - clampedRadius, rect.y}, color, {1, 0}} //TR
+
+    vertexCount += 2
+
+    indices[indexCount + 0] = 0
+    indices[indexCount + 1] = vertexCount - 2 //TL
+    indices[indexCount + 2] = vertexCount - 1 //TR
+    indices[indexCount + 3] = 1
+    indices[indexCount + 4] = 0
+    indices[indexCount + 5] = vertexCount - 1 //TR
+    indexCount += 6
+    // Right edge
+    vertices[vertexCount + 0] = {{rect.x + rect.w, rect.y + clampedRadius}, color, {1, 0}} //RT
+    vertices[vertexCount + 1] = {{rect.x + rect.w, rect.y + rect.h - clampedRadius}, color, {1, 1}} //RB
+    vertexCount += 2
+
+    indices[indexCount + 0] = 1
+    indices[indexCount + 1] = vertexCount - 2 //RT
+    indices[indexCount + 2] = vertexCount - 1 //RB
+    indices[indexCount + 3] = 2
+    indices[indexCount + 4] = 1
+    indices[indexCount + 5] = vertexCount - 1 //RB
+    indexCount += 6
+
+    // Bottom edge
+    vertices[vertexCount + 0] = {{rect.x + rect.w - clampedRadius, rect.y + rect.h}, color, {1, 1}} //BR
+    vertices[vertexCount + 1] = {{rect.x + clampedRadius, rect.y + rect.h}, color, {0, 1}} //BL
+    vertexCount += 2
+
+    indices[indexCount + 0] = 2
+    indices[indexCount + 1] = vertexCount - 2 //BR
+    indices[indexCount + 2] = vertexCount - 1 //BL
+    indices[indexCount + 3] = 3
+    indices[indexCount + 4] = 2
+    indices[indexCount + 5] = vertexCount - 1 //BL
+    indexCount += 6
+
+    // Left edge
+    vertices[vertexCount + 0] = {{rect.x, rect.y + rect.h - clampedRadius}, color, {0, 1}} //LB
+    vertices[vertexCount + 1] = {{rect.x, rect.y + clampedRadius}, color, {0, 0}} //LT
+    vertexCount += 2
+
+    indices[indexCount + 0] = 3
+    indices[indexCount + 1] = vertexCount - 2 //LB
+    indices[indexCount + 2] = vertexCount - 1 //LT
+    indices[indexCount + 3] = 0
+    indices[indexCount + 4] = 3
+    indices[indexCount + 5] = vertexCount - 1 //LT
+    indexCount += 6
+
+    // Render everything
+    sdl.RenderGeometry(rendererData.renderer, nil, raw_data(vertices), vertexCount, raw_data(indices), indexCount)
+}
+
+@(private = "file")
+render_arc :: proc(rendererData: ^Clay_SDL_Render_Data, center: sdl.FPoint, radius: f32, startAngle: f32, endAngle: f32, thickness: f32, color: clay.Color) {
+    sdl.SetRenderDrawColor(rendererData.renderer, clay_to_sdl_color(color))
+
+    radStart := math.to_radians(startAngle)
+    radEnd := math.to_radians(endAngle)
+
+    numCircleSegments := max(NUM_CIRCLE_SEGMENTS, i32(radius * 1.5)) //increase circle segments for larger circles, 1.5 is arbitrary.
+
+    angleStep := (radEnd - radStart) / f32(numCircleSegments)
+    thicknessStep: f32 = 0.4 //arbitrary value to avoid overlapping lines. Changing THICKNESS_STEP or numCircleSegments might cause artifacts.
+
+    for t := thicknessStep; t < thickness - thicknessStep; t += thicknessStep {
+        points := make([]sdl.FPoint, numCircleSegments + 1, allocator = context.temp_allocator)
+        clampedRadius := max(radius - t, 1)
+
+        for i in 0 ..= numCircleSegments {
+            angle := radStart + f32(i) * angleStep
+            points[i] = sdl.FPoint{math.round(center.x + math.cos(angle) * clampedRadius), math.round(center.y + math.sin(angle) * clampedRadius)}
+        }
+        sdl.RenderLines(rendererData.renderer, raw_data(points), numCircleSegments + 1)
+    }
+}
+
+@(private = "file")
+current_clipping_rect: sdl.Rect
+
+clay_to_sdl_color :: proc(color: clay.Color) -> (r, g, b, a: u8) {
+    return expand_values(linalg.array_cast(color, u8))
+}
+
+sdl_render_clay_commands :: proc(renderer_data: ^Clay_SDL_Render_Data, commands: ^clay.ClayArray(clay.RenderCommand)) {
+    for i in 0 ..< commands.length {
+        cmd := clay.RenderCommandArray_Get(commands, i)
+        bounding_box := cmd.boundingBox
+        rect := sdl.FRect{bounding_box.x, bounding_box.y, bounding_box.width, bounding_box.height}
+
+        #partial switch cmd.commandType {
+        case .Rectangle:
+            config := &cmd.renderData.rectangle
+            sdl.SetRenderDrawBlendMode(renderer_data.renderer, sdl.BLENDMODE_BLEND)
+            sdl.SetRenderDrawColor(renderer_data.renderer, clay_to_sdl_color(config.backgroundColor))
+            if config.cornerRadius.topLeft > 0 {
+                fill_rounded_rect(renderer_data, rect, config.cornerRadius.topLeft, config.backgroundColor)
+            } else {
+                sdl.RenderFillRect(renderer_data.renderer, &rect)
+            }
+
+        case .Text:
+            config := &cmd.renderData.text
+            font := renderer_data.fonts[config.fontId]
+            ttf.SetFontSize(font, px_to_pt(f32(config.fontSize)))
+            text := ttf.CreateText(renderer_data.text_engine, font, cstring(config.stringContents.chars), uint(config.stringContents.length))
+            ttf.SetTextColor(text, clay_to_sdl_color(config.textColor))
+            ttf.DrawRendererText(text, rect.x, rect.y)
+            ttf.DestroyText(text)
+
+        case .Border:
+            config := &cmd.renderData.border
+
+            minRadius := min(rect.w, rect.h) / 2
+            clampedRadii := clay.CornerRadius {
+                topLeft     = min(config.cornerRadius.topLeft, minRadius),
+                topRight    = min(config.cornerRadius.topRight, minRadius),
+                bottomLeft  = min(config.cornerRadius.bottomLeft, minRadius),
+                bottomRight = min(config.cornerRadius.bottomRight, minRadius),
+            }
+            //edges
+            sdl.SetRenderDrawColor(renderer_data.renderer, clay_to_sdl_color(config.color))
+            if config.width.left > 0 {
+                starting_y := rect.y + clampedRadii.topLeft
+                length := rect.h - clampedRadii.topLeft - clampedRadii.bottomLeft
+                line := sdl.FRect{rect.x - 1, starting_y, f32(config.width.left), length}
+                sdl.RenderFillRect(renderer_data.renderer, &line)
+            }
+            if config.width.right > 0 {
+                starting_x := rect.x + rect.w - f32(config.width.right) + 1
+                starting_y := rect.y + clampedRadii.topRight
+                length := rect.h - clampedRadii.topRight - clampedRadii.bottomRight
+                line := sdl.FRect{starting_x, starting_y, f32(config.width.right), length}
+                sdl.RenderFillRect(renderer_data.renderer, &line)
+            }
+            if config.width.top > 0 {
+                starting_x := rect.x + clampedRadii.topLeft
+                length := rect.w - clampedRadii.topLeft - clampedRadii.topRight
+                line := sdl.FRect{starting_x, rect.y - 1, length, f32(config.width.top)}
+                sdl.RenderFillRect(renderer_data.renderer, &line)
+            }
+            if config.width.bottom > 0 {
+                starting_x := rect.x + clampedRadii.bottomLeft
+                starting_y := rect.y + rect.h - f32(config.width.bottom) + 1
+                length := rect.w - clampedRadii.bottomLeft - clampedRadii.bottomRight
+                line := sdl.FRect{starting_x, starting_y, length, f32(config.width.bottom)}
+                sdl.SetRenderDrawColor(renderer_data.renderer, clay_to_sdl_color(config.color))
+                sdl.RenderFillRect(renderer_data.renderer, &line)
+            }
+            //corners
+            if config.cornerRadius.topLeft > 0 {
+                centerX := rect.x + clampedRadii.topLeft - 1
+                centerY := rect.y + clampedRadii.topLeft - 1
+                render_arc(renderer_data, {centerX, centerY}, clampedRadii.topLeft, 180, 270, f32(config.width.top), config.color)
+            }
+            if config.cornerRadius.topRight > 0 {
+                centerX := rect.x + rect.w - clampedRadii.topRight
+                centerY := rect.y + clampedRadii.topRight - 1
+                render_arc(renderer_data, {centerX, centerY}, clampedRadii.topRight, 270, 360, f32(config.width.top), config.color)
+            }
+            if config.cornerRadius.bottomLeft > 0 {
+                centerX := rect.x + clampedRadii.bottomLeft - 1
+                centerY := rect.y + rect.h - clampedRadii.bottomLeft
+                render_arc(renderer_data, {centerX, centerY}, clampedRadii.bottomLeft, 90, 180, f32(config.width.bottom), config.color)
+            }
+            if config.cornerRadius.bottomRight > 0 {
+                centerX := rect.x + rect.w - clampedRadii.bottomRight
+                centerY := rect.y + rect.h - clampedRadii.bottomRight
+                render_arc(renderer_data, {centerX, centerY}, clampedRadii.bottomRight, 0, 90, f32(config.width.bottom), config.color)
+            }
+
+
+        case .ScissorStart:
+            boundingBox := cmd.boundingBox
+            current_clipping_rect = sdl.Rect {
+                x = i32(boundingBox.x),
+                y = i32(boundingBox.y),
+                w = i32(boundingBox.width),
+                h = i32(boundingBox.height),
+            }
+            sdl.SetRenderClipRect(renderer_data.renderer, &current_clipping_rect)
+
+        case .ScissorEnd:
+            sdl.SetRenderClipRect(renderer_data.renderer, nil)
+
+
+        case .Image:
+            texture := (^sdl.Texture)(cmd.renderData.image.imageData)
+            dest := sdl.FRect{rect.x, rect.y, rect.w, rect.h}
+            sdl.RenderTexture(renderer_data.renderer, texture, nil, &dest)
+
+
+        case:
+            sdl.Log("Unknown render command type: %d", cmd.commandType)
+        }
+    }
+}