ratatui_ruby 0.6.0 → 0.7.0

data/examples/app_all_events/update.rb

@@ -9,7 +9,7 @@ require_relative "model/event_entry"
 require_relative "model/timestamp"
 require_relative "model/event_color_cycle"
 
-# Pure update function for the Proto-TEA architecture.
+# Pure update function for the Model-View-Update architecture.
 #
 # Given a Msg and the current AppModel, returns the next AppModel.
 # This function is pure: it does not mutate arguments, draw to the screen,

data/examples/app_all_events/view/app_view.rb

@@ -36,7 +36,7 @@ class View::App
   # [model] AppModel containing all application data.
   # [tui] RatatuiRuby instance.
   # [frame] RatatuiRuby::Frame being rendered.
-  # [area] RatatuiRuby::Rect defining the total available space.
+  # [area] RatatuiRuby::Layout::Rect defining the total available space.
   #
   # === Example
   #

data/examples/app_all_events/view/controls_view.rb

@@ -24,7 +24,7 @@ class View::Controls
   # [model] AppModel (unused, included for consistent interface).
   # [tui] RatatuiRuby instance.
   # [frame] RatatuiRuby::Frame being rendered.
-  # [area] RatatuiRuby::Rect defining the widget's bounds.
+  # [area] RatatuiRuby::Layout::Rect defining the widget's bounds.
   #
   # === Example
   #

data/examples/app_all_events/view/counts_view.rb

@@ -18,7 +18,7 @@ class View::Counts
   # [model] AppModel containing event data.
   # [tui] RatatuiRuby instance.
   # [frame] RatatuiRuby::Frame being rendered.
-  # [area] RatatuiRuby::Rect defining the widget's bounds.
+  # [area] RatatuiRuby::Layout::Rect defining the widget's bounds.
   def call(model, tui, frame, area)
     dimmed_style = tui.style(fg: :dark_gray)
     lit_style = tui.style(fg: :green, modifiers: [:bold])

data/examples/app_all_events/view/live_view.rb

@@ -24,7 +24,7 @@ class View::Live
   # [model] AppModel containing event data.
   # [tui] RatatuiRuby instance.
   # [frame] RatatuiRuby::Frame being rendered.
-  # [area] RatatuiRuby::Rect defining the widget's bounds.
+  # [area] RatatuiRuby::Layout::Rect defining the widget's bounds.
   #
   # === Example
   #

data/examples/app_all_events/view/log_view.rb

@@ -19,7 +19,7 @@ class View::Log
   # [model] AppModel containing event data.
   # [tui] RatatuiRuby instance.
   # [frame] RatatuiRuby::Frame being rendered.
-  # [area] RatatuiRuby::Rect defining the widget's bounds.
+  # [area] RatatuiRuby::Layout::Rect defining the widget's bounds.
   def call(model, tui, frame, area)
     dimmed_style = tui.style(fg: :dark_gray)
     border_color = model.focused ? :green : :gray

data/examples/app_color_picker/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Color Picker Example
 
+[![Color Picker](../../doc/images/app_color_picker.png)](app.rb)
+
 This example demonstrates how to build a **Feature-Rich Interactive Application** using `ratatui_ruby`.
 
 It goes beyond simple widgets to show a complete, real-world architecture for handling:
@@ -13,7 +15,7 @@ It goes beyond simple widgets to show a complete, real-world architecture for ha
 -   **Dynamic Layouts**
 -   **Modal Dialogs**
 
-## Architecture: The "Proto-Kit" Pattern (Component-Based)
+## Architecture: Component-Based
 
 This app uses a **Strict Component-Based Architecture** where every UI element encapsulates its own **Rendering**, **State**, and **Event Handling**.
 
@@ -119,16 +121,16 @@ ruby examples/app_color_picker/app.rb
 
 Complex applications require structured state habits. This Color Picker and the [App All Events](../app_all_events/README.md) example demonstrate two different approaches.
 
