Add widget skinning system with 9-slice support and RPG GUI demo

Introduce a parallel skin system that lets users apply custom textures to
ClayUI widgets. When a skin image is set for a widget part, it emits an
Image render command instead of a Rectangle, with optional 9-slice
(9-patch) rendering for proper stretching of bordered textures.

New types: NineSlice, SkinImage, StateImages, ClayUISkin, and per-widget
skin structs (ButtonSkin, CheckboxSkin, SliderSkin, ToggleSkin, etc.).
Extended ImageConfig/ImageRenderData with Slice and Tint fields. Updated
8 widgets (Button, Checkbox, Slider, Toggle, ProgressBar, Scrollbar,
Panel, Window) plus RadioGroup with optional skin parameters. Zero
overhead when no skin is set.

Includes RPG GUI example tab using CC-BY 3.0 sprites by Lamoot with
9-slice buttons, checkbox/radio sprites, and parchment panel backgrounds.
Added 9-slice rendering to RaylibRenderer.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: andreakarasho

src/Clay.Example/Program.cs

@@ -41,12 +41,15 @@
 );
 Clay.Clay.TextEditSetClipboard(new RaylibClipboard());
 
+// Load RPG skin assets
+RpgSkin.Load();
+
 // ============ Application State ============
 
 // Sidebar
 string[] pages = ["Overview", "Buttons", "Text Input", "Checkboxes & Toggles", "Sliders & Progress",
     "Radio Group", "Tree View", "Layout Helpers", "Text Styles", "Color Picker",
-    "ListBox & Combo", "Scroll Areas", "Windows", "Popups & Context Menus", "Theming", "Disabled States"];
+    "ListBox & Combo", "Scroll Areas", "Windows", "Popups & Context Menus", "Theming", "Disabled States", "RPG Skin"];
 int selectedPage = 0;
 
 // Widget state
@@ -86,6 +89,15 @@
 float disabledDemoSlider = 0.6f;
 string disabledDemoText = "Can't edit this";
 
+// RPG Skin demo state
+bool rpgSkinCheckbox = false;
+bool rpgSkinToggle = true;
+float rpgSkinSlider = 0.4f;
+float rpgSkinProgress = 0.65f;
+int rpgSkinRadio = 0;
+string[] rpgRadioOptions = ["Warrior", "Mage", "Ranger"];
+ClayUISkin? rpgSkin = null;
+
 // Debug
 bool debugWindowOpen = false;
 
@@ -167,6 +179,7 @@
     Raylib.EndDrawing();
 }
 
+RpgSkin.Unload();
 Clay.Clay.Shutdown();
 Raylib.CloseWindow();
 
@@ -312,6 +325,7 @@ void RenderContent()
         case 13: PagePopups(); break;
         case 14: PageTheming(); break;
         case 15: PageDisabledStates(); break;
+        case 16: PageRpgSkin(); break;
     }
 
     ClayUI.EndScrollArea();
@@ -769,6 +783,152 @@ void PageDisabledStates()
     ClayUI.Button("This works!");
 }
 
