From de18b28bfe04078b83e7d28ad6247097fda85249 Mon Sep 17 00:00:00 2001
From: Thomas Nemer <thomas.nemer@fortytwo.fr>
Date: Tue, 11 Nov 2025 11:35:14 +0100
Subject: [PATCH] Add advanced examples and API reference documentation

This commit implements issue #16 by adding:

**Intermediate Examples (examples/intermediate/):**
- 01_nested_panels: Complex nested layout composition with FlexLayout, GridLayout, and StackLayout
- 02_responsive_ui: Window resize behavior with ResizeBehavior, AxisResizeBehavior, and ResponsiveConstraints
- 03_event_handling: Advanced event patterns with custom event handling and focus management
- 04_dynamic_layout: Runtime UI changes with dynamic component addition/removal and layout switching

**Advanced Examples (examples/advanced/):**
- 01_custom_component: ColorPicker custom component demonstrating CRTP pattern, custom render/event handling, and builder pattern
- 02_custom_layout: CircularLayout implementation showing custom layout manager creation with CRTP
- 03_custom_renderer: IRenderer interface demonstration showing frame lifecycle and rendering concepts
- 04_performance: Performance optimization techniques with 100-component GridLayout and FPS counter

**API Reference Documentation (docs/api/):**
- README.md: Navigation hub for all API documentation
- QUICK_REFERENCE.md: Condensed one-page reference for quick lookup
- core/Component.md: Detailed Component class API documentation

All examples compile successfully and include:
- Complete CMakeLists.txt for each example
- Comprehensive README.md explaining concepts and usage
- Well-commented, educational source code
- Progressive complexity from intermediate to advanced topics

Resolves #16
---
 docs/api/QUICK_REFERENCE.md                   | 511 ++++++++++++++++++
 docs/api/README.md                            | 212 ++++++++
 docs/api/core/Component.md                    | 256 +++++++++
 examples/CMakeLists.txt                       |  20 +
 .../01_custom_component/CMakeLists.txt        |  33 ++
 .../advanced/01_custom_component/README.md    |  57 ++
 .../advanced/01_custom_component/main.cpp     | 285 ++++++++++
 .../advanced/02_custom_layout/CMakeLists.txt  |  24 +
 examples/advanced/02_custom_layout/README.md  |  27 +
 examples/advanced/02_custom_layout/main.cpp   | 141 +++++
 .../03_custom_renderer/CMakeLists.txt         |  24 +
 .../advanced/03_custom_renderer/README.md     |  32 ++
 examples/advanced/03_custom_renderer/main.cpp | 109 ++++
 .../advanced/04_performance/CMakeLists.txt    |  24 +
 examples/advanced/04_performance/README.md    |  42 ++
 examples/advanced/04_performance/main.cpp     | 122 +++++
 .../01_nested_panels/CMakeLists.txt           |  33 ++
 .../intermediate/01_nested_panels/README.md   | 124 +++++
 .../intermediate/01_nested_panels/main.cpp    | 213 ++++++++
 .../02_responsive_ui/CMakeLists.txt           |  33 ++
 .../intermediate/02_responsive_ui/README.md   | 205 +++++++
 .../intermediate/02_responsive_ui/main.cpp    | 231 ++++++++
 .../03_event_handling/CMakeLists.txt          |  33 ++
 .../intermediate/03_event_handling/README.md  | 299 ++++++++++
 .../intermediate/03_event_handling/main.cpp   | 299 ++++++++++
 .../04_dynamic_layout/CMakeLists.txt          |  33 ++
 .../intermediate/04_dynamic_layout/README.md  | 272 ++++++++++
 .../intermediate/04_dynamic_layout/main.cpp   | 322 +++++++++++
 28 files changed, 4016 insertions(+)
 create mode 100644 docs/api/QUICK_REFERENCE.md
 create mode 100644 docs/api/README.md
 create mode 100644 docs/api/core/Component.md
 create mode 100644 examples/advanced/01_custom_component/CMakeLists.txt
 create mode 100644 examples/advanced/01_custom_component/README.md
 create mode 100644 examples/advanced/01_custom_component/main.cpp
 create mode 100644 examples/advanced/02_custom_layout/CMakeLists.txt
 create mode 100644 examples/advanced/02_custom_layout/README.md
 create mode 100644 examples/advanced/02_custom_layout/main.cpp
 create mode 100644 examples/advanced/03_custom_renderer/CMakeLists.txt
 create mode 100644 examples/advanced/03_custom_renderer/README.md
 create mode 100644 examples/advanced/03_custom_renderer/main.cpp
 create mode 100644 examples/advanced/04_performance/CMakeLists.txt
 create mode 100644 examples/advanced/04_performance/README.md
 create mode 100644 examples/advanced/04_performance/main.cpp
 create mode 100644 examples/intermediate/01_nested_panels/CMakeLists.txt
 create mode 100644 examples/intermediate/01_nested_panels/README.md
 create mode 100644 examples/intermediate/01_nested_panels/main.cpp
 create mode 100644 examples/intermediate/02_responsive_ui/CMakeLists.txt
 create mode 100644 examples/intermediate/02_responsive_ui/README.md
 create mode 100644 examples/intermediate/02_responsive_ui/main.cpp
 create mode 100644 examples/intermediate/03_event_handling/CMakeLists.txt
 create mode 100644 examples/intermediate/03_event_handling/README.md
 create mode 100644 examples/intermediate/03_event_handling/main.cpp
 create mode 100644 examples/intermediate/04_dynamic_layout/CMakeLists.txt
 create mode 100644 examples/intermediate/04_dynamic_layout/README.md
 create mode 100644 examples/intermediate/04_dynamic_layout/main.cpp

