Merge branch 'ArthurSonzogni:main' into main

* Bazel: general improvements.

Improve the Bazel build. Attempt to fix previous errors recorded while
trying to publish ftxui in the Bazel Central Registry:
- https://github.com/bazelbuild/bazel-central-registry/pull/4485
- https://buildkite.com/bazel/bcr-presubmit/builds/13601#01968b61-f5b2-4d16-94d0-c87a03a1a23b

Test against "recent" platforms
-------------------------------

Previously, I got the error:
```
gcc: error: unrecognized command line option '-std-c++20'; did you mean '-std-c++2a'?
```
This was due to using old distribution like ubuntu 2004. Test against
newer platforms only to avoid GCC version<-9.x.y

Downgrade gtest version.
------------------------

I suspect this caused the Bazel Central Registry error:
```
file:///workdir/modules/googletest/1.15.2/MODULE.bazel:68:20: name 'use_repo_rule' is not defined
```
Specifying using bazelmod fixes the issue. Thanks @robinlinden

Tag gtest as dev_dependency
---------------------------

Presumably, this should avoid dependants to fetch it?

Enable --features-layering_check
--------------------------------

Aka clang `-Wprivate-header`. Fix the encountered errors.

Use clang in the CI
-------------------

The CI was defining clang/gcc in the matrix, but was not using it. Fix
the bug.

.bazelrc

@@ -0,0 +1,7 @@
+build --features=layering_check
+build --enable_bzlmod
+
+build --enable_platform_specific_config
+build:linux --cxxopt=-std=c++20
+build:macos --cxxopt=-std=c++20
+build:windows --cxxopt=-std:c++20

.bcr/README.md

@@ -0,0 +1,9 @@
+# Bazel Central Registry
+
+When the ruleset is released, we want it to be published to the
+Bazel Central Registry automatically:
+<https://registry.bazel.build>
+
+This folder contains configuration files to automate the publish step.
+See <https://github.com/bazel-contrib/publish-to-bcr/blob/main/templates/README.md>
+for authoritative documentation about these files.

.bcr/metadata.template.json

@@ -0,0 +1,16 @@
+{
+  "homepage": "https://github.com/ArthurSonzogni/FTXUI",
+  "maintainers": [
+    {
+      "name": "Arthur Sonzogni",
+      "email": "sonzogniarthur@gmail.com",
+      "github": "ArthurSonzogni",
+      "github_user_id": 4759106
+    }
+  ],
+  "repository": [
+    "github:ArthurSonzogni/FTXUI"
+  ],
+  "versions": [],
+  "yanked_versions": {}
+}

.bcr/presubmit.yml

@@ -0,0 +1,36 @@
+matrix:
+  bazel:
+    - 7.x
+    - 8.x
+    - rolling
+  unix_platform:
+    - debian11
+    - ubuntu2204
+    - macos
+    - macos_arm64
+  win_platform:
+    - windows
+
+tasks:
+
+  unix_test:
+    name: Verify build targets on Unix
+    platform: ${{ unix_platform }}
+    bazel: ${{ bazel }}
+    build_flags:
+    - --cxxopt=-std=c++20
+    build_targets:
+    - '@ftxui//:dom'
+    - '@ftxui//:component'
+    - '@ftxui//:screen'
+
+  windows_test:
+    name: Verify build targets
+    platform: ${{ win_platform }}
+    bazel: ${{ bazel }}
+    build_flags:
+    - --cxxopt=/std:c++20
+    build_targets:
+    - '@ftxui//:dom'
+    - '@ftxui//:component'
+    - '@ftxui//:screen'

.bcr/source.template.json

@@ -0,0 +1,5 @@
+{
+  "integrity": "",
+  "strip_prefix": "",
+  "url": "https://github.com/ArthurSonzogni/FTXUI/releases/download/{TAG}/source.tar.gz"
+}

.clang-tidy

@@ -10,6 +10,7 @@ Checks: "*,
         -android-*,
         -bugprone-easily-swappable-parameters,
         -cppcoreguidelines-non-private-member-variables-in-classes,
+        -cppcoreguidelines-pro-type-union-access,
         -fuchsia-*,
         -google-*,
         -hicpp-signed-bitwise,
@@ -26,6 +27,7 @@ Checks: "*,
         -readability-simplify-boolean-expr,
         -readability-static-accessed-through-instance,
         -readability-use-anyofallof,
+        -readability-avoid-nested-conditional-operator,
         -zircon-*,
 "
 WarningsAsErrors: ''

.github/workflows/build.yaml

@@ -1,19 +1,63 @@
 name: Build
 
 on:
-  create:
-    tags:
-      -v*
+  # On new commits to main:
   push:
     branches:
       - main
+
+  # On pull requests:
   pull_request:
     branches:
       - main
 
 jobs:
-  test:
-    name: "Tests"
+
+  test_bazel:
+    name: "Bazel, ${{ matrix.cxx }}, ${{ matrix.os }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: ubuntu-latest
+            cxx: g++
+            cc: gcc
+
+          - os: ubuntu-latest
+            cxx: clang++
+            cc: clang
+
+          - os: macos-latest
+            cxx: g++
+            cc: gcc
+
+          - os: macos-latest
+            cxx: clang++
+            cc: clang
+
+          - os: windows-latest
+            cxx: cl
+            cc: cl
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Build with Bazel"
+        env:
+          CC: ${{ matrix.cc }}
+          CXX: ${{ matrix.cxx }}
+        run: bazel build ...
+
+      - name: "Tests with Bazel"
+        env:
+          CC: ${{ matrix.cc }}
+          CXX: ${{ matrix.cxx }}
+        run: bazel test --test_output=all ...
+
+  test_cmake:
+    name: "CMake, ${{ matrix.compiler }}, ${{ matrix.os }}"
     strategy:
       fail-fast: false
       matrix:
@@ -21,7 +65,6 @@ jobs:
           - name: Linux GCC
             os: ubuntu-latest
             compiler: gcc
-            gcov_executable: gcov
 
           - name: Linux Clang
             os: ubuntu-latest
@@ -44,7 +87,7 @@ jobs:
         id: cpu-cores
 
       - name: "Checkout repository"
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: "Setup Cpp"
         uses: aminya/setup-cpp@v1
@@ -79,11 +122,16 @@ jobs:
           cmake
           --build ./build
 
-      - name: Unix - Test and coverage
+      - name: Unix - Test
         if: runner.os != 'Windows'
         working-directory: ./build
         run: >
           ctest -C Debug --rerun-failed --output-on-failure;
+
+      - name: Unix - coverage
+        if: matrix.gcov_executable != ''
+        working-directory: ./build
+        run: >
           gcovr
           -j ${{env.nproc}}
           --delete
@@ -118,9 +166,55 @@ jobs:
           name: ${{ runner.os }}-coverage
           files: ./build/coverage.xml
 
+  test_modules:
+    name: "Test modules"
+    strategy:
+      matrix:
+        include:
+          - os: ubuntu-latest
+            compiler: llvm
+          # TODO add gcc / msvc
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Setup Cpp"
+        uses: aminya/setup-cpp@v1
+        with:
+          compiler: ${{ matrix.compiler }}
+          vcvarsall: ${{ contains(matrix.os, 'windows' )}}
+          cmake: true
+          ninja: true
+          clangtidy: false
+          cppcheck: false
+          opencppcoverage: false
+
+      - name: "Generate ./examples_modules"
+        run: >
+          ./tools/generate_examples_modules.sh
+
+      - name: "Build modules"
+        run: >
+          mkdir build;
+          cd build;
+          cmake ..
+          -DCMAKE_GENERATOR=Ninja
+          -DFTXUI_BUILD_MODULES=ON
+          -DFTXUI_BUILD_EXAMPLES=ON
+          -DCMAKE_BUILD_TYPE=Debug
+          -DFTXUI_BUILD_DOCS=OFF
+          -DFTXUI_BUILD_TESTS=OFF
+          -DFTXUI_BUILD_TESTS_FUZZER=OFF
+          -DFTXUI_ENABLE_INSTALL=ON
+          -DFTXUI_DEV_WARNINGS=ON ;
+          cmake --build .
+
   # Create a release on new v* tags
   release:
-    needs: test
+    needs:
+      - test_cmake
+      - test_bazel
     if: ${{ github.event_name == 'create' && startsWith(github.ref, 'refs/tags/v') }}
     name: "Create release"
     runs-on: ubuntu-latest
@@ -136,7 +230,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   # Build artifact for the release
-  package:
+  package_compiled:
     name: "Build packages"
     needs: release
     strategy:
@@ -155,7 +249,7 @@ jobs:
         id: cpu-cores
 
       - name: "Checkout repository"
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: "Install cmake"
         uses: lukka/get-cmake@latest
@@ -181,12 +275,35 @@ jobs:
           asset_path: ${{ matrix.asset_path }}
           overwrite: true
 
+  # Build "source" artifact for the release. This is the same as the github
+  # "source" archive, but with a stable URL. This is useful for the Bazel
+  # Central Repository.
+  package_source:
+    name: "Build source package"
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Create source package"
+        run: >
+          git archive --format=tar.gz -o source.tar.gz HEAD
+
+      - name: "Upload source package"
+        uses: shogo82148/actions-upload-release-asset@v1
+        with:
+          upload_url: ${{ needs.release.outputs.upload_url }}
+          asset_path: source.tar.gz
+          overwrite: true
+
+  
   documentation:
     if: github.ref == 'refs/heads/main'
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout repository"
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
 
       - name: "Install cmake"
         uses: lukka/get-cmake@latest
@@ -216,6 +333,8 @@ jobs:
           rsync -amv
           --include='*/'
           --include='*.html'
+          --include='*.css'
+          --include='*.mjs'
           --include='*.js'
           --include='*.wasm'
           --exclude='*'

.github/workflows/codeql.yml

@@ -1,76 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ "main" ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "main" ]
-  schedule:
-    - cron: '45 22 * * 5'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ${{ (matrix.language == 'swift' && 'macos-latest') || 'ubuntu-latest' }}
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'cpp' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Use only 'java' to analyze code written in Java, Kotlin or both
-        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # For more details on CodeQL's query packs, refer to: https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-    # - run: |
-    #     echo "Run, Build Application using script"
-    #     ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"

.github/workflows/documentation.yaml

@@ -0,0 +1,60 @@
+name: Documentation
+
+on:
+  # On new commits to main:
+  push:
+    branches:
+      - main
+
+jobs:
+  documentation:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Install cmake"
+        uses: lukka/get-cmake@latest
+
+      - name: "Install emsdk"
+        uses: mymindstorm/setup-emsdk@v7
+
+      - name: "Install Doxygen/Graphviz"
+        run: >
+          sudo apt-get update;
+          sudo apt-get install doxygen graphviz;
+
+      - name: "Build documentation"
+        run: >
+          mkdir build;
+          cd build;
+          emcmake cmake ..
+          -DCMAKE_BUILD_TYPE=Release
+          -DFTXUI_BUILD_DOCS=ON
+          -DFTXUI_BUILD_EXAMPLES=ON
+          -DFTXUI_BUILD_TESTS=OFF
+          -DFTXUI_BUILD_TESTS_FUZZER=OFF
+          -DFTXUI_ENABLE_INSTALL=OFF
+          -DFTXUI_DEV_WARNINGS=ON ;
+          cmake --build . --target doc;
+          cmake --build . ;
+          rsync -amv
+          --include='*/'
+          --include='*.html'
+          --include='*.css'
+          --include='*.mjs'
+          --include='*.js'
+          --include='*.wasm'
+          --exclude='*'
+          examples
+          doc/doxygen/html;
+
+      - name: "Deploy"
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: build/doc/doxygen/html/
+          enable_jekyll: false
+          allow_empty_commit: false
+          force_orphan: true
+          publish_branch: gh-pages

.github/workflows/publish.yaml

@@ -0,0 +1,24 @@
+name: "Publish to Bazel Central Registry"
+
+on:
+  # Manual kick-off (you type the tag)
+  workflow_dispatch:
+    inputs:
+      tag_name:
+        description: "Tag to publish"
+        required: true
+        type: string
+
+permissions:
+  contents:     write
+
+jobs:
+  publish:
+    uses: bazel-contrib/publish-to-bcr/.github/workflows/publish.yaml@v0.0.4
+    with:
+      tag_name: ${{ github.event.inputs.tag_name }}
+      registry_fork: ArthurSonzogni/bazel-central-registry
+      attest: false
+
+    secrets:
+      publish_token: ${{ secrets.PUBLISH_TOKEN }}

.github/workflows/release.yaml

@@ -0,0 +1,100 @@
+name: Release
+
+on:
+  # On push to a tag:
+  push:
+    tags:
+      - 'v*'
+
+  # On manual trigger:
+  workflow_dispatch:
+
+permissions:
+  # Needed to mint attestations
+  id-token: write
+  attestations: write
+  # Needed to upload release assets
+  contents: write
+
+jobs:
+  release:
+    name: "Create release"
+    runs-on: ubuntu-latest
+    outputs:
+      upload_url: ${{ steps.create_release.outputs.upload_url }}
+    steps:
+      - name: "Create release"
+        uses: softprops/action-gh-release@v1
+        id: create_release
+        with:
+          draft: true
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  # Build artifact for the release
+  package_compiled:
+    name: "Build packages"
+    needs: release
+    strategy:
+      matrix:
+        include:
+          - os: ubuntu-latest
+            asset_path: build/ftxui*Linux*
+          - os: macos-latest
+            asset_path: build/ftxui*Darwin*
+          - os: windows-latest
+            asset_path: build/ftxui*Win64*
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Get number of CPU cores
+        uses: SimenB/github-actions-cpu-cores@v1
+        id: cpu-cores
+
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Install cmake"
+        uses: lukka/get-cmake@latest
+
+      - name: "Build packages"
+        run: >
+          mkdir build;
+          cd build;
+          cmake ..
+          -DCMAKE_BUILD_TYPE=Release
+          -DCMAKE_BUILD_PARALLEL_LEVEL=${{ steps.cpu-cores.outputs.count }}
+          -DFTXUI_BUILD_DOCS=OFF
+          -DFTXUI_BUILD_EXAMPLES=OFF
+          -DFTXUI_BUILD_TESTS=OFF
+          -DFTXUI_BUILD_TESTS_FUZZER=OFF
+          -DFTXUI_ENABLE_INSTALL=ON
+          -DFTXUI_DEV_WARNINGS=ON ;
+          cmake --build . --target package;
+
+      - uses: shogo82148/actions-upload-release-asset@v1
+        with:
+          upload_url: ${{ needs.release.outputs.upload_url }}
+          asset_path: ${{ matrix.asset_path }}
+          overwrite: true
+
+  # Build "source" artifact for the release. This is the same as the github
+  # "source" archive, but with a stable URL. This is useful for the Bazel
+  # Central Repository.
+  package_source:
+    name: "Build source package"
+    needs: release
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Create source package"
+        run: >
+          git archive --format=tar.gz -o source.tar.gz HEAD
+
+      - name: "Upload source package"
+        uses: shogo82148/actions-upload-release-asset@v1
+        with:
+          upload_url: ${{ needs.release.outputs.upload_url }}
+          asset_path: source.tar.gz
+          overwrite: true

.gitignore

@@ -3,6 +3,10 @@
 *
 !*/
 
+# Ignore build directories generated by default MSVC CMake integration
+# (otherwise causes terribly slow indexing)
+out/
+
 # Allowed top-level files:
 !.clang-format
 !.clang-tidy
@@ -16,6 +20,10 @@
 !flake.nix
 !ftxui.pc.in
 !iwyu.imp
+!WORKSPACE.bazel
+!BUILD.bazel
+!MODULE.bazel
+!.bazelrc
 
 # .github directory:
 !.github/**/*.yaml
@@ -25,6 +33,10 @@
 !cmake/**/*.in
 !cmake/**/*.cmake
 
+# bazel directory:
+!bazel/**/*.bzl
+!.bcr/*
+
 # doc directory:
 !doc/**/Doxyfile.in
 !doc/**/*.txt
@@ -34,22 +46,26 @@
 !doc/**/*.md
 
 # examples directory:
-!examples/**/*.txt
 !examples/**/*.cpp
+!examples/**/*.css
 !examples/**/*.hpp
-!examples/**/*.ipp
 !examples/**/*.html
-!examples/**/*.py
-!examples/**/*.js
 !examples/**/*.html.disabled
+!examples/**/*.ipp
+!examples/**/*.js
+!examples/**/*.mjs
+!examples/**/*.py
+!examples/**/*.txt
 
 # include directory:
 !include/ftxui/**/*.hpp
 !include/ftxui/**/*.cpp
 
 # src directory:
+!src/ftxui/*.cppm
 !src/ftxui/**/*.hpp
 !src/ftxui/**/*.cpp
+!src/ftxui/**/*.cppm
 
 # tools directory:
 !tools/**/*.sh

BUILD.bazel

@@ -0,0 +1,270 @@
+# Copyright 2025 Arthur Sonzogni. All rights reserved.
+# Use of this source code is governed by the MIT license that can be found in
+# the LICENSE file.
+
+# TODO:
+# - Build benchmark.
+# - Build fuzzers.
+# - Build documentation.
+# - Enable the two tests timing out.
+# - Support WebAssembly
+
+load("@rules_cc//cc:defs.bzl", "cc_binary", "cc_library", "cc_test")
+load(":bazel/ftxui.bzl", "ftxui_cc_library")
+load(":bazel/ftxui.bzl", "generate_examples")
+load(":bazel/ftxui.bzl", "windows_copts")
+load(":bazel/ftxui.bzl", "pthread_linkopts")
+
+# A meta target depending on all of the ftxui submodules.
+# Note that component depends on dom and screen, so ftxui is just an alias for 
+# component.
+# ┌component──┐
+# │┌dom──────┐│
+# ││┌screen─┐││
+# └┴┴───────┴┴┘
+alias(name = "ftxui", actual = ":component")
+
+# @ftxui:screen is a module that provides a screen buffer and color management
+# for terminal applications. A screen is a 2D array of cells, each cell can
+# contain a glyph, a color, and other attributes. The library also provides
+# functions to manipulate the screen.
+ftxui_cc_library(
+    name = "screen",
+    srcs = [
+        "src/ftxui/screen/box.cpp",
+        "src/ftxui/screen/color.cpp",
+        "src/ftxui/screen/color_info.cpp",
+        "src/ftxui/screen/image.cpp",
+        "src/ftxui/screen/screen.cpp",
+        "src/ftxui/screen/string.cpp",
+        "src/ftxui/screen/string_internal.hpp",
+        "src/ftxui/screen/terminal.cpp",
+        "src/ftxui/screen/util.hpp",
+    ],
+    hdrs = [
+        "include/ftxui/screen/box.hpp",
+        "include/ftxui/screen/color.hpp",
+        "include/ftxui/screen/color_info.hpp",
+        "include/ftxui/screen/deprecated.hpp",
+        "include/ftxui/screen/image.hpp",
+        "include/ftxui/screen/pixel.hpp",
+        "include/ftxui/screen/screen.hpp",
+        "include/ftxui/screen/string.hpp",
+        "include/ftxui/screen/terminal.hpp",
+        "include/ftxui/util/autoreset.hpp",
+        "include/ftxui/util/ref.hpp",
+    ],
+)
+
+# @ftxui:dom is a library that provides a way to create and manipulate a
+# "document" that can be rendered to a screen. The document is a tree of nodes.
+# Nodes can be text, layouts, or various decorators. Users needs to compose
+# nodes to create a document. A document is responsive to the size of the
+# screen.
+ftxui_cc_library(
+    name = "dom",
+    srcs = [
+        "src/ftxui/dom/automerge.cpp",
+        "src/ftxui/dom/blink.cpp",
+        "src/ftxui/dom/bold.cpp",
+        "src/ftxui/dom/border.cpp",
+        "src/ftxui/dom/box_helper.cpp",
+        "src/ftxui/dom/box_helper.hpp",
+        "src/ftxui/dom/canvas.cpp",
+        "src/ftxui/dom/clear_under.cpp",
+        "src/ftxui/dom/color.cpp",
+        "src/ftxui/dom/composite_decorator.cpp",
+        "src/ftxui/dom/dbox.cpp",
+        "src/ftxui/dom/dim.cpp",
+        "src/ftxui/dom/flex.cpp",
+        "src/ftxui/dom/flexbox.cpp",
+        "src/ftxui/dom/flexbox_config.cpp",
+        "src/ftxui/dom/flexbox_helper.cpp",
+        "src/ftxui/dom/flexbox_helper.hpp",
+        "src/ftxui/dom/focus.cpp",
+        "src/ftxui/dom/frame.cpp",
+        "src/ftxui/dom/gauge.cpp",
+        "src/ftxui/dom/graph.cpp",
+        "src/ftxui/dom/gridbox.cpp",
+        "src/ftxui/dom/hbox.cpp",
+        "src/ftxui/dom/hyperlink.cpp",
+        "src/ftxui/dom/inverted.cpp",
+        "src/ftxui/dom/italic.cpp",
+        "src/ftxui/dom/linear_gradient.cpp",
+        "src/ftxui/dom/node.cpp",
+        "src/ftxui/dom/node_decorator.cpp",
+        "src/ftxui/dom/node_decorator.hpp",
+        "src/ftxui/dom/paragraph.cpp",
+        "src/ftxui/dom/reflect.cpp",
+        "src/ftxui/dom/scroll_indicator.cpp",
+        "src/ftxui/dom/selection.cpp",
+        "src/ftxui/dom/selection_style.cpp",
+        "src/ftxui/dom/separator.cpp",
+        "src/ftxui/dom/size.cpp",
+        "src/ftxui/dom/spinner.cpp",
+        "src/ftxui/dom/strikethrough.cpp",
+        "src/ftxui/dom/table.cpp",
+        "src/ftxui/dom/text.cpp",
+        "src/ftxui/dom/underlined.cpp",
+        "src/ftxui/dom/underlined_double.cpp",
+        "src/ftxui/dom/util.cpp",
+        "src/ftxui/dom/vbox.cpp",
+    ],
+    hdrs = [
+        "include/ftxui/dom/canvas.hpp",
+        "include/ftxui/dom/deprecated.hpp",
+        "include/ftxui/dom/direction.hpp",
+        "include/ftxui/dom/elements.hpp",
+        "include/ftxui/dom/flexbox_config.hpp",
+        "include/ftxui/dom/linear_gradient.hpp",
+        "include/ftxui/dom/node.hpp",
+        "include/ftxui/dom/requirement.hpp",
+        "include/ftxui/dom/selection.hpp",
+        "include/ftxui/dom/table.hpp",
+        "include/ftxui/dom/take_any_args.hpp",
+    ],
+    deps = [":screen"],
+)
+
+# @ftxui:component is a library to create "dynamic" component renderering and
+# updating a ftxui::dom document on the screen. It is a higher level API than
+# ftxui:dom.
+#
+# The module is required if your program needs to respond to user input. It
+# defines a set of ftxui::Component. These components can be utilized to
+# navigate using the arrow keys and/or cursor. There are several builtin widgets
+# like checkbox/inputbox/etc to interact with. You can combine them, or even
+# define your own custom components.
+ftxui_cc_library(
+    name = "component",
+    srcs = [
+        "src/ftxui/component/animation.cpp",
+        "src/ftxui/component/button.cpp",
+        "src/ftxui/component/catch_event.cpp",
+        "src/ftxui/component/checkbox.cpp",
+        "src/ftxui/component/collapsible.cpp",
+        "src/ftxui/component/component.cpp",
+        "src/ftxui/component/component_options.cpp",
+        "src/ftxui/component/container.cpp",
+        "src/ftxui/component/dropdown.cpp",
+        "src/ftxui/component/event.cpp",
+        "src/ftxui/component/hoverable.cpp",
+        "src/ftxui/component/input.cpp",
+        "src/ftxui/component/loop.cpp",
+        "src/ftxui/component/maybe.cpp",
+        "src/ftxui/component/menu.cpp",
+        "src/ftxui/component/modal.cpp",
+        "src/ftxui/component/radiobox.cpp",
+        "src/ftxui/component/renderer.cpp",
+        "src/ftxui/component/resizable_split.cpp",
+        "src/ftxui/component/screen_interactive.cpp",
+        "src/ftxui/component/slider.cpp",
+        "src/ftxui/component/terminal_input_parser.cpp",
+        "src/ftxui/component/terminal_input_parser.hpp",
+        "src/ftxui/component/util.cpp",
+        "src/ftxui/component/window.cpp",
+
+        # Private header from ftxui:dom.
+        "src/ftxui/dom/node_decorator.hpp",
+
+        # Private header from ftxui:screen.
+        "src/ftxui/screen/string_internal.hpp",
+        "src/ftxui/screen/util.hpp",
+    ],
+    hdrs = [
+        "include/ftxui/component/animation.hpp",
+        "include/ftxui/component/captured_mouse.hpp",
+        "include/ftxui/component/component.hpp",
+        "include/ftxui/component/component_base.hpp",
+        "include/ftxui/component/component_options.hpp",
+        "include/ftxui/component/event.hpp",
+        "include/ftxui/component/loop.hpp",
+        "include/ftxui/component/mouse.hpp",
+        "include/ftxui/component/receiver.hpp",
+        "include/ftxui/component/screen_interactive.hpp",
+        "include/ftxui/component/task.hpp",
+    ],
+    linkopts = pthread_linkopts(),
+    deps = [
+        ":dom",
+        ":screen",
+    ],
+)
+
+# FTXUI's tests
+cc_test(
+    name = "tests",
+    testonly = True,
+    srcs = [
+        "src/ftxui/component/animation_test.cpp",
+        "src/ftxui/component/button_test.cpp",
+        "src/ftxui/component/collapsible_test.cpp",
+        "src/ftxui/component/component_test.cpp",
+        "src/ftxui/component/container_test.cpp",
+        "src/ftxui/component/dropdown_test.cpp",
+        "src/ftxui/component/hoverable_test.cpp",
+        "src/ftxui/component/input_test.cpp",
+        "src/ftxui/component/menu_test.cpp",
+        "src/ftxui/component/modal_test.cpp",
+        "src/ftxui/component/radiobox_test.cpp",
+        "src/ftxui/component/receiver_test.cpp",
+        "src/ftxui/component/resizable_split_test.cpp",
+        "src/ftxui/component/slider_test.cpp",
+        "src/ftxui/component/terminal_input_parser_test.cpp",
+        "src/ftxui/component/toggle_test.cpp",
+        "src/ftxui/dom/blink_test.cpp",
+        "src/ftxui/dom/bold_test.cpp",
+        "src/ftxui/dom/border_test.cpp",
+        "src/ftxui/dom/canvas_test.cpp",
+        "src/ftxui/dom/color_test.cpp",
+        "src/ftxui/dom/dbox_test.cpp",
+        "src/ftxui/dom/dim_test.cpp",
+        "src/ftxui/dom/flexbox_helper_test.cpp",
+        "src/ftxui/dom/flexbox_test.cpp",
+        "src/ftxui/dom/gauge_test.cpp",
+        "src/ftxui/dom/gridbox_test.cpp",
+        "src/ftxui/dom/hbox_test.cpp",
+        "src/ftxui/dom/hyperlink_test.cpp",
+        "src/ftxui/dom/italic_test.cpp",
+        "src/ftxui/dom/linear_gradient_test.cpp",
+        "src/ftxui/dom/scroll_indicator_test.cpp",
+        "src/ftxui/dom/separator_test.cpp",
+        "src/ftxui/dom/spinner_test.cpp",
+        "src/ftxui/dom/table_test.cpp",
+        "src/ftxui/dom/text_test.cpp",
+        "src/ftxui/dom/underlined_test.cpp",
+        "src/ftxui/dom/vbox_test.cpp",
+        "src/ftxui/screen/color_test.cpp",
+        "src/ftxui/screen/string_test.cpp",
+        "src/ftxui/util/ref_test.cpp",
+
+        # Private header from ftxui:screen for string_test.cpp.
+        "src/ftxui/screen/string_internal.hpp",
+
+        # Private header from ftxui::component for
+        # terminal_input_parser_test.cpp.
+        "src/ftxui/component/terminal_input_parser.hpp",
+
+        # Private header from ftxui::dom for
+        # flexbox_helper_test.cpp.
+        "src/ftxui/dom/flexbox_helper.hpp",
+
+        # TODO: Enable the two tests timing out with Bazel:
+        # - "src/ftxui/component/screen_interactive_test.cpp",
+        # - "src/ftxui/dom/selection_test.cpp",
+    ],
+    includes = [
+        "include",
+        "src",
+    ],
+    copts = windows_copts(),
+    deps = [
+        ":screen",
+        ":dom",
+        ":component",
+        "@googletest//:gtest",
+        "@googletest//:gtest_main",
+    ],
+)
+
+generate_examples()