-### The Tool Approach (Color Picker - Proto-Kit)
+### The Tool Approach (Color Picker)
 
 Tools require interaction. Users click buttons and drag sliders. Components need to know where they exist on screen for hit testing. The Container orchestrates cross-component effects.
 
-This example uses the **Proto-Kit (Component-Based)** pattern. Each component owns its own state, rendering, and event handling. The Container routes events and mediates communication.
+This example uses a **Component-Based** pattern. Each component owns its own state, rendering, and event handling. The Container routes events and mediates communication.
 
 Use this pattern for forms, editors, and mouse-driven tools.
 
-### The Dashboard Approach (AppAllEvents - Proto-TEA)
+### The Dashboard Approach (AppAllEvents)
 
-Dashboards display data. They rarely require complex mouse interaction. Proto-TEA (Model-View-Update) works best there. State is immutable. Logic is pure. Updates are predictable. This simplifies testing.
+Dashboards display data. They rarely require complex mouse interaction. Model-View-Update works best there. State is immutable. Logic is pure. Updates are predictable. This simplifies testing.
 
 Use that pattern for logs, monitors, and data viewers.

data/examples/app_color_picker/app.rb

@@ -19,7 +19,7 @@ require_relative "main_container"
 #
 # === Architecture
 #
-# This example uses the Proto-Kit (Component-Based) pattern:
+# This example uses a Component-Based pattern:
 # - **Components**: Self-contained UI elements with `render`, `handle_event`, and optional `tick`
 # - **Container**: Owns layout, delegates to children, routes events via Chain of Responsibility
 # - **Mediator**: Container interprets symbolic signals (`:consumed`, `:submitted`) for cross-component effects

data/examples/app_login_form/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Login Form Example
 
+[![Login Form](../../doc/images/app_login_form.png)](app.rb)
+
 Demonstrates how to create a modal overlay for user input.
 
 Many applications need to block interaction with the main UI while collecting specific information, like a login prompt or confirmation dialog. Managing the z-index and input focus for these overlays can be tricky.

data/examples/app_stateful_interaction/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Stateful Interaction Example
 
+[![Stateful Interaction](../../doc/images/app_stateful_interaction.png)](app.rb)
+
 This example demonstrates High-Fidelity Interaction using **Stateful Widget Rendering**.
 
 It showcases a "Database Viewer" layout where:

data/examples/app_stateful_interaction/app.rb

@@ -161,7 +161,7 @@ class AppStatefulInteraction
         borders: [:all],
         border_style: is_active ? @style_active : @style_inactive
       ),
-      highlight_style: @style_highlight
+      row_highlight_style: @style_highlight
     )
 
     frame.render_stateful_widget(table, area, @table_state)

data/examples/verify_quickstart_dsl/README.md

@@ -5,14 +5,15 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Quickstart DSL Verification
 