+void PageRpgSkin()
+{
+    // Lazily create the skin on first use
+    rpgSkin ??= RpgSkin.CreateSkin();
+
+    ClayUI.Label("Custom skin using RPG GUI sprites (CC-BY 3.0, by Lamoot).");
+    ClayUI.Label("Widgets below use image textures instead of solid-color rectangles.");
+    ClayUI.Label("The same widgets, same API -- just with ClayUI.Skin set.");
+    ClayUI.Space(12);
+
+    // Apply the RPG skin for the rest of this page
+    var previousSkin = ClayUI.Skin;
+    ClayUI.Skin = rpgSkin;
+
+    // Style overrides sized for the ornate RPG sprites
+    var rpgButton = new ButtonStyle
+    {
+        Padding = Padding.Symmetric(52, 14),
+        TextColor = Color.Rgba(230, 215, 180),
+        FontSize = 16
+    };
+    var rpgCheckbox = new CheckboxStyle
+    {
+        BoxSize = 28,
+        BoxCornerRadius = 0,
+        TextColor = Color.Rgba(220, 210, 180),
+        FontSize = 15
+    };
+    var rpgToggle = new ToggleStyle
+    {
+        TrackWidth = 60,
+        TrackHeight = 30,
+        KnobSize = 26,
+        TextColor = Color.Rgba(220, 210, 180),
+        FontSize = 15
+    };
+    var rpgSlider = new SliderStyle
+    {
+        TrackHeight = 20,
+        TextColor = Color.Rgba(220, 210, 180),
+        ValueTextColor = Color.Rgba(200, 190, 160),
+        FontSize = 15
+    };
+    var rpgProgress = new ProgressBarStyle
+    {
+        Height = 20,
+        CornerRadius = 0
+    };
+    var rpgPanel = new PanelStyle
+    {
+        TitleColor = Color.Rgba(80, 60, 30),
+        TitleFontSize = 18,
+        Padding = Padding.All(20),
+        ChildGap = 8
+    };
+    var rpgLabel = new LabelStyle
+    {
+        TextColor = Color.Rgba(60, 45, 20),
+        FontSize = 15
+    };
+
+    // --- Buttons ---
+    ClayUI.Label("Buttons:");
+    ClayUI.Space(4);
+    ClayUI.BeginHorizontal(gap: 16);
+    ClayUI.Button("Attack", rpgButton);
+    ClayUI.Button("Defend", rpgButton);
+    ClayUI.Button("Magic", rpgButton);
+    ClayUI.EndHorizontal();
+    ClayUI.Space(4);
+    ClayUI.Button("Inventory", rpgButton);
+
+    ClayUI.Space(16);
+    ClayUI.Separator();
+    ClayUI.Space(8);
+
+    // --- Checkboxes ---
+    ClayUI.Label("Checkboxes:");
+    ClayUI.Space(4);
+    ClayUI.Checkbox("Show minimap", ref rpgSkinCheckbox, rpgCheckbox);
+    bool tempCb = true;
+    ClayUI.Checkbox("Enable sound", ref tempCb, rpgCheckbox);
+
+    ClayUI.Space(16);
+    ClayUI.Separator();
+    ClayUI.Space(8);
+
+    // --- Radio Group ---
+    ClayUI.Label("Radio Group:");
+    ClayUI.Space(4);
+    var rpgRadio = new RadioGroupStyle
+    {
+        CircleSize = 24,
+        DotSize = 14,
+        TextColor = Color.Rgba(220, 210, 180),
+        LabelColor = Color.Rgba(180, 170, 140),
+        FontSize = 15
+    };
+    ClayUI.RadioGroup("Class", ref rpgSkinRadio, rpgRadioOptions, rpgRadio);
+
+    ClayUI.Space(16);
+    ClayUI.Separator();
+    ClayUI.Space(8);
+
+    // --- Toggle ---
+    ClayUI.Label("Toggle:");
+    ClayUI.Space(4);
+    ClayUI.Toggle("Fullscreen", ref rpgSkinToggle, rpgToggle);
+
+    ClayUI.Space(16);
+    ClayUI.Separator();
+    ClayUI.Space(8);
+
+    // --- Slider ---
+    ClayUI.Label("Slider:");
+    ClayUI.Space(4);
+    ClayUI.Slider("Volume", ref rpgSkinSlider, 0, 1, rpgSlider);
+
+    ClayUI.Space(16);
+    ClayUI.Separator();
+    ClayUI.Space(8);
+
+    // --- Progress Bar ---
+    ClayUI.Label("Progress Bar:");
+    ClayUI.Space(4);
+    rpgSkinProgress += Raylib.GetFrameTime() * 0.05f;
+    if (rpgSkinProgress > 1f) rpgSkinProgress = 0f;
+    ClayUI.ProgressBar(rpgSkinProgress, style: rpgProgress);
+
+    ClayUI.Space(16);
+    ClayUI.Separator();
+    ClayUI.Space(8);
+
+    // --- Panel ---
+    ClayUI.Label("Panel:");
+    ClayUI.Space(4);
+    ClayUI.BeginPanel("Quest Log", rpgPanel);
+    ClayUI.Label("- Defeat the dragon", rpgLabel);
+    ClayUI.Label("- Find the lost sword", rpgLabel);
+    ClayUI.Label("- Return to the village", rpgLabel);
+    ClayUI.EndPanel();
+
+    // Restore previous skin
+    ClayUI.Skin = previousSkin;
+}
+
 // ============ Demo Windows ============
 
 void RenderDemoWindows()