CHANGELOG.md

@@ -1,8 +1,179 @@
 Changelog
 =========
 
-current (development) 
----------------------
+Development
+-----------
+
+### Build
+- Feature: Support C++20 modules. 
+  This requires:
+  - Using the Ninja or MSVC generator
+  - A recent Clang/GCC/MSVC compiler.
+  - Cmake 3.28 or higher.
+  Usage:
+  ```cpp
+  import ftxui;
+  import ftxui.component;
+  import ftxui.dom;
+  import ftxui.screen;
+  ```
+  Thanks @mikomikotaishi for PR #1015.
+
+
+Future release
+=======
+6.1.9 (2025-05-07
+
+### Build
+If all goes well (pending), ftxui should appear in the Bazel central repository.
+It can be imported into your project using the following lines:
+
+**MODULE.bazel**
+```bazel
+bazel_dep(name = "ftxui", version = "6.1.9")
+```
+
+Thanks @robinlinden and @kcc for the reviews.
+
+### dom
+- Bugfix: Restore the `dbox` behavior from ftxui 5.0.0. To apply bgcolor
+  blending between the two layers, a new `dboxBlend` will be added.
+
+6.1.8 (2025-05-01)
+------------------
+
+### Build
+- Feature: Support `bazel` build system. See #1032.
+  Proposed by Kostya Serebryany @kcc
+
+  **BUILD.bazel**
+  ```bazel
+  deps = [
+    // Depend on the whole library:
+    "@ftxui//:ftxui",
+
+    // Choose a specific submodule:
+    "@ftxui//:component",
+    "@ftxui//:dom",
+    "@ftxui//:screen",
+  ]
+  ```
+
+### Component
+- Bugfix: Fix a crash with ResizeableSplit. See #1023.
+  - Clamp screen size to terminal size.
+  - Disallow `ResizeableSplit` with negative size.
+
+### Dom
+- Bugfix: Disallow specifying a negative size constraint. See #1023.
+
+
+6.0.2 (2025-03-30)
+-----
+
+### Component
+- BugFix: Fix major crash on Windows affecting all components. See #1020
+- BugFix: Fix focusRelative.
+
+6.0.1 (2025-03-28)
+-----
+
+Same as v6.0.0.
+
+Due to a problem tag v6.0.0 was replaced. This isn't a good practice and affect
+developers that started using it in the short timeframe. Submitting a new
+release with the same content is the best way to fix this.
+
+See #1017 and #1019.
+
+6.0.0 (2025-03-23)
+-----
+
+### Component
+- Feature: Add support for raw input. Allowing more keys to be detected.
+- Feature: Add `ScreenInteractive::ForceHandleCtrlC(false)` to allow component
+  to fully override the default `Ctrl+C` handler.
+- Feature: Add `ScreenInteractive::ForceHandleCtrlZ(false)` to allow component
+  to fully override the default `Ctrl+Z` handler.
+- Feature: Add `Mouse::WeelLeft` and `Mouse::WeelRight` events on supported
+  terminals.
+- Feature: Add `Event::DebugString()`.
+- Feature: Add support for `Input`'s insert mode. Add `InputOption::insert`
+  option. Added by @mingsheng13.
+- Feature: Add `DropdownOption` to configure the dropdown. See #826.
+- Feature: Add support for Selection. Thanks @clement-roblot. See #926.
+  - See `ScreenInteractive::GetSelection()`.
+  - See `ScreenInteractive::SelectionChange(...)` listener.
+- Bugfix/Breaking change: `Mouse transition`:
+  - Detect when the mouse move, as opposed to being pressed.
+    The Mouse::Moved motion was added.
+  - Dragging the mouse with the left button pressed now avoids activating
+    multiple checkboxes.
+  - A couple of components are now activated when the mouse is pressed,
+  as opposed to being released.
+  This fixes: https://github.com/ArthurSonzogni/FTXUI/issues/773
+  This fixes: https://github.com/ArthurSonzogni/FTXUI/issues/792
+- Bugfix: mouse.control is now reported correctly.
+- Feature: Add `ScreenInteractive::FullscreenPrimaryScreen()`. This allows
+  displaying a fullscreen component on the primary screen, as opposed to the
+  alternate screen.
+- Bugfix: `Input` `onchange` was not called on backspace or delete key.
+  Fixed by @chrysante in chrysante in PR #776.
+- Bugfix: Propertly restore cursor shape on exit. See #792.
+- Bugfix: Fix cursor position in when in the last column. See #831.
+- Bugfix: Fix `ResizeableSplit` keyboard navigation. Fixed by #842.
+- Bugfix: Fix `Menu` focus. See #841
+- Feature: Add `ComponentBase::Index()`. This allows to get the index of a
+  component in its parent. See #932
+- Feature: Add `EntryState::index`. This allows to get the index of a menu entry.
+  See #932
+- Feature: Add `SliderOption::on_change`. This allows to set a callback when the
+  slider value changes. See #938.
+- Bugfix: Handle `Dropdown` with no entries.
+- Bugfix: Fix crash in `LinearGradient` due to float precision and an off-by-one
+          mistake. See #998.
+
+### Dom
+- Feature: Add `italic` decorator. For instance:
+  ```cpp
+  auto italic_text = text("Italic text") | italic;
+  ```
+  ```cpp
+  auto italic_text = italic(text("Italic text"));
+  ```
+  Proposed by @kenReneris in #1009.
+- Feature: Add `hscroll_indicator`. It display an horizontal indicator
+  reflecting the current scroll position. Proposed by @ibrahimnasson in
+  [issue 752](https://github.com/ArthurSonzogni/FTXUI/issues/752)
+- Feature: Add `extend_beyond_screen` option to `Dimension::Fit(..)`, allowing
+  the element to be larger than the screen. Proposed by @LordWhiro. See #572 and
+  #949.
+- Feature: Add support for Selection. Thanks @clement-roblot. See #926.
+  - See `selectionColor` decorator.
+  - See `selectionBackgroundColor` decorator.
+  - See `selectionForegroundColor` decorator.
+  - See `selectionStyle(style)` decorator.
+  - See `selectionStyleReset` decorator.
+- Breaking change: Change how "focus"/"select" are handled. This fixes the
+  behavior.
+- Breaking change: `Component::OnRender()` becomes the method to override to
+  render a component. This replaces `Component::Render()` that is still in use
+  to call the rendering method on the children. This change allows to fix a
+  couple of issues around focus handling.
+
+### Screen
+- Feature: Add `Box::IsEmpty()`.
+- Feature: Color transparency
+    - Add `Color::RGBA(r,g,b,a)`.
+    - Add `Color::HSVA(r,g,b,a)`.
+    - Add `Color::Blend(Color)`.
+    - Add `Color::IsOpaque()`
+
+### Util
+- Feature: Support arbitrary `Adapter` for `ConstStringListRef`. See #843.
+
+### Build
+- Support for cmake's "unity/jumbo" builds. Fixed by @ClausKlein.
 
 5.0.0
 -----

CMakeLists.txt

@@ -1,20 +1,26 @@
-cmake_minimum_required(VERSION 3.12)
+option(FTXUI_BUILD_DOCS "Set to ON to build docs" OFF)
+option(FTXUI_BUILD_EXAMPLES "Set to ON to build examples" OFF)
+option(FTXUI_BUILD_MODULES "Build the C++20 modules" OFF)
+option(FTXUI_BUILD_TESTS "Set to ON to build tests" OFF)
+option(FTXUI_BUILD_TESTS_FUZZER "Set to ON to enable fuzzing" OFF)
+option(FTXUI_CLANG_TIDY "Execute clang-tidy" OFF)
+option(FTXUI_DEV_WARNINGS "Enable more compiler warnings and warnings as errors" OFF)
+option(FTXUI_ENABLE_COVERAGE "Execute code coverage" OFF)
+option(FTXUI_ENABLE_INSTALL "Generate the install target" ON)
+option(FTXUI_QUIET "Set to ON for FTXUI to be quiet" OFF)
+
+if (FTXUI_BUILD_MODULES)
+  cmake_minimum_required(VERSION 3.28.2)
+else()
+  cmake_minimum_required(VERSION 3.12)
+endif()
 
 project(ftxui
   LANGUAGES CXX
-  VERSION 5.0.0
+  VERSION 6.1.9
   DESCRIPTION "C++ Functional Terminal User Interface."
 )
 
-option(FTXUI_QUIET "Set to ON for FTXUI to be quiet" OFF)
-option(FTXUI_BUILD_EXAMPLES "Set to ON to build examples" OFF)
-option(FTXUI_BUILD_DOCS "Set to ON to build docs" OFF)
-option(FTXUI_BUILD_TESTS "Set to ON to build tests" OFF)
-option(FTXUI_BUILD_TESTS_FUZZER "Set to ON to enable fuzzing" OFF)
-option(FTXUI_ENABLE_INSTALL "Generate the install target" ON)
-option(FTXUI_CLANG_TIDY "Execute clang-tidy" OFF)
-option(FTXUI_ENABLE_COVERAGE "Execute code coverage" OFF)
-option(FTXUI_DEV_WARNINGS "Enable more compiler warnings and warnings as errors" OFF)
 
 set(FTXUI_MICROSOFT_TERMINAL_FALLBACK_HELP_TEXT "On windows, assume the \
 terminal used will be one of Microsoft and use a set of reasonnable fallback \
@@ -27,17 +33,22 @@ else()
     ${FTXUI_MICROSOFT_TERMINAL_FALLBACK_HELP_TEXT} OFF)
 endif()
 
+set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
+
 include(cmake/ftxui_message.cmake)
 
 add_library(screen
   include/ftxui/screen/box.hpp
   include/ftxui/screen/color.hpp
   include/ftxui/screen/color_info.hpp
+  include/ftxui/screen/image.hpp
+  include/ftxui/screen/pixel.hpp
   include/ftxui/screen/screen.hpp
   include/ftxui/screen/string.hpp
   src/ftxui/screen/box.cpp
   src/ftxui/screen/color.cpp
   src/ftxui/screen/color_info.cpp
+  src/ftxui/screen/image.cpp
   src/ftxui/screen/screen.cpp
   src/ftxui/screen/string.cpp
   src/ftxui/screen/terminal.cpp
@@ -51,11 +62,12 @@ add_library(dom
   include/ftxui/dom/flexbox_config.hpp
   include/ftxui/dom/node.hpp
   include/ftxui/dom/requirement.hpp
+  include/ftxui/dom/selection.hpp
   include/ftxui/dom/take_any_args.hpp
   src/ftxui/dom/automerge.cpp
+  src/ftxui/dom/selection_style.cpp
   src/ftxui/dom/blink.cpp
   src/ftxui/dom/bold.cpp
-  src/ftxui/dom/hyperlink.cpp
   src/ftxui/dom/border.cpp
   src/ftxui/dom/box_helper.cpp
   src/ftxui/dom/box_helper.hpp
@@ -76,13 +88,16 @@ add_library(dom
   src/ftxui/dom/graph.cpp
   src/ftxui/dom/gridbox.cpp
   src/ftxui/dom/hbox.cpp
+  src/ftxui/dom/hyperlink.cpp
   src/ftxui/dom/inverted.cpp
+  src/ftxui/dom/italic.cpp
   src/ftxui/dom/linear_gradient.cpp
   src/ftxui/dom/node.cpp
   src/ftxui/dom/node_decorator.cpp
   src/ftxui/dom/paragraph.cpp
   src/ftxui/dom/reflect.cpp
   src/ftxui/dom/scroll_indicator.cpp
+  src/ftxui/dom/selection.cpp
   src/ftxui/dom/separator.cpp
   src/ftxui/dom/size.cpp
   src/ftxui/dom/spinner.cpp
@@ -167,6 +182,13 @@ include(cmake/iwyu.cmake)
 include(cmake/ftxui_export.cmake)
 include(cmake/ftxui_install.cmake)
 include(cmake/ftxui_package.cmake)
+include(cmake/ftxui_modules.cmake)
 
-add_subdirectory(examples)
 add_subdirectory(doc)
+add_subdirectory(examples)
+
+# You can generate ./examples_modules/ by running
+# ./tools/generate_examples_modules.sh
+if(EXISTS "${CMAKE_CURRENT_SOURCE_DIR}/examples_modules/CMakeLists.txt")
+  add_subdirectory(examples_modules)
+endif()

MODULE.bazel

@@ -0,0 +1,13 @@
+# FTXUI module.
+module(
+    name = "ftxui",
+    version = "6.1.9",
+    compatibility_level = 6,
+)
+
+# Build dependencies.
+bazel_dep(name = "rules_cc", version = "0.1.1")
+bazel_dep(name = "platforms", version = "0.0.10")
+
+# Test dependencies.
+bazel_dep(name = "googletest", version = "1.14.0.bcr.1", dev_dependency = True)

README.md

@@ -32,7 +32,7 @@ A simple cross-platform C++ library for terminal based user interfaces!
 
 ## Feature
  * Functional style. Inspired by
-   [[1]](https://hackernoon.com/building-reactive-terminal-interfaces-in-c-d392ce34e649?gi=d9fb9ce35901)
+   [1](https://hackernoon.com/building-reactive-terminal-interfaces-in-c-d392ce34e649?gi=d9fb9ce35901)
    and [React](https://reactjs.org/)
  * Simple and elegant syntax (in my opinion)
  * Keyboard & mouse navigation.
@@ -40,17 +40,27 @@ A simple cross-platform C++ library for terminal based user interfaces!
  * Support for animations. [Demo 1](https://arthursonzogni.github.io/FTXUI/examples/?file=component/menu_underline_animated_gallery), [Demo 2](https://arthursonzogni.github.io/FTXUI/examples/?file=component/button_style)
  * Support for drawing. [Demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/canvas_animated)
  * No dependencies
+ * Module support
  * **Cross platform**: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
  * Learn by [examples](#documentation), and [tutorials](#documentation)
- * Multiple packages: CMake [FetchContent]([https://bewagner.net/programming/2020/05/02/cmake-fetchcontent/](https://cmake.org/cmake/help/latest/module/FetchContent.html)) (preferred), vcpkg, pkgbuild, conan.
- * Good practises: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
+ * Multiple packages:
+     - CMake [FetchContent]([https://bewagner.net/programming/2020/05/02/cmake-fetchcontent/](https://cmake.org/cmake/help/latest/module/FetchContent.html)) (preferred)
+     - [Bazel](https://registry.bazel.build/modules/ftxui)
+     - [vcpkg](https://vcpkg.link/ports/ftxui)
+     - [Conan](https://conan.io/center/recipes/ftxui) [Debian package](https://tracker.debian.org/pkg/ftxui)
+     - [Ubuntu package](https://launchpad.net/ubuntu/+source/ftxui)
+     - [Arch Linux](https://aur.archlinux.org/packages/ftxui/)
+     - [OpenSUSE](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui)
+ * Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
 
 ## Documentation
 
-- [Starter example project](https://github.com/ArthurSonzogni/ftxui-starter)
+- [Starter CMake](https://github.com/ArthurSonzogni/ftxui-starter)
+- [Starter Bazel](https://github.com/ArthurSonzogni/ftxui-bazel)
 - [Documentation](https://arthursonzogni.github.io/FTXUI/)
 - [Examples (WebAssembly)](https://arthursonzogni.github.io/FTXUI/examples/)
 - [Build using CMake](https://arthursonzogni.github.io/FTXUI/#build-cmake)
+- [Build using Bazel](https://arthursonzogni.github.io/FTXUI/#build-bazel)
 
 ## Example
 ~~~cpp
@@ -73,7 +83,7 @@ A simple cross-platform C++ library for terminal based user interfaces!
 
 #### DOM
 
-This module defines a hierarchical set of Element. An element manages layout and can be responsive to the terminal dimensions.
+This module defines a hierarchical set of Element. An Element manages layout and can be responsive to the terminal dimensions.
 
 They are declared in [<ftxui/dom/elements.hpp>](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html
 )
@@ -109,6 +119,7 @@ Element can become flexible using the the `flex` decorator.
 
 An element can be decorated using the functions:
   - `bold`
+  - `italic`
   - `dim`
   - `inverted`
   - `underlined`
@@ -199,7 +210,7 @@ Complex [examples](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/
 
 #### Component
 
-The ftxui/component is needed when you want to produce dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Render Element (see previous section).
+ftxui/component produces dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Renders as an Element (see previous section).
 
 Prebuilt components are declared in [<ftxui/component/component.hpp>](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html)
 
@@ -293,7 +304,10 @@ Prebuilt components are declared in [<ftxui/component/component.hpp>](https://ar
 </details>
 
 ## Libraries for FTXUI
-- *Want to share a useful component using FTXUI? Feel free adding yours here*
+- *Want to share a useful Component for FTXUI? Feel free to add yours here*
+- [ftxui-grid-container](https://github.com/mingsheng13/grid-container-ftxui)
+- [ftxui-ip-input](https://github.com/mingsheng13/ip-input-ftxui)
+- [ftxui-image-view](https://github.com/ljrrjl/ftxui-image-view.git): For Image Display.
 
 
 ## Project using FTXUI
@@ -301,12 +315,12 @@ Prebuilt components are declared in [<ftxui/component/component.hpp>](https://ar
 Feel free to add your projects here:
 - [json-tui](https://github.com/ArthurSonzogni/json-tui)
 - [git-tui](https://github.com/ArthurSonzogni/git-tui)
+- [ostree-tui](https://github.com/AP-Sensing/ostree-tui)
 - [rgb-tui](https://github.com/ArthurSonzogni/rgb-tui)
 - [chrome-log-beautifier](https://github.com/ArthurSonzogni/chrome-log-beautifier)
 - [x86-64 CPU Architecture Simulation](https://github.com/AnisBdz/CPU)
 - [ltuiny](https://github.com/adrianoviana87/ltuiny)
 - [i3-termdialogs](https://github.com/mibli/i3-termdialogs)
-- [Just-Fast](https://github.com/GiuseppeCesarano/just-fast)
 - [simpPRU](https://github.com/VedantParanjape/simpPRU)
 - [Pigeon ROS TUI](https://github.com/PigeonSensei/Pigeon_ros_tui)
 - [hastur](https://github.com/robinlinden/hastur)
@@ -323,6 +337,29 @@ Feel free to add your projects here:
 - [eCAL monitor](https://github.com/eclipse-ecal/ecal)
 - [Path Finder](https://github.com/Ruebled/Path_Finder)
 - [rw-tui](https://github.com/LeeKyuHyuk/rw-tui)
+- [resource-monitor](https://github.com/catalincd/resource-monitor)
+- [ftxuiFileReader](https://github.com/J0sephDavis/ftxuiFileReader)
+- [ftxui_CPUMeter](https://github.com/tzzzzzzzx/ftxui_CPUMeter)
+- [Captain's log](https://github.com/nikoladucak/caps-log)
+- [FTowerX](https://github.com/MhmRhm/FTowerX)
+- [Caravan](https://github.com/r3w0p/caravan)
+- [Step-Writer](https://github.com/BrianAnakPintar/step-writer)
+- [XJ music](https://github.com/xjmusic/xjmusic)
+- [UDP chat](https://github.com/Sergeydigl3/udp-chat-tui)
+- [2048-cpp](https://github.com/Chessom/2048-cpp)
+- [Memory game](https://github.com/mikolajlubiak/memory)
+- [Terminal Animation](https://github.com/mikolajlubiak/terminal_animation)
+- [pciex](https://github.com/s0nx/pciex)
+- [Fallout terminal hacking](https://github.com/gshigin/yet-another-fallout-terminal-hacking-game)
+- [Lazylist](https://github.com/zhuyongqi9/lazylist)
+- [TUISIC](https://github.com/Dark-Kernel/tuisic)
+- [inLimbo](https://github.com/nots1dd/inLimbo)
+- [BestEdrOfTheMarket](https://github.com/Xacone/BestEdrOfTheMarket)
+- [terminal-rain](https://github.com/Oakamoore/terminal-rain)
+- [keywords](https://github.com/Oakamoore/keywords) ([Play web version :heart:](https://oakamoore.itch.io/keywords))
+- [FTB - tertminal file browser](https://github.com/Cyxuan0311/FTB)
+- [openJuice](https://github.com/mikomikotaishi/openJuice)
+- [SHOOT!](https://github.com/ShingZhanho/ENGG1340-Project-25Spring)
 
 ### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
 
@@ -339,32 +376,68 @@ Several games using the FTXUI have been made during the Game Jam:
 - [smoothlife](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/smoothlife.md)
 - [Consu](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/consu.md)
 
-## External package
+## Build using CMake
 
-It is **highly** recommended to use CMake FetchContent to depend on FTXUI. This
-way you can specify which commit you would like to depend on.
+It is **highly** recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.
 ```cmake
 include(FetchContent)
-
 FetchContent_Declare(ftxui
   GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
-  GIT_TAG v3.0.0
+  GIT_TAG v6.1.9
 )
+FetchContent_MakeAvailable(ftxui)
 
-FetchContent_GetProperties(ftxui)
-if(NOT ftxui_POPULATED)
-  FetchContent_Populate(ftxui)
-  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
-endif()
+target_link_libraries(your_target PRIVATE
+    # Chose a submodule
+    ftxui::component
+    ftxui::dom
+    ftxui::screen
+)
 ```
 
-If you don't, the following packages have been created:
-- [vcpkg](https://vcpkgx.com/details.html?package=ftxui)
-- [Arch Linux PKGBUILD](https://aur.archlinux.org/packages/ftxui-git/).
-- [conan.io](https://conan.io/center/ftxui)
-- [openSUSE](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui)
+# Build using Bazel
 
-[![Packaging status](https://repology.org/badge/vertical-allrepos/ftxui.svg)](https://repology.org/project/ftxui/versions)
+**MODULE.bazel**
+```starlark
+bazel_dep(
+    name = "ftxui",
+    version = "v6.1.9",
+)
+```
+
+**BUILD.bazel**
+```starlark
+cc_binary(
+    name = "your_target",
+    srcs = ["your_source.cc"],
+    deps = [
+        "@ftxui//:ftxui_component",
+        "@ftxui//:ftxui_dom",
+        "@ftxui//:ftxui_screen",
+    ],
+)
+```
+
+
+# Build with something else:
+If you don't, FTXUI may be used from the following packages:
+- CMake [FetchContent]([https://bewagner.net/programming/2020/05/02/cmake-fetchcontent/](https://cmake.org/cmake/help/latest/module/FetchContent.html)) (preferred),
+- [Bazel](https://registry.bazel.build/modules/ftxui),
+- [vcpkg](https://vcpkg.link/ports/ftxui),
+- [Conan](https://conan.io/center/recipes/ftxui)
+- [Debian package](https://tracker.debian.org/pkg/ftxui),
+- [Ubuntu package](https://launchpad.net/ubuntu/+source/ftxui),
+- [Arch Linux](https://aur.archlinux.org/packages/ftxui/),
+- [OpenSUSE](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui),
+[![Packaging status](https://repology.org/badge/vertical-allrepos/libftxui.svg)](https://repology.org/project/libftxui/versions)
+
+
+If you choose to build and link FTXUI yourself, `ftxui-component` must be first in the linking order relative to the other FTXUI libraries, i.e.
+```bash
+g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .
+```
+
+To build FTXUI with modules, ensure that you are using a generator like Ninja or Visual Studio that supports modules, and pass the flag `FTXUI_BUILD_MODULES`. 
 
 ## Contributors
 

WORKSPACE.bazel

@@ -0,0 +1,4 @@
+# Copyright 2025 Arthur Sonzogni. All rights reserved.
+# Use of this source code is governed by the MIT license that can be found in
+# the LICENSE file.
+workspace(name = "ftxui")

bazel/ftxui.bzl

@@ -0,0 +1,104 @@
+# ftxui_common.bzl
+
+load("@rules_cc//cc:defs.bzl", "cc_library")
+load("@rules_cc//cc:defs.bzl", "cc_binary")
+
+# Microsoft terminal is a bit buggy ¯\_(ツ)_/¯ and MSVC uses bad defaults.
+def windows_copts():
+    MSVC_COPTS = [
+      # Microsoft Visual Studio must decode sources files as UTF-8.
+      "/utf-8",
+
+      # Microsoft Visual Studio must interpret the codepoint using unicode.
+      "/DUNICODE",
+      "/D_UNICODE",
+
+      # Fallback for Microsoft Terminal.
+      # This
+      # - Replace missing font symbols by others.
+      # - Reduce screen position pooling frequency to deals against a Microsoft
+      #   race condition. This was fixed in 2020, but clients never not updated.
+      #   - https://github.com/microsoft/terminal/pull/7583
+      #   - https://github.com/ArthurSonzogni/FTXUI/issues/136
+      "/DFTXUI_MICROSOFT_TERMINAL_FALLBACK",
+    ]
+
+    WINDOWS_COPTS = [
+      # Fallback for Microsoft Terminal.
+      # This
+      # - Replace missing font symbols by others.
+      # - Reduce screen position pooling frequency to deals against a Microsoft
+      #   race condition. This was fixed in 2020, but clients are still using
+      #   old versions.
+      #   - https://github.com/microsoft/terminal/pull/7583
+      #   - https://github.com/ArthurSonzogni/FTXUI/issues/136
+      "-DFTXUI_MICROSOFT_TERMINAL_FALLBACK",
+    ];
+    
+    return select({
+        # MSVC:
+        "@rules_cc//cc/compiler:msvc-cl": MSVC_COPTS,
+        "@rules_cc//cc/compiler:clang-cl": MSVC_COPTS,
+        "@platforms//os:windows": WINDOWS_COPTS,
+        "//conditions:default": [],
+    })
+
+def pthread_linkopts():
+    return select({
+        # With MSVC, threading is already built-in (you don't need -pthread.
+        "@rules_cc//cc/compiler:msvc-cl": [],
+        "@rules_cc//cc/compiler:clang-cl": [],
+        "@rules_cc//cc/compiler:clang": ["-pthread"],
+        "@rules_cc//cc/compiler:gcc": ["-pthread"],
+        "//conditions:default": ["-pthread"],
+    })
+
+def ftxui_cc_library(
+        name,
+        srcs = [],
+        hdrs = [],
+        linkopts = [],
+        deps = []):
+
+    cc_library(
+        name = name,
+        srcs = srcs,
+        hdrs = hdrs,
+        linkopts = linkopts,
+        deps = deps,
+        strip_include_prefix = "",
+        include_prefix = "",
+        includes = [
+            "include",
+            "src",
+        ],
+        copts = windows_copts(),
+        visibility = ["//visibility:public"],
+    )
+
+# Compile all the examples in the examples/ directory.
+# This is useful to check the Bazel is always synchronized against CMake
+# definitions.
+def generate_examples():
+    cpp_files = native.glob(["examples/**/*.cpp"])
+
+    for src in cpp_files:
+        # Skip failing examples due to the color_info_sorted_2d.ipp dependency.
+        if src == "examples/component/homescreen.cpp" or \
+           src == "examples/dom/color_info_palette256.cpp" or \
+           src == "examples/dom/color_gallery.cpp":
+            continue
+
+        # Turn "examples/component/button.cpp" → "example_component_button"
+        name = src.replace("/", "_").replace(".cpp", "")
+
+        cc_binary(
+            name = name,
+            srcs = [src],
+            deps = [
+              ":component",
+              ":dom",
+              ":screen",
+            ],
+            copts = windows_copts(),
+        )

cmake/ftxui_message.cmake

@@ -5,13 +5,14 @@ function(ftxui_message msg)
 endfunction()
 
 ftxui_message("┌─ FTXUI options ─────────────────────")
-ftxui_message("│ FTXUI_ENABLE_INSTALL     : ${FTXUI_ENABLE_INSTALL}")
-ftxui_message("│ FTXUI_BUILD_EXAMPLES     : ${FTXUI_BUILD_EXAMPLES}")
-ftxui_message("│ FTXUI_QUIET              : ${FTXUI_QUIET}")
 ftxui_message("│ FTXUI_BUILD_DOCS         : ${FTXUI_BUILD_DOCS}")
+ftxui_message("│ FTXUI_BUILD_EXAMPLES     : ${FTXUI_BUILD_EXAMPLES}")
+ftxui_message("│ FTXUI_BUILD_MODULES      : ${FTXUI_BUILD_MODULES}")
 ftxui_message("│ FTXUI_BUILD_TESTS        : ${FTXUI_BUILD_TESTS}")
 ftxui_message("│ FTXUI_BUILD_TESTS_FUZZER : ${FTXUI_BUILD_TESTS_FUZZER}")
-ftxui_message("│ FTXUI_ENABLE_COVERAGE    : ${FTXUI_ENABLE_COVERAGE}")
-ftxui_message("│ FTXUI_DEV_WARNINGS       : ${FTXUI_DEV_WARNINGS}")
 ftxui_message("│ FTXUI_CLANG_TIDY         : ${FTXUI_CLANG_TIDY}")
+ftxui_message("│ FTXUI_DEV_WARNINGS       : ${FTXUI_DEV_WARNINGS}")
+ftxui_message("│ FTXUI_ENABLE_COVERAGE    : ${FTXUI_ENABLE_COVERAGE}")
+ftxui_message("│ FTXUI_ENABLE_INSTALL     : ${FTXUI_ENABLE_INSTALL}")
+ftxui_message("│ FTXUI_QUIET              : ${FTXUI_QUIET}")
 ftxui_message("└─────────────────────────────────────")

cmake/ftxui_modules.cmake

@@ -0,0 +1,81 @@
+if (NOT FTXUI_BUILD_MODULES)
+  return()
+endif()
+
+add_library(ftxui-modules)
+
+target_sources(ftxui-modules
+  PUBLIC FILE_SET CXX_MODULES FILES
+  src/ftxui/component.cppm
+  src/ftxui/component/Animation.cppm
+  src/ftxui/component/CapturedMouse.cppm
+  src/ftxui/component/Component.cppm
+  src/ftxui/component/ComponentBase.cppm
+  src/ftxui/component/ComponentOptions.cppm
+  src/ftxui/component/Event.cppm
+  src/ftxui/component/Loop.cppm
+  src/ftxui/component/Mouse.cppm
+  src/ftxui/component/Receiver.cppm
+  src/ftxui/component/ScreenInteractive.cppm
+  src/ftxui/component/Task.cppm
+  src/ftxui/dom.cppm
+  src/ftxui/dom/Canvas.cppm
+  src/ftxui/dom/Deprecated.cppm
+  src/ftxui/dom/Direction.cppm
+  src/ftxui/dom/Elements.cppm
+  src/ftxui/dom/FlexboxConfig.cppm
+  src/ftxui/dom/LinearGradient.cppm
+  src/ftxui/dom/Node.cppm
+  src/ftxui/dom/Requirement.cppm
+  src/ftxui/dom/Selection.cppm
+  src/ftxui/dom/Table.cppm
+  src/ftxui/screen.cppm
+  src/ftxui/screen/Box.cppm
+  src/ftxui/screen/Color.cppm
+  src/ftxui/screen/ColorInfo.cppm
+  src/ftxui/screen/Deprecated.cppm
+  src/ftxui/screen/Image.cppm
+  src/ftxui/screen/Pixel.cppm
+  src/ftxui/screen/Screen.cppm
+  src/ftxui/screen/String.cppm
+  src/ftxui/screen/Terminal.cppm
+  src/ftxui/util.cppm
+  src/ftxui/util/AutoReset.cppm
+  src/ftxui/util/Ref.cppm
+  )
+
+target_link_libraries(ftxui-modules
+  PUBLIC
+    ftxui::screen
+    ftxui::dom
+    ftxui::component
+)
+
+target_compile_features(ftxui-modules PUBLIC cxx_std_20)
+if (CMAKE_COMPILER_IS_GNUCXX)
+  target_compile_options(${name} PUBLIC -fmodules-ts)
+endif ()
+
+add_library(ftxui::modules ALIAS ftxui-modules)
+
+if(FTXUI_ENABLE_INSTALL)
+
+include(GNUInstallDirs)
+
+install(TARGETS ftxui-modules
+    EXPORT ftxui-targets
+    FILE_SET CXX_MODULES
+      DESTINATION ${CMAKE_INSTALL_INCLUDEDIR}/ftxui
+    FILE_SET HEADERS
+      DESTINATION ${CMAKE_INSTALL_INCLUDEDIR}/ftxui
+    INCLUDES
+      DESTINATION ${CMAKE_INSTALL_INCLUDEDIR}/ftxui
+)
+install(EXPORT ftxui-targets
+    DESTINATION ${CMAKE_INSTALL_LIBDIR}/cmake/ftxui
+    CXX_MODULES_DIRECTORY ${CMAKE_INSTALL_LIBDIR}/cmake/ftxui
+)
+install(FILES my_package-config.cmake
+    DESTINATION ${CMAKE_INSTALL_LIBDIR}/cmake/ftxui
+)
+endif()

cmake/ftxui_set_options.cmake

@@ -45,10 +45,16 @@ function(ftxui_set_options library)
 
   # Force Microsoft Visual Studio to decode sources files in UTF-8. This applies
   # to the library and the library users.
-  if (MSVC)
+  if (CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
     target_compile_options(${library} PUBLIC "/utf-8")
   endif()
 
+  # CMake does automatically add -fPIC when linking a shared library, but it
+  # does not add it when linking a static library. This is a problem when the 
+  # static library is later linked into a shared library. 
+  # Doing it helps some users.
+  set_property(TARGET ${library} PROPERTY POSITION_INDEPENDENT_CODE ON)
+
   # Add as many warning as possible:
   if (WIN32)
     if (MSVC)
@@ -77,10 +83,6 @@ function(ftxui_set_options library)
       target_compile_options(${library} PRIVATE "-Wpedantic")
       target_compile_options(${library} PRIVATE "-Wshadow")
       target_compile_options(${library} PRIVATE "-Wunused")
-      
-      if (CMAKE_CXX_COMPILER_ID STREQUAL "GNU")
-        target_compile_options(${library} PRIVATE "-Wuseless-cast")
-      endif()
     endif()
   endif()
 

cmake/ftxui_test.cmake

@@ -13,11 +13,13 @@ add_executable(ftxui-tests
   src/ftxui/component/component_test.cpp
   src/ftxui/component/component_test.cpp
   src/ftxui/component/container_test.cpp
+  src/ftxui/component/dropdown_test.cpp
   src/ftxui/component/hoverable_test.cpp
   src/ftxui/component/input_test.cpp
   src/ftxui/component/menu_test.cpp
   src/ftxui/component/modal_test.cpp
   src/ftxui/component/radiobox_test.cpp
+  src/ftxui/util/ref_test.cpp
   src/ftxui/component/receiver_test.cpp
   src/ftxui/component/resizable_split_test.cpp
   src/ftxui/component/screen_interactive_test.cpp
@@ -37,8 +39,10 @@ add_executable(ftxui-tests
   src/ftxui/dom/gridbox_test.cpp
   src/ftxui/dom/hbox_test.cpp
   src/ftxui/dom/hyperlink_test.cpp
+  src/ftxui/dom/italic_test.cpp
   src/ftxui/dom/linear_gradient_test.cpp
   src/ftxui/dom/scroll_indicator_test.cpp
+  src/ftxui/dom/selection_test.cpp
   src/ftxui/dom/separator_test.cpp
   src/ftxui/dom/spinner_test.cpp
   src/ftxui/dom/table_test.cpp
@@ -59,6 +63,11 @@ target_include_directories(ftxui-tests
 )
 target_compile_features(ftxui-tests PRIVATE cxx_std_20)
 
+# Disable unity build for tests. There are several files defining the same
+# function in different anonymous namespaces. This is not allowed in unity
+# builds, as it would result in multiple definitions of the same function.
+set_target_properties(ftxui-tests PROPERTIES UNITY_BUILD OFF)
+
 if (FTXUI_MICROSOFT_TERMINAL_FALLBACK)
   target_compile_definitions(ftxui-tests
     PRIVATE "FTXUI_MICROSOFT_TERMINAL_FALLBACK")

doc/mainpage.md

@@ -50,41 +50,17 @@ int main(void) {
 └────┘└────────────────────────────────────┘└─────┘
 ```
 
-# Build {#build}
+## Configure {#configure}
+### Using CMake and find_package {#build-cmake-find-package}
 
-## Using CMake {#build-cmake}
+Assuming FTXUI is available or installed on the system.
 
-This is an example configuration for your **CMakeLists.txt**
-
-CMakeLists.txt
+**CMakeLists.txt**
 ```cmake
 cmake_minimum_required (VERSION 3.11)
-
-# --- Fetch FTXUI --------------------------------------------------------------
-include(FetchContent)
-
-set(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
-FetchContent_Declare(ftxui
-  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
-  # Important: Specify a GIT_TAG XXXXX here.
-)
-
-FetchContent_GetProperties(ftxui)
-if(NOT ftxui_POPULATED)
-  FetchContent_Populate(ftxui)
-  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
-endif()
-
-# ------------------------------------------------------------------------------
-
-project(ftxui-starter
-  LANGUAGES CXX
-  VERSION 1.0.0
-)
-
+find_package(ftxui 5 REQUIRED)
+project(ftxui-starter LANGUAGES CXX VERSION 1.0.0)
 add_executable(ftxui-starter src/main.cpp)
-target_include_directories(ftxui-starter PRIVATE src)
-
 target_link_libraries(ftxui-starter
   PRIVATE ftxui::screen
   PRIVATE ftxui::dom
@@ -93,12 +69,58 @@ target_link_libraries(ftxui-starter
 
 ```
 
-Subsequently, you build the project in the standard fashion as follows:
-```bash
-mkdir build && cd build
-cmake ..
-make
-./main
+### Using CMake and FetchContent {#build-cmake}
+
+If you want to fetch FTXUI using cmake:
+
+**CMakeLists.txt**
+```cmake
+cmake_minimum_required (VERSION 3.11)
+
+include(FetchContent)
+set(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
+FetchContent_Declare(ftxui
+  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
+  GIT_TAG 6.1.9
+)
+FetchContent_MakeAvailable(ftxui)
+
+project(ftxui-starter LANGUAGES CXX VERSION 1.0.0)
+add_executable(ftxui-starter src/main.cpp)
+target_link_libraries(ftxui-starter
+  PRIVATE ftxui::screen
+  PRIVATE ftxui::dom
+  PRIVATE ftxui::component # Not needed for this example.
+)
+```
+
+### Using Bazel {#build-bazel}
+
+See [ftxui module](https://registry.bazel.build/modules/ftxui) from the Bazel
+Central Registry.
+
+See also this [starter](https://github.com/ArthurSonzogni/ftxui-bazel) project.
+
+**Module.bazel**
+```starlark
+bazel_dep(
+    name = "ftxui",
+    version = "6.1.9",
+)
+```
+
+**BUILD.bazel**
+```starlark
+cc_binary(
+    name = "main",
+    srcs = ["main.cpp"],
+    deps = [
+        # Choose one of the following:
+        "@ftxui//:dom",
+        "@ftxui//:screen",
+        "@ftxui//:component",
+    ],
+)
 ```
 
 # List of modules. {#modules}
@@ -121,8 +143,8 @@ The project is comprised of 3 modules:
 
 This is the visual element of the program. It defines a `ftxui::Screen`, which
 is a grid of `ftxui::Pixel`. A Pixel represents a Unicode character and its
-associated style (bold, colors, etc.). The screen can be printed as a string
-using `ftxui::Screen::ToString()`. The following example highlights this
+associated style (bold, italic, colors, etc.). The screen can be printed as a
+string using `ftxui::Screen::ToString()`. The following example highlights this
 process:
 
 ```cpp
@@ -474,10 +496,11 @@ See [demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/linea
 
 ## Style {#dom-style}
 In addition to colored text and colored backgrounds. Many terminals support text
-effects such as: `bold`, `dim`, `underlined`, `inverted`, `blink`.
+effects such as: `bold`, `italic`, `dim`, `underlined`, `inverted`, `blink`.
 
 ```cpp
 Element bold(Element);
+Element italic(Element);
 Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
@@ -633,6 +656,26 @@ Produced by: `ftxui::Input()` from "ftxui/component/component.hpp"
 <script id="asciicast-223719" src="https://asciinema.org/a/223719.js" async></script>
 @endhtmlonly
 
+### Filtered input
+
+On can filter out the characters received by the input component, using
+`ftxui::CatchEvent`.
+
+```cpp
+std::string phone_number;
+Component input = Input(&phone_number, "phone number");
+
+// Filter out non-digit characters.
+input |= CatchEvent([&](Event event) {
+  return event.is_character() && !std::isdigit(event.character()[0]);
+});
+
+// Filter out characters past the 10th one.
+input |= CatchEvent([&](Event event) {
+  return event.is_character() && phone_number.size() >= 10;
+});
+```
+
 ## Menu {#component-menu}
 
 Defines a menu object. It contains a list of entries, one of them is selected.

examples/CMakeLists.txt

@@ -21,6 +21,8 @@ if (EMSCRIPTEN)
   get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
   foreach(file
       "index.html"
+      "index.mjs"
+      "index.css"
       "sw.js"
       "run_webassembly.py")
     configure_file(${file} ${file})

examples/component/CMakeLists.txt

@@ -11,12 +11,14 @@ example(collapsible)
 example(composition)
 example(custom_loop)
 example(dropdown)
+example(dropdown_custom)
 example(flexbox_gallery)
 example(focus)
 example(focus_cursor)
 example(gallery)
 example(homescreen)
 example(input)
+example(input_in_frame)
 example(input_style)
 example(linear_gradient_gallery)
 example(maybe)
@@ -25,6 +27,7 @@ example(menu2)
 example(menu_entries)
 example(menu_entries_animated)
 example(menu_in_frame)
+example(menu_in_frame_horizontal)
 example(menu_multiple)
 example(menu_style)
 example(menu_underline_animated_gallery)
@@ -36,6 +39,8 @@ example(radiobox)
 example(radiobox_in_frame)
 example(renderer)
 example(resizable_split)
+example(scrollbar)
+example(selection)
 example(slider)
 example(slider_direction)
 example(slider_rgb)

examples/component/button.cpp

@@ -12,13 +12,41 @@
 
 using namespace ftxui;
 
+// This is a helper function to create a button with a custom style.
+// The style is defined by a lambda function that takes an EntryState and
+// returns an Element.
+// We are using `center` to center the text inside the button, then `border` to
+// add a border around the button, and finally `flex` to make the button fill
+// the available space.
+ButtonOption ButtonStyle() {
+  auto option = ButtonOption::Animated();
+  option.transform = [](const EntryState& s) {
+    auto element = text(s.label);
+    if (s.focused) {
+      element |= bold;
+    }
+    return element | center | borderEmpty | flex;
+  };
+  return option;
+}
+
 int main() {
   int value = 50;
 
   // The tree of components. This defines how to navigate using the keyboard.
-  auto buttons = Container::Horizontal({
-      Button("Decrease", [&] { value--; }),
-      Button("Increase", [&] { value++; }),
+  auto buttons = Container::Vertical({
+      Container::Horizontal({
+          Button(
+              "-1", [&] { value--; }, ButtonStyle()),
+          Button(
+              "+1", [&] { value++; }, ButtonStyle()),
+      }) | flex,
+      Container::Horizontal({
+          Button(
+              "-10", [&] { value -= 10; }, ButtonStyle()),
+          Button(
+              "+10", [&] { value += 10; }, ButtonStyle()),
+      }) | flex,
   });
 
   // Modify the way to render them on screen:
@@ -26,14 +54,12 @@ int main() {
     return vbox({
                text("value = " + std::to_string(value)),
                separator(),
-               gauge(value * 0.01f),
-               separator(),
-               buttons->Render(),
+               buttons->Render() | flex,
            }) |
-           border;
+           flex | border;
   });
 
-  auto screen = ScreenInteractive::FitComponent();
+  auto screen = ScreenInteractive::Fullscreen();
   screen.Loop(component);
   return 0;
 }

examples/component/checkbox.cpp

@@ -1,30 +1,38 @@
 // Copyright 2021 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
-#include <memory>  // for allocator, __shared_ptr_access
-#include <string>  // for string, basic_string, operator+, to_string
-#include <vector>  // for vector
+#include <array>  // for array
+#include <iostream>
+#include <memory>  // for shared_ptr, __shared_ptr_access
+#include <string>  // for operator+, to_string
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Input, Renderer, Vertical
+#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"      // for ComponentBase
-#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
 
+using namespace ftxui;
+
 int main() {
-  using namespace ftxui;
+  bool download = false;
+  bool upload = false;
+  bool ping = false;
 
-  Component input_list = Container::Vertical({});
-  std::vector<std::string> items(100, "");
-  for (size_t i = 0; i < items.size(); ++i) {
-    input_list->Add(Input(&(items[i]), "placeholder " + std::to_string(i)));
-  }
-
-  auto renderer = Renderer(input_list, [&] {
-    return input_list->Render() | vscroll_indicator | frame | border |
-           size(HEIGHT, LESS_THAN, 10);
+  auto container = Container::Vertical({
+      Checkbox("Download", &download),
+      Checkbox("Upload", &upload),
+      Checkbox("Ping", &ping),
   });
 
-  auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(renderer);
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(container);
+
+  std::cout << "---" << std::endl;
+  std::cout << "Download: " << download << std::endl;
+  std::cout << "Upload: " << upload << std::endl;
+  std::cout << "Ping: " << ping << std::endl;
+  std::cout << "---" << std::endl;
+
+  return 0;
 }

examples/component/dropdown_custom.cpp

@@ -0,0 +1,104 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <string>  // for basic_string, string, allocator
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Dropdown, Horizontal, Vertical
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+int main() {
+  using namespace ftxui;
+
+  std::vector<std::string> entries = {
+      "tribute",     "clearance", "ally",        "bend",        "electronics",
+      "module",      "era",       "cultural",    "sniff",       "nationalism",
+      "negotiation", "deliver",   "figure",      "east",        "tribute",
+      "clearance",   "ally",      "bend",        "electronics", "module",
+      "era",         "cultural",  "sniff",       "nationalism", "negotiation",
+      "deliver",     "figure",    "east",        "tribute",     "clearance",
+      "ally",        "bend",      "electronics", "module",      "era",
+      "cultural",    "sniff",     "nationalism", "negotiation", "deliver",
+      "figure",      "east",
+  };
+
+  auto dropdown_1 = Dropdown({
+      .radiobox = {.entries = &entries},
+      .transform =
+          [](bool open, Element checkbox, Element radiobox) {
+            if (open) {
+              return vbox({
+                  checkbox | inverted,
+                  radiobox | vscroll_indicator | frame |
+                      size(HEIGHT, LESS_THAN, 10),
+                  filler(),
+              });
+            }
+            return vbox({
+                checkbox,
+                filler(),
+            });
+          },
+  });
+
+  auto dropdown_2 = Dropdown({
+      .radiobox = {.entries = &entries},
+      .transform =
+          [](bool open, Element checkbox, Element radiobox) {
+            if (open) {
+              return vbox({
+                  checkbox | inverted,
+                  radiobox | vscroll_indicator | frame |
+                      size(HEIGHT, LESS_THAN, 10) | bgcolor(Color::Blue),
+                  filler(),
+              });
+            }
+            return vbox({
+                checkbox | bgcolor(Color::Blue),
+                filler(),
+            });
+          },
+  });
+
+  auto dropdown_3 = Dropdown({
+      .radiobox =
+          {
+              .entries = &entries,
+              .transform =
+                  [](const EntryState& s) {
+                    auto t = text(s.label) | borderEmpty;
+                    if (s.active) {
+                      t |= bold;
+                    }
+                    if (s.focused) {
+                      t |= inverted;
+                    }
+                    return t;
+                  },
+          },
+      .transform =
+          [](bool open, Element checkbox, Element radiobox) {
+            checkbox |= borderEmpty;
+            if (open) {
+              return vbox({
+                  checkbox | inverted,
+                  radiobox | vscroll_indicator | frame |
+                      size(HEIGHT, LESS_THAN, 20) | bgcolor(Color::Red),
+                  filler(),
+              });
+            }
+            return vbox({
+                checkbox | bgcolor(Color::Red),
+                filler(),
+            });
+          },
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(Container::Horizontal({
+      dropdown_1,
+      dropdown_2,
+      dropdown_3,
+  }));
+}

examples/component/gallery.cpp

@@ -97,7 +97,25 @@ int main() {
   });
   sliders = Wrap("Slider", sliders);
 
-  // -- Layout -----------------------------------------------------------------
+  // A large text:
+  auto lorel_ipsum = Renderer([] {
+    return vbox({
+        text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. "),
+        text("Sed do eiusmod tempor incididunt ut labore et dolore magna "
+             "aliqua. "),
+        text("Ut enim ad minim veniam, quis nostrud exercitation ullamco "
+             "laboris nisi ut aliquip ex ea commodo consequat. "),
+        text("Duis aute irure dolor in reprehenderit in voluptate velit esse "
+             "cillum dolore eu fugiat nulla pariatur. "),
+        text("Excepteur sint occaecat cupidatat non proident, sunt in culpa "
+             "qui officia deserunt mollit anim id est laborum. "),
+
+    });
+  });
+  lorel_ipsum = Wrap("Lorel Ipsum", lorel_ipsum);
+
+  // -- Layout
+  // -----------------------------------------------------------------
   auto layout = Container::Vertical({
       menu,
       toggle,
@@ -106,6 +124,7 @@ int main() {
       input,
       sliders,
       button,
+      lorel_ipsum,
   });
 
   auto component = Renderer(layout, [&] {
@@ -123,6 +142,8 @@ int main() {
                sliders->Render(),
                separator(),
                button->Render(),
+               separator(),
+               lorel_ipsum->Render(),
            }) |
            xflex | size(WIDTH, GREATER_THAN, 40) | border;
   });

examples/component/homescreen.cpp

@@ -264,7 +264,7 @@ int main() {
   });
 
   // ---------------------------------------------------------------------------
-  // Spiner
+  // Spinner
   // ---------------------------------------------------------------------------
   auto spinner_tab_renderer = Renderer([&] {
     Elements entries;
@@ -424,7 +424,7 @@ int main() {
   auto paragraph_renderer_left = Renderer([&] {
     std::string str =
         "Lorem Ipsum is simply dummy text of the printing and typesetting "
-        "industry. Lorem Ipsum has been the industry's standard dummy text "
+        "industry.\nLorem Ipsum has been the industry's standard dummy text "
         "ever since the 1500s, when an unknown printer took a galley of type "
         "and scrambled it to make a type specimen book.";
     return vbox({
@@ -490,15 +490,24 @@ int main() {
       },
       &tab_index);
 
+  auto exit_button =
+      Button("Exit", [&] { screen.Exit(); }, ButtonOption::Animated());
+
   auto main_container = Container::Vertical({
+      Container::Horizontal({
           tab_selection,
+          exit_button,
+      }),
       tab_content,
   });
 
   auto main_renderer = Renderer(main_container, [&] {
     return vbox({
         text("FTXUI Demo") | bold | hcenter,
-        tab_selection->Render(),
+        hbox({
+            tab_selection->Render() | flex,
+            exit_button->Render(),
+        }),
         tab_content->Render() | flex,
     });
   });

examples/component/input.cpp

@@ -15,30 +15,50 @@
 int main() {
   using namespace ftxui;
 
+  // The data:
   std::string first_name;
   std::string last_name;
   std::string password;
+  std::string phoneNumber;
 
+  // The basic input components:
   Component input_first_name = Input(&first_name, "first name");
   Component input_last_name = Input(&last_name, "last name");
 
+  // The password input component:
   InputOption password_option;
   password_option.password = true;
   Component input_password = Input(&password, "password", password_option);
 
+  // The phone number input component:
+  // We are using `CatchEvent` to filter out non-digit characters.
+  Component input_phone_number = Input(&phoneNumber, "phone number");
+  input_phone_number |= CatchEvent([&](Event event) {
+    return event.is_character() && !std::isdigit(event.character()[0]);
+  });
+  input_phone_number |= CatchEvent([&](Event event) {
+    return event.is_character() && phoneNumber.size() > 10;
+  });
+
+  // The component tree:
   auto component = Container::Vertical({
       input_first_name,
       input_last_name,
       input_password,
+      input_phone_number,
   });
 
+  // Tweak how the component tree is rendered:
   auto renderer = Renderer(component, [&] {
     return vbox({
-               text("Hello " + first_name + " " + last_name),
-               separator(),
                hbox(text(" First name : "), input_first_name->Render()),
                hbox(text(" Last name  : "), input_last_name->Render()),
                hbox(text(" Password   : "), input_password->Render()),
+               hbox(text(" Phone num  : "), input_phone_number->Render()),
+               separator(),
+               text("Hello " + first_name + " " + last_name),
+               text("Your password is " + password),
+               text("Your phone number is " + phoneNumber),
            }) |
            border;
   });

examples/component/input_in_frame.cpp

@@ -0,0 +1,30 @@
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for allocator, __shared_ptr_access
+#include <string>  // for string, basic_string, operator+, to_string
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Input, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
+
+int main() {
+  using namespace ftxui;
+
+  Component input_list = Container::Vertical({});
+  std::vector<std::string> items(100, "");
+  for (size_t i = 0; i < items.size(); ++i) {
+    input_list->Add(Input(&(items[i]), "placeholder " + std::to_string(i)));
+  }
+
+  auto renderer = Renderer(input_list, [&] {
+    return input_list->Render() | vscroll_indicator | frame | border |
+           size(HEIGHT, LESS_THAN, 10);
+  });
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(renderer);
+}

examples/component/menu_in_frame_horizontal.cpp

@@ -0,0 +1,30 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for shared_ptr, __shared_ptr_access
+#include <string>  // for string, basic_string, operator+, to_string
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"      // for ftxui
+#include "ftxui/component/component.hpp"           // for Radiobox, Renderer
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, HEIGHT, LESS_THAN
+
+using namespace ftxui;
+
+int main() {
+  std::vector<std::string> entries;
+  int selected = 0;
+
+  for (int i = 0; i < 100; ++i)
+    entries.push_back(std::to_string(i));
+  auto radiobox = Menu(&entries, &selected, MenuOption::Horizontal());
+  auto renderer = Renderer(
+      radiobox, [&] { return radiobox->Render() | hscroll_indicator | frame; });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(renderer);
+
+  return 0;
+}

examples/component/print_key_press.cpp

@@ -18,120 +18,12 @@
 
 using namespace ftxui;
 
-std::string Stringify(Event event) {
-  std::string out;
-  for (auto& it : event.input())
-    out += " " + std::to_string((unsigned int)it);
-
-  out = "(" + out + " ) -> ";
-  if (event.is_character()) {
-    out += "Event::Character(\"" + event.character() + "\")";
-  } else if (event.is_mouse()) {
-    out += "mouse";
-    switch (event.mouse().button) {
-      case Mouse::Left:
-        out += "_left";
-        break;
-      case Mouse::Middle:
-        out += "_middle";
-        break;
-      case Mouse::Right:
-        out += "_right";
-        break;
-      case Mouse::None:
-        out += "_none";
-        break;
-      case Mouse::WheelUp:
-        out += "_wheel_up";
-        break;
-      case Mouse::WheelDown:
-        out += "_wheel_down";
-        break;
+std::string Code(Event event) {
+  std::string codes;
+  for (auto& it : event.input()) {
+    codes += " " + std::to_string((unsigned int)it);
   }
-    switch (event.mouse().motion) {
-      case Mouse::Pressed:
-        out += "_pressed";
-        break;
-      case Mouse::Released:
-        out += "_released";
-        break;
-    }
-    if (event.mouse().control)
-      out += "_control";
-    if (event.mouse().shift)
-      out += "_shift";
-    if (event.mouse().meta)
-      out += "_meta";
-
-    out += "(" +  //
-           std::to_string(event.mouse().x) + "," +
-           std::to_string(event.mouse().y) + ")";
-  } else if (event == Event::ArrowLeft) {
-    out += "Event::ArrowLeft";
-  } else if (event == Event::ArrowRight) {
-    out += "Event::ArrowRight";
-  } else if (event == Event::ArrowUp) {
-    out += "Event::ArrowUp";
-  } else if (event == Event::ArrowDown) {
-    out += "Event::ArrowDown";
-  } else if (event == Event::ArrowLeftCtrl) {
-    out += "Event::ArrowLeftCtrl";
-  } else if (event == Event ::ArrowRightCtrl) {
-    out += "Event::ArrowRightCtrl";
-  } else if (event == Event::ArrowUpCtrl) {
-    out += "Event::ArrowUpCtrl";
-  } else if (event == Event::ArrowDownCtrl) {
-    out += "Event::ArrowDownCtrl";
-  } else if (event == Event::Backspace) {
-    out += "Event::Backspace";
-  } else if (event == Event::Delete) {
-    out += "Event::Delete";
-  } else if (event == Event::Escape) {
-    out += "Event::Escape";
-  } else if (event == Event::Return) {
-    out += "Event::Return";
-  } else if (event == Event::Tab) {
-    out += "Event::Tab";
-  } else if (event == Event::TabReverse) {
-    out += "Event::TabReverse";
-  } else if (event == Event::F1) {
-    out += "Event::F1";
-  } else if (event == Event::F2) {
-    out += "Event::F2";
-  } else if (event == Event::F3) {
-    out += "Event::F3";
-  } else if (event == Event::F4) {
-    out += "Event::F4";
-  } else if (event == Event::F5) {
-    out += "Event::F5";
-  } else if (event == Event::F6) {
-    out += "Event::F6";
-  } else if (event == Event::F7) {
-    out += "Event::F7";
-  } else if (event == Event::F8) {
-    out += "Event::F8";
-  } else if (event == Event::F9) {
-    out += "Event::F9";
-  } else if (event == Event::F10) {
-    out += "Event::F10";
-  } else if (event == Event::F11) {
-    out += "Event::F11";
-  } else if (event == Event::F12) {
-    out += "Event::F12";
-  } else if (event == Event::Home) {
-    out += "Event::Home";
-  } else if (event == Event::End) {
-    out += "Event::End";
-  } else if (event == Event::PageUp) {
-    out += "Event::PageUp";
-  } else if (event == Event::PageDown) {
-    out += "Event::PageDown";
-  } else if (event == Event::Custom) {
-    out += "Custom";
-  } else {
-    out += "(special)";
-  }
-  return out;
+  return codes;
 }
 
 int main() {
@@ -139,16 +31,35 @@ int main() {
 
   std::vector<Event> keys;
 
-  auto component = Renderer([&] {
-    Elements children;
-    for (size_t i = std::max(0, (int)keys.size() - 20); i < keys.size(); ++i)
-      children.push_back(text(Stringify(keys[i])));
-    return window(text("keys"), vbox(std::move(children)));
+  auto left_column = Renderer([&] {
+    Elements children = {
+        text("Codes"),
+        separator(),
+    };
+    for (size_t i = std::max(0, (int)keys.size() - 20); i < keys.size(); ++i) {
+      children.push_back(text(Code(keys[i])));
+    }
+    return vbox(children);
   });
 
+  auto right_column = Renderer([&] {
+    Elements children = {
+        text("Event"),
+        separator(),
+    };
+    for (size_t i = std::max(0, (int)keys.size() - 20); i < keys.size(); ++i) {
+      children.push_back(text(keys[i].DebugString()));
+    }
+    return vbox(children);
+  });
+
+  int split_size = 40;
+  auto component = ResizableSplitLeft(left_column, right_column, &split_size);
+  component |= border;
+
   component |= CatchEvent([&](Event event) {
     keys.push_back(event);
-    return true;
+    return false;
   });
 
   screen.Loop(component);

examples/component/scrollbar.cpp

@@ -0,0 +1,112 @@
+// Copyright 2023 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <ftxui/component/component.hpp>
+#include <ftxui/component/screen_interactive.hpp>
+
+using namespace ftxui;
+
+Component DummyWindowContent() {
+  class Impl : public ComponentBase {
+   private:
+    float scroll_x = 0.1;
+    float scroll_y = 0.1;
+
+   public:
+    Impl() {
+      auto content = Renderer([=] {
+        const std::string lorem =
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed "
+            "do eiusmod tempor incididunt ut labore et dolore magna "
+            "aliqua. Ut enim ad minim veniam, quis nostrud exercitation "
+            "ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis "
+            "aute irure dolor in reprehenderit in voluptate velit esse "
+            "cillum dolore eu fugiat nulla pariatur. Excepteur sint "
+            "occaecat cupidatat non proident, sunt in culpa qui officia "
+            "deserunt mollit anim id est laborum.";
+        return vbox({
+            text(lorem.substr(0, -1)),   text(lorem.substr(5, -1)),   text(""),
+            text(lorem.substr(10, -1)),  text(lorem.substr(15, -1)),  text(""),
+            text(lorem.substr(20, -1)),  text(lorem.substr(25, -1)),  text(""),
+            text(lorem.substr(30, -1)),  text(lorem.substr(35, -1)),  text(""),
+            text(lorem.substr(40, -1)),  text(lorem.substr(45, -1)),  text(""),
+            text(lorem.substr(50, -1)),  text(lorem.substr(55, -1)),  text(""),
+            text(lorem.substr(60, -1)),  text(lorem.substr(65, -1)),  text(""),
+            text(lorem.substr(70, -1)),  text(lorem.substr(75, -1)),  text(""),
+            text(lorem.substr(80, -1)),  text(lorem.substr(85, -1)),  text(""),
+            text(lorem.substr(90, -1)),  text(lorem.substr(95, -1)),  text(""),
+            text(lorem.substr(100, -1)), text(lorem.substr(105, -1)), text(""),
+            text(lorem.substr(110, -1)), text(lorem.substr(115, -1)), text(""),
+            text(lorem.substr(120, -1)), text(lorem.substr(125, -1)), text(""),
+            text(lorem.substr(130, -1)), text(lorem.substr(135, -1)), text(""),
+            text(lorem.substr(140, -1)),
+        });
+      });
+
+      auto scrollable_content = Renderer(content, [&, content] {
+        return content->Render() | focusPositionRelative(scroll_x, scroll_y) |
+               frame | flex;
+      });
+
+      SliderOption<float> option_x;
+      option_x.value = &scroll_x;
+      option_x.min = 0.f;
+      option_x.max = 1.f;
+      option_x.increment = 0.1f;
+      option_x.direction = Direction::Right;
+      option_x.color_active = Color::Blue;
+      option_x.color_inactive = Color::BlueLight;
+      auto scrollbar_x = Slider(option_x);
+
+      SliderOption<float> option_y;
+      option_y.value = &scroll_y;
+      option_y.min = 0.f;
+      option_y.max = 1.f;
+      option_y.increment = 0.1f;
+      option_y.direction = Direction::Down;
+      option_y.color_active = Color::Yellow;
+      option_y.color_inactive = Color::YellowLight;
+      auto scrollbar_y = Slider(option_y);
+
+      Add(Container::Vertical({
+          Container::Horizontal({
+              scrollable_content,
+              scrollbar_y,
+          }) | flex,
+          Container::Horizontal({
+              scrollbar_x,
+              Renderer([] { return text(L"x"); }),
+          }),
+      }));
+    }
+  };
+  return Make<Impl>();
+}
+
+int main() {
+  auto window_1 = Window({
+      .inner = DummyWindowContent(),
+      .title = "First window",
+      .width = 80,
+      .height = 30,
+  });
+
+  auto window_2 = Window({
+      .inner = DummyWindowContent(),
+      .title = "My window",
+      .left = 40,
+      .top = 20,
+      .width = 80,
+      .height = 30,
+  });
+
+  auto window_container = Container::Stacked({
+      window_1,
+      window_2,
+  });
+
+  auto screen = ScreenInteractive::Fullscreen();
+  screen.Loop(window_container);
+
+  return EXIT_SUCCESS;
+}

examples/component/selection.cpp

@@ -0,0 +1,87 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <string>  // for char_traits, operator+, string, basic_string
+
+#include "ftxui/component/component.hpp"       // for Input, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/component_options.hpp"  // for InputOption
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, hbox, separator, Element, operator|, vbox, border
+#include "ftxui/util/ref.hpp"  // for Ref
+
+using namespace ftxui;
+
+Element LoremIpsum() {
+  return vbox({
+      text("FTXUI: A powerful library for building user interfaces."),
+      text("Enjoy a rich set of components and a declarative style."),
+      text("Create beautiful and responsive UIs with minimal effort."),
+      text("Join the community and experience the power of FTXUI."),
+  });
+}
+
+int main() {
+  auto screen = ScreenInteractive::TerminalOutput();
+
+  auto quit =
+      Button("Quit", screen.ExitLoopClosure(), ButtonOption::Animated());
+
+  int selection_change_counter = 0;
+  std::string selection_content = "";
+  screen.SelectionChange([&] {
+    selection_change_counter++;
+    selection_content = screen.GetSelection();
+  });
+
+  // The components:
+  auto renderer = Renderer(quit, [&] {
+    return vbox({
+        text("Select changed: " + std::to_string(selection_change_counter) +
+             " times"),
+        text("Currently selected: "),
+        paragraph(selection_content) | vscroll_indicator | frame | border |
+            size(HEIGHT, EQUAL, 10),
+        window(text("Horizontal split"), hbox({
+                                             LoremIpsum(),
+                                             separator(),
+                                             LoremIpsum(),
+                                             separator(),
+                                             LoremIpsum(),
+                                         })),
+        window(text("Vertical split"), vbox({
+                                           LoremIpsum(),
+                                           separator(),
+                                           LoremIpsum(),
+                                           separator(),
+                                           LoremIpsum(),
+                                       })),
+        window(text("Grid split with different style"),
+               vbox({
+                   hbox({
+                       LoremIpsum(),
+                       separator(),
+                       LoremIpsum()                                   //
+                           | selectionBackgroundColor(Color::Yellow)  //
+                           | selectionColor(Color::Black)             //
+                           | selectionStyleReset,
+                       separator(),
+                       LoremIpsum() | selectionColor(Color::Blue),
+                   }),
+                   separator(),
+                   hbox({
+                       LoremIpsum() | selectionColor(Color::Red),
+                       separator(),
+                       LoremIpsum() | selectionStyle([](Pixel& pixel) {
+                         pixel.underlined_double = true;
+                       }),
+                       separator(),
+                       LoremIpsum(),
+                   }),
+               })),
+        quit->Render(),
+    });
+  });
+
+  screen.Loop(renderer);
+}

examples/component/slider_direction.cpp

@@ -19,7 +19,7 @@ using namespace ftxui;
 int main() {
   auto screen = ScreenInteractive::TerminalOutput();
   std::array<int, 30> values;
-  for (int i = 0; i < values.size(); ++i) {
+  for (size_t i = 0; i < values.size(); ++i) {
     values[i] = 50 + 20 * std::sin(i * 0.3);
   }
 

examples/dom/CMakeLists.txt

@@ -29,6 +29,7 @@ example(style_dim)
 example(style_gallery)
 example(style_hyperlink)
 example(style_inverted)
+example(style_italic)
 example(style_strikethrough)
 example(style_underlined)
 example(style_underlined_double)

examples/dom/color_truecolor_RGB.cpp

@@ -12,7 +12,6 @@
 int main() {
   using namespace ftxui;
 
-  int saturation = 255;
   Elements red_line;
   Elements green_line;
   Elements blue_line;

examples/dom/graph.cpp

@@ -10,6 +10,7 @@
 #include <memory>                   // for shared_ptr
 #include <string>                   // for operator<<, string
 #include <thread>                   // for sleep_for
+#include <utility>                  // for ignore
 #include <vector>                   // for vector
 
 #include "ftxui/dom/node.hpp"  // for Render
@@ -49,6 +50,7 @@ int main() {
 
   std::string reset_position;
   for (int i = 0;; ++i) {
+    std::ignore = i;
     auto document = hbox({
         vbox({
             graph(std::ref(my_graph)),

examples/dom/style_gallery.cpp

@@ -15,6 +15,7 @@ int main() {
     hbox({
       text("normal")                                    , text(" ") ,
       text("bold")               | bold                 , text(" ") ,
+      text("italic")             | italic               , text(" ") ,
       text("dim")                | dim                  , text(" ") ,
       text("inverted")           | inverted             , text(" ") ,
       text("underlined")         | underlined           , text(" ") ,

examples/dom/style_italic.cpp

@@ -0,0 +1,23 @@
+// Copyright 2025 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <ftxui/dom/elements.hpp>  // for text, operator|, inverted, Fit, hbox, Element
+#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <memory>                   // for allocator
+
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/color.hpp"  // for ftxui
+
+int main() {
+  using namespace ftxui;
+  auto document = hbox({
+      text("This text is "),
+      text("italic") | italic,
+      text(". Do you like it?"),
+  });
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+
+  return 0;
+}

examples/dom/table.cpp

@@ -55,7 +55,8 @@ int main() {
   content.DecorateCellsAlternateRow(color(Color::White), 3, 2);
 
   auto document = table.Render();
-  auto screen = Screen::Create(Dimension::Fit(document));
+  auto screen =
+      Screen::Create(Dimension::Fit(document, /*extend_beyond_screen=*/true));
   Render(screen, document);
   screen.Print();
   std::cout << std::endl;

examples/index.css

@@ -0,0 +1,107 @@
+@import url(https://fonts.googleapis.com/css?family=Khula:700);
+
+body {
+  background-color:#EEE;
+  padding:0px;
+  margin:0px;
+  font-family: Khula, Helvetica, sans-serif;
+  font-size: 130%;
+}
+
+.page {
+  max-width:1300px;
+  margin: auto;
+  padding: 10px;
+}
+
+a {
+  box-shadow: inset 0 0 0 0 #54b3d6;
+  color: #0087b9;
+  margin: 0 -.25rem;
+  padding: 0 .25rem;
+  transition: color .3s ease-in-out,
+              box-shadow .3s ease-in-out;
+}
+
+a:hover {
+  box-shadow: inset 120px 0 0 0 #54b3d6;
+  color: white;
+}
+
+h1 {
+  text-decoration: underline;
+  width:100%;
+  background-color: rgba(100,100,255,0.5);
+  padding: 10px;
+  margin: 0;
+}
+
+
+#selectExample {
+  flex:1;
+}
+
+#selectExample, #selectExample option {
+  font-size: 16px;
+  font-family: sans-serif;
+  font-weight: 700;
+  line-height: 1.3;
+  border:0px;
+  background-color: #bbb;
+  color:black;
+}
+
+#selectExample:focus {
+  outline:none;
+}
+
+#terminal {
+  width:100%;
+  height 500px;
+  height: calc(clamp(200px, 100vh - 300px, 900px));
+  overflow: hidden;
+  border:none;
+  background-color:black;
+}
+
+#terminalContainer {
+  overflow: hidden;
+  border-radius: 10px;
+  box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.75),
+  0px 2px 80px 0px rgba(0,0,0,0.50);
+}
+
+.fakeButtons {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  border: 1px solid #000;
+  margin:6px;
+  background-color: #ff3b47;
+  border-color: #9d252b;
+  display: inline-block;
+}
+
+.fakeMinimize {
+  left: 11px;
+  background-color: #ffc100;
+  border-color: #9d802c;
+}
+
+.fakeZoom {
+  left: 16px;
+  background-color: #00d742;
+  border-color: #049931;
+}
+
+.fakeMenu {
+  display:flex;
+  flex-direction: row;
+  width:100%;
+  box-sizing: border-box;
+  height: 25px;
+  background-color: #bbb;
+  color:black;
+  margin: 0 auto;
+  overflow: hidden;
+}

examples/index.html

@@ -1,173 +1,32 @@
-<!DOCTYPE html> <html lang="en">
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <title>FTXUI examples WebAssembly</title>
-    <script src="https://cdn.jsdelivr.net/npm/xterm@4.18.0/lib/xterm.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-webgl@0.11.4/lib/xterm-addon-webgl.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>➡️</text></svg>">
+    <link rel="stylesheet" href="index.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.11.0/css/xterm.css"></link>
-    <!--Add COOP/COEP via a ServiceWorker to use SharedArrayBuffer-->
-    <script>
-      if ("serviceWorker" in navigator && !window.crossOriginIsolated) {
-        navigator.serviceWorker.register(new URL("./sw.js", location.href)).then(
-          registration => {
-            if (registration.active && !navigator.serviceWorker.controller) {
-              window.location.reload();
-            }
-          },
-        );
-      } 
-    </script>
+    <script type="module" src="index.mjs"></script>
   </head>
   <body>
     <script id="example_script"></script>
+
     <div class="page">
-      <h1>FTXUI WebAssembly Example </h1>
       <p>
-        <a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a single
-        C++ library for terminal user interface.
-      </p>
-      <p>
-        On this page, you can try all the examples contained in: <a
-        href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
-        Those are compiled using WebAssembly.
+        <a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a simple
+        functional C++ library for terminal user interface. <br/>
+        This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
       </p>
+
+      <div id="terminalContainer">
+        <div class="fakeMenu">
+          <div class="fakeButtons fakeClose"></div>
+          <div class="fakeButtons fakeMinimize"></div>
+          <div class="fakeButtons fakeZoom"></div>
           <select id="selectExample"></select>
+        </div>
         <div id="terminal"></div>
       </div>
+    </div>
   </body>
-  <script>
-    const example_list = "@EXAMPLES@".split(";");
-
-    const url_search_params = new URLSearchParams(window.location.search);
-    const example = url_search_params.get("file") || "dom/color_gallery";
-    const select = document.getElementById("selectExample"); 
-
-    for(var i = 0; i < example_list.length; i++) {
-        var opt = example_list[i];
-        var el = document.createElement("option");
-        el.textContent = opt;
-        el.value = opt;
-        select.appendChild(el);
-    }
-    select.selectedIndex = example_list.findIndex(path => path == example) || 0;
-    select.addEventListener("change", () => {
-      location.href = (location.href).split('?')[0] + "?file=" +
-            example_list[select.selectedIndex];
-    });
-
-    let stdin_buffer = [];
-    const stdin = () => {
-      return stdin_buffer.shift() || 0;
-    }
-
-    let stdout_buffer = [];
-    const stdout = code => {
-      if (code == 0) {
-        term.write(new Uint8Array(stdout_buffer));
-        stdout_buffer = [];
-      } else {
-        stdout_buffer.push(code)
-      }
-    }
-    let stderrbuffer = [];
-    const stderr = code => {
-      if (code == 0 || code == 10) {
-        console.error(String.fromCodePoint(...stderrbuffer));
-        stderrbuffer = [];
-      } else {
-        stderrbuffer.push(code)
-      }
-    }
-    const term = new Terminal();
-    const term_element = document.querySelector('#terminal');
-    term.open(term_element);
-
-    const webgl_addon = new (WebglAddon.WebglAddon)();
-    term.loadAddon(webgl_addon);
-
-    const onBinary = e => {
-      for(c of e)
-        stdin_buffer.push(c.charCodeAt(0));
-    }
-    term.onBinary(onBinary);
-    term.onData(onBinary)
-    term.resize(140,43);
-    window.Module = {
-      preRun: () => {
-        FS.init(stdin, stdout, stderr);
-      },
-      postRun: [],
-      onRuntimeInitialized: () => {
-        if (window.Module._ftxui_on_resize == undefined)
-          return;
-
-        const fit_addon = new (FitAddon.FitAddon)();
-        term.loadAddon(fit_addon);
-        fit_addon.fit();
-        const resize_handler = () => {
-          const {cols, rows} = fit_addon.proposeDimensions();
-          term.resize(cols, rows);
-          window.Module._ftxui_on_resize(cols, rows);
-        };
-        const resize_observer = new ResizeObserver(resize_handler);
-        resize_observer.observe(term_element);
-        resize_handler();
-
-        // Disable scrollbar
-        term.write('\x1b[?47h')
-      },
-    };
-
-    const words = example.split('/')
-    words[1] = "ftxui_example_" + words[1] + ".js"
-    document.querySelector("#example_script").src = words.join('/');
-  </script>
-
-  <style>
-
-    body {
-      background-color:#EEE;
-      padding:20px;
-      font-family: Helvetica, sans-serif;
-      font-size: 130%;
-    }
-
-    .page {
-      max-width:1300px;
-      margin: auto;
-    }
-
-    h1 {
-      text-decoration: underline;
-    }
-
-    select {
-      display:block;
-      padding: .6em 1.4em .5em .8em;
-      border-radius: 20px 20px 0px 0px;
-      font-size: 16px;
-      font-family: sans-serif;
-      font-weight: 700;
-
-      color: #444;
-      line-height: 1.3;
-      background-color:black;
-      border:0px;
-      color:white;
-      transition: color 0.2s linear;
-      transition: background-color 0.2s linear;
-    }
-
-    #terminal {
-      width:100%;
-      height: 500px;
-      height: calc(clamp(200px, 100vh - 300px, 900px));
-      overflow: hidden;
-      border:none;
-      padding:auto;
-    }
-
-  </style>
-
 </html>

examples/index.mjs

@@ -0,0 +1,100 @@
+import xterm             from 'https://cdn.jsdelivr.net/npm/xterm@4.18.0/+esm'
+import xterm_addon_webgl from 'https://cdn.jsdelivr.net/npm/xterm-addon-webgl@0.11.4/+esm'
+import xterm_addon_fit   from 'https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/+esm'
+
+// Add COOP/COEP via a ServiceWorker to use SharedArrayBuffer
+if ("serviceWorker" in navigator && !window.crossOriginIsolated) {
+  const url_sw = new URL("./sw.js", location.href);
+  const registration = await navigator.serviceWorker.register(url_sw);
+  window.location.reload(); // Reload to ensure the COOP/COEP headers are set.
+} 
+
+const example_list = "@EXAMPLES@".split(";");
+const url_search_params = new URLSearchParams(window.location.search);
+
+const select = document.getElementById("selectExample"); 
+for(const example of example_list) {
+  const option = document.createElement("option");
+  option.textContent = example;
+  option.value = example;
+  select.appendChild(option);
+}
+const example = url_search_params.get("file") || "dom/color_gallery";
+select.selectedIndex = example_list.findIndex(path => path == example) || 0;
+select.addEventListener("change", () => {
+  history.pushState({}, "", "?file=" + example_list[select.selectedIndex]);
+  location.reload();
+});
+
+const term_element = document.querySelector('#terminal');
+const term = new xterm.Terminal();
+term.options.scrollback = 0;
+term.open(term_element);
+const fit_addon = new xterm_addon_fit.FitAddon();
+const webgl_addon = new xterm_addon_webgl.WebglAddon();
+term.loadAddon(webgl_addon);
+term.loadAddon(fit_addon);
+
+const stdin_buffer = [];
+const stdout_buffer = [];
+const stderr_buffer = [];
+
+const stdin = () => {
+  return stdin_buffer.shift() || 0;
+}
+
+const stdout = code => {
+  if (code == 0) {
+    term.write(new Uint8Array(stdout_buffer));
+    stdout_buffer.length = 0;
+  } else {
+    stdout_buffer.push(code)
+  }
+}
+
+const stderr = code => {
+  if (code == 0 || code == 10) {
+    console.error(String.fromCodePoint(...stderr_buffer));
+    stderr_buffer = [];
+  } else {
+    stderr_buffer.push(code)
+  }
+}
+
+const onBinary = e => {
+  for(const c of e)
+    stdin_buffer.push(c.charCodeAt(0));
+}
+
+term.onBinary(onBinary);
+term.onData(onBinary)
+term.resize(140,43);
+
+window.Module = {
+  preRun: () => {
+    FS.init(stdin, stdout, stderr);
+  },
+  postRun: [],
+  onRuntimeInitialized: () => {
+    if (window.Module._ftxui_on_resize == undefined)
+      return;
+    fit_addon.fit();
+
+    const resize_handler = () => {
+      const {cols, rows} = fit_addon.proposeDimensions();
+      term.resize(cols, rows);
+      window.Module._ftxui_on_resize(cols, rows);
+      fit_addon.fit();
+    };
+    const resize_observer = new ResizeObserver(resize_handler);
+    resize_observer.observe(term_element);
+    resize_handler();
+
+    // Disable scrollbar
+    //term.write('\x1b[?47h')
+  },
+};
+
+const words = example.split('/')
+words[1] = "ftxui_example_" + words[1] + ".js"
+document.querySelector("#example_script").src = words.join('/');

flake.lock

@@ -1,12 +1,15 @@
 {
   "nodes": {
     "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
       "locked": {
-        "lastModified": 1678901627,
-        "narHash": "sha256-U02riOqrKKzwjsxc/400XnElV+UtPUQWpANPlyazjH0=",
+        "lastModified": 1694529238,
+        "narHash": "sha256-zsNZZGTGnMOf9YpHKJqMSsa0dXbfmxeoJ7xHlrt+xmY=",
         "owner": "numtide",
         "repo": "flake-utils",
-        "rev": "93a2b84fc4b70d9e089d029deacc3583435c2ed6",
+        "rev": "ff7b65b44d01cf9ba6a71320833626af21126384",
         "type": "github"
       },
       "original": {
@@ -17,11 +20,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1679734080,
-        "narHash": "sha256-z846xfGLlon6t9lqUzlNtBOmsgQLQIZvR6Lt2dImk1M=",
+        "lastModified": 1697915759,
+        "narHash": "sha256-WyMj5jGcecD+KC8gEs+wFth1J1wjisZf8kVZH13f1Zo=",
         "owner": "NixOS",
         "repo": "nixpkgs",
-        "rev": "dbf5322e93bcc6cfc52268367a8ad21c09d76fea",
+        "rev": "51d906d2341c9e866e48c2efcaac0f2d70bfd43e",
         "type": "github"
       },
       "original": {
@@ -36,6 +39,21 @@
         "flake-utils": "flake-utils",
         "nixpkgs": "nixpkgs"
       }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
     }
   },
   "root": "root",

flake.nix

@@ -9,8 +9,10 @@
   outputs = {self, nixpkgs, flake-utils}:
     flake-utils.lib.eachDefaultSystem (system:
     let pkgs = import nixpkgs { inherit system; }; in
+    let llvm = pkgs.llvmPackages_latest; in
     {
-        packages.ftxui = pkgs.stdenv.mkDerivation rec {
+      packages = rec {
+        default = pkgs.stdenv.mkDerivation rec {
           pname = "ftxui";
           version = "v4.0.0";
           src = pkgs.fetchFromGitHub {
@@ -56,6 +58,19 @@
             platforms = pkgs.lib.platforms.all;
           };
         };
+
+        ftxui = default;
+      };
+
+      devShells = {
+        default = pkgs.mkShell {
+          nativeBuildInputs = [
+            pkgs.cmake
+            pkgs.clang-tools
+            llvm.clang
+          ];
+        };
+      };
     }
   );
 }

include/ftxui/component/animation.hpp

@@ -7,11 +7,7 @@
 #include <chrono>      // for milliseconds, duration, steady_clock, time_point
 #include <functional>  // for function
 
-#include "ftxui/component/event.hpp"
-
-namespace ftxui {
-
-namespace animation {
+namespace ftxui::animation {
 // Components who haven't completed their animation can call this function to
 // request a new frame to be drawn later.
 //
@@ -26,7 +22,7 @@ using Duration = std::chrono::duration<float>;
 // Parameter of Component::OnAnimation(param).
 class Params {
  public:
-  Params(Duration duration) : duration_(duration) {}
+  explicit Params(Duration duration) : duration_(duration) {}
 
   /// The duration this animation step represents.
   Duration duration() const { return duration_; }
@@ -93,7 +89,7 @@ float BounceInOut(float p);
 
 class Animator {
  public:
-  Animator(float* from,
+  explicit Animator(float* from,
                     float to = 0.f,
                     Duration duration = std::chrono::milliseconds(250),
                     easing::Function easing_function = easing::Linear,
@@ -112,7 +108,6 @@ class Animator {
   Duration current_;
 };
 
-}  // namespace animation
-}  // namespace ftxui
+}  // namespace ftxui::animation
 
 #endif /* end of include guard: FTXUI_ANIMATION_HPP */

include/ftxui/component/captured_mouse.hpp

@@ -9,6 +9,11 @@
 namespace ftxui {
 class CapturedMouseInterface {
  public:
+  CapturedMouseInterface() = default;
+  CapturedMouseInterface(const CapturedMouseInterface&) = default;
+  CapturedMouseInterface(CapturedMouseInterface&&) = delete;
+  CapturedMouseInterface& operator=(const CapturedMouseInterface&) = default;
+  CapturedMouseInterface& operator=(CapturedMouseInterface&&) = delete;
   virtual ~CapturedMouseInterface() = default;
 };
 using CapturedMouse = std::unique_ptr<CapturedMouseInterface>;

include/ftxui/component/component.hpp

@@ -6,9 +6,7 @@
 
 #include <functional>  // for function
 #include <memory>      // for make_shared, shared_ptr
-#include <string>      // for wstring
 #include <utility>     // for forward
-#include <vector>      // for vector
 
 #include "ftxui/component/component_base.hpp"  // for Component, Components
 #include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, MenuOption
@@ -75,6 +73,8 @@ Component Radiobox(ConstStringListRef entries,
                    RadioboxOption options = {});
 
 Component Dropdown(ConstStringListRef entries, int* selected);
+Component Dropdown(DropdownOption options);
+
 Component Toggle(ConstStringListRef entries, int* selected);
 
 // General slider constructor:
@@ -94,9 +94,9 @@ Component Slider(ConstStringRef label,
                  ConstRef<float> increment = 5.f);
 Component Slider(ConstStringRef label,
                  Ref<long> value,
-                 ConstRef<long> min = 0l,
-                 ConstRef<long> max = 100l,
-                 ConstRef<long> increment = 5l);
+                 ConstRef<long> min = 0L,
+                 ConstRef<long> max = 100L,
+                 ConstRef<long> increment = 5L);
 
 Component ResizableSplit(ResizableSplitOption options);
 Component ResizableSplitLeft(Component main, Component back, int* main_size);

include/ftxui/component/component_base.hpp

@@ -29,25 +29,31 @@ using Components = std::vector<Component>;
 /// @ingroup component
 class ComponentBase {
  public:
-  // virtual Destructor.
+  explicit ComponentBase(Components children)
+      : children_(std::move(children)) {}
   virtual ~ComponentBase();
-
   ComponentBase() = default;
 
-  // A component is not copiable.
+  // A component is not copyable/movable.
   ComponentBase(const ComponentBase&) = delete;
-  void operator=(const ComponentBase&) = delete;
+  ComponentBase(ComponentBase&&) = delete;
+  ComponentBase& operator=(const ComponentBase&) = delete;
+  ComponentBase& operator=(ComponentBase&&) = delete;
 
   // Component hierarchy:
   ComponentBase* Parent() const;
   Component& ChildAt(size_t i);
   size_t ChildCount() const;
+  int Index() const;
   void Add(Component children);
   void Detach();
   void DetachAllChildren();
 
   // Renders the component.
-  virtual Element Render();
+  Element Render();
+
+  // Override this function modify how `Render` works.
+  virtual Element OnRender();
 
   // Handles an event.
   // By default, reduce on children with a lazy OR.
@@ -91,6 +97,7 @@ class ComponentBase {
 
  private:
   ComponentBase* parent_ = nullptr;
+  bool in_render = false;
 };
 
 }  // namespace ftxui

include/ftxui/component/component_options.hpp

@@ -10,7 +10,6 @@
 #include <ftxui/dom/elements.hpp>  // for Element, separator
 #include <ftxui/util/ref.hpp>      // for Ref, ConstRef, StringRef
 #include <functional>              // for function
-#include <optional>                // for optional
 #include <string>                  // for string
 
 #include "ftxui/component/component_base.hpp"  // for Component
@@ -22,10 +21,11 @@ namespace ftxui {
 /// |Radiobox::transform|, |MenuEntryOption::transform|,
 /// |MenuOption::transform|.
 struct EntryState {
-  std::string label;  /// < The label to display.
-  bool state;         /// < The state of the button/checkbox/radiobox
-  bool active;        /// < Whether the entry is the active one.
-  bool focused;       /// < Whether the entry is one focused by the user.
+  std::string label;  ///< The label to display.
+  bool state;         ///< The state of the button/checkbox/radiobox
+  bool active;        ///< Whether the entry is the active one.
+  bool focused;       ///< Whether the entry is one focused by the user.
+  int index;          ///< Index of the entry when applicable or -1.
 };
 
 struct UnderlineOption {
@@ -151,10 +151,10 @@ struct CheckboxOption {
 /// @brief Used to define style for the Input component.
 struct InputState {
   Element element;
-  bool hovered;         /// < Whether the input is hovered by the mouse.
-  bool focused;         /// < Whether the input is focused by the user.
-  bool is_placeholder;  /// < Whether the input is empty and displaying the
-                        /// < placeholder.
+  bool hovered;         ///< Whether the input is hovered by the mouse.
+  bool focused;         ///< Whether the input is focused by the user.
+  bool is_placeholder;  ///< Whether the input is empty and displaying the
+                        ///< placeholder.
 };
 
 /// @brief Option for the Input component.
@@ -175,8 +175,9 @@ struct InputOption {
 
   // Style:
   std::function<Element(InputState)> transform;
-  Ref<bool> password = false;  /// < Obscure the input content using '*'.
-  Ref<bool> multiline = true;  /// < Whether the input can be multiline.
+  Ref<bool> password = false;  ///< Obscure the input content using '*'.
+  Ref<bool> multiline = true;  ///< Whether the input can be multiline.
+  Ref<bool> insert = true;     ///< Insert or overtype character mode.
 
   /// Called when the content changes.
   std::function<void()> on_change = [] {};
@@ -227,41 +228,57 @@ struct SliderOption {
   Direction direction = Direction::Right;
   Color color_active = Color::White;
   Color color_inactive = Color::GrayDark;
+  std::function<void()> on_change;  ///> Called when `value` is updated.
 };
 
 // Parameter pack used by `WindowOptions::render`.
 struct WindowRenderState {
-  Element inner;             /// < The element wrapped inside this window.
-  const std::string& title;  /// < The title of the window.
-  bool active = false;       /// < Whether the window is the active one.
-  bool drag = false;         /// < Whether the window is being dragged.
-  bool resize = false;       /// < Whether the window is being resized.
-  bool hover_left = false;   /// < Whether the resizeable left side is hovered.
-  bool hover_right = false;  /// < Whether the resizeable right side is hovered.
-  bool hover_top = false;    /// < Whether the resizeable top side is hovered.
-  bool hover_down = false;   /// < Whether the resizeable down side is hovered.
+  Element inner;             ///< The element wrapped inside this window.
+  const std::string& title;  ///< The title of the window.
+  bool active = false;       ///< Whether the window is the active one.
+  bool drag = false;         ///< Whether the window is being dragged.
+  bool resize = false;       ///< Whether the window is being resized.
+  bool hover_left = false;   ///< Whether the resizeable left side is hovered.
+  bool hover_right = false;  ///< Whether the resizeable right side is hovered.
+  bool hover_top = false;    ///< Whether the resizeable top side is hovered.
+  bool hover_down = false;   ///< Whether the resizeable down side is hovered.
 };
 
 // @brief Option for the `Window` component.
 // @ingroup component
 struct WindowOptions {
-  Component inner;            /// < The component wrapped by this window.
-  ConstStringRef title = "";  /// < The title displayed by this window.
+  Component inner;            ///< The component wrapped by this window.
+  ConstStringRef title = "";  ///< The title displayed by this window.
 
-  Ref<int> left = 0;     /// < The left side position of the window.
-  Ref<int> top = 0;      /// < The top side position of the window.
-  Ref<int> width = 20;   /// < The width of the window.
-  Ref<int> height = 10;  /// < The height of the window.
+  Ref<int> left = 0;     ///< The left side position of the window.
+  Ref<int> top = 0;      ///< The top side position of the window.
+  Ref<int> width = 20;   ///< The width of the window.
+  Ref<int> height = 10;  ///< The height of the window.
 
-  Ref<bool> resize_left = true;   /// < Can the left side be resized?
-  Ref<bool> resize_right = true;  /// < Can the right side be resized?
-  Ref<bool> resize_top = true;    /// < Can the top side be resized?
-  Ref<bool> resize_down = true;   /// < Can the down side be resized?
+  Ref<bool> resize_left = true;   ///< Can the left side be resized?
+  Ref<bool> resize_right = true;  ///< Can the right side be resized?
+  Ref<bool> resize_top = true;    ///< Can the top side be resized?
+  Ref<bool> resize_down = true;   ///< Can the down side be resized?
 
   /// An optional function to customize how the window looks like:
   std::function<Element(const WindowRenderState&)> render;
 };
 
+/// @brief Option for the Dropdown component.
+/// @ingroup component
+/// A dropdown menu is a checkbox opening/closing a radiobox.
+struct DropdownOption {
+  /// Whether the dropdown is open or closed:
+  Ref<bool> open = false;
+  // The options for the checkbox:
+  CheckboxOption checkbox;
+  // The options for the radiobox:
+  RadioboxOption radiobox;
+  // The transformation function:
+  std::function<Element(bool open, Element checkbox, Element radiobox)>
+      transform;
+};
+
 }  // namespace ftxui
 
 #endif /* end of include guard: FTXUI_COMPONENT_COMPONENT_OPTIONS_HPP */

include/ftxui/component/event.hpp

@@ -5,9 +5,7 @@
 #define FTXUI_COMPONENT_EVENT_HPP
 
 #include <ftxui/component/mouse.hpp>  // for Mouse
-#include <functional>
 #include <string>                     // for string, operator==
-#include <vector>
 
 namespace ftxui {
 
@@ -33,7 +31,8 @@ struct Event {
   static Event Character(wchar_t);
   static Event Special(std::string);
   static Event Mouse(std::string, Mouse mouse);
-  static Event CursorReporting(std::string, int x, int y);
+  static Event CursorPosition(std::string, int x, int y);  // Internal
+  static Event CursorShape(std::string, int shape);        // Internal
 
   // --- Arrow ---
   static const Event ArrowLeft;
@@ -53,32 +52,71 @@ struct Event {
   static const Event Escape;
   static const Event Tab;
   static const Event TabReverse;
-  static const Event F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12;
 
+  // --- Navigation keys ---
+  static const Event Insert;
   static const Event Home;
   static const Event End;
-
   static const Event PageUp;
   static const Event PageDown;
 
+  // --- Function keys ---
+  static const Event F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12;
+
+  // --- Control keys ---
+  static const Event a, A, CtrlA, AltA, CtrlAltA;
+  static const Event b, B, CtrlB, AltB, CtrlAltB;
+  static const Event c, C, CtrlC, AltC, CtrlAltC;
+  static const Event d, D, CtrlD, AltD, CtrlAltD;
+  static const Event e, E, CtrlE, AltE, CtrlAltE;
+  static const Event f, F, CtrlF, AltF, CtrlAltF;
+  static const Event g, G, CtrlG, AltG, CtrlAltG;
+  static const Event h, H, CtrlH, AltH, CtrlAltH;
+  static const Event i, I, CtrlI, AltI, CtrlAltI;
+  static const Event j, J, CtrlJ, AltJ, CtrlAltJ;
+  static const Event k, K, CtrlK, AltK, CtrlAltK;
+  static const Event l, L, CtrlL, AltL, CtrlAltL;
+  static const Event m, M, CtrlM, AltM, CtrlAltM;
+  static const Event n, N, CtrlN, AltN, CtrlAltN;
+  static const Event o, O, CtrlO, AltO, CtrlAltO;
+  static const Event p, P, CtrlP, AltP, CtrlAltP;
+  static const Event q, Q, CtrlQ, AltQ, CtrlAltQ;
+  static const Event r, R, CtrlR, AltR, CtrlAltR;
+  static const Event s, S, CtrlS, AltS, CtrlAltS;
+  static const Event t, T, CtrlT, AltT, CtrlAltT;
+  static const Event u, U, CtrlU, AltU, CtrlAltU;
+  static const Event v, V, CtrlV, AltV, CtrlAltV;
+  static const Event w, W, CtrlW, AltW, CtrlAltW;
+  static const Event x, X, CtrlX, AltX, CtrlAltX;
+  static const Event y, Y, CtrlY, AltY, CtrlAltY;
+  static const Event z, Z, CtrlZ, AltZ, CtrlAltZ;
+
   // --- Custom ---
   static const Event Custom;
 
   //--- Method section ---------------------------------------------------------
+  bool operator==(const Event& other) const { return input_ == other.input_; }
+  bool operator!=(const Event& other) const { return !operator==(other); }
+  bool operator<(const Event& other) const { return input_ < other.input_; }
+
+  const std::string& input() const { return input_; }
+
   bool is_character() const { return type_ == Type::Character; }
   std::string character() const { return input_; }
 
   bool is_mouse() const { return type_ == Type::Mouse; }
   struct Mouse& mouse() { return data_.mouse; }
 
-  bool is_cursor_reporting() const { return type_ == Type::CursorReporting; }
+  // --- Internal Method section -----------------------------------------------
+  bool is_cursor_position() const { return type_ == Type::CursorPosition; }
   int cursor_x() const { return data_.cursor.x; }
   int cursor_y() const { return data_.cursor.y; }
 
-  const std::string& input() const { return input_; }
+  bool is_cursor_shape() const { return type_ == Type::CursorShape; }
+  int cursor_shape() const { return data_.cursor_shape; }
 
-  bool operator==(const Event& other) const { return input_ == other.input_; }
-  bool operator!=(const Event& other) const { return !operator==(other); }
+  // Debug
+  std::string DebugString() const;
 
   //--- State section ----------------------------------------------------------
   ScreenInteractive* screen_ = nullptr;
@@ -90,7 +128,8 @@ struct Event {
     Unknown,
     Character,
     Mouse,
-    CursorReporting,
+    CursorPosition,
+    CursorShape,
   };
   Type type_ = Type::Unknown;
 
@@ -102,6 +141,7 @@ struct Event {
   union {
     struct Mouse mouse;
     struct Cursor cursor;
+    int cursor_shape;
   } data_ = {};
 
   std::string input_;

include/ftxui/component/loop.hpp

@@ -24,11 +24,14 @@ class Loop {
   void RunOnceBlocking();
   void Run();
 
- private:
-  // This class is non copyable.
+  // This class is non copyable/movable.
+  Loop(const Loop&) = default;
+  Loop(Loop&&) = delete;
+  Loop& operator=(Loop&&) = delete;
   Loop(const ScreenInteractive&) = delete;
   Loop& operator=(const Loop&) = delete;
 
+ private:
   ScreenInteractive* screen_;
   Component component_;
 };

include/ftxui/component/mouse.hpp

@@ -16,11 +16,14 @@ struct Mouse {
     None = 3,
     WheelUp = 4,
     WheelDown = 5,
+    WheelLeft = 6,   /// Supported terminal only.
+    WheelRight = 7,  /// Supported terminal only.
   };
 
   enum Motion {
     Released = 0,
     Pressed = 1,
+    Moved = 2,
   };
 
   // Button

include/ftxui/component/receiver.hpp

@@ -7,8 +7,6 @@
 #include <algorithm>           // for copy, max
 #include <atomic>              // for atomic, __atomic_base
 #include <condition_variable>  // for condition_variable
-#include <functional>
-#include <iostream>
 #include <memory>              // for unique_ptr, make_unique
 #include <mutex>               // for mutex, unique_lock
 #include <queue>               // for queue
@@ -54,6 +52,10 @@ template<class T> Receiver<T> MakeReceiver();
 template <class T>
 class SenderImpl {
  public:
+  SenderImpl(const SenderImpl&) = delete;
+  SenderImpl(SenderImpl&&) = delete;
+  SenderImpl& operator=(const SenderImpl&) = delete;
+  SenderImpl& operator=(SenderImpl&&) = delete;
   void Send(T t) { receiver_->Receive(std::move(t)); }
   ~SenderImpl() { receiver_->ReleaseSender(); }
 
@@ -61,7 +63,7 @@ class SenderImpl {
 
  private:
   friend class ReceiverImpl<T>;
-  SenderImpl(ReceiverImpl<T>* consumer) : receiver_(consumer) {}
+  explicit SenderImpl(ReceiverImpl<T>* consumer) : receiver_(consumer) {}
   ReceiverImpl<T>* receiver_;
 };
 
@@ -73,15 +75,17 @@ class ReceiverImpl {
     senders_++;
     return std::unique_ptr<SenderImpl<T>>(new SenderImpl<T>(this));
   }
-  ReceiverImpl() { senders_ = 0; }
+  ReceiverImpl() = default;
 
   bool Receive(T* t) {
     while (senders_ || !queue_.empty()) {
       std::unique_lock<std::mutex> lock(mutex_);
-      if (queue_.empty())
+      if (queue_.empty()) {
         notifier_.wait(lock);
-      if (queue_.empty())
+      }
+      if (queue_.empty()) {
         continue;
+      }
       *t = std::move(queue_.front());
       queue_.pop();
       return true;
@@ -91,8 +95,9 @@ class ReceiverImpl {
 
   bool ReceiveNonBlocking(T* t) {
     std::unique_lock<std::mutex> lock(mutex_);
-    if (queue_.empty())
+    if (queue_.empty()) {
       return false;
+    }
     *t = queue_.front();
     queue_.pop();
     return true;
@@ -127,7 +132,7 @@ class ReceiverImpl {
   std::mutex mutex_;
   std::queue<T> queue_;
   std::condition_variable notifier_;
-  std::atomic<int> senders_;
+  std::atomic<int> senders_{0};
 };
 
 template <class T>

include/ftxui/component/screen_interactive.hpp

@@ -16,6 +16,7 @@
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/event.hpp"           // for Event
 #include "ftxui/component/task.hpp"            // for Task, Closure
+#include "ftxui/dom/selection.hpp"             // for SelectionOption
 #include "ftxui/screen/screen.hpp"             // for Screen
 
 namespace ftxui {
@@ -31,6 +32,8 @@ class ScreenInteractive : public Screen {
   // Constructors:
   static ScreenInteractive FixedSize(int dimx, int dimy);
   static ScreenInteractive Fullscreen();
+  static ScreenInteractive FullscreenPrimaryScreen();
+  static ScreenInteractive FullscreenAlternateScreen();
   static ScreenInteractive FitComponent();
   static ScreenInteractive TerminalOutput();
 
@@ -57,6 +60,19 @@ class ScreenInteractive : public Screen {
   // temporarily uninstalled.
   Closure WithRestoredIO(Closure);
 
+  // FTXUI implements handlers for Ctrl-C and Ctrl-Z. By default, these handlers
+  // are executed, even if the component catches the event. This avoid users
+  // handling every event to be trapped in the application. However, in some
+  // cases, the application may want to handle these events itself. In this
+  // case, the application can force FTXUI to not handle these events by calling
+  // the following functions with force=true.
+  void ForceHandleCtrlC(bool force);
+  void ForceHandleCtrlZ(bool force);
+
+  // Selection API.
+  std::string GetSelection();
+  void SelectionChange(std::function<void()> callback);
+
  private:
   void ExitNow();
 
@@ -71,6 +87,8 @@ class ScreenInteractive : public Screen {
   void RunOnceBlocking(Component component);
 
   void HandleTask(Component component, Task& task);
+  bool HandleSelection(bool handled, Event event);
+  void RefreshSelection();
   void Draw(Component component);
   void ResetCursorPosition();
 
@@ -98,7 +116,7 @@ class ScreenInteractive : public Screen {
   std::string set_cursor_position;
   std::string reset_cursor_position;
 
-  std::atomic<bool> quit_ = false;
+  std::atomic<bool> quit_{false};
   std::thread event_listener_;
   std::thread animation_listener_;
   bool animation_requested_ = false;
@@ -112,6 +130,28 @@ class ScreenInteractive : public Screen {
 
   bool frame_valid_ = false;
 
+  bool force_handle_ctrl_c_ = true;
+  bool force_handle_ctrl_z_ = true;
+
+  // The style of the cursor to restore on exit.
+  int cursor_reset_shape_ = 1;
+
+  // Selection API:
+  CapturedMouse selection_pending_;
+  struct SelectionData {
+    int start_x = -1;
+    int start_y = -1;
+    int end_x = -2;
+    int end_y = -2;
+    bool empty = true;
+    bool operator==(const SelectionData& other) const;
+    bool operator!=(const SelectionData& other) const;
+  };
+  SelectionData selection_data_;
+  SelectionData selection_data_previous_;
+  std::unique_ptr<Selection> selection_;
+  std::function<void()> selection_on_change_;
+
   friend class Loop;
 
  public:

include/ftxui/dom/canvas.hpp

@@ -10,7 +10,7 @@
 #include <unordered_map>  // for unordered_map
 
 #include "ftxui/screen/color.hpp"  // for Color
-#include "ftxui/screen/screen.hpp"  // for Pixel
+#include "ftxui/screen/image.hpp"  // for Pixel, Image
 
 #ifdef DrawText
 // Workaround for WinUsr.h (via Windows.h) defining macros that break things.
@@ -95,6 +95,12 @@ struct Canvas {
   void DrawText(int x, int y, const std::string& value, const Color& color);
   void DrawText(int x, int y, const std::string& value, const Stylizer& style);
 
+  // Draw using directly pixels or images --------------------------------------
+  // x is considered to be a multiple of 2.
+  // y is considered to be a multiple of 4.
+  void DrawPixel(int x, int y, const Pixel&);
+  void DrawImage(int x, int y, const Image&);
+
   // Decorator:
   // x is considered to be a multiple of 2.
   // y is considered to be a multiple of 4.
@@ -104,15 +110,18 @@ struct Canvas {
   bool IsIn(int x, int y) const {
     return x >= 0 && x < width_ && y >= 0 && y < height_;
   }
+
   enum CellType {
-    kBraille,
-    kBlock,
-    kText,
+    kCell,     // Units of size 2x4
+    kBlock,    // Units of size 2x2
+    kBraille,  // Units of size 1x1
   };
+
   struct Cell {
-    CellType type = kText;
+    CellType type = kCell;
     Pixel content;
   };
+
   struct XY {
     int x;
     int y;

include/ftxui/dom/deprecated.hpp

@@ -4,7 +4,8 @@
 #ifndef FTXUI_DOM_DEPRECATED_HPP
 #define FTXUI_DOM_DEPRECATED_HPP
 
-#include "ftxui/dom/elements.hpp"
+#include <ftxui/dom/node.hpp>
+#include <string>
 
 namespace ftxui {
 Element text(std::wstring text);

include/ftxui/dom/elements.hpp

@@ -14,7 +14,6 @@
 #include "ftxui/dom/node.hpp"
 #include "ftxui/screen/box.hpp"
 #include "ftxui/screen/color.hpp"
-#include "ftxui/screen/screen.hpp"
 #include "ftxui/screen/terminal.hpp"
 #include "ftxui/util/ref.hpp"
 
@@ -80,7 +79,7 @@ Decorator borderStyled(BorderStyle);
 Decorator borderStyled(BorderStyle, Color);
 Decorator borderStyled(Color);
 Decorator borderWith(const Pixel&);
-Element window(Element title, Element content);
+Element window(Element title, Element content, BorderStyle border = ROUNDED);
 Element spinner(int charset_index, size_t image_index);
 Element paragraph(const std::string& text);
 Element paragraphAlignLeft(const std::string& text);
@@ -96,6 +95,7 @@ Element canvas(std::function<void(Canvas&)>);
 // -- Decorator ---
 Element bold(Element);
 Element dim(Element);
+Element italic(Element);
 Element inverted(Element);
 Element underlined(Element);
 Element underlinedDouble(Element);
@@ -114,6 +114,11 @@ Decorator focusPositionRelative(float x, float y);
 Element automerge(Element child);
 Decorator hyperlink(std::string link);
 Element hyperlink(std::string link, Element child);
+Element selectionStyleReset(Element);
+Decorator selectionColor(Color foreground);
+Decorator selectionBackgroundColor(Color foreground);
+Decorator selectionForegroundColor(Color foreground);
+Decorator selectionStyle(std::function<void(Pixel&)> style);
 
 // --- Layout is
 // Horizontal, Vertical or stacked set of elements.
@@ -157,7 +162,7 @@ Element frame(Element);
 Element xframe(Element);
 Element yframe(Element);
 Element focus(Element);
-Element select(Element);
+Element select(Element e);  // Deprecated - Alias for focus.
 
 // --- Cursor ---
 // Those are similar to `focus`, but also change the shape of the cursor.
@@ -170,6 +175,7 @@ Element focusCursorUnderlineBlinking(Element);
 
 // --- Misc ---
 Element vscroll_indicator(Element);
+Element hscroll_indicator(Element);
 Decorator reflect(Box& box);
 // Before drawing the |element| clear the pixel below. This is useful in
 // combinaison with dbox.
@@ -183,7 +189,7 @@ Element align_right(Element);
 Element nothing(Element element);
 
 namespace Dimension {
-Dimensions Fit(Element&);
+Dimensions Fit(Element&, bool extend_beyond_screen = false);
 }  // namespace Dimension
 
 }  // namespace ftxui

include/ftxui/dom/node.hpp

@@ -8,6 +8,7 @@
 #include <vector>  // for vector
 
 #include "ftxui/dom/requirement.hpp"  // for Requirement
+#include "ftxui/dom/selection.hpp"    // for Selection
 #include "ftxui/screen/box.hpp"       // for Box
 #include "ftxui/screen/screen.hpp"
 
@@ -22,7 +23,7 @@ using Elements = std::vector<Element>;
 class Node {
  public:
   Node();
-  Node(Elements children);
+  explicit Node(Elements children);
   Node(const Node&) = delete;
   Node(const Node&&) = delete;
   Node& operator=(const Node&) = delete;
@@ -40,9 +41,15 @@ class Node {
   //         Propagated from Parents to Children.
   virtual void SetBox(Box box);
 
-  // Step 3: Draw this element.
+  // Step 3: (optional) Selection
+  //         Propagated from Parents to Children.
+  virtual void Select(Selection& selection);
+
+  // Step 4: Draw this element.
   virtual void Render(Screen& screen);
 
+  virtual std::string GetSelectedContent(Selection& selection);
+
   // Layout may not resolve within a single iteration for some elements. This
   // allows them to request additionnal iterations. This signal must be
   // forwarded to children at least once.
@@ -52,6 +59,8 @@ class Node {
   };
   virtual void Check(Status* status);
 
+  friend void Render(Screen& screen, Node* node, Selection& selection);
+
  protected:
   Elements children_;
   Requirement requirement_;
@@ -60,6 +69,10 @@ class Node {
 
 void Render(Screen& screen, const Element& element);
 void Render(Screen& screen, Node* node);
+void Render(Screen& screen, Node* node, Selection& selection);
+std::string GetNodeSelectedContent(Screen& screen,
+                                   Node* node,
+                                   Selection& selection);
 
 }  // namespace ftxui
 

include/ftxui/dom/requirement.hpp

@@ -5,8 +5,10 @@
 #define FTXUI_DOM_REQUIREMENT_HPP
 
 #include "ftxui/screen/box.hpp"
+#include "ftxui/screen/screen.hpp"
 
 namespace ftxui {
+class Node;
 
 struct Requirement {
   // The required size to fully draw the element.
@@ -20,13 +22,28 @@ struct Requirement {
   int flex_shrink_y = 0;
 
   // Focus management to support the frame/focus/select element.
-  enum Selection {
-    NORMAL = 0,
-    SELECTED = 1,
-    FOCUSED = 2,
+  struct Focused {
+    bool enabled = false;
+    Box box;
+    Node* node = nullptr;
+    Screen::Cursor::Shape cursor_shape = Screen::Cursor::Shape::Hidden;
+
+    // Internal for interactions with components.
+    bool component_active = false;
+
+    // Return whether this requirement should be preferred over the other.
+    bool Prefer(const Focused& other) const {
+      if (!other.enabled) {
+        return false;
+      }
+      if (!enabled) {
+        return true;
+      }
+
+      return other.component_active && !component_active;
+    }
   };
-  Selection selection = NORMAL;
-  Box selected_box;
+  Focused focused;
 };
 
 }  // namespace ftxui

include/ftxui/dom/selection.hpp

@@ -0,0 +1,50 @@
+// Copyright 2024 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+
+#ifndef FTXUI_DOM_SELECTION_HPP
+#define FTXUI_DOM_SELECTION_HPP
+
+#include <functional>
+
+#include <sstream>
+#include "ftxui/screen/box.hpp"    // for Box
+#include "ftxui/screen/pixel.hpp"  // for Pixel
+
+namespace ftxui {
+
+/// @brief Represent a selection in the terminal.
+class Selection {
+ public:
+  Selection();  // Empty selection.
+  Selection(int start_x, int start_y, int end_x, int end_y);
+
+  const Box& GetBox() const;
+
+  Selection SaturateHorizontal(Box box);
+  Selection SaturateVertical(Box box);
+  bool IsEmpty() const { return empty_; }
+
+  void AddPart(const std::string& part, int y, int left, int right);
+  std::string GetParts() { return parts_.str(); }
+
+ private:
+  Selection(int start_x, int start_y, int end_x, int end_y, Selection* parent);
+
+  const int start_x_ = 0;
+  const int start_y_ = 0;
+  const int end_x_ = 0;
+  const int end_y_ = 0;
+  const Box box_ = {};
+  Selection* const parent_ = this;
+  const bool empty_ = true;
+  std::stringstream parts_;
+
+  // The position of the last inserted part.
+  int x_ = 0;
+  int y_ = 0;
+};
+
+}  // namespace ftxui
+
+#endif /* end of include guard: FTXUI_DOM_SELECTION_HPP */

include/ftxui/dom/table.hpp

@@ -4,7 +4,6 @@
 #ifndef FTXUI_DOM_TABLE
 #define FTXUI_DOM_TABLE
 
-#include <memory>
 #include <string>  // for string
 #include <vector>  // for vector
 
@@ -37,8 +36,9 @@ class TableSelection;
 class Table {
  public:
   Table();
-  Table(std::vector<std::vector<std::string>>);
-  Table(std::vector<std::vector<Element>>);
+  explicit Table(std::vector<std::vector<std::string>>);
+  explicit Table(std::vector<std::vector<Element>>);
+  Table(std::initializer_list<std::vector<std::string>> init);
   TableSelection SelectAll();
   TableSelection SelectCell(int column, int row);
   TableSelection SelectRow(int row_index);

include/ftxui/dom/take_any_args.hpp

@@ -5,7 +5,7 @@
 #define FTXUI_DOM_TAKE_ANY_ARGS_HPP
 
 // IWYU pragma: private, include "ftxui/dom/elements.hpp"
-#include <type_traits>
+#include <ftxui/dom/node.hpp>
 
 namespace ftxui {
 
@@ -19,8 +19,9 @@ inline void Merge(Elements& container, Element element) {
 
 template <>
 inline void Merge(Elements& container, Elements elements) {
-  for (auto& element : elements)
+  for (auto& element : elements) {
     container.push_back(std::move(element));
+  }
 }
 
 // Turn a set of arguments into a vector.

include/ftxui/screen/box.hpp

@@ -14,7 +14,9 @@ struct Box {
 
   static auto Intersection(Box a, Box b) -> Box;
   static auto Union(Box a, Box b) -> Box;
+  void Shift(int x, int y);
   bool Contain(int x, int y) const;
+  bool IsEmpty() const;
   bool operator==(const Box& other) const;
   bool operator!=(const Box& other) const;
 };

include/ftxui/screen/color.hpp

@@ -6,7 +6,6 @@
 
 #include <cstdint>  // for uint8_t
 #include <string>   // for string
-#include <vector>   // for vector
 
 #ifdef RGB
 // Workaround for wingdi.h (via Windows.h) defining macros that break things.
@@ -24,14 +23,22 @@ class Color {
   enum Palette16 : uint8_t;
   enum Palette256 : uint8_t;
 
+  // NOLINTBEGIN
   Color();                  // Transparent.
   Color(Palette1 index);    // Transparent.
   Color(Palette16 index);   // Implicit conversion from index to Color.
   Color(Palette256 index);  // Implicit conversion from index to Color.
-  Color(uint8_t red, uint8_t green, uint8_t blue);
+  // NOLINTEND
+  Color(uint8_t red, uint8_t green, uint8_t blue, uint8_t alpha = 255);
   static Color RGB(uint8_t red, uint8_t green, uint8_t blue);
   static Color HSV(uint8_t hue, uint8_t saturation, uint8_t value);
+  static Color RGBA(uint8_t red, uint8_t green, uint8_t blue, uint8_t alpha);
+  static Color HSVA(uint8_t hue,
+                    uint8_t saturation,
+                    uint8_t value,
+                    uint8_t alpha);
   static Color Interpolate(float t, const Color& a, const Color& b);
+  static Color Blend(const Color& lhs, const Color& rhs);
 
   //---------------------------
   // List of colors:
@@ -309,6 +316,7 @@ class Color {
   bool operator!=(const Color& rhs) const;
 
   std::string Print(bool is_background_color) const;
+  bool IsOpaque() const { return alpha_ == 255; }
 
  private:
   enum class ColorType : uint8_t {
@@ -321,6 +329,7 @@ class Color {
   uint8_t red_ = 0;
   uint8_t green_ = 0;
   uint8_t blue_ = 0;
+  uint8_t alpha_ = 0;
 };
 
 inline namespace literals {

include/ftxui/screen/image.hpp

@@ -0,0 +1,48 @@
+// Copyright 2024 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#ifndef FTXUI_SCREEN_IMAGE_HPP
+#define FTXUI_SCREEN_IMAGE_HPP
+
+#include <string>  // for string, basic_string, allocator
+#include <vector>  // for vector
+
+#include "ftxui/screen/box.hpp"    // for Box
+#include "ftxui/screen/pixel.hpp"  // for Pixel
+
+namespace ftxui {
+
+/// @brief A rectangular grid of Pixel.
+/// @ingroup screen
+class Image {
+ public:
+  // Constructors:
+  Image() = delete;
+  Image(int dimx, int dimy);
+
+  // Access a character in the grid at a given position.
+  std::string& at(int x, int y);
+  const std::string& at(int x, int y) const;
+
+  // Access a cell (Pixel) in the grid at a given position.
+  Pixel& PixelAt(int x, int y);
+  const Pixel& PixelAt(int x, int y) const;
+
+  // Get screen dimensions.
+  int dimx() const { return dimx_; }
+  int dimy() const { return dimy_; }
+
+  // Fill the image with space and default style
+  void Clear();
+
+  Box stencil;
+
+ protected:
+  int dimx_;
+  int dimy_;
+  std::vector<std::vector<Pixel>> pixels_;
+};
+
+}  // namespace ftxui
+
+#endif  // FTXUI_SCREEN_IMAGE_HPP

include/ftxui/screen/pixel.hpp

@@ -0,0 +1,54 @@
+// Copyright 2024 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#ifndef FTXUI_SCREEN_PIXEL_HPP
+#define FTXUI_SCREEN_PIXEL_HPP
+
+#include <cstdint>                 // for uint8_t
+#include <string>                  // for string, basic_string, allocator
+#include "ftxui/screen/color.hpp"  // for Color, Color::Default
+
+namespace ftxui {
+
+/// @brief A Unicode character and its associated style.
+/// @ingroup screen
+struct Pixel {
+  Pixel()
+      : blink(false),
+        bold(false),
+        dim(false),
+        italic(false),
+        inverted(false),
+        underlined(false),
+        underlined_double(false),
+        strikethrough(false),
+        automerge(false) {}
+
+  // A bit field representing the style:
+  bool blink : 1;
+  bool bold : 1;
+  bool dim : 1;
+  bool italic : 1;
+  bool inverted : 1;
+  bool underlined : 1;
+  bool underlined_double : 1;
+  bool strikethrough : 1;
+  bool automerge : 1;
+
+  // The hyperlink associated with the pixel.
+  // 0 is the default value, meaning no hyperlink.
+  // It's an index for accessing Screen meta data
+  uint8_t hyperlink = 0;
+
+  // The graphemes stored into the pixel. To support combining characters,
+  // like: a?, this can potentially contain multiple codepoints.
+  std::string character = "";
+
+  // Colors:
+  Color background_color = Color::Default;
+  Color foreground_color = Color::Default;
+};
+
+}  // namespace ftxui
+
+#endif  // FTXUI_SCREEN_PIXEL_HPP

include/ftxui/screen/screen.hpp

@@ -5,52 +5,16 @@
 #define FTXUI_SCREEN_SCREEN_HPP
 
 #include <cstdint>     // for uint8_t
-#include <memory>
+#include <functional>  // for function
 #include <string>      // for string, basic_string, allocator
 #include <vector>      // for vector
 
-#include "ftxui/screen/box.hpp"       // for Box
-#include "ftxui/screen/color.hpp"     // for Color, Color::Default
+#include "ftxui/screen/image.hpp"     // for Pixel, Image
 #include "ftxui/screen/terminal.hpp"  // for Dimensions
+#include "ftxui/util/autoreset.hpp"   // for AutoReset
 
 namespace ftxui {
 
-/// @brief A unicode character and its associated style.
-/// @ingroup screen
-struct Pixel {
-  Pixel()
-      : blink(false),
-        bold(false),
-        dim(false),
-        inverted(false),
-        underlined(false),
-        underlined_double(false),
-        strikethrough(false),
-        automerge(false) {}
-
-  // A bit field representing the style:
-  bool blink : 1;
-  bool bold : 1;
-  bool dim : 1;
-  bool inverted : 1;
-  bool underlined : 1;
-  bool underlined_double : 1;
-  bool strikethrough : 1;
-  bool automerge : 1;
-
-  // The hyperlink associated with the pixel.
-  // 0 is the default value, meaning no hyperlink.
-  uint8_t hyperlink = 0;
-
-  // The graphemes stored into the pixel. To support combining characters,
-  // like: a⃦, this can potentially contain multiple codepoints.
-  std::string character = " ";
-
-  // Colors:
-  Color background_color = Color::Default;
-  Color foreground_color = Color::Default;
-};
-
 /// @brief Define how the Screen's dimensions should look like.
 /// @ingroup screen
 namespace Dimension {
@@ -60,36 +24,25 @@ Dimensions Full();
 
 /// @brief A rectangular grid of Pixel.
 /// @ingroup screen
-class Screen {
+class Screen : public Image {
  public:
   // Constructors:
   Screen(int dimx, int dimy);
   static Screen Create(Dimensions dimension);
   static Screen Create(Dimensions width, Dimensions height);
 
-  // Access a character in the grid at a given position.
-  std::string& at(int x, int y);
-  const std::string& at(int x, int y) const;
-
-  // Access a cell (Pixel) in the grid at a given position.
-  Pixel& PixelAt(int x, int y);
-  const Pixel& PixelAt(int x, int y) const;
-
   std::string ToString() const;
 
   // Print the Screen on to the terminal.
   void Print() const;
 
-  // Get screen dimensions.
-  int dimx() const { return dimx_; }
-  int dimy() const { return dimy_; }
+  // Fill the screen with space and reset any screen state, like hyperlinks, and
+  // cursor
+  void Clear();
 
   // Move the terminal cursor n-lines up with n = dimy().
   std::string ResetPosition(bool clear = false) const;
 
-  // Fill the screen with space.
-  void Clear();
-
   void ApplyShader();
 
   struct Cursor {
@@ -107,6 +60,7 @@ class Screen {
     };
     Shape shape;
   };
+
   Cursor cursor() const { return cursor_; }
   void SetCursor(Cursor cursor) { cursor_ = cursor; }
 
@@ -115,14 +69,18 @@ class Screen {
   uint8_t RegisterHyperlink(const std::string& link);
   const std::string& Hyperlink(uint8_t id) const;
 
-  Box stencil;
+  using SelectionStyle = std::function<void(Pixel&)>;
+  const SelectionStyle& GetSelectionStyle() const;
+  void SetSelectionStyle(SelectionStyle decorator);
 
  protected:
-  int dimx_;
-  int dimy_;
-  std::vector<std::vector<Pixel>> pixels_;
   Cursor cursor_;
   std::vector<std::string> hyperlinks_ = {""};
+
+  // The current selection style. This is overridden by various dom elements.
+  SelectionStyle selection_style_ = [](Pixel& pixel) {
+    pixel.inverted ^= true;
+  };
 };
 
 }  // namespace ftxui

include/ftxui/screen/string.hpp

@@ -4,8 +4,6 @@
 #ifndef FTXUI_SCREEN_STRING_HPP
 #define FTXUI_SCREEN_STRING_HPP
 
-#include <stddef.h>  // for size_t
-#include <cstdint>   // for uint8_t
 #include <string>  // for string, wstring, to_string
 #include <vector>  // for vector
 
@@ -30,6 +28,4 @@ std::vector<int> CellToGlyphIndex(const std::string& input);
 
 }  // namespace ftxui
 
-#include "ftxui/screen/deprecated.hpp"
-
 #endif /* end of include guard: FTXUI_SCREEN_STRING_HPP */

include/ftxui/util/autoreset.hpp

@@ -16,6 +16,10 @@ class AutoReset {
       : variable_(variable), previous_value_(std::move(*variable)) {
     *variable_ = std::move(new_value);
   }
+  AutoReset(const AutoReset&) = delete;
+  AutoReset(AutoReset&&) = delete;
+  AutoReset& operator=(const AutoReset&) = delete;
+  AutoReset& operator=(AutoReset&&) = delete;
   ~AutoReset() { *variable_ = std::move(previous_value_); }
 
  private:

include/ftxui/util/ref.hpp

@@ -5,8 +5,10 @@
 #define FTXUI_UTIL_REF_HPP
 
 #include <ftxui/screen/string.hpp>
+#include <memory>
 #include <string>
 #include <variant>
+#include <vector>
 
 namespace ftxui {
 
@@ -15,10 +17,12 @@ template <typename T>
 class ConstRef {
  public:
   ConstRef() = default;
+  ConstRef(T t) : variant_(std::move(t)) {}  // NOLINT
+  ConstRef(const T* t) : variant_(t) {}      // NOLINT
+  ConstRef& operator=(ConstRef&&) noexcept = default;
   ConstRef(const ConstRef<T>&) = default;
-  ConstRef(ConstRef<T>&&) = default;
-  ConstRef(T t) : variant_(std::move(t)) {}
-  ConstRef(const T* t) : variant_(t) {}
+  ConstRef(ConstRef<T>&&) noexcept = default;
+  ~ConstRef() = default;
 
   // Make a "reseatable" reference
   ConstRef<T>& operator=(const ConstRef<T>&) = default;
@@ -42,10 +46,12 @@ template <typename T>
 class Ref {
  public:
   Ref() = default;
+  Ref(T t) : variant_(std::move(t)) {}  // NOLINT
+  Ref(T* t) : variant_(t) {}            // NOLINT
+  ~Ref() = default;
+  Ref& operator=(Ref&&) noexcept = default;
   Ref(const Ref<T>&) = default;
-  Ref(Ref<T>&&) = default;
-  Ref(T t) : variant_(std::move(t)) {}
-  Ref(T* t) : variant_(t) {}
+  Ref(Ref<T>&&) noexcept = default;
 
   // Make a "reseatable" reference.
   Ref<T>& operator=(const Ref<T>&) = default;
@@ -77,8 +83,10 @@ class StringRef : public Ref<std::string> {
  public:
   using Ref<std::string>::Ref;
 
-  StringRef(const wchar_t* ref) : StringRef(to_string(std::wstring(ref))) {}
-  StringRef(const char* ref) : StringRef(std::string(ref)) {}
+  StringRef(const wchar_t* ref)  // NOLINT
+      : StringRef(to_string(std::wstring(ref))) {}
+  StringRef(const char* ref)  // NOLINT
+      : StringRef(std::string(ref)) {}
 };
 
 /// @brief An adapter. Own or reference a constant string. For convenience, this
@@ -87,45 +95,120 @@ class ConstStringRef : public ConstRef<std::string> {
  public:
   using ConstRef<std::string>::ConstRef;
 
-  ConstStringRef(const std::wstring* ref) : ConstStringRef(to_string(*ref)) {}
-  ConstStringRef(const std::wstring ref) : ConstStringRef(to_string(ref)) {}
-  ConstStringRef(const wchar_t* ref)
+  ConstStringRef(const std::wstring* ref)  // NOLINT
+      : ConstStringRef(to_string(*ref)) {}
+  ConstStringRef(const std::wstring ref)  // NOLINT
+      : ConstStringRef(to_string(ref)) {}
+  ConstStringRef(const wchar_t* ref)  // NOLINT
       : ConstStringRef(to_string(std::wstring(ref))) {}
-  ConstStringRef(const char* ref) : ConstStringRef(std::string(ref)) {}
+  ConstStringRef(const char* ref)  // NOLINT
+      : ConstStringRef(std::string(ref)) {}
 };
 
 /// @brief An adapter. Reference a list of strings.
+///
+/// Supported input:
+/// - `std::vector<std::string>`
+/// - `std::vector<std::string>*`
+/// - `std::vector<std::wstring>*`
+/// - `Adapter*`
+/// - `std::unique_ptr<Adapter>`
 class ConstStringListRef {
  public:
+  // Bring your own adapter:
+  class Adapter {
+   public:
+    Adapter() = default;
+    Adapter(const Adapter&) = default;
+    Adapter& operator=(const Adapter&) = default;
+    Adapter(Adapter&&) = default;
+    Adapter& operator=(Adapter&&) = default;
+    virtual ~Adapter() = default;
+    virtual size_t size() const = 0;
+    virtual std::string operator[](size_t i) const = 0;
+  };
+  using Variant = std::variant<const std::vector<std::string>,    //
+                               const std::vector<std::string>*,   //
+                               const std::vector<std::wstring>*,  //
+                               Adapter*,                          //
+                               std::unique_ptr<Adapter>           //
+                               >;
+
   ConstStringListRef() = default;
-  ConstStringListRef(const std::vector<std::string>* ref) : ref_(ref) {}
-  ConstStringListRef(const std::vector<std::wstring>* ref) : ref_wide_(ref) {}
-  ConstStringListRef(const ConstStringListRef& other) = default;
-  ConstStringListRef& operator=(const ConstStringListRef& other) = default;
+  ~ConstStringListRef() = default;
+  ConstStringListRef& operator=(const ConstStringListRef&) = default;
+  ConstStringListRef& operator=(ConstStringListRef&&) = default;
+  ConstStringListRef(ConstStringListRef&&) = default;
+  ConstStringListRef(const ConstStringListRef&) = default;
+
+  ConstStringListRef(std::vector<std::string> value)  // NOLINT
+  {
+    variant_ = std::make_shared<Variant>(value);
+  }
+  ConstStringListRef(const std::vector<std::string>* value)  // NOLINT
+  {
+    variant_ = std::make_shared<Variant>(value);
+  }
+  ConstStringListRef(const std::vector<std::wstring>* value)  // NOLINT
+  {
+    variant_ = std::make_shared<Variant>(value);
+  }
+  ConstStringListRef(Adapter* adapter)  // NOLINT
+  {
+    variant_ = std::make_shared<Variant>(adapter);
+  }
+  template <typename AdapterType>
+  ConstStringListRef(std::unique_ptr<AdapterType> adapter)  // NOLINT
+  {
+    variant_ = std::make_shared<Variant>(
+        static_cast<std::unique_ptr<Adapter>>(std::move(adapter)));
+  }
 
   size_t size() const {
-    if (ref_) {
-      return ref_->size();
-    }
-    if (ref_wide_) {
-      return ref_wide_->size();
-    }
-    return 0;
+    return variant_ ? std::visit(SizeVisitor(), *variant_) : 0;
   }
 
   std::string operator[](size_t i) const {
-    if (ref_) {
-      return (*ref_)[i];
-    }
-    if (ref_wide_) {
-      return to_string((*ref_wide_)[i]);
-    }
-    return "";
+    return variant_ ? std::visit(IndexedGetter(i), *variant_) : "";
   }
 
  private:
-  const std::vector<std::string>* ref_ = nullptr;
-  const std::vector<std::wstring>* ref_wide_ = nullptr;
+  struct SizeVisitor {
+    size_t operator()(const std::vector<std::string>& v) const {
+      return v.size();
+    }
+    size_t operator()(const std::vector<std::string>* v) const {
+      return v->size();
+    }
+    size_t operator()(const std::vector<std::wstring>* v) const {
+      return v->size();
+    }
+    size_t operator()(const Adapter* v) const { return v->size(); }
+    size_t operator()(const std::unique_ptr<Adapter>& v) const {
+      return v->size();
+    }
+  };
+
+  struct IndexedGetter {
+    IndexedGetter(size_t index)  // NOLINT
+        : index_(index) {}
+    size_t index_;
+    std::string operator()(const std::vector<std::string>& v) const {
+      return v[index_];
+    }
+    std::string operator()(const std::vector<std::string>* v) const {
+      return (*v)[index_];
+    }
+    std::string operator()(const std::vector<std::wstring>* v) const {
+      return to_string((*v)[index_]);
+    }
+    std::string operator()(const Adapter* v) const { return (*v)[index_]; }
+    std::string operator()(const std::unique_ptr<Adapter>& v) const {
+      return (*v)[index_];
+    }
+  };
+
+  std::shared_ptr<Variant> variant_;
 };
 
 }  // namespace ftxui

src/ftxui/component.cppm

@@ -0,0 +1,18 @@
+/**
+ * @file component.cppm
+ * @brief Module file for FTXUI component operations.
+ */
+
+export module ftxui.component;
+
+export import ftxui.component.Animation;
+export import ftxui.component.CapturedMouse;
+export import ftxui.component.Component;
+export import ftxui.component.ComponentBase;
+export import ftxui.component.ComponentOptions;
+export import ftxui.component.Event;
+export import ftxui.component.Loop;
+export import ftxui.component.Mouse;
+export import ftxui.component.Receiver;
+export import ftxui.component.ScreenInteractive;
+export import ftxui.component.Task;

src/ftxui/component/Animation.cppm

@@ -0,0 +1,66 @@
+/**
+ * @file Animation.cppm
+ * @brief Module file for the Animation namespace of the Component module
+ */
+
+module;
+
+#include <ftxui/component/animation.hpp>
+
+export module ftxui.component.Animation;
+
+/**
+ * @namespace ftxui::animation
+ * @brief The FTXUI ftxui::animation:: namespace
+ */
+export namespace ftxui::animation {
+    using ftxui::animation::RequestAnimationFrame;
+
+    using ftxui::animation::Clock;
+    using ftxui::animation::TimePoint;
+    using ftxui::animation::Duration;
+
+    using ftxui::animation::Params;
+
+    /**
+     * @namespace easing
+     * @brief The FTXUI sf::animation::easing:: namespace
+     */
+    namespace easing {
+        using ftxui::animation::easing::Function;
+
+        using ftxui::animation::easing::Linear;
+        using ftxui::animation::easing::QuadraticIn;
+        using ftxui::animation::easing::QuadraticOut;
+        using ftxui::animation::easing::QuadraticInOut;
+        using ftxui::animation::easing::CubicIn;
+        using ftxui::animation::easing::CubicOut;
+        using ftxui::animation::easing::CubicInOut;
+        using ftxui::animation::easing::QuarticIn;
+        using ftxui::animation::easing::QuarticOut;
+        using ftxui::animation::easing::QuarticInOut;
+        using ftxui::animation::easing::QuinticIn;
+        using ftxui::animation::easing::QuinticOut;
+        using ftxui::animation::easing::QuinticInOut;
+        using ftxui::animation::easing::SineIn;
+        using ftxui::animation::easing::SineOut;
+        using ftxui::animation::easing::SineInOut;
+        using ftxui::animation::easing::CircularIn;
+        using ftxui::animation::easing::CircularOut;
+        using ftxui::animation::easing::CircularInOut;
+        using ftxui::animation::easing::ExponentialIn;
+        using ftxui::animation::easing::ExponentialOut;
+        using ftxui::animation::easing::ExponentialInOut;
+        using ftxui::animation::easing::ElasticIn;
+        using ftxui::animation::easing::ElasticOut;
+        using ftxui::animation::easing::ElasticInOut;
+        using ftxui::animation::easing::BackIn;
+        using ftxui::animation::easing::BackOut;
+        using ftxui::animation::easing::BackInOut;
+        using ftxui::animation::easing::BounceIn;
+        using ftxui::animation::easing::BounceOut;
+        using ftxui::animation::easing::BounceInOut;
+    }
+
+    using ftxui::animation::Animator;
+}

src/ftxui/component/CapturedMouse.cppm

@@ -0,0 +1,18 @@
+/**
+ * @file CapturedMouse.cppm
+ * @brief Module file for the CapturedMouseInterface class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/captured_mouse.hpp>
+
+export module ftxui.component.CapturedMouse;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::CapturedMouseInterface;
+}

src/ftxui/component/Component.cppm

@@ -0,0 +1,61 @@
+/**
+ * @file Component.cppm
+ * @brief Module file for the Component classes of the Component module
+ */
+
+module;
+
+#include <ftxui/component/component.hpp>
+
+export module ftxui.component.Component;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::ButtonOption;
+    using ftxui::CheckboxOption;
+    using ftxui::Event;
+    using ftxui::InputOption;
+    using ftxui::MenuOption;
+    using ftxui::RadioboxOption;
+    using ftxui::MenuEntryOption;
+
+    using ftxui::Make;
+
+    using ftxui::ComponentDecorator;
+    using ftxui::ElementDecorator;
+
+    using ftxui::operator|;
+    using ftxui::operator|=;
+
+    namespace Container {
+        using ftxui::Container::Vertical;
+        using ftxui::Container::Horizontal;
+        using ftxui::Container::Tab;
+        using ftxui::Container::Stacked;
+    }
+    
+    using ftxui::Button;
+    using ftxui::Checkbox;
+    using ftxui::Input;
+    using ftxui::Menu;
+    using ftxui::MenuEntry;
+    using ftxui::Radiobox;
+    using ftxui::Dropdown;
+    using ftxui::Toggle;
+    using ftxui::Slider;
+    using ftxui::ResizableSplit;
+    using ftxui::ResizableSplitLeft;
+    using ftxui::ResizableSplitRight;
+    using ftxui::ResizableSplitTop;
+    using ftxui::ResizableSplitBottom;
+    using ftxui::Renderer;
+    using ftxui::CatchEvent;
+    using ftxui::Maybe;
+    using ftxui::Modal;
+    using ftxui::Collapsible;
+    using ftxui::Hoverable;
+    using ftxui::Window;
+}

src/ftxui/component/ComponentBase.cppm

@@ -0,0 +1,28 @@
+/**
+ * @file ComponentBase.cppm
+ * @brief Module file for the ComponentBase class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/component_base.hpp>
+
+export module ftxui.component.ComponentBase;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::Delegate;
+    using ftxui::Focus;
+    using ftxui::Event;
+
+    namespace animation {
+        using ftxui::animation::Params;
+    }
+
+    using ftxui::ComponentBase;
+    using ftxui::Component;
+    using ftxui::Components;
+}

src/ftxui/component/ComponentOptions.cppm

@@ -0,0 +1,33 @@
+/**
+ * @file ComponentOptions.cppm
+ * @brief Module file for options for the Component class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/component_options.hpp>
+
+export module ftxui.component.ComponentOptions;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::EntryState;
+    using ftxui::UnderlineOption;
+    using ftxui::AnimatedColorOption;
+    using ftxui::AnimatedColorsOption;
+    using ftxui::MenuEntryOption;
+    using ftxui::MenuOption;
+    using ftxui::ButtonOption;
+    using ftxui::CheckboxOption;
+    using ftxui::InputState;
+    using ftxui::InputOption;
+    using ftxui::RadioboxOption;
+    using ftxui::ResizableSplitOption;
+    using ftxui::SliderOption;
+    using ftxui::WindowRenderState;
+    using ftxui::WindowOptions;
+    using ftxui::DropdownOption;
+}

src/ftxui/component/Event.cppm

@@ -0,0 +1,21 @@
+/**
+ * @file Event.cppm
+ * @brief Module file for the Event struct of the Component module
+ */
+
+module;
+
+#include <ftxui/component/event.hpp>
+
+export module ftxui.component.Event;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::ScreenInteractive;
+    using ftxui::ComponentBase;
+
+    using ftxui::Event;
+}

src/ftxui/component/Loop.cppm

@@ -0,0 +1,22 @@
+/**
+ * @file Loop.cppm
+ * @brief Module file for the Loop class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/loop.hpp>
+
+export module ftxui.component.Loop;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::ComponentBase;
+    using ftxui::Component;
+    using ftxui::ScreenInteractive;
+
+    using ftxui::Loop;
+}

src/ftxui/component/Mouse.cppm

@@ -0,0 +1,18 @@
+/**
+ * @file Mouse.cppm
+ * @brief Module file for the Mouse struct of the Component module
+ */
+
+module;
+
+#include <ftxui/component/mouse.hpp>
+
+export module ftxui.component.Mouse;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::Mouse;
+}

src/ftxui/component/Receiver.cppm

@@ -0,0 +1,22 @@
+/**
+ * @file Receiver.cppm
+ * @brief Module file for the Receiver class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/receiver.hpp>
+
+export module ftxui.component.Receiver;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::SenderImpl;
+    using ftxui::ReceiverImpl;
+    using ftxui::Sender;
+    using ftxui::Receiver;
+    using ftxui::MakeReceiver;
+}

src/ftxui/component/ScreenInteractive.cppm

@@ -0,0 +1,25 @@
+/**
+ * @file ScreenInteractive.cppm
+ * @brief Module file for the ScreenInteractive class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/screen_interactive.hpp>
+
+export module ftxui.component.ScreenInteractive;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::ComponentBase;
+    using ftxui::Loop;
+    using ftxui::Event;
+    using ftxui::Component;
+
+    using ftxui::Screen;
+    using ftxui::ScreenInteractivePrivate;
+    using ftxui::ScreenInteractive;
+}

src/ftxui/component/Task.cppm

@@ -0,0 +1,20 @@
+/**
+ * @file Task.cppm
+ * @brief Module file for the Task class of the Component module
+ */
+
+module;
+
+#include <ftxui/component/task.hpp>
+
+export module ftxui.component.Task;
+
+/**
+ * @namespace ftxui
+ * @brief The FTXUI ftxui:: namespace
+ */
+export namespace ftxui {
+    using ftxui::AnimationTask;
+    using ftxui::Closure;
+    using ftxui::Task;
+}

src/ftxui/component/animation.cpp

@@ -1,5 +1,4 @@
 #include <cmath>    // for sin, pow, sqrt, cos
-#include <ratio>    // for ratio
 #include <utility>  // for move
 
 #include "ftxui/component/animation.hpp"

src/ftxui/component/button.cpp

@@ -3,11 +3,9 @@
 // the LICENSE file.
 
 #include <functional>  // for function
-#include <memory>      // for shared_ptr
 #include <utility>     // for move
 
 #include "ftxui/component/animation.hpp"  // for Animator, Params (ptr only)
-#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/component.hpp"  // for Make, Button
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/component/component_options.hpp"  // for ButtonOption, AnimatedColorOption, AnimatedColorsOption, EntryState
@@ -39,7 +37,7 @@ class ButtonBase : public ComponentBase, public ButtonOption {
   explicit ButtonBase(ButtonOption option) : ButtonOption(std::move(option)) {}
 
   // Component implementation:
-  Element Render() override {
+  Element OnRender() override {
     const bool active = Active();
     const bool focused = Focused();
     const bool focused_or_hover = focused || mouse_hover_;
@@ -49,17 +47,16 @@ class ButtonBase : public ComponentBase, public ButtonOption {
       SetAnimationTarget(target);
     }
 
-    auto focus_management = focused ? focus : active ? select : nothing;
-    const EntryState state = {
-        *label,
-        false,
-        active,
-        focused_or_hover,
+    const EntryState state{
+        *label, false, active, focused_or_hover, Index(),
     };
 
     auto element = (transform ? transform : DefaultTransform)  //
         (state);
-    return element | AnimatedColorStyle() | focus_management | reflect(box_);
+    element |= AnimatedColorStyle();
+    element |= focus;
+    element |= reflect(box_);
+    return element;
   }
 
   Decorator AnimatedColorStyle() {
@@ -98,10 +95,13 @@ class ButtonBase : public ComponentBase, public ButtonOption {
   }
 
   void OnClick() {
-    on_click();
     animation_background_ = 0.5F;  // NOLINT
     animation_foreground_ = 0.5F;  // NOLINT
     SetAnimationTarget(1.F);       // NOLINT
+
+    // TODO(arthursonzogni): Consider posting the task to the main loop, instead
+    // of invoking it immediately.
+    on_click();  // May delete this.
   }
 
   bool OnEvent(Event event) override {
@@ -110,7 +110,7 @@ class ButtonBase : public ComponentBase, public ButtonOption {
     }
 
     if (event == Event::Return) {
-      OnClick();
+      OnClick();  // May delete this.
       return true;
     }
     return false;
@@ -127,7 +127,7 @@ class ButtonBase : public ComponentBase, public ButtonOption {
     if (event.mouse().button == Mouse::Left &&
         event.mouse().motion == Mouse::Pressed) {
       TakeFocus();
-      OnClick();
+      OnClick();  // May delete this.
       return true;
     }
 
@@ -204,7 +204,7 @@ Component Button(ButtonOption option) {
 Component Button(ConstStringRef label,
                  std::function<void()> on_click,
                  ButtonOption option) {
-  option.label = label;
+  option.label = std::move(label);
   option.on_click = std::move(on_click);
   return Make<ButtonBase>(std::move(option));
 }

src/ftxui/component/button_test.cpp

@@ -1,8 +1,6 @@
 // Copyright 2022 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
-#include <chrono>  // for operator""s, chrono_literals
-#include <memory>  // for __shared_ptr_access, shared_ptr, allocator
 #include <string>  // for string
 
 #include "ftxui/component/animation.hpp"          // for Duration, Params

src/ftxui/component/catch_event.cpp

@@ -2,8 +2,6 @@
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
 #include <functional>  // for function
-#include <memory>  // for __shared_ptr_access, __shared_ptr_access<>::element_type, shared_ptr
-#include <type_traits>  // for remove_reference, remove_reference<>::type
 #include <utility>     // for move
 
 #include "ftxui/component/component.hpp"  // for Make, CatchEvent, ComponentDecorator

src/ftxui/component/checkbox.cpp

@@ -4,7 +4,6 @@
 #include <functional>  // for function
 #include <utility>     // for move
 
-#include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/component.hpp"       // for Make, Checkbox
 #include "ftxui/component/component_base.hpp"  // for Component, ComponentBase
 #include "ftxui/component/component_options.hpp"  // for CheckboxOption, EntryState
@@ -24,19 +23,17 @@ class CheckboxBase : public ComponentBase, public CheckboxOption {
 
  private:
   // Component implementation.
-  Element Render() override {
+  Element OnRender() override {
     const bool is_focused = Focused();
     const bool is_active = Active();
-    auto focus_management = is_focused ? focus : is_active ? select : nothing;
     auto entry_state = EntryState{
-        *label,
-        *checked,
-        is_active,
-        is_focused || hovered_,
+        *label, *checked, is_active, is_focused || hovered_, -1,
     };
     auto element = (transform ? transform : CheckboxOption::Simple().transform)(
         entry_state);
-    return element | focus_management | reflect(box_);
+    element |= focus;
+    element |= reflect(box_);
+    return element;
   }
 
   bool OnEvent(Event event) override {
@@ -86,6 +83,32 @@ class CheckboxBase : public ComponentBase, public CheckboxOption {
 };
 }  // namespace
 
+/// @brief Draw checkable element.
+/// @param option Additional optional parameters.
+/// @ingroup component
+/// @see CheckboxBase
+///
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::FitComponent();
+/// CheckboxOption option;
+/// option.label = "Make a sandwidth";
+/// option.checked = false;
+/// Component checkbox = Checkbox(option);
+/// screen.Loop(checkbox)
+/// ```
+///
+/// ### Output
+///
+/// ```bash
+/// ☐ Make a sandwitch
+/// ```
+// NOLINTNEXTLINE
+Component Checkbox(CheckboxOption option) {
+  return Make<CheckboxBase>(std::move(option));
+}
+
 /// @brief Draw checkable element.
 /// @param label The label of the checkbox.
 /// @param checked Whether the checkbox is checked or not.
@@ -110,7 +133,7 @@ class CheckboxBase : public ComponentBase, public CheckboxOption {
 /// ```
 // NOLINTNEXTLINE
 Component Checkbox(ConstStringRef label, bool* checked, CheckboxOption option) {
-  option.label = label;
+  option.label = std::move(label);
   option.checked = checked;
   return Make<CheckboxBase>(std::move(option));
 }

src/ftxui/component/collapsible.cpp

@@ -2,7 +2,6 @@
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
 #include <functional>  // for function
-#include <memory>      // for shared_ptr, allocator
 #include <utility>     // for move
 
 #include "ftxui/component/component.hpp"  // for Checkbox, Maybe, Make, Vertical, Collapsible
@@ -48,7 +47,7 @@ Component Collapsible(ConstStringRef label, Component child, Ref<bool> show) {
         return hbox({prefix, t});
       };
       Add(Container::Vertical({
-          Checkbox(label, show_.operator->(), opt),
+          Checkbox(std::move(label), show_.operator->(), opt),
           Maybe(std::move(child), show_.operator->()),
       }));
     }

src/ftxui/component/collapsible_test.cpp

@@ -1,4 +1,3 @@
-#include <memory>  // for __shared_ptr_access, shared_ptr, allocator
 #include <string>  // for string
 
 #include "ftxui/component/component.hpp"       // for Collapsible, Renderer

src/ftxui/component/component.cpp

@@ -5,6 +5,7 @@
 #include <cassert>    // for assert
 #include <cstddef>    // for size_t
 #include <iterator>   // for begin, end
+#include <memory>     // for unique_ptr, make_unique
 #include <utility>    // for move
 #include <vector>     // for vector, __alloc_traits<>::value_type
 
@@ -14,6 +15,8 @@
 #include "ftxui/component/event.hpp"           // for Event
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"                  // for text, Element
+#include "ftxui/dom/node.hpp"                      // for Node, Elements
+#include "ftxui/screen/box.hpp"                    // for Box
 
 namespace ftxui::animation {
 class Params;
@@ -50,6 +53,22 @@ size_t ComponentBase::ChildCount() const {
   return children_.size();
 }
 
+/// @brief Return index of the component in its parent. -1 if no parent.
+/// @ingroup component
+int ComponentBase::Index() const {
+  if (parent_ == nullptr) {
+    return -1;
+  }
+  int index = 0;
+  for (const Component& child : parent_->children_) {
+    if (child.get() == this) {
+      return index;
+    }
+    index++;
+  }
+  return -1;  // Not reached.
+}
+
 /// @brief Add a child.
 /// @@param child The child to be attached.
 /// @ingroup component
@@ -86,10 +105,46 @@ void ComponentBase::DetachAllChildren() {
 }
 
 /// @brief Draw the component.
-/// Build a ftxui::Element to be drawn on the ftxi::Screen representing this
-/// ftxui::ComponentBase.
+/// Build a ftxui::Element to be drawn on the ftxui::Screen representing this
+/// ftxui::ComponentBase. Please override OnRender() to modify the rendering.
 /// @ingroup component
 Element ComponentBase::Render() {
+  // Some users might call `ComponentBase::Render()` from
+  // `T::OnRender()`. To avoid infinite recursion, we use a flag.
+  if (in_render) {
+    return ComponentBase::OnRender();
+  }
+
+  in_render = true;
+  Element element = OnRender();
+  in_render = false;
+
+  class Wrapper : public Node {
+   public:
+    bool active_ = false;
+
+    Wrapper(Element child, bool active)
+        : Node({std::move(child)}), active_(active) {}
+
+    void SetBox(Box box) override {
+      Node::SetBox(box);
+      children_[0]->SetBox(box);
+    }
+
+    void ComputeRequirement() override {
+      Node::ComputeRequirement();
+      requirement_.focused.component_active = active_;
+    }
+  };
+
+  return std::make_shared<Wrapper>(std::move(element), Active());
+}
+
+/// @brief Draw the component.
+/// Build a ftxui::Element to be drawn on the ftxi::Screen representing this
+/// ftxui::ComponentBase. This function is means to be overridden.
+/// @ingroup component
+Element ComponentBase::OnRender() {
   if (children_.size() == 1) {
     return children_.front()->Render();
   }

src/ftxui/component/component_fuzzer.cpp

@@ -2,7 +2,6 @@
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
 #include <cassert>
-#include <iostream>
 #include <vector>
 #include "ftxui/component/component.hpp"
 #include "ftxui/component/terminal_input_parser.hpp"
@@ -11,8 +10,9 @@ using namespace ftxui;
 namespace {
 
 bool GeneratorBool(const char*& data, size_t& size) {
-  if (size == 0)
+  if (size == 0) {
     return false;
+  }
 
   auto out = bool(data[0] % 2);
   data++;

src/ftxui/component/component_options.cpp

@@ -3,12 +3,11 @@
 // the LICENSE file.
 #include "ftxui/component/component_options.hpp"
 
-#include <ftxui/dom/linear_gradient.hpp>  // for LinearGradient
 #include <ftxui/screen/color.hpp>  // for Color, Color::White, Color::Black, Color::GrayDark, Color::Blue, Color::GrayLight, Color::Red
 #include <memory>                  // for shared_ptr
 #include <utility>                 // for move
-
 #include "ftxui/component/animation.hpp"  // for Function, Duration
+#include "ftxui/dom/direction.hpp"
 #include "ftxui/dom/elements.hpp"  // for operator|=, Element, text, bgcolor, inverted, bold, dim, operator|, color, borderEmpty, hbox, automerge, border, borderLight
 
 namespace ftxui {

src/ftxui/component/component_test.cpp

@@ -2,7 +2,6 @@
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
 #include <memory>  // for shared_ptr, __shared_ptr_access, allocator, __shared_ptr_access<>::element_type, make_shared
-#include <string>  // for string
 
 #include "ftxui/component/component.hpp"       // for Make
 #include "ftxui/component/component_base.hpp"  // for ComponentBase, Component

src/ftxui/component/container.cpp

@@ -5,7 +5,6 @@
 #include <cstddef>    // for size_t
 #include <memory>  // for make_shared, __shared_ptr_access, allocator, shared_ptr, allocator_traits<>::value_type
 #include <utility>  // for move
-#include <vector>   // for vector, __alloc_traits<>::value_type
 
 #include "ftxui/component/component.hpp"  // for Horizontal, Vertical, Tab
 #include "ftxui/component/component_base.hpp"  // for Components, Component, ComponentBase
@@ -99,7 +98,7 @@ class VerticalContainer : public ContainerBase {
  public:
   using ContainerBase::ContainerBase;
 
-  Element Render() override {
+  Element OnRender() override {
     Elements elements;
     elements.reserve(children_.size());
     for (auto& it : children_) {
@@ -164,6 +163,7 @@ class VerticalContainer : public ContainerBase {
       return false;
     }
 
+    const int old_selected = *selector_;
     if (event.mouse().button == Mouse::WheelUp) {
       MoveSelector(-1);
     }
@@ -172,7 +172,7 @@ class VerticalContainer : public ContainerBase {
     }
     *selector_ = std::max(0, std::min(int(children_.size()) - 1, *selector_));
 
-    return true;
+    return old_selected != *selector_;
   }
 
   Box box_;
@@ -182,7 +182,7 @@ class HorizontalContainer : public ContainerBase {
  public:
   using ContainerBase::ContainerBase;
 
-  Element Render() override {
+  Element OnRender() override {
     Elements elements;
     elements.reserve(children_.size());
     for (auto& it : children_) {
@@ -218,7 +218,7 @@ class TabContainer : public ContainerBase {
  public:
   using ContainerBase::ContainerBase;
 
-  Element Render() override {
+  Element OnRender() override {
     const Component active_child = ActiveChild();
     if (active_child) {
       return active_child->Render();
@@ -244,7 +244,7 @@ class StackedContainer : public ContainerBase {
       : ContainerBase(std::move(children), nullptr) {}
 
  private:
-  Element Render() final {
+  Element OnRender() final {
     Elements elements;
     for (auto& child : children_) {
       elements.push_back(child->Render());
@@ -334,7 +334,7 @@ Component Vertical(Components children) {
 ///   children_2,
 ///   children_3,
 ///   children_4,
-/// });
+/// }, &selected_children);
 /// ```
 Component Vertical(Components children, int* selector) {
   return std::make_shared<VerticalContainer>(std::move(children), selector);
@@ -355,7 +355,7 @@ Component Vertical(Components children, int* selector) {
 ///   children_2,
 ///   children_3,
 ///   children_4,
-/// }, &selected_children);
+/// });
 /// ```
 Component Horizontal(Components children) {
   return Horizontal(std::move(children), nullptr);

src/ftxui/component/container_test.cpp

@@ -1,8 +1,6 @@
 // Copyright 2020 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
-#include <memory>  // for __shared_ptr_access, shared_ptr, allocator
-#include <string>  // for string
 
 #include "ftxui/component/component.hpp"  // for Horizontal, Vertical, Button, Tab
 #include "ftxui/component/component_base.hpp"  // for ComponentBase, Component