refactor(span): rename to_aligned_line into into_aligned_line (#993)

With the Rust method naming conventions these methods are into methods
consuming the Span. Therefore, it's more consistent to use `into_`
instead of `to_`.

```rust
Span::to_centered_line
Span::to_left_aligned_line
Span::to_right_aligned_line
```

Are marked deprecated and replaced with the following

```rust
Span::into_centered_line
Span::into_left_aligned_line
Span::into_right_aligned_line
```

.editorconfig

@@ -2,6 +2,12 @@
 
 root = true
 
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
 [*.rs]
 indent_style = space
 indent_size = 4

.github/CODEOWNERS

@@ -5,4 +5,4 @@
 # https://git-scm.com/docs/gitignore#_pattern_format
 
 # Maintainers
-* @orhun @mindoodoo @sayanarijit @joshka @kdheepak @Valentin271
+* @orhun @mindoodoo @sayanarijit @joshka @kdheepak @Valentin271 @EdJoPaTo

.github/workflows/cd.yml

@@ -37,7 +37,7 @@ jobs:
           args: --allow-dirty --token ${{ secrets.CARGO_TOKEN }}
 
       - name: Generate a changelog
-        uses: orhun/git-cliff-action@v2
+        uses: orhun/git-cliff-action@v3
         with:
           config: cliff.toml
           args: --unreleased --tag ${{ env.NEXT_TAG }} --strip header

.github/workflows/check-pr.yml

@@ -44,24 +44,6 @@ jobs:
           header: pr-title-lint-error
           delete: true
 
-  check-signed:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-    steps:
-      # Check commit signature and add comment if needed
-      - name: Check signed commits in PR
-        uses: 1Password/check-signed-commits-action@v1
-        with:
-          comment: |
-            Thank you for opening this pull request!
-
-            We require commits to be signed and it looks like this PR contains unsigned commits.
-
-            Get help in the [CONTRIBUTING.md](https://github.com/ratatui-org/ratatui/blob/main/CONTRIBUTING.md#sign-your-commits)
-            or on [Github doc](https://docs.github.com/en/authentication/managing-commit-signature-verification/signing-commits).
-
   check-breaking-change-label:
     runs-on: ubuntu-latest
     env:
@@ -102,4 +84,3 @@ jobs:
           echo "Pull request is labeled as 'do not merge'"
           echo "This workflow fails so that the pull request cannot be merged"
           exit 1
-

.github/workflows/ci.yml

@@ -29,28 +29,19 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        if: github.event_name != 'pull_request'
         uses: actions/checkout@v4
-      - name: Checkout
-        if: github.event_name == 'pull_request'
-        uses: actions/checkout@v4
-        with:
-          ref: ${{ github.event.pull_request.head.sha }}
       - name: Install Rust nightly
         uses: dtolnay/rust-toolchain@nightly
         with:
           components: rustfmt
       - name: Install cargo-make
         uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
       - name: Check formatting
         run: cargo make lint-format
       - name: Check documentation
         run: cargo make lint-docs
-      - name: Check conventional commits
-        uses: crate-ci/committed@master
-        with:
-          args: "-vv"
-          commits: HEAD
       - name: Check typos
         uses: crate-ci/typos@master
       - name: Lint dependencies
@@ -67,6 +58,8 @@ jobs:
           components: clippy
       - name: Install cargo-make
         uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
       - name: Run cargo make clippy-all
         run: cargo make clippy
 
@@ -83,10 +76,12 @@ jobs:
         uses: taiki-e/install-action@v2
         with:
           tool: cargo-llvm-cov,cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
       - name: Generate coverage
         run: cargo make coverage
       - name: Upload to codecov.io
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
           fail_ci_if_error: true
@@ -95,8 +90,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
-        toolchain: [ "1.70.0", "stable" ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        toolchain: ["1.74.0", "stable"]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout
@@ -107,6 +102,8 @@ jobs:
           toolchain: ${{ matrix.toolchain }}
       - name: Install cargo-make
         uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
       - name: Run cargo make check
         run: cargo make check
         env:
@@ -116,7 +113,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
     runs-on: ${{ matrix.os }}
     steps:
       - name: Checkout
@@ -125,6 +122,8 @@ jobs:
         uses: dtolnay/rust-toolchain@stable
       - name: Install cargo-make
         uses: taiki-e/install-action@cargo-make
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
       - name: Test docs
         run: cargo make test-doc
         env:
@@ -134,9 +133,9 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        os: [ ubuntu-latest, windows-latest, macos-latest ]
-        toolchain: [ "1.70.0", "stable" ]
-        backend: [ crossterm, termion, termwiz ]
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        toolchain: ["1.74.0", "stable"]
+        backend: [crossterm, termion, termwiz]
         exclude:
           # termion is not supported on windows
           - os: windows-latest
@@ -153,6 +152,8 @@ jobs:
         uses: taiki-e/install-action@cargo-make
       - name: Install cargo-nextest
         uses: taiki-e/install-action@nextest
+      - name: Cache Cargo dependencies
+        uses: Swatinem/rust-cache@v2
       - name: Test ${{ matrix.backend }}
         run: cargo make test-backend ${{ matrix.backend }}
         env:

BREAKING-CHANGES.md

@@ -10,7 +10,8 @@ github with a [breaking change] label.
 
 This is a quick summary of the sections below:
 
-- [v0.26.0 (unreleased)](#v0260-unreleased)
+- [v0.26.0](#v0260)
+  - `Flex::Start` is the new default flex mode for `Layout`
   - `patch_style` & `reset_style` now consume and return `Self`
   - Removed deprecated `Block::title_on_bottom`
   - `Line` now has an extra `style` field which applies the style to the entire line
@@ -46,7 +47,28 @@ This is a quick summary of the sections below:
   - MSRV is now 1.63.0
   - `List` no longer ignores empty strings
 
-## v0.26.0 (unreleased)
+## [v0.26.0](https://github.com/ratatui-org/ratatui/releases/tag/v0.26.0)
+
+### `Flex::Start` is the new default flex mode for `Layout`
+
+[#881]: https://github.com/ratatui-org/ratatui/pull/881
+
+Previously, constraints would stretch to fill all available space, violating constraints if
+necessary.
+
+With v0.26.0, `Flex` modes are introduced and the default is `Flex::Start`, which will align
+areas associated with constraints to be beginning of the area. With v0.26.0, additionally,
+`Min` constraints grow to fill excess space. These changes will allow users to build layouts
+more easily.
+
+With v0.26.0, users will most likely not need to change what constraints they use to create
+existing layouts with `Flex::Start`. However, to get old behavior, use `Flex::Legacy`.
+
+```diff
+- let rects = Layout::horizontal([Length(1), Length(2)]).split(area);
+// becomes
++ let rects = Layout::horizontal([Length(1), Length(2)]).flex(Flex::Legacy).split(area);
+```
 
 ### `Table::new()` now accepts `IntoIterator<Item: Into<Row<'a>>>` ([#774])
 
@@ -132,7 +154,7 @@ longer can be called from a constant context.
 [#708]: https://github.com/ratatui-org/ratatui/pull/708
 
 Previously the style of a `Line` was stored in the `Span`s that make up the line. Now the `Line`
-itself has a `style` field, which can be set with the `Line::style` method. Any code that creates
+itself has a `style` field, which can be set with the `Line::styled` method. Any code that creates
 `Line`s using the struct initializer instead of constructors will fail to compile due to the added
 field. This can be easily fixed by adding `..Default::default()` to the field list or by using a
 constructor method (`Line::styled()`, `Line::raw()`) or conversion method (`Line::from()`).

CONTRIBUTING.md

@@ -54,14 +54,6 @@ describes the nature of the problem that the commit is solving and any unintuiti
 change. It's rare that code changes can easily communicate intent, so make sure this is clearly
 documented.
 
-### Clean up your commits
-
-The final version of your PR that will be committed to the repository should be rebased and tested
-against main. Every commit will end up as a line in the changelog, so please squash commits that are
-only formatting or incremental fixes to things brought up as part of the PR review. Aim for a single
-commit (unless there is a strong reason to stack the commits). See [Git Best Practices - On Sausage
-Making](https://sethrobertson.github.io/GitBestPractices/#sausage) for more on this.
-
 ### Run CI tests before pushing a PR
 
 We're using [cargo-husky](https://github.com/rhysd/cargo-husky) to automatically run git hooks,
@@ -120,7 +112,8 @@ exist to show coverage directly in your editor. E.g.:
 
 ### Documentation
 
-Here are some guidelines for writing documentation in Ratatui.  
+Here are some guidelines for writing documentation in Ratatui.
+
 Every public API **must** be documented.
 
 Keep in mind that Ratatui tends to attract beginner Rust users that may not be familiar with Rust
@@ -133,10 +126,9 @@ the concepts pointing to the various methods. Focus on interaction with various
 enough information that helps understand why you might want something.
 
 Examples should help users understand a particular usage, not test a feature. They should be as
-simple as possible.  
-Prefer hiding imports and using wildcards to keep things concise. Some imports may still be shown
-to demonstrate a particular non-obvious import (e.g. `Stylize` trait to use style methods).  
-Speaking of `Stylize`, you should use it over the more verbose style setters:
+simple as possible. Prefer hiding imports and using wildcards to keep things concise. Some imports
+may still be shown to demonstrate a particular non-obvious import (e.g. `Stylize` trait to use style
+methods). Speaking of `Stylize`, you should use it over the more verbose style setters:
 
 ```rust
 let style = Style::new().red().bold();
@@ -146,7 +138,7 @@ let style = Style::default().fg(Color::Red).add_modifier(Modifiers::BOLD);
 
 #### Format
 
-- First line is summary, second is blank, third onward is more detail  
+- First line is summary, second is blank, third onward is more detail
 
 ```rust
 /// Summary
@@ -156,10 +148,10 @@ let style = Style::default().fg(Color::Red).add_modifier(Modifiers::BOLD);
 fn foo() {}
 ```
 
-- Max line length is 100 characters  
+- Max line length is 100 characters
 See [vscode rewrap extension](https://marketplace.visualstudio.com/items?itemName=stkb.rewrap)
 
-- Doc comments are above macros  
+- Doc comments are above macros
 i.e.
 
 ```rust
@@ -168,7 +160,7 @@ i.e.
 struct Foo {}
 ```
 
-- Code items should be between backticks  
+- Code items should be between backticks
 i.e. ``[`Block`]``, **NOT** ``[Block]``
 
 ### Deprecation notice

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "ratatui"
-version = "0.25.0" # crate version
+version = "0.26.1" # crate version
 authors = ["Florian Dehau <work@fdehau.com>", "The Ratatui Developers"]
 description = "A library that's all about cooking up terminal user interfaces"
 documentation = "https://docs.rs/ratatui/latest/ratatui/"
@@ -18,14 +18,14 @@ exclude = [
 ]
 autoexamples = true
 edition = "2021"
-rust-version = "1.70.0"
+rust-version = "1.74.0"
 
 [badges]
 
 [dependencies]
 crossterm = { version = "0.27", optional = true }
 termion = { version = "3.0", optional = true }
-termwiz = { version = "0.20.0", optional = true }
+termwiz = { version = "0.22.0", optional = true }
 
 serde = { version = "1", optional = true, features = ["derive"] }
 bitflags = "2.3"
@@ -33,7 +33,7 @@ cassowary = "0.3"
 indoc = "2.0"
 itertools = "0.12"
 paste = "1.0.2"
-strum = { version = "0.25", features = ["derive"] }
+strum = { version = "0.26", features = ["derive"] }
 time = { version = "0.3.11", optional = true, features = ["local-offset"] }
 unicode-segmentation = "1.10"
 unicode-width = "0.1"
@@ -51,7 +51,7 @@ cargo-husky = { version = "1.5.0", default-features = false, features = [
 ] }
 color-eyre = "0.6.2"
 criterion = { version = "0.5.1", features = ["html_reports"] }
-derive_builder = "0.12.0"
+derive_builder = "0.20.0"
 fakeit = "1.1"
 font8x8 = "0.3.1"
 palette = "0.7.3"
@@ -61,6 +61,39 @@ rand_chacha = "0.3.1"
 rstest = "0.18.2"
 serde_json = "1.0.109"
 
+[lints.rust]
+unsafe_code = "forbid"
+[lints.clippy]
+pedantic = { level = "warn", priority = -1 }
+cast_possible_truncation = "allow"
+cast_possible_wrap = "allow"
+cast_precision_loss = "allow"
+cast_sign_loss = "allow"
+missing_errors_doc = "allow"
+missing_panics_doc = "allow"
+module_name_repetitions = "allow"
+must_use_candidate = "allow"
+wildcard_imports = "allow"
+
+# nursery or restricted
+as_underscore = "warn"
+deref_by_slicing = "warn"
+else_if_without_else = "warn"
+empty_line_after_doc_comments = "warn"
+equatable_if_let = "warn"
+fn_to_numeric_cast_any = "warn"
+format_push_string = "warn"
+map_err_ignore = "warn"
+missing_const_for_fn = "warn"
+mixed_read_write_in_expression = "warn"
+mod_module_files = "warn"
+needless_raw_strings = "warn"
+redundant_type_annotations = "warn"
+rest_pat_in_fully_bound_structs = "warn"
+string_lit_chars_any = "warn"
+string_to_string = "warn"
+use_self = "warn"
+
 [features]
 #! The crate provides a set of optional features that can be enabled in your `cargo.toml` file.
 #!
@@ -100,11 +133,7 @@ underline-color = ["dep:crossterm"]
 #! The following features are unstable and may change in the future:
 
 ## Enable all unstable features.
-unstable = ["unstable-segment-size", "unstable-rendered-line-info"]
-
-## Enables the [`Layout::segment_size`](crate::layout::Layout::segment_size) method which is experimental and may change in the
-## future. See [Issue #536](https://github.com/ratatui-org/ratatui/issues/536) for more details.
-unstable-segment-size = []
+unstable = ["unstable-rendered-line-info", "unstable-widget-ref"]
 
 ## Enables the [`Paragraph::line_count`](crate::widgets::Paragraph::line_count)
 ## [`Paragraph::line_width`](crate::widgets::Paragraph::line_width) methods
@@ -112,6 +141,10 @@ unstable-segment-size = []
 ## See [Issue 293](https://github.com/ratatui-org/ratatui/issues/293) for more details.
 unstable-rendered-line-info = []
 
+## Enables the `WidgetRef` and `StatefulWidgetRef` traits which are experimental and may change in
+## the future.
+unstable-widget-ref = []
+
 [package.metadata.docs.rs]
 all-features = true
 # see https://doc.rust-lang.org/nightly/rustdoc/scraped-examples.html
@@ -223,6 +256,11 @@ name = "flex"
 required-features = ["crossterm"]
 doc-scrape-examples = true
 
+[[example]]
+name = "constraint-explorer"
+required-features = ["crossterm"]
+doc-scrape-examples = true
+
 [[example]]
 name = "list"
 required-features = ["crossterm"]

LICENSE

@@ -1,7 +1,7 @@
 The MIT License (MIT)
 
 Copyright (c) 2016-2022 Florian Dehau
-Copyright (c) 2023 The Ratatui Developers
+Copyright (c) 2023-2024 The Ratatui Developers
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -26,7 +26,7 @@
 <div align="center">
 
 [![Crate Badge]][Crate] [![Docs Badge]][API Docs] [![CI Badge]][CI Workflow] [![License
-Badge]](./LICENSE)<br>
+Badge]](./LICENSE) [![Sponsors Badge]][GitHub Sponsors]<br>
 [![Codecov Badge]][Codecov] [![Deps.rs Badge]][Deps.rs] [![Discord Badge]][Discord Server]
 [![Matrix Badge]][Matrix]<br>
 
@@ -61,6 +61,9 @@ This is in contrast to the retained mode style of rendering where widgets are up
 automatically redrawn on the next frame. See the [Rendering] section of the [Ratatui Website]
 for more info.
 
+You can also watch the [FOSDEM 2024 talk] about Ratatui which gives a brief introduction to
+terminal user interfaces and showcases the features of Ratatui, along with a hello world demo.
+
 ## Other documentation
 
 - [Ratatui Website] - explains the library's concepts and provides step-by-step tutorials
@@ -301,6 +304,7 @@ Running this example produces the following output:
 [Changelog]: https://github.com/ratatui-org/ratatui/blob/main/CHANGELOG.md
 [Contributing]: https://github.com/ratatui-org/ratatui/blob/main/CONTRIBUTING.md
 [Breaking Changes]: https://github.com/ratatui-org/ratatui/blob/main/BREAKING-CHANGES.md
+[FOSDEM 2024 talk]: https://www.youtube.com/watch?v=NU0q6NOLJ20
 [docsrs-hello]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-hello.png?raw=true
 [docsrs-layout]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-layout.png?raw=true
 [docsrs-styling]: https://github.com/ratatui-org/ratatui/blob/c3c3c289b1eb8d562afb1931adb4dc719cd48490/examples/docsrs-styling.png?raw=true
@@ -322,6 +326,7 @@ Running this example produces the following output:
 [Termion]: https://crates.io/crates/termion
 [Termwiz]: https://crates.io/crates/termwiz
 [tui-rs]: https://crates.io/crates/tui
+[GitHub Sponsors]: https://github.com/sponsors/ratatui-org
 [Crate Badge]: https://img.shields.io/crates/v/ratatui?logo=rust&style=flat-square
 [License Badge]: https://img.shields.io/crates/l/ratatui?style=flat-square
 [CI Badge]:
@@ -339,6 +344,7 @@ Running this example produces the following output:
 [Matrix Badge]:
     https://img.shields.io/matrix/ratatui-general%3Amatrix.org?style=flat-square&logo=matrix&label=Matrix
 [Matrix]: https://matrix.to/#/#ratatui:matrix.org
+[Sponsors Badge]: https://img.shields.io/github/sponsors/ratatui-org?logo=github&style=flat-square
 
 <!-- cargo-rdme end -->
 

bacon.toml

@@ -44,6 +44,16 @@ command = [
 ]
 need_stdout = true
 
+[jobs.test-unit]
+command = [
+    "cargo", "test",
+    "--lib",
+    "--all-features",
+    "--color", "always",
+    "--", "--color", "always", # see https://github.com/Canop/bacon/issues/124
+]
+need_stdout = true
+
 [jobs.doc]
 command = [
     "cargo", "+nightly", "doc",
@@ -74,7 +84,7 @@ on_success = "job:doc" # so that we don't open the browser at each change
 command = [
     "cargo", "llvm-cov",
     "--lcov", "--output-path", "target/lcov.info",
-    "--all-features", 
+    "--all-features",
     "--color", "always",
 ]
 
@@ -97,4 +107,6 @@ ctrl-c = "job:check-crossterm"
 ctrl-t = "job:check-termion"
 ctrl-w = "job:check-termwiz"
 v = "job:coverage"
-u = "job:coverage-unit-tests-only"
+ctrl-v = "job:coverage-unit-tests-only"
+u = "job:test-unit"
+n = "job:nextest"

benches/barchart.rs

@@ -8,7 +8,7 @@ use ratatui::{
 };
 
 /// Benchmark for rendering a barchart.
-pub fn barchart(c: &mut Criterion) {
+fn barchart(c: &mut Criterion) {
     let mut group = c.benchmark_group("barchart");
     let mut rng = rand::thread_rng();
 
@@ -66,7 +66,7 @@ fn render(bencher: &mut Bencher, barchart: &BarChart) {
             bench_barchart.render(buffer.area, &mut buffer);
         },
         criterion::BatchSize::LargeInput,
-    )
+    );
 }
 
 criterion_group!(benches, barchart);

benches/block.rs

@@ -10,10 +10,10 @@ use ratatui::{
 };
 
 /// Benchmark for rendering a block.
-pub fn block(c: &mut Criterion) {
+fn block(c: &mut Criterion) {
     let mut group = c.benchmark_group("block");
 
-    for buffer_size in &[
+    for buffer_size in [
         Rect::new(0, 0, 100, 50),  // vertically split screen
         Rect::new(0, 0, 200, 50),  // 1080p fullscreen with medium font
         Rect::new(0, 0, 256, 256), // Max sized area
@@ -47,8 +47,8 @@ pub fn block(c: &mut Criterion) {
 }
 
 /// render the block into a buffer of the given `size`
-fn render(bencher: &mut Bencher, block: &Block, size: &Rect) {
-    let mut buffer = Buffer::empty(*size);
+fn render(bencher: &mut Bencher, block: &Block, size: Rect) {
+    let mut buffer = Buffer::empty(size);
     // We use `iter_batched` to clone the value in the setup function.
     // See https://github.com/ratatui-org/ratatui/pull/377.
     bencher.iter_batched(
@@ -57,7 +57,7 @@ fn render(bencher: &mut Bencher, block: &Block, size: &Rect) {
             bench_block.render(buffer.area, &mut buffer);
         },
         BatchSize::SmallInput,
-    )
+    );
 }
 
 criterion_group!(benches, block);

benches/list.rs

@@ -7,7 +7,7 @@ use ratatui::{
 
 /// Benchmark for rendering a list.
 /// It only benchmarks the render with a different amount of items.
-pub fn list(c: &mut Criterion) {
+fn list(c: &mut Criterion) {
     let mut group = c.benchmark_group("list");
 
     for line_count in [64, 2048, 16384] {
@@ -33,7 +33,7 @@ pub fn list(c: &mut Criterion) {
                     ListState::default()
                         .with_offset(line_count / 2)
                         .with_selected(Some(line_count / 2)),
-                )
+                );
             },
         );
     }
@@ -52,7 +52,7 @@ fn render(bencher: &mut Bencher, list: &List) {
             Widget::render(bench_list, buffer.area, &mut buffer);
         },
         BatchSize::LargeInput,
-    )
+    );
 }
 
 /// render the list into a common size buffer with a state
@@ -66,7 +66,7 @@ fn render_stateful(bencher: &mut Bencher, list: &List, mut state: ListState) {
             StatefulWidget::render(bench_list, buffer.area, &mut buffer, &mut state);
         },
         BatchSize::LargeInput,
-    )
+    );
 }
 
 criterion_group!(benches, list);

benches/paragraph.rs

@@ -17,15 +17,15 @@ const WRAP_WIDTH: u16 = 100;
 /// Benchmark for rendering a paragraph with a given number of lines. The design of this benchmark
 /// allows comparison of the performance of rendering a paragraph with different numbers of lines.
 /// as well as comparing with the various settings on the scroll and wrap features.
-pub fn paragraph(c: &mut Criterion) {
+fn paragraph(c: &mut Criterion) {
     let mut group = c.benchmark_group("paragraph");
-    for &line_count in [64, 2048, MAX_SCROLL_OFFSET].iter() {
+    for line_count in [64, 2048, MAX_SCROLL_OFFSET] {
         let lines = random_lines(line_count);
         let lines = lines.as_str();
 
         // benchmark that measures the overhead of creating a paragraph separately from rendering
         group.bench_with_input(BenchmarkId::new("new", line_count), lines, |b, lines| {
-            b.iter(|| Paragraph::new(black_box(lines)))
+            b.iter(|| Paragraph::new(black_box(lines)));
         });
 
         // render the paragraph with no scroll
@@ -38,14 +38,14 @@ pub fn paragraph(c: &mut Criterion) {
         // scroll the paragraph by half the number of lines and render
         group.bench_with_input(
             BenchmarkId::new("render_scroll_half", line_count),
-            &Paragraph::new(lines).scroll((0u16, line_count / 2)),
+            &Paragraph::new(lines).scroll((0, line_count / 2)),
             |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
         );
 
         // scroll the paragraph by the full number of lines and render
         group.bench_with_input(
             BenchmarkId::new("render_scroll_full", line_count),
-            &Paragraph::new(lines).scroll((0u16, line_count)),
+            &Paragraph::new(lines).scroll((0, line_count)),
             |bencher, paragraph| render(bencher, paragraph, NO_WRAP_WIDTH),
         );
 
@@ -61,7 +61,7 @@ pub fn paragraph(c: &mut Criterion) {
             BenchmarkId::new("render_wrap_scroll_full", line_count),
             &Paragraph::new(lines)
                 .wrap(Wrap { trim: false })
-                .scroll((0u16, line_count)),
+                .scroll((0, line_count)),
             |bencher, paragraph| render(bencher, paragraph, WRAP_WIDTH),
         );
     }
@@ -79,7 +79,7 @@ fn render(bencher: &mut Bencher, paragraph: &Paragraph, width: u16) {
             bench_paragraph.render(buffer.area, &mut buffer);
         },
         BatchSize::LargeInput,
-    )
+    );
 }
 
 /// Create a string with the given number of lines filled with nonsense words
@@ -87,7 +87,7 @@ fn render(bencher: &mut Bencher, paragraph: &Paragraph, width: u16) {
 /// English language has about 5.1 average characters per word so including the space between words
 /// this should emit around 200 characters per paragraph on average.
 fn random_lines(count: u16) -> String {
-    let count = count as i64;
+    let count = i64::from(count);
     let sentence_count = 3;
     let word_count = 11;
     fakeit::words::paragraph(count, sentence_count, word_count, "\n".into())

benches/sparkline.rs

@@ -7,7 +7,7 @@ use ratatui::{
 };
 
 /// Benchmark for rendering a sparkline.
-pub fn sparkline(c: &mut Criterion) {
+fn sparkline(c: &mut Criterion) {
     let mut group = c.benchmark_group("sparkline");
     let mut rng = rand::thread_rng();
 
@@ -38,7 +38,7 @@ fn render(bencher: &mut Bencher, sparkline: &Sparkline) {
             bench_sparkline.render(buffer.area, &mut buffer);
         },
         criterion::BatchSize::LargeInput,
-    )
+    );
 }
 
 criterion_group!(benches, sparkline);

cliff.toml

@@ -33,8 +33,7 @@ body = """
 {%- for footer in commit.footers %}
 {%- if footer.token != "Signed-off-by" and footer.token != "Co-authored-by" %}
 
-  {{ footer.token | indent(prefix="  ") }}{{ footer.separator }}
-  {{ footer.value | indent(prefix="  ") }}
+  {{ footer.token | indent(prefix="  ") }}{{ footer.separator }}{{ footer.value }}
 {%- endif %}
 {%- endfor %}
 {% endmacro -%}

examples/README.md

@@ -328,7 +328,7 @@ Links to images to make them easier to update in bulk. Use the following script
 the examples to the images branch. (Requires push access to the branch).
 
 ```shell
-examples/generate.bash
+examples/vhs/generate.bash
 ```
 -->
 

examples/barchart.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] `BarChart` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     error::Error,
     io,
@@ -9,7 +24,10 @@ use crossterm::{
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Bar, BarChart, BarGroup, Block, Borders, Paragraph},
+};
 
 struct Company<'a> {
     revenue: [u64; 4],
@@ -26,7 +44,7 @@ struct App<'a> {
 const TOTAL_REVENUE: &str = "Total Revenue";
 
 impl<'a> App<'a> {
-    fn new() -> App<'a> {
+    fn new() -> Self {
         App {
             data: vec![
                 ("B1", 9),
@@ -122,7 +140,7 @@ fn run_app<B: Backend>(
         let timeout = tick_rate.saturating_sub(last_tick.elapsed());
         if crossterm::event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
+                if key.code == KeyCode::Char('q') {
                     return Ok(());
                 }
             }
@@ -137,8 +155,8 @@ fn run_app<B: Backend>(
 fn ui(frame: &mut Frame, app: &App) {
     let vertical = Layout::vertical([Constraint::Ratio(1, 3), Constraint::Ratio(2, 3)]);
     let horizontal = Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
-    let [top, bottom] = frame.size().split(&vertical);
-    let [left, right] = bottom.split(&horizontal);
+    let [top, bottom] = vertical.areas(frame.size());
+    let [left, right] = horizontal.areas(bottom);
 
     let barchart = BarChart::default()
         .block(Block::default().title("Data1").borders(Borders::ALL))
@@ -152,6 +170,7 @@ fn ui(frame: &mut Frame, app: &App) {
     draw_horizontal_bars(frame, app, right);
 }
 
+#[allow(clippy::cast_precision_loss)]
 fn create_groups<'a>(app: &'a App, combine_values_and_labels: bool) -> Vec<BarGroup<'a>> {
     app.months
         .iter()
@@ -185,13 +204,16 @@ fn create_groups<'a>(app: &'a App, combine_values_and_labels: bool) -> Vec<BarGr
                 })
                 .collect();
             BarGroup::default()
-                .label(Line::from(month).alignment(Alignment::Center))
+                .label(Line::from(month).centered())
                 .bars(&bars)
         })
         .collect()
 }
 
+#[allow(clippy::cast_possible_truncation)]
 fn draw_bar_with_group_labels(f: &mut Frame, app: &App, area: Rect) {
+    const LEGEND_HEIGHT: u16 = 6;
+
     let groups = create_groups(app, false);
 
     let mut barchart = BarChart::default()
@@ -200,12 +222,11 @@ fn draw_bar_with_group_labels(f: &mut Frame, app: &App, area: Rect) {
         .group_gap(3);
 
     for group in groups {
-        barchart = barchart.data(group)
+        barchart = barchart.data(group);
     }
 
     f.render_widget(barchart, area);
 
-    const LEGEND_HEIGHT: u16 = 6;
     if area.height >= LEGEND_HEIGHT && area.width >= TOTAL_REVENUE.len() as u16 + 2 {
         let legend_width = TOTAL_REVENUE.len() as u16 + 2;
         let legend_area = Rect {
@@ -218,7 +239,10 @@ fn draw_bar_with_group_labels(f: &mut Frame, app: &App, area: Rect) {
     }
 }
 
+#[allow(clippy::cast_possible_truncation)]
 fn draw_horizontal_bars(f: &mut Frame, app: &App, area: Rect) {
+    const LEGEND_HEIGHT: u16 = 6;
+
     let groups = create_groups(app, true);
 
     let mut barchart = BarChart::default()
@@ -229,12 +253,11 @@ fn draw_horizontal_bars(f: &mut Frame, app: &App, area: Rect) {
         .direction(Direction::Horizontal);
 
     for group in groups {
-        barchart = barchart.data(group)
+        barchart = barchart.data(group);
     }
 
     f.render_widget(barchart, area);
 
-    const LEGEND_HEIGHT: u16 = 6;
     if area.height >= LEGEND_HEIGHT && area.width >= TOTAL_REVENUE.len() as u16 + 2 {
         let legend_width = TOTAL_REVENUE.len() as u16 + 2;
         let legend_area = Rect {

examples/block.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Block example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     error::Error,
     io::{stdout, Stdout},
@@ -62,7 +77,7 @@ fn run(terminal: &mut Terminal) -> Result<()> {
 fn handle_events() -> Result<ControlFlow<()>> {
     if event::poll(Duration::from_millis(100))? {
         if let Event::Key(key) = event::read()? {
-            if let KeyCode::Char('q') = key.code {
+            if key.code == KeyCode::Char('q') {
                 return Ok(ControlFlow::Break(()));
             }
         }
@@ -104,8 +119,8 @@ fn ui(frame: &mut Frame) {
 /// Returns a tuple of the title area and the main areas.
 fn calculate_layout(area: Rect) -> (Rect, Vec<Vec<Rect>>) {
     let main_layout = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
-    let block_layout = &Layout::vertical([Constraint::Max(4); 9]);
-    let [title_area, main_area] = area.split(&main_layout);
+    let block_layout = Layout::vertical([Constraint::Max(4); 9]);
+    let [title_area, main_area] = main_layout.areas(area);
     let main_areas = block_layout
         .split(main_area)
         .iter()
@@ -135,7 +150,7 @@ fn placeholder_paragraph() -> Paragraph<'static> {
 fn render_borders(paragraph: &Paragraph, border: Borders, frame: &mut Frame, area: Rect) {
     let block = Block::new()
         .borders(border)
-        .title(format!("Borders::{border:#?}", border = border));
+        .title(format!("Borders::{border:#?}"));
     frame.render_widget(paragraph.clone().block(block), area);
 }
 

examples/calendar.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Calendar example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::wildcard_imports)]
+
 use std::{error::Error, io};
 
 use crossterm::{
@@ -151,15 +168,13 @@ fn make_dates(current_year: i32) -> CalendarEventStore {
 mod cals {
     use super::*;
 
-    pub(super) fn get_cal<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
-        use Month::*;
+    pub fn get_cal<'a, DS: DateStyler>(m: Month, y: i32, es: DS) -> Monthly<'a, DS> {
         match m {
-            May => example1(m, y, es),
-            June => example2(m, y, es),
-            July => example3(m, y, es),
-            December => example3(m, y, es),
-            February => example4(m, y, es),
-            November => example5(m, y, es),
+            Month::May => example1(m, y, es),
+            Month::June => example2(m, y, es),
+            Month::July | Month::December => example3(m, y, es),
+            Month::February => example4(m, y, es),
+            Month::November => example5(m, y, es),
             _ => default(m, y, es),
         }
     }

examples/canvas.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Canvas example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::wildcard_imports)]
+
 use std::{
     io::{self, stdout, Stdout},
     time::{Duration, Instant},
@@ -29,8 +46,8 @@ struct App {
 }
 
 impl App {
-    fn new() -> App {
-        App {
+    fn new() -> Self {
+        Self {
             x: 0.0,
             y: 0.0,
             ball: Circle {
@@ -49,7 +66,7 @@ impl App {
 
     pub fn run() -> io::Result<()> {
         let mut terminal = init_terminal()?;
-        let mut app = App::new();
+        let mut app = Self::new();
         let mut last_tick = Instant::now();
         let tick_rate = Duration::from_millis(16);
         loop {
@@ -91,13 +108,13 @@ impl App {
         // bounce the ball by flipping the velocity vector
         let ball = &self.ball;
         let playground = self.playground;
-        if ball.x - ball.radius < playground.left() as f64
-            || ball.x + ball.radius > playground.right() as f64
+        if ball.x - ball.radius < f64::from(playground.left())
+            || ball.x + ball.radius > f64::from(playground.right())
         {
             self.vx = -self.vx;
         }
-        if ball.y - ball.radius < playground.top() as f64
-            || ball.y + ball.radius > playground.bottom() as f64
+        if ball.y - ball.radius < f64::from(playground.top())
+            || ball.y + ball.radius > f64::from(playground.bottom())
         {
             self.vy = -self.vy;
         }
@@ -110,8 +127,8 @@ impl App {
         let horizontal =
             Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
         let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
-        let [map, right] = frame.size().split(&horizontal);
-        let [pong, boxes] = right.split(&vertical);
+        let [map, right] = horizontal.areas(frame.size());
+        let [pong, boxes] = vertical.areas(right);
 
         frame.render_widget(self.map_canvas(), map);
         frame.render_widget(self.pong_canvas(), pong);
@@ -145,8 +162,10 @@ impl App {
     }
 
     fn boxes_canvas(&self, area: Rect) -> impl Widget {
-        let (left, right, bottom, top) =
-            (0.0, area.width as f64, 0.0, area.height as f64 * 2.0 - 4.0);
+        let left = 0.0;
+        let right = f64::from(area.width);
+        let bottom = 0.0;
+        let top = f64::from(area.height).mul_add(2.0, -4.0);
         Canvas::default()
             .block(Block::default().borders(Borders::ALL).title("Rects"))
             .marker(self.marker)
@@ -155,26 +174,26 @@ impl App {
             .paint(|ctx| {
                 for i in 0..=11 {
                     ctx.draw(&Rectangle {
-                        x: (i * i + 3 * i) as f64 / 2.0 + 2.0,
+                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
                         y: 2.0,
-                        width: i as f64,
-                        height: i as f64,
+                        width: f64::from(i),
+                        height: f64::from(i),
                         color: Color::Red,
                     });
                     ctx.draw(&Rectangle {
-                        x: (i * i + 3 * i) as f64 / 2.0 + 2.0,
+                        x: f64::from(i * i + 3 * i) / 2.0 + 2.0,
                         y: 21.0,
-                        width: i as f64,
-                        height: i as f64,
+                        width: f64::from(i),
+                        height: f64::from(i),
                         color: Color::Blue,
                     });
                 }
                 for i in 0..100 {
                     if i % 10 != 0 {
-                        ctx.print(i as f64 + 1.0, 0.0, format!("{i}", i = i % 10));
+                        ctx.print(f64::from(i) + 1.0, 0.0, format!("{i}", i = i % 10));
                     }
                     if i % 2 == 0 && i % 10 != 0 {
-                        ctx.print(0.0, i as f64, format!("{i}", i = i % 10));
+                        ctx.print(0.0, f64::from(i), format!("{i}", i = i % 10));
                     }
                 }
             })

examples/chart.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Chart example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     error::Error,
     io,
@@ -11,11 +26,11 @@ use crossterm::{
 };
 use ratatui::{
     prelude::*,
-    widgets::{block::Title, *},
+    widgets::{block::Title, Axis, Block, Borders, Chart, Dataset, GraphType, LegendPosition},
 };
 
 #[derive(Clone)]
-pub struct SinSignal {
+struct SinSignal {
     x: f64,
     interval: f64,
     period: f64,
@@ -23,8 +38,8 @@ pub struct SinSignal {
 }
 
 impl SinSignal {
-    pub fn new(interval: f64, period: f64, scale: f64) -> SinSignal {
-        SinSignal {
+    const fn new(interval: f64, period: f64, scale: f64) -> Self {
+        Self {
             x: 0.0,
             interval,
             period,
@@ -51,12 +66,12 @@ struct App {
 }
 
 impl App {
-    fn new() -> App {
+    fn new() -> Self {
         let mut signal1 = SinSignal::new(0.2, 3.0, 18.0);
         let mut signal2 = SinSignal::new(0.1, 2.0, 10.0);
         let data1 = signal1.by_ref().take(200).collect::<Vec<(f64, f64)>>();
         let data2 = signal2.by_ref().take(200).collect::<Vec<(f64, f64)>>();
-        App {
+        Self {
             signal1,
             data1,
             signal2,
@@ -66,14 +81,12 @@ impl App {
     }
 
     fn on_tick(&mut self) {
-        for _ in 0..5 {
-            self.data1.remove(0);
-        }
+        self.data1.drain(0..5);
         self.data1.extend(self.signal1.by_ref().take(5));
-        for _ in 0..10 {
-            self.data2.remove(0);
-        }
+
+        self.data2.drain(0..10);
         self.data2.extend(self.signal2.by_ref().take(10));
+
         self.window[0] += 1.0;
         self.window[1] += 1.0;
     }
@@ -120,7 +133,7 @@ fn run_app<B: Backend>(
         let timeout = tick_rate.saturating_sub(last_tick.elapsed());
         if crossterm::event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
+                if key.code == KeyCode::Char('q') {
                     return Ok(());
                 }
             }
@@ -137,8 +150,8 @@ fn ui(frame: &mut Frame, app: &App) {
 
     let vertical = Layout::vertical([Constraint::Percentage(40), Constraint::Percentage(60)]);
     let horizontal = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]);
-    let [chart1, bottom] = area.split(&vertical);
-    let [line_chart, scatter] = bottom.split(&horizontal);
+    let [chart1, bottom] = vertical.areas(area);
+    let [line_chart, scatter] = horizontal.areas(bottom);
 
     render_chart1(frame, chart1, app);
     render_line_chart(frame, line_chart);
@@ -229,7 +242,7 @@ fn render_line_chart(f: &mut Frame, area: Rect) {
         .legend_position(Some(LegendPosition::TopLeft))
         .hidden_legend_constraints((Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)));
 
-    f.render_widget(chart, area)
+    f.render_widget(chart, area);
 }
 
 fn render_scatter(f: &mut Frame, area: Rect) {
@@ -297,7 +310,7 @@ const HEAVY_PAYLOAD_DATA: [(f64, f64); 9] = [
 const MEDIUM_PAYLOAD_DATA: [(f64, f64); 29] = [
     (1963., 29500.),
     (1964., 30600.),
-    (1965., 177900.),
+    (1965., 177_900.),
     (1965., 21000.),
     (1966., 17900.),
     (1966., 8400.),
@@ -327,7 +340,7 @@ const MEDIUM_PAYLOAD_DATA: [(f64, f64); 29] = [
 ];
 
 const SMALL_PAYLOAD_DATA: [(f64, f64); 23] = [
-    (1961., 118500.),
+    (1961., 118_500.),
     (1962., 14900.),
     (1975., 21400.),
     (1980., 32800.),

examples/colors.rs

@@ -1,5 +1,21 @@
-/// This example shows all the colors supported by ratatui. It will render a grid of foreground
-/// and background colors with their names and indexes.
+//! # [Ratatui] Colors example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// This example shows all the colors supported by ratatui. It will render a grid of foreground
+// and background colors with their names and indexes.
+
 use std::{
     error::Error,
     io::{self, Stdout},
@@ -13,7 +29,10 @@ use crossterm::{
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, Paragraph},
+};
 
 type Result<T> = result::Result<T, Box<dyn Error>>;
 
@@ -33,7 +52,7 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
 
         if event::poll(Duration::from_millis(250))? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
+                if key.code == KeyCode::Char('q') {
                     return Ok(());
                 }
             }

examples/colors_rgb.rs

@@ -1,107 +1,247 @@
-/// This example shows the full range of RGB colors that can be displayed in the terminal.
-///
-/// Requires a terminal that supports 24-bit color (true color) and unicode.
+//! # [Ratatui] `Colors_RGB` example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// This example shows the full range of RGB colors that can be displayed in the terminal.
+//
+// Requires a terminal that supports 24-bit color (true color) and unicode.
+//
+// This example also demonstrates how implementing the Widget trait on a mutable reference
+// allows the widget to update its state while it is being rendered. This allows the fps
+// widget to update the fps calculation and the colors widget to update a cached version of
+// the colors to render instead of recalculating them every frame.
+//
+// This is an alternative to using the `StatefulWidget` trait and a separate state struct. It
+// is useful when the state is only used by the widget and doesn't need to be shared with
+// other widgets.
+
 use std::{
     io::stdout,
+    panic,
     time::{Duration, Instant},
 };
 
-use color_eyre::config::HookBuilder;
+use color_eyre::{config::HookBuilder, eyre, Result};
 use crossterm::{
     event::{self, Event, KeyCode, KeyEventKind},
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
     ExecutableCommand,
 };
 use palette::{convert::FromColorUnclamped, Okhsv, Srgb};
-use ratatui::{prelude::*, widgets::*};
-
-fn main() -> color_eyre::Result<()> {
-    App::run()
-}
+use ratatui::prelude::*;
 
 #[derive(Debug, Default)]
 struct App {
-    should_quit: bool,
-    // a 2d vec of the colors to render, calculated when the size changes as this is expensive
-    // to calculate every frame
-    colors: Vec<Vec<Color>>,
-    last_size: Rect,
-    fps: Fps,
-    frame_count: usize,
+    /// The current state of the app (running or quit)
+    state: AppState,
+
+    /// A widget that displays the current frames per second
+    fps_widget: FpsWidget,
+
+    /// A widget that displays the full range of RGB colors that can be displayed in the terminal.
+    colors_widget: ColorsWidget,
 }
 
+#[derive(Debug, Default, PartialEq, Eq)]
+enum AppState {
+    /// The app is running
+    #[default]
+    Running,
+
+    /// The user has requested the app to quit
+    Quit,
+}
+
+/// A widget that displays the current frames per second
 #[derive(Debug)]
-struct Fps {
+struct FpsWidget {
+    /// The number of elapsed frames that have passed - used to calculate the fps
     frame_count: usize,
+
+    /// The last instant that the fps was calculated
     last_instant: Instant,
+
+    /// The current frames per second
     fps: Option<f32>,
 }
 
-struct AppWidget<'a> {
-    title: Paragraph<'a>,
-    fps_widget: FpsWidget<'a>,
-    rgb_colors_widget: RgbColorsWidget<'a>,
-}
+/// A widget that displays the full range of RGB colors that can be displayed in the terminal.
+///
+/// This widget is animated and will change colors over time.
+#[derive(Debug, Default)]
+struct ColorsWidget {
+    /// The colors to render - should be double the height of the area as we render two rows of
+    /// pixels for each row of the widget using the half block character. This is computed any time
+    /// the size of the widget changes.
+    colors: Vec<Vec<Color>>,
 
-struct FpsWidget<'a> {
-    fps: &'a Fps,
-}
-
-struct RgbColorsWidget<'a> {
-    /// The colors to render - should be double the height of the area
-    colors: &'a Vec<Vec<Color>>,
-    /// the number of elapsed frames that have passed - used to animate the colors
+    /// the number of elapsed frames that have passed - used to animate the colors by shifting the
+    /// x index by the frame number
     frame_count: usize,
 }
 
+fn main() -> Result<()> {
+    install_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
+}
+
 impl App {
-    pub fn run() -> color_eyre::Result<()> {
-        install_panic_hook()?;
-
-        let mut terminal = init_terminal()?;
-        let mut app = Self::default();
-
-        while !app.should_quit {
-            app.tick();
-            terminal.draw(|frame| {
-                let size = frame.size();
-                app.setup_colors(size);
-                frame.render_widget(AppWidget::new(&app), size);
-            })?;
-            app.handle_events()?;
+    /// Run the app
+    ///
+    /// This is the main event loop for the app.
+    pub fn run(mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        while self.is_running() {
+            terminal.draw(|frame| frame.render_widget(&mut self, frame.size()))?;
+            self.handle_events()?;
         }
-        restore_terminal()?;
         Ok(())
     }
 
-    fn tick(&mut self) {
-        self.frame_count += 1;
-        self.fps.tick();
+    const fn is_running(&self) -> bool {
+        matches!(self.state, AppState::Running)
     }
 
-    fn handle_events(&mut self) -> color_eyre::Result<()> {
-        if event::poll(Duration::from_secs_f32(1.0 / 60.0))? {
+    /// Handle any events that have occurred since the last time the app was rendered.
+    ///
+    /// Currently, this only handles the q key to quit the app.
+    fn handle_events(&mut self) -> Result<()> {
+        // Ensure that the app only blocks for a period that allows the app to render at
+        // approximately 60 FPS (this doesn't account for the time to render the frame, and will
+        // also update the app immediately any time an event occurs)
+        let timeout = Duration::from_secs_f32(1.0 / 60.0);
+        if event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
                 if key.kind == KeyEventKind::Press && key.code == KeyCode::Char('q') {
-                    self.should_quit = true;
+                    self.state = AppState::Quit;
                 };
             }
         }
         Ok(())
     }
+}
 
-    fn setup_colors(&mut self, size: Rect) {
-        // only update the colors if the size has changed since the last time we rendered
-        if self.last_size.width == size.width && self.last_size.height == size.height {
-            return;
+/// Implement the Widget trait for &mut App so that it can be rendered
+///
+/// This is implemented on a mutable reference so that the app can update its state while it is
+/// being rendered. This allows the fps widget to update the fps calculation and the colors widget
+/// to update the colors to render.
+impl Widget for &mut App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        #[allow(clippy::enum_glob_use)]
+        use Constraint::*;
+        let [top, colors] = Layout::vertical([Length(1), Min(0)]).areas(area);
+        let [title, fps] = Layout::horizontal([Min(0), Length(8)]).areas(top);
+        Text::from("colors_rgb example. Press q to quit")
+            .centered()
+            .render(title, buf);
+        self.fps_widget.render(fps, buf);
+        self.colors_widget.render(colors, buf);
+    }
+}
+
+/// Default impl for `FpsWidget`
+///
+/// Manual impl is required because we need to initialize the `last_instant` field to the current
+/// instant.
+impl Default for FpsWidget {
+    fn default() -> Self {
+        Self {
+            frame_count: 0,
+            last_instant: Instant::now(),
+            fps: None,
         }
-        self.last_size = size;
+    }
+}
+
+/// Widget impl for `FpsWidget`
+///
+/// This is implemented on a mutable reference so that we can update the frame count and fps
+/// calculation while rendering.
+impl Widget for &mut FpsWidget {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        self.calculate_fps();
+        if let Some(fps) = self.fps {
+            let text = format!("{fps:.1} fps");
+            Text::from(text).render(area, buf);
+        }
+    }
+}
+
+impl FpsWidget {
+    /// Update the fps calculation.
+    ///
+    /// This updates the fps once a second, but only if the widget has rendered at least 2 frames
+    /// since the last calculation. This avoids noise in the fps calculation when rendering on slow
+    /// machines that can't render at least 2 frames per second.
+    #[allow(clippy::cast_precision_loss)]
+    fn calculate_fps(&mut self) {
+        self.frame_count += 1;
+        let elapsed = self.last_instant.elapsed();
+        if elapsed > Duration::from_secs(1) && self.frame_count > 2 {
+            self.fps = Some(self.frame_count as f32 / elapsed.as_secs_f32());
+            self.frame_count = 0;
+            self.last_instant = Instant::now();
+        }
+    }
+}
+
+/// Widget impl for `ColorsWidget`
+///
+/// This is implemented on a mutable reference so that we can update the frame count and store a
+/// cached version of the colors to render instead of recalculating them every frame.
+impl Widget for &mut ColorsWidget {
+    /// Render the widget
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        self.setup_colors(area);
+        let colors = &self.colors;
+        for (xi, x) in (area.left()..area.right()).enumerate() {
+            // animate the colors by shifting the x index by the frame number
+            let xi = (xi + self.frame_count) % (area.width as usize);
+            for (yi, y) in (area.top()..area.bottom()).enumerate() {
+                // render a half block character for each row of pixels with the foreground color
+                // set to the color of the pixel and the background color set to the color of the
+                // pixel below it
+                let fg = colors[yi * 2][xi];
+                let bg = colors[yi * 2 + 1][xi];
+                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
+            }
+        }
+        self.frame_count += 1;
+    }
+}
+
+impl ColorsWidget {
+    /// Setup the colors to render.
+    ///
+    /// This is called once per frame to setup the colors to render. It caches the colors so that
+    /// they don't need to be recalculated every frame.
+    #[allow(clippy::cast_precision_loss)]
+    fn setup_colors(&mut self, size: Rect) {
         let Rect { width, height, .. } = size;
         // double the height because each screen row has two rows of half block pixels
-        let height = height * 2;
-        self.colors.clear();
+        let height = height as usize * 2;
+        let width = width as usize;
+        // only update the colors if the size has changed since the last time we rendered
+        if self.colors.len() == height && self.colors[0].len() == width {
+            return;
+        }
+        self.colors = Vec::with_capacity(height);
         for y in 0..height {
-            let mut row = Vec::new();
+            let mut row = Vec::with_capacity(width);
             for x in 0..width {
                 let hue = x as f32 * 360.0 / width as f32;
                 let value = (height - y) as f32 / height as f32;
@@ -117,99 +257,25 @@ impl App {
     }
 }
 
-impl Fps {
-    fn tick(&mut self) {
-        self.frame_count += 1;
-        let elapsed = self.last_instant.elapsed();
-        // update the fps every second, but only if we've rendered at least 2 frames (to avoid
-        // noise in the fps calculation)
-        if elapsed > Duration::from_secs(1) && self.frame_count > 2 {
-            self.fps = Some(self.frame_count as f32 / elapsed.as_secs_f32());
-            self.frame_count = 0;
-            self.last_instant = Instant::now();
-        }
-    }
-}
-
-impl Default for Fps {
-    fn default() -> Self {
-        Self {
-            frame_count: 0,
-            last_instant: Instant::now(),
-            fps: None,
-        }
-    }
-}
-
-impl<'a> AppWidget<'a> {
-    fn new(app: &'a App) -> Self {
-        let title =
-            Paragraph::new("colors_rgb example. Press q to quit").alignment(Alignment::Center);
-        Self {
-            title,
-            fps_widget: FpsWidget { fps: &app.fps },
-            rgb_colors_widget: RgbColorsWidget {
-                colors: &app.colors,
-                frame_count: app.frame_count,
-            },
-        }
-    }
-}
-
-impl Widget for AppWidget<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
-        let horizontal = Layout::horizontal([Constraint::Min(0), Constraint::Length(8)]);
-        let [top, colors] = area.split(&vertical);
-        let [title, fps] = top.split(&horizontal);
-
-        self.title.render(title, buf);
-        self.fps_widget.render(fps, buf);
-        self.rgb_colors_widget.render(colors, buf);
-    }
-}
-
-impl Widget for RgbColorsWidget<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        let colors = self.colors;
-        for (xi, x) in (area.left()..area.right()).enumerate() {
-            // animate the colors by shifting the x index by the frame number
-            let xi = (xi + self.frame_count) % (area.width as usize);
-            for (yi, y) in (area.top()..area.bottom()).enumerate() {
-                let fg = colors[yi * 2][xi];
-                let bg = colors[yi * 2 + 1][xi];
-                buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
-            }
-        }
-    }
-}
-
-impl<'a> Widget for FpsWidget<'a> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        if let Some(fps) = self.fps.fps {
-            let text = format!("{:.1} fps", fps);
-            Paragraph::new(text).render(area, buf);
-        }
-    }
-}
-
-/// Install a panic hook that restores the terminal before panicking.
-fn install_panic_hook() -> color_eyre::Result<()> {
+/// Install `color_eyre` panic and error hooks
+///
+/// The hooks restore the terminal to a usable state before printing the error message.
+fn install_error_hooks() -> Result<()> {
     let (panic, error) = HookBuilder::default().into_hooks();
     let panic = panic.into_panic_hook();
     let error = error.into_eyre_hook();
-    color_eyre::eyre::set_hook(Box::new(move |e| {
+    eyre::set_hook(Box::new(move |e| {
         let _ = restore_terminal();
         error(e)
     }))?;
-    std::panic::set_hook(Box::new(move |info| {
+    panic::set_hook(Box::new(move |info| {
         let _ = restore_terminal();
-        panic(info)
+        panic(info);
     }));
     Ok(())
 }
 
-fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+fn init_terminal() -> Result<Terminal<impl Backend>> {
     enable_raw_mode()?;
     stdout().execute(EnterAlternateScreen)?;
     let mut terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
@@ -218,7 +284,7 @@ fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
     Ok(terminal)
 }
 
-fn restore_terminal() -> color_eyre::Result<()> {
+fn restore_terminal() -> Result<()> {
     disable_raw_mode()?;
     stdout().execute(LeaveAlternateScreen)?;
     Ok(())

examples/constraint-explorer.rs

@@ -0,0 +1,646 @@
+//! # [Ratatui] Constraint explorer example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::enum_glob_use, clippy::wildcard_imports)]
+
+use std::io::{self, stdout};
+
+use color_eyre::{config::HookBuilder, Result};
+use crossterm::{
+    event::{self, Event, KeyCode, KeyEventKind},
+    terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    ExecutableCommand,
+};
+use itertools::Itertools;
+use ratatui::{
+    layout::{Constraint::*, Flex},
+    prelude::*,
+    style::palette::tailwind::*,
+    symbols::line,
+    widgets::{Block, Paragraph, Wrap},
+};
+use strum::{Display, EnumIter, FromRepr};
+
+#[derive(Default)]
+struct App {
+    mode: AppMode,
+    spacing: u16,
+    constraints: Vec<Constraint>,
+    selected_index: usize,
+    value: u16,
+}
+
+#[derive(Debug, Default, PartialEq, Eq)]
+enum AppMode {
+    #[default]
+    Running,
+    Quit,
+}
+
+/// A variant of [`Constraint`] that can be rendered as a tab.
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, EnumIter, FromRepr, Display)]
+enum ConstraintName {
+    #[default]
+    Length,
+    Percentage,
+    Ratio,
+    Min,
+    Max,
+    Fill,
+}
+
+/// A widget that renders a [`Constraint`] as a block. E.g.:
+/// ```plain
+/// ┌──────────────┐
+/// │  Length(16)  │
+/// │     16px     │
+/// └──────────────┘
+/// ```
+struct ConstraintBlock {
+    constraint: Constraint,
+    legend: bool,
+    selected: bool,
+}
+
+/// A widget that renders a spacer with a label indicating the width of the spacer. E.g.:
+///
+/// ```plain
+/// ┌      ┐
+///   8 px
+/// └      ┘
+/// ```
+struct SpacerBlock;
+
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
+}
+
+// App behaviour
+impl App {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        self.insert_test_defaults();
+
+        while self.is_running() {
+            self.draw(&mut terminal)?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
+
+    // TODO remove these - these are just for testing
+    fn insert_test_defaults(&mut self) {
+        self.constraints = vec![
+            Constraint::Length(20),
+            Constraint::Length(20),
+            Constraint::Length(20),
+        ];
+        self.value = 20;
+    }
+
+    fn is_running(&self) -> bool {
+        self.mode == AppMode::Running
+    }
+
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> io::Result<()> {
+        terminal.draw(|frame| frame.render_widget(self, frame.size()))?;
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> Result<()> {
+        use KeyCode::*;
+        match event::read()? {
+            Event::Key(key) if key.kind == KeyEventKind::Press => match key.code {
+                Char('q') | Esc => self.exit(),
+                Char('1') => self.swap_constraint(ConstraintName::Min),
+                Char('2') => self.swap_constraint(ConstraintName::Max),
+                Char('3') => self.swap_constraint(ConstraintName::Length),
+                Char('4') => self.swap_constraint(ConstraintName::Percentage),
+                Char('5') => self.swap_constraint(ConstraintName::Ratio),
+                Char('6') => self.swap_constraint(ConstraintName::Fill),
+                Char('+') => self.increment_spacing(),
+                Char('-') => self.decrement_spacing(),
+                Char('x') => self.delete_block(),
+                Char('a') => self.insert_block(),
+                Char('k') | Up => self.increment_value(),
+                Char('j') | Down => self.decrement_value(),
+                Char('h') | Left => self.prev_block(),
+                Char('l') | Right => self.next_block(),
+                _ => {}
+            },
+            _ => {}
+        }
+        Ok(())
+    }
+
+    fn increment_value(&mut self) {
+        let Some(constraint) = self.constraints.get_mut(self.selected_index) else {
+            return;
+        };
+        match constraint {
+            Constraint::Length(v)
+            | Constraint::Min(v)
+            | Constraint::Max(v)
+            | Constraint::Fill(v)
+            | Constraint::Percentage(v) => *v = v.saturating_add(1),
+            Constraint::Ratio(_n, d) => *d = d.saturating_add(1),
+        };
+    }
+
+    fn decrement_value(&mut self) {
+        let Some(constraint) = self.constraints.get_mut(self.selected_index) else {
+            return;
+        };
+        match constraint {
+            Constraint::Length(v)
+            | Constraint::Min(v)
+            | Constraint::Max(v)
+            | Constraint::Fill(v)
+            | Constraint::Percentage(v) => *v = v.saturating_sub(1),
+            Constraint::Ratio(_n, d) => *d = d.saturating_sub(1),
+        };
+    }
+
+    /// select the next block with wrap around
+    fn next_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let len = self.constraints.len();
+        self.selected_index = (self.selected_index + 1) % len;
+    }
+
+    /// select the previous block with wrap around
+    fn prev_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let len = self.constraints.len();
+        self.selected_index = (self.selected_index + self.constraints.len() - 1) % len;
+    }
+
+    /// delete the selected block
+    fn delete_block(&mut self) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        self.constraints.remove(self.selected_index);
+        self.selected_index = self.selected_index.saturating_sub(1);
+    }
+
+    /// insert a block after the selected block
+    fn insert_block(&mut self) {
+        let index = self
+            .selected_index
+            .saturating_add(1)
+            .min(self.constraints.len());
+        let constraint = Constraint::Length(self.value);
+        self.constraints.insert(index, constraint);
+        self.selected_index = index;
+    }
+
+    fn increment_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_add(1);
+    }
+
+    fn decrement_spacing(&mut self) {
+        self.spacing = self.spacing.saturating_sub(1);
+    }
+
+    fn exit(&mut self) {
+        self.mode = AppMode::Quit;
+    }
+
+    fn swap_constraint(&mut self, name: ConstraintName) {
+        if self.constraints.is_empty() {
+            return;
+        }
+        let constraint = match name {
+            ConstraintName::Length => Length(self.value),
+            ConstraintName::Percentage => Percentage(self.value),
+            ConstraintName::Min => Min(self.value),
+            ConstraintName::Max => Max(self.value),
+            ConstraintName::Fill => Fill(self.value),
+            ConstraintName::Ratio => Ratio(1, u32::from(self.value) / 4), // for balance
+        };
+        self.constraints[self.selected_index] = constraint;
+    }
+}
+
+impl From<Constraint> for ConstraintName {
+    fn from(constraint: Constraint) -> Self {
+        match constraint {
+            Length(_) => Self::Length,
+            Percentage(_) => Self::Percentage,
+            Ratio(_, _) => Self::Ratio,
+            Min(_) => Self::Min,
+            Max(_) => Self::Max,
+            Fill(_) => Self::Fill,
+        }
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let [header_area, instructions_area, swap_legend_area, _, blocks_area] =
+            Layout::vertical([
+                Length(2), // header
+                Length(2), // instructions
+                Length(1), // swap key legend
+                Length(1), // gap
+                Fill(1),   // blocks
+            ])
+            .areas(area);
+
+        App::header().render(header_area, buf);
+        App::instructions().render(instructions_area, buf);
+        App::swap_legend().render(swap_legend_area, buf);
+        self.render_layout_blocks(blocks_area, buf);
+    }
+}
+
+// App rendering
+impl App {
+    const HEADER_COLOR: Color = SLATE.c200;
+    const TEXT_COLOR: Color = SLATE.c400;
+    const AXIS_COLOR: Color = SLATE.c500;
+
+    fn header() -> impl Widget {
+        let text = "Constraint Explorer";
+        text.bold().fg(Self::HEADER_COLOR).into_centered_line()
+    }
+
+    fn instructions() -> impl Widget {
+        let text = "◄ ►: select, ▲ ▼: edit, 1-6: swap, a: add, x: delete, q: quit, + -: spacing";
+        Paragraph::new(text)
+            .fg(Self::TEXT_COLOR)
+            .centered()
+            .wrap(Wrap { trim: false })
+    }
+
+    fn swap_legend() -> impl Widget {
+        #[allow(unstable_name_collisions)]
+        Paragraph::new(
+            Line::from(
+                [
+                    ConstraintName::Min,
+                    ConstraintName::Max,
+                    ConstraintName::Length,
+                    ConstraintName::Percentage,
+                    ConstraintName::Ratio,
+                    ConstraintName::Fill,
+                ]
+                .iter()
+                .enumerate()
+                .map(|(i, name)| {
+                    format!("  {i}: {name}  ", i = i + 1)
+                        .fg(SLATE.c200)
+                        .bg(name.color())
+                })
+                .intersperse(Span::from(" "))
+                .collect_vec(),
+            )
+            .centered(),
+        )
+        .wrap(Wrap { trim: false })
+    }
+
+    /// A bar like `<----- 80 px (gap: 2 px) ----->`
+    ///
+    /// Only shows the gap when spacing is not zero
+    fn axis(&self, width: u16) -> impl Widget {
+        let label = if self.spacing != 0 {
+            format!("{} px (gap: {} px)", width, self.spacing)
+        } else {
+            format!("{width} px")
+        };
+        let bar_width = width.saturating_sub(2) as usize; // we want to `<` and `>` at the ends
+        let width_bar = format!("<{label:-^bar_width$}>");
+        Paragraph::new(width_bar).fg(Self::AXIS_COLOR).centered()
+    }
+
+    fn render_layout_blocks(&self, area: Rect, buf: &mut Buffer) {
+        let [user_constraints, area] = Layout::vertical([Length(3), Fill(1)])
+            .spacing(1)
+            .areas(area);
+
+        self.render_user_constraints_legend(user_constraints, buf);
+
+        let [start, center, end, space_around, space_between] =
+            Layout::vertical([Length(7); 5]).areas(area);
+
+        self.render_layout_block(Flex::Start, start, buf);
+        self.render_layout_block(Flex::Center, center, buf);
+        self.render_layout_block(Flex::End, end, buf);
+        self.render_layout_block(Flex::SpaceAround, space_around, buf);
+        self.render_layout_block(Flex::SpaceBetween, space_between, buf);
+    }
+
+    fn render_user_constraints_legend(&self, area: Rect, buf: &mut Buffer) {
+        let blocks = Layout::horizontal(
+            self.constraints
+                .iter()
+                .map(|_| Constraint::Fill(1))
+                .collect_vec(),
+        )
+        .split(area);
+
+        for (i, (area, constraint)) in blocks.iter().zip(self.constraints.iter()).enumerate() {
+            let selected = self.selected_index == i;
+            ConstraintBlock::new(*constraint, selected, true).render(*area, buf);
+        }
+    }
+
+    fn render_layout_block(&self, flex: Flex, area: Rect, buf: &mut Buffer) {
+        let [label_area, axis_area, blocks_area] =
+            Layout::vertical([Length(1), Max(1), Length(4)]).areas(area);
+
+        if label_area.height > 0 {
+            format!("Flex::{flex:?}").bold().render(label_area, buf);
+        }
+
+        self.axis(area.width).render(axis_area, buf);
+
+        let (blocks, spacers) = Layout::horizontal(&self.constraints)
+            .flex(flex)
+            .spacing(self.spacing)
+            .split_with_spacers(blocks_area);
+
+        for (i, (area, constraint)) in blocks.iter().zip(self.constraints.iter()).enumerate() {
+            let selected = self.selected_index == i;
+            ConstraintBlock::new(*constraint, selected, false).render(*area, buf);
+        }
+
+        for area in spacers.iter() {
+            SpacerBlock.render(*area, buf);
+        }
+    }
+}
+
+impl Widget for ConstraintBlock {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match area.height {
+            1 => self.render_1px(area, buf),
+            2 => self.render_2px(area, buf),
+            _ => self.render_4px(area, buf),
+        }
+    }
+}
+
+impl ConstraintBlock {
+    const TEXT_COLOR: Color = SLATE.c200;
+
+    const fn new(constraint: Constraint, selected: bool, legend: bool) -> Self {
+        Self {
+            constraint,
+            legend,
+            selected,
+        }
+    }
+
+    fn label(&self, width: u16) -> String {
+        let long_width = format!("{width} px");
+        let short_width = format!("{width}");
+        // border takes up 2 columns
+        let available_space = width.saturating_sub(2) as usize;
+        let width_label = if long_width.len() < available_space {
+            long_width
+        } else if short_width.len() < available_space {
+            short_width
+        } else {
+            String::new()
+        };
+        format!("{}\n{}", self.constraint, width_label)
+    }
+
+    fn render_1px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        Block::default()
+            .fg(Self::TEXT_COLOR)
+            .bg(selected_color)
+            .render(area, buf);
+    }
+
+    fn render_2px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(selected_color).reversed())
+            .render(area, buf);
+    }
+
+    fn render_4px(&self, area: Rect, buf: &mut Buffer) {
+        let lighter_color = ConstraintName::from(self.constraint).lighter_color();
+        let main_color = ConstraintName::from(self.constraint).color();
+        let selected_color = if self.selected {
+            lighter_color
+        } else {
+            main_color
+        };
+        let color = if self.legend {
+            selected_color
+        } else {
+            main_color
+        };
+        let label = self.label(area.width);
+        let block = Block::bordered()
+            .border_set(symbols::border::QUADRANT_OUTSIDE)
+            .border_style(Style::reset().fg(color).reversed())
+            .fg(Self::TEXT_COLOR)
+            .bg(color);
+        Paragraph::new(label)
+            .centered()
+            .fg(Self::TEXT_COLOR)
+            .bg(color)
+            .block(block)
+            .render(area, buf);
+
+        if !self.legend {
+            let border_color = if self.selected {
+                lighter_color
+            } else {
+                main_color
+            };
+            if let Some(last_row) = area.rows().last() {
+                buf.set_style(last_row, border_color);
+            }
+        }
+    }
+}
+
+impl Widget for SpacerBlock {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        match area.height {
+            1 => (),
+            2 => Self::render_2px(area, buf),
+            3 => Self::render_3px(area, buf),
+            _ => Self::render_4px(area, buf),
+        }
+    }
+}
+
+impl SpacerBlock {
+    const TEXT_COLOR: Color = SLATE.c500;
+    const BORDER_COLOR: Color = SLATE.c600;
+
+    /// A block with a corner borders
+    fn block() -> impl Widget {
+        let corners_only = symbols::border::Set {
+            top_left: line::NORMAL.top_left,
+            top_right: line::NORMAL.top_right,
+            bottom_left: line::NORMAL.bottom_left,
+            bottom_right: line::NORMAL.bottom_right,
+            vertical_left: " ",
+            vertical_right: " ",
+            horizontal_top: " ",
+            horizontal_bottom: " ",
+        };
+        Block::bordered()
+            .border_set(corners_only)
+            .border_style(Self::BORDER_COLOR)
+    }
+
+    /// A vertical line used if there is not enough space to render the block
+    fn line() -> impl Widget {
+        Paragraph::new(Text::from(vec![
+            Line::from(""),
+            Line::from("│"),
+            Line::from("│"),
+            Line::from(""),
+        ]))
+        .style(Self::BORDER_COLOR)
+    }
+
+    /// A label that says "Spacer" if there is enough space
+    fn spacer_label(width: u16) -> impl Widget {
+        let label = if width >= 6 { "Spacer" } else { "" };
+        label.fg(Self::TEXT_COLOR).into_centered_line()
+    }
+
+    /// A label that says "8 px" if there is enough space
+    fn label(width: u16) -> impl Widget {
+        let long_label = format!("{width} px");
+        let short_label = format!("{width}");
+        let label = if long_label.len() < width as usize {
+            long_label
+        } else if short_label.len() < width as usize {
+            short_label
+        } else {
+            String::new()
+        };
+        Line::styled(label, Self::TEXT_COLOR).centered()
+    }
+
+    fn render_2px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+    }
+
+    fn render_3px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+
+        let row = area.rows().nth(1).unwrap_or_default();
+        Self::spacer_label(area.width).render(row, buf);
+    }
+
+    fn render_4px(area: Rect, buf: &mut Buffer) {
+        if area.width > 1 {
+            Self::block().render(area, buf);
+        } else {
+            Self::line().render(area, buf);
+        }
+
+        let row = area.rows().nth(1).unwrap_or_default();
+        Self::spacer_label(area.width).render(row, buf);
+
+        let row = area.rows().nth(2).unwrap_or_default();
+        Self::label(area.width).render(row, buf);
+    }
+}
+
+impl ConstraintName {
+    const fn color(self) -> Color {
+        match self {
+            Self::Length => SLATE.c700,
+            Self::Percentage => SLATE.c800,
+            Self::Ratio => SLATE.c900,
+            Self::Fill => SLATE.c950,
+            Self::Min => BLUE.c800,
+            Self::Max => BLUE.c900,
+        }
+    }
+
+    const fn lighter_color(self) -> Color {
+        match self {
+            Self::Length => STONE.c500,
+            Self::Percentage => STONE.c600,
+            Self::Ratio => STONE.c700,
+            Self::Fill => STONE.c800,
+            Self::Min => SKY.c600,
+            Self::Max => SKY.c700,
+        }
+    }
+}
+
+fn init_error_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}