-Verifies the "Idiomatic Session" tutorial in the [Quickstart](../../doc/quickstart.md#idiomatic-session).
+Verifies the "Simplified API" tutorial in the [Quickstart](../../doc/quickstart.md#simplified-api).
 
-This example exists as a documentation regression test. It ensures the recommended DSL and session-based workflow remains functional.
+This example exists as a documentation regression test. It ensures the recommended TUI facade and managed lifecycle workflow remains functional.
 
 ## Usage
 
 <!-- SYNC:START:app.rb:main -->
 ```ruby
+# 1. Initialize the terminal, start the run loop, and ensure the terminal is restored.
 RatatuiRuby.run do |tui|
   loop do
     # 2. Create your UI with methods instead of classes.
@@ -45,4 +46,4 @@ end
 ```
 <!-- SYNC:END -->
 
-![verify_quickstart_dsl](../../doc/images/verify_quickstart_dsl.png)
+[![verify_quickstart_dsl](../../doc/images/verify_quickstart_dsl.png)](../../doc/quickstart.md#simplified-api)

data/examples/verify_quickstart_dsl/app.rb

@@ -9,8 +9,8 @@ require "ratatui_ruby"
 
 class VerifyQuickstartDsl
   def run
-    # 1. Initialize the terminal, start the run loop, and ensure the terminal is restored.
     # [SYNC:START:main]
+    # 1. Initialize the terminal, start the run loop, and ensure the terminal is restored.
     RatatuiRuby.run do |tui|
       loop do
         # 2. Create your UI with methods instead of classes.

data/examples/verify_quickstart_layout/README.md

@@ -68,4 +68,4 @@ end
 ```
 <!-- SYNC:END -->
 
-![verify_quickstart_layout](../../doc/images/verify_quickstart_layout.png)
+[![verify_quickstart_layout](../../doc/images/verify_quickstart_layout.png)](../../doc/quickstart.md#adding-layouts)

data/examples/verify_quickstart_lifecycle/README.md

@@ -21,10 +21,10 @@ begin
   loop do
     # 2. Create your UI (Immediate Mode)
     # We define a Paragraph widget inside a Block with a title and borders.
-    view = RatatuiRuby::Paragraph.new(
+    view = RatatuiRuby::Widgets::Paragraph.new(
       text: "Hello, Ratatui! Press 'q' to quit.",
       alignment: :center,
-      block: RatatuiRuby::Block.new(
+      block: RatatuiRuby::Widgets::Block.new(
         title: "My Ruby TUI App",
         title_alignment: :center,
         borders: [:all],
@@ -53,4 +53,4 @@ end
 ```
 <!-- SYNC:END -->
 
-![verify_quickstart_lifecycle](../../doc/images/verify_quickstart_lifecycle.png)
+[![verify_quickstart_lifecycle](../../doc/images/verify_quickstart_lifecycle.png)](../../doc/quickstart.md#basic-application)

data/examples/verify_quickstart_lifecycle/app.rb

@@ -18,10 +18,10 @@ class VerifyQuickstartLifecycle
       loop do
         # 2. Create your UI (Immediate Mode)
         # We define a Paragraph widget inside a Block with a title and borders.
-        view = RatatuiRuby::Paragraph.new(
+        view = RatatuiRuby::Widgets::Paragraph.new(
           text: "Hello, Ratatui! Press 'q' to quit.",
           alignment: :center,
-          block: RatatuiRuby::Block.new(
+          block: RatatuiRuby::Widgets::Block.new(
             title: "My Ruby TUI App",
             title_alignment: :center,
             borders: [:all],

data/examples/verify_readme_usage/README.md

@@ -40,4 +40,4 @@ end
 ```
 <!-- SYNC:END -->
 
-![verify_readme_usage](../../doc/images/verify_readme_usage.png)
+[![verify_readme_usage](../../doc/images/verify_readme_usage.png)](../../README.md#usage)

data/examples/widget_barchart_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # BarChart Widget Example
 
+[![BarChart Demo](../../doc/images/widget_barchart_demo.png)](app.rb)
+
 Visualizes categorical data with interactive attribute cycling.
 
 Comparing magnitudes in raw tables requires mental arithmetic. Bar charts make these comparisons instant and intuitive.
@@ -46,4 +48,3 @@ Use this example if you need to...
 - Create "stats" dashboards with compact visualizations.
 - Understand how `RatatuiRuby::BarChart` handles different data structures.
 
-![Demo](/doc/images/widget_barchart_demo.png)

data/examples/widget_block_demo/README.md

@@ -4,6 +4,8 @@
 -->
 # Block Widget Demo
 
+[![Block Demo](../../doc/images/widget_block_demo.png)](app.rb)
+
 This example demonstrates the versatile `Block` widget, which provides the visual container, borders, and titles for almost every other widget in `ratatui_ruby`.
 
 ## Key Concepts

data/examples/widget_box_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Box (Block) Widget Example
 
+[![widget_box_demo](../../doc/images/widget_box_demo.png)](app.rb)
+
 Demonstrates visual container attributes with interactive cycling.
 
 Widgets often float in a void. Without boundaries, interfaces become a chaotic mess of text. `Block` (often called a Box) provides the structure and visual hierarchy needed to organize information.
@@ -40,6 +42,4 @@ Use this example if you need to...
 - Group related widgets together.
 - Create distinct "panels" or "cards" in your UI.
 - Style borders to indicate state (e.g., Red border for error state).
-- Understand the difference between `style` (content) and `border_style` (frame).
-
-![Demo](/doc/images/widget_box_demo.png)
+- Understand the difference between `style` (content) and `border_style` (frame).

data/examples/widget_calendar_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Calendar Widget Example
 
+[![widget_calendar_demo](../../doc/images/widget_calendar_demo.png)](app.rb)
+
 Demonstrates a monthly calendar with customizable headers and event highlighting.
 
 Rendering dates in a grid involves complex calculations for leap years and weekday offsets. This widget handles that logic, letting you focus on displaying dates.
@@ -34,6 +36,4 @@ ruby examples/widget_calendar_demo/app.rb
 Use this example if you need to...
 - Display a date picker.
 - Show a schedule or timeline view.
-- Highlight specific dates (deadlines, holidays) on a calendar grid.
-
-![Demo](/doc/images/widget_calendar_demo.png)
+- Highlight specific dates (deadlines, holidays) on a calendar grid.

data/examples/widget_calendar_demo/app.rb

@@ -23,6 +23,10 @@ require "ratatui_ruby"
 #
 # rdoc-image:/doc/images/widget_calendar_demo.png
 class WidgetCalendarDemo
+  def initialize(date: nil)
+    @date = date
+  end
+
   def run
     RatatuiRuby.run do |tui|
       show_header = true
@@ -32,7 +36,7 @@ class WidgetCalendarDemo
       hotkey_style = tui.style(modifiers: [:bold])
 
       loop do
-        now = Time.now
+        now = @date || Time.now
         surrounding_style = show_surrounding ? tui.style(fg: "gray", modifiers: [:dim]) : nil
 
         events_map = if show_events

data/examples/widget_canvas_demo/README.md

@@ -1,4 +1,7 @@
 # Canvas Widget Demo
+
+[![widget_canvas_demo](../../doc/images/widget_canvas_demo.png)](app.rb)
+
 <!--
 SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
 SPDX-License-Identifier: CC-BY-SA-4.0
@@ -19,9 +22,6 @@ This example demonstrates the `Canvas` widget, which provides a high-resolution
 | `q` | Quit |
 
 ## Screenshot
-
-![Screenshot of Canvas Widget Demo](../../doc/images/widget_canvas_demo.png)
-
 ## Source Code
 
 - [app.rb](app.rb)

data/examples/widget_cell_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Cell Widget Example
 
+[![widget_cell_demo](../../doc/images/widget_cell_demo.png)](app.rb)
+
 Demonstrates using `Cell` objects for granular control over individual character grid units.
 
 Sometimes you need to render specific characters with unique styles outside of standard widgets. The `Cell` primitive allows you to build custom widgets or inject styled content into Tables.
@@ -31,6 +33,4 @@ ruby examples/widget_cell_demo/app.rb
 Use this example if you need to...
 - Create a custom widget (like a game board or specialized graph).
 - Style specific cells in a Table (e.g., Green "OK", Red "FAIL").
-- Understand how to position content precisely with `Cell`.
-
-![Demo](/doc/images/widget_cell_demo.png)
+- Understand how to position content precisely with `Cell`.

data/examples/widget_center_demo/README.md

@@ -1,4 +1,7 @@
 # Center Widget Demo
+
+[![widget_center_demo](../../doc/images/widget_center_demo.png)](app.rb)
+
 <!--
 SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
 SPDX-License-Identifier: CC-BY-SA-4.0
@@ -21,9 +24,6 @@ This example demonstrates the `Center` widget, which positions a child widget in
 | `q` | Quit |
 
 ## Screenshot
-
-![Screenshot of Center Widget Demo](../../doc/images/widget_center_demo.png)
-
 ## Source Code
 
 - [app.rb](app.rb)

data/examples/widget_chart_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Chart Widget Example
 
+[![widget_chart_demo](../../doc/images/widget_chart_demo.png)](app.rb)
+
 Demonstrates Cartesian plotting with interactive styling and configuration.
 
 Trends and patterns are invisible in raw logs. Charts visualize X/Y datasets to reveal the story behind the data.
@@ -36,6 +38,4 @@ ruby examples/widget_chart_demo/app.rb
 Use this example if you need to...
 - Plot real-time data monitoring (CPU history, request latency).
 - Visualize mathematical functions.
-- Compare multiple datasets on the same axis.
-
-![Demo](/doc/images/widget_chart_demo.png)
+- Compare multiple datasets on the same axis.

data/examples/widget_gauge_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Gauge Widget Example
 
+[![widget_gauge_demo](../../doc/images/widget_gauge_demo.png)](app.rb)
+
 Demonstrates progress bars with interactive configuration.
 
 Long-running tasks create anxiety. Users need to know the system is working. Gauges provide visual feedback on completion status.
@@ -36,6 +38,4 @@ ruby examples/widget_gauge_demo/app.rb
 Use this example if you need to...
 - Show download or upload progress.
 - Visualize resource quotas (disk space, memory usage).
-- Create "health bars" or status indicators.
-
-![Demo](/doc/images/widget_gauge_demo.png)
+- Create "health bars" or status indicators.

data/examples/widget_layout_split/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Layout Split Example
 
+[![widget_layout_split](../../doc/images/widget_layout_split.png)](app.rb)
+
 Demonstrates dynamic geometry management with constraints and flex modes.
 
 Terminal screens vary in size. Hardcoded layouts break. `Layout.split` manages space dynamically, ensuring your interface adapts to any window dimension.
@@ -39,6 +41,4 @@ Use this example if you need to...
 - Build responsive dashboards.
 - Create 3-column layouts where the middle content fills remaining space.
 - Center a modal dialog on the screen.
-- Distribute buttons evenly across a control bar.
-
-![Demo](/doc/images/widget_layout_split.png)
+- Distribute buttons evenly across a control bar.

data/examples/widget_line_gauge_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Line Gauge Widget Example
 
+[![widget_line_gauge_demo](../../doc/images/widget_line_gauge_demo.png)](app.rb)
+
 Demonstrates compact progress bars for constrained spaces.
 
 Standard block gauges take up vertical space. Sometimes you only have one line to show status. The `LineGauge` provides a compact, high-density progress indicator.
@@ -36,6 +38,4 @@ ruby examples/widget_line_gauge_demo/app.rb
 Use this example if you need to...
 - Add a progress bar to a list item or table row.
 - Create a status line at the bottom of the screen.
-- Show multiple metrics (CPU, RAM, Net) in a compact list.
-
-![Demo](/doc/images/widget_line_gauge_demo.png)
+- Show multiple metrics (CPU, RAM, Net) in a compact list.

data/examples/widget_list_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # List Widget Example
 
+[![widget_list_demo](../../doc/images/widget_list_demo.png)](app.rb)
+
 Demonstrates a selectable list with extensive configuration options.
 
 Lists are the workhorse of terminal interfaces. Managing selection state, scrolling windows, and highlight styles logic is complex. The `List` widget handles all of this.
@@ -44,6 +46,4 @@ Use this example if you need to...
 - Create a file explorer.
 - Build a navigation menu.
 - Display a log where users can scroll back to read history.
-- Implement "infinite select" behaviors.
-
-![Demo](/doc/images/widget_list_demo.png)
+- Implement "infinite select" behaviors.

data/examples/widget_map_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Canvas Widget Example
 
+[![widget_map_demo](../../doc/images/widget_map_demo.png)](app.rb)
+
 Demonstrates drawing custom graphics and maps using the standard Braille and Block patterns.
 
 Standard widgets are great for text, but sometimes you need to draw. The `Canvas` widget gives you a high-resolution coordinate system (x, y) to render shapes, lines, and data visualizations that go beyond the grid.
@@ -34,6 +36,4 @@ ruby examples/widget_map_demo/app.rb
 Use this example if you need to...
 - Render geographic data (World, USA, Europe).
 - Overlay custom labels and markers on a map.
-- Animate visual elements on top of a static background.
-
-![Demo](/doc/images/widget_map_demo.png)
+- Animate visual elements on top of a static background.

data/examples/widget_map_demo/app.rb

@@ -8,14 +8,14 @@ require "ratatui_ruby"
 
 # An example of the Canvas widget showing a world map and animated shapes.
 class WidgetMapDemo
-  include RatatuiRuby
+  include RatatuiRuby::Widgets
 
   COLORS = [:black, :blue, :white, nil].freeze
   MARKERS = [:braille, :half_block, :dot, :block, :bar, :quadrant, :sextant, :octant].freeze
 
   # Returns a Canvas view for the map demo with the given circle radius.
   #
-  # +tui+:: The RatatuiRuby::Session instance.
+  # +tui+:: The RatatuiRuby::TUI instance.
   # +radius+:: The radius of the animated circle.
   # +marker+:: The marker type.
   # +background_color+:: The background color of the canvas.

data/examples/widget_overlay_demo/README.md

@@ -0,0 +1,36 @@
+<!--
+  SPDX-FileCopyrightText: 2025 Kerrick Long <me@kerricklong.com>
+  SPDX-License-Identifier: CC-BY-SA-4.0
+-->
+# Overlay Widget Demo
+
+[![Overlay Demo](../../doc/images/widget_overlay_demo.png)](app.rb)
+
+This example demonstrates the `Overlay` composition pattern for layering widgets with depth. Modals, notifications, and floating panels all require stacking widgets on top of each other.
+
+## Key Concepts
+
+- **Layer Composition:** Rendering widgets in order creates visual depth — later renders appear "on top."
+- **Clear Widget:** Using `tui.clear` before rendering a modal erases the background, preventing content bleed-through.
+- **Dynamic Layer Control:** Toggle the number of visible overlay layers at runtime.
+- **Layer Ordering:** Swap which overlay appears in front to demonstrate z-ordering.
+
+## Hotkeys
+
+- `0`/`1`/`2`: Set number of visible overlay layers
+- `space`: Swap overlay order (which modal is on top)
+- `c`: Toggle Clear widget (on/off)
+- `q`: Quit
+
+## Usage
+
+```bash
+ruby examples/widget_overlay_demo/app.rb
+```
+
+## Learning Outcomes
+
+Use this example if you need to...
+- Build modal dialogs or confirmation popups.
+- Layer notifications over existing content.
+- Understand the Clear widget's role in opaque overlays.

data/examples/widget_popup_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Popup (Clear) Widget Example
 
+[![widget_popup_demo](../../doc/images/widget_popup_demo.png)](app.rb)
+
 Demonstrates how to render opaque overlays on top of content.
 
 Terminal renders are additive. If you draw a new widget over an old one, the background colors might mix if not handled correctly. The `Clear` widget resets the area to default (usually transparent/black) to ensure a clean canvas for popups.
@@ -31,6 +33,4 @@ ruby examples/widget_popup_demo/app.rb
 Use this example if you need to...
 - Create a modal dialog (Confirm, Alert, Form).
 - Implement a dropdown menu that overlays other content.
-- Fix visual artifacts where old text shows through new widgets.
-
-![Demo](/doc/images/widget_popup_demo.png)
+- Fix visual artifacts where old text shows through new widgets.

data/examples/widget_ratatui_logo_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Ratatui Logo Example
 
+[![widget_ratatui_logo_demo](../../doc/images/widget_ratatui_logo_demo.png)](app.rb)
+
 Demonstrates branding with the official logo widget.
 
 A polished application often needs an "About" screen or a splash screen. This widget provides the standardized project branding.
@@ -29,6 +31,4 @@ ruby examples/widget_ratatui_logo_demo/app.rb
 Use this example if you need to...
 - Create a splash screen.
 - Add an "About" modal to your application.
-- See how to center a widget both vertically and horizontally.
-
-![Demo](/doc/images/widget_ratatui_logo_demo.png)
+- See how to center a widget both vertically and horizontally.

data/examples/widget_ratatui_logo_demo/app.rb

@@ -66,7 +66,7 @@ class WidgetRatatuiLogoDemo
       )
 
       # Main content: The Logo
-      logo = RatatuiRuby::RatatuiLogo.new
+      logo = RatatuiRuby::Widgets::RatatuiLogo.new
       frame.render_widget(logo, h_center_layout[0])
 
       # Control Panel

data/examples/widget_ratatui_mascot_demo/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Ratatui Mascot Example
 
+[![widget_ratatui_mascot_demo](../../doc/images/widget_ratatui_mascot_demo.png)](app.rb)
+
 Demonstrates the project mascot widget for adding personality.
 
 Interfaces can feel clinical. A friendly mascot adds charm and brand identity to your terminal application.
@@ -29,6 +31,4 @@ ruby examples/widget_ratatui_mascot_demo/app.rb
 
 Use this example if you need to...
 - Add visual flair to your UI.
-- Create a friendly empty state or success screen.
-
-![Demo](/doc/images/widget_ratatui_mascot_demo.png)
+- Create a friendly empty state or success screen.

data/examples/widget_rect/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Rect (Geometry) Widget Example
 
+[![widget_rect](../../doc/images/widget_rect.png)](app.rb)
+
 Demonstrates the Rect geometry primitive and hit-testing patterns.
 
 TUI layouts are composed of rectangles. Understanding how to manipulate `Rect` objects, reuse them from the layout phase, and use them for mouse interaction is critical for building interactive apps.
@@ -33,6 +35,4 @@ ruby examples/widget_rect/app.rb
 Use this example if you need to...
 - Handle mouse clicks on specific buttons or areas.
 - Create resizable panes (like a split pane in an IDE).
-- Debug layout issues by inspecting Rect coordinates.
-
-![Demo](/doc/images/widget_rect.png)
+- Debug layout issues by inspecting Rect coordinates.

data/examples/widget_render/README.md

@@ -5,6 +5,8 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 
 # Render (Custom Widget) Example
 
+[![widget_render](../../doc/images/widget_render.png)](app.rb)
+
 Demonstrates how to build Custom Widgets using absolute coordinates.
 
 Sometimes standard widgets aren't enough. You need to draw custom shapes, games, or graphs. This example shows how to implement the `render(area)` contract to draw anything you want while respecting layout boundaries.
@@ -32,6 +34,4 @@ ruby examples/widget_render/app.rb
 Use this example if you need to...
 - Build a game (Snake, Tetris) inside the terminal.
 - Create a specialized visualization (Network topology graph).
-- Draw custom UI elements not provided by the library.
-
-![Demo](/doc/images/widget_render.png)
+- Draw custom UI elements not provided by the library.

data/examples/widget_render/app.rb

@@ -21,7 +21,7 @@ class DiagonalWidget
         area.x + i,
         area.y + i,
         "\\",
-        RatatuiRuby::Style.new(fg: :red, modifiers: [:bold])
+        RatatuiRuby::Style::Style.new(fg: :red, modifiers: [:bold])
       )
     end
   end
@@ -47,7 +47,7 @@ class CheckerboardWidget
           area.x + col,
           area.y + row,
           @char,
-          RatatuiRuby::Style.new(fg: :cyan)
+          RatatuiRuby::Style::Style.new(fg: :cyan)
         )
       end
     end
@@ -63,7 +63,7 @@ end
 class BorderWidget
   def render(area)
     result = []
-    style = RatatuiRuby::Style.new(fg: :green)
+    style = RatatuiRuby::Style::Style.new(fg: :green)
 
     # Top and bottom
     (0...area.width).each do |x| # rubocop:disable Lint/AmbiguousRange