diff --git a/docs/api/QUICK_REFERENCE.md b/docs/api/QUICK_REFERENCE.md
new file mode 100644
index 0000000..e616556
--- /dev/null
+++ b/docs/api/QUICK_REFERENCE.md
@@ -0,0 +1,511 @@
+# Prong API Quick Reference
+
+Condensed reference for all Prong APIs. See individual files for detailed documentation.
+
+## Core Classes
+
+### Component
+Base class for all UI elements.
+```cpp
+class Component {
+  virtual void update(double deltaTime) = 0;
+  virtual void render() = 0;
+  void setPosition(int x, int y);
+  void setSize(int width, int height);
+  void addChild(std::unique_ptr<Component> child);
+  bool handleEvent(const Event& event);
+  void setResizeBehavior(ResizeBehavior behavior);
+};
+```
+
+### Scene
+Root container and event coordinator.
+```cpp
+class Scene : public Component {
+  Scene(IWindow* window, IRenderer* renderer);
+  void attach();  // Start receiving events
+  void detach();  // Stop receiving events
+  void handleResize(int newWidth, int newHeight);
+};
+```
+
+### ComponentBuilder
+Fluent API for component construction.
+```cpp
+auto component = create<ComponentType>(/* constructor args */)
+                   .withSize(width, height)
+                   .withPosition(x, y)
+                   .withVisible(bool)
+                   .build();
+```
+
+### Event
+Unified event structure.
+```cpp
+struct Event {
+  enum class Type { MOUSE_PRESS, MOUSE_RELEASE, MOUSE_MOVE, MOUSE_SCROLL, KEY_PRESS, KEY_RELEASE, CHAR_INPUT };
+  Type type;
+  int localX, localY;  // Mouse position in local coordinates
+  int button;          // Mouse button
+  int key, mods;       // Keyboard
+  unsigned int codepoint;  // Character input
+  double scrollX, scrollY; // Scroll delta
+};
+```
+
+## UI Components
+
+### Button
+```cpp
+auto button = create<Button>("Label")
+                .withSize(200, 60)
+                .withClickCallback([]() { /* clicked */ })
+                .build();
+```
+
+### Panel
+```cpp
+auto panel = create<Panel>()
+               .withSize(400, 300)
+               .withBackgroundColor(r, g, b, a)
+               .build();
+```
+
+### TextInput
+```cpp
+auto input = create<TextInput>()
+               .withPlaceholder("Enter text...")
+               .withTextChangeCallback([](const std::string& text) { /* text changed */ })
+               .build();
+input->setClipboard(clipboardPtr);  // Required for copy/paste
+input->setKeyboard(keyboardPtr);    // Required for key handling
+```
+
+### ListBox
+```cpp
+auto listBox = create<ListBox>()
+                 .withSize(300, 400)
+                 .withSelectionCallback([](int index) { /* item selected */ })
+                 .build();
+listBox->addItem("Item 1");
+listBox->addItem("Item 2");
+```
+
+### Dialog
+```cpp
+auto dialog = Dialog::create(renderer, "Title", "Message", DialogType::OK_CANCEL);
+dialog->setButtonCallback([](Dialog::Result result) {
+  if (result == Dialog::Result::OK) { /* OK clicked */ }
+});
+```
+
+### Toolbar
+```cpp
+auto toolbar = create<Toolbar>()
+                 .withSize(800, 50)
+                 .build();
+toolbar->addItem("File", []() { /* File clicked */ });
+toolbar->addItem("Edit", []() { /* Edit clicked */ });
+```
+
+### Viewport
+```cpp
+auto viewport = create<Viewport>()
+                  .withSize(600, 400)
+                  .build();
+// Viewport can contain content larger than its size
+// Automatically adds scrolling
+```
+
+## Layout Managers
+
+### FlexLayout
+Flexbox-inspired layout.
+```cpp
+auto layout = std::make_unique<FlexLayout<ParentType>>();
+layout->setDirection(FlexLayout<ParentType>::Direction::ROW);  // or COLUMN
+layout->setJustifyContent(FlexLayout<ParentType>::JustifyContent::START);  // START, CENTER, END, SPACE_BETWEEN, SPACE_AROUND
+layout->setAlignItems(FlexLayout<ParentType>::AlignItems::STRETCH);  // STRETCH, START, CENTER, END
+layout->setGap(10);
+panel->setLayoutManager(std::move(layout));
+
+// Per-item properties
+layout->setItemProperties(childPtr, {.grow = 1.0f, .shrink = 1.0f});
+```
+
+### GridLayout
+CSS Grid-inspired layout.
+```cpp
+auto layout = std::make_unique<GridLayout<ParentType>>();
+layout->setRows(3);
+layout->setColumns(4);
+layout->setGap(10);
+panel->setLayoutManager(std::move(layout));
+```
+
+### DockLayout
+Docking panel layout.
+```cpp
+auto layout = std::make_unique<DockLayout<ParentType>>();
+layout->setGaps(5, 5, 5, 5);  // top, bottom, left, right
+panel->setLayoutManager(std::move(layout));
+
+// Set dock position for children
+layout->setItemProperties(topPanel, {.position = DockPosition::TOP});
+layout->setItemProperties(centerPanel, {.position = DockPosition::CENTER});
+```
+
+Dock positions: `TOP`, `BOTTOM`, `LEFT`, `RIGHT`, `CENTER`
+
+### StackLayout
+Simple sequential layout.
+```cpp
+auto layout = std::make_unique<StackLayout<ParentType>>();
+layout->setOrientation(StackLayout<ParentType>::Orientation::VERTICAL);  // or HORIZONTAL
+layout->setSpacing(10);
+panel->setLayoutManager(std::move(layout));
+```
+
+### FlowLayout
+Wrapping flow layout.
+```cpp
+auto layout = std::make_unique<FlowLayout<ParentType>>();
+layout->setOrientation(FlowLayout<ParentType>::Orientation::HORIZONTAL);
+layout->setSpacing(10);
+layout->setLineSpacing(15);
+panel->setLayoutManager(std::move(layout));
+```
+
+## Event Handling
+
+### Custom Event Handler
+```cpp
+class MyComponent : public Component {
+protected:
+  bool handleEventSelf(const Event& event) override {
+    switch (event.type) {
+      case Event::Type::MOUSE_PRESS:
+        // event.localX, event.localY are relative to this component
+        // event.button: 0=left, 1=right, 2=middle
+        return true;  // Stop propagation
+
+      case Event::Type::KEY_PRESS:
+        if (focusState == FocusState::FOCUSED) {
+          // event.key, event.mods
+          return true;
+        }
+        break;
+
+      case Event::Type::CHAR_INPUT:
+        // event.codepoint
+        return true;
+
+      case Event::Type::MOUSE_SCROLL:
+        // event.scrollX, event.scrollY
+        return true;
+    }
+    return false;  // Continue propagation
+  }
+};
+```
+
+### Focus Management
+```cpp
+component->requestFocus();  // Request focus
+
+if (component->getFocusState() == Component::FocusState::FOCUSED) {
+  // Handle keyboard input
+}
+```
+
+## Rendering
+
+### IRenderer Interface
+```cpp
+class IRenderer {
+  virtual bool beginFrame() = 0;
+  virtual void endFrame() = 0;
+  virtual void present() = 0;
+  virtual void clear(float r, float g, float b, float a) = 0;
+
+  virtual void drawRect(int x, int y, int w, int h, float r, float g, float b, float a) = 0;
+  virtual void drawText(const char* text, int x, int y, float scale, float r, float g, float b, float a) = 0;
+
+  virtual void enableScissorTest(int x, int y, int w, int h) = 0;
+  virtual void disableScissorTest() = 0;
+
+  // Optional: Texture/sprite support
+  virtual unsigned int loadTexture(const char* path) = 0;
+  virtual void drawSprite(unsigned int textureID, int x, int y, int w, int h, float r, float g, float b, float a) = 0;
+};
+```
+
+### Custom Renderer Example
+```cpp
+class MyRenderer : public IRenderer {
+  bool beginFrame() override {
+    // Start frame, clear buffers, etc.
+    return true;
+  }
+
+  void endFrame() override {
+    // Finish rendering
+  }
+
+  void drawRect(int x, int y, int w, int h, float r, float g, float b, float a) override {
+    // Draw filled rectangle
+  }
+
+  // Implement other methods...
+};
+```
+
+## Theming
+
+### ThemeManager
+Singleton for global theme management.
+```cpp
+// Get instance
+auto& theme = ThemeManager::getInstance();
+
+// Get colors
+Color bg = theme.getColor(ColorRole::BACKGROUND);
+Color text = theme.getColor(ColorRole::TEXT);
+
+// Set colors
+theme.setColor(ColorRole::BUTTON_BACKGROUND, Color(0.3f, 0.5f, 0.8f));
+
+// Callbacks
+theme.setThemeChangeCallback([]() {
+  // Theme changed, update components
+});
+```
+
+Color roles: `BACKGROUND`, `TEXT`, `BUTTON_BACKGROUND`, `BUTTON_BACKGROUND_HOVER`, `BUTTON_BACKGROUND_PRESSED`, `BUTTON_TEXT`, `PANEL_BACKGROUND`, `INPUT_BACKGROUND`, `INPUT_TEXT`, etc.
+
+### Color
+```cpp
+Color color(0.5f, 0.8f, 0.3f, 1.0f);  // RGBA [0.0, 1.0]
+color.setRGB(r, g, b);
+color.setAlpha(a);
+float r, g, b, a;
+color.getRGBA(r, g, b, a);
+```
+
+## Window Abstraction
+
+### IWindow
+```cpp
+class IWindow {
+  virtual bool shouldClose() const = 0;
+  virtual void pollEvents() = 0;
+  virtual void getSize(int& width, int& height) const = 0;
+  virtual void setEventCallback(EventCallback callback) = 0;
+  virtual bool isKeyPressed(int key) const = 0;
+};
+```
+
+### IClipboard (for TextInput)
+```cpp
+class IClipboard {
+  virtual std::string getString() = 0;
+  virtual void setString(const std::string& text) = 0;
+};
+```
+
+### IKeyboard (for TextInput)
+```cpp
+class IKeyboard {
+  virtual Key mapPlatformKey(int platformKey) = 0;
+};
+```
+
+Platform-agnostic Key enum: `A`-`Z`, `SPACE`, `ENTER`, `BACKSPACE`, `DELETE`, `LEFT`, `RIGHT`, `HOME`, `END`, etc.
+
+## Resize Behavior
+
+### Unified Behavior
+```cpp
+component->setResizeBehavior(Component::ResizeBehavior::FIXED);   // Keep original size
+component->setResizeBehavior(Component::ResizeBehavior::SCALE);   // Scale proportionally
+component->setResizeBehavior(Component::ResizeBehavior::FILL);    // Fill available space
+component->setResizeBehavior(Component::ResizeBehavior::MAINTAIN_ASPECT);  // Scale maintaining aspect
+```
+
+### Per-Axis Behavior
+```cpp
+component->setAxisResizeBehavior(
+  Component::AxisResizeBehavior::FIXED,  // Horizontal
+  Component::AxisResizeBehavior::FILL    // Vertical
+);
+```
+
+### Constraints
+```cpp
+Component::ResponsiveConstraints constraints;
+constraints.minWidth = 200;
+constraints.maxWidth = 600;
+constraints.minHeight = 150;
+constraints.maxHeight = 450;
+component->setConstraints(constraints);
+```
+
+## Custom Components and Layouts
+
+### Custom Component
+```cpp
+class ColorPicker : public Component {
+public:
+  ColorPicker(IRenderer* renderer) : Component(renderer, "ColorPicker") {}
+
+  void update(double deltaTime) override {
+    // Update logic
+  }
+
+  void render() override {
+    int gx = getGlobalX();
+    int gy = getGlobalY();
+    // Render using renderer->drawRect(), etc.
+  }
+
+protected:
+  bool handleEventSelf(const Event& event) override {
+    // Handle events
+    return false;
+  }
+};
+```
+
+### Custom Layout Manager
+```cpp
+template<typename ParentT>
+class CircularLayout : public LayoutManager<CircularLayout<ParentT>> {
+  Dimensions measureLayout(const std::vector<Component*>& components) override {
+    // Return required size
+    return {diameter, diameter};
+  }
+
+  void layout(std::vector<Component*>& components, const Dimensions& available) override {
+    // Position components in a circle
+    float angleStep = 2.0f * M_PI / components.size();
+    for (size_t i = 0; i < components.size(); ++i) {
+      float angle = i * angleStep;
+      int x = centerX + radius * cos(angle);
+      int y = centerY + radius * sin(angle);
+      components[i]->setPosition(x, y);
+    }
+  }
+};
+```
+
+## Common Patterns
+
+### Application Structure
+```cpp
+int main() {
+  // 1. Initialize window system
+  glfwInit();
+  GLFWwindow* window = glfwCreateWindow(800, 600, "App", nullptr, nullptr);
+  glfwMakeContextCurrent(window);
+
+  // 2. Create adapters
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(window);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+  renderer->initialize(800, 600);
+
+  // 3. Create scene
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  // 4. Build UI
+  auto panel = create<Panel>().withSize(800, 600).build();
+  auto button = create<Button>("Click").build();
+  panel->addChild(std::move(button));
+  scene->addChild(std::move(panel));
+  scene->attach();
+
+  // 5. Main loop
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.1f, 0.1f, 0.12f, 1.0f);
+      scene->updateAll(0.016);
+      scene->renderAll();
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(window);
+  }
+
+  // 6. Cleanup
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+  glfwDestroyWindow(window);
+  glfwTerminate();
+
+  return 0;
+}
+```
+
+### Three-Panel Layout
+```cpp
+auto root = create<Panel>().withSize(1200, 800).build();
+auto layout = std::make_unique<FlexLayout<Panel>>();
+layout->setDirection(FlexLayout<Panel>::Direction::ROW);
+root->setLayoutManager(std::move(layout));
+
+auto left = create<Panel>().withSize(250, 800).build();
+left->setAxisResizeBehavior(AxisResizeBehavior::FIXED, AxisResizeBehavior::FILL);
+
+auto center = create<Panel>().withSize(700, 800).build();
+center->setResizeBehavior(ResizeBehavior::FILL);
+
+auto right = create<Panel>().withSize(250, 800).build();
+right->setAxisResizeBehavior(AxisResizeBehavior::FIXED, AxisResizeBehavior::FILL);
+
+root->addChild(std::move(left));
+root->addChild(std::move(center));
+root->addChild(std::move(right));
+```
+
+### Dynamic UI
+```cpp
+// Add components
+parent->addChild(createNewComponent());
+parent->invalidateLayout();
+
+// Remove components
+parent->removeChild(childPtr);
+parent->invalidateLayout();
+
+// Change layout
+auto newLayout = std::make_unique<GridLayout<Panel>>();
+parent->setLayoutManager(std::move(newLayout));
+parent->invalidateLayout();
+```
+
+## Performance Tips
+
+1. **Batch operations**: Multiple changes, then one `invalidateLayout()`
+2. **Use CRTP**: Zero overhead for custom layouts
+3. **Cache coordinates**: Global coordinates automatically cached
+4. **Stop propagation**: Return `true` from event handlers when appropriate
+5. **Visibility over removal**: Hide components instead of removing if they'll return
+6. **Choose simple layouts**: Use simplest layout manager that meets needs
+7. **Profile first**: Measure before optimizing
+
+## Thread Safety
+
+- **Single-threaded**: All UI operations on main thread
+- **ThemeManager**: Thread-safe (only thread-safe component)
+- **Scene**: Not thread-safe
+- **Components**: Not thread-safe
+
+## Examples
+
+- `examples/basic/` - Simple focused examples (8 examples)
+- `examples/intermediate/` - Complex patterns (4 examples)
+- `examples/advanced/` - Custom components, layouts, optimization (4 examples)
+- `examples/demo_app/` - Full application demo
diff --git a/docs/api/README.md b/docs/api/README.md
new file mode 100644
index 0000000..74d811c
--- /dev/null
+++ b/docs/api/README.md
@@ -0,0 +1,212 @@
+# Prong API Reference
+
+Comprehensive API documentation for the Prong UI framework.
+
+## Quick Navigation
+
+### Core
+- [Component](core/Component.md) - Base class for all UI elements
+- [Scene](core/Scene.md) - Root container and event coordinator
+- [ComponentBuilder](core/ComponentBuilder.md) - Fluent API for component construction
+- [Event](core/Event.md) - Unified event structure
+
+### Components
+- [Button](components/Button.md) - Clickable button widget
+- [Panel](components/Panel.md) - Container panel
+- [TextInput](components/TextInput.md) - Single-line text input
+- [ListBox](components/ListBox.md) - Scrollable list with selection
+- [Dialog](components/Dialog.md) - Modal dialog box
+- [Toolbar](components/Toolbar.md) - Horizontal toolbar with items
+- [Viewport](components/Viewport.md) - Scrollable viewport container
+
+### Layout Managers
+- [FlexLayout](layouts/FlexLayout.md) - Flexbox-inspired flexible layout
+- [GridLayout](layouts/GridLayout.md) - CSS Grid-inspired grid layout
+- [DockLayout](layouts/DockLayout.md) - Docking panel layout (top, bottom, left, right, center)
+- [StackLayout](layouts/StackLayout.md) - Simple horizontal/vertical stacking
+- [FlowLayout](layouts/FlowLayout.md) - Wrapping flow layout
+
+### Events
+- [Event Struct](events/Event.md) - Event data structure
+- [IWindow](events/IWindow.md) - Window abstraction interface
+- [IClipboard](events/IClipboard.md) - Clipboard abstraction
+- [IKeyboard](events/IKeyboard.md) - Keyboard key mapping
+
+### Rendering
+- [IRenderer](rendering/IRenderer.md) - Renderer abstraction interface
+
+### Theming
+- [ThemeManager](theming/ThemeManager.md) - Global theme management
+- [Color](theming/Color.md) - RGBA color utility class
+- [AdvancedTheme](theming/AdvancedTheme.md) - Theme data structure
+
+## Architecture Overview
+
+### Component Hierarchy
+
+```
+Component (abstract base)
+├── Panel (container)
+├── Button (interactive)
+├── TextInput (text editing)
+├── ListBox (list selection)
+├── Dialog (modal overlay)
+├── Toolbar (item container)
+└── Viewport (scrollable container)
+```
+
+### Coordinate Systems
+
+Prong uses a **relative coordinate system**:
+- **Local coordinates**: Position relative to parent (used for positioning children)
+- **Global coordinates**: Absolute screen-space position (used for rendering and hit testing)
+- Coordinates are automatically cached and invalidated as needed
+
+### Event Propagation
+
+Events flow hierarchically:
+1. Scene receives event from window
+2. Scene propagates to root components
+3. Components check bounds and propagate to children
+4. Child-to-parent order (topmost rendered gets first chance)
+5. Event stops when handler returns `true`
+
+### Layout System
+
+Layout managers use CRTP for zero-overhead polymorphism:
+```cpp
+template<typename ParentT>
+class MyLayout : public LayoutManager<MyLayout<ParentT>> {
+  Dimensions measureLayout(const std::vector<Component*>& children) override;
+  void layout(std::vector<Component*>& children, const Dimensions& available) override;
+};
+```
+
+## Common Patterns
+
+### Creating Components
+
+```cpp
+auto button = create<Button>("Click Me")
+                .withSize(200, 60)
+                .withPosition(100, 100)
+                .withClickCallback([]() { /* handle click */ })
+                .build();
+
+parent->addChild(std::move(button));
+```
+
+### Custom Event Handling
+
+```cpp
+class MyComponent : public Component {
+protected:
+  bool handleEventSelf(const Event& event) override {
+    if (event.type == Event::Type::MOUSE_PRESS) {
+      // Handle event
+      return true; // Stop propagation
+    }
+    return false; // Continue propagation
+  }
+};
+```
+
+### Layout Management
+
+```cpp
+auto layout = std::make_unique<FlexLayout<Panel>>();
+layout->setDirection(FlexLayout<Panel>::Direction::ROW);
+layout->setGap(10);
+panel->setLayoutManager(std::move(layout));
+```
+
+### Resize Behavior
+
+```cpp
+// Unified behavior
+component->setResizeBehavior(Component::ResizeBehavior::FILL);
+
+// Per-axis behavior
+component->setAxisResizeBehavior(
+  Component::AxisResizeBehavior::FIXED,   // Horizontal
+  Component::AxisResizeBehavior::FILL     // Vertical
+);
+
+// With constraints
+Component::ResponsiveConstraints constraints;
+constraints.minWidth = 200;
+constraints.maxWidth = 600;
+component->setConstraints(constraints);
+```
+
+## Thread Safety
+
+- **Scene**: Single-threaded, all UI operations must occur on the main thread
+- **ThemeManager**: Thread-safe singleton with mutex protection
+- **Components**: Not thread-safe, designed for single-threaded use
+
+## Performance Considerations
+
+- **CRTP**: Zero-overhead polymorphism for layouts
+- **Coordinate caching**: Global coordinates cached and automatically invalidated
+- **Layout caching**: Layouts only recalculate when invalidated
+- **Event propagation**: Efficient hit testing and early termination
+
+## Examples
+
+Each API page includes usage examples. For complete working examples, see:
+- `examples/basic/` - Simple focused examples
+- `examples/intermediate/` - Complex composition patterns
+- `examples/advanced/` - Custom components, layouts, and optimization
+
+## Building Applications
+
+```cpp
+// 1. Initialize window system (GLFW example)
+glfwInit();
+GLFWwindow* window = glfwCreateWindow(800, 600, "App", nullptr, nullptr);
+
+// 2. Create adapters
+auto windowAdapter = std::make_unique<GLFWWindowAdapter>(window);
+auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+renderer->initialize(800, 600);
+
+// 3. Create scene
+auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+// 4. Build UI
+auto button = create<Button>("Hello").build();
+scene->addChild(std::move(button));
+scene->attach();
+
+// 5. Main loop
+while (!windowAdapter->shouldClose()) {
+  glfwPollEvents();
+
+  if (renderer->beginFrame()) {
+    renderer->clear(0.1f, 0.1f, 0.12f, 1.0f);
+    scene->updateAll(0.016);
+    scene->renderAll();
+    renderer->endFrame();
+  }
+
+  glfwSwapBuffers(window);
+}
+```
+
+## Platform Integration
+
+Prong is platform-agnostic. You need to provide:
+- **Window adapter** (IWindow): GLFW, SDL, or native
+- **Renderer** (IRenderer): OpenGL, Vulkan, or custom
+- **Optional**: IClipboard, IKeyboard for TextInput
+
+See `examples/adapters/` for GLFW reference implementations.
+
+## Version
+
+This documentation is for Prong v1.0.0.
+
+## Contributing
+
+See the main README.md for contribution guidelines.
diff --git a/docs/api/core/Component.md b/docs/api/core/Component.md
new file mode 100644
index 0000000..703a16b
--- /dev/null
+++ b/docs/api/core/Component.md
@@ -0,0 +1,256 @@
+# Component
+
+Base class for all UI elements in Prong. All components inherit from this class.
+
+## Header
+
+```cpp
+#include <bombfork/prong/core/component.h>
+```
+
+## Class Declaration
+
+```cpp
+class Component {
+public:
+  // Construction
+  explicit Component(IRenderer* renderer = nullptr, const std::string& debugName = "Component");
+  virtual ~Component() = default;
+
+  // Pure virtual methods (must be implemented by derived classes)
+  virtual void update(double deltaTime) = 0;
+  virtual void render() = 0;
+
+  // Geometry
+  virtual void setBounds(int x, int y, int width, int height);
+  virtual void setPosition(int x, int y);
+  virtual void setSize(int width, int height);
+  virtual void getPosition(int& x, int& y) const;
+  virtual void getSize(int& width, int& height) const;
+  virtual void getBounds(int& x, int& y, int& width, int& height) const;
+
+  // Global coordinates (for rendering and hit testing)
+  void getGlobalPosition(int& x, int& y) const;
+  void getGlobalBounds(int& x, int& y, int& width, int& height) const;
+
+  // Coordinate conversion
+  void localToGlobal(int localX, int localY, int& globalX, int& globalY) const;
+  void globalToLocal(int globalX, int globalY, int& localX, int& localY) const;
+
+  // Hit testing
+  bool containsGlobal(int globalX, int globalY) const;
+
+  // Parent/child relationships
+  void addChild(std::unique_ptr<Component> child);
+  void removeChild(Component* child);
+  std::vector<std::unique_ptr<Component>>& getChildren();
+  const std::vector<std::unique_ptr<Component>>& getChildren() const;
+  Component* getParent() const;
+
+  // Visibility and interaction
+  void setVisible(bool visible);
+  bool isVisible() const;
+  void setEnabled(bool enabled);
+  bool isEnabled() const;
+
+  // Focus management
+  enum class FocusState { NONE, FOCUSABLE, FOCUSED };
+  void requestFocus();
+  FocusState getFocusState() const;
+  void setFocusState(FocusState state);
+
+  // Resize behavior
+  enum class ResizeBehavior { FIXED, SCALE, FILL, MAINTAIN_ASPECT };
+  enum class AxisResizeBehavior { FIXED, SCALE, FILL };
+
+  void setResizeBehavior(ResizeBehavior behavior);
+  void setAxisResizeBehavior(AxisResizeBehavior horizontal, AxisResizeBehavior vertical);
+
+  struct ResponsiveConstraints {
+    int minWidth = 0, maxWidth = INT_MAX;
+    int minHeight = 0, maxHeight = INT_MAX;
+  };
+  void setConstraints(const ResponsiveConstraints& constraints);
+
+  // Layout management
+  template<typename LayoutT>
+  void setLayoutManager(std::unique_ptr<LayoutT> manager);
+  void invalidateLayout();
+
+  // Event handling
+  bool handleEvent(const core::Event& event);
+
+  // Renderer
+  void setRenderer(IRenderer* renderer);
+  IRenderer* getRenderer() const;
+
+  // Recursive operations
+  void updateAll(double deltaTime);
+  void renderAll();
+
+protected:
+  // Override in derived classes for custom event handling
+  virtual bool handleEventSelf(const core::Event& event);
+
+  // Protected accessors for rendering
+  int getGlobalX() const;
+  int getGlobalY() const;
+
+  // Members
+  IRenderer* renderer;
+  int localX, localY, width, height;
+  bool visible, enabled;
+  FocusState focusState;
+  bool isCurrentlyHovered;
+  Component* parent;
+  std::vector<std::unique_ptr<Component>> children;
+};
+```
+
+## Key Concepts
+
+### Coordinate Systems
+
+- **Local coordinates**: Position relative to parent. Use `setPosition()`, `getPosition()`.
+- **Global coordinates**: Absolute screen position. Use `getGlobalPosition()`, `getGlobalBounds()`.
+- For rendering, use `getGlobalX()` and `getGlobalY()` protected helpers.
+
+### Ownership Model
+
+- Parent owns children via `std::unique_ptr`
+- Use `addChild(std::move(child))` to transfer ownership
+- Children destroyed automatically when parent destroyed
+- Use `removeChild(ptr)` for explicit removal
+
+### Event Handling
+
+Override `handleEventSelf()` in derived classes:
+```cpp
+bool handleEventSelf(const Event& event) override {
+  if (event.type == Event::Type::MOUSE_PRESS) {
+    // Handle event
+    return true; // Stop propagation
+  }
+  return false; // Continue propagation
+}
+```
+
+Events are in **local coordinates** relative to this component.
+
+### Resize Behavior
+
+**Unified (both axes same)**:
+```cpp
+component->setResizeBehavior(Component::ResizeBehavior::FILL);
+```
+
+**Per-axis (independent control)**:
+```cpp
+component->setAxisResizeBehavior(
+  Component::AxisResizeBehavior::FIXED,
+  Component::AxisResizeBehavior::FILL
+);
+```
+
+**With constraints**:
+```cpp
+Component::ResponsiveConstraints constraints;
+constraints.minWidth = 200;
+constraints.maxWidth = 600;
+component->setConstraints(constraints);
+```
+
+## Common Usage Patterns
+
+### Creating Custom Components
+
+```cpp
+class MyComponent : public Component {
+public:
+  MyComponent(IRenderer* renderer) : Component(renderer, "MyComponent") {
+    width = 200;
+    height = 100;
+  }
+
+  void update(double deltaTime) override {
+    // Update logic
+  }
+
+  void render() override {
+    if (!renderer) return;
+    int gx = getGlobalX();
+    int gy = getGlobalY();
+    renderer->drawRect(gx, gy, width, height, 1.0f, 1.0f, 1.0f, 1.0f);
+  }
+
+protected:
+  bool handleEventSelf(const Event& event) override {
+    // Custom event handling
+    return false;
+  }
+};
+```
+
+### Parent-Child Hierarchy
+
+```cpp
+auto parent = std::make_unique<Panel>(renderer);
+auto child1 = std::make_unique<Button>("Button 1");
+auto child2 = std::make_unique<Button>("Button 2");
+
+child1->setPosition(10, 10);
+child2->setPosition(10, 80);
+
+parent->addChild(std::move(child1));
+parent->addChild(std::move(child2));
+```
+
+### Hit Testing
+
+```cpp
+int mouseX = 150, mouseY = 200; // Screen coordinates
+if (component->containsGlobal(mouseX, mouseY)) {
+  // Mouse is over this component
+}
+```
+
+### Coordinate Conversion
+
+```cpp
+// Local to global
+int globalX, globalY;
+component->localToGlobal(10, 20, globalX, globalY);
+
+// Global to local
+int localX, localY;
+component->globalToLocal(globalX, globalY, localX, localY);
+```
+
+## Lifecycle
+
+1. **Construction**: Create component, set initial properties
+2. **Add to parent**: Transfer ownership via `addChild()`
+3. **Update loop**: `updateAll()` called each frame
+4. **Render loop**: `renderAll()` called each frame
+5. **Event handling**: `handleEvent()` called when events occur
+6. **Removal**: `removeChild()` or parent destruction
+
+## Best Practices
+
+- Always check `renderer` is not null in `render()`
+- Use `getGlobalX()` and `getGlobalY()` for rendering positions
+- Return `true` from `handleEventSelf()` to stop event propagation
+- Call `invalidateLayout()` after modifying children or properties
+- Use local coordinates when positioning children
+- Use global coordinates only for rendering and hit testing
+
+## Thread Safety
+
+Not thread-safe. All operations must occur on the main UI thread.
+
+## Related
+
+- [Scene](Scene.md) - Root container
+- [ComponentBuilder](ComponentBuilder.md) - Fluent construction API
+- [Event](Event.md) - Event structure
+- [Panel](../components/Panel.md) - Basic container component
diff --git a/examples/CMakeLists.txt b/examples/CMakeLists.txt
index b084c04..7f69a95 100644
--- a/examples/CMakeLists.txt
+++ b/examples/CMakeLists.txt
@@ -141,4 +141,24 @@ add_subdirectory(basic/07_text_input)
 add_subdirectory(basic/08_list_box)
 
 message(STATUS "  + basic examples (8 examples)")