examples/constraints.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Constraints example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::enum_glob_use, clippy::wildcard_imports)]
+
 use std::io::{self, stdout};
 
 use color_eyre::{config::HookBuilder, Result};
@@ -13,8 +30,6 @@ const SPACER_HEIGHT: u16 = 0;
 const ILLUSTRATION_HEIGHT: u16 = 4;
 const EXAMPLE_HEIGHT: u16 = ILLUSTRATION_HEIGHT + SPACER_HEIGHT;
 
-// priority 1
-const FIXED_COLOR: Color = tailwind::RED.c900;
 // priority 2
 const MIN_COLOR: Color = tailwind::BLUE.c900;
 const MAX_COLOR: Color = tailwind::BLUE.c800;
@@ -23,7 +38,7 @@ const LENGTH_COLOR: Color = tailwind::SLATE.c700;
 const PERCENTAGE_COLOR: Color = tailwind::SLATE.c800;
 const RATIO_COLOR: Color = tailwind::SLATE.c900;
 // priority 4
-const PROPORTIONAL_COLOR: Color = tailwind::SLATE.c950;
+const FILL_COLOR: Color = tailwind::SLATE.c950;
 
 #[derive(Default, Clone, Copy)]
 struct App {
@@ -39,13 +54,12 @@ struct App {
 #[derive(Default, Debug, Copy, Clone, Display, FromRepr, EnumIter, PartialEq, Eq)]
 enum SelectedTab {
     #[default]
-    Fixed,
     Min,
     Max,
     Length,
     Percentage,
     Ratio,
-    Proportional,
+    Fill,
 }
 
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
@@ -83,7 +97,7 @@ impl App {
         self.max_scroll_offset = (self.selected_tab.get_example_count() - 1) * EXAMPLE_HEIGHT;
     }
 
-    fn is_running(&self) -> bool {
+    fn is_running(self) -> bool {
         self.state == AppState::Running
     }
 
@@ -126,14 +140,14 @@ impl App {
     }
 
     fn up(&mut self) {
-        self.scroll_offset = self.scroll_offset.saturating_sub(1)
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
     }
 
     fn down(&mut self) {
         self.scroll_offset = self
             .scroll_offset
             .saturating_add(1)
-            .min(self.max_scroll_offset)
+            .min(self.max_scroll_offset);
     }
 
     fn top(&mut self) {
@@ -147,20 +161,16 @@ impl App {
 
 impl Widget for App {
     fn render(self, area: Rect, buf: &mut Buffer) {
-        let [tabs, axis, demo] = area.split(&Layout::vertical([
-            Constraint::Fixed(3),
-            Constraint::Fixed(3),
-            Proportional(0),
-        ]));
+        let [tabs, axis, demo] = Layout::vertical([Length(3), Length(3), Fill(0)]).areas(area);
 
         self.render_tabs(tabs, buf);
-        self.render_axis(axis, buf);
+        Self::render_axis(axis, buf);
         self.render_demo(demo, buf);
     }
 }
 
 impl App {
-    fn render_tabs(&self, area: Rect, buf: &mut Buffer) {
+    fn render_tabs(self, area: Rect, buf: &mut Buffer) {
         let titles = SelectedTab::iter().map(SelectedTab::to_tab_title);
         let block = Block::new()
             .title("Constraints ".bold())
@@ -174,16 +184,16 @@ impl App {
             .render(area, buf);
     }
 
-    fn render_axis(&self, area: Rect, buf: &mut Buffer) {
+    fn render_axis(area: Rect, buf: &mut Buffer) {
         let width = area.width as usize;
         // a bar like `<----- 80 px ----->`
-        let width_label = format!("{} px", width);
+        let width_label = format!("{width} px");
         let width_bar = format!(
             "<{width_label:-^width$}>",
             width = width - width_label.len() / 2
         );
         Paragraph::new(width_bar.dark_gray())
-            .alignment(Alignment::Center)
+            .centered()
             .block(Block::default().padding(Padding {
                 left: 0,
                 right: 0,
@@ -197,7 +207,8 @@ impl App {
     ///
     /// This function renders the demo content into a separate buffer and then splices the buffer
     /// into the main buffer. This is done to make it possible to handle scrolling easily.
-    fn render_demo(&self, area: Rect, buf: &mut Buffer) {
+    #[allow(clippy::cast_possible_truncation)]
+    fn render_demo(self, area: Rect, buf: &mut Buffer) {
         // render demo content into a separate buffer so all examples fit we add an extra
         // area.height to make sure the last example is fully visible even when the scroll offset is
         // at the max
@@ -237,43 +248,40 @@ impl App {
 
 impl SelectedTab {
     /// Get the previous tab, if there is no previous tab return the current tab.
-    fn previous(&self) -> Self {
-        let current_index: usize = *self as usize;
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
         let previous_index = current_index.saturating_sub(1);
-        Self::from_repr(previous_index).unwrap_or(*self)
+        Self::from_repr(previous_index).unwrap_or(self)
     }
 
     /// Get the next tab, if there is no next tab return the current tab.
-    fn next(&self) -> Self {
-        let current_index = *self as usize;
+    fn next(self) -> Self {
+        let current_index = self as usize;
         let next_index = current_index.saturating_add(1);
-        Self::from_repr(next_index).unwrap_or(*self)
+        Self::from_repr(next_index).unwrap_or(self)
     }
 
-    fn get_example_count(&self) -> u16 {
-        use SelectedTab::*;
+    const fn get_example_count(self) -> u16 {
+        #[allow(clippy::match_same_arms)]
         match self {
-            Fixed => 4,
-            Length => 4,
-            Percentage => 5,
-            Ratio => 4,
-            Proportional => 2,
-            Min => 5,
-            Max => 5,
+            Self::Length => 4,
+            Self::Percentage => 5,
+            Self::Ratio => 4,
+            Self::Fill => 2,
+            Self::Min => 5,
+            Self::Max => 5,
         }
     }
 
-    fn to_tab_title(value: SelectedTab) -> Line<'static> {
-        use SelectedTab::*;
+    fn to_tab_title(value: Self) -> Line<'static> {
         let text = format!("  {value}  ");
         let color = match value {
-            Fixed => FIXED_COLOR,
-            Length => LENGTH_COLOR,
-            Percentage => PERCENTAGE_COLOR,
-            Ratio => RATIO_COLOR,
-            Proportional => PROPORTIONAL_COLOR,
-            Min => MIN_COLOR,
-            Max => MAX_COLOR,
+            Self::Length => LENGTH_COLOR,
+            Self::Percentage => PERCENTAGE_COLOR,
+            Self::Ratio => RATIO_COLOR,
+            Self::Fill => FILL_COLOR,
+            Self::Min => MIN_COLOR,
+            Self::Max => MAX_COLOR,
         };
         text.fg(tailwind::SLATE.c200).bg(color).into()
     }
@@ -282,59 +290,40 @@ impl SelectedTab {
 impl Widget for SelectedTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         match self {
-            SelectedTab::Fixed => self.render_fixed_example(area, buf),
-            SelectedTab::Length => self.render_length_example(area, buf),
-            SelectedTab::Percentage => self.render_percentage_example(area, buf),
-            SelectedTab::Ratio => self.render_ratio_example(area, buf),
-            SelectedTab::Proportional => self.render_proportional_example(area, buf),
-            SelectedTab::Min => self.render_min_example(area, buf),
-            SelectedTab::Max => self.render_max_example(area, buf),
+            Self::Length => Self::render_length_example(area, buf),
+            Self::Percentage => Self::render_percentage_example(area, buf),
+            Self::Ratio => Self::render_ratio_example(area, buf),
+            Self::Fill => Self::render_fill_example(area, buf),
+            Self::Min => Self::render_min_example(area, buf),
+            Self::Max => Self::render_max_example(area, buf),
         }
     }
 }
 
 impl SelectedTab {
-    fn render_fixed_example(&self, area: Rect, buf: &mut Buffer) {
-        let [example1, example2, example3, example4, _] =
-            area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 5]));
+    fn render_length_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, example3, _] =
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 4]).areas(area);
 
-        Example::new(&[Fixed(40), Proportional(0)]).render(example1, buf);
-        Example::new(&[Fixed(20), Fixed(20), Proportional(0)]).render(example2, buf);
-        Example::new(&[Fixed(20), Min(20), Max(20)]).render(example3, buf);
-        Example::new(&[
-            Length(20),
-            Percentage(20),
-            Ratio(1, 5),
-            Proportional(1),
-            Fixed(15),
-        ])
-        .render(example4, buf);
+        Example::new(&[Length(20), Length(20)]).render(example1, buf);
+        Example::new(&[Length(20), Min(20)]).render(example2, buf);
+        Example::new(&[Length(20), Max(20)]).render(example3, buf);
     }
 
-    fn render_length_example(&self, area: Rect, buf: &mut Buffer) {
-        let [example1, example2, example3, example4, _] =
-            area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 5]));
-
-        Example::new(&[Length(20), Fixed(20)]).render(example1, buf);
-        Example::new(&[Length(20), Length(20)]).render(example2, buf);
-        Example::new(&[Length(20), Min(20)]).render(example3, buf);
-        Example::new(&[Length(20), Max(20)]).render(example4, buf);
-    }
-
-    fn render_percentage_example(&self, area: Rect, buf: &mut Buffer) {
+    fn render_percentage_example(area: Rect, buf: &mut Buffer) {
         let [example1, example2, example3, example4, example5, _] =
-            area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 6]));
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
 
-        Example::new(&[Percentage(75), Proportional(0)]).render(example1, buf);
-        Example::new(&[Percentage(25), Proportional(0)]).render(example2, buf);
+        Example::new(&[Percentage(75), Fill(0)]).render(example1, buf);
+        Example::new(&[Percentage(25), Fill(0)]).render(example2, buf);
         Example::new(&[Percentage(50), Min(20)]).render(example3, buf);
         Example::new(&[Percentage(0), Max(0)]).render(example4, buf);
-        Example::new(&[Percentage(0), Proportional(0)]).render(example5, buf);
+        Example::new(&[Percentage(0), Fill(0)]).render(example5, buf);
     }
 
-    fn render_ratio_example(&self, area: Rect, buf: &mut Buffer) {
+    fn render_ratio_example(area: Rect, buf: &mut Buffer) {
         let [example1, example2, example3, example4, _] =
-            area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 5]));
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 5]).areas(area);
 
         Example::new(&[Ratio(1, 2); 2]).render(example1, buf);
         Example::new(&[Ratio(1, 4); 4]).render(example2, buf);
@@ -342,16 +331,16 @@ impl SelectedTab {
         Example::new(&[Ratio(1, 2), Percentage(25), Length(10)]).render(example4, buf);
     }
 
-    fn render_proportional_example(&self, area: Rect, buf: &mut Buffer) {
-        let [example1, example2, _] = area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 3]));
+    fn render_fill_example(area: Rect, buf: &mut Buffer) {
+        let [example1, example2, _] = Layout::vertical([Length(EXAMPLE_HEIGHT); 3]).areas(area);
 
-        Example::new(&[Proportional(1), Proportional(2), Proportional(3)]).render(example1, buf);
-        Example::new(&[Proportional(1), Percentage(50), Proportional(1)]).render(example2, buf);
+        Example::new(&[Fill(1), Fill(2), Fill(3)]).render(example1, buf);
+        Example::new(&[Fill(1), Percentage(50), Fill(1)]).render(example2, buf);
     }
 
-    fn render_min_example(&self, area: Rect, buf: &mut Buffer) {
+    fn render_min_example(area: Rect, buf: &mut Buffer) {
         let [example1, example2, example3, example4, example5, _] =
-            area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 6]));
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
 
         Example::new(&[Percentage(100), Min(0)]).render(example1, buf);
         Example::new(&[Percentage(100), Min(20)]).render(example2, buf);
@@ -360,9 +349,9 @@ impl SelectedTab {
         Example::new(&[Percentage(100), Min(80)]).render(example5, buf);
     }
 
-    fn render_max_example(&self, area: Rect, buf: &mut Buffer) {
+    fn render_max_example(area: Rect, buf: &mut Buffer) {
         let [example1, example2, example3, example4, example5, _] =
-            area.split(&Layout::vertical([Fixed(EXAMPLE_HEIGHT); 6]));
+            Layout::vertical([Length(EXAMPLE_HEIGHT); 6]).areas(area);
 
         Example::new(&[Percentage(0), Max(0)]).render(example1, buf);
         Example::new(&[Percentage(0), Max(20)]).render(example2, buf);
@@ -386,27 +375,23 @@ impl Example {
 
 impl Widget for Example {
     fn render(self, area: Rect, buf: &mut Buffer) {
-        let [area, _] = area.split(&Layout::vertical([
-            Fixed(ILLUSTRATION_HEIGHT),
-            Fixed(SPACER_HEIGHT),
-        ]));
+        let [area, _] =
+            Layout::vertical([Length(ILLUSTRATION_HEIGHT), Length(SPACER_HEIGHT)]).areas(area);
         let blocks = Layout::horizontal(&self.constraints).split(area);
 
         for (block, constraint) in blocks.iter().zip(&self.constraints) {
-            self.illustration(*constraint, block.width)
-                .render(*block, buf);
+            Self::illustration(*constraint, block.width).render(*block, buf);
         }
     }
 }
 
 impl Example {
-    fn illustration(&self, constraint: Constraint, width: u16) -> Paragraph {
+    fn illustration(constraint: Constraint, width: u16) -> impl Widget {
         let color = match constraint {
-            Constraint::Fixed(_) => FIXED_COLOR,
             Constraint::Length(_) => LENGTH_COLOR,
             Constraint::Percentage(_) => PERCENTAGE_COLOR,
             Constraint::Ratio(_, _) => RATIO_COLOR,
-            Constraint::Proportional(_) => PROPORTIONAL_COLOR,
+            Constraint::Fill(_) => FILL_COLOR,
             Constraint::Min(_) => MIN_COLOR,
             Constraint::Max(_) => MAX_COLOR,
         };
@@ -418,9 +403,7 @@ impl Example {
             .border_set(symbols::border::QUADRANT_OUTSIDE)
             .border_style(Style::reset().fg(color).reversed())
             .style(Style::default().fg(fg).bg(color));
-        Paragraph::new(text)
-            .alignment(Alignment::Center)
-            .block(block)
+        Paragraph::new(text).centered().block(block)
     }
 }
 
@@ -434,7 +417,7 @@ fn init_error_hooks() -> Result<()> {
     }))?;
     std::panic::set_hook(Box::new(move |info| {
         let _ = restore_terminal();
-        panic(info)
+        panic(info);
     }));
     Ok(())
 }

examples/custom_widget.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Custom Widget example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{error::Error, io, ops::ControlFlow, time::Duration};
 
 use crossterm::{
@@ -8,7 +23,7 @@ use crossterm::{
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{prelude::*, widgets::Paragraph};
 
 /// A custom widget that renders a button with a label, theme and state.
 #[derive(Debug, Clone)]
@@ -56,7 +71,7 @@ const GREEN: Theme = Theme {
 
 /// A button with a label that can be themed.
 impl<'a> Button<'a> {
-    pub fn new<T: Into<Line<'a>>>(label: T) -> Button<'a> {
+    pub fn new<T: Into<Line<'a>>>(label: T) -> Self {
         Button {
             label: label.into(),
             theme: BLUE,
@@ -64,18 +79,19 @@ impl<'a> Button<'a> {
         }
     }
 
-    pub fn theme(mut self, theme: Theme) -> Button<'a> {
+    pub const fn theme(mut self, theme: Theme) -> Self {
         self.theme = theme;
         self
     }
 
-    pub fn state(mut self, state: State) -> Button<'a> {
+    pub const fn state(mut self, state: State) -> Self {
         self.state = state;
         self
     }
 }
 
 impl<'a> Widget for Button<'a> {
+    #[allow(clippy::cast_possible_truncation)]
     fn render(self, area: Rect, buf: &mut Buffer) {
         let (background, text, shadow, highlight) = self.colors();
         buf.set_style(area, Style::new().bg(background).fg(text));
@@ -109,7 +125,7 @@ impl<'a> Widget for Button<'a> {
 }
 
 impl Button<'_> {
-    fn colors(&self) -> (Color, Color, Color, Color) {
+    const fn colors(&self) -> (Color, Color, Color, Color) {
         let theme = self.theme;
         match self.state {
             State::Normal => (theme.background, theme.text, theme.shadow, theme.highlight),
@@ -148,7 +164,7 @@ fn main() -> Result<(), Box<dyn Error>> {
 
 fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
     let mut selected_button: usize = 0;
-    let button_states = &mut [State::Selected, State::Normal, State::Normal];
+    let mut button_states = [State::Selected, State::Normal, State::Normal];
     loop {
         terminal.draw(|frame| ui(frame, button_states))?;
         if !event::poll(Duration::from_millis(100))? {
@@ -159,25 +175,27 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
                 if key.kind != event::KeyEventKind::Press {
                     continue;
                 }
-                if handle_key_event(key, button_states, &mut selected_button).is_break() {
+                if handle_key_event(key, &mut button_states, &mut selected_button).is_break() {
                     break;
                 }
             }
-            Event::Mouse(mouse) => handle_mouse_event(mouse, button_states, &mut selected_button),
+            Event::Mouse(mouse) => {
+                handle_mouse_event(mouse, &mut button_states, &mut selected_button);
+            }
             _ => (),
         }
     }
     Ok(())
 }
 
-fn ui(frame: &mut Frame, states: &[State; 3]) {
+fn ui(frame: &mut Frame, states: [State; 3]) {
     let vertical = Layout::vertical([
         Constraint::Length(1),
         Constraint::Max(3),
         Constraint::Length(1),
         Constraint::Min(0), // ignore remaining space
     ]);
-    let [title, buttons, help, _] = frame.size().split(&vertical);
+    let [title, buttons, help, _] = vertical.areas(frame.size());
 
     frame.render_widget(
         Paragraph::new("Custom Widget Example (mouse enabled)"),
@@ -187,14 +205,14 @@ fn ui(frame: &mut Frame, states: &[State; 3]) {
     frame.render_widget(Paragraph::new("←/→: select, Space: toggle, q: quit"), help);
 }
 
-fn render_buttons(frame: &mut Frame<'_>, area: Rect, states: &[State; 3]) {
+fn render_buttons(frame: &mut Frame<'_>, area: Rect, states: [State; 3]) {
     let horizontal = Layout::horizontal([
         Constraint::Length(15),
         Constraint::Length(15),
         Constraint::Length(15),
         Constraint::Min(0), // ignore remaining space
     ]);
-    let [red, green, blue, _] = area.split(&horizontal);
+    let [red, green, blue, _] = horizontal.areas(area);
 
     frame.render_widget(Button::new("Red").theme(RED).state(states[0]), red);
     frame.render_widget(Button::new("Green").theme(GREEN).state(states[1]), green);

examples/demo/app.rs

@@ -2,7 +2,7 @@ use rand::{
     distributions::{Distribution, Uniform},
     rngs::ThreadRng,
 };
-use ratatui::widgets::*;
+use ratatui::widgets::ListState;
 
 const TASKS: [&str; 24] = [
     "Item1", "Item2", "Item3", "Item4", "Item5", "Item6", "Item7", "Item8", "Item9", "Item10",
@@ -73,8 +73,8 @@ pub struct RandomSignal {
 }
 
 impl RandomSignal {
-    pub fn new(lower: u64, upper: u64) -> RandomSignal {
-        RandomSignal {
+    pub fn new(lower: u64, upper: u64) -> Self {
+        Self {
             distribution: Uniform::new(lower, upper),
             rng: rand::thread_rng(),
         }
@@ -97,8 +97,8 @@ pub struct SinSignal {
 }
 
 impl SinSignal {
-    pub fn new(interval: f64, period: f64, scale: f64) -> SinSignal {
-        SinSignal {
+    pub const fn new(interval: f64, period: f64, scale: f64) -> Self {
+        Self {
             x: 0.0,
             interval,
             period,
@@ -144,8 +144,8 @@ pub struct StatefulList<T> {
 }
 
 impl<T> StatefulList<T> {
-    pub fn with_items(items: Vec<T>) -> StatefulList<T> {
-        StatefulList {
+    pub fn with_items(items: Vec<T>) -> Self {
+        Self {
             state: ListState::default(),
             items,
         }
@@ -191,9 +191,7 @@ where
     S: Iterator,
 {
     fn on_tick(&mut self) {
-        for _ in 0..self.tick_rate {
-            self.points.remove(0);
-        }
+        self.points.drain(0..self.tick_rate);
         self.points
             .extend(self.source.by_ref().take(self.tick_rate));
     }
@@ -237,7 +235,7 @@ pub struct App<'a> {
 }
 
 impl<'a> App<'a> {
-    pub fn new(title: &'a str, enhanced_graphics: bool) -> App<'a> {
+    pub fn new(title: &'a str, enhanced_graphics: bool) -> Self {
         let mut rand_signal = RandomSignal::new(0, 100);
         let sparkline_points = rand_signal.by_ref().take(300).collect();
         let mut sin_signal = SinSignal::new(0.2, 3.0, 18.0);

examples/demo/main.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Original Demo example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{error::Error, time::Duration};
 
 use argh::FromArgs;

examples/demo/termwiz.rs

@@ -4,7 +4,10 @@ use std::{
 };
 
 use ratatui::prelude::*;
-use termwiz::{input::*, terminal::Terminal as TermwizTerminal};
+use termwiz::{
+    input::{InputEvent, KeyCode},
+    terminal::Terminal as TermwizTerminal,
+};
 
 use crate::{app::App, ui};
 

examples/demo/ui.rs

@@ -1,3 +1,4 @@
+#[allow(clippy::wildcard_imports)]
 use ratatui::{
     prelude::*,
     widgets::{canvas::*, *},
@@ -85,6 +86,7 @@ fn draw_gauges(f: &mut Frame, app: &mut App, area: Rect) {
     f.render_widget(line_gauge, chunks[2]);
 }
 
+#[allow(clippy::too_many_lines)]
 fn draw_charts(f: &mut Frame, app: &mut App, area: Rect) {
     let constraints = if app.show_chart {
         vec![Constraint::Percentage(50), Constraint::Percentage(50)]

examples/demo2/app.rs

@@ -1,252 +1,222 @@
 use std::time::Duration;
 
-use anyhow::{Context, Result};
-use crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind, KeyModifiers};
-use rand::Rng;
-use rand_chacha::rand_core::SeedableRng;
-use ratatui::{buffer::Cell, layout::Flex, prelude::*, widgets::Widget};
-use unicode_width::UnicodeWidthStr;
+use color_eyre::{eyre::Context, Result};
+use crossterm::event::{Event, KeyCode, KeyEvent, KeyEventKind};
+use itertools::Itertools;
+use ratatui::{prelude::*, widgets::*};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
 
-use crate::{
-    big_text::{BigTextBuilder, PixelSize},
-    Root, Term,
-};
+use crate::{destroy, tabs::*, term, THEME};
 
-#[derive(Debug)]
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 pub struct App {
-    term: Term,
-    context: AppContext,
     mode: Mode,
+    tab: Tab,
+    about_tab: AboutTab,
+    recipe_tab: RecipeTab,
+    email_tab: EmailTab,
+    traceroute_tab: TracerouteTab,
+    weather_tab: WeatherTab,
 }
 
 #[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 enum Mode {
     #[default]
-    Normal,
+    Running,
     Destroy,
     Quit,
 }
 
-#[derive(Debug, Default, Clone, Copy)]
-pub struct AppContext {
-    pub tab_index: usize,
-    pub row_index: usize,
+#[derive(Debug, Clone, Copy, Default, Display, EnumIter, FromRepr, PartialEq, Eq)]
+enum Tab {
+    #[default]
+    About,
+    Recipe,
+    Email,
+    Traceroute,
+    Weather,
+}
+
+pub fn run(terminal: &mut Terminal<impl Backend>) -> Result<()> {
+    App::new().run(terminal)
 }
 
 impl App {
-    fn new() -> Result<Self> {
-        Ok(Self {
-            term: Term::start()?,
-            context: AppContext::default(),
-            mode: Mode::Normal,
-        })
+    pub fn new() -> Self {
+        Self::default()
     }
 
-    pub fn run() -> Result<()> {
-        install_panic_hook();
-        let mut app = Self::new()?;
-        while !app.should_quit() {
-            app.draw()?;
-            app.handle_events()?;
+    /// Run the app until the user quits.
+    pub fn run(&mut self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        while self.is_running() {
+            self.draw(terminal)?;
+            self.handle_events()?;
         }
-        Term::stop()?;
         Ok(())
     }
 
-    fn draw(&mut self) -> Result<()> {
-        self.term
+    fn is_running(&self) -> bool {
+        self.mode != Mode::Quit
+    }
+
+    /// Draw a single frame of the app.
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal
             .draw(|frame| {
-                frame.render_widget(Root::new(&self.context), frame.size());
+                frame.render_widget(self, frame.size());
                 if self.mode == Mode::Destroy {
-                    destroy(frame);
+                    destroy::destroy(frame);
                 }
             })
-            .context("terminal.draw")?;
+            .wrap_err("terminal.draw")?;
         Ok(())
     }
 
+    /// Handle events from the terminal.
+    ///
+    /// This function is called once per frame, The events are polled from the stdin with timeout of
+    /// 1/50th of a second. This was chosen to try to match the default frame rate of a GIF in VHS.
     fn handle_events(&mut self) -> Result<()> {
-        // https://superuser.com/questions/1449366/do-60-fps-gifs-actually-exist-or-is-the-maximum-50-fps
-        const GIF_FRAME_RATE: f64 = 50.0;
-        match Term::next_event(Duration::from_secs_f64(1.0 / GIF_FRAME_RATE))? {
-            Some(Event::Key(key)) => self.handle_key_event(key),
-            Some(Event::Resize(width, height)) => {
-                Ok(self.term.resize(Rect::new(0, 0, width, height))?)
-            }
-            _ => Ok(()),
+        let timeout = Duration::from_secs_f64(1.0 / 50.0);
+        match term::next_event(timeout)? {
+            Some(Event::Key(key)) if key.kind == KeyEventKind::Press => self.handle_key_press(key),
+            _ => {}
         }
+        Ok(())
     }
 
-    fn handle_key_event(&mut self, key: KeyEvent) -> Result<()> {
-        if key.kind != KeyEventKind::Press {
-            return Ok(());
-        }
-
-        let context = &mut self.context;
-        const TAB_COUNT: usize = 5;
+    fn handle_key_press(&mut self, key: KeyEvent) {
+        use KeyCode::*;
         match key.code {
-            KeyCode::Char('q') | KeyCode::Esc => {
-                self.mode = Mode::Quit;
-            }
-            KeyCode::Tab | KeyCode::BackTab if key.modifiers.contains(KeyModifiers::SHIFT) => {
-                let tab_index = context.tab_index + TAB_COUNT; // to wrap around properly
-                context.tab_index = tab_index.saturating_sub(1) % TAB_COUNT;
-                context.row_index = 0;
-            }
-            KeyCode::Tab | KeyCode::BackTab => {
-                context.tab_index = context.tab_index.saturating_add(1) % TAB_COUNT;
-                context.row_index = 0;
-            }
-            KeyCode::Up | KeyCode::Char('k') => {
-                context.row_index = context.row_index.saturating_sub(1);
-            }
-            KeyCode::Down | KeyCode::Char('j') => {
-                context.row_index = context.row_index.saturating_add(1);
-            }
-            KeyCode::Char('d') => {
-                self.mode = Mode::Destroy;
-            }
+            Char('q') | Esc => self.mode = Mode::Quit,
+            Char('h') | Left => self.prev_tab(),
+            Char('l') | Right => self.next_tab(),
+            Char('k') | Up => self.prev(),
+            Char('j') | Down => self.next(),
+            Char('d') | Delete => self.destroy(),
             _ => {}
         };
-        Ok(())
     }
 
-    fn should_quit(&self) -> bool {
-        self.mode == Mode::Quit
+    fn prev(&mut self) {
+        match self.tab {
+            Tab::About => self.about_tab.prev_row(),
+            Tab::Recipe => self.recipe_tab.prev(),
+            Tab::Email => self.email_tab.prev(),
+            Tab::Traceroute => self.traceroute_tab.prev_row(),
+            Tab::Weather => self.weather_tab.prev(),
+        }
+    }
+
+    fn next(&mut self) {
+        match self.tab {
+            Tab::About => self.about_tab.next_row(),
+            Tab::Recipe => self.recipe_tab.next(),
+            Tab::Email => self.email_tab.next(),
+            Tab::Traceroute => self.traceroute_tab.next_row(),
+            Tab::Weather => self.weather_tab.next(),
+        }
+    }
+
+    fn prev_tab(&mut self) {
+        self.tab = self.tab.prev();
+    }
+
+    fn next_tab(&mut self) {
+        self.tab = self.tab.next();
+    }
+
+    fn destroy(&mut self) {
+        self.mode = Mode::Destroy;
     }
 }
 
-/// delay the start of the animation so it doesn't start immediately
-const DELAY: usize = 240;
-/// higher means more pixels per frame are modified in the animation
-const DRIP_SPEED: usize = 50;
-/// delay the start of the text animation so it doesn't start immediately after the initial delay
-const TEXT_DELAY: usize = 240;
+/// Implement Widget for &App rather than for App as we would otherwise have to clone or copy the
+/// entire app state on every frame. For this example, the app state is small enough that it doesn't
+/// matter, but for larger apps this can be a significant performance improvement.
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let vertical = Layout::vertical([
+            Constraint::Length(1),
+            Constraint::Min(0),
+            Constraint::Length(1),
+        ]);
+        let [title_bar, tab, bottom_bar] = vertical.areas(area);
 
-/// Destroy mode activated by pressing `d`
-fn destroy(frame: &mut Frame<'_>) {
-    let frame_count = frame.count().saturating_sub(DELAY);
-    if frame_count == 0 {
-        return;
+        Block::new().style(THEME.root).render(area, buf);
+        self.render_title_bar(title_bar, buf);
+        self.render_selected_tab(tab, buf);
+        App::render_bottom_bar(bottom_bar, buf);
     }
-
-    let area = frame.size();
-    let buf = frame.buffer_mut();
-
-    drip(frame_count, area, buf);
-    text(frame_count, area, buf);
 }
 
-/// Move a bunch of random pixels down one row.
-///
-/// Each pick some random pixels and move them each down one row. This is a very inefficient way to
-/// do this, but it works well enough for this demo.
-fn drip(frame_count: usize, area: Rect, buf: &mut Buffer) {
-    // a seeded rng as we have to move the same random pixels each frame
-    let mut rng = rand_chacha::ChaCha8Rng::seed_from_u64(10);
-    let ramp_frames = 450;
-    let fractional_speed = frame_count as f64 / ramp_frames as f64;
-    let variable_speed = DRIP_SPEED as f64 * fractional_speed * fractional_speed * fractional_speed;
-    let pixel_count = (frame_count as f64 * variable_speed).floor() as usize;
-    for _ in 0..pixel_count {
-        let src_x = rng.gen_range(0..area.width);
-        let src_y = rng.gen_range(1..area.height - 2);
-        let src = buf.get_mut(src_x, src_y).clone();
-        // 1% of the time, move a blank or pixel (10:1) to the top line of the screen
-        if rng.gen_ratio(1, 100) {
-            let dest_x = rng
-                .gen_range(src_x.saturating_sub(5)..src_x.saturating_add(5))
-                .clamp(area.left(), area.right() - 1);
-            let dest_y = area.top() + 1;
+impl App {
+    fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
+        let layout = Layout::horizontal([Constraint::Min(0), Constraint::Length(43)]);
+        let [title, tabs] = layout.areas(area);
 
-            let dest = buf.get_mut(dest_x, dest_y);
-            // copy the cell to the new location about 1/10 of the time blank out the cell the rest
-            // of the time. This has the effect of gradually removing the pixels from the screen.
-            if rng.gen_ratio(1, 10) {
-                *dest = src;
-            } else {
-                *dest = Cell::default();
-            }
-        } else {
-            // move the pixel down one row
-            let dest_x = src_x;
-            let dest_y = src_y.saturating_add(1).min(area.bottom() - 2);
-            // copy the cell to the new location
-            let dest = buf.get_mut(dest_x, dest_y);
-            *dest = src;
+        Span::styled("Ratatui", THEME.app_title).render(title, buf);
+        let titles = Tab::iter().map(Tab::title);
+        Tabs::new(titles)
+            .style(THEME.tabs)
+            .highlight_style(THEME.tabs_selected)
+            .select(self.tab as usize)
+            .divider("")
+            .padding("", "")
+            .render(tabs, buf);
+    }
+
+    fn render_selected_tab(&self, area: Rect, buf: &mut Buffer) {
+        match self.tab {
+            Tab::About => self.about_tab.render(area, buf),
+            Tab::Recipe => self.recipe_tab.render(area, buf),
+            Tab::Email => self.email_tab.render(area, buf),
+            Tab::Traceroute => self.traceroute_tab.render(area, buf),
+            Tab::Weather => self.weather_tab.render(area, buf),
+        };
+    }
+
+    fn render_bottom_bar(area: Rect, buf: &mut Buffer) {
+        let keys = [
+            ("H/←", "Left"),
+            ("L/→", "Right"),
+            ("K/↑", "Up"),
+            ("J/↓", "Down"),
+            ("D/Del", "Destroy"),
+            ("Q/Esc", "Quit"),
+        ];
+        let spans = keys
+            .iter()
+            .flat_map(|(key, desc)| {
+                let key = Span::styled(format!(" {key} "), THEME.key_binding.key);
+                let desc = Span::styled(format!(" {desc} "), THEME.key_binding.description);
+                [key, desc]
+            })
+            .collect_vec();
+        Line::from(spans)
+            .centered()
+            .style((Color::Indexed(236), Color::Indexed(232)))
+            .render(area, buf);
+    }
+}
+
+impl Tab {
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+
+    fn prev(self) -> Self {
+        let current_index = self as usize;
+        let prev_index = current_index.saturating_sub(1);
+        Self::from_repr(prev_index).unwrap_or(self)
+    }
+
+    fn title(self) -> String {
+        match self {
+            Self::About => String::new(),
+            tab => format!(" {tab} "),
         }
     }
 }
-
-/// draw some text fading in and out from black to red and back
-fn text(frame_count: usize, area: Rect, buf: &mut Buffer) {
-    let sub_frame = frame_count.saturating_sub(TEXT_DELAY);
-    if sub_frame == 0 {
-        return;
-    }
-
-    let line = "RATATUI";
-    let big_text = BigTextBuilder::default()
-        .lines([line.into()])
-        .pixel_size(PixelSize::Full)
-        .style(Style::new().fg(Color::Rgb(255, 0, 0)))
-        .build()
-        .unwrap();
-
-    // the font size is 8x8 for each character and we have 1 line
-    let area = centered_rect(area, line.width() as u16 * 8, 8);
-
-    let mask_buf = &mut Buffer::empty(area);
-    big_text.render(area, mask_buf);
-
-    let percentage = (sub_frame as f64 / 480.0).clamp(0.0, 1.0);
-
-    for row in area.rows() {
-        for col in row.columns() {
-            let cell = buf.get_mut(col.x, col.y);
-            let mask_cell = mask_buf.get(col.x, col.y);
-            cell.set_symbol(mask_cell.symbol());
-
-            // blend the mask cell color with the cell color
-            let cell_color = cell.style().bg.unwrap_or(Color::Rgb(0, 0, 0));
-            let mask_color = mask_cell.style().fg.unwrap_or(Color::Rgb(255, 0, 0));
-
-            let color = blend(mask_color, cell_color, percentage);
-            cell.set_style(Style::new().fg(color));
-        }
-    }
-}
-
-fn blend(mask_color: Color, cell_color: Color, percentage: f64) -> Color {
-    let Color::Rgb(mask_red, mask_green, mask_blue) = mask_color else {
-        return mask_color;
-    };
-    let Color::Rgb(cell_red, cell_green, cell_blue) = cell_color else {
-        return mask_color;
-    };
-
-    let red = mask_red as f64 * percentage + cell_red as f64 * (1.0 - percentage);
-    let green = mask_green as f64 * percentage + cell_green as f64 * (1.0 - percentage);
-    let blue = mask_blue as f64 * percentage + cell_blue as f64 * (1.0 - percentage);
-
-    Color::Rgb(red as u8, green as u8, blue as u8)
-}
-
-/// a centered rect of the given size
-fn centered_rect(area: Rect, width: u16, height: u16) -> Rect {
-    let horizontal = Layout::horizontal([width]).flex(Flex::Center);
-    let vertical = Layout::vertical([height]).flex(Flex::Center);
-    let [area] = area.split(&vertical);
-    let [area] = area.split(&horizontal);
-    area
-}
-
-pub fn install_panic_hook() {
-    better_panic::install();
-    let hook = std::panic::take_hook();
-    std::panic::set_hook(Box::new(move |info| {
-        let _ = Term::stop();
-        hook(info);
-        std::process::exit(1);
-    }));
-}

examples/demo2/big_text.rs

@@ -50,7 +50,7 @@ use std::cmp::min;
 
 use derive_builder::Builder;
 use font8x8::UnicodeFonts;
-use ratatui::{prelude::*, text::StyledGrapheme, widgets::Widget};
+use ratatui::{prelude::*, text::StyledGrapheme};
 
 #[allow(unused)]
 #[derive(Debug, Clone, Copy, Eq, PartialEq, Hash, Default)]
@@ -129,24 +129,24 @@ pub struct BigText<'a> {
 
     /// The size of single glyphs
     ///
-    /// Defaults to `BigTextSize::default()` (=> BigTextSize::Full)
+    /// Defaults to `BigTextSize::default()` (=> `BigTextSize::Full`)
     #[builder(default)]
     pixel_size: PixelSize,
 }
 
 impl Widget for BigText<'_> {
     fn render(self, area: Rect, buf: &mut Buffer) {
-        let layout = layout(area, &self.pixel_size);
+        let layout = layout(area, self.pixel_size);
         for (line, line_layout) in self.lines.iter().zip(layout) {
             for (g, cell) in line.styled_graphemes(self.style).zip(line_layout) {
-                render_symbol(g, cell, buf, &self.pixel_size);
+                render_symbol(&g, cell, buf, self.pixel_size);
             }
         }
     }
 }
 
 /// Returns how many cells are needed to display a full 8x8 glyphe using the given font size
-fn cells_per_glyph(size: &PixelSize) -> (u16, u16) {
+const fn cells_per_glyph(size: PixelSize) -> (u16, u16) {
     match size {
         PixelSize::Full => (8, 8),
         PixelSize::HalfHeight => (8, 4),
@@ -160,7 +160,7 @@ fn cells_per_glyph(size: &PixelSize) -> (u16, u16) {
 /// The size of each cell depends on given font size
 fn layout(
     area: Rect,
-    pixel_size: &PixelSize,
+    pixel_size: PixelSize,
 ) -> impl IntoIterator<Item = impl IntoIterator<Item = Rect>> {
     let (width, height) = cells_per_glyph(pixel_size);
     (area.top()..area.bottom())
@@ -178,7 +178,7 @@ fn layout(
 
 /// Render a single grapheme into a cell by looking up the corresponding 8x8 bitmap in the
 /// `BITMAPS` array and setting the corresponding cells in the buffer.
-fn render_symbol(grapheme: StyledGrapheme, area: Rect, buf: &mut Buffer, pixel_size: &PixelSize) {
+fn render_symbol(grapheme: &StyledGrapheme, area: Rect, buf: &mut Buffer, pixel_size: PixelSize) {
     buf.set_style(area, grapheme.style);
     let c = grapheme.symbol.chars().next().unwrap(); // TODO: handle multi-char graphemes
     if let Some(glyph) = font8x8::BASIC_FONTS.get(c) {
@@ -187,7 +187,7 @@ fn render_symbol(grapheme: StyledGrapheme, area: Rect, buf: &mut Buffer, pixel_s
 }
 
 /// Get the correct unicode symbol for two vertical "pixels"
-fn get_symbol_half_height(top: u8, bottom: u8) -> char {
+const fn get_symbol_half_height(top: u8, bottom: u8) -> char {
     match top {
         0 => match bottom {
             0 => ' ',
@@ -201,7 +201,7 @@ fn get_symbol_half_height(top: u8, bottom: u8) -> char {
 }
 
 /// Get the correct unicode symbol for two horizontal "pixels"
-fn get_symbol_half_width(left: u8, right: u8) -> char {
+const fn get_symbol_half_width(left: u8, right: u8) -> char {
     match left {
         0 => match right {
             0 => ' ',
@@ -215,20 +215,26 @@ fn get_symbol_half_width(left: u8, right: u8) -> char {
 }
 
 /// Get the correct unicode symbol for 2x2 "pixels"
-fn get_symbol_half_size(top_left: u8, top_right: u8, bottom_left: u8, bottom_right: u8) -> char {
-    let top_left = if top_left > 0 { 1 } else { 0 };
-    let top_right = if top_right > 0 { 1 } else { 0 };
-    let bottom_left = if bottom_left > 0 { 1 } else { 0 };
-    let bottom_right = if bottom_right > 0 { 1 } else { 0 };
-
+const fn get_symbol_half_size(
+    top_left: u8,
+    top_right: u8,
+    bottom_left: u8,
+    bottom_right: u8,
+) -> char {
     const QUADRANT_SYMBOLS: [char; 16] = [
         ' ', '▘', '▝', '▀', '▖', '▌', '▞', '▛', '▗', '▚', '▐', '▜', '▄', '▙', '▟', '█',
     ];
-    QUADRANT_SYMBOLS[top_left + (top_right << 1) + (bottom_left << 2) + (bottom_right << 3)]
+
+    let top_left = if top_left > 0 { 1 } else { 0 };
+    let top_right = if top_right > 0 { 1 << 1 } else { 0 };
+    let bottom_left = if bottom_left > 0 { 1 << 2 } else { 0 };
+    let bottom_right = if bottom_right > 0 { 1 << 3 } else { 0 };
+
+    QUADRANT_SYMBOLS[top_left + top_right + bottom_left + bottom_right]
 }
 
 /// Render a single 8x8 glyph into a cell by setting the corresponding cells in the buffer.
-fn render_glyph(glyph: [u8; 8], area: Rect, buf: &mut Buffer, pixel_size: &PixelSize) {
+fn render_glyph(glyph: [u8; 8], area: Rect, buf: &mut Buffer, pixel_size: PixelSize) {
     let (width, height) = cells_per_glyph(pixel_size);
 
     let glyph_vertical_index = (0..glyph.len()).step_by(8 / height as usize);

examples/demo2/colors.rs

@@ -1,5 +1,5 @@
 use palette::{IntoColor, Okhsv, Srgb};
-use ratatui::{prelude::*, widgets::*};
+use ratatui::prelude::*;
 
 /// A widget that renders a color swatch of RGB colors.
 ///
@@ -9,13 +9,14 @@ use ratatui::{prelude::*, widgets::*};
 pub struct RgbSwatch;
 
 impl Widget for RgbSwatch {
+    #[allow(clippy::cast_precision_loss, clippy::similar_names)]
     fn render(self, area: Rect, buf: &mut Buffer) {
         for (yi, y) in (area.top()..area.bottom()).enumerate() {
-            let value = area.height as f32 - yi as f32;
-            let value_fg = value / (area.height as f32);
-            let value_bg = (value - 0.5) / (area.height as f32);
+            let value = f32::from(area.height) - yi as f32;
+            let value_fg = value / f32::from(area.height);
+            let value_bg = (value - 0.5) / f32::from(area.height);
             for (xi, x) in (area.left()..area.right()).enumerate() {
-                let hue = xi as f32 * 360.0 / area.width as f32;
+                let hue = xi as f32 * 360.0 / f32::from(area.width);
                 let fg = color_from_oklab(hue, Okhsv::max_saturation(), value_fg);
                 let bg = color_from_oklab(hue, Okhsv::max_saturation(), value_bg);
                 buf.get_mut(x, y).set_char('▀').set_fg(fg).set_bg(bg);
@@ -24,7 +25,7 @@ impl Widget for RgbSwatch {
     }
 }
 
-/// Convert a hue and value into an RGB color via the OkLab color space.
+/// Convert a hue and value into an RGB color via the Oklab color space.
 ///
 /// See <https://bottosson.github.io/posts/oklab/> for more details.
 pub fn color_from_oklab(hue: f32, saturation: f32, value: f32) -> Color {

examples/demo2/destroy.rs

@@ -0,0 +1,140 @@
+use rand::Rng;
+use rand_chacha::rand_core::SeedableRng;
+use ratatui::{buffer::Cell, layout::Flex, prelude::*};
+use unicode_width::UnicodeWidthStr;
+
+use crate::big_text::{BigTextBuilder, PixelSize};
+
+/// delay the start of the animation so it doesn't start immediately
+const DELAY: usize = 240;
+/// higher means more pixels per frame are modified in the animation
+const DRIP_SPEED: usize = 50;
+/// delay the start of the text animation so it doesn't start immediately after the initial delay
+const TEXT_DELAY: usize = 240;
+
+/// Destroy mode activated by pressing `d`
+pub fn destroy(frame: &mut Frame<'_>) {
+    let frame_count = frame.count().saturating_sub(DELAY);
+    if frame_count == 0 {
+        return;
+    }
+
+    let area = frame.size();
+    let buf = frame.buffer_mut();
+
+    drip(frame_count, area, buf);
+    text(frame_count, area, buf);
+}
+
+/// Move a bunch of random pixels down one row.
+///
+/// Each pick some random pixels and move them each down one row. This is a very inefficient way to
+/// do this, but it works well enough for this demo.
+#[allow(
+    clippy::cast_possible_truncation,
+    clippy::cast_precision_loss,
+    clippy::cast_sign_loss
+)]
+fn drip(frame_count: usize, area: Rect, buf: &mut Buffer) {
+    // a seeded rng as we have to move the same random pixels each frame
+    let mut rng = rand_chacha::ChaCha8Rng::seed_from_u64(10);
+    let ramp_frames = 450;
+    let fractional_speed = frame_count as f64 / f64::from(ramp_frames);
+    let variable_speed = DRIP_SPEED as f64 * fractional_speed * fractional_speed * fractional_speed;
+    let pixel_count = (frame_count as f64 * variable_speed).floor() as usize;
+    for _ in 0..pixel_count {
+        let src_x = rng.gen_range(0..area.width);
+        let src_y = rng.gen_range(1..area.height - 2);
+        let src = buf.get_mut(src_x, src_y).clone();
+        // 1% of the time, move a blank or pixel (10:1) to the top line of the screen
+        if rng.gen_ratio(1, 100) {
+            let dest_x = rng
+                .gen_range(src_x.saturating_sub(5)..src_x.saturating_add(5))
+                .clamp(area.left(), area.right() - 1);
+            let dest_y = area.top() + 1;
+
+            let dest = buf.get_mut(dest_x, dest_y);
+            // copy the cell to the new location about 1/10 of the time blank out the cell the rest
+            // of the time. This has the effect of gradually removing the pixels from the screen.
+            if rng.gen_ratio(1, 10) {
+                *dest = src;
+            } else {
+                *dest = Cell::default();
+            }
+        } else {
+            // move the pixel down one row
+            let dest_x = src_x;
+            let dest_y = src_y.saturating_add(1).min(area.bottom() - 2);
+            // copy the cell to the new location
+            let dest = buf.get_mut(dest_x, dest_y);
+            *dest = src;
+        }
+    }
+}
+
+/// draw some text fading in and out from black to red and back
+#[allow(clippy::cast_possible_truncation, clippy::cast_precision_loss)]
+fn text(frame_count: usize, area: Rect, buf: &mut Buffer) {
+    let sub_frame = frame_count.saturating_sub(TEXT_DELAY);
+    if sub_frame == 0 {
+        return;
+    }
+
+    let line = "RATATUI";
+    let big_text = BigTextBuilder::default()
+        .lines([line.into()])
+        .pixel_size(PixelSize::Full)
+        .style(Style::new().fg(Color::Rgb(255, 0, 0)))
+        .build()
+        .unwrap();
+
+    // the font size is 8x8 for each character and we have 1 line
+    let area = centered_rect(area, line.width() as u16 * 8, 8);
+
+    let mask_buf = &mut Buffer::empty(area);
+    big_text.render(area, mask_buf);
+
+    let percentage = (sub_frame as f64 / 480.0).clamp(0.0, 1.0);
+
+    for row in area.rows() {
+        for col in row.columns() {
+            let cell = buf.get_mut(col.x, col.y);
+            let mask_cell = mask_buf.get(col.x, col.y);
+            cell.set_symbol(mask_cell.symbol());
+
+            // blend the mask cell color with the cell color
+            let cell_color = cell.style().bg.unwrap_or(Color::Rgb(0, 0, 0));
+            let mask_color = mask_cell.style().fg.unwrap_or(Color::Rgb(255, 0, 0));
+
+            let color = blend(mask_color, cell_color, percentage);
+            cell.set_style(Style::new().fg(color));
+        }
+    }
+}
+
+fn blend(mask_color: Color, cell_color: Color, percentage: f64) -> Color {
+    let Color::Rgb(mask_red, mask_green, mask_blue) = mask_color else {
+        return mask_color;
+    };
+    let Color::Rgb(cell_red, cell_green, cell_blue) = cell_color else {
+        return mask_color;
+    };
+
+    let remain = 1.0 - percentage;
+
+    let red = f64::from(mask_red).mul_add(percentage, f64::from(cell_red) * remain);
+    let green = f64::from(mask_green).mul_add(percentage, f64::from(cell_green) * remain);
+    let blue = f64::from(mask_blue).mul_add(percentage, f64::from(cell_blue) * remain);
+
+    #[allow(clippy::cast_possible_truncation, clippy::cast_sign_loss)]
+    Color::Rgb(red as u8, green as u8, blue as u8)
+}
+
+/// a centered rect of the given size
+fn centered_rect(area: Rect, width: u16, height: u16) -> Rect {
+    let horizontal = Layout::horizontal([width]).flex(Flex::Center);
+    let vertical = Layout::vertical([height]).flex(Flex::Center);
+    let [area] = vertical.areas(area);
+    let [area] = horizontal.areas(area);
+    area
+}

examples/demo2/errors.rs

@@ -0,0 +1,18 @@
+use color_eyre::{config::HookBuilder, Result};
+
+use crate::term;
+
+pub fn init_hooks() -> Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = term::restore();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = term::restore();
+        panic(info);
+    }));
+    Ok(())
+}

examples/demo2/main.rs

@@ -1,18 +1,45 @@
-use anyhow::Result;
-pub use app::*;
-pub use colors::*;
-pub use root::*;
-pub use term::*;
-pub use theme::*;
+//! # [Ratatui] Demo2 example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(
+    clippy::enum_glob_use,
+    clippy::missing_errors_doc,
+    clippy::module_name_repetitions,
+    clippy::must_use_candidate,
+    clippy::wildcard_imports
+)]
 
 mod app;
 mod big_text;
 mod colors;
-mod root;
+mod destroy;
+mod errors;
 mod tabs;
 mod term;
 mod theme;
 
+pub use app::*;
+use color_eyre::Result;
+pub use colors::*;
+pub use term::*;
+pub use theme::*;
+
 fn main() -> Result<()> {
-    App::run()
+    errors::init_hooks()?;
+    let terminal = &mut term::init()?;
+    App::new().run(terminal)?;
+    term::restore()?;
+    Ok(())
 }

examples/demo2/root.rs

@@ -1,79 +0,0 @@
-use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
-
-use crate::{tabs::*, AppContext, THEME};
-
-pub struct Root<'a> {
-    context: &'a AppContext,
-}
-
-impl<'a> Root<'a> {
-    pub fn new(context: &'a AppContext) -> Self {
-        Root { context }
-    }
-}
-
-impl Widget for Root<'_> {
-    fn render(self, area: Rect, buf: &mut Buffer) {
-        Block::new().style(THEME.root).render(area, buf);
-        let vertical = Layout::vertical([
-            Constraint::Length(1),
-            Constraint::Min(0),
-            Constraint::Length(1),
-        ]);
-        let [title_bar, tab, bottom_bar] = area.split(&vertical);
-        self.render_title_bar(title_bar, buf);
-        self.render_selected_tab(tab, buf);
-        self.render_bottom_bar(bottom_bar, buf);
-    }
-}
-
-impl Root<'_> {
-    fn render_title_bar(&self, area: Rect, buf: &mut Buffer) {
-        let horizontal = Layout::horizontal([Constraint::Min(0), Constraint::Length(45)]);
-        let [title, tabs] = area.split(&horizontal);
-
-        Paragraph::new(Span::styled("Ratatui", THEME.app_title)).render(title, buf);
-        let titles = vec!["", " Recipe ", " Email ", " Traceroute ", " Weather "];
-        Tabs::new(titles)
-            .style(THEME.tabs)
-            .highlight_style(THEME.tabs_selected)
-            .select(self.context.tab_index)
-            .divider("")
-            .render(tabs, buf);
-    }
-
-    fn render_selected_tab(&self, area: Rect, buf: &mut Buffer) {
-        let row_index = self.context.row_index;
-        match self.context.tab_index {
-            0 => AboutTab::new(row_index).render(area, buf),
-            1 => RecipeTab::new(row_index).render(area, buf),
-            2 => EmailTab::new(row_index).render(area, buf),
-            3 => TracerouteTab::new(row_index).render(area, buf),
-            4 => WeatherTab::new(row_index).render(area, buf),
-            _ => unreachable!(),
-        };
-    }
-
-    fn render_bottom_bar(&self, area: Rect, buf: &mut Buffer) {
-        let keys = [
-            ("Q/Esc", "Quit"),
-            ("Tab", "Next Tab"),
-            ("↑/k", "Up"),
-            ("↓/j", "Down"),
-        ];
-        let spans = keys
-            .iter()
-            .flat_map(|(key, desc)| {
-                let key = Span::styled(format!(" {} ", key), THEME.key_binding.key);
-                let desc = Span::styled(format!(" {} ", desc), THEME.key_binding.description);
-                [key, desc]
-            })
-            .collect_vec();
-        Paragraph::new(Line::from(spans))
-            .alignment(Alignment::Center)
-            .fg(Color::Indexed(236))
-            .bg(Color::Indexed(232))
-            .render(area, buf);
-    }
-}

examples/demo2/tabs/about.rs

@@ -38,13 +38,18 @@ const RATATUI_LOGO: [&str; 32] = [
     "  █xxxxxxxxxxxxxxxxxxxxx█ █     ",
 ];
 
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct AboutTab {
-    selected_row: usize,
+    row_index: usize,
 }
 
 impl AboutTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self { selected_row }
+    pub fn prev_row(&mut self) {
+        self.row_index = self.row_index.saturating_sub(1);
+    }
+
+    pub fn next_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(1);
     }
 }
 
@@ -52,9 +57,9 @@ impl Widget for AboutTab {
     fn render(self, area: Rect, buf: &mut Buffer) {
         RgbSwatch.render(area, buf);
         let horizontal = Layout::horizontal([Constraint::Length(34), Constraint::Min(0)]);
-        let [description, logo] = area.split(&horizontal);
+        let [description, logo] = horizontal.areas(area);
         render_crate_description(description, buf);
-        render_logo(self.selected_row, logo, buf);
+        render_logo(self.row_index, logo, buf);
     }
 }
 
@@ -92,10 +97,11 @@ fn render_crate_description(area: Rect, buf: &mut Buffer) {
         .render(area, buf);
 }
 
-/// Use half block characters to render a logo based on the RATATUI_LOGO const.
+/// Use half block characters to render a logo based on the `RATATUI_LOGO` const.
 ///
 /// The logo is rendered in three colors, one for the rat, one for the terminal, and one for the
 /// rat's eye. The eye color alternates between two colors based on the selected row.
+#[allow(clippy::cast_possible_truncation)]
 pub fn render_logo(selected_row: usize, area: Rect, buf: &mut Buffer) {
     let eye_color = if selected_row % 2 == 0 {
         THEME.logo.rat_eye

examples/demo2/tabs/email.rs

@@ -39,16 +39,20 @@ const EMAILS: &[Email] = &[
     },
 ];
 
-#[derive(Debug, Default)]
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct EmailTab {
-    selected_index: usize,
+    row_index: usize,
 }
 
 impl EmailTab {
-    pub fn new(selected_index: usize) -> Self {
-        Self {
-            selected_index: selected_index % EMAILS.len(),
-        }
+    /// Select the previous email (with wrap around).
+    pub fn prev(&mut self) {
+        self.row_index = self.row_index.saturating_add(EMAILS.len() - 1) % EMAILS.len();
+    }
+
+    /// Select the next email (with wrap around).
+    pub fn next(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % EMAILS.len();
     }
 }
 
@@ -61,14 +65,14 @@ impl Widget for EmailTab {
         });
         Clear.render(area, buf);
         let vertical = Layout::vertical([Constraint::Length(5), Constraint::Min(0)]);
-        let [inbox, email] = area.split(&vertical);
-        render_inbox(self.selected_index, inbox, buf);
-        render_email(self.selected_index, email, buf);
+        let [inbox, email] = vertical.areas(area);
+        render_inbox(self.row_index, inbox, buf);
+        render_email(self.row_index, email, buf);
     }
 }
 fn render_inbox(selected_index: usize, area: Rect, buf: &mut Buffer) {
     let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
-    let [tabs, inbox] = area.split(&vertical);
+    let [tabs, inbox] = vertical.areas(area);
     let theme = THEME.email;
     Tabs::new(vec![" Inbox ", " Sent ", " Drafts "])
         .style(theme.tabs)
@@ -123,7 +127,7 @@ fn render_email(selected_index: usize, area: Rect, buf: &mut Buffer) {
     block.render(area, buf);
     if let Some(email) = email {
         let vertical = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]);
-        let [headers_area, body_area] = inner.split(&vertical);
+        let [headers_area, body_area] = vertical.areas(inner);
         let headers = vec![
             Line::from(vec![
                 "From: ".set_style(theme.header),

examples/demo2/tabs/recipe.rs

@@ -10,6 +10,7 @@ struct Ingredient {
 }
 
 impl Ingredient {
+    #[allow(clippy::cast_possible_truncation)]
     fn height(&self) -> u16 {
         self.name.lines().count() as u16
     }
@@ -84,16 +85,20 @@ const INGREDIENTS: &[Ingredient] = &[
     },
 ];
 
-#[derive(Debug)]
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
 pub struct RecipeTab {
-    selected_row: usize,
+    row_index: usize,
 }
 
 impl RecipeTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self {
-            selected_row: selected_row % INGREDIENTS.len(),
-        }
+    /// Select the previous item in the ingredients list (with wrap around)
+    pub fn prev(&mut self) {
+        self.row_index = self.row_index.saturating_add(INGREDIENTS.len() - 1) % INGREDIENTS.len();
+    }
+
+    /// Select the next item in the ingredients list (with wrap around)
+    pub fn next(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % INGREDIENTS.len();
     }
 }
 
@@ -117,19 +122,17 @@ impl Widget for RecipeTab {
             height: area.height - 3,
             ..area
         };
-        render_scrollbar(self.selected_row, scrollbar_area, buf);
+        render_scrollbar(self.row_index, scrollbar_area, buf);
 
         let area = area.inner(&Margin {
             horizontal: 2,
             vertical: 1,
         });
-        let [recipe, ingredients] = area.split(&Layout::horizontal([
-            Constraint::Length(44),
-            Constraint::Min(0),
-        ]));
+        let [recipe, ingredients] =
+            Layout::horizontal([Constraint::Length(44), Constraint::Min(0)]).areas(area);
 
         render_recipe(recipe, buf);
-        render_ingredients(self.selected_row, ingredients, buf);
+        render_ingredients(self.row_index, ingredients, buf);
     }
 }
 
@@ -146,7 +149,7 @@ fn render_recipe(area: Rect, buf: &mut Buffer) {
 
 fn render_ingredients(selected_row: usize, area: Rect, buf: &mut Buffer) {
     let mut state = TableState::default().with_selected(Some(selected_row));
-    let rows = INGREDIENTS.iter().cloned();
+    let rows = INGREDIENTS.iter().copied();
     let theme = THEME.recipe;
     StatefulWidget::render(
         Table::new(rows, [Constraint::Length(7), Constraint::Length(30)])
@@ -169,5 +172,5 @@ fn render_scrollbar(position: usize, area: Rect, buf: &mut Buffer) {
         .end_symbol(None)
         .track_symbol(None)
         .thumb_symbol("▐")
-        .render(area, buf, &mut state)
+        .render(area, buf, &mut state);
 }

examples/demo2/tabs/traceroute.rs

@@ -6,16 +6,20 @@ use ratatui::{
 
 use crate::{RgbSwatch, THEME};
 
-#[derive(Debug)]
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct TracerouteTab {
-    selected_row: usize,
+    row_index: usize,
 }
 
 impl TracerouteTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self {
-            selected_row: selected_row % HOPS.len(),
-        }
+    /// Select the previous row (with wrap around).
+    pub fn prev_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(HOPS.len() - 1) % HOPS.len();
+    }
+
+    /// Select the next row (with wrap around).
+    pub fn next_row(&mut self) {
+        self.row_index = self.row_index.saturating_add(1) % HOPS.len();
     }
 }
 
@@ -30,12 +34,12 @@ impl Widget for TracerouteTab {
         Block::new().style(THEME.content).render(area, buf);
         let horizontal = Layout::horizontal([Constraint::Ratio(1, 2), Constraint::Ratio(1, 2)]);
         let vertical = Layout::vertical([Constraint::Min(0), Constraint::Length(3)]);
-        let [left, map] = area.split(&horizontal);
-        let [hops, pings] = left.split(&vertical);
+        let [left, map] = horizontal.areas(area);
+        let [hops, pings] = vertical.areas(left);
 
-        render_hops(self.selected_row, hops, buf);
-        render_ping(self.selected_row, pings, buf);
-        render_map(self.selected_row, map, buf);
+        render_hops(self.row_index, hops, buf);
+        render_ping(self.row_index, pings, buf);
+        render_map(self.row_index, map, buf);
     }
 }
 

examples/demo2/tabs/weather.rs

@@ -8,13 +8,20 @@ use time::OffsetDateTime;
 
 use crate::{color_from_oklab, RgbSwatch, THEME};
 
+#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
 pub struct WeatherTab {
-    pub selected_row: usize,
+    pub download_progress: usize,
 }
 
 impl WeatherTab {
-    pub fn new(selected_row: usize) -> Self {
-        Self { selected_row }
+    /// Simulate a download indicator by decrementing the row index.
+    pub fn prev(&mut self) {
+        self.download_progress = self.download_progress.saturating_sub(1);
+    }
+
+    /// Simulate a download indicator by incrementing the row index.
+    pub fn next(&mut self) {
+        self.download_progress = self.download_progress.saturating_add(1);
     }
 }
 
@@ -32,24 +39,21 @@ impl Widget for WeatherTab {
             horizontal: 2,
             vertical: 1,
         });
-        let [main, _, gauges] = area.split(&Layout::vertical([
+        let [main, _, gauges] = Layout::vertical([
             Constraint::Min(0),
             Constraint::Length(1),
             Constraint::Length(1),
-        ]));
-        let [calendar, charts] = main.split(&Layout::horizontal([
-            Constraint::Length(23),
-            Constraint::Min(0),
-        ]));
-        let [simple, horizontal] = charts.split(&Layout::vertical([
-            Constraint::Length(29),
-            Constraint::Min(0),
-        ]));
+        ])
+        .areas(area);
+        let [calendar, charts] =
+            Layout::horizontal([Constraint::Length(23), Constraint::Min(0)]).areas(main);
+        let [simple, horizontal] =
+            Layout::vertical([Constraint::Length(29), Constraint::Min(0)]).areas(charts);
 
         render_calendar(calendar, buf);
         render_simple_barchart(simple, buf);
         render_horizontal_barchart(horizontal, buf);
-        render_gauge(self.selected_row, gauges, buf);
+        render_gauge(self.download_progress, gauges, buf);
     }
 }
 
@@ -80,7 +84,7 @@ fn render_simple_barchart(area: Rect, buf: &mut Buffer) {
                 // This doesn't actually render correctly as the text is too wide for the bar
                 // See https://github.com/ratatui-org/ratatui/issues/513 for more info
                 // (the demo GIFs hack around this by hacking the calculation in bars.rs)
-                .text_value(format!("{}°", value))
+                .text_value(format!("{value}°"))
                 .style(if value > 70 {
                     Style::new().fg(Color::Red)
                 } else {
@@ -124,12 +128,14 @@ fn render_horizontal_barchart(area: Rect, buf: &mut Buffer) {
         .render(area, buf);
 }
 
+#[allow(clippy::cast_precision_loss)]
 pub fn render_gauge(progress: usize, area: Rect, buf: &mut Buffer) {
     let percent = (progress * 3).min(100) as f64;
 
     render_line_gauge(percent, area, buf);
 }
 
+#[allow(clippy::cast_possible_truncation)]
 fn render_line_gauge(percent: f64, area: Rect, buf: &mut Buffer) {
     // cycle color hue based on the percent for a neat effect yellow -> red
     let hue = 90.0 - (percent as f32 * 0.6);
@@ -137,7 +143,7 @@ fn render_line_gauge(percent: f64, area: Rect, buf: &mut Buffer) {
     let fg = color_from_oklab(hue, Okhsv::max_saturation(), value);
     let bg = color_from_oklab(hue, Okhsv::max_saturation(), value * 0.5);
     let label = if percent < 100.0 {
-        format!("Downloading: {}%", percent)
+        format!("Downloading: {percent}%")
     } else {
         "Download Complete!".into()
     };

examples/demo2/term.rs

@@ -1,10 +1,9 @@
 use std::{
-    io::{self, stdout, Stdout},
-    ops::{Deref, DerefMut},
+    io::{self, stdout},
     time::Duration,
 };
 
-use anyhow::{Context, Result};
+use color_eyre::{eyre::WrapErr, Result};
 use crossterm::{
     event::{self, Event},
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
@@ -12,60 +11,32 @@ use crossterm::{
 };
 use ratatui::prelude::*;
 
-/// A wrapper around the terminal that handles setting up and tearing down the terminal
-/// and provides a helper method to read events from the terminal.
-#[derive(Debug)]
-pub struct Term {
-    terminal: Terminal<CrosstermBackend<Stdout>>,
+pub fn init() -> Result<Terminal<impl Backend>> {
+    // this size is to match the size of the terminal when running the demo
+    // using vhs in a 1280x640 sized window (github social preview size)
+    let options = TerminalOptions {
+        viewport: Viewport::Fixed(Rect::new(0, 0, 81, 18)),
+    };
+    let terminal = Terminal::with_options(CrosstermBackend::new(io::stdout()), options)?;
+    enable_raw_mode().context("enable raw mode")?;
+    stdout()
+        .execute(EnterAlternateScreen)
+        .wrap_err("enter alternate screen")?;
+    Ok(terminal)
 }
 
-impl Term {
-    pub fn start() -> Result<Self> {
-        // this size is to match the size of the terminal when running the demo
-        // using vhs in a 1280x640 sized window (github social preview size)
-        let options = TerminalOptions {
-            viewport: Viewport::Fixed(Rect::new(0, 0, 81, 18)),
-        };
-        let terminal = Terminal::with_options(CrosstermBackend::new(io::stdout()), options)?;
-        enable_raw_mode().context("enable raw mode")?;
-        stdout()
-            .execute(EnterAlternateScreen)
-            .context("enter alternate screen")?;
-        Ok(Self { terminal })
-    }
-
-    pub fn stop() -> Result<()> {
-        disable_raw_mode().context("disable raw mode")?;
-        stdout()
-            .execute(LeaveAlternateScreen)
-            .context("leave alternate screen")?;
-        Ok(())
-    }
-
-    pub fn next_event(timeout: Duration) -> io::Result<Option<Event>> {
-        if !event::poll(timeout)? {
-            return Ok(None);
-        }
-        let event = event::read()?;
-        Ok(Some(event))
-    }
+pub fn restore() -> Result<()> {
+    disable_raw_mode().context("disable raw mode")?;
+    stdout()
+        .execute(LeaveAlternateScreen)
+        .wrap_err("leave alternate screen")?;
+    Ok(())
 }
 
-impl Deref for Term {
-    type Target = Terminal<CrosstermBackend<Stdout>>;
-    fn deref(&self) -> &Self::Target {
-        &self.terminal
-    }
-}
-
-impl DerefMut for Term {
-    fn deref_mut(&mut self) -> &mut Self::Target {
-        &mut self.terminal
-    }
-}
-
-impl Drop for Term {
-    fn drop(&mut self) {
-        let _ = Term::stop();
+pub fn next_event(timeout: Duration) -> Result<Option<Event>> {
+    if !event::poll(timeout)? {
+        return Ok(None);
     }
+    let event = event::read()?;
+    Ok(Some(event))
 }

examples/docsrs.rs

@@ -1,12 +1,30 @@
+//! # [Ratatui] Docs.rs example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::io::{self, stdout};
 
 use crossterm::{
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
     ExecutableCommand,
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, Paragraph},
+};
 
-/// Example code for libr.rs
+/// Example code for lib.rs
 ///
 /// When cargo-rdme supports doc comments that import from code, this will be imported
 /// rather than copied to the lib.rs file.
@@ -19,7 +37,6 @@ fn main() -> io::Result<()> {
     let mut should_quit = false;
     while !should_quit {
         terminal.draw(match arg.as_str() {
-            "hello_world" => hello_world,
             "layout" => layout,
             "styling" => styling,
             _ => hello_world,
@@ -59,8 +76,8 @@ fn layout(frame: &mut Frame) {
         Constraint::Length(1),
     ]);
     let horizontal = Layout::horizontal([Constraint::Ratio(1, 2); 2]);
-    let [title_bar, main_area, status_bar] = frame.size().split(&vertical);
-    let [left, right] = main_area.split(&horizontal);
+    let [title_bar, main_area, status_bar] = vertical.areas(frame.size());
+    let [left, right] = horizontal.areas(main_area);
 
     frame.render_widget(
         Block::new().borders(Borders::TOP).title("Title Bar"),

examples/flex.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Flex example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::enum_glob_use, clippy::wildcard_imports)]
+
 use std::io::{self, stdout};
 
 use color_eyre::{config::HookBuilder, Result};
@@ -10,48 +27,82 @@ use ratatui::{
     layout::{Constraint::*, Flex},
     prelude::*,
     style::palette::tailwind,
+    symbols::line,
     widgets::{block::Title, *},
 };
 use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
 
 const EXAMPLE_DATA: &[(&str, &[Constraint])] = &[
     (
-        "Min(u16) takes any excess space when using `Stretch` or `StretchLast`",
-        &[Fixed(20), Min(20), Max(20)],
+        "Min(u16) takes any excess space always",
+        &[Length(10), Min(10), Max(10), Percentage(10), Ratio(1,10)],
     ),
     (
-        "Proportional(u16) takes any excess space in all `Flex` layouts",
-        &[Length(20), Percentage(20), Ratio(1, 5), Proportional(1)],
+        "Fill(u16) takes any excess space always",
+        &[Length(20), Percentage(20), Ratio(1, 5), Fill(1)],
     ),
     (
-        "In `StretchLast`, last constraint of lowest priority takes excess space",
-        &[Length(20), Fixed(20), Percentage(20)],
+        "Here's all constraints in one line",
+        &[Length(10), Min(10), Max(10), Percentage(10), Ratio(1,10), Fill(1)],
     ),
-    ("", &[Fixed(20), Percentage(20), Length(20)]),
-    ("", &[Percentage(20), Length(20), Fixed(20)]),
-    ("", &[Length(20), Length(15)]),
-    ("Spacing has no effect in `SpaceAround` and `SpaceBetween`", &[Proportional(1), Proportional(1)]),
-    ("", &[Length(20), Fixed(20)]),
     (
-        "When not using `Flex::Stretch` or `Flex::StretchLast`,\n`Min(u16)` and `Max(u16)` collapse to their lowest values",
+        "",
+        &[Max(50), Min(50)],
+    ),
+    (
+        "",
+        &[Max(20), Length(10)],
+    ),
+    (
+        "",
+        &[Max(20), Length(10)],
+    ),
+    (
+        "Min grows always but also allows Fill to grow",
+        &[Percentage(50), Fill(1), Fill(2), Min(50)],
+    ),
+    (
+        "In `Legacy`, the last constraint of lowest priority takes excess space",
+        &[Length(20), Length(20), Percentage(20)],
+    ),
+    ("", &[Length(20), Percentage(20), Length(20)]),
+    ("A lowest priority constraint will be broken before a high priority constraint", &[Ratio(1,4), Percentage(20)]),
+    ("`Length` is higher priority than `Percentage`", &[Percentage(20), Length(10)]),
+    ("`Min/Max` is higher priority than `Length`", &[Length(10), Max(20)]),
+    ("", &[Length(100), Min(20)]),
+    ("`Length` is higher priority than `Min/Max`", &[Max(20), Length(10)]),
+    ("", &[Min(20), Length(90)]),
+    ("Fill is the lowest priority and will fill any excess space", &[Fill(1), Ratio(1, 4)]),
+    ("Fill can be used to scale proportionally with other Fill blocks", &[Fill(1), Percentage(20), Fill(2)]),
+    ("", &[Ratio(1, 3), Percentage(20), Ratio(2, 3)]),
+    ("Legacy will stretch the last lowest priority constraint\nStretch will only stretch equal weighted constraints", &[Length(20), Length(15)]),
+    ("", &[Percentage(20), Length(15)]),
+    ("`Fill(u16)` fills up excess space, but is lower priority to spacers.\ni.e. Fill will only have widths in Flex::Stretch and Flex::Legacy", &[Fill(1), Fill(1)]),
+    ("", &[Length(20), Length(20)]),
+    (
+        "When not using `Flex::Stretch` or `Flex::Legacy`,\n`Min(u16)` and `Max(u16)` collapse to their lowest values",
         &[Min(20), Max(20)],
     ),
     (
-        "`SpaceBetween` stretches when there's only one constraint",
+        "",
         &[Max(20)],
     ),
-    ("", &[Min(20), Max(20), Length(20), Fixed(20)]),
-    ("`Proportional(u16)` always fills up space in every `Flex` layout", &[Proportional(0), Proportional(0)]),
+    ("", &[Min(20), Max(20), Length(20), Length(20)]),
+    ("", &[Fill(0), Fill(0)]),
     (
-        "`Proportional(1)` can be to scale with respect to other `Proportional(2)`",
-        &[Proportional(1), Proportional(2)],
+        "`Fill(1)` can be to scale with respect to other `Fill(2)`",
+        &[Fill(1), Fill(2)],
     ),
     (
-        "`Proportional(0)` collapses if there are other non-zero `Proportional(_)`\nconstraints. e.g. `[Proportional(0), Proportional(0), Proportional(1)]`:",
+        "",
+        &[Fill(1), Min(10), Max(10), Fill(2)],
+    ),
+    (
+        "`Fill(0)` collapses if there are other non-zero `Fill(_)`\nconstraints. e.g. `[Fill(0), Fill(0), Fill(1)]`:",
         &[
-            Proportional(0),
-            Proportional(0),
-            Proportional(1),
+            Fill(0),
+            Fill(0),
+            Fill(1),
         ],
     ),
 ];
@@ -87,8 +138,7 @@ struct Example {
 #[derive(Default, Debug, Copy, Clone, PartialEq, Eq, FromRepr, Display, EnumIter)]
 enum SelectedTab {
     #[default]
-    StretchLast,
-    Stretch,
+    Legacy,
     Start,
     Center,
     End,
@@ -101,12 +151,6 @@ fn main() -> Result<()> {
     Layout::init_cache(EXAMPLE_DATA.len() * SelectedTab::iter().len() * 100);
     init_error_hooks()?;
     let terminal = init_terminal()?;
-
-    // Each line in the example is a layout
-    // so 13 examples * 7 = 91 currently
-    // Plus additional layout for tabs ...
-    Layout::init_cache(120);
-
     App::default().run(terminal)?;
 
     restore_terminal()?;
@@ -123,7 +167,7 @@ impl App {
         Ok(())
     }
 
-    fn is_running(&self) -> bool {
+    fn is_running(self) -> bool {
         self.state == AppState::Running
     }
 
@@ -161,14 +205,14 @@ impl App {
     }
 
     fn up(&mut self) {
-        self.scroll_offset = self.scroll_offset.saturating_sub(1)
+        self.scroll_offset = self.scroll_offset.saturating_sub(1);
     }
 
     fn down(&mut self) {
         self.scroll_offset = self
             .scroll_offset
             .saturating_add(1)
-            .min(max_scroll_offset())
+            .min(max_scroll_offset());
     }
 
     fn top(&mut self) {
@@ -197,8 +241,7 @@ fn max_scroll_offset() -> u16 {
     example_height()
         - EXAMPLE_DATA
             .last()
-            .map(|(desc, _)| get_description_height(desc) + 4)
-            .unwrap_or(0)
+            .map_or(0, |(desc, _)| get_description_height(desc) + 4)
 }
 
 /// The height of all examples combined
@@ -213,21 +256,21 @@ fn example_height() -> u16 {
 
 impl Widget for App {
     fn render(self, area: Rect, buf: &mut Buffer) {
-        let layout = Layout::vertical([Fixed(3), Fixed(1), Proportional(0)]);
-        let [tabs, axis, demo] = area.split(&layout);
+        let layout = Layout::vertical([Length(3), Length(1), Fill(0)]);
+        let [tabs, axis, demo] = layout.areas(area);
         self.tabs().render(tabs, buf);
         let scroll_needed = self.render_demo(demo, buf);
         let axis_width = if scroll_needed {
-            axis.width - 1
+            axis.width.saturating_sub(1)
         } else {
             axis.width
         };
-        self.axis(axis_width, self.spacing).render(axis, buf);
+        Self::axis(axis_width, self.spacing).render(axis, buf);
     }
 }
 
 impl App {
-    fn tabs(&self) -> impl Widget {
+    fn tabs(self) -> impl Widget {
         let tab_titles = SelectedTab::iter().map(SelectedTab::to_tab_title);
         let block = Block::new()
             .title(Title::from("Flex Layouts ".bold()))
@@ -241,17 +284,17 @@ impl App {
     }
 
     /// a bar like `<----- 80 px (gap: 2 px)? ----->`
-    fn axis(&self, width: u16, spacing: u16) -> impl Widget {
+    fn axis(width: u16, spacing: u16) -> impl Widget {
         let width = width as usize;
         // only show gap when spacing is not zero
         let label = if spacing != 0 {
-            format!("{} px (gap: {} px)", width, spacing)
+            format!("{width} px (gap: {spacing} px)")
         } else {
-            format!("{} px", width)
+            format!("{width} px")
         };
-        let bar_width = width - 2; // we want to `<` and `>` at the ends
+        let bar_width = width.saturating_sub(2); // we want to `<` and `>` at the ends
         let width_bar = format!("<{label:-^bar_width$}>");
-        Paragraph::new(width_bar.dark_gray()).alignment(Alignment::Center)
+        Paragraph::new(width_bar.dark_gray()).centered()
     }
 
     /// Render the demo content
@@ -260,6 +303,7 @@ impl App {
     /// into the main buffer. This is done to make it possible to handle scrolling easily.
     ///
     /// Returns bool indicating whether scroll was needed
+    #[allow(clippy::cast_possible_truncation)]
     fn render_demo(self, area: Rect, buf: &mut Buffer) -> bool {
         // render demo content into a separate buffer so all examples fit we add an extra
         // area.height to make sure the last example is fully visible even when the scroll offset is
@@ -305,32 +349,30 @@ impl App {
 
 impl SelectedTab {
     /// Get the previous tab, if there is no previous tab return the current tab.
-    fn previous(&self) -> Self {
-        let current_index: usize = *self as usize;
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
         let previous_index = current_index.saturating_sub(1);
-        Self::from_repr(previous_index).unwrap_or(*self)
+        Self::from_repr(previous_index).unwrap_or(self)
     }
 
     /// Get the next tab, if there is no next tab return the current tab.
-    fn next(&self) -> Self {
-        let current_index = *self as usize;
+    fn next(self) -> Self {
+        let current_index = self as usize;
         let next_index = current_index.saturating_add(1);
-        Self::from_repr(next_index).unwrap_or(*self)
+        Self::from_repr(next_index).unwrap_or(self)
     }
 
     /// Convert a `SelectedTab` into a `Line` to display it by the `Tabs` widget.
-    fn to_tab_title(value: SelectedTab) -> Line<'static> {
+    fn to_tab_title(value: Self) -> Line<'static> {
         use tailwind::*;
-        use SelectedTab::*;
         let text = value.to_string();
         let color = match value {
-            StretchLast => ORANGE.c400,
-            Stretch => ORANGE.c300,
-            Start => SKY.c400,
-            Center => SKY.c300,
-            End => SKY.c200,
-            SpaceAround => INDIGO.c400,
-            SpaceBetween => INDIGO.c300,
+            Self::Legacy => ORANGE.c400,
+            Self::Start => SKY.c400,
+            Self::Center => SKY.c300,
+            Self::End => SKY.c200,
+            Self::SpaceAround => INDIGO.c400,
+            Self::SpaceBetween => INDIGO.c300,
         };
         format!(" {text} ").fg(color).bg(Color::Black).into()
     }
@@ -341,21 +383,18 @@ impl StatefulWidget for SelectedTab {
     fn render(self, area: Rect, buf: &mut Buffer, spacing: &mut Self::State) {
         let spacing = *spacing;
         match self {
-            SelectedTab::StretchLast => self.render_examples(area, buf, Flex::StretchLast, spacing),
-            SelectedTab::Stretch => self.render_examples(area, buf, Flex::Stretch, spacing),
-            SelectedTab::Start => self.render_examples(area, buf, Flex::Start, spacing),
-            SelectedTab::Center => self.render_examples(area, buf, Flex::Center, spacing),
-            SelectedTab::End => self.render_examples(area, buf, Flex::End, spacing),
-            SelectedTab::SpaceAround => self.render_examples(area, buf, Flex::SpaceAround, spacing),
-            SelectedTab::SpaceBetween => {
-                self.render_examples(area, buf, Flex::SpaceBetween, spacing)
-            }
+            Self::Legacy => Self::render_examples(area, buf, Flex::Legacy, spacing),
+            Self::Start => Self::render_examples(area, buf, Flex::Start, spacing),
+            Self::Center => Self::render_examples(area, buf, Flex::Center, spacing),
+            Self::End => Self::render_examples(area, buf, Flex::End, spacing),
+            Self::SpaceAround => Self::render_examples(area, buf, Flex::SpaceAround, spacing),
+            Self::SpaceBetween => Self::render_examples(area, buf, Flex::SpaceBetween, spacing),
         }
     }
 }
 
 impl SelectedTab {
-    fn render_examples(&self, area: Rect, buf: &mut Buffer, flex: Flex, spacing: u16) {
+    fn render_examples(area: Rect, buf: &mut Buffer, flex: Flex, spacing: u16) {
         let heights = EXAMPLE_DATA
             .iter()
             .map(|(desc, _)| get_description_height(desc) + 4);
@@ -380,18 +419,19 @@ impl Example {
 impl Widget for Example {
     fn render(self, area: Rect, buf: &mut Buffer) {
         let title_height = get_description_height(&self.description);
-        let layout = Layout::vertical([Fixed(title_height), Proportional(0)]);
-        let [title, illustrations] = area.split(&layout);
-        let blocks = Layout::horizontal(&self.constraints)
+        let layout = Layout::vertical([Length(title_height), Fill(0)]);
+        let [title, illustrations] = layout.areas(area);
+
+        let (blocks, spacers) = Layout::horizontal(&self.constraints)
             .flex(self.flex)
             .spacing(self.spacing)
-            .split(illustrations);
+            .split_with_spacers(illustrations);
 
         if !self.description.is_empty() {
             Paragraph::new(
                 self.description
                     .split('\n')
-                    .map(|s| format!("// {}", s).italic().fg(tailwind::SLATE.c400))
+                    .map(|s| format!("// {s}").italic().fg(tailwind::SLATE.c400))
                     .map(Line::from)
                     .collect::<Vec<Line>>(),
             )
@@ -399,14 +439,62 @@ impl Widget for Example {
         }
 
         for (block, constraint) in blocks.iter().zip(&self.constraints) {
-            self.illustration(*constraint, block.width)
-                .render(*block, buf);
+            Self::illustration(*constraint, block.width).render(*block, buf);
+        }
+
+        for spacer in spacers.iter() {
+            Self::render_spacer(*spacer, buf);
         }
     }
 }
 
 impl Example {
-    fn illustration(&self, constraint: Constraint, width: u16) -> Paragraph {
+    fn render_spacer(spacer: Rect, buf: &mut Buffer) {
+        if spacer.width > 1 {
+            let corners_only = symbols::border::Set {
+                top_left: line::NORMAL.top_left,
+                top_right: line::NORMAL.top_right,
+                bottom_left: line::NORMAL.bottom_left,
+                bottom_right: line::NORMAL.bottom_right,
+                vertical_left: " ",
+                vertical_right: " ",
+                horizontal_top: " ",
+                horizontal_bottom: " ",
+            };
+            Block::bordered()
+                .border_set(corners_only)
+                .border_style(Style::reset().dark_gray())
+                .render(spacer, buf);
+        } else {
+            Paragraph::new(Text::from(vec![
+                Line::from(""),
+                Line::from("│"),
+                Line::from("│"),
+                Line::from(""),
+            ]))
+            .style(Style::reset().dark_gray())
+            .render(spacer, buf);
+        }
+        let width = spacer.width;
+        let label = if width > 4 {
+            format!("{width} px")
+        } else if width > 2 {
+            format!("{width}")
+        } else {
+            String::new()
+        };
+        let text = Text::from(vec![
+            Line::raw(""),
+            Line::raw(""),
+            Line::styled(label, Style::reset().dark_gray()),
+        ]);
+        Paragraph::new(text)
+            .style(Style::reset().dark_gray())
+            .alignment(Alignment::Center)
+            .render(spacer, buf);
+    }
+
+    fn illustration(constraint: Constraint, width: u16) -> impl Widget {
         let main_color = color_for_constraint(constraint);
         let fg_color = Color::White;
         let title = format!("{constraint}");
@@ -416,22 +504,19 @@ impl Example {
             .border_set(symbols::border::QUADRANT_OUTSIDE)
             .border_style(Style::reset().fg(main_color).reversed())
             .style(Style::default().fg(fg_color).bg(main_color));
-        Paragraph::new(text)
-            .alignment(Alignment::Center)
-            .block(block)
+        Paragraph::new(text).centered().block(block)
     }
 }
 
-fn color_for_constraint(constraint: Constraint) -> Color {
+const fn color_for_constraint(constraint: Constraint) -> Color {
     use tailwind::*;
     match constraint {
-        Constraint::Fixed(_) => RED.c900,
         Constraint::Min(_) => BLUE.c900,
         Constraint::Max(_) => BLUE.c800,
         Constraint::Length(_) => SLATE.c700,
         Constraint::Percentage(_) => SLATE.c800,
         Constraint::Ratio(_, _) => SLATE.c900,
-        Constraint::Proportional(_) => SLATE.c950,
+        Constraint::Fill(_) => SLATE.c950,
     }
 }
 
@@ -445,7 +530,7 @@ fn init_error_hooks() -> Result<()> {
     }))?;
     std::panic::set_hook(Box::new(move |info| {
         let _ = restore_terminal();
-        panic(info)
+        panic(info);
     }));
     Ok(())
 }
@@ -464,6 +549,7 @@ fn restore_terminal() -> Result<()> {
     Ok(())
 }
 
+#[allow(clippy::cast_possible_truncation)]
 fn get_description_height(s: &str) -> u16 {
     if s.is_empty() {
         0

examples/gauge.rs

@@ -1,9 +1,23 @@
-use std::{
-    io::{self, stdout, Stdout},
-    time::Duration,
-};
+//! # [Ratatui] Gauge example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
 
-use anyhow::Result;
+#![allow(clippy::enum_glob_use)]
+
+use std::{io::stdout, time::Duration};
+
+use color_eyre::{config::HookBuilder, Result};
 use crossterm::{
     event::{self, Event, KeyCode, KeyEventKind},
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
@@ -11,84 +25,85 @@ use crossterm::{
 };
 use ratatui::{
     prelude::*,
-    widgets::{block::Title, *},
+    style::palette::tailwind,
+    widgets::{block::Title, Block, Borders, Gauge, Padding, Paragraph},
 };
 
-fn main() -> Result<()> {
-    App::run()
-}
-
-struct App {
-    term: Term,
-    should_quit: bool,
-    state: AppState,
-}
+const GAUGE1_COLOR: Color = tailwind::RED.c800;
+const GAUGE2_COLOR: Color = tailwind::GREEN.c800;
+const GAUGE3_COLOR: Color = tailwind::BLUE.c800;
+const GAUGE4_COLOR: Color = tailwind::ORANGE.c800;
+const CUSTOM_LABEL_COLOR: Color = tailwind::SLATE.c200;
 
 #[derive(Debug, Default, Clone, Copy)]
-struct AppState {
+struct App {
+    state: AppState,
+    progress_columns: u16,
     progress1: u16,
-    progress2: u16,
+    progress2: f64,
     progress3: f64,
-    progress4: u16,
+    progress4: f64,
+}
+
+#[derive(Debug, Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Started,
+    Quitting,
+}
+
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+    App::default().run(terminal)?;
+    restore_terminal()?;
+    Ok(())
 }
 
 impl App {
-    fn run() -> Result<()> {
-        // run at ~10 fps minus the time it takes to draw
-        let timeout = Duration::from_secs_f32(1.0 / 10.0);
-        let mut app = Self::start()?;
-        while !app.should_quit {
-            app.update();
-            app.draw()?;
-            app.handle_events(timeout)?;
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> Result<()> {
+        while self.state != AppState::Quitting {
+            self.draw(&mut terminal)?;
+            self.handle_events()?;
+            self.update(terminal.size()?.width);
         }
-        app.stop()?;
         Ok(())
     }
 
-    fn start() -> Result<Self> {
-        Ok(App {
-            term: Term::start()?,
-            should_quit: false,
-            state: AppState {
-                progress1: 0,
-                progress2: 0,
-                progress3: 0.0,
-                progress4: 0,
-            },
-        })
-    }
-
-    fn stop(&mut self) -> Result<()> {
-        Term::stop()?;
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal.draw(|f| f.render_widget(self, f.size()))?;
         Ok(())
     }
 
-    fn update(&mut self) {
-        self.state.progress1 = (self.state.progress1 + 4).min(100);
-        self.state.progress2 = (self.state.progress2 + 3).min(100);
-        self.state.progress3 = (self.state.progress3 + 0.02).min(1.0);
-        self.state.progress4 = (self.state.progress4 + 1).min(100);
+    fn update(&mut self, terminal_width: u16) {
+        if self.state != AppState::Started {
+            return;
+        }
+
+        // progress1 and progress2 help show the difference between ratio and percentage measuring
+        // the same thing, but converting to either a u16 or f64. Effectively, we're showing the
+        // difference between how a continuous gauge acts for floor and rounded values.
+        self.progress_columns = (self.progress_columns + 1).clamp(0, terminal_width);
+        self.progress1 = self.progress_columns * 100 / terminal_width;
+        self.progress2 = f64::from(self.progress_columns) * 100.0 / f64::from(terminal_width);
+
+        // progress3 and progress4 similarly show the difference between unicode and non-unicode
+        // gauges measuring the same thing.
+        self.progress3 = (self.progress3 + 0.1).clamp(40.0, 100.0);
+        self.progress4 = (self.progress4 + 0.1).clamp(40.0, 100.0);
     }
 
-    fn draw(&mut self) -> Result<()> {
-        self.term.draw(|frame| {
-            let state = self.state;
-            let layout = Layout::vertical([Constraint::Ratio(1, 4); 4]).split(frame.size());
-            Self::render_gauge1(state.progress1, frame, layout[0]);
-            Self::render_gauge2(state.progress2, frame, layout[1]);
-            Self::render_gauge3(state.progress3, frame, layout[2]);
-            Self::render_gauge4(state.progress4, frame, layout[3]);
-        })?;
-        Ok(())
-    }
-
-    fn handle_events(&mut self, timeout: Duration) -> io::Result<()> {
+    fn handle_events(&mut self) -> Result<()> {
+        let timeout = Duration::from_secs_f32(1.0 / 20.0);
         if event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
                 if key.kind == KeyEventKind::Press {
-                    if let KeyCode::Char('q') = key.code {
-                        self.should_quit = true;
+                    use KeyCode::*;
+                    match key.code {
+                        Char(' ') | Enter => self.start(),
+                        Char('q') | Esc => self.quit(),
+                        _ => {}
                     }
                 }
             }
@@ -96,79 +111,133 @@ impl App {
         Ok(())
     }
 
-    fn render_gauge1(progress: u16, frame: &mut Frame, area: Rect) {
-        let title = Self::title_block("Gauge with percentage progress");
-        let gauge = Gauge::default()
-            .block(title)
-            .gauge_style(Style::new().light_red())
-            .percent(progress);
-        frame.render_widget(gauge, area);
+    fn start(&mut self) {
+        self.state = AppState::Started;
     }
 
-    fn render_gauge2(progress: u16, frame: &mut Frame, area: Rect) {
-        let title = Self::title_block("Gauge with percentage progress and custom label");
-        let label = format!("{}/100", progress);
-        let gauge = Gauge::default()
+    fn quit(&mut self) {
+        self.state = AppState::Quitting;
+    }
+}
+
+impl Widget for &App {
+    #[allow(clippy::similar_names)]
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::*;
+        let layout = Layout::vertical([Length(2), Min(0), Length(1)]);
+        let [header_area, gauge_area, footer_area] = layout.areas(area);
+
+        let layout = Layout::vertical([Ratio(1, 4); 4]);
+        let [gauge1_area, gauge2_area, gauge3_area, gauge4_area] = layout.areas(gauge_area);
+
+        render_header(header_area, buf);
+        render_footer(footer_area, buf);
+
+        self.render_gauge1(gauge1_area, buf);
+        self.render_gauge2(gauge2_area, buf);
+        self.render_gauge3(gauge3_area, buf);
+        self.render_gauge4(gauge4_area, buf);
+    }
+}
+
+fn render_header(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Ratatui Gauge Example")
+        .bold()
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Press ENTER to start")
+        .alignment(Alignment::Center)
+        .fg(CUSTOM_LABEL_COLOR)
+        .bold()
+        .render(area, buf);
+}
+
+impl App {
+    fn render_gauge1(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with percentage");
+        Gauge::default()
             .block(title)
-            .gauge_style(Style::new().blue().on_light_blue())
-            .percent(progress)
-            .label(label);
-        frame.render_widget(gauge, area);
+            .gauge_style(GAUGE1_COLOR)
+            .percent(self.progress1)
+            .render(area, buf);
     }
 
-    fn render_gauge3(progress: f64, frame: &mut Frame, area: Rect) {
-        let title =
-            Self::title_block("Gauge with ratio progress, custom label with style, and unicode");
+    fn render_gauge2(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio and custom label");
         let label = Span::styled(
-            format!("{:.2}%", progress * 100.0),
-            Style::new().red().italic().bold(),
+            format!("{:.1}/100", self.progress2),
+            Style::new().italic().bold().fg(CUSTOM_LABEL_COLOR),
         );
-        let gauge = Gauge::default()
+        Gauge::default()
             .block(title)
-            .gauge_style(Style::default().fg(Color::Yellow))
-            .ratio(progress)
+            .gauge_style(GAUGE2_COLOR)
+            .ratio(self.progress2 / 100.0)
             .label(label)
-            .use_unicode(true);
-        frame.render_widget(gauge, area);
+            .render(area, buf);
     }
 
-    fn render_gauge4(progress: u16, frame: &mut Frame, area: Rect) {
-        let title = Self::title_block("Gauge with percentage progress and label");
-        let label = format!("{}/100", progress);
-        let gauge = Gauge::default()
+    fn render_gauge3(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio (no unicode)");
+        let label = format!("{:.1}%", self.progress3);
+        Gauge::default()
             .block(title)
-            .gauge_style(Style::new().green().italic())
-            .percent(progress)
-            .label(label);
-        frame.render_widget(gauge, area);
+            .gauge_style(GAUGE3_COLOR)
+            .ratio(self.progress3 / 100.0)
+            .label(label)
+            .render(area, buf);
     }
 
-    fn title_block(title: &str) -> Block {
-        let title = Title::from(title).alignment(Alignment::Center);
-        Block::default().title(title).borders(Borders::TOP)
+    fn render_gauge4(&self, area: Rect, buf: &mut Buffer) {
+        let title = title_block("Gauge with ratio (unicode)");
+        let label = format!("{:.1}%", self.progress3);
+        Gauge::default()
+            .block(title)
+            .gauge_style(GAUGE4_COLOR)
+            .ratio(self.progress4 / 100.0)
+            .label(label)
+            .use_unicode(true)
+            .render(area, buf);
     }
 }
 
-struct Term {
-    terminal: Terminal<CrosstermBackend<Stdout>>,
+fn title_block(title: &str) -> Block {
+    let title = Title::from(title).alignment(Alignment::Center);
+    Block::default()
+        .title(title)
+        .borders(Borders::NONE)
+        .fg(CUSTOM_LABEL_COLOR)
+        .padding(Padding::vertical(1))
 }
 
-impl Term {
-    pub fn start() -> io::Result<Term> {
-        stdout().execute(EnterAlternateScreen)?;
-        enable_raw_mode()?;
-        let terminal = Terminal::new(CrosstermBackend::new(stdout()))?;
-        Ok(Self { terminal })
-    }
-
-    pub fn stop() -> io::Result<()> {
-        disable_raw_mode()?;
-        stdout().execute(LeaveAlternateScreen)?;
-        Ok(())
-    }
-
-    fn draw(&mut self, frame: impl FnOnce(&mut Frame)) -> Result<()> {
-        self.terminal.draw(frame)?;
-        Ok(())
-    }
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
 }

examples/hello_world.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Hello World example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     io::{self, Stdout},
     time::Duration,
@@ -9,7 +24,7 @@ use crossterm::{
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{prelude::*, widgets::Paragraph};
 
 /// This is a bare minimum example. There are many approaches to running an application loop, so
 /// this is not meant to be prescriptive. It is only meant to demonstrate the basic setup and

examples/inline.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Inline example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::wildcard_imports)]
+
 use std::{
     collections::{BTreeMap, VecDeque},
     error::Error,
@@ -114,6 +131,7 @@ fn input_handling(tx: mpsc::Sender<Event>) {
     });
 }
 
+#[allow(clippy::cast_precision_loss, clippy::needless_pass_by_value)]
 fn workers(tx: mpsc::Sender<Event>) -> Vec<Worker> {
     (0..4)
         .map(|id| {
@@ -153,6 +171,7 @@ fn downloads() -> Downloads {
     }
 }
 
+#[allow(clippy::needless_pass_by_value)]
 fn run_app<B: Backend>(
     terminal: &mut Terminal<B>,
     workers: Vec<Worker>,
@@ -179,7 +198,7 @@ fn run_app<B: Backend>(
             Event::DownloadUpdate(worker_id, _download_id, progress) => {
                 let download = downloads.in_progress.get_mut(&worker_id).unwrap();
                 download.progress = progress;
-                redraw = false
+                redraw = false;
             }
             Event::DownloadDone(worker_id, download_id) => {
                 let download = downloads.in_progress.remove(&worker_id).unwrap();
@@ -222,11 +241,12 @@ fn ui(f: &mut Frame, downloads: &Downloads) {
 
     let vertical = Layout::vertical([Constraint::Length(2), Constraint::Length(4)]).margin(1);
     let horizontal = Layout::horizontal([Constraint::Percentage(20), Constraint::Percentage(80)]);
-    let [progress_area, main] = area.split(&vertical);
-    let [list_area, gauge_area] = main.split(&horizontal);
+    let [progress_area, main] = vertical.areas(area);
+    let [list_area, gauge_area] = horizontal.areas(main);
 
     // total progress
     let done = NUM_DOWNLOADS - downloads.pending.len() - downloads.in_progress.len();
+    #[allow(clippy::cast_precision_loss)]
     let progress = LineGauge::default()
         .gauge_style(Style::default().fg(Color::Blue))
         .label(format!("{done}/{NUM_DOWNLOADS}"))
@@ -256,6 +276,7 @@ fn ui(f: &mut Frame, downloads: &Downloads) {
     let list = List::new(items);
     f.render_widget(list, list_area);
 
+    #[allow(clippy::cast_possible_truncation)]
     for (i, (_, download)) in downloads.in_progress.iter().enumerate() {
         let gauge = Gauge::default()
             .gauge_style(Style::default().fg(Color::Yellow))

examples/layout.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Layout example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::enum_glob_use)]
+
 use std::{error::Error, io};
 
 use crossterm::{
@@ -6,7 +23,11 @@ use crossterm::{
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
 use itertools::Itertools;
-use ratatui::{layout::Constraint::*, prelude::*, widgets::*};
+use ratatui::{
+    layout::Constraint::*,
+    prelude::*,
+    widgets::{Block, Borders, Paragraph},
+};
 
 fn main() -> Result<(), Box<dyn Error>> {
     // setup terminal
@@ -40,26 +61,26 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
         terminal.draw(ui)?;
 
         if let Event::Key(key) = event::read()? {
-            if let KeyCode::Char('q') = key.code {
+            if key.code == KeyCode::Char('q') {
                 return Ok(());
             }
         }
     }
 }
 
+#[allow(clippy::too_many_lines)]
 fn ui(frame: &mut Frame) {
     let vertical = Layout::vertical([
         Length(4),  // text
         Length(50), // examples
         Min(0),     // fills remaining space
     ]);
-    let [text_area, examples_area, _] = frame.size().split(&vertical);
+    let [text_area, examples_area, _] = vertical.areas(frame.size());
 
     // title
     frame.render_widget(
         Paragraph::new(vec![
-            Line::from("Horizontal Layout Example. Press q to quit".dark_gray())
-                .alignment(Alignment::Center),
+            Line::from("Horizontal Layout Example. Press q to quit".dark_gray()).centered(),
             Line::from("Each line has 2 constraints, plus Min(0) to fill the remaining space."),
             Line::from("E.g. the second line of the Len/Min box is [Length(2), Min(2), Min(0)]"),
             Line::from("Note: constraint labels that don't fit are truncated"),
@@ -80,12 +101,12 @@ fn ui(frame: &mut Frame) {
         .iter()
         .flat_map(|area| {
             Layout::horizontal([
-                Constraint::Length(14),
-                Constraint::Length(14),
-                Constraint::Length(14),
-                Constraint::Length(14),
-                Constraint::Length(14),
-                Constraint::Min(0), // fills remaining space
+                Length(14),
+                Length(14),
+                Length(14),
+                Length(14),
+                Length(14),
+                Min(0), // fills remaining space
             ])
             .split(*area)
             .iter()
@@ -177,8 +198,8 @@ fn render_example_combination(
     let inner = block.inner(area);
     frame.render_widget(block, area);
     let layout = Layout::vertical(vec![Length(1); constraints.len() + 1]).split(inner);
-    for (i, (a, b)) in constraints.iter().enumerate() {
-        render_single_example(frame, layout[i], vec![*a, *b, Min(0)]);
+    for (i, (a, b)) in constraints.into_iter().enumerate() {
+        render_single_example(frame, layout[i], vec![a, b, Min(0)]);
     }
     // This is to make it easy to visually see the alignment of the examples
     // with the constraints.
@@ -191,7 +212,7 @@ fn render_single_example(frame: &mut Frame, area: Rect, constraints: Vec<Constra
     let blue = Paragraph::new(constraint_label(constraints[1])).on_blue();
     let green = Paragraph::new("·".repeat(12)).on_green();
     let horizontal = Layout::horizontal(constraints);
-    let [r, b, g] = area.split(&horizontal);
+    let [r, b, g] = horizontal.areas(area);
     frame.render_widget(red, r);
     frame.render_widget(blue, b);
     frame.render_widget(green, g);
@@ -199,12 +220,11 @@ fn render_single_example(frame: &mut Frame, area: Rect, constraints: Vec<Constra
 
 fn constraint_label(constraint: Constraint) -> String {
     match constraint {
-        Length(n) => format!("{n}"),
-        Min(n) => format!("{n}"),
-        Max(n) => format!("{n}"),
-        Percentage(n) => format!("{n}"),
-        Proportional(n) => format!("{n}"),
-        Fixed(n) => format!("{n}"),
-        Ratio(a, b) => format!("{a}:{b}"),
+        Constraint::Ratio(a, b) => format!("{a}:{b}"),
+        Constraint::Length(n)
+        | Constraint::Min(n)
+        | Constraint::Max(n)
+        | Constraint::Percentage(n)
+        | Constraint::Fill(n) => format!("{n}"),
     }
 }

examples/list.rs

@@ -1,27 +1,298 @@
-use std::{
-    error::Error,
-    io,
-    time::{Duration, Instant},
-};
+//! # [Ratatui] List example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
 
+#![allow(clippy::enum_glob_use, clippy::wildcard_imports)]
+
+use std::{error::Error, io, io::stdout};
+
+use color_eyre::config::HookBuilder;
 use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
+    event::{self, Event, KeyCode, KeyEventKind},
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    ExecutableCommand,
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{prelude::*, style::palette::tailwind, widgets::*};
 
-struct StatefulList<T> {
+const TODO_HEADER_BG: Color = tailwind::BLUE.c950;
+const NORMAL_ROW_COLOR: Color = tailwind::SLATE.c950;
+const ALT_ROW_COLOR: Color = tailwind::SLATE.c900;
+const SELECTED_STYLE_FG: Color = tailwind::BLUE.c300;
+const TEXT_COLOR: Color = tailwind::SLATE.c200;
+const COMPLETED_TEXT_COLOR: Color = tailwind::GREEN.c500;
+
+#[derive(Copy, Clone)]
+enum Status {
+    Todo,
+    Completed,
+}
+
+struct TodoItem<'a> {
+    todo: &'a str,
+    info: &'a str,
+    status: Status,
+}
+
+struct StatefulList<'a> {
     state: ListState,
-    items: Vec<T>,
+    items: Vec<TodoItem<'a>>,
     last_selected: Option<usize>,
 }
 
-impl<T> StatefulList<T> {
-    fn with_items(items: Vec<T>) -> StatefulList<T> {
+/// This struct holds the current state of the app. In particular, it has the `items` field which is
+/// a wrapper around `ListState`. Keeping track of the items state let us render the associated
+/// widget with its state and have access to features such as natural scrolling.
+///
+/// Check the event handling at the bottom to see how to change the state on incoming events.
+/// Check the drawing logic for items on how to specify the highlighting style for selected items.
+struct App<'a> {
+    items: StatefulList<'a>,
+}
+
+fn main() -> Result<(), Box<dyn Error>> {
+    // setup terminal
+    init_error_hooks()?;
+    let terminal = init_terminal()?;
+
+    // create app and run it
+    App::new().run(terminal)?;
+
+    restore_terminal()?;
+
+    Ok(())
+}
+
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
+}
+
+impl<'a> App<'a> {
+    fn new() -> Self {
+        Self {
+            items: StatefulList::with_items([
+                ("Rewrite everything with Rust!", "I can't hold my inner voice. He tells me to rewrite the complete universe with Rust", Status::Todo),
+                ("Rewrite all of your tui apps with Ratatui", "Yes, you heard that right. Go and replace your tui with Ratatui.", Status::Completed),
+                ("Pet your cat", "Minnak loves to be pet by you! Don't forget to pet and give some treats!", Status::Todo),
+                ("Walk with your dog", "Max is bored, go walk with him!", Status::Todo),
+                ("Pay the bills", "Pay the train subscription!!!", Status::Completed),
+                ("Refactor list example", "If you see this info that means I completed this task!", Status::Completed),
+            ]),
+        }
+    }
+
+    /// Changes the status of the selected list item
+    fn change_status(&mut self) {
+        if let Some(i) = self.items.state.selected() {
+            self.items.items[i].status = match self.items.items[i].status {
+                Status::Completed => Status::Todo,
+                Status::Todo => Status::Completed,
+            }
+        }
+    }
+
+    fn go_top(&mut self) {
+        self.items.state.select(Some(0));
+    }
+
+    fn go_bottom(&mut self) {
+        self.items.state.select(Some(self.items.items.len() - 1));
+    }
+}
+
+impl App<'_> {
+    fn run(&mut self, mut terminal: Terminal<impl Backend>) -> io::Result<()> {
+        loop {
+            self.draw(&mut terminal)?;
+
+            if let Event::Key(key) = event::read()? {
+                if key.kind == KeyEventKind::Press {
+                    use KeyCode::*;
+                    match key.code {
+                        Char('q') | Esc => return Ok(()),
+                        Char('h') | Left => self.items.unselect(),
+                        Char('j') | Down => self.items.next(),
+                        Char('k') | Up => self.items.previous(),
+                        Char('l') | Right | Enter => self.change_status(),
+                        Char('g') => self.go_top(),
+                        Char('G') => self.go_bottom(),
+                        _ => {}
+                    }
+                }
+            }
+        }
+    }
+
+    fn draw(&mut self, terminal: &mut Terminal<impl Backend>) -> io::Result<()> {
+        terminal.draw(|f| f.render_widget(self, f.size()))?;
+        Ok(())
+    }
+}
+
+impl Widget for &mut App<'_> {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        // Create a space for header, todo list and the footer.
+        let vertical = Layout::vertical([
+            Constraint::Length(2),
+            Constraint::Min(0),
+            Constraint::Length(2),
+        ]);
+        let [header_area, rest_area, footer_area] = vertical.areas(area);
+
+        // Create two chunks with equal vertical screen space. One for the list and the other for
+        // the info block.
+        let vertical = Layout::vertical([Constraint::Percentage(50), Constraint::Percentage(50)]);
+        let [upper_item_list_area, lower_item_list_area] = vertical.areas(rest_area);
+
+        render_title(header_area, buf);
+        self.render_todo(upper_item_list_area, buf);
+        self.render_info(lower_item_list_area, buf);
+        render_footer(footer_area, buf);
+    }
+}
+
+impl App<'_> {
+    fn render_todo(&mut self, area: Rect, buf: &mut Buffer) {
+        // We create two blocks, one is for the header (outer) and the other is for list (inner).
+        let outer_block = Block::default()
+            .borders(Borders::NONE)
+            .fg(TEXT_COLOR)
+            .bg(TODO_HEADER_BG)
+            .title("TODO List")
+            .title_alignment(Alignment::Center);
+        let inner_block = Block::default()
+            .borders(Borders::NONE)
+            .fg(TEXT_COLOR)
+            .bg(NORMAL_ROW_COLOR);
+
+        // We get the inner area from outer_block. We'll use this area later to render the table.
+        let outer_area = area;
+        let inner_area = outer_block.inner(outer_area);
+
+        // We can render the header in outer_area.
+        outer_block.render(outer_area, buf);
+
+        // Iterate through all elements in the `items` and stylize them.
+        let items: Vec<ListItem> = self
+            .items
+            .items
+            .iter()
+            .enumerate()
+            .map(|(i, todo_item)| todo_item.to_list_item(i))
+            .collect();
+
+        // Create a List from all list items and highlight the currently selected one
+        let items = List::new(items)
+            .block(inner_block)
+            .highlight_style(
+                Style::default()
+                    .add_modifier(Modifier::BOLD)
+                    .add_modifier(Modifier::REVERSED)
+                    .fg(SELECTED_STYLE_FG),
+            )
+            .highlight_symbol(">")
+            .highlight_spacing(HighlightSpacing::Always);
+
+        // We can now render the item list
+        // (look careful we are using StatefulWidget's render.)
+        // ratatui::widgets::StatefulWidget::render as stateful_render
+        StatefulWidget::render(items, inner_area, buf, &mut self.items.state);
+    }
+
+    fn render_info(&self, area: Rect, buf: &mut Buffer) {
+        // We get the info depending on the item's state.
+        let info = if let Some(i) = self.items.state.selected() {
+            match self.items.items[i].status {
+                Status::Completed => "✓ DONE: ".to_string() + self.items.items[i].info,
+                Status::Todo => "TODO: ".to_string() + self.items.items[i].info,
+            }
+        } else {
+            "Nothing to see here...".to_string()
+        };
+
+        // We show the list item's info under the list in this paragraph
+        let outer_info_block = Block::default()
+            .borders(Borders::NONE)
+            .fg(TEXT_COLOR)
+            .bg(TODO_HEADER_BG)
+            .title("TODO Info")
+            .title_alignment(Alignment::Center);
+        let inner_info_block = Block::default()
+            .borders(Borders::NONE)
+            .bg(NORMAL_ROW_COLOR)
+            .padding(Padding::horizontal(1));
+
+        // This is a similar process to what we did for list. outer_info_area will be used for
+        // header inner_info_area will be used for the list info.
+        let outer_info_area = area;
+        let inner_info_area = outer_info_block.inner(outer_info_area);
+
+        // We can render the header. Inner info will be rendered later
+        outer_info_block.render(outer_info_area, buf);
+
+        let info_paragraph = Paragraph::new(info)
+            .block(inner_info_block)
+            .fg(TEXT_COLOR)
+            .wrap(Wrap { trim: false });
+
+        // We can now render the item info
+        info_paragraph.render(inner_info_area, buf);
+    }
+}
+
+fn render_title(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("Ratatui List Example")
+        .bold()
+        .centered()
+        .render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Paragraph::new("\nUse ↓↑ to move, ← to unselect, → to change status, g/G to go top/bottom.")
+        .centered()
+        .render(area, buf);
+}
+
+impl StatefulList<'_> {
+    fn with_items<'a>(items: [(&'a str, &'a str, Status); 6]) -> StatefulList<'a> {
         StatefulList {
             state: ListState::default(),
-            items,
+            items: items.iter().map(TodoItem::from).collect(),
             last_selected: None,
         }
     }
@@ -62,220 +333,30 @@ impl<T> StatefulList<T> {
     }
 }
 
-/// This struct holds the current state of the app. In particular, it has the `items` field which is
-/// a wrapper around `ListState`. Keeping track of the items state let us render the associated
-/// widget with its state and have access to features such as natural scrolling.
-///
-/// Check the event handling at the bottom to see how to change the state on incoming events.
-/// Check the drawing logic for items on how to specify the highlighting style for selected items.
-struct App<'a> {
-    items: StatefulList<(&'a str, usize)>,
-    events: Vec<(&'a str, &'a str)>,
-}
+impl TodoItem<'_> {
+    fn to_list_item(&self, index: usize) -> ListItem {
+        let bg_color = match index % 2 {
+            0 => NORMAL_ROW_COLOR,
+            _ => ALT_ROW_COLOR,
+        };
+        let line = match self.status {
+            Status::Todo => Line::styled(format!(" ☐ {}", self.todo), TEXT_COLOR),
+            Status::Completed => Line::styled(
+                format!(" ✓ {}", self.todo),
+                (COMPLETED_TEXT_COLOR, bg_color),
+            ),
+        };
 
-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            items: StatefulList::with_items(vec![
-                ("Item0", 1),
-                ("Item1", 2),
-                ("Item2", 1),
-                ("Item3", 3),
-                ("Item4", 1),
-                ("Item5", 4),
-                ("Item6", 1),
-                ("Item7", 3),
-                ("Item8", 1),
-                ("Item9", 6),
-                ("Item10", 1),
-                ("Item11", 3),
-                ("Item12", 1),
-                ("Item13", 2),
-                ("Item14", 1),
-                ("Item15", 1),
-                ("Item16", 4),
-                ("Item17", 1),
-                ("Item18", 5),
-                ("Item19", 4),
-                ("Item20", 1),
-                ("Item21", 2),
-                ("Item22", 1),
-                ("Item23", 3),
-                ("Item24", 1),
-            ]),
-            events: vec![
-                ("Event1", "INFO"),
-                ("Event2", "INFO"),
-                ("Event3", "CRITICAL"),
-                ("Event4", "ERROR"),
-                ("Event5", "INFO"),
-                ("Event6", "INFO"),
-                ("Event7", "WARNING"),
-                ("Event8", "INFO"),
-                ("Event9", "INFO"),
-                ("Event10", "INFO"),
-                ("Event11", "CRITICAL"),
-                ("Event12", "INFO"),
-                ("Event13", "INFO"),
-                ("Event14", "INFO"),
-                ("Event15", "INFO"),
-                ("Event16", "INFO"),
-                ("Event17", "ERROR"),
-                ("Event18", "ERROR"),
-                ("Event19", "INFO"),
-                ("Event20", "INFO"),
-                ("Event21", "WARNING"),
-                ("Event22", "INFO"),
-                ("Event23", "INFO"),
-                ("Event24", "WARNING"),
-                ("Event25", "INFO"),
-                ("Event26", "INFO"),
-            ],
-        }
-    }
-
-    /// Rotate through the event list.
-    /// This only exists to simulate some kind of "progress"
-    fn on_tick(&mut self) {
-        let event = self.events.remove(0);
-        self.events.push(event);
+        ListItem::new(line).bg(bg_color)
     }
 }
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let tick_rate = Duration::from_millis(250);
-    let app = App::new();
-    let res = run_app(&mut terminal, app, tick_rate);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
-
-    Ok(())
-}
-
-fn run_app<B: Backend>(
-    terminal: &mut Terminal<B>,
-    mut app: App,
-    tick_rate: Duration,
-) -> io::Result<()> {
-    let mut last_tick = Instant::now();
-    loop {
-        terminal.draw(|f| ui(f, &mut app))?;
-
-        let timeout = tick_rate.saturating_sub(last_tick.elapsed());
-        if crossterm::event::poll(timeout)? {
-            if let Event::Key(key) = event::read()? {
-                if key.kind == KeyEventKind::Press {
-                    match key.code {
-                        KeyCode::Char('q') => return Ok(()),
-                        KeyCode::Left | KeyCode::Char('h') => app.items.unselect(),
-                        KeyCode::Down | KeyCode::Char('j') => app.items.next(),
-                        KeyCode::Up | KeyCode::Char('k') => app.items.previous(),
-                        _ => {}
-                    }
-                }
-            }
-        }
-        if last_tick.elapsed() >= tick_rate {
-            app.on_tick();
-            last_tick = Instant::now();
+impl<'a> From<&(&'a str, &'a str, Status)> for TodoItem<'a> {
+    fn from((todo, info, status): &(&'a str, &'a str, Status)) -> Self {
+        Self {
+            todo,
+            info,
+            status: *status,
         }
     }
 }
-
-fn ui(f: &mut Frame, app: &mut App) {
-    // Create two chunks with equal horizontal screen space
-    let horizontal = Layout::horizontal([Constraint::Percentage(50), Constraint::Percentage(50)]);
-    let [item_list_area, event_list_area] = f.size().split(&horizontal);
-
-    // Iterate through all elements in the `items` app and append some debug text to it.
-    let items: Vec<ListItem> = app
-        .items
-        .items
-        .iter()
-        .map(|i| {
-            let mut lines = vec![Line::from(i.0.bold()).alignment(Alignment::Center)];
-            for _ in 0..i.1 {
-                lines.push(
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        .italic()
-                        .into(),
-                );
-            }
-            ListItem::new(lines).style(Style::default().fg(Color::Black).bg(Color::White))
-        })
-        .collect();
-
-    // Create a List from all list items and highlight the currently selected one
-    let items = List::new(items)
-        .block(Block::default().borders(Borders::ALL).title("List"))
-        .highlight_style(
-            Style::default()
-                .bg(Color::LightGreen)
-                .add_modifier(Modifier::BOLD),
-        )
-        .highlight_symbol(">> ");
-
-    // We can now render the item list
-    f.render_stateful_widget(items, item_list_area, &mut app.items.state);
-
-    // Let's do the same for the events.
-    // The event list doesn't have any state and only displays the current state of the list.
-    let events: Vec<ListItem> = app
-        .events
-        .iter()
-        .rev()
-        .map(|&(event, level)| {
-            // Colorcode the level depending on its type
-            let s = match level {
-                "CRITICAL" => Style::default().fg(Color::Red),
-                "ERROR" => Style::default().fg(Color::Magenta),
-                "WARNING" => Style::default().fg(Color::Yellow),
-                "INFO" => Style::default().fg(Color::Blue),
-                _ => Style::default(),
-            };
-            // Add a example datetime and apply proper spacing between them
-            let header = Line::from(vec![
-                Span::styled(format!("{level:<9}"), s),
-                " ".into(),
-                "2020-01-01 10:00:00".italic(),
-            ]);
-            // The event gets its own line
-            let log = Line::from(vec![event.into()]);
-
-            // Here several things happen:
-            // 1. Add a `---` spacing line above the final list entry
-            // 2. Add the Level + datetime
-            // 3. Add a spacer line
-            // 4. Add the actual event
-            ListItem::new(vec![
-                Line::from("-".repeat(event_list_area.width as usize)),
-                header,
-                Line::from(""),
-                log,
-            ])
-        })
-        .collect();
-    let events_list = List::new(events)
-        .block(Block::default().borders(Borders::ALL).title("List"))
-        .direction(ListDirection::BottomToTop);
-    f.render_widget(events_list, event_list_area);
-}

examples/modifiers.rs

@@ -1,6 +1,22 @@
-/// This example is useful for testing how your terminal emulator handles different modifiers.
-/// It will render a grid of combinations of foreground and background colors with all
-/// modifiers applied to them.
+//! # [Ratatui] Modifiers example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// This example is useful for testing how your terminal emulator handles different modifiers.
+// It will render a grid of combinations of foreground and background colors with all
+// modifiers applied to them.
+
 use std::{
     error::Error,
     io::{self, Stdout},
@@ -15,7 +31,7 @@ use crossterm::{
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
 use itertools::Itertools;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{prelude::*, widgets::Paragraph};
 
 type Result<T> = result::Result<T, Box<dyn Error>>;
 
@@ -35,7 +51,7 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
 
         if event::poll(Duration::from_millis(250))? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
+                if key.code == KeyCode::Char('q') {
                     return Ok(());
                 }
             }
@@ -45,7 +61,7 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>) -> io::Result<()> {
 
 fn ui(frame: &mut Frame) {
     let vertical = Layout::vertical([Constraint::Length(1), Constraint::Min(0)]);
-    let [text_area, main_area] = frame.size().split(&vertical);
+    let [text_area, main_area] = vertical.areas(frame.size());
     frame.render_widget(
         Paragraph::new("Note: not all terminals support all modifiers")
             .style(Style::default().fg(Color::Red).add_modifier(Modifier::BOLD)),
@@ -72,8 +88,8 @@ fn ui(frame: &mut Frame) {
         .chain(Modifier::all().iter())
         .collect_vec();
     let mut index = 0;
-    for bg in colors.iter() {
-        for fg in colors.iter() {
+    for bg in &colors {
+        for fg in &colors {
             for modifier in &all_modifiers {
                 let modifier_name = format!("{modifier:11?}");
                 let padding = (" ").repeat(12 - modifier_name.len());

examples/panic.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Panic Hook example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 //! How to use a panic hook to reset the terminal before printing the panic to
 //! the terminal.
 //!
@@ -20,7 +35,10 @@ use crossterm::{
     event::{self, Event, KeyCode},
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, Paragraph},
+};
 
 type Result<T> = std::result::Result<T, Box<dyn Error>>;
 
@@ -128,7 +146,7 @@ fn ui(f: &mut Frame, app: &App) {
         .title("Panic Handler Demo")
         .borders(Borders::ALL);
 
-    let p = Paragraph::new(text).block(b).alignment(Alignment::Center);
+    let p = Paragraph::new(text).block(b).centered();
 
     f.render_widget(p, f.size());
 }

examples/paragraph.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Paragraph example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     error::Error,
     io,
@@ -9,15 +24,18 @@ use crossterm::{
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, Paragraph, Wrap},
+};
 
 struct App {
     scroll: u16,
 }
 
 impl App {
-    fn new() -> App {
-        App { scroll: 0 }
+    const fn new() -> Self {
+        Self { scroll: 0 }
     }
 
     fn on_tick(&mut self) {
@@ -67,7 +85,7 @@ fn run_app<B: Backend>(
         let timeout = tick_rate.saturating_sub(last_tick.elapsed());
         if crossterm::event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
+                if key.code == KeyCode::Char('q') {
                     return Ok(());
                 }
             }
@@ -132,14 +150,14 @@ fn ui(f: &mut Frame, app: &App) {
     let paragraph = Paragraph::new(text.clone())
         .style(Style::default().fg(Color::Gray))
         .block(create_block("Right alignment, with wrap"))
-        .alignment(Alignment::Right)
+        .right_aligned()
         .wrap(Wrap { trim: true });
     f.render_widget(paragraph, layout[2]);
 
     let paragraph = Paragraph::new(text)
         .style(Style::default().fg(Color::Gray))
         .block(create_block("Center alignment, with wrap, with scroll"))
-        .alignment(Alignment::Center)
+        .centered()
         .wrap(Wrap { trim: true })
         .scroll((app.scroll, 0));
     f.render_widget(paragraph, layout[3]);

examples/popup.rs

@@ -1,3 +1,21 @@
+//! # [Ratatui] Popup example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// See also https://github.com/joshka/tui-popup and
+// https://github.com/sephiroth74/tui-confirm-dialog
+
 use std::{error::Error, io};
 
 use crossterm::{
@@ -5,15 +23,18 @@ use crossterm::{
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, Clear, Paragraph, Wrap},
+};
 
 struct App {
     show_popup: bool,
 }
 
 impl App {
-    fn new() -> App {
-        App { show_popup: false }
+    const fn new() -> Self {
+        Self { show_popup: false }
     }
 }
 
@@ -65,7 +86,7 @@ fn ui(f: &mut Frame, app: &App) {
     let area = f.size();
 
     let vertical = Layout::vertical([Constraint::Percentage(20), Constraint::Percentage(80)]);
-    let [instructions, content] = area.split(&vertical);
+    let [instructions, content] = vertical.areas(area);
 
     let text = if app.show_popup {
         "Press p to close the popup"
@@ -73,7 +94,7 @@ fn ui(f: &mut Frame, app: &App) {
         "Press p to show the popup"
     };
     let paragraph = Paragraph::new(text.slow_blink())
-        .alignment(Alignment::Center)
+        .centered()
         .wrap(Wrap { trim: true });
     f.render_widget(paragraph, instructions);
 

examples/ratatui-logo.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Logo example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     io::{self, stdout},
     thread::sleep,
@@ -7,49 +22,46 @@ use std::{
 use crossterm::terminal::{disable_raw_mode, enable_raw_mode};
 use indoc::indoc;
 use itertools::izip;
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{prelude::*, widgets::Paragraph};
 
 /// A fun example of using half block characters to draw a logo
-fn main() -> io::Result<()> {
+#[allow(clippy::many_single_char_names)]
+fn logo() -> String {
     let r = indoc! {"
             ▄▄▄
             █▄▄▀
             █  █
-        "}
-    .lines();
+        "};
     let a = indoc! {"
              ▄▄
             █▄▄█
             █  █
-        "}
-    .lines();
+        "};
     let t = indoc! {"
             ▄▄▄
              █
              █
-        "}
-    .lines();
+        "};
     let u = indoc! {"
             ▄  ▄
             █  █
             ▀▄▄▀
-        "}
-    .lines();
+        "};
     let i = indoc! {"
             ▄
             █
             █
-        "}
-    .lines();
+        "};
+    izip!(r.lines(), a.lines(), t.lines(), u.lines(), i.lines())
+        .map(|(r, a, t, u, i)| format!("{r:5}{a:5}{t:4}{a:5}{t:4}{u:5}{i:5}"))
+        .collect::<Vec<_>>()
+        .join("\n")
+}
+
+fn main() -> io::Result<()> {
     let mut terminal = init()?;
     terminal.draw(|frame| {
-        let logo = izip!(r, a.clone(), t.clone(), a, t, u, i)
-            .map(|(r, a, t, a2, t2, u, i)| {
-                format!("{:5}{:5}{:4}{:5}{:4}{:5}{:5}", r, a, t, a2, t2, u, i)
-            })
-            .collect::<Vec<_>>()
-            .join("\n");
-        frame.render_widget(Paragraph::new(logo), frame.size());
+        frame.render_widget(Paragraph::new(logo()), frame.size());
     })?;
     sleep(Duration::from_secs(5));
     restore()?;
@@ -57,7 +69,7 @@ fn main() -> io::Result<()> {
     Ok(())
 }
 
-pub fn init() -> io::Result<Terminal<impl Backend>> {
+fn init() -> io::Result<Terminal<impl Backend>> {
     enable_raw_mode()?;
     let options = TerminalOptions {
         viewport: Viewport::Inline(3),
@@ -65,7 +77,7 @@ pub fn init() -> io::Result<Terminal<impl Backend>> {
     Terminal::with_options(CrosstermBackend::new(stdout()), options)
 }
 
-pub fn restore() -> io::Result<()> {
+fn restore() -> io::Result<()> {
     disable_raw_mode()?;
     Ok(())
 }

examples/scrollbar.rs

@@ -1,3 +1,21 @@
+//! # [Ratatui] Scrollbar example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![warn(clippy::pedantic)]
+#![allow(clippy::wildcard_imports)]
+
 use std::{
     error::Error,
     io,
@@ -92,6 +110,7 @@ fn run_app<B: Backend>(
     }
 }
 
+#[allow(clippy::too_many_lines, clippy::cast_possible_truncation)]
 fn ui(f: &mut Frame, app: &mut App) {
     let size = f.size();
 
@@ -118,10 +137,7 @@ fn ui(f: &mut Frame, app: &mut App) {
         Line::from("This is a line".reset()),
         Line::from(vec![
             Span::raw("Masked text: "),
-            Span::styled(
-                Masked::new("password", '*'),
-                Style::default().fg(Color::Red),
-            ),
+            Span::styled(Masked::new("password", '*'), Style::new().fg(Color::Red)),
         ]),
         Line::from("This is a line "),
         Line::from("This is a line   ".red()),
@@ -131,10 +147,7 @@ fn ui(f: &mut Frame, app: &mut App) {
         Line::from("This is a line".reset()),
         Line::from(vec![
             Span::raw("Masked text: "),
-            Span::styled(
-                Masked::new("password", '*'),
-                Style::default().fg(Color::Red),
-            ),
+            Span::styled(Masked::new("password", '*'), Style::new().fg(Color::Red)),
         ]),
     ];
     app.vertical_scroll_state = app.vertical_scroll_state.content_length(text.len());
@@ -142,9 +155,9 @@ fn ui(f: &mut Frame, app: &mut App) {
 
     let create_block = |title: &'static str| Block::bordered().gray().title(title.bold());
 
-    let title = Block::default()
-        .title("Use h j k l or ◄ ▲ ▼ ► to scroll ".bold())
-        .title_alignment(Alignment::Center);
+    let title = Block::new()
+        .title_alignment(Alignment::Center)
+        .title("Use h j k l or ◄ ▲ ▼ ► to scroll ".bold());
     f.render_widget(title, chunks[0]);
 
     let paragraph = Paragraph::new(text.clone())
@@ -153,8 +166,7 @@ fn ui(f: &mut Frame, app: &mut App) {
         .scroll((app.vertical_scroll as u16, 0));
     f.render_widget(paragraph, chunks[1]);
     f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::VerticalRight)
+        Scrollbar::new(ScrollbarOrientation::VerticalRight)
             .begin_symbol(Some("↑"))
             .end_symbol(Some("↓")),
         chunks[1],
@@ -169,8 +181,7 @@ fn ui(f: &mut Frame, app: &mut App) {
         .scroll((app.vertical_scroll as u16, 0));
     f.render_widget(paragraph, chunks[2]);
     f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::VerticalLeft)
+        Scrollbar::new(ScrollbarOrientation::VerticalLeft)
             .symbols(scrollbar::VERTICAL)
             .begin_symbol(None)
             .track_symbol(None)
@@ -190,8 +201,7 @@ fn ui(f: &mut Frame, app: &mut App) {
         .scroll((0, app.horizontal_scroll as u16));
     f.render_widget(paragraph, chunks[3]);
     f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::HorizontalBottom)
+        Scrollbar::new(ScrollbarOrientation::HorizontalBottom)
             .thumb_symbol("🬋")
             .end_symbol(None),
         chunks[3].inner(&Margin {
@@ -209,8 +219,7 @@ fn ui(f: &mut Frame, app: &mut App) {
         .scroll((0, app.horizontal_scroll as u16));
     f.render_widget(paragraph, chunks[4]);
     f.render_stateful_widget(
-        Scrollbar::default()
-            .orientation(ScrollbarOrientation::HorizontalBottom)
+        Scrollbar::new(ScrollbarOrientation::HorizontalBottom)
             .thumb_symbol("░")
             .track_symbol(Some("─")),
         chunks[4].inner(&Margin {

examples/sparkline.rs

@@ -1,3 +1,18 @@
+//! # [Ratatui] Sparkline example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
 use std::{
     error::Error,
     io,
@@ -13,17 +28,20 @@ use rand::{
     distributions::{Distribution, Uniform},
     rngs::ThreadRng,
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, Sparkline},
+};
 
 #[derive(Clone)]
-pub struct RandomSignal {
+struct RandomSignal {
     distribution: Uniform<u64>,
     rng: ThreadRng,
 }
 
 impl RandomSignal {
-    pub fn new(lower: u64, upper: u64) -> RandomSignal {
-        RandomSignal {
+    fn new(lower: u64, upper: u64) -> Self {
+        Self {
             distribution: Uniform::new(lower, upper),
             rng: rand::thread_rng(),
         }
@@ -45,12 +63,12 @@ struct App {
 }
 
 impl App {
-    fn new() -> App {
+    fn new() -> Self {
         let mut signal = RandomSignal::new(0, 100);
         let data1 = signal.by_ref().take(200).collect::<Vec<u64>>();
         let data2 = signal.by_ref().take(200).collect::<Vec<u64>>();
         let data3 = signal.by_ref().take(200).collect::<Vec<u64>>();
-        App {
+        Self {
             signal,
             data1,
             data2,
@@ -112,7 +130,7 @@ fn run_app<B: Backend>(
         let timeout = tick_rate.saturating_sub(last_tick.elapsed());
         if crossterm::event::poll(timeout)? {
             if let Event::Key(key) = event::read()? {
-                if let KeyCode::Char('q') = key.code {
+                if key.code == KeyCode::Char('q') {
                     return Ok(());
                 }
             }

examples/table.rs

@@ -1,3 +1,20 @@
+//! # [Ratatui] Table example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+#![allow(clippy::enum_glob_use, clippy::wildcard_imports)]
+
 use std::{error::Error, io};
 
 use crossterm::{
@@ -33,7 +50,7 @@ struct TableColors {
 }
 
 impl TableColors {
-    fn new(color: &tailwind::Palette) -> Self {
+    const fn new(color: &tailwind::Palette) -> Self {
         Self {
             buffer_bg: tailwind::SLATE.c950,
             header_bg: color.c900,
@@ -54,7 +71,7 @@ struct Data {
 }
 
 impl Data {
-    fn ref_array(&self) -> [&String; 3] {
+    const fn ref_array(&self) -> [&String; 3] {
         [&self.name, &self.address, &self.email]
     }
 
@@ -81,9 +98,9 @@ struct App {
 }
 
 impl App {
-    fn new() -> App {
+    fn new() -> Self {
         let data_vec = generate_fake_names();
-        App {
+        Self {
             state: TableState::default().with_selected(0),
             longest_item_lens: constraint_len_calculator(&data_vec),
             scroll_state: ScrollbarState::new((data_vec.len() - 1) * ITEM_HEIGHT),
@@ -132,7 +149,7 @@ impl App {
     }
 
     pub fn set_colors(&mut self) {
-        self.colors = TableColors::new(&PALETTES[self.color_index])
+        self.colors = TableColors::new(&PALETTES[self.color_index]);
     }
 }
 
@@ -230,8 +247,7 @@ fn render_table(f: &mut Frame, app: &mut App, area: Rect) {
         .fg(app.colors.selected_style_fg);
 
     let header = ["Name", "Address", "Email"]
-        .iter()
-        .cloned()
+        .into_iter()
         .map(Cell::from)
         .collect::<Row>()
         .style(header_style)
@@ -242,9 +258,8 @@ fn render_table(f: &mut Frame, app: &mut App, area: Rect) {
             _ => app.colors.alt_row_color,
         };
         let item = data.ref_array();
-        item.iter()
-            .cloned()
-            .map(|content| Cell::from(Text::from(format!("\n{}\n", content))))
+        item.into_iter()
+            .map(|content| Cell::from(Text::from(format!("\n{content}\n"))))
             .collect::<Row>()
             .style(Style::new().fg(app.colors.row_fg).bg(color))
             .height(4)
@@ -293,6 +308,7 @@ fn constraint_len_calculator(items: &[Data]) -> (u16, u16, u16) {
         .max()
         .unwrap_or(0);
 
+    #[allow(clippy::cast_possible_truncation)]
     (name_len as u16, address_len as u16, email_len as u16)
 }
 
@@ -310,10 +326,10 @@ fn render_scrollbar(f: &mut Frame, app: &mut App, area: Rect) {
     );
 }
 
-fn render_footer(f: &mut Frame, app: &mut App, area: Rect) {
+fn render_footer(f: &mut Frame, app: &App, area: Rect) {
     let info_footer = Paragraph::new(Line::from(INFO_TEXT))
         .style(Style::new().fg(app.colors.row_fg).bg(app.colors.buffer_bg))
-        .alignment(Alignment::Center)
+        .centered()
         .block(
             Block::default()
                 .borders(Borders::ALL)

examples/tabs.rs

@@ -1,109 +1,252 @@
-use std::{error::Error, io};
+//! # [Ratatui] Tabs example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
 
+#![allow(clippy::wildcard_imports, clippy::enum_glob_use)]
+
+use std::io::stdout;
+
+use color_eyre::{config::HookBuilder, Result};
 use crossterm::{
-    event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
-    execute,
+    event::{self, Event, KeyCode, KeyEventKind},
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
+    ExecutableCommand,
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{prelude::*, style::palette::tailwind, widgets::*};
+use strum::{Display, EnumIter, FromRepr, IntoEnumIterator};
 
-struct App<'a> {
-    pub titles: Vec<&'a str>,
-    pub index: usize,
+#[derive(Default)]
+struct App {
+    state: AppState,
+    selected_tab: SelectedTab,
 }
 
-impl<'a> App<'a> {
-    fn new() -> App<'a> {
-        App {
-            titles: vec!["Tab0", "Tab1", "Tab2", "Tab3"],
-            index: 0,
-        }
-    }
-
-    pub fn next(&mut self) {
-        self.index = (self.index + 1) % self.titles.len();
-    }
-
-    pub fn previous(&mut self) {
-        if self.index > 0 {
-            self.index -= 1;
-        } else {
-            self.index = self.titles.len() - 1;
-        }
-    }
+#[derive(Default, Clone, Copy, PartialEq, Eq)]
+enum AppState {
+    #[default]
+    Running,
+    Quitting,
 }
 
-fn main() -> Result<(), Box<dyn Error>> {
-    // setup terminal
-    enable_raw_mode()?;
-    let mut stdout = io::stdout();
-    execute!(stdout, EnterAlternateScreen, EnableMouseCapture)?;
-    let backend = CrosstermBackend::new(stdout);
-    let mut terminal = Terminal::new(backend)?;
-
-    // create app and run it
-    let app = App::new();
-    let res = run_app(&mut terminal, app);
-
-    // restore terminal
-    disable_raw_mode()?;
-    execute!(
-        terminal.backend_mut(),
-        LeaveAlternateScreen,
-        DisableMouseCapture
-    )?;
-    terminal.show_cursor()?;
-
-    if let Err(err) = res {
-        println!("{err:?}");
-    }
+#[derive(Default, Clone, Copy, Display, FromRepr, EnumIter)]
+enum SelectedTab {
+    #[default]
+    #[strum(to_string = "Tab 1")]
+    Tab1,
+    #[strum(to_string = "Tab 2")]
+    Tab2,
+    #[strum(to_string = "Tab 3")]
+    Tab3,
+    #[strum(to_string = "Tab 4")]
+    Tab4,
+}
 
+fn main() -> Result<()> {
+    init_error_hooks()?;
+    let mut terminal = init_terminal()?;
+    App::default().run(&mut terminal)?;
+    restore_terminal()?;
     Ok(())
 }
 
-fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<()> {
-    loop {
-        terminal.draw(|f| ui(f, &app))?;
+impl App {
+    fn run(&mut self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        while self.state == AppState::Running {
+            self.draw(terminal)?;
+            self.handle_events()?;
+        }
+        Ok(())
+    }
 
+    fn draw(&self, terminal: &mut Terminal<impl Backend>) -> Result<()> {
+        terminal.draw(|frame| frame.render_widget(self, frame.size()))?;
+        Ok(())
+    }
+
+    fn handle_events(&mut self) -> std::io::Result<()> {
         if let Event::Key(key) = event::read()? {
             if key.kind == KeyEventKind::Press {
+                use KeyCode::*;
                 match key.code {
-                    KeyCode::Char('q') => return Ok(()),
-                    KeyCode::Right | KeyCode::Char('l') => app.next(),
-                    KeyCode::Left | KeyCode::Char('h') => app.previous(),
+                    Char('l') | Right => self.next_tab(),
+                    Char('h') | Left => self.previous_tab(),
+                    Char('q') | Esc => self.quit(),
                     _ => {}
                 }
             }
         }
+        Ok(())
+    }
+
+    pub fn next_tab(&mut self) {
+        self.selected_tab = self.selected_tab.next();
+    }
+
+    pub fn previous_tab(&mut self) {
+        self.selected_tab = self.selected_tab.previous();
+    }
+
+    pub fn quit(&mut self) {
+        self.state = AppState::Quitting;
     }
 }
 
-fn ui(f: &mut Frame, app: &App) {
-    let area = f.size();
-    let vertical = Layout::vertical([Constraint::Length(3), Constraint::Min(0)]);
-    let [tabs_area, inner_area] = area.split(&vertical);
+impl SelectedTab {
+    /// Get the previous tab, if there is no previous tab return the current tab.
+    fn previous(self) -> Self {
+        let current_index: usize = self as usize;
+        let previous_index = current_index.saturating_sub(1);
+        Self::from_repr(previous_index).unwrap_or(self)
+    }
 
-    let block = Block::default().on_white().black();
-    f.render_widget(block, area);
-    let tabs = app
-        .titles
-        .iter()
-        .map(|t| {
-            let (first, rest) = t.split_at(1);
-            Line::from(vec![first.yellow(), rest.green()])
-        })
-        .collect::<Tabs>()
-        .block(Block::default().borders(Borders::ALL).title("Tabs"))
-        .select(app.index)
-        .style(Style::default().cyan().on_gray())
-        .highlight_style(Style::default().bold().on_black());
-    f.render_widget(tabs, tabs_area);
-    let inner = match app.index {
-        0 => Block::default().title("Inner 0").borders(Borders::ALL),
-        1 => Block::default().title("Inner 1").borders(Borders::ALL),
-        2 => Block::default().title("Inner 2").borders(Borders::ALL),
-        3 => Block::default().title("Inner 3").borders(Borders::ALL),
-        _ => unreachable!(),
-    };
-    f.render_widget(inner, inner_area);
+    /// Get the next tab, if there is no next tab return the current tab.
+    fn next(self) -> Self {
+        let current_index = self as usize;
+        let next_index = current_index.saturating_add(1);
+        Self::from_repr(next_index).unwrap_or(self)
+    }
+}
+
+impl Widget for &App {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        use Constraint::*;
+        let vertical = Layout::vertical([Length(1), Min(0), Length(1)]);
+        let [header_area, inner_area, footer_area] = vertical.areas(area);
+
+        let horizontal = Layout::horizontal([Min(0), Length(20)]);
+        let [tabs_area, title_area] = horizontal.areas(header_area);
+
+        render_title(title_area, buf);
+        self.render_tabs(tabs_area, buf);
+        self.selected_tab.render(inner_area, buf);
+        render_footer(footer_area, buf);
+    }
+}
+
+impl App {
+    fn render_tabs(&self, area: Rect, buf: &mut Buffer) {
+        let titles = SelectedTab::iter().map(SelectedTab::title);
+        let highlight_style = (Color::default(), self.selected_tab.palette().c700);
+        let selected_tab_index = self.selected_tab as usize;
+        Tabs::new(titles)
+            .highlight_style(highlight_style)
+            .select(selected_tab_index)
+            .padding("", "")
+            .divider(" ")
+            .render(area, buf);
+    }
+}
+
+fn render_title(area: Rect, buf: &mut Buffer) {
+    "Ratatui Tabs Example".bold().render(area, buf);
+}
+
+fn render_footer(area: Rect, buf: &mut Buffer) {
+    Line::raw("◄ ► to change tab | Press q to quit")
+        .centered()
+        .render(area, buf);
+}
+
+impl Widget for SelectedTab {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        // in a real app these might be separate widgets
+        match self {
+            Self::Tab1 => self.render_tab0(area, buf),
+            Self::Tab2 => self.render_tab1(area, buf),
+            Self::Tab3 => self.render_tab2(area, buf),
+            Self::Tab4 => self.render_tab3(area, buf),
+        }
+    }
+}
+
+impl SelectedTab {
+    /// Return tab's name as a styled `Line`
+    fn title(self) -> Line<'static> {
+        format!("  {self}  ")
+            .fg(tailwind::SLATE.c200)
+            .bg(self.palette().c900)
+            .into()
+    }
+
+    fn render_tab0(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Hello, World!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab1(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Welcome to the Ratatui tabs example!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab2(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("Look! I'm different than others!")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    fn render_tab3(self, area: Rect, buf: &mut Buffer) {
+        Paragraph::new("I know, these are some basic changes. But I think you got the main idea.")
+            .block(self.block())
+            .render(area, buf);
+    }
+
+    /// A block surrounding the tab's content
+    fn block(self) -> Block<'static> {
+        Block::default()
+            .borders(Borders::ALL)
+            .border_set(symbols::border::PROPORTIONAL_TALL)
+            .padding(Padding::horizontal(1))
+            .border_style(self.palette().c700)
+    }
+
+    const fn palette(self) -> tailwind::Palette {
+        match self {
+            Self::Tab1 => tailwind::BLUE,
+            Self::Tab2 => tailwind::EMERALD,
+            Self::Tab3 => tailwind::INDIGO,
+            Self::Tab4 => tailwind::RED,
+        }
+    }
+}
+
+fn init_error_hooks() -> color_eyre::Result<()> {
+    let (panic, error) = HookBuilder::default().into_hooks();
+    let panic = panic.into_panic_hook();
+    let error = error.into_eyre_hook();
+    color_eyre::eyre::set_hook(Box::new(move |e| {
+        let _ = restore_terminal();
+        error(e)
+    }))?;
+    std::panic::set_hook(Box::new(move |info| {
+        let _ = restore_terminal();
+        panic(info);
+    }));
+    Ok(())
+}
+
+fn init_terminal() -> color_eyre::Result<Terminal<impl Backend>> {
+    enable_raw_mode()?;
+    stdout().execute(EnterAlternateScreen)?;
+    let backend = CrosstermBackend::new(stdout());
+    let terminal = Terminal::new(backend)?;
+    Ok(terminal)
+}
+
+fn restore_terminal() -> color_eyre::Result<()> {
+    disable_raw_mode()?;
+    stdout().execute(LeaveAlternateScreen)?;
+    Ok(())
 }

examples/user_input.rs

@@ -1,25 +1,43 @@
+//! # [Ratatui] User Input example
+//!
+//! The latest version of this example is available in the [examples] folder in the repository.
+//!
+//! Please note that the examples are designed to be run against the `main` branch of the Github
+//! repository. This means that you may not be able to compile with the latest release version on
+//! crates.io, or the one that you have installed locally.
+//!
+//! See the [examples readme] for more information on finding examples that match the version of the
+//! library you are using.
+//!
+//! [Ratatui]: https://github.com/ratatui-org/ratatui
+//! [examples]: https://github.com/ratatui-org/ratatui/blob/main/examples
+//! [examples readme]: https://github.com/ratatui-org/ratatui/blob/main/examples/README.md
+
+// A simple example demonstrating how to handle user input. This is a bit out of the scope of
+// the library as it does not provide any input handling out of the box. However, it may helps
+// some to get started.
+//
+// This is a very simple example:
+//   * An input box always focused. Every character you type is registered here.
+//   * An entered character is inserted at the cursor position.
+//   * Pressing Backspace erases the left character before the cursor position
+//   * Pressing Enter pushes the current input in the history of previous messages. **Note: ** as
+//   this is a relatively simple example unicode characters are unsupported and their use will
+// result in undefined behaviour.
+//
+// See also https://github.com/rhysd/tui-textarea and https://github.com/sayanarijit/tui-input/
+
 use std::{error::Error, io};
 
-/// A simple example demonstrating how to handle user input. This is
-/// a bit out of the scope of the library as it does not provide any
-/// input handling out of the box. However, it may helps some to get
-/// started.
-///
-/// This is a very simple example:
-///   * An input box always focused. Every character you type is registered
-///   here.
-///   * An entered character is inserted at the cursor position.
-///   * Pressing Backspace erases the left character before the cursor position
-///   * Pressing Enter pushes the current input in the history of previous
-///   messages.
-/// **Note: ** as this is a relatively simple example unicode characters are unsupported and
-/// their use will result in undefined behaviour.
 use crossterm::{
     event::{self, DisableMouseCapture, EnableMouseCapture, Event, KeyCode, KeyEventKind},
     execute,
     terminal::{disable_raw_mode, enable_raw_mode, EnterAlternateScreen, LeaveAlternateScreen},
 };
-use ratatui::{prelude::*, widgets::*};
+use ratatui::{
+    prelude::*,
+    widgets::{Block, Borders, List, ListItem, Paragraph},
+};
 
 enum InputMode {
     Normal,
@@ -38,18 +56,16 @@ struct App {
     messages: Vec<String>,
 }
 
-impl Default for App {
-    fn default() -> App {
-        App {
+impl App {
+    const fn new() -> Self {
+        Self {
             input: String::new(),
             input_mode: InputMode::Normal,
             messages: Vec::new(),
             cursor_position: 0,
         }
     }
-}
 
-impl App {
     fn move_cursor_left(&mut self) {
         let cursor_moved_left = self.cursor_position.saturating_sub(1);
         self.cursor_position = self.clamp_cursor(cursor_moved_left);
@@ -112,7 +128,7 @@ fn main() -> Result<(), Box<dyn Error>> {
     let mut terminal = Terminal::new(backend)?;
 
     // create app and run it
-    let app = App::default();
+    let app = App::new();
     let res = run_app(&mut terminal, app);
 
     // restore terminal
@@ -165,7 +181,7 @@ fn run_app<B: Backend>(terminal: &mut Terminal<B>, mut app: App) -> io::Result<(
                     }
                     _ => {}
                 },
-                _ => {}
+                InputMode::Editing => {}
             }
         }
     }
@@ -177,7 +193,7 @@ fn ui(f: &mut Frame, app: &App) {
         Constraint::Length(3),
         Constraint::Min(1),
     ]);
-    let [help_area, input_area, messages_area] = f.size().split(&vertical);
+    let [help_area, input_area, messages_area] = vertical.areas(f.size());
 
     let (msg, style) = match app.input_mode {
         InputMode::Normal => (
@@ -220,13 +236,14 @@ fn ui(f: &mut Frame, app: &App) {
         InputMode::Editing => {
             // Make the cursor visible and ask ratatui to put it at the specified coordinates after
             // rendering
+            #[allow(clippy::cast_possible_truncation)]
             f.set_cursor(
                 // Draw the cursor at the current position in the input field.
                 // This position is can be controlled via the left and right arrow key
                 input_area.x + app.cursor_position as u16 + 1,
                 // Move one line down, from the border to the input line
                 input_area.y + 1,
-            )
+            );
         }
     }
 

examples/vhs/custom_widget.tape

@@ -18,4 +18,4 @@ Space
 Left
 Space
 Left
-Space
+Space

examples/vhs/demo2-destroy.tape

@@ -15,4 +15,4 @@ Enter
 Sleep 2s
 Show
 Type "d"
-Sleep 30s
+Sleep 30s

examples/vhs/demo2-social.tape

@@ -40,4 +40,4 @@ Tab
 # Weather
 Set TypingSpeed 100ms
 Down 40
-Sleep 2s
+Sleep 2s

examples/vhs/demo2.tape

@@ -46,4 +46,4 @@ Tab
 Screenshot "target/demo2-weather.png"
 Set TypingSpeed 100ms
 Down 40
-Sleep 2s
+Sleep 2s

examples/vhs/gauge.tape

@@ -3,10 +3,12 @@
 Output "target/gauge.gif"
 Set Theme "Aardvark Blue"
 Set Width 1200
-Set Height 550
+Set Height 850
 Hide
 Type "cargo run --example=gauge --features=crossterm"
 Enter
-Sleep 1s
+Sleep 2s
 Show
-Sleep 20s
+Sleep 2s
+Enter 1
+Sleep 15s

examples/vhs/generate.bash

@@ -25,12 +25,12 @@ set -o pipefail
 # ensure that running each example doesn't have to wait for the build
 cargo build --examples --features=crossterm,all-widgets
 
-for tape in examples/*.tape; do
-    gif=${tape/examples\//}
-    gif=${gif/.tape/.gif}
-    ~/go/bin/vhs $tape --quiet
+for tape_path in examples/vhs/*.tape; do
+    tape_file=${tape_path/examples\/vhs\//} # strip the examples/vhs/ prefix
+    gif_file=${tape_file/.tape/.gif}        # replace the .tape suffix with .gif
+    ~/go/bin/vhs $tape_path --quiet
     # this can be pasted into the examples README.md
-    echo "[${gif}]: https://github.com/ratatui-org/ratatui/blob/images/examples/${gif}?raw=true"
+    echo "[${gif_file}]: https://github.com/ratatui-org/ratatui/blob/images/examples/${gif_file}?raw=true"
 done
 git switch images
 git pull --rebase upstream images

examples/vhs/list.tape

@@ -3,13 +3,22 @@
 Output "target/list.gif"
 Set Theme "Aardvark Blue"
 Set Width 1200
-Set Height 600
+Set Height 612
 Hide
 Type "cargo run --example=list --features=crossterm"
 Enter
-Sleep 1s
+Sleep 10s
 Show
-Down@1s 4
-Up@1s 2
+Sleep 2s
+Down@1.5s 3
+Right@1.5s 1
+Sleep 1.5s
+Down@1.5s 3
+Sleep 1.5s
+Up@1s 1
+Sleep 1s
+Right@1.5s 1
+Sleep 1.5s
+Up@1s 4
 Left@1s 1
-Sleep 5s
+Sleep 2s

examples/vhs/tabs.tape

@@ -3,12 +3,13 @@
 Output "target/tabs.gif"
 Set Theme "Aardvark Blue"
 Set Width 1200
-Set Height 300
+Set Height 368
 Hide
 Type "cargo run --example=tabs --features=crossterm"
 Enter
-Sleep 1s
+Sleep 2s
 Show
-Right@1s 4
-Left@1s 2
-Sleep 5s
+Sleep 1s
+Right@2.5s 3
+Left@2.5s 3
+Sleep 2s

src/backend/crossterm.rs

@@ -97,8 +97,8 @@ where
     /// # use ratatui::prelude::*;
     /// let backend = CrosstermBackend::new(stdout());
     /// ```
-    pub fn new(writer: W) -> CrosstermBackend<W> {
-        CrosstermBackend { writer }
+    pub const fn new(writer: W) -> Self {
+        Self { writer }
     }
 }
 
@@ -252,25 +252,25 @@ where
 impl From<Color> for CColor {
     fn from(color: Color) -> Self {
         match color {
-            Color::Reset => CColor::Reset,
-            Color::Black => CColor::Black,
-            Color::Red => CColor::DarkRed,
-            Color::Green => CColor::DarkGreen,
-            Color::Yellow => CColor::DarkYellow,
-            Color::Blue => CColor::DarkBlue,
-            Color::Magenta => CColor::DarkMagenta,
-            Color::Cyan => CColor::DarkCyan,
-            Color::Gray => CColor::Grey,
-            Color::DarkGray => CColor::DarkGrey,
-            Color::LightRed => CColor::Red,
-            Color::LightGreen => CColor::Green,
-            Color::LightBlue => CColor::Blue,
-            Color::LightYellow => CColor::Yellow,
-            Color::LightMagenta => CColor::Magenta,
-            Color::LightCyan => CColor::Cyan,
-            Color::White => CColor::White,
-            Color::Indexed(i) => CColor::AnsiValue(i),
-            Color::Rgb(r, g, b) => CColor::Rgb { r, g, b },
+            Color::Reset => Self::Reset,
+            Color::Black => Self::Black,
+            Color::Red => Self::DarkRed,
+            Color::Green => Self::DarkGreen,
+            Color::Yellow => Self::DarkYellow,
+            Color::Blue => Self::DarkBlue,
+            Color::Magenta => Self::DarkMagenta,
+            Color::Cyan => Self::DarkCyan,
+            Color::Gray => Self::Grey,
+            Color::DarkGray => Self::DarkGrey,
+            Color::LightRed => Self::Red,
+            Color::LightGreen => Self::Green,
+            Color::LightBlue => Self::Blue,
+            Color::LightYellow => Self::Yellow,
+            Color::LightMagenta => Self::Magenta,
+            Color::LightCyan => Self::Cyan,
+            Color::White => Self::White,
+            Color::Indexed(i) => Self::AnsiValue(i),
+            Color::Rgb(r, g, b) => Self::Rgb { r, g, b },
         }
     }
 }
@@ -304,14 +304,13 @@ impl From<CColor> for Color {
 /// The `ModifierDiff` struct is used to calculate the difference between two `Modifier`
 /// values. This is useful when updating the terminal display, as it allows for more
 /// efficient updates by only sending the necessary changes.
-#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct ModifierDiff {
     pub from: Modifier,
     pub to: Modifier,
 }
 
 impl ModifierDiff {
-    fn queue<W>(&self, mut w: W) -> io::Result<()>
+    fn queue<W>(self, mut w: W) -> io::Result<()>
     where
         W: io::Write,
     {
@@ -377,22 +376,22 @@ impl From<CAttribute> for Modifier {
         // `Attribute*s*` (note the *s*) contains multiple `Attribute`
         // We convert `Attribute` to `Attribute*s*` (containing only 1 value) to avoid implementing
         // the conversion again
-        Modifier::from(CAttributes::from(value))
+        Self::from(CAttributes::from(value))
     }
 }
 
 impl From<CAttributes> for Modifier {
     fn from(value: CAttributes) -> Self {
-        let mut res = Modifier::empty();
+        let mut res = Self::empty();
 
         if value.has(CAttribute::Bold) {
-            res |= Modifier::BOLD;
+            res |= Self::BOLD;
         }
         if value.has(CAttribute::Dim) {
-            res |= Modifier::DIM;
+            res |= Self::DIM;
         }
         if value.has(CAttribute::Italic) {
-            res |= Modifier::ITALIC;
+            res |= Self::ITALIC;
         }
         if value.has(CAttribute::Underlined)
             || value.has(CAttribute::DoubleUnderlined)
@@ -400,22 +399,22 @@ impl From<CAttributes> for Modifier {
             || value.has(CAttribute::Underdotted)
             || value.has(CAttribute::Underdashed)
         {
-            res |= Modifier::UNDERLINED;
+            res |= Self::UNDERLINED;
         }
         if value.has(CAttribute::SlowBlink) {
-            res |= Modifier::SLOW_BLINK;
+            res |= Self::SLOW_BLINK;
         }
         if value.has(CAttribute::RapidBlink) {
-            res |= Modifier::RAPID_BLINK;
+            res |= Self::RAPID_BLINK;
         }
         if value.has(CAttribute::Reverse) {
-            res |= Modifier::REVERSED;
+            res |= Self::REVERSED;
         }
         if value.has(CAttribute::Hidden) {
-            res |= Modifier::HIDDEN;
+            res |= Self::HIDDEN;
         }
         if value.has(CAttribute::CrossedOut) {
-            res |= Modifier::CROSSED_OUT;
+            res |= Self::CROSSED_OUT;
         }
 
         res
@@ -449,10 +448,10 @@ impl From<ContentStyle> for Style {
         }
 
         Self {
-            fg: value.foreground_color.map(|c| c.into()),
-            bg: value.background_color.map(|c| c.into()),
+            fg: value.foreground_color.map(Into::into),
+            bg: value.background_color.map(Into::into),
             #[cfg(feature = "underline-color")]
-            underline_color: value.underline_color.map(|c| c.into()),
+            underline_color: value.underline_color.map(Into::into),
             add_modifier: value.attributes.into(),
             sub_modifier,
         }
@@ -668,6 +667,6 @@ mod tests {
                 ..Default::default()
             }),
             Style::default().underline_color(Color::Red)
-        )
+        );
     }
 }

src/backend/termion.rs

@@ -82,8 +82,8 @@ where
     /// # use ratatui::prelude::*;
     /// let backend = TermionBackend::new(stdout());
     /// ```
-    pub fn new(writer: W) -> TermionBackend<W> {
-        TermionBackend { writer }
+    pub const fn new(writer: W) -> Self {
+        Self { writer }
     }
 }
 
@@ -209,16 +209,13 @@ where
         self.writer.flush()
     }
 }
-#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct Fg(Color);
 
-#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct Bg(Color);
 
 /// The `ModifierDiff` struct is used to calculate the difference between two `Modifier`
 /// values. This is useful when updating the terminal display, as it allows for more
 /// efficient updates by only sending the necessary changes.
-#[derive(Debug, Default, Clone, Copy, Eq, PartialEq, Hash)]
 struct ModifierDiff {
     from: Modifier,
     to: Modifier,
@@ -319,37 +316,37 @@ from_termion_for_color!(LightWhite, White);
 
 impl From<tcolor::AnsiValue> for Color {
     fn from(value: tcolor::AnsiValue) -> Self {
-        Color::Indexed(value.0)
+        Self::Indexed(value.0)
     }
 }
 
 impl From<tcolor::Bg<tcolor::AnsiValue>> for Style {
     fn from(value: tcolor::Bg<tcolor::AnsiValue>) -> Self {
-        Style::default().bg(Color::Indexed(value.0 .0))
+        Self::default().bg(Color::Indexed(value.0 .0))
     }
 }
 
 impl From<tcolor::Fg<tcolor::AnsiValue>> for Style {
     fn from(value: tcolor::Fg<tcolor::AnsiValue>) -> Self {
-        Style::default().fg(Color::Indexed(value.0 .0))
+        Self::default().fg(Color::Indexed(value.0 .0))
     }
 }
 
 impl From<tcolor::Rgb> for Color {
     fn from(value: tcolor::Rgb) -> Self {
-        Color::Rgb(value.0, value.1, value.2)
+        Self::Rgb(value.0, value.1, value.2)
     }
 }
 
 impl From<tcolor::Bg<tcolor::Rgb>> for Style {
     fn from(value: tcolor::Bg<tcolor::Rgb>) -> Self {
-        Style::default().bg(Color::Rgb(value.0 .0, value.0 .1, value.0 .2))
+        Self::default().bg(Color::Rgb(value.0 .0, value.0 .1, value.0 .2))
     }
 }
 
 impl From<tcolor::Fg<tcolor::Rgb>> for Style {
     fn from(value: tcolor::Fg<tcolor::Rgb>) -> Self {
-        Style::default().fg(Color::Rgb(value.0 .0, value.0 .1, value.0 .2))
+        Self::default().fg(Color::Rgb(value.0 .0, value.0 .1, value.0 .2))
     }
 }
 
@@ -438,7 +435,7 @@ from_termion_for_modifier!(Blink, SLOW_BLINK);
 
 impl From<termion::style::Reset> for Modifier {
     fn from(_: termion::style::Reset) -> Self {
-        Modifier::empty()
+        Self::empty()
     }
 }
 

src/backend/termwiz.rs

@@ -84,23 +84,23 @@ impl TermwizBackend {
     /// let backend = TermwizBackend::new()?;
     /// # Ok::<(), Box<dyn std::error::Error>>(())
     /// ```
-    pub fn new() -> Result<TermwizBackend, Box<dyn Error>> {
+    pub fn new() -> Result<Self, Box<dyn Error>> {
         let mut buffered_terminal =
             BufferedTerminal::new(SystemTerminal::new(Capabilities::new_from_env()?)?)?;
         buffered_terminal.terminal().set_raw_mode()?;
         buffered_terminal.terminal().enter_alternate_screen()?;
-        Ok(TermwizBackend { buffered_terminal })
+        Ok(Self { buffered_terminal })
     }
 
     /// Creates a new Termwiz backend instance with the given buffered terminal.
-    pub fn with_buffered_terminal(instance: BufferedTerminal<SystemTerminal>) -> TermwizBackend {
-        TermwizBackend {
+    pub const fn with_buffered_terminal(instance: BufferedTerminal<SystemTerminal>) -> Self {
+        Self {
             buffered_terminal: instance,
         }
     }
 
     /// Returns a reference to the buffered terminal used by the backend.
-    pub fn buffered_terminal(&self) -> &BufferedTerminal<SystemTerminal> {
+    pub const fn buffered_terminal(&self) -> &BufferedTerminal<SystemTerminal> {
         &self.buffered_terminal
     }
 
@@ -251,7 +251,7 @@ impl Backend for TermwizBackend {
 
 impl From<CellAttributes> for Style {
     fn from(value: CellAttributes) -> Self {
-        let mut style = Style::new()
+        let mut style = Self::new()
             .add_modifier(value.intensity().into())
             .add_modifier(value.underline().into())
             .add_modifier(value.blink().into());
@@ -283,9 +283,9 @@ impl From<CellAttributes> for Style {
 impl From<Intensity> for Modifier {
     fn from(value: Intensity) -> Self {
         match value {
-            Intensity::Normal => Modifier::empty(),
-            Intensity::Bold => Modifier::BOLD,
-            Intensity::Half => Modifier::DIM,
+            Intensity::Normal => Self::empty(),
+            Intensity::Bold => Self::BOLD,
+            Intensity::Half => Self::DIM,
         }
     }
 }
@@ -293,8 +293,8 @@ impl From<Intensity> for Modifier {
 impl From<Underline> for Modifier {
     fn from(value: Underline) -> Self {
         match value {
-            Underline::None => Modifier::empty(),
-            _ => Modifier::UNDERLINED,
+            Underline::None => Self::empty(),
+            _ => Self::UNDERLINED,
         }
     }
 }
@@ -302,17 +302,17 @@ impl From<Underline> for Modifier {
 impl From<Blink> for Modifier {
     fn from(value: Blink) -> Self {
         match value {
-            Blink::None => Modifier::empty(),
-            Blink::Slow => Modifier::SLOW_BLINK,
-            Blink::Rapid => Modifier::RAPID_BLINK,
+            Blink::None => Self::empty(),
+            Blink::Slow => Self::SLOW_BLINK,
+            Blink::Rapid => Self::RAPID_BLINK,
         }
     }
 }
 
 impl From<Color> for ColorAttribute {
-    fn from(color: Color) -> ColorAttribute {
+    fn from(color: Color) -> Self {
         match color {
-            Color::Reset => ColorAttribute::Default,
+            Color::Reset => Self::Default,
             Color::Black => AnsiColor::Black.into(),
             Color::DarkGray => AnsiColor::Grey.into(),
             Color::Gray => AnsiColor::Silver.into(),
@@ -329,10 +329,8 @@ impl From<Color> for ColorAttribute {
             Color::White => AnsiColor::White.into(),
             Color::Blue => AnsiColor::Navy.into(),
             Color::LightBlue => AnsiColor::Blue.into(),
-            Color::Indexed(i) => ColorAttribute::PaletteIndex(i),
-            Color::Rgb(r, g, b) => {
-                ColorAttribute::TrueColorWithDefaultFallback(SrgbaTuple::from((r, g, b)))
-            }
+            Color::Indexed(i) => Self::PaletteIndex(i),
+            Color::Rgb(r, g, b) => Self::TrueColorWithDefaultFallback(SrgbaTuple::from((r, g, b))),
         }
     }
 }
@@ -340,22 +338,22 @@ impl From<Color> for ColorAttribute {
 impl From<AnsiColor> for Color {
     fn from(value: AnsiColor) -> Self {
         match value {
-            AnsiColor::Black => Color::Black,
-            AnsiColor::Grey => Color::DarkGray,
-            AnsiColor::Silver => Color::Gray,
-            AnsiColor::Maroon => Color::Red,
-            AnsiColor::Red => Color::LightRed,
-            AnsiColor::Green => Color::Green,
-            AnsiColor::Lime => Color::LightGreen,
-            AnsiColor::Olive => Color::Yellow,
-            AnsiColor::Yellow => Color::LightYellow,
-            AnsiColor::Purple => Color::Magenta,
-            AnsiColor::Fuchsia => Color::LightMagenta,
-            AnsiColor::Teal => Color::Cyan,
-            AnsiColor::Aqua => Color::LightCyan,
-            AnsiColor::White => Color::White,
-            AnsiColor::Navy => Color::Blue,
-            AnsiColor::Blue => Color::LightBlue,
+            AnsiColor::Black => Self::Black,
+            AnsiColor::Grey => Self::DarkGray,
+            AnsiColor::Silver => Self::Gray,
+            AnsiColor::Maroon => Self::Red,
+            AnsiColor::Red => Self::LightRed,
+            AnsiColor::Green => Self::Green,
+            AnsiColor::Lime => Self::LightGreen,
+            AnsiColor::Olive => Self::Yellow,
+            AnsiColor::Yellow => Self::LightYellow,
+            AnsiColor::Purple => Self::Magenta,
+            AnsiColor::Fuchsia => Self::LightMagenta,
+            AnsiColor::Teal => Self::Cyan,
+            AnsiColor::Aqua => Self::LightCyan,
+            AnsiColor::White => Self::White,
+            AnsiColor::Navy => Self::Blue,
+            AnsiColor::Blue => Self::LightBlue,
         }
     }
 }
@@ -365,8 +363,8 @@ impl From<ColorAttribute> for Color {
         match value {
             ColorAttribute::TrueColorWithDefaultFallback(srgba)
             | ColorAttribute::TrueColorWithPaletteFallback(srgba, _) => srgba.into(),
-            ColorAttribute::PaletteIndex(i) => Color::Indexed(i),
-            ColorAttribute::Default => Color::Reset,
+            ColorAttribute::PaletteIndex(i) => Self::Indexed(i),
+            ColorAttribute::Default => Self::Reset,
         }
     }
 }
@@ -374,8 +372,8 @@ impl From<ColorAttribute> for Color {
 impl From<ColorSpec> for Color {
     fn from(value: ColorSpec) -> Self {
         match value {
-            ColorSpec::Default => Color::Reset,
-            ColorSpec::PaletteIndex(i) => Color::Indexed(i),
+            ColorSpec::Default => Self::Reset,
+            ColorSpec::PaletteIndex(i) => Self::Indexed(i),
             ColorSpec::TrueColor(srgba) => srgba.into(),
         }
     }
@@ -384,14 +382,14 @@ impl From<ColorSpec> for Color {
 impl From<SrgbaTuple> for Color {
     fn from(value: SrgbaTuple) -> Self {
         let (r, g, b, _) = value.to_srgb_u8();
-        Color::Rgb(r, g, b)
+        Self::Rgb(r, g, b)
     }
 }
 
 impl From<RgbColor> for Color {
     fn from(value: RgbColor) -> Self {
         let (r, g, b) = value.to_tuple_rgb8();
-        Color::Rgb(r, g, b)
+        Self::Rgb(r, g, b)
     }
 }
 

src/backend/test.rs

@@ -9,6 +9,7 @@ use std::{
 use unicode_width::UnicodeWidthStr;
 
 use crate::{
+    assert_buffer_eq,
     backend::{Backend, ClearType, WindowSize},
     buffer::{Buffer, Cell},
     layout::{Rect, Size},
@@ -72,9 +73,9 @@ fn buffer_view(buffer: &Buffer) -> String {
 }
 
 impl TestBackend {
-    /// Creates a new TestBackend with the specified width and height.
-    pub fn new(width: u16, height: u16) -> TestBackend {
-        TestBackend {
+    /// Creates a new `TestBackend` with the specified width and height.
+    pub fn new(width: u16, height: u16) -> Self {
+        Self {
             width,
             height,
             buffer: Buffer::empty(Rect::new(0, 0, width, height)),
@@ -83,60 +84,29 @@ impl TestBackend {
         }
     }
 
-    /// Returns a reference to the internal buffer of the TestBackend.
-    pub fn buffer(&self) -> &Buffer {
+    /// Returns a reference to the internal buffer of the `TestBackend`.
+    pub const fn buffer(&self) -> &Buffer {
         &self.buffer
     }
 
-    /// Resizes the TestBackend to the specified width and height.
+    /// Resizes the `TestBackend` to the specified width and height.
     pub fn resize(&mut self, width: u16, height: u16) {
         self.buffer.resize(Rect::new(0, 0, width, height));
         self.width = width;
         self.height = height;
     }
 
-    /// Asserts that the TestBackend's buffer is equal to the expected buffer.
+    /// Asserts that the `TestBackend`'s buffer is equal to the expected buffer.
     /// If the buffers are not equal, a panic occurs with a detailed error message
     /// showing the differences between the expected and actual buffers.
     #[track_caller]
     pub fn assert_buffer(&self, expected: &Buffer) {
-        assert_eq!(expected.area, self.buffer.area);
-        let diff = expected.diff(&self.buffer);
-        if diff.is_empty() {
-            return;
-        }
-
-        let mut debug_info = String::from("Buffers are not equal");
-        debug_info.push('\n');
-        debug_info.push_str("Expected:");
-        debug_info.push('\n');
-        let expected_view = buffer_view(expected);
-        debug_info.push_str(&expected_view);
-        debug_info.push('\n');
-        debug_info.push_str("Got:");
-        debug_info.push('\n');
-        let view = buffer_view(&self.buffer);
-        debug_info.push_str(&view);
-        debug_info.push('\n');
-
-        debug_info.push_str("Diff:");
-        debug_info.push('\n');
-        let nice_diff = diff
-            .iter()
-            .enumerate()
-            .map(|(i, (x, y, cell))| {
-                let expected_cell = expected.get(*x, *y);
-                format!("{i}: at ({x}, {y}) expected {expected_cell:?} got {cell:?}")
-            })
-            .collect::<Vec<String>>()
-            .join("\n");
-        debug_info.push_str(&nice_diff);
-        panic!("{debug_info}");
+        assert_buffer_eq!(&self.buffer, expected);
     }
 }
 
 impl Display for TestBackend {
-    /// Formats the TestBackend for display by calling the buffer_view function
+    /// Formats the `TestBackend` for display by calling the `buffer_view` function
     /// on its internal buffer.
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         write!(f, "{}", buffer_view(&self.buffer))
@@ -297,7 +267,6 @@ mod tests {
             format!(
                 r#""{multi_byte_char}" Hidden by multi-width symbols: [(1, " "), (2, " "), (3, " "), (4, " "), (5, " "), (6, " "), (7, " ")]
 "#,
-                multi_byte_char = multi_byte_char
             )
         );
     }
@@ -323,7 +292,7 @@ mod tests {
     }
 
     #[test]
-    #[should_panic]
+    #[should_panic = "buffer contents not equal"]
     fn assert_buffer_panics() {
         let backend = TestBackend::new(10, 2);
         let buffer = Buffer::with_lines(vec!["aaaaaaaaaa"; 2]);
@@ -333,7 +302,7 @@ mod tests {
     #[test]
     fn display() {
         let backend = TestBackend::new(10, 2);
-        assert_eq!(format!("{}", backend), "\"          \"\n\"          \"\n");
+        assert_eq!(format!("{backend}"), "\"          \"\n\"          \"\n");
     }
 
     #[test]

src/buffer/assert.rs

@@ -63,7 +63,7 @@ mod tests {
         assert_buffer_eq!(buffer, other_buffer);
     }
 
-    #[should_panic]
+    #[should_panic = "buffer areas not equal"]
     #[test]
     fn assert_buffer_eq_panics_on_unequal_area() {
         let buffer = Buffer::empty(Rect::new(0, 0, 5, 1));
@@ -71,7 +71,7 @@ mod tests {
         assert_buffer_eq!(buffer, other_buffer);
     }
 
-    #[should_panic]
+    #[should_panic = "buffer contents not equal"]
     #[test]
     fn assert_buffer_eq_panics_on_unequal_style() {
         let buffer = Buffer::empty(Rect::new(0, 0, 5, 1));

src/buffer/buffer.rs

@@ -55,30 +55,31 @@ pub struct Buffer {
 
 impl Buffer {
     /// Returns a Buffer with all cells set to the default one
-    pub fn empty(area: Rect) -> Buffer {
+    pub fn empty(area: Rect) -> Self {
         let cell = Cell::default();
-        Buffer::filled(area, &cell)
+        Self::filled(area, &cell)
     }
 
     /// Returns a Buffer with all cells initialized with the attributes of the given Cell
-    pub fn filled(area: Rect, cell: &Cell) -> Buffer {
+    pub fn filled(area: Rect, cell: &Cell) -> Self {
         let size = area.area() as usize;
         let mut content = Vec::with_capacity(size);
         for _ in 0..size {
             content.push(cell.clone());
         }
-        Buffer { area, content }
+        Self { area, content }
     }
 
     /// Returns a Buffer containing the given lines
-    pub fn with_lines<'a, S>(lines: Vec<S>) -> Buffer
+    pub fn with_lines<'a, Iter>(lines: Iter) -> Self
     where
-        S: Into<Line<'a>>,
+        Iter: IntoIterator,
+        Iter::Item: Into<Line<'a>>,
     {
         let lines = lines.into_iter().map(Into::into).collect::<Vec<_>>();
         let height = lines.len() as u16;
         let width = lines.iter().map(Line::width).max().unwrap_or_default() as u16;
-        let mut buffer = Buffer::empty(Rect::new(0, 0, width, height));
+        let mut buffer = Self::empty(Rect::new(0, 0, width, height));
         for (y, line) in lines.iter().enumerate() {
             buffer.set_line(0, y as u16, line, width);
         }
@@ -91,7 +92,7 @@ impl Buffer {
     }
 
     /// Returns the area covered by this buffer
-    pub fn area(&self) -> &Rect {
+    pub const fn area(&self) -> &Rect {
         &self.area
     }
 
@@ -243,7 +244,7 @@ impl Buffer {
     pub fn set_line(&mut self, x: u16, y: u16, line: &Line<'_>, width: u16) -> (u16, u16) {
         let mut remaining_width = width;
         let mut x = x;
-        for span in &line.spans {
+        for span in line {
             if remaining_width == 0 {
                 break;
             }
@@ -252,7 +253,7 @@ impl Buffer {
                 y,
                 span.content.as_ref(),
                 remaining_width as usize,
-                span.style,
+                line.style.patch(span.style),
             );
             let w = pos.0.saturating_sub(x);
             x = pos.0;
@@ -300,7 +301,7 @@ impl Buffer {
     }
 
     /// Merge an other buffer into this one
-    pub fn merge(&mut self, other: &Buffer) {
+    pub fn merge(&mut self, other: &Self) {
         let area = self.area.union(other.area);
         let cell = Cell::default();
         self.content.resize(area.area() as usize, cell.clone());
@@ -357,7 +358,7 @@ impl Buffer {
     /// Next:    `aコ`
     /// Updates: `0: a, 1: コ` (double width symbol at index 1 - skip index 2)
     /// ```
-    pub fn diff<'a>(&self, other: &'a Buffer) -> Vec<(u16, u16, &'a Cell)> {
+    pub fn diff<'a>(&self, other: &'a Self) -> Vec<(u16, u16, &'a Cell)> {
         let previous_buffer = &self.content;
         let next_buffer = &other.content;
 
@@ -452,6 +453,11 @@ impl Debug for Buffer {
 
 #[cfg(test)]
 mod tests {
+    use std::iter;
+
+    use itertools::Itertools;
+    use rstest::{fixture, rstest};
+
     use super::*;
     use crate::assert_buffer_eq;
 
@@ -615,6 +621,67 @@ mod tests {
         assert_buffer_eq!(buffer, Buffer::with_lines(vec!["コン "]));
     }
 
+    #[fixture]
+    fn small_one_line_buffer() -> Buffer {
+        Buffer::empty(Rect::new(0, 0, 5, 1))
+    }
+
+    #[rstest]
+    #[case::empty("", "     ")]
+    #[case::one("1", "1    ")]
+    #[case::full("12345", "12345")]
+    #[case::overflow("123456", "12345")]
+    fn set_line_raw(
+        mut small_one_line_buffer: Buffer,
+        #[case] content: &str,
+        #[case] expected: &str,
+    ) {
+        let line = Line::raw(content);
+        small_one_line_buffer.set_line(0, 0, &line, 5);
+
+        // note: testing with empty / set_string here instead of with_lines because with_lines calls
+        // set_line
+        let mut expected_buffer = Buffer::empty(small_one_line_buffer.area);
+        expected_buffer.set_string(0, 0, expected, Style::default());
+        assert_buffer_eq!(small_one_line_buffer, expected_buffer);
+    }
+
+    #[rstest]
+    #[case::empty("", "     ")]
+    #[case::one("1", "1    ")]
+    #[case::full("12345", "12345")]
+    #[case::overflow("123456", "12345")]
+    fn set_line_styled(
+        mut small_one_line_buffer: Buffer,
+        #[case] content: &str,
+        #[case] expected: &str,
+    ) {
+        let color = Color::Blue;
+        let line = Line::styled(content, color);
+        small_one_line_buffer.set_line(0, 0, &line, 5);
+
+        // note: manually testing the contents here as the Buffer::with_lines calls set_line
+        let actual_contents = small_one_line_buffer
+            .content
+            .iter()
+            .map(Cell::symbol)
+            .join("");
+        let actual_styles = small_one_line_buffer
+            .content
+            .iter()
+            .map(|c| c.fg)
+            .collect_vec();
+
+        // set_line only sets the style for non-empty cells (unlike Line::render which sets the
+        // style for all cells)
+        let expected_styles = iter::repeat(color)
+            .take(content.len().min(5))
+            .chain(iter::repeat(Color::default()).take(5_usize.saturating_sub(content.len())))
+            .collect_vec();
+        assert_eq!(actual_contents, expected);
+        assert_eq!(actual_styles, expected_styles);
+    }
+
     #[test]
     fn set_style() {
         let mut buffer = Buffer::with_lines(vec!["aaaaa", "bbbbb", "ccccc"]);