src/Clay.Example/RaylibRenderer.cs

@@ -241,14 +241,67 @@ private void RenderImage(BoundingBox box, ImageRenderData data)
         if (data.ImageData is not Texture texture)
             return;
 
-        var position = new System.Numerics.Vector2(box.X, box.Y);
+        var tint = data.BackgroundColor.A > 0 ? ToRayColor(data.BackgroundColor) : Raylib.WHITE;
+
+        if (data.Slice.HasSlice)
+        {
+            RenderNineSlice(box, texture, data.Slice, tint);
+        }
+        else
+        {
+            // Stretch to fill the bounding box
+            var source = new Rectangle(0, 0, texture.width, texture.height);
+            var dest = new Rectangle(box.X, box.Y, box.Width, box.Height);
+            Raylib.DrawTexturePro(texture, source, dest,
+                new System.Numerics.Vector2(0, 0), 0, tint);
+        }
+    }
+
+    private static void RenderNineSlice(BoundingBox box, Texture texture, NineSlice slice, RayColor tint)
+    {
+        float srcW = texture.width;
+        float srcH = texture.height;
+        float sl = slice.Left, sr = slice.Right, st = slice.Top, sb = slice.Bottom;
+
+        // Destination insets — clamp so corners never exceed the dest size
+        float dl = Math.Min(sl, box.Width * 0.5f);
+        float dr = Math.Min(sr, box.Width * 0.5f);
+        float dt = Math.Min(st, box.Height * 0.5f);
+        float db = Math.Min(sb, box.Height * 0.5f);
+
+        float midSrcW = srcW - sl - sr;
+        float midSrcH = srcH - st - sb;
+        float midDstW = box.Width - dl - dr;
+        float midDstH = box.Height - dt - db;
+
+        var origin = new System.Numerics.Vector2(0, 0);
+
+        // Helper to draw one patch
+        void Patch(float sx, float sy, float sw, float sh, float dx, float dy, float dw, float dh)
+        {
+            if (sw <= 0 || sh <= 0 || dw <= 0 || dh <= 0) return;
+            Raylib.DrawTexturePro(texture,
+                new Rectangle(sx, sy, sw, sh),
+                new Rectangle(dx, dy, dw, dh),
+                origin, 0, tint);
+        }
+
+        float x = box.X, y = box.Y;
+
+        // Top row
+        Patch(0, 0, sl, st, x, y, dl, dt);                               // top-left
+        Patch(sl, 0, midSrcW, st, x + dl, y, midDstW, dt);               // top-center
+        Patch(srcW - sr, 0, sr, st, x + dl + midDstW, y, dr, dt);        // top-right
 
-        // Calculate scale to fit bounding box
-        float scaleX = box.Width / texture.width;
-        float scaleY = box.Height / texture.height;
-        float scale = Math.Min(scaleX, scaleY);
+        // Middle row
+        Patch(0, st, sl, midSrcH, x, y + dt, dl, midDstH);              // mid-left
+        Patch(sl, st, midSrcW, midSrcH, x + dl, y + dt, midDstW, midDstH); // center
+        Patch(srcW - sr, st, sr, midSrcH, x + dl + midDstW, y + dt, dr, midDstH); // mid-right
 
-        Raylib.DrawTextureEx(texture, position, 0, scale, Raylib.WHITE);
+        // Bottom row
+        Patch(0, srcH - sb, sl, sb, x, y + dt + midDstH, dl, db);       // bot-left
+        Patch(sl, srcH - sb, midSrcW, sb, x + dl, y + dt + midDstH, midDstW, db); // bot-center
+        Patch(srcW - sr, srcH - sb, sr, sb, x + dl + midDstW, y + dt + midDstH, dr, db); // bot-right
     }
 
     // Cached textures for HSV gradients