+
+# === Intermediate Examples ===
+# More complex examples showing layout composition and advanced patterns
+
+add_subdirectory(intermediate/01_nested_panels)
+add_subdirectory(intermediate/02_responsive_ui)
+add_subdirectory(intermediate/03_event_handling)
+add_subdirectory(intermediate/04_dynamic_layout)
+
+message(STATUS "  + intermediate examples (4 examples)")
+
+# === Advanced Examples ===
+# Advanced topics: custom components, layouts, renderers, and optimization
+
+add_subdirectory(advanced/01_custom_component)
+add_subdirectory(advanced/02_custom_layout)
+add_subdirectory(advanced/03_custom_renderer)
+add_subdirectory(advanced/04_performance)
+
+message(STATUS "  + advanced examples (4 examples)")
 message(STATUS "")
diff --git a/examples/advanced/01_custom_component/CMakeLists.txt b/examples/advanced/01_custom_component/CMakeLists.txt
new file mode 100644
index 0000000..7f2160c
--- /dev/null
+++ b/examples/advanced/01_custom_component/CMakeLists.txt
@@ -0,0 +1,33 @@
+cmake_minimum_required(VERSION 3.20)
+
+# Create executable
+add_executable(01_custom_component main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+# Link libraries
+target_link_libraries(01_custom_component PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+# Include directories
+target_include_directories(01_custom_component PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+# C++20 standard
+target_compile_features(01_custom_component PRIVATE cxx_std_20)
+
+# Suppress unused function warnings for STB
+target_compile_options(01_custom_component PRIVATE -Wno-unused-function)
+
+# Depend on formatting target
+add_dependencies(01_custom_component format-example-sources)
+
+# Output to build/examples/advanced/01_custom_component/
+set_target_properties(01_custom_component PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/advanced/01_custom_component"
+)
diff --git a/examples/advanced/01_custom_component/README.md b/examples/advanced/01_custom_component/README.md
new file mode 100644
index 0000000..fb7aa62
--- /dev/null
+++ b/examples/advanced/01_custom_component/README.md
@@ -0,0 +1,57 @@
+# Custom Component Example
+
+Demonstrates creating a custom ColorPicker component from scratch, showing all aspects of component development in Prong.
+
+## Key Topics
+
+- **CRTP pattern**: Inheriting from Component base class
+- **update() and render()**: Implementing component lifecycle
+- **Event handling**: Custom mouse interaction
+- **State management**: Internal color state
+- **Builder pattern**: Fluent API for construction
+- **Callbacks**: Notifying changes to parent
+
+## ColorPicker Component
+
+A simple color picker with:
+- 18 color swatches in a grid
+- Click to select color
+- Visual feedback for selection
+- Preview area showing selected color
+- Callback for color changes
+
+## Component Structure
+
+```cpp
+class ColorPicker : public Component {
+private:
+  float selectedR, selectedG, selectedB;
+  ColorChangeCallback onColorChange;
+
+public:
+  void update(double deltaTime) override;
+  void render() override;
+
+protected:
+  bool handleEventSelf(const Event& event) override;
+};
+```
+
+## Builder Pattern
+
+```cpp
+auto picker = ColorPickerBuilder(renderer)
+                 .withPosition(50, 50)
+                 .withColor(1.0f, 0.5f, 0.0f)
+                 .withCallback([](float r, float g, float b) {
+                   // Handle color change
+                 })
+                 .build();
+```
+
+## Building
+
+```bash
+mise build-examples
+./build/examples/advanced/01_custom_component/01_custom_component
+```
diff --git a/examples/advanced/01_custom_component/main.cpp b/examples/advanced/01_custom_component/main.cpp
new file mode 100644
index 0000000..68880c3
--- /dev/null
+++ b/examples/advanced/01_custom_component/main.cpp
@@ -0,0 +1,285 @@
+/**
+ * @file main.cpp
+ * @brief Demonstrates creating a custom component from scratch - a color picker
+ *
+ * This example shows:
+ * - Inheriting from Component using CRTP pattern
+ * - Implementing update() and render()
+ * - Custom event handling
+ * - Custom properties and state management
+ * - Builder pattern for custom components
+ * - Callbacks for value changes
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/event.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/rendering/irenderer.h>
+
+#include <algorithm>
+#include <cmath>
+#include <functional>
+#include <iostream>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::core;
+using namespace bombfork::prong::rendering;
+using namespace bombfork::prong::examples;
+
+// === Custom ColorPicker Component ===
+class ColorPicker : public Component {
+public:
+  using ColorChangeCallback = std::function<void(float, float, float)>;
+
+private:
+  float selectedR = 1.0f;
+  float selectedG = 0.5f;
+  float selectedB = 0.0f;
+
+  bool isDragging = false;
+  ColorChangeCallback onColorChange;
+
+public:
+  ColorPicker(IRenderer* renderer) : Component(renderer, "ColorPicker") {
+    width = 300;
+    height = 250;
+  }
+
+  // Setters
+  void setColor(float r, float g, float b) {
+    selectedR = std::clamp(r, 0.0f, 1.0f);
+    selectedG = std::clamp(g, 0.0f, 1.0f);
+    selectedB = std::clamp(b, 0.0f, 1.0f);
+  }
+
+  void getColor(float& r, float& g, float& b) const {
+    r = selectedR;
+    g = selectedG;
+    b = selectedB;
+  }
+
+  void setColorChangeCallback(ColorChangeCallback callback) { onColorChange = std::move(callback); }
+
+  void update(double /* deltaTime */) override {
+    // No animation in this simple example
+  }
+
+  void render() override {
+    if (!renderer)
+      return;
+
+    int gx = getGlobalX();
+    int gy = getGlobalY();
+
+    // Background
+    renderer->drawRect(gx, gy, width, height, 0.2f, 0.2f, 0.22f, 1.0f);
+
+    // Draw color gradient squares (simplified color picker)
+    const int swatchSize = 40;
+    const int padding = 10;
+    const int cols = 6;
+
+    float colors[18][3] = {{1.0f, 0.0f, 0.0f}, {1.0f, 0.5f, 0.0f},  {1.0f, 1.0f, 0.0f},
+                           {0.0f, 1.0f, 0.0f}, {0.0f, 1.0f, 1.0f},  {0.0f, 0.0f, 1.0f},
+
+                           {0.8f, 0.0f, 0.0f}, {0.8f, 0.4f, 0.0f},  {0.8f, 0.8f, 0.0f},
+                           {0.0f, 0.8f, 0.0f}, {0.0f, 0.8f, 0.8f},  {0.0f, 0.0f, 0.8f},
+
+                           {0.5f, 0.0f, 0.0f}, {0.5f, 0.25f, 0.0f}, {0.5f, 0.5f, 0.0f},
+                           {0.0f, 0.5f, 0.0f}, {0.0f, 0.5f, 0.5f},  {0.0f, 0.0f, 0.5f}};
+
+    for (int i = 0; i < 18; ++i) {
+      int col = i % cols;
+      int row = i / cols;
+      int x = gx + padding + col * (swatchSize + padding);
+      int y = gy + padding + row * (swatchSize + padding);
+
+      renderer->drawRect(x, y, swatchSize, swatchSize, colors[i][0], colors[i][1], colors[i][2], 1.0f);
+
+      // Highlight selected color
+      if (std::abs(selectedR - colors[i][0]) < 0.01f && std::abs(selectedG - colors[i][1]) < 0.01f &&
+          std::abs(selectedB - colors[i][2]) < 0.01f) {
+        // Draw border
+        renderer->drawRect(x - 2, y - 2, swatchSize + 4, 2, 1.0f, 1.0f, 1.0f, 1.0f);
+        renderer->drawRect(x - 2, y + swatchSize, swatchSize + 4, 2, 1.0f, 1.0f, 1.0f, 1.0f);
+        renderer->drawRect(x - 2, y, 2, swatchSize, 1.0f, 1.0f, 1.0f, 1.0f);
+        renderer->drawRect(x + swatchSize, y, 2, swatchSize, 1.0f, 1.0f, 1.0f, 1.0f);
+      }
+    }
+
+    // Draw selected color preview
+    renderer->drawRect(gx + padding, gy + height - 60, width - 2 * padding, 50, selectedR, selectedG, selectedB, 1.0f);
+  }
+
+protected:
+  bool handleEventSelf(const Event& event) override {
+    const int swatchSize = 40;
+    const int padding = 10;
+    const int cols = 6;
+
+    float colors[18][3] = {{1.0f, 0.0f, 0.0f}, {1.0f, 0.5f, 0.0f},  {1.0f, 1.0f, 0.0f},
+                           {0.0f, 1.0f, 0.0f}, {0.0f, 1.0f, 1.0f},  {0.0f, 0.0f, 1.0f},
+
+                           {0.8f, 0.0f, 0.0f}, {0.8f, 0.4f, 0.0f},  {0.8f, 0.8f, 0.0f},
+                           {0.0f, 0.8f, 0.0f}, {0.0f, 0.8f, 0.8f},  {0.0f, 0.0f, 0.8f},
+
+                           {0.5f, 0.0f, 0.0f}, {0.5f, 0.25f, 0.0f}, {0.5f, 0.5f, 0.0f},
+                           {0.0f, 0.5f, 0.0f}, {0.0f, 0.5f, 0.5f},  {0.0f, 0.0f, 0.5f}};
+
+    if (event.type == Event::Type::MOUSE_PRESS && event.button == 0) {
+      // Check if click is on a color swatch
+      for (int i = 0; i < 18; ++i) {
+        int col = i % cols;
+        int row = i / cols;
+        int x = padding + col * (swatchSize + padding);
+        int y = padding + row * (swatchSize + padding);
+
+        if (event.localX >= x && event.localX < x + swatchSize && event.localY >= y && event.localY < y + swatchSize) {
+          selectedR = colors[i][0];
+          selectedG = colors[i][1];
+          selectedB = colors[i][2];
+
+          if (onColorChange) {
+            onColorChange(selectedR, selectedG, selectedB);
+          }
+
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }
+};
+
+// === Builder for ColorPicker ===
+template <typename Derived = ColorPicker>
+class ColorPickerBuilder {
+private:
+  IRenderer* renderer = nullptr;
+  float r = 1.0f, g = 0.5f, b = 0.0f;
+  int x = 0, y = 0;
+  ColorPicker::ColorChangeCallback callback;
+
+public:
+  ColorPickerBuilder(IRenderer* renderer) : renderer(renderer) {}
+
+  ColorPickerBuilder& withPosition(int newX, int newY) {
+    x = newX;
+    y = newY;
+    return *this;
+  }
+
+  ColorPickerBuilder& withColor(float newR, float newG, float newB) {
+    r = newR;
+    g = newG;
+    b = newB;
+    return *this;
+  }
+
+  ColorPickerBuilder& withCallback(ColorPicker::ColorChangeCallback cb) {
+    callback = std::move(cb);
+    return *this;
+  }
+
+  std::unique_ptr<ColorPicker> build() {
+    auto picker = std::make_unique<ColorPicker>(renderer);
+    picker->setPosition(x, y);
+    picker->setColor(r, g, b);
+    if (callback) {
+      picker->setColorChangeCallback(std::move(callback));
+    }
+    return picker;
+  }
+};
+
+// === Main Application ===
+int main() {
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  GLFWwindow* glfwWindow = glfwCreateWindow(800, 600, "01 - Custom Component (ColorPicker)", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(800, 600)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  // Create panel to show selected color
+  auto displayPanel = create<Panel<>>().withSize(300, 200).withPosition(50, 320).build();
+  displayPanel->setBackgroundColor(theming::Color(1.0f, 0.5f, 0.0f, 1.0f));
+
+  auto* displayPtr = displayPanel.get();
+
+  // Create color picker with callback
+  auto colorPicker = ColorPickerBuilder(renderer.get())
+                       .withPosition(50, 50)
+                       .withColor(1.0f, 0.5f, 0.0f)
+                       .withCallback([=](float r, float g, float b) {
+                         displayPtr->setBackgroundColor(theming::Color(r, g, b, 1.0f));
+                         std::cout << "Color changed: RGB(" << r << ", " << g << ", " << b << ")" << std::endl;
+                       })
+                       .build();
+
+  scene->addChild(std::move(colorPicker));
+  scene->addChild(std::move(displayPanel));
+  scene->attach();
+
+  std::cout << "\n=== Custom Component Demo ===" << std::endl;
+  std::cout << "Click on color swatches to change the color" << std::endl;
+  std::cout << "The bottom panel shows the selected color" << std::endl;
+  std::cout << "Press ESC to exit\n" << std::endl;
+
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.1f, 0.1f, 0.12f, 1.0f);
+      scene->updateAll(0.016);
+      scene->renderAll();
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/advanced/02_custom_layout/CMakeLists.txt b/examples/advanced/02_custom_layout/CMakeLists.txt
new file mode 100644
index 0000000..0ff5dca
--- /dev/null
+++ b/examples/advanced/02_custom_layout/CMakeLists.txt
@@ -0,0 +1,24 @@
+cmake_minimum_required(VERSION 3.20)
+
+add_executable(02_custom_layout main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+target_link_libraries(02_custom_layout PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+target_include_directories(02_custom_layout PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+target_compile_features(02_custom_layout PRIVATE cxx_std_20)
+target_compile_options(02_custom_layout PRIVATE -Wno-unused-function)
+add_dependencies(02_custom_layout format-example-sources)
+
+set_target_properties(02_custom_layout PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/advanced/02_custom_layout"
+)
diff --git a/examples/advanced/02_custom_layout/README.md b/examples/advanced/02_custom_layout/README.md
new file mode 100644
index 0000000..befcb81
--- /dev/null
+++ b/examples/advanced/02_custom_layout/README.md
@@ -0,0 +1,27 @@
+# Custom Layout Example - CircularLayout
+
+Demonstrates creating a custom layout manager that positions children in a circle.
+
+## CircularLayout Implementation
+
+```cpp
+template <typename ParentT>
+class CircularLayout : public LayoutManager<CircularLayout<ParentT>> {
+  Dimensions measureLayout(const std::vector<Component*>& components) override;
+  void layout(std::vector<Component*>& components, const Dimensions& available) override;
+};
+```
+
+## Key Concepts
+
+- **CRTP pattern**: Inherit from LayoutManager<YourLayout>
+- **measureLayout()**: Return dimensions needed for all children
+- **layout()**: Position children in available space
+- **Trigonometry**: Use sin/cos to calculate circular positions
+
+## Building
+
+```bash
+mise build-examples
+./build/examples/advanced/02_custom_layout/02_custom_layout
+```
diff --git a/examples/advanced/02_custom_layout/main.cpp b/examples/advanced/02_custom_layout/main.cpp
new file mode 100644
index 0000000..5991591
--- /dev/null
+++ b/examples/advanced/02_custom_layout/main.cpp
@@ -0,0 +1,141 @@
+/**
+ * @file main.cpp
+ * @brief Custom CircularLayout - positions children in a circle
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/layout/layout_manager.h>
+
+#include <cmath>
+#include <iostream>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::layout;
+using namespace bombfork::prong::examples;
+
+// Custom CircularLayout using CRTP
+template <typename ParentT>
+class CircularLayout : public LayoutManager<CircularLayout<ParentT>> {
+private:
+  float radius = 150.0f;
+
+public:
+  void setRadius(float r) { radius = r; }
+
+  Dimensions measureLayout(const std::vector<Component*>& /* components */) override {
+    int size = static_cast<int>(radius * 2 + 100);
+    return {size, size};
+  }
+
+  Dimensions measureLayoutConstrained(const std::vector<Component*>& components,
+                                      const Dimensions& /* constraints */) override {
+    return measureLayout(components);
+  }
+
+  void layout(std::vector<Component*>& components, const Dimensions& available) override {
+    if (components.empty())
+      return;
+
+    int centerX = available.width / 2;
+    int centerY = available.height / 2;
+    int count = static_cast<int>(components.size());
+    float angleStep = 2.0f * 3.14159f / count;
+
+    for (int i = 0; i < count; ++i) {
+      float angle = i * angleStep;
+      int x = centerX + static_cast<int>(radius * std::cos(angle));
+      int y = centerY + static_cast<int>(radius * std::sin(angle));
+
+      int w, h;
+      components[i]->getSize(w, h);
+      components[i]->setPosition(x - w / 2, y - h / 2);
+    }
+  }
+};
+
+int main() {
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  GLFWwindow* glfwWindow = glfwCreateWindow(800, 600, "02 - Custom CircularLayout", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(800, 600)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  using PanelType = Panel<>;
+
+  auto panel = create<Panel<>>().withSize(800, 600).withPosition(0, 0).build();
+  panel->setBackgroundColor(theming::Color(0.12f, 0.12f, 0.14f, 1.0f));
+
+  auto circularLayout = std::make_shared<CircularLayout<PanelType>>();
+  circularLayout->setRadius(200.0f);
+  panel->setLayout(circularLayout);
+
+  for (int i = 1; i <= 8; ++i) {
+    auto btn = create<Button>(std::to_string(i))
+                 .withSize(60, 60)
+                 .withClickCallback([i]() { std::cout << "Button " << i << " clicked!" << std::endl; })
+                 .build();
+    panel->addChild(std::move(btn));
+  }
+
+  scene->addChild(std::move(panel));
+  scene->attach();
+
+  std::cout << "Custom CircularLayout Demo - 8 buttons in a circle" << std::endl;
+
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.08f, 0.08f, 0.1f, 1.0f);
+      scene->updateAll(0.016);
+      scene->renderAll();
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/advanced/03_custom_renderer/CMakeLists.txt b/examples/advanced/03_custom_renderer/CMakeLists.txt
new file mode 100644
index 0000000..e009ba5
--- /dev/null
+++ b/examples/advanced/03_custom_renderer/CMakeLists.txt
@@ -0,0 +1,24 @@
+cmake_minimum_required(VERSION 3.20)
+
+add_executable(03_custom_renderer main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+target_link_libraries(03_custom_renderer PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+target_include_directories(03_custom_renderer PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+target_compile_features(03_custom_renderer PRIVATE cxx_std_20)
+target_compile_options(03_custom_renderer PRIVATE -Wno-unused-function)
+add_dependencies(03_custom_renderer format-example-sources)
+
+set_target_properties(03_custom_renderer PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/advanced/03_custom_renderer"
+)
diff --git a/examples/advanced/03_custom_renderer/README.md b/examples/advanced/03_custom_renderer/README.md
new file mode 100644
index 0000000..81a126b
--- /dev/null
+++ b/examples/advanced/03_custom_renderer/README.md
@@ -0,0 +1,32 @@
+# Custom Renderer Example
+
+Demonstrates the IRenderer interface and renderer concepts. For a full custom renderer, implement all IRenderer methods.
+
+## IRenderer Interface
+
+```cpp
+class IRenderer {
+  virtual bool beginFrame() = 0;
+  virtual void endFrame() = 0;
+  virtual void present() = 0;
+  virtual void clear(float r, float g, float b, float a) = 0;
+  virtual void drawRect(int x, int y, int w, int h, float r, float g, float b, float a) = 0;
+  virtual void drawText(const char* text, int x, int y, float scale, float r, float g, float b, float a) = 0;
+  virtual void enableScissorTest(int x, int y, int w, int h) = 0;
+  virtual void disableScissorTest() = 0;
+};
+```
+
+## Key Concepts
+
+- Frame lifecycle management
+- Coordinate system handling
+- Clipping/scissor testing
+- Batching for performance
+
+## Building
+
+```bash
+mise build-examples
+./build/examples/advanced/03_custom_renderer/03_custom_renderer
+```
diff --git a/examples/advanced/03_custom_renderer/main.cpp b/examples/advanced/03_custom_renderer/main.cpp
new file mode 100644
index 0000000..0bdfc92
--- /dev/null
+++ b/examples/advanced/03_custom_renderer/main.cpp
@@ -0,0 +1,109 @@
+/**
+ * @file main.cpp
+ * @brief Demonstrates custom renderer implementation with detailed IRenderer interface usage
+ *
+ * Shows frame lifecycle, texture management, batching, and clipping.
+ * Note: This uses SimpleOpenGLRenderer as the base and demonstrates the concepts.
+ * A full custom renderer would implement IRenderer from scratch.
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/rendering/irenderer.h>
+
+#include <iostream>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::rendering;
+using namespace bombfork::prong::examples;
+
+int main() {
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  GLFWwindow* glfwWindow = glfwCreateWindow(800, 600, "03 - Custom Renderer", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(800, 600)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  // Demonstrate IRenderer interface usage
+  auto panel = create<Panel<>>().withSize(400, 300).withPosition(200, 150).build();
+  panel->setBackgroundColor(theming::Color(0.2f, 0.3f, 0.4f, 1.0f));
+
+  auto button =
+    create<Button>("Click Me")
+      .withSize(200, 60)
+      .withPosition(100, 120)
+      .withClickCallback([]() { std::cout << "Button demonstrates IRenderer::drawRect and drawText" << std::endl; })
+      .build();
+
+  panel->addChild(std::move(button));
+  scene->addChild(std::move(panel));
+  scene->attach();
+
+  std::cout << "\n=== Custom Renderer Demo ===" << std::endl;
+  std::cout << "This example demonstrates IRenderer interface concepts:" << std::endl;
+  std::cout << "- beginFrame() / endFrame() lifecycle" << std::endl;
+  std::cout << "- clear() for background" << std::endl;
+  std::cout << "- drawRect() for shapes" << std::endl;
+  std::cout << "- drawText() for labels" << std::endl;
+  std::cout << "- Scissor test for clipping" << std::endl;
+  std::cout << "\nPress ESC to exit\n" << std::endl;
+
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    // Frame lifecycle
+    if (renderer->beginFrame()) {
+      renderer->clear(0.1f, 0.1f, 0.12f, 1.0f);
+
+      scene->updateAll(0.016);
+      scene->renderAll();
+
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/advanced/04_performance/CMakeLists.txt b/examples/advanced/04_performance/CMakeLists.txt
new file mode 100644
index 0000000..94478a0
--- /dev/null
+++ b/examples/advanced/04_performance/CMakeLists.txt
@@ -0,0 +1,24 @@
+cmake_minimum_required(VERSION 3.20)
+
+add_executable(04_performance main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+target_link_libraries(04_performance PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+target_include_directories(04_performance PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+target_compile_features(04_performance PRIVATE cxx_std_20)
+target_compile_options(04_performance PRIVATE -Wno-unused-function)
+add_dependencies(04_performance format-example-sources)
+
+set_target_properties(04_performance PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/advanced/04_performance"
+)
diff --git a/examples/advanced/04_performance/README.md b/examples/advanced/04_performance/README.md
new file mode 100644
index 0000000..9e3e70d
--- /dev/null
+++ b/examples/advanced/04_performance/README.md
@@ -0,0 +1,42 @@
+# Performance Optimization Example
+
+Demonstrates performance characteristics with 100 components and optimization techniques built into Prong.
+
+## Performance Features
+
+### 1. Layout Caching
+- Layouts only recalculate when invalidated
+- Use `invalidateLayout()` only when necessary
+- Batch multiple changes before invalidating
+
+### 2. Coordinate Caching
+- Global coordinates cached and invalidated automatically
+- Multiple `getGlobalPosition()` calls in one frame are cheap
+- Cache invalidates on position changes and cascades to children
+
+### 3. CRTP Zero-Cost Abstraction
+- No virtual function overhead for layouts
+- Compile-time polymorphism
+- Templates resolve at compile time
+
+### 4. Efficient Event Propagation
+- Hit testing before processing
+- Events stop at handler (don't continue unnecessarily)
+- Reverse iteration for Z-order
+
+## Best Practices
+
+1. **Batch operations**: Multiple adds/removes, then one invalidate
+2. **Avoid unnecessary updates**: Check if values actually changed
+3. **Use visibility**: Hide instead of remove if component will return
+4. **Layout choice matters**: Pick simplest layout that meets needs
+5. **Event handling**: Return `true` to stop propagation early
+
+## Building
+
+```bash
+mise build-examples
+./build/examples/advanced/04_performance/04_performance
+```
+
+Watch FPS counter in console to see performance.
diff --git a/examples/advanced/04_performance/main.cpp b/examples/advanced/04_performance/main.cpp
new file mode 100644
index 0000000..76cdbfe
--- /dev/null
+++ b/examples/advanced/04_performance/main.cpp
@@ -0,0 +1,122 @@
+/**
+ * @file main.cpp
+ * @brief Performance optimization demonstration - many components with efficient updates
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/layout/grid_layout.h>
+
+#include <chrono>
+#include <iostream>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::layout;
+using namespace bombfork::prong::examples;
+
+int main() {
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  GLFWwindow* glfwWindow = glfwCreateWindow(1200, 800, "04 - Performance (100 Components)", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(1200, 800)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  auto gridLayout = std::make_shared<GridLayout>();
+  gridLayout->configure(GridLayout::Configuration{.columns = 10, .horizontalSpacing = 5.0f, .verticalSpacing = 5.0f});
+
+  auto panel = create<Panel<GridLayout>>().withSize(1200, 800).withPosition(0, 0).withLayout(gridLayout).build();
+
+  // Create 100 buttons
+  std::cout << "Creating 100 components..." << std::endl;
+  for (int i = 1; i <= 100; ++i) {
+    auto btn = create<Button>(std::to_string(i))
+                 .withSize(110, 70)
+                 .withClickCallback([i]() { std::cout << "Button " << i << std::endl; })
+                 .build();
+    panel->addChild(std::move(btn));
+  }
+
+  scene->addChild(std::move(panel));
+  scene->attach();
+
+  std::cout << "\n=== Performance Demo ===" << std::endl;
+  std::cout << "100 components in GridLayout" << std::endl;
+  std::cout << "Watch FPS to see performance characteristics" << std::endl;
+  std::cout << "\nOptimization techniques demonstrated:" << std::endl;
+  std::cout << "- Layout caching (layout only on invalidation)" << std::endl;
+  std::cout << "- Coordinate caching (global coordinates cached)" << std::endl;
+  std::cout << "- Efficient event propagation" << std::endl;
+  std::cout << "- CRTP for zero-overhead polymorphism" << std::endl;
+  std::cout << "\nPress ESC to exit\n" << std::endl;
+
+  auto lastTime = std::chrono::high_resolution_clock::now();
+  int frameCount = 0;
+
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.08f, 0.08f, 0.1f, 1.0f);
+
+      scene->updateAll(0.016);
+      scene->renderAll();
+
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+
+    frameCount++;
+    auto currentTime = std::chrono::high_resolution_clock::now();
+    auto duration = std::chrono::duration_cast<std::chrono::milliseconds>(currentTime - lastTime).count();
+
+    if (duration >= 1000) {
+      std::cout << "FPS: " << frameCount << " (" << (1000.0 / frameCount) << "ms per frame)" << std::endl;
+      frameCount = 0;
+      lastTime = currentTime;
+    }
+  }
+
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/intermediate/01_nested_panels/CMakeLists.txt b/examples/intermediate/01_nested_panels/CMakeLists.txt
new file mode 100644
index 0000000..e8d6c85
--- /dev/null
+++ b/examples/intermediate/01_nested_panels/CMakeLists.txt
@@ -0,0 +1,33 @@
+cmake_minimum_required(VERSION 3.20)
+
+# Create executable
+add_executable(01_nested_panels main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+# Link libraries
+target_link_libraries(01_nested_panels PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+# Include directories
+target_include_directories(01_nested_panels PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+# C++20 standard
+target_compile_features(01_nested_panels PRIVATE cxx_std_20)
+
+# Suppress unused function warnings for STB
+target_compile_options(01_nested_panels PRIVATE -Wno-unused-function)
+
+# Depend on formatting target
+add_dependencies(01_nested_panels format-example-sources)
+
+# Output to build/examples/intermediate/01_nested_panels/
+set_target_properties(01_nested_panels PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/intermediate/01_nested_panels"
+)
diff --git a/examples/intermediate/01_nested_panels/README.md b/examples/intermediate/01_nested_panels/README.md
new file mode 100644
index 0000000..caaebc2
--- /dev/null
+++ b/examples/intermediate/01_nested_panels/README.md
@@ -0,0 +1,124 @@
+# Nested Panels Example
+
+This example demonstrates complex nested layout composition in Prong, showing how multiple layout managers can be combined in a hierarchy to create sophisticated UI structures.
+
+## What This Example Shows
+
+- **Multiple layout manager types** working together in harmony
+- **Three levels of nesting** with different layout strategies
+- **FlexLayout** for flexible horizontal and vertical distribution
+- **GridLayout** for structured 2D grid arrangement
+- **StackLayout** for simple sequential positioning
+
+## Layout Structure
+
+```
+Root Panel (FlexLayout ROW)
+├── Left Panel (StackLayout VERTICAL)
+│   ├── Action 1 Button
+│   ├── Action 2 Button
+│   ├── Action 3 Button
+│   ├── Action 4 Button
+│   └── Action 5 Button
+│
+├── Center Panel (GridLayout 2x2)
+│   ├── Red Panel (with button)
+│   ├── Green Panel (with button)
+│   ├── Blue Panel (with button)
+│   └── Yellow Panel (with button)
+│
+└── Right Panel (FlexLayout COLUMN)
+    ├── Top Panel (StackLayout HORIZONTAL)
+    │   ├── H1 Button
+    │   └── H2 Button
+    └── Bottom Panel (Panel with manual positioning)
+        └── Centered Action Button
+```
+
+## Key Concepts
+
+### Layout Manager Composition
+
+Each panel can have its own layout manager, which controls how its children are positioned:
+
+```cpp
+// Root uses FlexLayout for flexible horizontal arrangement
+auto rootLayout = std::make_unique<FlexLayout<Panel>>();
+rootLayout->setDirection(FlexLayout<Panel>::Direction::ROW);
+rootPanel->setLayoutManager(std::move(rootLayout));
+
+// Left panel uses StackLayout for vertical button stack
+auto leftLayout = std::make_unique<StackLayout<Panel>>();
+leftLayout->setOrientation(StackLayout<Panel>::Orientation::VERTICAL);
+leftPanel->setLayoutManager(std::move(leftLayout));
+
+// Center panel uses GridLayout for 2x2 grid
+auto gridLayout = std::make_unique<GridLayout<Panel>>();
+gridLayout->setRows(2);
+gridLayout->setColumns(2);
+centerPanel->setLayoutManager(std::move(gridLayout));
+```
+
+### When to Use Each Layout Manager
+
+**FlexLayout**: Use when you need:
+- Flexible space distribution
+- Alignment control (justify, align)
+- Grow/shrink behavior
+- Gaps between items
+
+**GridLayout**: Use when you need:
+- Fixed rows and columns
+- Uniform cell sizes
+- Regular grid patterns
+- Equal spacing
+
+**StackLayout**: Use when you need:
+- Simple sequential arrangement
+- Horizontal or vertical stacking
+- Consistent spacing
+- No complex alignment needs
+
+### Mixed Positioning
+
+Notice that some panels use layout managers while others position children manually:
+
+```cpp
+// Manual positioning still works alongside layout managers
+auto centerButton = create<Button>("Centered\nAction")
+                        .withSize(200, 100)
+                        .withPosition(55, 180)  // Manual position
+                        .build();
+```
+
+This is useful when:
+- You need precise control over a few elements
+- Layout managers would be overkill
+- You're creating custom component internals
+
+## Building and Running
+
+```bash
+# Build all examples
+mise build-examples
+
+# Run this example
+./build/examples/intermediate/01_nested_panels/01_nested_panels
+```
+
+## Extending This Example
+
+Try these modifications to learn more:
+
+1. **Change layout directions**: Switch FlexLayout between ROW and COLUMN
+2. **Adjust grid size**: Try a 3x3 or 4x2 grid in the center
+3. **Add more nesting levels**: Add another layer of panels within the grid cells
+4. **Experiment with gaps**: Change `setGap()` and `setSpacing()` values
+5. **Add resize behavior**: Make panels responsive to window resizing
+
+## Related Examples
+
+- **basic/06_flex_layout** - Introduction to FlexLayout
+- **basic/07_grid_layout** - Introduction to GridLayout
+- **intermediate/02_responsive_ui** - Making layouts responsive
+- **intermediate/04_dynamic_layout** - Changing layouts at runtime
diff --git a/examples/intermediate/01_nested_panels/main.cpp b/examples/intermediate/01_nested_panels/main.cpp
new file mode 100644
index 0000000..f54a014
--- /dev/null
+++ b/examples/intermediate/01_nested_panels/main.cpp
@@ -0,0 +1,213 @@
+/**
+ * @file main.cpp
+ * @brief Demonstrates complex nested layout composition
+ *
+ * This example shows how to combine multiple layout managers in a nested
+ * hierarchy:
+ * - Root: FlexLayout (ROW) - Main horizontal split
+ * - Left: StackLayout (VERTICAL) - Vertical stack of buttons
+ * - Center: GridLayout (2x2) - Grid of colored panels
+ * - Right: FlexLayout (COLUMN) - Vertical flex container
+ *   - Top section: StackLayout (HORIZONTAL) - Horizontal button row
+ *   - Bottom section: Panel with centered button
+ *
+ * This demonstrates the power of layout composition in Prong.
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/layout/flex_layout.h>
+#include <bombfork/prong/layout/grid_layout.h>
+#include <bombfork/prong/layout/stack_layout.h>
+
+#include <iostream>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::layout;
+using namespace bombfork::prong::theming;
+using namespace bombfork::prong::examples;
+
+int main() {
+  // Initialize GLFW
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  // Create window
+  GLFWwindow* glfwWindow = glfwCreateWindow(1200, 700, "01 - Nested Panels", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  // Create adapters
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(1200, 700)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  // Create scene
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  // Root container: FlexLayout ROW (horizontal split)
+  auto rootPanel = create<Panel<>>().withSize(1200, 700).withPosition(0, 0).build();
+  rootPanel->setBackgroundColor(Color(0.15f, 0.15f, 0.18f, 1.0f));
+
+  auto rootLayout = std::make_shared<FlexLayout>();
+  rootLayout->configure(
+    FlexLayout::Configuration{.direction = FlexDirection::ROW, .justify = FlexJustify::SPACE_BETWEEN, .gap = 10});
+  rootPanel->setLayout(rootLayout);
+
+  // LEFT SECTION: StackLayout with vertical buttons
+  auto leftPanel = create<Panel<>>().withSize(250, 680).build();
+  leftPanel->setBackgroundColor(Color(0.2f, 0.25f, 0.3f, 1.0f));
+
+  auto leftLayout = std::make_shared<StackLayout>();
+  leftLayout->configure(StackLayout::Configuration{.orientation = StackOrientation::VERTICAL, .spacing = 10});
+  leftPanel->setLayout(leftLayout);
+
+  // Add buttons to left panel
+  for (int i = 1; i <= 5; ++i) {
+    auto button = create<Button>("Action " + std::to_string(i))
+                    .withSize(230, 50)
+                    .withClickCallback([i]() { std::cout << "Left Action " << i << " clicked!" << std::endl; })
+                    .build();
+    leftPanel->addChild(std::move(button));
+  }
+
+  rootPanel->addChild(std::move(leftPanel));
+
+  // CENTER SECTION: GridLayout (2x2 grid of colored panels)
+  auto centerPanel = create<Panel<>>().withSize(600, 680).build();
+  centerPanel->setBackgroundColor(Color(0.18f, 0.18f, 0.2f, 1.0f));
+
+  auto gridLayout = std::make_shared<GridLayout>();
+  gridLayout->configure(
+    GridLayout::Configuration{.columns = 2, .rows = 2, .horizontalSpacing = 15, .verticalSpacing = 15});
+  centerPanel->setLayout(gridLayout);
+
+  // Grid cell colors
+  const float colors[4][4] = {
+    {0.8f, 0.3f, 0.3f, 1.0f}, // Red
+    {0.3f, 0.8f, 0.3f, 1.0f}, // Green
+    {0.3f, 0.3f, 0.8f, 1.0f}, // Blue
+    {0.8f, 0.8f, 0.3f, 1.0f}  // Yellow
+  };
+
+  const char* labels[4] = {"Red\nPanel", "Green\nPanel", "Blue\nPanel", "Yellow\nPanel"};
+
+  for (int i = 0; i < 4; ++i) {
+    auto gridCell = create<Panel<>>().withSize(285, 325).build();
+    gridCell->setBackgroundColor(Color(colors[i][0], colors[i][1], colors[i][2], colors[i][3]));
+
+    // Add a button to each grid cell
+    auto cellButton =
+      create<Button>(labels[i])
+        .withSize(200, 80)
+        .withPosition(42, 122)
+        .withClickCallback([i]() { std::cout << "Grid cell " << i + 1 << " button clicked!" << std::endl; })
+        .build();
+
+    gridCell->addChild(std::move(cellButton));
+    centerPanel->addChild(std::move(gridCell));
+  }
+
+  rootPanel->addChild(std::move(centerPanel));
+
+  // RIGHT SECTION: FlexLayout COLUMN
+  auto rightPanel = create<Panel<>>().withSize(320, 680).build();
+  rightPanel->setBackgroundColor(Color(0.2f, 0.25f, 0.3f, 1.0f));
+
+  auto rightLayout = std::make_shared<FlexLayout>();
+  rightLayout->configure(
+    FlexLayout::Configuration{.direction = FlexDirection::COLUMN, .justify = FlexJustify::SPACE_BETWEEN, .gap = 10});
+  rightPanel->setLayout(rightLayout);
+
+  // Top section of right: StackLayout HORIZONTAL
+  auto rightTopPanel = create<Panel<>>().withSize(310, 200).build();
+  rightTopPanel->setBackgroundColor(Color(0.25f, 0.3f, 0.35f, 1.0f));
+
+  auto rightTopLayout = std::make_shared<StackLayout>();
+  rightTopLayout->configure(StackLayout::Configuration{.orientation = StackOrientation::HORIZONTAL, .spacing = 10});
+  rightTopPanel->setLayout(rightTopLayout);
+
+  // Add horizontal buttons
+  for (int i = 1; i <= 2; ++i) {
+    auto button = create<Button>("H" + std::to_string(i))
+                    .withSize(145, 60)
+                    .withClickCallback([i]() { std::cout << "Right Top H" << i << " clicked!" << std::endl; })
+                    .build();
+    rightTopPanel->addChild(std::move(button));
+  }
+
+  rightPanel->addChild(std::move(rightTopPanel));
+
+  // Bottom section of right: Panel with centered button
+  auto rightBottomPanel = create<Panel<>>().withSize(310, 460).build();
+  rightBottomPanel->setBackgroundColor(Color(0.3f, 0.25f, 0.35f, 1.0f));
+
+  auto centerButton = create<Button>("Centered\nAction")
+                        .withSize(200, 100)
+                        .withPosition(55, 180)
+                        .withClickCallback([]() { std::cout << "Centered action clicked!" << std::endl; })
+                        .build();
+
+  rightBottomPanel->addChild(std::move(centerButton));
+  rightPanel->addChild(std::move(rightBottomPanel));
+
+  rootPanel->addChild(std::move(rightPanel));
+
+  // Add root panel to scene
+  scene->addChild(std::move(rootPanel));
+  scene->attach();
+
+  // Main loop
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.1f, 0.1f, 0.12f, 1.0f);
+
+      scene->updateAll(0.016);
+      scene->renderAll();
+
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  // Cleanup
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/intermediate/02_responsive_ui/CMakeLists.txt b/examples/intermediate/02_responsive_ui/CMakeLists.txt
new file mode 100644
index 0000000..335a8b6
--- /dev/null
+++ b/examples/intermediate/02_responsive_ui/CMakeLists.txt
@@ -0,0 +1,33 @@
+cmake_minimum_required(VERSION 3.20)
+
+# Create executable
+add_executable(02_responsive_ui main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+# Link libraries
+target_link_libraries(02_responsive_ui PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+# Include directories
+target_include_directories(02_responsive_ui PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+# C++20 standard
+target_compile_features(02_responsive_ui PRIVATE cxx_std_20)
+
+# Suppress unused function warnings for STB
+target_compile_options(02_responsive_ui PRIVATE -Wno-unused-function)
+
+# Depend on formatting target
+add_dependencies(02_responsive_ui format-example-sources)
+
+# Output to build/examples/intermediate/02_responsive_ui/
+set_target_properties(02_responsive_ui PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/intermediate/02_responsive_ui"
+)
diff --git a/examples/intermediate/02_responsive_ui/README.md b/examples/intermediate/02_responsive_ui/README.md
new file mode 100644
index 0000000..add6773
--- /dev/null
+++ b/examples/intermediate/02_responsive_ui/README.md
@@ -0,0 +1,205 @@
+# Responsive UI Example
+
+This example demonstrates how Prong components adapt to window resizing using resize behaviors and constraints. **Try resizing the window** to see the different behaviors in action!
+
+## What This Example Shows
+
+- **ResizeBehavior** enum for unified resize handling
+- **AxisResizeBehavior** for independent horizontal/vertical control
+- **ResponsiveConstraints** for min/max bounds
+- **Real-time window resize handling** with immediate feedback
+
+## Resize Behaviors Demonstrated
+
+### 1. FIXED (Left Panel - Purple)
+```cpp
+fixedPanel->setResizeBehavior(Component::ResizeBehavior::FIXED);
+```
+
+**Behavior**: Component maintains its original size regardless of window resizing.
+
+**Use cases**:
+- Fixed-width sidebars
+- Toolbars with specific dimensions
+- Components that should never change size
+
+### 2. SCALE (Second Panel - Green)
+```cpp
+scalePanel->setResizeBehavior(Component::ResizeBehavior::SCALE);
+```
+
+**Behavior**: Component scales proportionally with the window. If the window doubles in size, the component doubles in size.
+
+**Use cases**:
+- Maintaining relative sizes across different screen resolutions
+- Scaling UI elements uniformly
+- Responsive designs that preserve proportions
+
+### 3. FILL (Third Panel - Blue)
+```cpp
+fillPanel->setResizeBehavior(Component::ResizeBehavior::FILL);
+```
+
+**Behavior**: Component expands to fill all available space in its parent.
+
+**Use cases**:
+- Main content areas
+- Flexible panels that should use extra space
+- Dynamic layouts where size is unknown
+
+### 4. PER-AXIS with CONSTRAINTS (Right Panel - Orange)
+```cpp
+// Fixed width (stays 250px), fill height (stretches vertically)
+constrainedPanel->setAxisResizeBehavior(
+    Component::AxisResizeBehavior::FIXED,
+    Component::AxisResizeBehavior::FILL
+);
+
+// Prevent extremes with constraints
+Component::ResponsiveConstraints constraints;
+constraints.minWidth = 200;
+constraints.maxWidth = 300;
+constraints.minHeight = 300;
+constraints.maxHeight = 800;
+constrainedPanel->setConstraints(constraints);
+```
+
+**Behavior**: Independent control per axis plus min/max boundaries.
+
+**Use cases**:
+- Sidebars that keep width but fill height
+- Headers that fill width but keep height
+- Components that need bounded flexibility
+
+## Window Resize Integration
+
+To enable window resizing, you need to:
+
+1. **Set up the resize callback**:
+```cpp
+void framebufferSizeCallback(GLFWwindow* window, int width, int height) {
+  if (g_scene) {
+    g_scene->handleResize(width, height);
+  }
+  glViewport(0, 0, width, height);
+}
+
+glfwSetFramebufferSizeCallback(glfwWindow, framebufferSizeCallback);
+```
+
+2. **Make root component responsive**:
+```cpp
+rootPanel->setResizeBehavior(Component::ResizeBehavior::FILL);
+```
+
+The `Scene::handleResize()` method automatically:
+- Updates the scene dimensions
+- Triggers resize events for all children
+- Recalculates layouts
+- Invalidates coordinate caches
+
+## Choosing the Right Resize Behavior
+
+### ResizeBehavior (Unified)
+Best when both axes should behave the same way:
+- `FIXED`: Static components
+- `SCALE`: Proportional scaling
+- `FILL`: Maximum flexibility
+- `MAINTAIN_ASPECT`: Preserve aspect ratio while scaling
+
+### AxisResizeBehavior (Per-Axis)
+Best when axes need different behaviors:
+```cpp
+component->setAxisResizeBehavior(
+    Component::AxisResizeBehavior::FIXED,   // Horizontal
+    Component::AxisResizeBehavior::FILL     // Vertical
+);
+```
+
+Common patterns:
+- **Sidebar**: FIXED horizontal, FILL vertical
+- **Header**: FILL horizontal, FIXED vertical
+- **Corner panel**: FIXED both (same as ResizeBehavior::FIXED)
+- **Content area**: FILL both (same as ResizeBehavior::FILL)
+
+## Constraints
+
+Add constraints to any resize behavior:
+
+```cpp
+Component::ResponsiveConstraints constraints;
+constraints.minWidth = 200;   // Won't shrink below 200px wide
+constraints.maxWidth = 600;   // Won't grow beyond 600px wide
+constraints.minHeight = 150;  // Won't shrink below 150px tall
+constraints.maxHeight = 450;  // Won't grow beyond 450px tall
+component->setConstraints(constraints);
+```
+
+Constraints work with all resize behaviors and prevent components from becoming too small (unreadable) or too large (wasted space).
+
+## Building and Running
+
+```bash
+# Build all examples
+mise build-examples
+
+# Run this example
+./build/examples/intermediate/02_responsive_ui/02_responsive_ui
+```
+
+**Important**: Resize the window to see the behaviors in action!
+
+## Extending This Example
+
+Try these modifications:
+
+1. **Change resize behaviors**: Swap FIXED with SCALE, or FILL with FIXED
+2. **Adjust constraints**: Make them tighter or looser
+3. **Add nested panels**: See how resize behavior cascades
+4. **Mix with layouts**: Combine with FlexLayout grow/shrink factors
+5. **Try MAINTAIN_ASPECT**: Add a panel that keeps its aspect ratio
+
+## Common Patterns
+
+### Responsive Three-Panel Layout
+```cpp
+// Left sidebar: fixed width, fills height
+leftPanel->setAxisResizeBehavior(
+    Component::AxisResizeBehavior::FIXED,
+    Component::AxisResizeBehavior::FILL
+);
+
+// Center content: fills both dimensions
+centerPanel->setResizeBehavior(Component::ResizeBehavior::FILL);
+
+// Right sidebar: fixed width, fills height
+rightPanel->setAxisResizeBehavior(
+    Component::AxisResizeBehavior::FIXED,
+    Component::AxisResizeBehavior::FILL
+);
+```
+
+### Header-Content-Footer
+```cpp
+// Header: fills width, fixed height
+header->setAxisResizeBehavior(
+    Component::AxisResizeBehavior::FILL,
+    Component::AxisResizeBehavior::FIXED
+);
+
+// Content: fills everything
+content->setResizeBehavior(Component::ResizeBehavior::FILL);
+
+// Footer: fills width, fixed height
+footer->setAxisResizeBehavior(
+    Component::AxisResizeBehavior::FILL,
+    Component::AxisResizeBehavior::FIXED
+);
+```
+
+## Related Examples
+
+- **basic/01_hello_button** - Basic window setup
+- **intermediate/01_nested_panels** - Complex layouts
+- **intermediate/04_dynamic_layout** - Runtime layout changes
+- **demo_app** - Full application with responsive panels
diff --git a/examples/intermediate/02_responsive_ui/main.cpp b/examples/intermediate/02_responsive_ui/main.cpp
new file mode 100644
index 0000000..a7c4ea6
--- /dev/null
+++ b/examples/intermediate/02_responsive_ui/main.cpp
@@ -0,0 +1,231 @@
+/**
+ * @file main.cpp
+ * @brief Demonstrates window resize behavior and responsive constraints
+ *
+ * This example shows how components can adapt to window resizing using:
+ * - ResizeBehavior (unified behavior for both axes)
+ * - AxisResizeBehavior (independent horizontal/vertical behavior)
+ * - ResponsiveConstraints (min/max bounds)
+ *
+ * Try resizing the window to see how different panels respond!
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/layout/flex_layout.h>
+#include <bombfork/prong/theming/color.h>
+
+#include <iostream>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::layout;
+using namespace bombfork::prong::theming;
+using namespace bombfork::prong::examples;
+
+// Global scene pointer for resize callback
+Scene* g_scene = nullptr;
+
+void framebufferSizeCallback(GLFWwindow* /* window */, int width, int height) {
+  if (g_scene) {
+    g_scene->onWindowResize(width, height);
+  }
+  glViewport(0, 0, width, height);
+}
+
+int main() {
+  // Initialize GLFW
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  // Create window
+  const int initialWidth = 1000;
+  const int initialHeight = 600;
+  GLFWwindow* glfwWindow =
+    glfwCreateWindow(initialWidth, initialHeight, "02 - Responsive UI (Resize Me!)", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  // Create adapters
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(initialWidth, initialHeight)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  // Create scene
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+  g_scene = scene.get();
+
+  // Set resize callback
+  glfwSetFramebufferSizeCallback(glfwWindow, framebufferSizeCallback);
+
+  // Root panel with FlexLayout (horizontal)
+  auto rootPanel = create<Panel<>>().withSize(initialWidth, initialHeight).withPosition(0, 0).build();
+
+  rootPanel->setBackgroundColor(theming::Color(0.12f, 0.12f, 0.14f, 1.0f));
+  rootPanel->setResizeBehavior(Component::ResizeBehavior::FILL);
+
+  auto rootLayout = std::make_shared<FlexLayout>();
+  rootLayout->configure(FlexLayout::Configuration{.direction = FlexDirection::ROW, .gap = 15.0f});
+  rootPanel->setLayout(rootLayout);
+
+  // === PANEL 1: FIXED BEHAVIOR ===
+  // This panel maintains its original size regardless of window resize
+  auto fixedPanel = create<Panel<>>().withSize(200, 550).build();
+  fixedPanel->setBackgroundColor(theming::Color(0.3f, 0.2f, 0.25f, 1.0f));
+
+  fixedPanel->setResizeBehavior(Component::ResizeBehavior::FIXED);
+
+  auto fixedLabel = create<Button>("FIXED\n\nStays 200x550\nregardless of\nwindow size")
+                      .withSize(180, 120)
+                      .withPosition(10, 10)
+                      .build();
+  fixedPanel->addChild(std::move(fixedLabel));
+
+  auto fixedButton = create<Button>("I don't resize!")
+                       .withSize(180, 50)
+                       .withPosition(10, 150)
+                       .withClickCallback([]() { std::cout << "Fixed button clicked!" << std::endl; })
+                       .build();
+  fixedPanel->addChild(std::move(fixedButton));
+
+  rootPanel->addChild(std::move(fixedPanel));
+
+  // === PANEL 2: SCALE BEHAVIOR ===
+  // This panel scales proportionally with the window
+  auto scalePanel = create<Panel<>>().withSize(200, 550).build();
+  scalePanel->setBackgroundColor(theming::Color(0.2f, 0.3f, 0.25f, 1.0f));
+
+  scalePanel->setResizeBehavior(Component::ResizeBehavior::SCALE);
+
+  auto scaleLabel =
+    create<Button>("SCALE\n\nScales\nproportionally\nwith window").withSize(180, 120).withPosition(10, 10).build();
+  scalePanel->addChild(std::move(scaleLabel));
+
+  auto scaleButton = create<Button>("I scale!")
+                       .withSize(180, 50)
+                       .withPosition(10, 150)
+                       .withClickCallback([]() { std::cout << "Scale button clicked!" << std::endl; })
+                       .build();
+  scalePanel->addChild(std::move(scaleButton));
+
+  rootPanel->addChild(std::move(scalePanel));
+
+  // === PANEL 3: FILL BEHAVIOR ===
+  // This panel fills all available space
+  auto fillPanel = create<Panel<>>().withSize(200, 550).build();
+  fillPanel->setBackgroundColor(theming::Color(0.2f, 0.25f, 0.35f, 1.0f));
+
+  fillPanel->setResizeBehavior(Component::ResizeBehavior::FILL);
+
+  auto fillLabel =
+    create<Button>("FILL\n\nFills all\navailable space\nin parent").withSize(180, 120).withPosition(10, 10).build();
+  fillPanel->addChild(std::move(fillLabel));
+
+  auto fillButton = create<Button>("I fill space!")
+                      .withSize(180, 50)
+                      .withPosition(10, 150)
+                      .withClickCallback([]() { std::cout << "Fill button clicked!" << std::endl; })
+                      .build();
+  fillPanel->addChild(std::move(fillButton));
+
+  rootPanel->addChild(std::move(fillPanel));
+
+  // === PANEL 4: PER-AXIS BEHAVIOR WITH CONSTRAINTS ===
+  // Fixed width, fill height, with min/max constraints
+  auto constrainedPanel = create<Panel<>>().withSize(250, 550).build();
+  constrainedPanel->setBackgroundColor(theming::Color(0.3f, 0.25f, 0.2f, 1.0f));
+
+  // Fixed horizontal (keeps 250px width), fill vertical (stretches height)
+  constrainedPanel->setAxisResizeBehavior(Component::AxisResizeBehavior::FIXED, Component::AxisResizeBehavior::FILL);
+
+  // Set constraints to prevent too small or too large sizes
+  Component::ResponsiveConstraints constraints;
+  constraints.minWidth = 200;
+  constraints.maxWidth = 300;
+  constraints.minHeight = 300;
+  constraints.maxHeight = 800;
+  constrainedPanel->setConstraints(constraints);
+
+  auto constrainedLabel = create<Button>("PER-AXIS\n+ CONSTRAINTS\n\nFixed width\nFill height\n\nMin: 200x300\nMax: "
+                                         "300x800")
+                            .withSize(230, 180)
+                            .withPosition(10, 10)
+                            .build();
+  constrainedPanel->addChild(std::move(constrainedLabel));
+
+  auto constrainedButton = create<Button>("Constrained!")
+                             .withSize(230, 50)
+                             .withPosition(10, 210)
+                             .withClickCallback([]() { std::cout << "Constrained button clicked!" << std::endl; })
+                             .build();
+  constrainedPanel->addChild(std::move(constrainedButton));
+
+  rootPanel->addChild(std::move(constrainedPanel));
+
+  // Add root to scene
+  scene->addChild(std::move(rootPanel));
+  scene->attach();
+
+  std::cout << "\n=== Responsive UI Demo ===" << std::endl;
+  std::cout << "Resize the window to see different resize behaviors!" << std::endl;
+  std::cout << "\nPanel behaviors from left to right:" << std::endl;
+  std::cout << "1. FIXED - Stays 200x550 regardless of window size" << std::endl;
+  std::cout << "2. SCALE - Scales proportionally with window" << std::endl;
+  std::cout << "3. FILL - Fills all available space" << std::endl;
+  std::cout << "4. PER-AXIS + CONSTRAINTS - Fixed width, fill height, bounded by min/max" << std::endl;
+  std::cout << "\nPress ESC to exit\n" << std::endl;
+
+  // Main loop
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.08f, 0.08f, 0.1f, 1.0f);
+
+      scene->updateAll(0.016);
+      scene->renderAll();
+
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  // Cleanup
+  g_scene = nullptr;
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/intermediate/03_event_handling/CMakeLists.txt b/examples/intermediate/03_event_handling/CMakeLists.txt
new file mode 100644
index 0000000..e628578
--- /dev/null
+++ b/examples/intermediate/03_event_handling/CMakeLists.txt
@@ -0,0 +1,33 @@
+cmake_minimum_required(VERSION 3.20)
+
+# Create executable
+add_executable(03_event_handling main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+# Link libraries
+target_link_libraries(03_event_handling PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+# Include directories
+target_include_directories(03_event_handling PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+# C++20 standard
+target_compile_features(03_event_handling PRIVATE cxx_std_20)
+
+# Suppress unused function warnings for STB
+target_compile_options(03_event_handling PRIVATE -Wno-unused-function)
+
+# Depend on formatting target
+add_dependencies(03_event_handling format-example-sources)
+
+# Output to build/examples/intermediate/03_event_handling/
+set_target_properties(03_event_handling PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/intermediate/03_event_handling"
+)
diff --git a/examples/intermediate/03_event_handling/README.md b/examples/intermediate/03_event_handling/README.md
new file mode 100644
index 0000000..fec39c9
--- /dev/null
+++ b/examples/intermediate/03_event_handling/README.md
@@ -0,0 +1,299 @@
+# Event Handling Example
+
+This example demonstrates advanced event handling patterns in Prong, including custom event handlers, event propagation, focus management, and keyboard shortcuts.
+
+## What This Example Shows
+
+- **Custom event handling** by overriding `handleEventSelf()`
+- **Event propagation** through the component tree
+- **Stopping propagation** when events are handled
+- **Focus management** with visual feedback
+- **Mouse interactions**: clicks, drag tracking, hover states
+- **Keyboard shortcuts** for focused components
+- **Multiple event types**: mouse, keyboard, scroll, char input
+
+## Event System Overview
+
+### Event Flow
+
+Events in Prong follow a hierarchical propagation model:
+
+1. **Scene receives event** from the window system (GLFW in this case)
+2. **Scene calls handleEvent()** on root components
+3. **Parent propagates to children** in reverse order (topmost rendered first)
+4. **Each component**:
+   - Checks if event is within its bounds (`containsEvent()`)
+   - Converts coordinates to local space
+   - Calls `handleEventSelf()` for component-specific handling
+   - Propagates to children if event not handled
+5. **Event stops** when a component returns `true` from `handleEventSelf()`
+
+### Event Types
+
+The `Event` struct supports these types:
+
+```cpp
+enum class Type {
+  MOUSE_PRESS,   // Mouse button pressed
+  MOUSE_RELEASE, // Mouse button released
+  MOUSE_MOVE,    // Mouse cursor moved
+  MOUSE_SCROLL,  // Mouse wheel scrolled
+  KEY_PRESS,     // Keyboard key pressed
+  KEY_RELEASE,   // Keyboard key released
+  CHAR_INPUT     // Character input (for text)
+};
+```
+
+## Custom Event Handler Pattern
+
+To handle events in a custom component, override `handleEventSelf()`:
+
+```cpp
+class InteractivePanel : public Component {
+protected:
+  bool handleEventSelf(const Event& event) override {
+    switch (event.type) {
+      case Event::Type::MOUSE_PRESS:
+        // Handle mouse press
+        if (event.button == 0) { // Left button
+          // Do something
+          return true; // Stop propagation
+        }
+        break;
+
+      case Event::Type::KEY_PRESS:
+        // Handle keyboard input
+        if (focusState == FocusState::FOCUSED) {
+          // Handle key
+          return true;
+        }
+        break;
+
+      // ... other event types
+    }
+
+    return false; // Event not handled, continue propagation
+  }
+};
+```
+
+### Return Value Semantics
+
+The return value from `handleEventSelf()` controls propagation:
+
+- **`true`**: Event was handled, stop propagation (siblings and parent won't see it)
+- **`false`**: Event not handled, continue propagation to parent/siblings
+
+**Example**: A button should return `true` on click to prevent the click from also triggering the panel behind it.
+
+## Coordinates in Events
+
+Events contain coordinates in **local space** relative to the component:
+
+```cpp
+case Event::Type::MOUSE_PRESS:
+  // event.localX and event.localY are relative to this component
+  // (0, 0) is the top-left corner of this component
+  std::cout << "Clicked at local position: "
+            << event.localX << ", " << event.localY << std::endl;
+  break;
+```
+
+The framework automatically converts global screen coordinates to local coordinates during propagation, so you never need to do this manually.
+
+## Focus Management
+
+Components can request and receive focus:
+
+```cpp
+// Request focus (typically on click)
+requestFocus();
+
+// Check focus state
+if (focusState == FocusState::FOCUSED) {
+  // Handle keyboard input
+}
+
+// Focus states
+enum class FocusState {
+  NONE,     // Not focused, not focusable
+  FOCUSABLE, // Can receive focus but doesn't have it
+  FOCUSED   // Currently has focus
+};
+```
+
+### Focus Behavior
+
+- Only **one component** can have focus at a time
+- **Scene manages focus** globally
+- **Clicking a component** typically requests focus
+- **Keyboard events** only go to focused components
+- **Visual feedback** (like a border) shows focus state
+
+## Hover States
+
+The `Component` base class tracks hover state automatically:
+
+```cpp
+void render() override {
+  if (isCurrentlyHovered) {
+    // Mouse is over this component
+    renderer->drawRect(gx, gy, w, h, hoverR, hoverG, hoverB, 1.0f);
+  } else {
+    // Normal rendering
+    renderer->drawRect(gx, gy, w, h, r, g, b, 1.0f);
+  }
+}
+```
+
+Hover state is updated automatically during event propagation - you just need to check the flag.
+
+## Interactive Example Features
+
+### Click Tracking
+```cpp
+case Event::Type::MOUSE_PRESS:
+  if (event.button == 0) {
+    clickCount++;
+    return true; // Stop propagation
+  }
+```
+
+### Drag Tracking
+```cpp
+case Event::Type::MOUSE_PRESS:
+  isDragging = true;
+  dragStartX = event.localX;
+  dragStartY = event.localY;
+  return true;
+
+case Event::Type::MOUSE_MOVE:
+  if (isDragging) {
+    int dx = event.localX - dragStartX;
+    int dy = event.localY - dragStartY;
+    // Track drag delta
+  }
+  return false; // Don't stop propagation for move
+
+case Event::Type::MOUSE_RELEASE:
+  isDragging = false;
+  return true;
+```
+
+### Keyboard Shortcuts
+```cpp
+case Event::Type::KEY_PRESS:
+  if (focusState == FocusState::FOCUSED) {
+    if (event.key == GLFW_KEY_SPACE) {
+      // Handle spacebar
+      return true;
+    }
+    if (event.key == GLFW_KEY_R) {
+      // Handle 'R' key
+      return true;
+    }
+  }
+  break;
+```
+
+### Scroll Handling
+```cpp
+case Event::Type::MOUSE_SCROLL:
+  // event.scrollX and event.scrollY contain scroll deltas
+  lastEvent = "Scroll: x=" + std::to_string(event.scrollX) +
+              " y=" + std::to_string(event.scrollY);
+  return true;
+```
+
+## Building and Running
+
+```bash
+# Build all examples
+mise build-examples
+
+# Run this example
+./build/examples/intermediate/03_event_handling/03_event_handling
+```
+
+Try interacting with the panels to see different event handling patterns!
+
+## Common Patterns
+
+### Button-like Component
+```cpp
+bool handleEventSelf(const Event& event) override {
+  if (event.type == Event::Type::MOUSE_PRESS && event.button == 0) {
+    if (onClick) onClick();
+    return true; // Stop propagation
+  }
+  return false;
+}
+```
+
+### Draggable Component
+```cpp
+bool handleEventSelf(const Event& event) override {
+  switch (event.type) {
+    case Event::Type::MOUSE_PRESS:
+      isDragging = true;
+      return true;
+
+    case Event::Type::MOUSE_RELEASE:
+      isDragging = false;
+      return true;
+
+    case Event::Type::MOUSE_MOVE:
+      if (isDragging) {
+        // Update position based on drag
+      }
+      return isDragging; // Only stop if dragging
+  }
+  return false;
+}
+```
+
+### Keyboard-Controlled Component
+```cpp
+bool handleEventSelf(const Event& event) override {
+  if (event.type == Event::Type::KEY_PRESS &&
+      focusState == FocusState::FOCUSED) {
+
+    // Arrow key navigation
+    if (event.key == GLFW_KEY_UP) { /* move up */ return true; }
+    if (event.key == GLFW_KEY_DOWN) { /* move down */ return true; }
+
+    // Action keys
+    if (event.key == GLFW_KEY_ENTER) { /* activate */ return true; }
+    if (event.key == GLFW_KEY_ESCAPE) { /* cancel */ return true; }
+  }
+  return false;
+}
+```
+
+## Best Practices
+
+1. **Return true when handling**: If you process an event, return `true` to stop propagation
+2. **Check focus for keyboard**: Only handle keyboard events when focused
+3. **Use local coordinates**: Events already provide local coordinates - don't convert
+4. **Provide visual feedback**: Show hover, focus, and active states
+5. **Handle related events together**: Press and release, drag start and end
+6. **Don't stop everything**: Mouse move often shouldn't stop propagation
+7. **Request focus on interaction**: Call `requestFocus()` when clicked
+
+## Extending This Example
+
+Try these modifications:
+
+1. **Add double-click detection**: Track time between clicks
+2. **Implement right-click menu**: Handle `button == 1` (right button)
+3. **Add keyboard navigation**: Tab to move focus between panels
+4. **Implement tooltips**: Show on hover after delay
+5. **Add gesture detection**: Swipe, pinch, etc.
+6. **Create modal dialogs**: Block events to components behind
+
+## Related Examples
+
+- **basic/01_hello_button** - Simple click handling
+- **basic/04_text_input** - Text input and keyboard handling
+- **intermediate/04_dynamic_layout** - Dynamic component interaction
+- **advanced/01_custom_component** - Building complex custom components
diff --git a/examples/intermediate/03_event_handling/main.cpp b/examples/intermediate/03_event_handling/main.cpp
new file mode 100644
index 0000000..391d574
--- /dev/null
+++ b/examples/intermediate/03_event_handling/main.cpp
@@ -0,0 +1,299 @@
+/**
+ * @file main.cpp
+ * @brief Demonstrates advanced event handling patterns
+ *
+ * This example shows:
+ * - Custom event handling with handleEventSelf override
+ * - Event propagation through the component tree
+ * - Stopping event propagation when handled
+ * - Focus management and keyboard shortcuts
+ * - Mouse hover states and visual feedback
+ * - Different event types (mouse, keyboard, char input)
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/event.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/layout/stack_layout.h>
+#include <bombfork/prong/rendering/irenderer.h>
+#include <bombfork/prong/theming/color.h>
+
+#include <iostream>
+#include <sstream>
+#include <string>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::core;
+using namespace bombfork::prong::layout;
+using namespace bombfork::prong::rendering;
+using namespace bombfork::prong::examples;
+
+// === Custom Interactive Panel ===
+// This custom panel handles events directly and provides visual feedback
+class InteractivePanel : public Component {
+private:
+  float r, g, b, a;
+  float hoverR, hoverG, hoverB;
+  bool isDragging = false;
+  int dragStartX = 0, dragStartY = 0;
+  int clickCount = 0;
+  std::string label;
+  std::string lastEvent;
+
+public:
+  InteractivePanel(IRenderer* renderer, const std::string& label, float r, float g, float b)
+    : Component(renderer, "InteractivePanel"), r(r), g(g), b(b), a(1.0f), hoverR(r * 1.3f), hoverG(g * 1.3f),
+      hoverB(b * 1.3f), label(label) {}
+
+  void update(double /* deltaTime */) override {
+    // Required override - nothing to update for this example
+  }
+
+  void render() override {
+    if (!renderer)
+      return;
+
+    int gx = getGlobalX();
+    int gy = getGlobalY();
+
+    // Use hover color when mouse is over this component
+    if (isCurrentlyHovered) {
+      renderer->drawRect(gx, gy, width, height, hoverR, hoverG, hoverB, a);
+    } else {
+      renderer->drawRect(gx, gy, width, height, r, g, b, a);
+    }
+
+    // Draw border to show focus
+    if (focusState == FocusState::FOCUSED) {
+      // Draw thick border
+      renderer->drawRect(gx, gy, width, 4, 1.0f, 1.0f, 0.0f, 1.0f);              // Top
+      renderer->drawRect(gx, gy + height - 4, width, 4, 1.0f, 1.0f, 0.0f, 1.0f); // Bottom
+      renderer->drawRect(gx, gy, 4, height, 1.0f, 1.0f, 0.0f, 1.0f);             // Left
+      renderer->drawRect(gx + width - 4, gy, 4, height, 1.0f, 1.0f, 0.0f, 1.0f); // Right
+    }
+
+    // Render label and state
+    std::stringstream ss;
+    ss << label << "\n\nClicks: " << clickCount << "\n\n" << lastEvent;
+
+    if (isDragging) {
+      ss << "\n\nDRAGGING";
+    }
+
+    if (focusState == FocusState::FOCUSED) {
+      ss << "\n\n[FOCUSED]";
+    }
+
+    // Simple text rendering (button-style for visibility)
+    renderer->drawText(ss.str(), gx + 10, gy + 10, 1.0f, 1.0f, 1.0f, 1.0f);
+  }
+
+protected:
+  // Override handleEventSelf to handle events for this component
+  bool handleEventSelf(const Event& event) override {
+    switch (event.type) {
+    case Event::Type::MOUSE_PRESS:
+      if (event.button == 0) { // Left click
+        clickCount++;
+        lastEvent = "Mouse Press (Left)";
+        isDragging = true;
+        dragStartX = event.localX;
+        dragStartY = event.localY;
+
+        // Request focus when clicked
+        requestFocus();
+
+        return true; // Event handled, stop propagation
+      }
+      break;
+
+    case Event::Type::MOUSE_RELEASE:
+      if (event.button == 0) {
+        lastEvent = "Mouse Release (Left)";
+        isDragging = false;
+        return true;
+      }
+      break;
+
+    case Event::Type::MOUSE_MOVE:
+      if (isDragging) {
+        int dx = event.localX - dragStartX;
+        int dy = event.localY - dragStartY;
+        lastEvent = "Dragging dx:" + std::to_string(dx) + " dy:" + std::to_string(dy);
+      } else {
+        lastEvent = "Mouse Move (" + std::to_string(event.localX) + ", " + std::to_string(event.localY) + ")";
+      }
+      // Don't stop propagation for mouse move - let parent track too
+      return false;
+
+    case Event::Type::KEY_PRESS:
+      // Handle keyboard shortcuts when focused
+      if (focusState == FocusState::FOCUSED) {
+        lastEvent = "Key Press: " + std::to_string(event.key);
+
+        // Space bar to reset counter
+        if (event.key == GLFW_KEY_SPACE) {
+          clickCount = 0;
+          lastEvent = "Counter Reset (Space)";
+          return true;
+        }
+
+        // R to change red tint
+        if (event.key == GLFW_KEY_R) {
+          r = (r > 0.5f) ? 0.2f : 0.8f;
+          lastEvent = "Red Toggle (R)";
+          return true;
+        }
+
+        // G to change green tint
+        if (event.key == GLFW_KEY_G) {
+          g = (g > 0.5f) ? 0.2f : 0.8f;
+          lastEvent = "Green Toggle (G)";
+          return true;
+        }
+
+        // B to change blue tint
+        if (event.key == GLFW_KEY_B) {
+          b = (b > 0.5f) ? 0.2f : 0.8f;
+          lastEvent = "Blue Toggle (B)";
+          return true;
+        }
+      }
+      break;
+
+    case Event::Type::KEY_RELEASE:
+      if (focusState == FocusState::FOCUSED) {
+        lastEvent = "Key Release: " + std::to_string(event.key);
+      }
+      break;
+
+    case Event::Type::CHAR_INPUT:
+      if (focusState == FocusState::FOCUSED) {
+        lastEvent = "Char Input: " + std::to_string(event.codepoint);
+        return true;
+      }
+      break;
+
+    case Event::Type::MOUSE_SCROLL:
+      lastEvent = "Scroll: x=" + std::to_string(event.scrollX) + " y=" + std::to_string(event.scrollY);
+      return true;
+
+    default:
+      break;
+    }
+
+    return false; // Event not handled
+  }
+};
+
+int main() {
+  // Initialize GLFW
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  // Create window
+  GLFWwindow* glfwWindow = glfwCreateWindow(1000, 600, "03 - Event Handling", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  // Create adapters
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(1000, 600)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  // Create scene
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  // Root panel
+  auto rootPanel = create<Panel<>>().withSize(1000, 600).withPosition(0, 0).build();
+  rootPanel->setBackgroundColor(theming::Color(0.12f, 0.12f, 0.14f, 1.0f));
+
+  auto rootLayout = std::make_shared<StackLayout>();
+  rootLayout->configure(StackLayout::Configuration{.orientation = StackOrientation::HORIZONTAL, .spacing = 20.0f});
+  rootPanel->setLayout(rootLayout);
+
+  // Create three interactive panels
+  auto panel1 = std::make_unique<InteractivePanel>(renderer.get(), "Panel 1\n(Red)", 0.6f, 0.2f, 0.2f);
+  panel1->setBounds(0, 0, 300, 560);
+
+  auto panel2 = std::make_unique<InteractivePanel>(renderer.get(), "Panel 2\n(Green)", 0.2f, 0.6f, 0.2f);
+  panel2->setBounds(0, 0, 300, 560);
+
+  auto panel3 = std::make_unique<InteractivePanel>(renderer.get(), "Panel 3\n(Blue)", 0.2f, 0.2f, 0.6f);
+  panel3->setBounds(0, 0, 300, 560);
+
+  rootPanel->addChild(std::move(panel1));
+  rootPanel->addChild(std::move(panel2));
+  rootPanel->addChild(std::move(panel3));
+
+  scene->addChild(std::move(rootPanel));
+  scene->attach();
+
+  std::cout << "\n=== Event Handling Demo ===" << std::endl;
+  std::cout << "\nInteractions:" << std::endl;
+  std::cout << "- Click any panel to focus it (yellow border)" << std::endl;
+  std::cout << "- Drag within a panel to see drag tracking" << std::endl;
+  std::cout << "- Move mouse to see hover effects (lighter color)" << std::endl;
+  std::cout << "- Mouse wheel to see scroll events" << std::endl;
+  std::cout << "\nKeyboard shortcuts (when panel is focused):" << std::endl;
+  std::cout << "- SPACE: Reset click counter" << std::endl;
+  std::cout << "- R: Toggle red tint" << std::endl;
+  std::cout << "- G: Toggle green tint" << std::endl;
+  std::cout << "- B: Toggle blue tint" << std::endl;
+  std::cout << "\nPress ESC to exit\n" << std::endl;
+
+  // Main loop
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.08f, 0.08f, 0.1f, 1.0f);
+
+      scene->updateAll(0.016);
+      scene->renderAll();
+
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  // Cleanup
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}
diff --git a/examples/intermediate/04_dynamic_layout/CMakeLists.txt b/examples/intermediate/04_dynamic_layout/CMakeLists.txt
new file mode 100644
index 0000000..b03b44a
--- /dev/null
+++ b/examples/intermediate/04_dynamic_layout/CMakeLists.txt
@@ -0,0 +1,33 @@
+cmake_minimum_required(VERSION 3.20)
+
+# Create executable
+add_executable(04_dynamic_layout main.cpp
+    ${CMAKE_CURRENT_SOURCE_DIR}/../../adapters/stb_impl.cpp
+)
+
+# Link libraries
+target_link_libraries(04_dynamic_layout PRIVATE
+    bombfork::prong
+    glfw
+    OpenGL::GL
+    stb_headers
+)
+
+# Include directories
+target_include_directories(04_dynamic_layout PRIVATE
+    ${CMAKE_CURRENT_SOURCE_DIR}/../..
+)
+
+# C++20 standard
+target_compile_features(04_dynamic_layout PRIVATE cxx_std_20)
+
+# Suppress unused function warnings for STB
+target_compile_options(04_dynamic_layout PRIVATE -Wno-unused-function)
+
+# Depend on formatting target
+add_dependencies(04_dynamic_layout format-example-sources)
+
+# Output to build/examples/intermediate/04_dynamic_layout/
+set_target_properties(04_dynamic_layout PROPERTIES
+    RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/examples/intermediate/04_dynamic_layout"
+)
diff --git a/examples/intermediate/04_dynamic_layout/README.md b/examples/intermediate/04_dynamic_layout/README.md
new file mode 100644
index 0000000..9cf8dd3
--- /dev/null
+++ b/examples/intermediate/04_dynamic_layout/README.md
@@ -0,0 +1,272 @@
+# Dynamic Layout Example
+
+This example demonstrates how to manipulate UI at runtime, including adding/removing components, switching layout managers, and updating properties dynamically.
+
+## What This Example Shows
+
+- **Adding components** at runtime with `addChild()`
+- **Removing components** with `removeChild()`
+- **Switching layout managers** dynamically
+- **Invalidating layouts** to trigger recalculation
+- **Random component generation** for testing
+- **Interactive UI manipulation** through control panel
+
+## Runtime UI Manipulation
+
+### Adding Components
+
+```cpp
+void addPanel() {
+  // Create new panel
+  auto panel = create<Panel>()
+                   .withSize(120, 100)
+                   .withBackgroundColor(r, g, b, 1.0f)
+                   .build();
+
+  // Add to parent
+  g_contentPanel->addChild(std::move(panel));
+
+  // Trigger layout recalculation
+  g_contentPanel->invalidateLayout();
+}
+```
+
+Key points:
+- Create component with builder pattern
+- Transfer ownership with `std::move()`
+- Call `invalidateLayout()` to update positions
+
+### Removing Components
+
+```cpp
+void removePanel() {
+  auto& children = g_contentPanel->getChildren();
+  if (!children.empty()) {
+    // Remove last child
+    g_contentPanel->removeChild(children.back());
+    g_contentPanel->invalidateLayout();
+  }
+}
+```
+
+Key points:
+- Get reference to children vector
+- Pass pointer to child you want removed
+- Layout is automatically recalculated
+
+### Clearing All Components
+
+```cpp
+void clearPanels() {
+  auto& children = g_contentPanel->getChildren();
+  while (!children.empty()) {
+    g_contentPanel->removeChild(children.back());
+  }
+  g_contentPanel->invalidateLayout();
+}
+```
+
+## Dynamic Layout Switching
+
+### Switching Layout Managers
+
+You can change the layout manager at runtime:
+
+```cpp
+void useFlexLayoutRow() {
+  auto layout = std::make_unique<FlexLayout<Panel>>();
+  layout->setDirection(FlexLayout<Panel>::Direction::ROW);
+  layout->setGap(10);
+
+  g_contentPanel->setLayoutManager(std::move(layout));
+  g_contentPanel->invalidateLayout();
+}
+
+void useGridLayout() {
+  auto layout = std::make_unique<GridLayout<Panel>>();
+  layout->setColumns(3);
+  layout->setGap(10);
+
+  g_contentPanel->setLayoutManager(std::move(layout));
+  g_contentPanel->invalidateLayout();
+}
+```
+
+The same children are automatically repositioned according to the new layout manager.
+
+### When to Invalidate Layout
+
+Call `invalidateLayout()` when:
+- Adding or removing children
+- Changing layout manager
+- Modifying layout properties (gap, direction, etc.)
+- Changing component sizes that affect layout
+
+The layout will be recalculated on the next update cycle.
+
+## Component Lifecycle
+
+### Creating Components at Runtime
+
+```cpp
+std::unique_ptr<Panel> createRandomPanel() {
+  // Use builder pattern
+  auto panel = create<Panel>()
+                   .withSize(120, 100)
+                   .withBackgroundColor(r, g, b, 1.0f)
+                   .build();
+
+  // Can add children before adding to parent
+  auto label = create<Button>("Label")
+                   .withSize(100, 60)
+                   .withPosition(10, 20)
+                   .build();
+
+  panel->addChild(std::move(label));
+
+  return panel; // Return unique_ptr
+}
+```
+
+### Ownership Model
+
+Prong uses `std::unique_ptr` for ownership:
+
+```cpp
+// Create component (you own it)
+auto component = create<Button>("Click").build();
+
+// Transfer ownership to parent
+parent->addChild(std::move(component));
+// component is now nullptr, parent owns it
+
+// Parent owns children until:
+// 1. Parent is destroyed (children destroyed automatically)
+// 2. Child is explicitly removed with removeChild()
+```
+
+## Interactive Control Panel Pattern
+
+This example uses a common pattern: control panel + content area
+
+```cpp
+// Root with horizontal FlexLayout
+// ├── Control Panel (left)
+// │   ├── Add Button
+// │   ├── Remove Button
+// │   ├── Clear Button
+// │   ├── Layout Buttons...
+// │   └── ...
+// └── Content Panel (right)
+//     └── Dynamic children
+```
+
+Benefits:
+- Separate controls from content
+- Easy to add new operations
+- Clear visual organization
+- Testable manipulation logic
+
+## Building and Running
+
+```bash
+# Build all examples
+mise build-examples
+
+# Run this example
+./build/examples/intermediate/04_dynamic_layout/04_dynamic_layout
+```
+
+Experiment with different layouts and panel counts!
+
+## Common Patterns
+
+### Adding Multiple Components
+
+```cpp
+void addMultiple(int count) {
+  for (int i = 0; i < count; ++i) {
+    contentPanel->addChild(createComponent());
+  }
+  // Invalidate once after all additions
+  contentPanel->invalidateLayout();
+}
+```
+
+### Conditional Component Display
+
+```cpp
+void updateVisibility(bool showAdvanced) {
+  for (auto& child : panel->getChildren()) {
+    if (isAdvancedComponent(child.get())) {
+      child->setVisible(showAdvanced);
+    }
+  }
+}
+```
+
+### Updating Component Properties
+
+```cpp
+void updateTheme(const Color& color) {
+  for (auto& child : panel->getChildren()) {
+    if (auto* button = dynamic_cast<Button*>(child.get())) {
+      button->setBackgroundColor(color);
+    }
+  }
+}
+```
+
+### Animated Addition/Removal
+
+```cpp
+void animateAdd(std::unique_ptr<Component> component) {
+  // Start with size 0
+  component->setSize(0, 0);
+  auto* compPtr = component.get();
+
+  parent->addChild(std::move(component));
+
+  // Animate size over time in update()
+  // (Would need proper animation system for this)
+}
+```
+
+## Use Cases
+
+This pattern is useful for:
+
+1. **Dynamic Lists**: Adding items as they're created
+2. **Tab Panels**: Switching content based on active tab
+3. **Wizards**: Different steps with different layouts
+4. **Responsive Layouts**: Changing layout based on screen size
+5. **Plugin Systems**: Loading UI components dynamically
+6. **Game Menus**: Building menus from data
+7. **Settings Panels**: Showing/hiding options conditionally
+
+## Performance Considerations
+
+- **Batch operations**: Invalidate layout once after multiple changes
+- **Reuse components**: Keep pool of components instead of creating/destroying
+- **Lazy creation**: Create components only when needed
+- **Visibility over removal**: Hide components instead of removing if they'll be needed again
+
+## Extending This Example
+
+Try these modifications:
+
+1. **Add animation**: Fade in new panels
+2. **Drag to reorder**: Let users drag panels to reorder them
+3. **Save/load layout**: Serialize layout configuration
+4. **Undo/redo**: Track operations for undo
+5. **Different component types**: Mix buttons, text inputs, etc.
+6. **Layout transitions**: Animate between layout changes
+7. **Templates**: Save and load layout templates
+
+## Related Examples
+
+- **basic/06_flex_layout** - FlexLayout introduction
+- **basic/07_grid_layout** - GridLayout introduction
+- **intermediate/01_nested_panels** - Static nested layouts
+- **intermediate/02_responsive_ui** - Resize behavior
+- **demo_app** - Full application with dynamic UI
diff --git a/examples/intermediate/04_dynamic_layout/main.cpp b/examples/intermediate/04_dynamic_layout/main.cpp
new file mode 100644
index 0000000..6f41bea
--- /dev/null
+++ b/examples/intermediate/04_dynamic_layout/main.cpp
@@ -0,0 +1,322 @@
+/**
+ * @file main.cpp
+ * @brief Demonstrates runtime UI changes and dynamic layout management
+ *
+ * This example shows how to:
+ * - Add and remove components at runtime
+ * - Switch layout managers dynamically
+ * - Update component properties programmatically
+ * - Show and hide components
+ * - Rebuild layouts on demand
+ *
+ * A control panel lets you manipulate a dynamic content area in real-time.
+ */
+
+#include "../../adapters/glfw_window_adapter.h"
+#include "../../adapters/simple_opengl_renderer.h"
+#include <GLFW/glfw3.h>
+#include <bombfork/prong/components/button.h>
+#include <bombfork/prong/components/panel.h>
+#include <bombfork/prong/core/component_builder.h>
+#include <bombfork/prong/core/scene.h>
+#include <bombfork/prong/layout/flex_layout.h>
+#include <bombfork/prong/layout/grid_layout.h>
+#include <bombfork/prong/layout/stack_layout.h>
+#include <bombfork/prong/theming/color.h>
+
+#include <iostream>
+#include <random>
+
+using namespace bombfork::prong;
+using namespace bombfork::prong::layout;
+using namespace bombfork::prong::theming;
+using namespace bombfork::prong::examples;
+
+// Global state for dynamic manipulation
+Panel<>* g_contentPanel = nullptr;
+rendering::IRenderer* g_renderer = nullptr;
+int g_panelCounter = 0;
+
+// Random number generator for colors
+std::random_device rd;
+std::mt19937 gen(rd());
+std::uniform_real_distribution<float> colorDist(0.2f, 0.8f);
+
+// Helper: Create a random colored panel
+std::unique_ptr<Panel<>> createRandomPanel() {
+  g_panelCounter++;
+
+  float r = colorDist(gen);
+  float g = colorDist(gen);
+  float b = colorDist(gen);
+
+  auto panel = create<Panel<>>().withSize(120, 100).build();
+  panel->setBackgroundColor(Color(r, g, b, 1.0f));
+
+  // Add a label button to show the panel number
+  auto label =
+    create<Button>("Panel\n" + std::to_string(g_panelCounter)).withSize(100, 60).withPosition(10, 20).build();
+
+  panel->addChild(std::move(label));
+  return panel;
+}
+
+// Action: Add a panel
+void addPanel() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Adding panel #" << g_panelCounter + 1 << std::endl;
+  g_contentPanel->addChild(createRandomPanel());
+  g_contentPanel->invalidateLayout();
+}
+
+// Action: Remove last panel
+void removePanel() {
+  if (!g_contentPanel)
+    return;
+
+  auto& children = g_contentPanel->getChildren();
+  if (!children.empty()) {
+    std::cout << "Removing last panel" << std::endl;
+    g_contentPanel->removeChild(children.back().get());
+    g_contentPanel->invalidateLayout();
+  } else {
+    std::cout << "No panels to remove" << std::endl;
+  }
+}
+
+// Action: Clear all panels
+void clearPanels() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Clearing all panels" << std::endl;
+  auto& children = g_contentPanel->getChildren();
+  while (!children.empty()) {
+    g_contentPanel->removeChild(children.back().get());
+  }
+  g_contentPanel->invalidateLayout();
+}
+
+// Action: Switch to FlexLayout ROW
+void useFlexLayoutRow() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Switching to FlexLayout (ROW)" << std::endl;
+  auto layout = std::make_shared<FlexLayout>();
+  layout->configure(
+    FlexLayout::Configuration{.direction = FlexDirection::ROW, .justify = FlexJustify::START, .gap = 10.0f});
+  g_contentPanel->setLayout(layout);
+  g_contentPanel->invalidateLayout();
+}
+
+// Action: Switch to FlexLayout COLUMN
+void useFlexLayoutColumn() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Switching to FlexLayout (COLUMN)" << std::endl;
+  auto layout = std::make_shared<FlexLayout>();
+  layout->configure(
+    FlexLayout::Configuration{.direction = FlexDirection::COLUMN, .justify = FlexJustify::START, .gap = 10.0f});
+  g_contentPanel->setLayout(layout);
+  g_contentPanel->invalidateLayout();
+}
+
+// Action: Switch to GridLayout
+void useGridLayout() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Switching to GridLayout (3 columns)" << std::endl;
+  auto layout = std::make_shared<GridLayout>();
+  layout->configure(GridLayout::Configuration{.columns = 3, .horizontalSpacing = 10.0f, .verticalSpacing = 10.0f});
+  g_contentPanel->setLayout(layout);
+  g_contentPanel->invalidateLayout();
+}
+
+// Action: Switch to StackLayout HORIZONTAL
+void useStackLayoutHorizontal() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Switching to StackLayout (HORIZONTAL)" << std::endl;
+  auto layout = std::make_shared<StackLayout>();
+  layout->configure(StackLayout::Configuration{.orientation = StackOrientation::HORIZONTAL, .spacing = 10.0f});
+  g_contentPanel->setLayout(layout);
+  g_contentPanel->invalidateLayout();
+}
+
+// Action: Switch to StackLayout VERTICAL
+void useStackLayoutVertical() {
+  if (!g_contentPanel)
+    return;
+
+  std::cout << "Switching to StackLayout (VERTICAL)" << std::endl;
+  auto layout = std::make_shared<StackLayout>();
+  layout->configure(StackLayout::Configuration{.orientation = StackOrientation::VERTICAL, .spacing = 10.0f});
+  g_contentPanel->setLayout(layout);
+  g_contentPanel->invalidateLayout();
+}
+
+int main() {
+  // Initialize GLFW
+  if (!glfwInit()) {
+    std::cerr << "Failed to initialize GLFW" << std::endl;
+    return -1;
+  }
+
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
+  glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
+  glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_COMPAT_PROFILE);
+
+  // Create window
+  GLFWwindow* glfwWindow = glfwCreateWindow(1200, 700, "04 - Dynamic Layout", nullptr, nullptr);
+  if (!glfwWindow) {
+    std::cerr << "Failed to create GLFW window" << std::endl;
+    glfwTerminate();
+    return -1;
+  }
+
+  glfwMakeContextCurrent(glfwWindow);
+  glfwSwapInterval(1);
+
+  // Create adapters
+  auto windowAdapter = std::make_unique<GLFWWindowAdapter>(glfwWindow);
+  auto renderer = std::make_unique<SimpleOpenGLRenderer>();
+
+  if (!renderer->initialize(1200, 700)) {
+    std::cerr << "Failed to initialize renderer" << std::endl;
+    glfwDestroyWindow(glfwWindow);
+    glfwTerminate();
+    return -1;
+  }
+
+  g_renderer = renderer.get();
+
+  // Create scene
+  auto scene = std::make_unique<Scene>(windowAdapter.get(), renderer.get());
+
+  // Root panel with horizontal layout
+  auto rootPanel = create<Panel<>>().withSize(1200, 700).withPosition(0, 0).build();
+  rootPanel->setBackgroundColor(Color(0.12f, 0.12f, 0.14f, 1.0f));
+
+  auto rootLayout = std::make_shared<FlexLayout>();
+  rootLayout->configure(FlexLayout::Configuration{.direction = FlexDirection::ROW, .gap = 15.0f});
+  rootPanel->setLayout(rootLayout);
+
+  // LEFT: Control panel with buttons
+  auto controlPanel = create<Panel<>>().withSize(280, 680).build();
+  controlPanel->setBackgroundColor(Color(0.18f, 0.2f, 0.25f, 1.0f));
+
+  auto controlLayout = std::make_shared<StackLayout>();
+  controlLayout->configure(StackLayout::Configuration{.orientation = StackOrientation::VERTICAL, .spacing = 8.0f});
+  controlPanel->setLayout(controlLayout);
+
+  // Content manipulation buttons
+  auto addBtn = create<Button>("Add Panel").withSize(260, 40).withClickCallback(addPanel).build();
+  controlPanel->addChild(std::move(addBtn));
+
+  auto removeBtn = create<Button>("Remove Panel").withSize(260, 40).withClickCallback(removePanel).build();
+  controlPanel->addChild(std::move(removeBtn));
+
+  auto clearBtn = create<Button>("Clear All").withSize(260, 40).withClickCallback(clearPanels).build();
+  controlPanel->addChild(std::move(clearBtn));
+
+  // Spacer
+  auto spacer1 = create<Panel<>>().withSize(260, 20).build();
+  spacer1->setBackgroundColor(Color(0.0f, 0.0f, 0.0f, 0.0f));
+  controlPanel->addChild(std::move(spacer1));
+
+  // Layout switching buttons
+  auto flexRowBtn = create<Button>("FlexLayout ROW").withSize(260, 40).withClickCallback(useFlexLayoutRow).build();
+  controlPanel->addChild(std::move(flexRowBtn));
+
+  auto flexColBtn =
+    create<Button>("FlexLayout COLUMN").withSize(260, 40).withClickCallback(useFlexLayoutColumn).build();
+  controlPanel->addChild(std::move(flexColBtn));
+
+  auto gridBtn = create<Button>("GridLayout (3 cols)").withSize(260, 40).withClickCallback(useGridLayout).build();
+  controlPanel->addChild(std::move(gridBtn));
+
+  auto stackHBtn =
+    create<Button>("StackLayout HORIZ").withSize(260, 40).withClickCallback(useStackLayoutHorizontal).build();
+  controlPanel->addChild(std::move(stackHBtn));
+
+  auto stackVBtn =
+    create<Button>("StackLayout VERT").withSize(260, 40).withClickCallback(useStackLayoutVertical).build();
+  controlPanel->addChild(std::move(stackVBtn));
+
+  rootPanel->addChild(std::move(controlPanel));
+
+  // RIGHT: Dynamic content panel
+  auto contentPanel = create<Panel<>>().withSize(890, 680).build();
+  contentPanel->setBackgroundColor(Color(0.15f, 0.15f, 0.18f, 1.0f));
+
+  // Start with FlexLayout ROW
+  auto initialLayout = std::make_shared<FlexLayout>();
+  initialLayout->configure(FlexLayout::Configuration{.direction = FlexDirection::ROW, .gap = 10.0f});
+  contentPanel->setLayout(initialLayout);
+
+  // Store pointer for manipulation
+  g_contentPanel = contentPanel.get();
+
+  // Add a few initial panels
+  for (int i = 0; i < 3; ++i) {
+    contentPanel->addChild(createRandomPanel());
+  }
+
+  rootPanel->addChild(std::move(contentPanel));
+
+  // Add root to scene
+  scene->addChild(std::move(rootPanel));
+  scene->attach();
+
+  std::cout << "\n=== Dynamic Layout Demo ===" << std::endl;
+  std::cout << "\nContent Manipulation:" << std::endl;
+  std::cout << "- Add Panel: Add a new random colored panel" << std::endl;
+  std::cout << "- Remove Panel: Remove the last panel" << std::endl;
+  std::cout << "- Clear All: Remove all panels" << std::endl;
+  std::cout << "\nLayout Switching:" << std::endl;
+  std::cout << "- FlexLayout ROW: Horizontal flexible layout" << std::endl;
+  std::cout << "- FlexLayout COLUMN: Vertical flexible layout" << std::endl;
+  std::cout << "- GridLayout: 3-column grid" << std::endl;
+  std::cout << "- StackLayout HORIZ: Horizontal stack" << std::endl;
+  std::cout << "- StackLayout VERT: Vertical stack" << std::endl;
+  std::cout << "\nPress ESC to exit\n" << std::endl;
+
+  // Main loop
+  while (!windowAdapter->shouldClose()) {
+    glfwPollEvents();
+
+    if (windowAdapter->isKeyPressed(GLFW_KEY_ESCAPE)) {
+      glfwSetWindowShouldClose(glfwWindow, GLFW_TRUE);
+    }
+
+    if (renderer->beginFrame()) {
+      renderer->clear(0.08f, 0.08f, 0.1f, 1.0f);
+
+      scene->updateAll(0.016);
+      scene->renderAll();
+
+      renderer->endFrame();
+    }
+
+    glfwSwapBuffers(glfwWindow);
+  }
+
+  // Cleanup
+  g_contentPanel = nullptr;
+  g_renderer = nullptr;
+  scene->detach();
+  scene.reset();
+  renderer.reset();
+  windowAdapter.reset();
+
+  glfwDestroyWindow(glfwWindow);
+  glfwTerminate();
+
+  return 0;
+}