Fix CMake 3.12 compatibility by adding required install destinations

Co-authored-by: ArthurSonzogni <4759106+ArthurSonzogni@users.noreply.github.com>

.bazelrc

@@ -1,3 +1,5 @@
+common --enable_bzlmod
+
 build --features=layering_check
 build --enable_bzlmod
 

.clang-format

@@ -2,3 +2,6 @@
 # http://clang.llvm.org/docs/ClangFormatStyleOptions.html
 BasedOnStyle: Chromium
 Standard: Cpp11
+
+InsertBraces: true
+InsertNewlineAtEOF: true

.github/workflows/build.yaml

@@ -165,3 +165,47 @@ jobs:
           flags: ${{ runner.os }}
           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 .

.gitignore

@@ -62,8 +62,10 @@ out/
 !include/ftxui/**/*.cpp
 
 # src directory:
+!src/ftxui/*.cppm
 !src/ftxui/**/*.hpp
 !src/ftxui/**/*.cpp
+!src/ftxui/**/*.cppm
 
 # tools directory:
 !tools/**/*.sh

BUILD.bazel

@@ -13,7 +13,6 @@ 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 
@@ -159,6 +158,12 @@ ftxui_cc_library(
         "src/ftxui/component/resizable_split.cpp",
         "src/ftxui/component/screen_interactive.cpp",
         "src/ftxui/component/slider.cpp",
+        "src/ftxui/component/task.cpp",
+        "src/ftxui/component/task_internal.hpp",
+        "src/ftxui/component/task_queue.cpp",
+        "src/ftxui/component/task_queue.hpp",
+        "src/ftxui/component/task_runner.cpp",
+        "src/ftxui/component/task_runner.hpp",
         "src/ftxui/component/terminal_input_parser.cpp",
         "src/ftxui/component/terminal_input_parser.hpp",
         "src/ftxui/component/util.cpp",
@@ -170,6 +175,9 @@ ftxui_cc_library(
         # Private header from ftxui:screen.
         "src/ftxui/screen/string_internal.hpp",
         "src/ftxui/screen/util.hpp",
+
+        # Private header.
+        "include/ftxui/util/warn_windows_macro.hpp",
     ],
     hdrs = [
         "include/ftxui/component/animation.hpp",
@@ -184,7 +192,6 @@ ftxui_cc_library(
         "include/ftxui/component/screen_interactive.hpp",
         "include/ftxui/component/task.hpp",
     ],
-    linkopts = pthread_linkopts(),
     deps = [
         ":dom",
         ":screen",
@@ -207,7 +214,6 @@ cc_test(
         "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",

CHANGELOG.md

@@ -9,6 +9,29 @@ Next
 - Use Doxygen awesome. Add our own theme.
 - Break the documentation into several pages.
 
+### 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;
+  import ftxui.util;
+  ```
+  Thanks @mikomikotaishi for PR #1015.
+- Remove dependency on 'pthread'.
+
+### Component
+- Fix ScreenInteractive::FixedSize screen stomps on the preceding terminal
+  output. Thanks @zozowell in #1064.
+- Fix vertical `ftxui::Slider`. The "up" key was previously decreasing the
+  value. Thanks @its-pablo in #1093 for reporting the issue.
+
 
 6.1.9 (2025-05-07)
 ------------

CMakeLists.txt

@@ -1,4 +1,19 @@
-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
@@ -6,15 +21,6 @@ project(ftxui
   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 \
@@ -138,26 +144,20 @@ add_library(component
   src/ftxui/component/resizable_split.cpp
   src/ftxui/component/screen_interactive.cpp
   src/ftxui/component/slider.cpp
+  src/ftxui/component/task.cpp
+  src/ftxui/component/task_internal.hpp
+  src/ftxui/component/task_queue.cpp
+  src/ftxui/component/task_queue.hpp
+  src/ftxui/component/task_runner.cpp
+  src/ftxui/component/task_runner.hpp
   src/ftxui/component/terminal_input_parser.cpp
   src/ftxui/component/terminal_input_parser.hpp
   src/ftxui/component/util.cpp
   src/ftxui/component/window.cpp
 )
 
-target_link_libraries(dom
-  PUBLIC screen
-)
-
-target_link_libraries(component
-  PUBLIC dom
-)
-
-if (NOT EMSCRIPTEN)
-  find_package(Threads)
-  target_link_libraries(component
-    PUBLIC Threads::Threads
-  )
-endif()
+target_link_libraries(dom PUBLIC screen)
+target_link_libraries(component PUBLIC dom)
 
 include(cmake/ftxui_set_options.cmake)
 ftxui_set_options(screen)
@@ -176,6 +176,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)
+
+# 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()

README.md

@@ -1,3 +1,4 @@
+
 <p align="center">
   <img src="https://github.com/ArthurSonzogni/FTXUI/assets/4759106/6925b6da-0a7e-49d9-883c-c890e1f36007" alt="Demo image"></img>
   <br/>
@@ -18,7 +19,7 @@
   <br/>
   <a href="https://arthursonzogni.github.io/FTXUI/">Documentation</a> ·
   <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Report a Bug</a> ·
-  <a href="https://arthursonzogni.github.io/FTXUI/examples.html">Examples</a> .
+  <a href="https://arthursonzogni.github.io/FTXUI/examples/">Examples</a> .
   <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Request Feature</a> ·
   <a href="https://github.com/ArthurSonzogni/FTXUI/pulls">Send a Pull Request</a>
 
@@ -39,7 +40,8 @@ A simple cross-platform C++ library for terminal based user interfaces!
  * Support for [UTF8](https://en.wikipedia.org/wiki/UTF-8) and [fullwidth chars](https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms) (→ 测试)
  * 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
+ * No dependencies.
+ * [C++20 Module support](https://arthursonzogni.github.io/FTXUI/cpp20-modules.html)
  * **Cross platform**: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
  * Learn by [examples](#documentation), and [tutorials](#documentation)
  * Multiple packages:
@@ -49,7 +51,9 @@ A simple cross-platform C++ library for terminal based user interfaces!
      - [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)
+    - [OpenSUSE](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui)
+    - [XMake](https://xmake.io) repository [package](https://github.com/xmake-io/xmake-repo/blob/dev/packages/f/ftxui/xmake.lua)
+    - [Nix](https://github.com/ArthurSonzogni/FTXUI/blob/main/flake.nix)
  * Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
 
 ## Documentation
@@ -95,7 +99,7 @@ Element can be arranged together:
   - inside a grid with `gridbox`
   - wrap along one direction using the `flexbox`.
   
-Element can become flexible using the the `flex` decorator.
+Element can become flexible using the `flex` decorator.
   
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html) using `hbox`, `vbox` and `filler`.
 
@@ -357,7 +361,10 @@ Feel free to add your projects here:
 - [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)
+- [VerifySN (Fast Hash Tool)](https://github.com/d06i/verifySN)
+- [tic-tac-toe](https://github.com/birland/tic-tac-toe)
 
 ### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
 
@@ -427,6 +434,7 @@ If you don't, FTXUI may be used from the following packages:
 - [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),
+[Nix](https://github.com/ArthurSonzogni/FTXUI/blob/main/flake.nix),
 [![Packaging status](https://repology.org/badge/vertical-allrepos/libftxui.svg)](https://repology.org/project/libftxui/versions)
 
 
@@ -435,6 +443,8 @@ If you choose to build and link FTXUI yourself, `ftxui-component` must be first
 g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .
 ```
 
+To build FTXUI with modules, check [documentation](https://arthursonzogni.github.io/FTXUI/cpp20-modules.html)
+
 ## Contributors
 
 <a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors">

bazel/ftxui.bzl

@@ -43,16 +43,6 @@ def 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 = [],

build/_deps/googlebenchmark-subbuild/CMakeLists.txt

@@ -0,0 +1,42 @@
+# Distributed under the OSI-approved BSD 3-Clause License.  See accompanying
+# file Copyright.txt or https://cmake.org/licensing for details.
+
+cmake_minimum_required(VERSION 3.31.6)
+
+# Reject any attempt to use a toolchain file. We must not use one because
+# we could be downloading it here. If the CMAKE_TOOLCHAIN_FILE environment
+# variable is set, the cache variable will have been initialized from it.
+unset(CMAKE_TOOLCHAIN_FILE CACHE)
+unset(ENV{CMAKE_TOOLCHAIN_FILE})
+
+# We name the project and the target for the ExternalProject_Add() call
+# to something that will highlight to the user what we are working on if
+# something goes wrong and an error message is produced.
+
+project(googlebenchmark-populate NONE)
+
+
+# Pass through things we've already detected in the main project to avoid
+# paying the cost of redetecting them again in ExternalProject_Add()
+set(GIT_EXECUTABLE [==[/usr/bin/git]==])
+set(GIT_VERSION_STRING [==[2.51.0]==])
+set_property(GLOBAL PROPERTY _CMAKE_FindGit_GIT_EXECUTABLE_VERSION
+  [==[/usr/bin/git;2.51.0]==]
+)
+
+
+include(ExternalProject)
+ExternalProject_Add(googlebenchmark-populate
+                     "UPDATE_DISCONNECTED" "False" "GIT_REPOSITORY" "https://github.com/google/benchmark" "EXTERNALPROJECT_INTERNAL_ARGUMENT_SEPARATOR" "GIT_TAG" "015d1a091af6937488242b70121858bce8fd40e9" "GIT_PROGRESS" "TRUE"
+                    SOURCE_DIR          "/home/runner/work/FTXUI/FTXUI/build/_deps/googlebenchmark-src"
+                    BINARY_DIR          "/home/runner/work/FTXUI/FTXUI/build/_deps/googlebenchmark-build"
+                    CONFIGURE_COMMAND   ""
+                    BUILD_COMMAND       ""
+                    INSTALL_COMMAND     ""
+                    TEST_COMMAND        ""
+                    USES_TERMINAL_DOWNLOAD  YES
+                    USES_TERMINAL_UPDATE    YES
+                    USES_TERMINAL_PATCH     YES
+)
+
+

build/_deps/googletest-subbuild/CMakeLists.txt

@@ -0,0 +1,42 @@
+# Distributed under the OSI-approved BSD 3-Clause License.  See accompanying
+# file Copyright.txt or https://cmake.org/licensing for details.
+
+cmake_minimum_required(VERSION 3.31.6)
+
+# Reject any attempt to use a toolchain file. We must not use one because
+# we could be downloading it here. If the CMAKE_TOOLCHAIN_FILE environment
+# variable is set, the cache variable will have been initialized from it.
+unset(CMAKE_TOOLCHAIN_FILE CACHE)
+unset(ENV{CMAKE_TOOLCHAIN_FILE})
+
+# We name the project and the target for the ExternalProject_Add() call
+# to something that will highlight to the user what we are working on if
+# something goes wrong and an error message is produced.
+
+project(googletest-populate NONE)
+
+
+# Pass through things we've already detected in the main project to avoid
+# paying the cost of redetecting them again in ExternalProject_Add()
+set(GIT_EXECUTABLE [==[/usr/bin/git]==])
+set(GIT_VERSION_STRING [==[2.51.0]==])
+set_property(GLOBAL PROPERTY _CMAKE_FindGit_GIT_EXECUTABLE_VERSION
+  [==[/usr/bin/git;2.51.0]==]
+)
+
+
+include(ExternalProject)
+ExternalProject_Add(googletest-populate
+                     "UPDATE_DISCONNECTED" "False" "GIT_REPOSITORY" "https://github.com/google/googletest" "EXTERNALPROJECT_INTERNAL_ARGUMENT_SEPARATOR" "GIT_TAG" "23ef29555ef4789f555f1ba8c51b4c52975f0907" "GIT_PROGRESS" "TRUE"
+                    SOURCE_DIR          "/home/runner/work/FTXUI/FTXUI/build/_deps/googletest-src"
+                    BINARY_DIR          "/home/runner/work/FTXUI/FTXUI/build/_deps/googletest-build"
+                    CONFIGURE_COMMAND   ""
+                    BUILD_COMMAND       ""
+                    INSTALL_COMMAND     ""
+                    TEST_COMMAND        ""
+                    USES_TERMINAL_DOWNLOAD  YES
+                    USES_TERMINAL_UPDATE    YES
+                    USES_TERMINAL_PATCH     YES
+)
+
+

cmake/ftxui_install.cmake

@@ -11,6 +11,9 @@ include(CMakePackageConfigHelpers)
 install(
   TARGETS screen dom component
   EXPORT ftxui-targets
+  ARCHIVE DESTINATION "${CMAKE_INSTALL_LIBDIR}"
+  LIBRARY DESTINATION "${CMAKE_INSTALL_LIBDIR}"
+  RUNTIME DESTINATION "${CMAKE_INSTALL_BINDIR}"
   )
 
 install(

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,83 @@
+if (NOT FTXUI_BUILD_MODULES)
+  return()
+endif()
+
+add_library(ftxui-modules)
+
+target_sources(ftxui-modules
+  PUBLIC FILE_SET CXX_MODULES FILES
+  src/ftxui/ftxui.cppm
+  src/ftxui/component.cppm
+  src/ftxui/component/animation.cppm
+  src/ftxui/component/captured_mouse.cppm
+  src/ftxui/component/component.cppm
+  src/ftxui/component/component_base.cppm
+  src/ftxui/component/component_options.cppm
+  src/ftxui/component/event.cppm
+  src/ftxui/component/loop.cppm
+  src/ftxui/component/mouse.cppm
+  src/ftxui/component/receiver.cppm
+  src/ftxui/component/screen_interactive.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/flexbox_config.cppm
+  src/ftxui/dom/linear_gradient.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/color_info.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)
+# TODO: Explain why this is needed.
+if (CMAKE_COMPILER_IS_GNUCXX)
+  target_compile_options(ftxui-modules 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

@@ -101,6 +101,5 @@ endfunction()
 
 if (EMSCRIPTEN)
   string(APPEND CMAKE_CXX_FLAGS " -s USE_PTHREADS")
-  string(APPEND CMAKE_EXE_LINKER_FLAGS " -s ASYNCIFY")
   string(APPEND CMAKE_EXE_LINKER_FLAGS " -s PROXY_TO_PTHREAD")
 endif()

cmake/ftxui_test.cmake

@@ -19,11 +19,10 @@ add_executable(ftxui-tests
   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
   src/ftxui/component/slider_test.cpp
+  src/ftxui/component/task_test.cpp
   src/ftxui/component/terminal_input_parser_test.cpp
   src/ftxui/component/toggle_test.cpp
   src/ftxui/dom/blink_test.cpp
@@ -51,6 +50,7 @@ add_executable(ftxui-tests
   src/ftxui/dom/vbox_test.cpp
   src/ftxui/screen/color_test.cpp
   src/ftxui/screen/string_test.cpp
+  src/ftxui/util/ref_test.cpp
 )
 
 target_link_libraries(ftxui-tests

doc/CMakeLists.txt

@@ -35,16 +35,26 @@ foreach(example IN LISTS EXAMPLES)
 endforeach()
 
 macro(write_example_list file title page examples)
-  file(APPEND "${file}" "@page ${page} ${title}\n")
+  file(WRITE "${file}" "@page ${page} ${title}\n")
   file(APPEND "${file}" "@tableofcontents\n")
 
   foreach(example IN LISTS ${examples})
     get_filename_component(name "${example}" NAME_WE)
     file(APPEND "${file}" "# ${name}\n")
+
+    # Add a markdown  to the demo. URL example:
+    # https://arthursonzogni.github.io/FTXUI/examples/?file=component/canvas_animated
+    file(APPEND "${file}" "[Demo](https://arthursonzogni.github.io/FTXUI/examples/?file=${example})\n")
+
     file(APPEND "${file}" "@include examples/${example}.cpp\n")
-    file(APPEND "${file}" "@example examples/${example}.cpp\n")
+    file(APPEND "${file}" "\n")
   endforeach()
 
+  # Reference to the examples
+  foreach(example IN LISTS ${examples})
+    get_filename_component(name "${example}" NAME_WE)
+    file(APPEND "${file}" "@example examples/${example}.cpp\n")
+  endforeach()
 endmacro()
 
 write_example_list("${CMAKE_CURRENT_BINARY_DIR}/dom_examples.md"

doc/Doxyfile.in

@@ -157,7 +157,7 @@ ABBREVIATE_BRIEF       = "The $name class" \
 # description.
 # The default value is: NO.
 
-ALWAYS_DETAILED_SEC    = NO
+ALWAYS_DETAILED_SEC    = YES
 
 # If the INLINE_INHERITED_MEMB tag is set to YES, doxygen will show all
 # inherited members of a class in the documentation of that class as if those
@@ -285,6 +285,8 @@ TAB_SIZE               = 2
 # @} or use a double escape (\\{ and \\})
 
 ALIASES                =
+ALIASES += iframe{1}="<div class=\"iframe-wrapper\"><iframe src='\1' width='100%' height='400' frameborder='0' allowfullscreen></iframe></div>"
+
 
 # Set the OPTIMIZE_OUTPUT_FOR_C tag to YES if your project consists of C sources
 # only. Doxygen will then generate output that is more tailored for C. For
@@ -292,7 +294,7 @@ ALIASES                =
 # members will be omitted, etc.
 # The default value is: NO.
 
-OPTIMIZE_OUTPUT_FOR_C  = YES
+OPTIMIZE_OUTPUT_FOR_C  = NO
 
 # Set the OPTIMIZE_OUTPUT_JAVA tag to YES if your project consists of Java or
 # Python sources only. Doxygen will then generate output that is more tailored
@@ -343,7 +345,8 @@ OPTIMIZE_OUTPUT_SLICE  = NO
 #
 # Note see also the list of default file extension mappings.
 
-EXTENSION_MAPPING      = md=Markdown
+EXTENSION_MAPPING      = 
+
 
 # If the MARKDOWN_SUPPORT tag is enabled then doxygen pre-processes all comments
 # according to the Markdown format, which allows for more readable
@@ -362,7 +365,7 @@ MARKDOWN_SUPPORT       = YES
 # Minimum value: 0, maximum value: 99, default value: 5.
 # This tag requires that the tag MARKDOWN_SUPPORT is set to YES.
 
-TOC_INCLUDE_HEADINGS   = 3
+TOC_INCLUDE_HEADINGS   = 5
 
 # The MARKDOWN_ID_STYLE tag can be used to specify the algorithm used to
 # generate identifiers for the Markdown headings. Note: Every identifier is
@@ -373,7 +376,7 @@ TOC_INCLUDE_HEADINGS   = 3
 # The default value is: DOXYGEN.
 # This tag requires that the tag MARKDOWN_SUPPORT is set to YES.
 
-MARKDOWN_ID_STYLE      = DOXYGEN
+MARKDOWN_ID_STYLE      = GITHUB
 
 # When enabled doxygen tries to link words that correspond to documented
 # classes, or namespaces to their corresponding documentation. Such a link can
@@ -397,7 +400,7 @@ BUILTIN_STL_SUPPORT    = YES
 # enable parsing support.
 # The default value is: NO.
 
-CPP_CLI_SUPPORT        = YES
+CPP_CLI_SUPPORT        = NO
 
 # Set the SIP_SUPPORT tag to YES if your project consists of sip (see:
 # https://www.riverbankcomputing.com/software/sip/intro) sources only. Doxygen
@@ -415,7 +418,7 @@ SIP_SUPPORT            = NO
 # should set this option to NO.
 # The default value is: YES.
 
-IDL_PROPERTY_SUPPORT   = YES
+IDL_PROPERTY_SUPPORT   = NO
 
 # If member grouping is used in the documentation and the DISTRIBUTE_GROUP_DOC
 # tag is set to YES then doxygen will reuse the documentation of the first
@@ -471,7 +474,7 @@ INLINE_SIMPLE_STRUCTS  = NO
 # types are typedef'ed and only the typedef is referenced, never the tag name.
 # The default value is: NO.
 
-TYPEDEF_HIDES_STRUCT   = NO
+TYPEDEF_HIDES_STRUCT   = YES
 
 # The size of the symbol lookup cache can be set using LOOKUP_CACHE_SIZE. This
 # cache is used to resolve symbols given their name and scope. Since this can be
@@ -497,7 +500,7 @@ LOOKUP_CACHE_SIZE      = 0
 # DOT_NUM_THREADS setting.
 # Minimum value: 0, maximum value: 32, default value: 1.
 
-NUM_PROC_THREADS       = 1
+NUM_PROC_THREADS       = 4
 
 # If the TIMESTAMP tag is set different from NO then each generated page will
 # contain the date or date and time when the page was generated. Setting this to
@@ -816,7 +819,7 @@ FILE_VERSION_FILTER    =
 # DoxygenLayout.xml, doxygen will parse it automatically even if the LAYOUT_FILE
 # tag is left empty.
 
-LAYOUT_FILE            = @CMAKE_CURRENT_SOURCE_DIR@/doxygen_layout.xml
+LAYOUT_FILE            = @CMAKE_CURRENT_SOURCE_DIR@/DoxygenLayout.xml
 
 # The CITE_BIB_FILES tag can be used to specify one or more bib files containing
 # the reference definitions. This must be a list of .bib files. The .bib
@@ -949,11 +952,13 @@ INPUT                  = \
                          @CMAKE_CURRENT_SOURCE_DIR@/getting-started.md \
                          @CMAKE_CURRENT_SOURCE_DIR@/installation.md \
                          @CMAKE_CURRENT_SOURCE_DIR@/module.md \
+                         @CMAKE_CURRENT_SOURCE_DIR@/module-screen.md \
+                         @CMAKE_CURRENT_SOURCE_DIR@/module-dom.md \
+                         @CMAKE_CURRENT_SOURCE_DIR@/module-component.md \
                          @CMAKE_CURRENT_SOURCE_DIR@ \
                          @CMAKE_SOURCE_DIR@/include \
                          @CMAKE_SOURCE_DIR@/src \
                          @CMAKE_CURRENT_BINARY_DIR@ \
-                         @CMAKE_SOURCE_DIR@/CHANGELOG.md \
                          @CMAKE_SOURCE_DIR@/examples \
 
 # This tag can be used to specify the character encoding of the source files
@@ -996,48 +1001,12 @@ INPUT_FILE_ENCODING    =
 
 FILE_PATTERNS          = *.c \
                          *.cc \
-                         *.cxx \
                          *.cpp \
-                         *.c++ \
-                         *.java \
-                         *.ii \
-                         *.ixx \
                          *.ipp \
-                         *.i++ \
-                         *.inl \
-                         *.idl \
-                         *.ddl \
-                         *.odl \
                          *.h \
-                         *.hh \
-                         *.hxx \
                          *.hpp \
-                         *.h++ \
-                         *.cs \
-                         *.d \
-                         *.php \
-                         *.php4 \
-                         *.php5 \
-                         *.phtml \
-                         *.inc \
-                         *.m \
-                         *.markdown \
                          *.md \
-                         *.mm \
-                         *.dox \
-                         *.py \
-                         *.pyw \
-                         *.f90 \
-                         *.f95 \
-                         *.f03 \
-                         *.f08 \
-                         *.f \
-                         *.for \
-                         *.tcl \
-                         *.vhd \
-                         *.vhdl \
-                         *.ucf \
-                         *.qsf
+                         *.cppm \
 
 # The RECURSIVE tag can be used to specify whether or not subdirectories should
 # be searched for input files as well.
@@ -1166,7 +1135,7 @@ FILTER_SOURCE_PATTERNS =
 # (index.html). This can be useful if you have a project on for instance GitHub
 # and want to reuse the introduction page also for the doxygen output.
 
-USE_MDFILE_AS_MAINPAGE = introduction.md
+USE_MDFILE_AS_MAINPAGE = @CMAKE_CURRENT_SOURCE_DIR@/introduction.md
 
 # The Fortran standard specifies that for fixed formatted Fortran code all
 # characters from position 72 are to be considered as comment. A common
@@ -1272,7 +1241,7 @@ VERBATIM_HEADERS       = YES
 # classes, structs, unions or interfaces.
 # The default value is: YES.
 
-ALPHABETICAL_INDEX     = YES
+ALPHABETICAL_INDEX     = NO
 
 # The IGNORE_PREFIX tag can be used to specify a prefix (or a list of prefixes)
 # that should be ignored while generating the index headers. The IGNORE_PREFIX
@@ -1725,7 +1694,7 @@ FULL_SIDEBAR           = YES
 # Minimum value: 0, maximum value: 20, default value: 4.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-ENUM_VALUES_PER_LINE   = 4
+ENUM_VALUES_PER_LINE   = 1
 
 # If the treeview is enabled (see GENERATE_TREEVIEW) then this tag can be used
 # to set the initial width (in pixels) of the frame in which the tree is shown.
@@ -2227,7 +2196,7 @@ MAN_LINKS              = NO
 # captures the structure of the code including all documentation.
 # The default value is: NO.
 
-GENERATE_XML           = YES
+GENERATE_XML           = NO
 
 # The XML_OUTPUT tag is used to specify where the XML pages will be put. If a
 # relative path is entered the value of OUTPUT_DIRECTORY will be put in front of
@@ -2560,7 +2529,7 @@ CLASS_GRAPH            = YES
 # The default value is: YES.
 # This tag requires that the tag HAVE_DOT is set to YES.
 
-COLLABORATION_GRAPH    = YES
+COLLABORATION_GRAPH    = NO
 
 # If the GROUP_GRAPHS tag is set to YES then doxygen will generate a graph for
 # groups, showing the direct groups dependencies. Explicit enabling a group
@@ -2645,7 +2614,7 @@ INCLUDE_GRAPH          = NO
 # The default value is: YES.
 # This tag requires that the tag HAVE_DOT is set to YES.
 
-INCLUDED_BY_GRAPH      = YES
+INCLUDED_BY_GRAPH      = NO
 
 # If the CALL_GRAPH tag is set to YES then doxygen will generate a call
 # dependency graph for every global function or class method.

doc/DoxygenLayout.xml

@@ -0,0 +1,271 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<doxygenlayout version="1.0">
+  <!-- Generated by doxygen 1.12.0 -->
+  <!-- Navigation index tabs for HTML output -->
+  <navindex>
+    <tab type="mainpage" visible="no" title=""/>
+    <tab type="pages" visible="yes" title="Pages" intro=""/>
+    <tab type="topics" visible="yes" title="Reference" intro=""/>
+    <tab type="modules" visible="yes" title="" intro="">
+      <tab type="modulelist" visible="yes" title="" intro=""/>
+      <tab type="modulemembers" visible="yes" title="" intro=""/>
+    </tab>
+    <tab type="namespaces" visible="yes" title="">
+      <tab type="namespacelist" visible="yes" title="" intro=""/>
+      <tab type="namespacemembers" visible="yes" title="" intro=""/>
+    </tab>
+    <tab type="concepts" visible="yes" title="">
+    </tab>
+    <tab type="interfaces" visible="yes" title="">
+      <tab type="interfacelist" visible="yes" title="" intro=""/>
+      <tab type="interfaceindex" visible="$ALPHABETICAL_INDEX" title=""/>
+      <tab type="interfacehierarchy" visible="yes" title="" intro=""/>
+    </tab>
+    <tab type="classes" visible="yes" title="">
+      <tab type="classlist" visible="yes" title="" intro=""/>
+      <tab type="classindex" visible="$ALPHABETICAL_INDEX" title=""/>
+      <tab type="hierarchy" visible="yes" title="" intro=""/>
+      <tab type="classmembers" visible="yes" title="" intro=""/>
+    </tab>
+    <tab type="structs" visible="yes" title="">
+      <tab type="structlist" visible="yes" title="" intro=""/>
+      <tab type="structindex" visible="$ALPHABETICAL_INDEX" title=""/>
+    </tab>
+    <tab type="exceptions" visible="yes" title="">
+      <tab type="exceptionlist" visible="yes" title="" intro=""/>
+      <tab type="exceptionindex" visible="$ALPHABETICAL_INDEX" title=""/>
+      <tab type="exceptionhierarchy" visible="yes" title="" intro=""/>
+    </tab>
+
+    <tab type="files" visible="yes" title="">
+      <tab type="filelist" visible="yes" title="" intro=""/>
+      <tab type="globals" visible="yes" title="" intro=""/>
+    </tab>
+
+    <tab type="examples" visible="yes" title="" intro=""/>
+  </navindex>
+
+  <!-- Layout definition for a class page -->
+  <class>
+    <briefdescription visible="yes"/>
+    <includes visible="$SHOW_HEADERFILE"/>
+    <inheritancegraph visible="yes"/>
+    <collaborationgraph visible="yes"/>
+    <memberdecl>
+      <nestedclasses visible="yes" title=""/>
+      <publictypes title=""/>
+      <services title=""/>
+      <interfaces title=""/>
+      <publicslots title=""/>
+      <signals title=""/>
+      <publicmethods title=""/>
+      <publicstaticmethods title=""/>
+      <publicattributes title=""/>
+      <publicstaticattributes title=""/>
+      <protectedtypes title=""/>
+      <protectedslots title=""/>
+      <protectedmethods title=""/>
+      <protectedstaticmethods title=""/>
+      <protectedattributes title=""/>
+      <protectedstaticattributes title=""/>
+      <packagetypes title=""/>
+      <packagemethods title=""/>
+      <packagestaticmethods title=""/>
+      <packageattributes title=""/>
+      <packagestaticattributes title=""/>
+      <properties title=""/>
+      <events title=""/>
+      <privatetypes title=""/>
+      <privateslots title=""/>
+      <privatemethods title=""/>
+      <privatestaticmethods title=""/>
+      <privateattributes title=""/>
+      <privatestaticattributes title=""/>
+      <friends title=""/>
+      <related title="" subtitle=""/>
+      <membergroups visible="yes"/>
+    </memberdecl>
+    <detaileddescription title=""/>
+    <memberdef>
+      <inlineclasses title=""/>
+      <typedefs title=""/>
+      <enums title=""/>
+      <services title=""/>
+      <interfaces title=""/>
+      <constructors title=""/>
+      <functions title=""/>
+      <related title=""/>
+      <variables title=""/>
+      <properties title=""/>
+      <events title=""/>
+    </memberdef>
+    <allmemberslink visible="yes"/>
+    <usedfiles visible="$SHOW_USED_FILES"/>
+    <authorsection visible="yes"/>
+  </class>
+
+  <!-- Layout definition for a namespace page -->
+  <namespace>
+    <briefdescription visible="yes"/>
+    <memberdecl>
+      <nestednamespaces visible="yes" title=""/>
+      <constantgroups visible="yes" title=""/>
+      <interfaces visible="yes" title=""/>
+      <classes visible="yes" title=""/>
+      <concepts visible="yes" title=""/>
+      <structs visible="yes" title=""/>
+      <exceptions visible="yes" title=""/>
+      <typedefs title=""/>
+      <sequences title=""/>
+      <dictionaries title=""/>
+      <enums title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <properties title=""/>
+      <membergroups visible="yes"/>
+    </memberdecl>
+    <detaileddescription title=""/>
+    <memberdef>
+      <inlineclasses title=""/>
+      <typedefs title=""/>
+      <sequences title=""/>
+      <dictionaries title=""/>
+      <enums title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <properties title=""/>
+    </memberdef>
+    <authorsection visible="yes"/>
+  </namespace>
+
+  <!-- Layout definition for a concept page -->
+  <concept>
+    <briefdescription visible="yes"/>
+    <includes visible="$SHOW_HEADERFILE"/>
+    <definition visible="yes" title=""/>
+    <detaileddescription title=""/>
+    <authorsection visible="yes"/>
+  </concept>
+
+  <!-- Layout definition for a file page -->
+  <file>
+    <briefdescription visible="yes"/>
+    <includes visible="$SHOW_INCLUDE_FILES"/>
+    <includegraph visible="yes"/>
+    <includedbygraph visible="yes"/>
+    <sourcelink visible="yes"/>
+    <memberdecl>
+      <interfaces visible="yes" title=""/>
+      <classes visible="yes" title=""/>
+      <structs visible="yes" title=""/>
+      <exceptions visible="yes" title=""/>
+      <namespaces visible="yes" title=""/>
+      <concepts visible="yes" title=""/>
+      <constantgroups visible="yes" title=""/>
+      <defines title=""/>
+      <typedefs title=""/>
+      <sequences title=""/>
+      <dictionaries title=""/>
+      <enums title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <properties title=""/>
+      <membergroups visible="yes"/>
+    </memberdecl>
+    <detaileddescription title=""/>
+    <memberdef>
+      <inlineclasses title=""/>
+      <defines title=""/>
+      <typedefs title=""/>
+      <sequences title=""/>
+      <dictionaries title=""/>
+      <enums title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <properties title=""/>
+    </memberdef>
+    <authorsection/>
+  </file>
+
+  <!-- Layout definition for a group page -->
+  <group>
+    <briefdescription visible="no"/>
+    <authorsection visible="no"/>
+    <detaileddescription title=""/>
+    <groupgraph visible="yes"/>
+    <memberdecl>
+      <nestedgroups visible="yes" title=""/>
+      <modules visible="yes" title=""/>
+      <dirs visible="yes" title=""/>
+      <files visible="yes" title=""/>
+      <namespaces visible="yes" title=""/>
+      <concepts visible="yes" title=""/>
+      <classes visible="yes" title=""/>
+      <defines title=""/>
+      <typedefs title=""/>
+      <sequences title=""/>
+      <dictionaries title=""/>
+      <enums title=""/>
+      <enumvalues title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <signals title=""/>
+      <publicslots title=""/>
+      <protectedslots title=""/>
+      <privateslots title=""/>
+      <events title=""/>
+      <properties title=""/>
+      <friends title=""/>
+      <membergroups visible="yes"/>
+    </memberdecl>
+    <memberdef>
+      <pagedocs/>
+      <inlineclasses title=""/>
+      <defines title=""/>
+      <typedefs title=""/>
+      <sequences title=""/>
+      <dictionaries title=""/>
+      <enums title=""/>
+      <enumvalues title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <signals title=""/>
+      <publicslots title=""/>
+      <protectedslots title=""/>
+      <privateslots title=""/>
+      <events title=""/>
+      <properties title=""/>
+      <friends title=""/>
+    </memberdef>
+  </group>
+
+  <!-- Layout definition for a C++20 module page -->
+  <module>
+    <briefdescription visible="yes"/>
+    <exportedmodules visible="yes"/>
+    <memberdecl>
+      <concepts visible="yes" title=""/>
+      <classes visible="yes" title=""/>
+      <enums title=""/>
+      <typedefs title=""/>
+      <functions title=""/>
+      <variables title=""/>
+      <membergroups title=""/>
+    </memberdecl>
+    <detaileddescription title=""/>
+    <memberdecl>
+      <files visible="yes"/>
+    </memberdecl>
+  </module>
+
+  <!-- Layout definition for a directory page -->
+  <directory>
+    <briefdescription visible="yes"/>
+    <directorygraph visible="yes"/>
+    <memberdecl>
+      <dirs visible="yes"/>
+      <files visible="yes"/>
+    </memberdecl>
+    <detaileddescription title=""/>
+  </directory>
+</doxygenlayout>

doc/cpp20-modules.md

@@ -0,0 +1,107 @@
+@page cpp20-modules C++20 Modules
+
+
+> [!WARNING]
+> This feature is still in development, and the API may change in future releases.
+> Your contribution is needed to help us improve the compatibility and usability
+> of C++20 modules in FTXUI. If you encounter any issues or have suggestions,
+> please open an issue.
+
+FTXUI experimentally supports
+[C++20 modules](https://en.cppreference.com/w/cpp/language/modules) to reduce
+compilation times and improve code organization. Each header has a
+corresponding module.
+
+Use the FTXUI_BUILD_MODULES option to build the FTXUI project itself to provide C++ 20 modules,
+for example with CMake and Ninja:
+
+```sh
+cmake \
+    -DCMAKE_GENERATOR=Ninja \
+    -DFTXUI_BUILD_MODULES=ON \
+    ..
+
+ninja
+```
+
+> [!NOTE]
+> To use modules, you need a C++20 compatible compiler, CMake version 3.20 or
+> higher, and use a compatible generator like Ninja. Note that Makefile
+> generators **do not support modules**.
+
+Then, in your own code you can consume the modules and code as normal:
+
+```cpp
+import ftxui;
+
+int main() {
+  auto screen = ftxui::ScreenInteractive::TerminalOutput();
+  auto button = ftxui::Button("Click me", screen.QuitClosure());
+  screen.Loop(button);
+  return 0;
+}
+```
+
+Note, the `ftxui` convenience module which simply pulls together all the modules:
+
+```cpp
+export import ftxui.component;
+export import ftxui.dom;
+export import ftxui.screen;
+export import ftxui.util;
+```
+You can instead import only the module(s) you need if desired.
+
+To properly find and link the modules with CMake, use `target_link_libraries` to get the right
+compiler, linker, etc. flags.
+
+```cmake
+target_link_libraries(my_executable
+    #...whatever...
+    PRIVATE ftxui::modules
+)
+```
+
+### Module list
+
+The modules directly reference the corresponding header, or a group of related
+headers to provide a more convenient interface. The following modules
+are available:
+
+- `ftxui`
+    - `ftxui.component`
+      - `ftxui.component.Animation`
+      - `ftxui.component.CapturedMouse`
+      - `ftxui.component.Component`
+      - `ftxui.component.ComponentBase`
+      - `ftxui.component.ComponentOptions`
+      - `ftxui.component.Event`
+      - `ftxui.component.Loop`
+      - `ftxui.component.Mouse`
+      - `ftxui.component.Receiver`
+      - `ftxui.component.ScreenInteractive`
+      - `ftxui.component.Task`
+- `ftxui.dom`
+    - `ftxui.dom.Canvas`
+    - `ftxui.dom.Deprecated`
+    - `ftxui.dom.Direction`
+    - `ftxui.dom.Elements`
+    - `ftxui.dom.FlexboxConfig`
+    - `ftxui.dom.LinearGradient`
+    - `ftxui.dom.Node`
+    - `ftxui.dom.Requirement`
+    - `ftxui.dom.Selection`
+    - `ftxui.dom.Table`
+- `ftxui.screen`
+    - `ftxui.screen.Box`
+    - `ftxui.screen.Color`
+    - `ftxui.screen.ColorInfo`
+    - `ftxui.screen.Deprecated`
+    - `ftxui.screen.Image`
+    - `ftxui.screen.Pixel`
+    - `ftxui.screen.Screen`
+    - `ftxui.screen.String`
+    - `ftxui.screen.Terminal`
+- `ftxui.util`
+    - `ftxui.util.AutoReset`
+    - `ftxui.util.Ref`

doc/getting-started.md

@@ -1,6 +1,8 @@
 @page getting-started Getting Started
 @tableofcontents
 
+![title-img](https://nsm09.casimages.com/img/2025/05/30//2505300816063242518595256.jpg)
+
 # Install FTXUI
 
 To set up FTXUI in your project, follow the [installation guide](installation.html), which provides instructions for multiple build systems and package managers.

doc/header.html

@@ -20,12 +20,111 @@
 <script type="text/javascript" src="$relpath^doxygen-awesome-paragraph-link.js"></script>
 <script type="text/javascript" src="$relpath^doxygen-awesome-interactive-toc.js"></script>
 <script type="text/javascript" src="$relpath^doxygen-awesome-tabs.js"></script>
-<script type="text/javascript">
+<script type="module">
     DoxygenAwesomeFragmentCopyButton.init()
     DoxygenAwesomeParagraphLink.init()
     DoxygenAwesomeInteractiveToc.init()
     DoxygenAwesomeTabs.init()
+
+    await new Promise(r => window.addEventListener('DOMContentLoaded', r));
+
+    // Remove title when a img[alt='title-img'] is present.
+    // Find an image with the alt "img-title".
+    const img = document.querySelector("img[alt='title-img']");
+    const header = document.querySelector(".headertitle");
+
+    if (img && header) {
+      // Hide the header title progressively.
+      header.style.display = "none";
+
+      // Show progressively the image.
+      img.style.maxHeight = "40vh";
+      img.style.maxWidth = "100%";
+      img.style.objectFit = "contain";
+    }
+
+    // In the "examples.html" page. Turn every link with text
+    // "examples/<...>
+    //
+    // Add a "demo" link toward.
+    // https://arthursonzogni.github.io/FTXUI/examples/?file=<...>
+    const examples = document.querySelectorAll("a")
+    examples.forEach((example) => {
+      if (!example.textContent.startsWith("examples/")) {
+        return;
+      }
+
+      // Remove the ".cpp" extension from the example name.
+      const exampleName = example.textContent.replace("examples/", "").replace(".cpp", "");
+
+      const a = document.createElement("a");
+      a.textContent = "[demo]";
+      a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + exampleName;
+      a.style.marginRight= "1em";
+      a.style.fontWeight = "bold";
+
+      example.parentElement.insertBefore(a, example)
+    });
+
+    // If the current URL ends with -example.html, we can add a link to the demo
+    // as well using the div.title textContent.
+    const url = new URL(window.location.href);
+    if (url.pathname.endsWith("-example.html")) {
+      // Get the title text.
+      const title = document.querySelector("div.title").textContent;
+      const example = title.replace("examples/", "").replace(".cpp", "");
+
+      // Create a link to the demo.
+      const a = document.createElement("a");
+      a.textContent = "[demo]";
+      a.href = "https://arthursonzogni.github.io/FTXUI/examples/?file=" + example;
+      a.style.marginLeft = "1em";
+      a.style.fontWeight = "bold";
+      a.style.display = "inline-block";
+
+      // Insert the link after the title.
+      const titleDiv = document.querySelector("div.title");
+      if (titleDiv) {
+        titleDiv.insertBefore(a, titleDiv.nextSibling);
+      }
+
+    }
+
 </script>
+<script type="module">
+  // Click on the navtree, except for the main page where this is already done
+  // automatically.
+  let delay = 0;
+  while(true) {
+    const navtree = document.querySelector("div.item.selected");
+    if (!navtree) {
+      delay *= 2;
+      delay += 1;
+      await new Promise(resolve => setTimeout(resolve, delay));
+      continue;
+    }
+
+    // Include only selected navtree items.
+    console.log("navtree.textContent", navtree.textContent);
+    if (!navtree.textContent.includes("Getting Started") &&
+        !navtree.textContent.includes("Installation") &&
+        !navtree.textContent.includes("ftxui / screen") &&
+        !navtree.textContent.includes("ftxui / dom") &&
+        !navtree.textContent.includes("ftxui / component") &&
+        !navtree.textContent.includes("Reference")) {
+      break;
+    }
+
+    // Find the first link inside the navtree.
+    const link = navtree.querySelector("a");
+    if (link) {
+      // Simulate a click on the link.
+      link.click();
+      break;
+    }
+  }
+</script>
+
 $treeview
 $search
 $mathjax

doc/installation.md

@@ -1,6 +1,9 @@
+
 @page installation Installation
 @tableofcontents
 
+![title-img](https://nsm09.casimages.com/img/2025/05/30//2505300816063242518595255.jpg)
+
 ## Overview
 
 FTXUI can be integrated into your project using several build systems and package managers.  
@@ -13,6 +16,11 @@ This page serves as an entry point for the available integration methods.
 - @subpage installation_vcpkg
 - @subpage installation_conan
 - @subpage installation_manual
+- @subpage installation_nix
+- @subpage installation_debian
+- @subpage installation_arch
+- @subpage installation_opensuse
+- @subpage installation_xmake
 
 ## Next Steps
 

doc/installation_arch.md

@@ -0,0 +1,34 @@
+@page installation_arch Arch Linux
+
+FTXUI is packaged on the AUR. Install using an AUR helper:
+
+```bash
+yay -S ftxui
+```
+
+You can also manually download the PKGBUILD from <https://aur.archlinux.org/packages/ftxui>.
+
+Once installed, you can use it in your CMake projects by adding the following to your `CMakeLists.txt`:
+
+```cmake
+find_package(ftxui REQUIRED)
+add_executable(main main.cpp)
+target_link_libraries(main
+  PRIVATE ftxui::screen
+  PRIVATE ftxui::dom
+  PRIVATE ftxui::component
+)
+```
+
+> [!note]
+> This is an unofficial package. That means it is not maintained by the FTXUI
+> team, but by the community. The package maintainers seems to actively update
+> the package to the latest version. Thanks to the maintainers for their work!
+
+<div class="section_buttons">
+
+| Previous          |
+|:------------------|
+| [Getting Started](getting-started.html) |
+
+</div>

doc/installation_cmake.md

@@ -10,7 +10,7 @@ This page explains how to depend on FTXUI using [CMake](https://cmake.org).
 
 This approach downloads FTXUI at configure time and doesn't require a system-wide install.
 
-```fortran 
+```cmake 
 include(FetchContent)
 
 FetchContent_Declare(ftxui
@@ -34,8 +34,8 @@ This ensures reproducible builds and easy dependency management.
 
 If FTXUI is installed system-wide or via a package manager (e.g. vcpkg or Conan), you can use:
 
-```fortran 
-fortranind_package(ftxui REQUIRED)
+```cmake 
+find_package(ftxui REQUIRED)
 
 add_executable(main main.cpp)
 target_link_libraries(main
@@ -51,7 +51,7 @@ Make sure the package is visible in your `CMAKE_PREFIX_PATH`.
 
 You can also add FTXUI as a [Git submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), keeping it as part of your repository:
 
-```fortran
+```cmake
 git submodule add https://github.com/ArthurSonzogni/FTXUI external/ftxui
 git submodule update --init --recursive
 ```
@@ -66,7 +66,7 @@ git submodule update --init --recursive
 
 Then in your `CMakeLists.txt`:
 
-```fortran
+```cmake
 add_subdirectory(external/ftxui)
 
 add_executable(main main.cpp)

doc/installation_conan.md

@@ -1,20 +1,104 @@
 @page installation_conan Conan
 @tableofcontents
 
-## Conan Package
+FTXUI can be easily obtained and integrated into your project using the Conan package manager.
 
-Unofficial support for FTXUI exists on Conan Center:
+## Prerequisites
 
-- https://conan.io/center/recipes/ftxui
+First, ensure that Conan is installed on your system. If not, you can install it via pip:
 
-## TODO
+```powershell
+pip install conan
+```
+Conan often works in tandem with CMake, so you will need to have CMake installed as well. Once you have confirmed both Conan and CMake are installed, create a project directory, for example, `ftxui-demo`:
 
-This page is incomplete. If you use FTXUI with Conan and can provide a minimal working setup, feel free to contribute.
+```powershell
+mkdir C:\ftxui-demo
+cd C:\ftxui-demo
+```
+
+## Configuration
+
+After ensuring your environment is set up correctly, create a Conan configuration file `conanfile.txt`. This file is used to declare your project's dependencies. The community-maintained package for FTXUI can be found on [Conan Center](https://conan.io/center/recipes/ftxui).
+
+> [!note]
+> This is an unofficial build script. This means it is not maintained by the FTXUI
+> team but by the community. The package maintainer appears to actively update it
+> to the latest releases. Many thanks to the maintainer for their work!
+
+@todo If you are familiar with the process, please consider adding an "official" build script to Conan Center.
+This could be a GitHub Action that automatically updates Conan Center upon new releases.
+
+```ini
+[requires]
+ftxui/6.0.2
+
+[generators]
+CMakeDeps
+CMakeToolchain
+
+[layout]
+cmake_layout
+```
+
+## Install Dependencies and Build
+
+Once configured, run the following command to install FTXUI and its dependencies:
+
+```powershell
+conan install . --output-folder=build --build=missing
+```
+
+This will download and install `ftxui/6.0.2` along with all its dependencies from Conan's remote repositories.
+
+After the installation completes, you can test it by creating a `demo.cpp` file in your project directory:
+
+```cpp
+#include <ftxui/screen/screen.hpp>
+#include <ftxui/dom/elements.hpp>
+#include <iostream>
+
+int main() {
+    using namespace ftxui;
+    auto document = hbox({
+        text(" Hello "),
+        text("FTXUI ") | bold | color(Color::Red),
+        text(" world! ")
+    });
+    auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+    Render(screen, document);
+    std::cout << screen.ToString() << std::endl;
+    return 0;
+}
+```
+
+If the test is successful, you can then create a `CMakeLists.txt` file in the project directory:
+
+```cmake
+cmake_minimum_required(VERSION 3.20)
+project(ftxui-demo)
+
+# Set the C++ standard
+set(CMAKE_CXX_STANDARD 20)
+
+# Find the FTXUI package installed via Conan
+find_package(ftxui CONFIG REQUIRED)
+
+# Create the executable
+add_executable(demo demo.cpp)
+
+# Link the executable to the FTXUI library
+target_link_libraries(demo PRIVATE ftxui::component)
+```
+
+@todo 考虑到中国多数地区使用Conan很有可能遇到各种网络问题，我想做一个定制的版本说明，但是我对conan的了解有限再加上没有找到合适的资料，因此这个计划短暂的被搁置了，如果您知道方法，欢迎在[中文版本](xiaoditx.girhub.io/public/docs/ftxui%E4%B8%AD%E6%96%87%E7%BF%BB%E8%AF%91/installation/conan/)的下方留下评论以提醒我
+
+---
 
 <div class="section_buttons">
- 
+
 | Previous          |
 |:------------------|
 | [Getting Started](getting-started.html) |
- 
-</div>
+
+</div>

doc/installation_debian.md

@@ -0,0 +1,42 @@
+@page installation_debian Debian/Ubuntu
+
+## Debian and Ubuntu Packages (Unofficial)
+
+Pre-built packages are provided by the distributions. Install with:
+
+```bash
+sudo apt install libftxui-dev
+```
+
+The following packages are available:
+- `ftxui-doc`
+- `ftxui-examples`
+- `libftxui-component<version>`
+- `libftxui-dev`
+- `libftxui-dom<version>`
+- `libftxui-screen<version>`
+
+Once installed, you can use it in your CMake projects by adding the following to
+your `CMakeLists.txt`:
+
+```cmake
+find_package(ftxui REQUIRED)
+add_executable(main main.cpp)
+target_link_libraries(main
+  PRIVATE ftxui::screen
+  PRIVATE ftxui::dom
+  PRIVATE ftxui::component
+)
+```
+
+> [!note]
+> This is an **unofficial** package. That means it is not maintained by the FTXUI
+> team, but by the community. 
+
+<div class="section_buttons">
+
+| Previous          |
+|:------------------|
+| [Getting Started](getting-started.html) |
+
+</div>

doc/installation_manual.md

@@ -0,0 +1,35 @@
+@page installation_manual Manual
+@tableofcontents
+
+## Building from Source (Official)
+
+Clone and build the project using CMake:
+
+```bash
+git clone https://github.com/ArthurSonzogni/FTXUI.git
+cd FTXUI
+cmake -S . -B build -DFTXUI_ENABLE_INSTALL=ON -D
+cmake --build build -j
+sudo cmake --install build
+```
+
+Once installed you can use it in your CMake projects by adding the following to your `CMakeLists.txt`:
+
+```cmake
+find_package(ftxui REQUIRED)
+add_executable(main main.cpp)
+target_link_libraries(main
+  PRIVATE ftxui::screen
+  PRIVATE ftxui::dom
+  PRIVATE ftxui::component
+)
+```
+
+
+<div class="section_buttons">
+
+| Previous          |
+|:------------------|
+| [Getting Started](getting-started.html) |
+
+</div>

doc/installation_nix.md

@@ -0,0 +1,38 @@
+@page installation_nix Nix
+
+> [!note]
+> FTXUI author is not very knowledgeable about Nix. This page has been mostly
+> generated by AI. If you have any suggestions to improve it, please open a
+> PR.
+
+## Nix Flake
+
+FTXUI ships with a `flake.nix` providing both packages and a development shell.
+
+### Build the Library
+
+```bash
+nix build github:ArthurSonzogni/FTXUI
+```
+
+The resulting package is accessible via the `result` link.
+
+### Use as a Dependency
+
+Add FTXUI to your flake inputs:
+
+```nix
+{
+  inputs.ftxui.url = "github:ArthurSonzogni/FTXUI";
+}
+```
+
+Then reference `ftxui.packages.<system>.ftxui` in your outputs.
+
+<div class="section_buttons">
+
+| Previous          |
+|:------------------|
+| [Getting Started](getting-started.html) |
+
+</div>

doc/installation_opensuse.md

@@ -0,0 +1,32 @@
+@page installation_opensuse openSUSE
+
+## openSUSE Package (Unofficial)
+
+FTXUI seems to be available from the `devel:libraries:c_c++` repository.
+
+```bash
+sudo zypper addrepo https://download.opensuse.org/repositories/devel:libraries:c_c++/openSUSE_Leap_$releasever/devel:libraries:c_c++.repo
+sudo zypper install ftxui
+```
+
+See <https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui> for details.
+
+> [!note]
+> This is an **unofficial** package. That means it is not maintained by the FTXUI
+> team, but by the community. 
+
+--
+
+> [!note]
+> The FTXUI author is not very knowledgeable about openSUSE. This page has been
+> mostly generated by AI. If you have any suggestions to improve it, please open
+> a PR.
+
+
+<div class="section_buttons">
+
+| Previous          |
+|:------------------|
+| [Getting Started](getting-started.html) |
+
+</div>

doc/installation_vcpkg.md

@@ -1,15 +1,74 @@
 @page installation_vcpkg Vcpkg
 @tableofcontents
 
-## Vcpkg Package
+# Vcpkg Package
 
-FTXUI is available in the Vcpkg registry:
+FTXUI is available in the [Vcpkg registry](https://vcpkg.link/ports/ftxui)
+
+To use it, you can add the following to your `vcpkg.json`:
+
+```json
+{
+  "name": "your-project",
+  "version-string": "0.1.0",
+  "dependencies": [
+    {
+        "name": "ftxui",
+        "version>=": "6.1.9"
+    }
+  ]
+}
+```
+
+# Install FTXUI using Vcpkg
+```bash
+vcpkg install --triplet x64-linux  # or x64-windows / arm64-osx etc.
+```
+
+# Configure your build system.
+If you are using CMake, you can use the following in your `CMakeLists.txt`:
+
+**CMakeLists.txt**
+```cmake
+cmake_minimum_required(VERSION 3.15)
+project(my_project)
+
+# Make sure vcpkg toolchain file is passed at configure time
+find_package(ftxui CONFIG REQUIRED)
+
+add_executable(main main.cpp)
+target_link_libraries(main
+    PRIVATE ftxui::screen
+    PRIVATE ftxui::dom
+    PRIVATE ftxui::component
+)
+```
+
+**main.cpp**
+```cpp
+#include <ftxui/component/screen_interactive.hpp>
+#include <ftxui/component/component.hpp>
+#include <ftxui/component/component_options.hpp>
+
+int main() {
+  using namespace ftxui;
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  auto button = Button("Click me", [] { std::cout << "Clicked!\n"; });
+
+  screen.Loop(button);
+}
+```
+
+**Configure and build the project**
+```bash
+cmake -B build -S . -DCMAKE_TOOLCHAIN_FILE=/path/to/vcpkg/scripts/buildsystems/vcpkg.cmake
+cmake --build build
+./build/main
+```
 
-- https://vcpkg.link/ports/ftxui
 
-## TODO
 
-This page is incomplete. If you use FTXUI with Vcpkg, please help improve this page by contributing working configuration examples.
 
 <div class="section_buttons">
  

doc/installation_xmake.md

@@ -0,0 +1,40 @@
+@page installation_xmake XMake
+@tableofcontents
+
+## XMake Package (Unofficial)
+
+FTXUI is available in the [xmake-repo](https://github.com/xmake-io/xmake-repo/blob/dev/packages/f/ftxui/xmake.lua)
+
+Example `xmake.lua` snippet:
+
+```lua
+add_requires("ftxui", {system = false})
+
+target("demo")
+    set_kind("binary")
+    add_files("src/*.cpp")
+    add_packages("ftxui")
+```
+
+Refer to the [XMake documentation](https://xmake.io) for further options.
+
+> [!note]
+> This is an **unofficial** package. That means it is not maintained by the FTXUI
+> team, but by the community. 
+
+---
+
+> [!note]
+> The FTXUI author is not very knowledgeable about openSUSE. This page has been
+> mostly generated by AI. If you have any suggestions to improve it, please open
+> a PR.
+
+---
+
+<div class="section_buttons">
+
+| Previous          |
+|:------------------|
+| [Getting Started](getting-started.html) |
+
+</div>

doc/introduction.md

@@ -73,3 +73,16 @@ Expected output:
 | [Getting Started](getting-started.html) |
  
 </div>
+
+@defgroup screen ftxui/screen
+
+Please check the [tutorial](module-screen.html) of the `ftxui/screen` module.
+
+@defgroup dom ftxui/dom
+
+Please check the [tutorial](module-dom.html) of the `ftxui/dom` module.
+
+@defgroup component ftxui/component
+
+Please check the [tutorial](module-component.html) of the `ftxui/component`
+module.

doc/module-component.md

@@ -1,6 +1,8 @@
-@page module-component Module component
+@page module-component ftxui / component
 @tableofcontents
 
+![title-img](https://nsm09.casimages.com/img/2025/05/31//2505310207423242518595349.png)
+
 The `ftxui::component` module defines the logic that produces interactive
 components that respond to user events (keyboard, mouse, etc.).
 
@@ -12,7 +14,7 @@ A `ftxui::Component` is a shared pointer to a `ftxui::ComponentBase`. The latter
   - `ftxui::ComponentBase::Render()`: How to render the interface.
   - `ftxui::ComponentBase::OnEvent()`: How to react to events.
   - `ftxui::ComponentBase::Add()`: Construct a parent/child relationship
-    between two components. The tree of component is used to define how to
+    between two components. The tree of components is used to define how to
     navigate using the keyboard.
 
 `ftxui::Element` are used to render a single frame.
@@ -27,9 +29,9 @@ frame, and updating its state on events.
 All predefined components are available in
 ["ftxui/dom/component.hpp"](./component_8hpp.html)
 
-\include{strip ftxui/component/component.hpp
+\include ftxui/component/component.hpp
 
-## Input {#component-input}
+# Input {#component-input}
 
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html):
 
@@ -41,9 +43,9 @@ 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
+## Filtered input
 
-On can filter out the characters received by the input component, using
+One can filter out the characters received by the input component, using
 `ftxui::CatchEvent`.
 
 ```cpp
@@ -61,7 +63,7 @@ input |= CatchEvent([&](Event event) {
 });
 ```
 
-## Menu {#component-menu}
+# Menu {#component-menu}
 
 Defines a menu object. It contains a list of entries, one of them is selected.
 
@@ -76,7 +78,7 @@ Produced by: `ftxui::Menu()` from "ftxui/component/component.hpp"
 <script id="asciicast-223720" src="https://asciinema.org/a/223720.js" async></script>
 @endhtmlonly
 
-## Toggle {#component-toggle}
+# Toggle {#component-toggle}
 
 A special kind of menu. The entries are displayed horizontally.
 
@@ -90,7 +92,7 @@ Produced by: `ftxui::Toggle()` from "ftxui/component/component.hpp"
 <script id="asciicast-223722" src="https://asciinema.org/a/223722.js" async></script>
 @endhtmlonly
 
-## CheckBox {#component-checkbox}
+# CheckBox {#component-checkbox}
 
 This component defines a checkbox. It is a single entry that can be turned
 on/off.
@@ -105,7 +107,7 @@ Produced by: `ftxui::Checkbox()` from "ftxui/component/component.hpp"
 <script id="asciicast-223724" src="https://asciinema.org/a/223724.js" async></script>
 @endhtmlonly
 
-## RadioBox {#component-radiobox}
+# RadioBox {#component-radiobox}
 
 A radiobutton component. This is a list of entries, where one can be turned on.
 
@@ -119,10 +121,10 @@ Produced by: `ftxui::Radiobox()` from "ftxui/component/component.hpp"
 <script id="asciicast-223725" src="https://asciinema.org/a/223725.js" async></script>
 @endhtmlonly
 
-## Dropdown {#component-dropdown}
+# Dropdown {#component-dropdown}
 
-A drop down menu is a component that when checked display a list of element for
-the user to select one.
+A drop-down menu is a component that, when opened, displays a list of elements
+for the user to select from.
 
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html):
 
@@ -130,7 +132,7 @@ the user to select one.
 
 Produced by: `ftxui::Dropdown()` from "ftxui/component/component.hpp"
 
-## Slider {#component-slider}
+# Slider {#component-slider}
 
 Represents a slider object that consists of a range with binned intermediate
 intervals. It can be created by `ftxui::Slider()`.
@@ -141,7 +143,7 @@ intervals. It can be created by `ftxui::Slider()`.
 
 Produced by: `ftxui::Slider()` from "ftxui/component/component.hpp"
 
-## Renderer {#component-renderer}
+# Renderer {#component-renderer}
 
 Produced by: `ftxui::Renderer()` from \ref ftxui/component/component.hpp. This
 component decorate another one by using a different function to render an
@@ -170,7 +172,7 @@ auto component = [...]
 component = component | border | bold;
 ```
 
-## CatchEvent {#component-catchevent}
+# CatchEvent {#component-catchevent}
 
 Produced by: `ftxui::CatchEvent()` from \ref ftxui/component/component.hpp.
 This component decorate others, catching events before the underlying component.
@@ -200,17 +202,17 @@ component = component
   ;
 ```
 
-## Collapsible {#component-collapsible}
+# Collapsible {#component-collapsible}
 
-Useful for visual elements whose visibility can be toggle on/off by the user.
-Essentially, this the combination of the `ftxui::Checkbox()` and
+Useful for visual elements whose visibility can be toggled on or off by the
+user. Essentially, this is the combination of the `ftxui::Checkbox()` and
 `ftxui::Maybe()` components.
 
 ```cpp
-auto collabsible = Collapsible("Show more", inner_element);
+auto collapsible = Collapsible("Show more", inner_element);
 ```
 
-## Maybe {#component-maybe}
+# Maybe {#component-maybe}
 
 Produced by: `ftxui::Maybe()` from \ref ftxui/component/component.hpp.
 This component can be utilized to show/hide any other component via a boolean or
@@ -237,25 +239,25 @@ component = component
   ;
 ```
 
-## Container {#component-container}
+# Container {#component-container}
 
-### Horizontal {#component-horizontal}
+## Horizontal {#component-horizontal}
 
 Produced by: `ftxui::Container::Horizontal()` from
 "ftxui/component/component.hpp". It displays a list of components horizontally
-and handle keyboard/mouse navigation.
+and handles keyboard/mouse navigation.
 
-### Vertical {#component-vertical}
+## Vertical {#component-vertical}
 
 Produced by: `ftxui::Container::Vertical()` from
 "ftxui/component/component.hpp". It displays a list of components vertically 
 and handles keyboard/mouse navigation.
 
-### Tab {#component-tab}
+## Tab {#component-tab}
 
 Produced by: `ftxui::Container::Tab()` from
-"ftxui/component/component.hpp". It take a list of component and display only
-one of them. This is useful for implementing a tab bar.
+"ftxui/component/component.hpp". It takes a list of components and displays
+only one of them. This is useful for implementing a tab bar.
 
 [Vertical](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html):
   
@@ -266,7 +268,7 @@ one of them. This is useful for implementing a tab bar.
   ![ezgif com-gif-maker (2)](https://user-images.githubusercontent.com/4759106/147250217-fe447e0f-7a99-4e08-948a-995087d9b40e.gif)
 
 
-## ResizableSplit  {#component-resizable-split}
+# ResizableSplit  {#component-resizable-split}
 
 It defines a horizontal or vertical separation between two children components.
 The position of the split is variable and controllable using the mouse. 
@@ -285,7 +287,7 @@ from "ftxui/component/component.hpp"
 <script id="asciicast-tprMH2EdkUoMb7D2YxgMGgpzx" src="https://asciinema.org/a/tprMH2EdkUoMb7D2YxgMGgpzx.js" async></script>
 @endhtmlonly
 
-## Force a frame redraw. {#component-force-redraw}
+# Force a frame redraw. {#component-force-redraw}
 
 Typically, `ftxui::ScreenInteractive::Loop()` is responsible for drawing a new
 frame whenever a new group of events (e.g keyboard, mouse, window resize, etc.)

doc/module-dom.md

@@ -1,6 +1,8 @@
-@page module-dom Module dom
+@page module-dom ftxui / dom
 @tableofcontents
 
+![title-img](https://nsm09.casimages.com/img/2025/05/31//2505310207423242518595347.png)
+
 This module defines a hierarchical set of `ftxui::Element`. An element manages
 the layout and can be responsive to the terminal dimension changes. Note the
 following example where this module is used to create a simple layout with a
@@ -43,7 +45,7 @@ corresponding header file:
 
 \include{strip} "ftxui/dom/elements.hpp"
 
-## text ## {#dom-text}
+# text # {#dom-text}
 
 The most simple widget. It displays a text.
 ```cpp
@@ -53,7 +55,7 @@ text("I am a piece of text");
 I am a piece of text.
 ```
 
-## vtext {#dom-vtext}
+# vtext {#dom-vtext}
 
 Identical to `ftxui::text`, but displayed vertically.
 
@@ -71,7 +73,7 @@ L
 O
 ```
 
-## paragraph {#dom-paragraph}
+# paragraph {#dom-paragraph}
 
 Similar to `ftxui::text`, but the individual word are wrapped along multiple
 lines, depending on the width of its container.
@@ -95,7 +97,7 @@ namespace ftxui {
 ```
 
 
-## border {#dom-border}
+# border {#dom-border}
 
 Adds a border around an element.
 
@@ -134,7 +136,7 @@ namespace ftxui {
 ```
 
 
-## window ## {#dom-window}
+# window # {#dom-window}
 
 A `ftxui::window` is a `ftxui::border`, but with an additional header. To add a
 window around an element, wrap it and specify a string as the header.
@@ -150,7 +152,7 @@ Terminal output:
 └───────────┘
 ```
 
-## separator {#dom-separator}
+# separator {#dom-separator}
 
 Displays a vertical/horizontal line to visually split the content of a
 container in two.
@@ -196,7 +198,7 @@ namespace ftxui {
 }
 ```
 
-## gauge {#dom-gauge}
+# gauge {#dom-gauge}
 
 This is a visual element that represents a ratio of progress.
 
@@ -205,7 +207,7 @@ Code:
 border(gauge(0.5))
 ```
 
-Teminal output:
+Terminal output:
 ```bash
 ┌────────────────────────────────────────────────────────────────────────────┐
 │██████████████████████████████████████                                      │
@@ -224,7 +226,7 @@ namespace {
 }
 ```
 
-## graph {#dom-graph}
+# graph {#dom-graph}
 
 @htmlonly
 <script id="asciicast-223726" src="https://asciinema.org/a/223726.js" async></script>
@@ -235,7 +237,7 @@ See:
 Element graph(GraphFunction);
 ```
 
-## Colors {#dom-colors}
+# Colors {#dom-colors}
 
 Most terminal consoles can display colored text and colored backgrounds. FTXUI
 supports every color palette:
@@ -248,7 +250,7 @@ Decorator bgcolor(Color);
 Color [gallery](https://arthursonzogni.github.io/FTXUI/examples_2dom_2color_gallery_8cpp-example.html):
 ![image](https://user-images.githubusercontent.com/4759106/147248595-04c7245a-5b85-4544-809d-a5984fc6f9e7.png)
 
-### Palette16 #{#dom-colors-palette-16}
+## Palette16 #{#dom-colors-palette-16}
 
 On most terminals the following colors are supported:
 - Default
@@ -284,7 +286,7 @@ text("Blue background") | bgcolor(Color::Blue);
 text("Black on white") | color(Color::Black) | bgcolor(Color::White);
 ```
 
-### Palette256 #{#dom-colors-palette-256}
+## Palette256 #{#dom-colors-palette-256}
 
 On terminal supporting 256 colors. 
 @htmlonly
@@ -295,7 +297,7 @@ On terminal supporting 256 colors.
 text("HotPink") | color(Color::HotPink);
 ```
 
-### TrueColor #{#dom-colors-true-color}
+## TrueColor #{#dom-colors-true-color}
 
 On terminal supporting trueColor, you can directly use the 24bit RGB color
 space:
@@ -314,7 +316,7 @@ ftxui::Color::HSV(uint8_t hue, uint8_t saturation, uint8_t value);
 <script id="asciicast-xwzzghmqcqzIuyLwCpQFEqbEu" src="https://asciinema.org/a/xwzzghmqcqzIuyLwCpQFEqbEu.js" async></script>
 @endhtmlonly
 
-## LinearGradient #{#dom-linear-gradient}
+# LinearGradient #{#dom-linear-gradient}
 
 FTXUI supports linear gradient. Either on the foreground or the background.
 
@@ -344,7 +346,7 @@ LinearGradient(45, Color::Red, Color::Blue);
 See [demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/linear_gradient_gallery).
 
 
-## Style {#dom-style}
+# Style {#dom-style}
 In addition to colored text and colored backgrounds. Many terminals support text
 effects such as: `bold`, `italic`, `dim`, `underlined`, `inverted`, `blink`.
 
@@ -377,7 +379,7 @@ Alternatively, use the pipe operator to chain it on your element:
 text("This text is bold") | bold | underlined
 ```
 
-## Layout {#dom-layout}
+# Layout {#dom-layout}
 
 Enables elements to be arranged in the following ways:
   - **Horizontally** with `ftxui::hbox`
@@ -405,7 +407,7 @@ Checkout this
 and the associated
 [demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/flexbox).
 
-Element can also become flexible using the the `ftxui::flex` decorator.
+Element can also become flexible using the `ftxui::flex` decorator.
 
 Code:
 ```cpp
@@ -438,7 +440,7 @@ Terminal output:
 └────┘└───────────────────────────────┘└───────────────────────────────┘
 ```
 
-## Table {#dom-table}
+# Table {#dom-table}
 
 Enables easy formatting of data into a neat table like visual form.
 
@@ -446,7 +448,7 @@ Enables easy formatting of data into a neat table like visual form.
   
 ![image](https://user-images.githubusercontent.com/4759106/147250766-77d8ec9e-cf2b-486d-9866-1fd9f1bd2e6b.png)
 
-## Canvas {#dom-canvas}
+# Canvas {#dom-canvas}
 
 See the API [<ftxui/dom/canvas.hpp>](./canvas_8hpp_source.html)
 

doc/module-screen.md

@@ -1,6 +1,8 @@
-@page module-screen Module screen
+@page module-screen ftxui / screen
 @tableofcontents
 
+![title-img](https://nsm09.casimages.com/img/2025/05/31//2505310207423242518595348.png)
+
 The `ftxui::screen` module is the low-level foundation. It can be used
 standalone, but it is primarily designed to be used together by
 [ftxui::dom](module-dom.html) and [ftxui::component](module-component.html)

doc/module.md

@@ -1,14 +1,16 @@
-# Modules {#modules}
+# ftxui {#ftxui}
+
+![title-img](https://nsm09.casimages.com/img/2025/05/30//2505300816063242518595251.jpg)
 
 FTXUI is organized into three modules, each building upon the previous:
 
-1. @subpage module-screen — low-level rendering
-2. @subpage module-dom — layout and composition
-3. @subpage module-component — user interaction
+1. [ftxui/screen](#module-screen) - Low-level rendering
+2. [ftxui/dom](#module-dom) - Layout and composition
+3. [ftxui/component](#module-component) - User interaction
 
 ---
 
-[ @subpage module-screen ]
+# ftxui/screen
 
 Defines:
 
@@ -18,9 +20,18 @@ Defines:
 
 Use for direct terminal drawing and styling.
 
+<div class="section_buttons">
+ 
+|                                  Next |
+|--------------------------------------:|
+| [Documentation](module-screen.html) |
+ 
+</div>
+
+
 ---
 
-[ @subpage module-dom ]
+# ftxui/dom
 
 Provides:
 
@@ -30,9 +41,17 @@ Provides:
 
 Ideal for structured, styled UIs.
 
----
+<div class="section_buttons">
 
-[ @subpage module-component ]
+|                                  Next |
+|--------------------------------------:|
+| [Documentation](module-dom.html) |
+
+</div>
+
+
+---
+# ftxui/component
 
 Adds:
 
@@ -42,6 +61,14 @@ Adds:
 
 Use for interactive apps.
 
+<div class="section_buttons">
+
+|                                  Next |
+|--------------------------------------:|
+| [Documentation](module-component.html) |
+
+</div>
+
 ---
 
 Modules can be used independently, or together: `screen → dom → component`.

doc/stylesheet.css

@@ -22,7 +22,7 @@ html {
   --warning-color-darker: #f7768e;
   --bug-color: #f7768e;
 
-  --fragment-background: #2c2e34;
+  --fragment-background: #222222;
   --fragment-foreground: #e2e2e3;
   --fragment-keyword: #f7768e;       /* pink */
   --fragment-keywordtype: #7fbbb3;   /* teal */
@@ -34,6 +34,7 @@ html {
   --fragment-linenumber-color: #414868;
   --fragment-linenumber-background: #2c2e34;
   --fragment-linenumber-border: #1a1b26;
+  --fragment-lineheight: 1.125em;
 }
 
 /* Base style for all sections */

examples/CMakeLists.txt

@@ -15,16 +15,14 @@ add_subdirectory(component)
 add_subdirectory(dom)
 
 if (EMSCRIPTEN)
-  string(APPEND CMAKE_EXE_LINKER_FLAGS " -s ALLOW_MEMORY_GROWTH=1")
-  target_link_options(component PUBLIC "SHELL: -s ALLOW_MEMORY_GROWTH=1")
-
   get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
   foreach(file
+      "index.css"
       "index.html"
       "index.mjs"
-      "index.css"
+      "run_webassembly.py"
       "sw.js"
-      "run_webassembly.py")
+  )
     configure_file(${file} ${file})
   endforeach(file)
 endif()

examples/component/button.cpp

@@ -1,9 +1,64 @@
-#include "ftxui/component/component.hpp"
-#include "ftxui/component/screen_interactive.hpp"
+// 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 operator+, to_string
 
-int main(){
-    auto screen = ftxui::ScreenInteractive::Fullscreen();
-    auto testComponent = ftxui::Renderer([](){return ftxui::text("test Component");});
-    screen.Loop(testComponent);
-    return 0;
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for separator, gauge, text, Element, operator|, vbox, border
+
+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 Style() {
+  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;
+
+  // clang-format off
+  auto btn_dec_01 = Button("-1", [&] { value -= 1; }, Style());
+  auto btn_inc_01 = Button("+1", [&] { value += 1; }, Style());
+  auto btn_dec_10 = Button("-10", [&] { value -= 10; }, Style());
+  auto btn_inc_10 = Button("+10", [&] { value += 10; }, Style());
+  // clang-format on
+
+  // The tree of components. This defines how to navigate using the keyboard.
+  // The selected `row` is shared to get a grid layout.
+  int row = 0;
+  auto buttons = Container::Vertical({
+      Container::Horizontal({btn_dec_01, btn_inc_01}, &row) | flex,
+      Container::Horizontal({btn_dec_10, btn_inc_10}, &row) | flex,
+  });
+
+  // Modify the way to render them on screen:
+  auto component = Renderer(buttons, [&] {
+    return vbox({
+               text("value = " + std::to_string(value)),
+               separator(),
+               buttons->Render() | flex,
+           }) |
+           flex | border;
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(component);
+  return 0;
 }

examples/component/canvas_animated.cpp

@@ -133,8 +133,9 @@ int main() {
       float dy = 50.f;
       ys[x] = int(dy + 20 * cos(dx * 0.14) + 10 * sin(dx * 0.42));
     }
-    for (int x = 1; x < 99; x++)
+    for (int x = 1; x < 99; x++) {
       c.DrawPointLine(x, ys[x], x + 1, ys[x + 1]);
+    }
 
     return canvas(std::move(c));
   });

examples/component/flexbox_gallery.cpp

@@ -82,10 +82,12 @@ int main() {
                    size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
                    bgcolor(Color::HSV(index * 25, 255, 255)) |
                    color(Color::Black);
-    if (element_xflex_grow)
+    if (element_xflex_grow) {
       element = element | xflex_grow;
-    if (element_yflex_grow)
+    }
+    if (element_yflex_grow) {
       element = element | yflex_grow;
+    }
     return element;
   };
 
@@ -119,10 +121,12 @@ int main() {
 
     group = group | notflex;
 
-    if (!group_xflex_grow)
+    if (!group_xflex_grow) {
       group = hbox(group, filler());
-    if (!group_yflex_grow)
+    }
+    if (!group_yflex_grow) {
       group = vbox(group, filler());
+    }
 
     group = group | flex;
     return group;

examples/component/homescreen.cpp

@@ -1,11 +1,12 @@
 // 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 <stddef.h>    // for size_t
-#include <array>       // for array
-#include <atomic>      // for atomic
-#include <chrono>      // for operator""s, chrono_literals
-#include <cmath>       // for sin
+#include <stddef.h>  // for size_t
+#include <array>     // for array
+#include <atomic>    // for atomic
+#include <chrono>    // for operator""s, chrono_literals
+#include <cmath>     // for sin
+#include <ftxui/component/loop.hpp>
 #include <functional>  // for ref, reference_wrapper, function
 #include <memory>      // for allocator, shared_ptr, __shared_ptr_access
 #include <string>  // for string, basic_string, char_traits, operator+, to_string
@@ -269,7 +270,7 @@ int main() {
   auto spinner_tab_renderer = Renderer([&] {
     Elements entries;
     for (int i = 0; i < 22; ++i) {
-      entries.push_back(spinner(i, shift / 2) | bold |
+      entries.push_back(spinner(i, shift / 5) | bold |
                         size(WIDTH, GREATER_THAN, 2) | border);
     }
     return hflow(std::move(entries));
@@ -512,24 +513,20 @@ int main() {
     });
   });
 
-  std::atomic<bool> refresh_ui_continue = true;
-  std::thread refresh_ui([&] {
-    while (refresh_ui_continue) {
-      using namespace std::chrono_literals;
-      std::this_thread::sleep_for(0.05s);
-      // The |shift| variable belong to the main thread. `screen.Post(task)`
-      // will execute the update on the thread where |screen| lives (e.g. the
-      // main thread). Using `screen.Post(task)` is threadsafe.
-      screen.Post([&] { shift++; });
-      // After updating the state, request a new frame to be drawn. This is done
-      // by simulating a new "custom" event to be handled.
-      screen.Post(Event::Custom);
-    }
-  });
+  Loop loop(&screen, main_renderer);
+  while (!loop.HasQuitted()) {
+    // Update the state of the application.
+    shift++;
 
-  screen.Loop(main_renderer);
-  refresh_ui_continue = false;
-  refresh_ui.join();
+    // Request a new frame to be drawn.
+    screen.RequestAnimationFrame();
+
+    // Execute events, and draw the next frame.
+    loop.RunOnce();
+
+    // Sleep for a short duration to control the frame rate (60 FPS).
+    std::this_thread::sleep_for(std::chrono::milliseconds(1000 / 60));
+  }
 
   return 0;
 }

examples/component/menu_entries.cpp

@@ -22,10 +22,12 @@ MenuEntryOption Colored(ftxui::Color c) {
   option.transform = [c](EntryState state) {
     state.label = (state.active ? "> " : "  ") + state.label;
     Element e = text(state.label) | color(c);
-    if (state.focused)
+    if (state.focused) {
       e = e | inverted;
-    if (state.active)
+    }
+    if (state.active) {
       e = e | bold;
+    }
     return e;
   };
   return option;

examples/component/menu_in_frame.cpp

@@ -17,8 +17,9 @@ int main() {
   std::vector<std::string> entries;
   int selected = 0;
 
-  for (int i = 0; i < 30; ++i)
+  for (int i = 0; i < 30; ++i) {
     entries.push_back("Entry " + std::to_string(i));
+  }
   auto radiobox = Menu(&entries, &selected);
   auto renderer = Renderer(radiobox, [&] {
     return radiobox->Render() | vscroll_indicator | frame |

examples/component/menu_in_frame_horizontal.cpp

@@ -17,8 +17,9 @@ int main() {
   std::vector<std::string> entries;
   int selected = 0;
 
-  for (int i = 0; i < 100; ++i)
+  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; });

examples/component/menu_style.cpp

@@ -116,10 +116,12 @@ Component VMenu1(std::vector<std::string>* entries, int* selected) {
   option.entries_option.transform = [](EntryState state) {
     state.label = (state.active ? "> " : "  ") + state.label;
     Element e = text(state.label);
-    if (state.focused)
+    if (state.focused) {
       e = e | bgcolor(Color::Blue);
-    if (state.active)
+    }
+    if (state.active) {
       e = e | bold;
+    }
     return e;
   };
   return Menu(entries, selected, option);
@@ -130,10 +132,12 @@ Component VMenu2(std::vector<std::string>* entries, int* selected) {
   option.entries_option.transform = [](EntryState state) {
     state.label += (state.active ? " <" : "  ");
     Element e = hbox(filler(), text(state.label));
-    if (state.focused)
+    if (state.focused) {
       e = e | bgcolor(Color::Red);
-    if (state.active)
+    }
+    if (state.active) {
       e = e | bold;
+    }
     return e;
   };
   return Menu(entries, selected, option);
@@ -144,13 +148,16 @@ Component VMenu3(std::vector<std::string>* entries, int* selected) {
   option.entries_option.transform = [](EntryState state) {
     Element e = state.active ? text("[" + state.label + "]")
                              : text(" " + state.label + " ");
-    if (state.focused)
+    if (state.focused) {
       e = e | bold;
+    }
 
-    if (state.focused)
+    if (state.focused) {
       e = e | color(Color::Blue);
-    if (state.active)
+    }
+    if (state.active) {
       e = e | bold;
+    }
     return e;
   };
   return Menu(entries, selected, option);
@@ -245,10 +252,12 @@ Component HMenu5(std::vector<std::string>* entries, int* selected) {
                                 animation::easing::ElasticOut);
   option.entries_option.transform = [](EntryState state) {
     Element e = text(state.label) | hcenter | flex;
-    if (state.active && state.focused)
+    if (state.active && state.focused) {
       e = e | bold;
-    if (!state.focused && !state.active)
+    }
+    if (!state.focused && !state.active) {
       e = e | dim;
+    }
     return e;
   };
   option.underline.color_inactive = Color::Default;

examples/component/menu_underline_animated_gallery.cpp

@@ -20,8 +20,9 @@ using namespace ftxui;
 Component DummyComponent(int id) {
   return Renderer([id](bool focused) {
     auto t = text("component " + std::to_string(id));
-    if (focused)
+    if (focused) {
       t = t | inverted;
+    }
     return t;
   });
 }

examples/component/radiobox_in_frame.cpp

@@ -17,8 +17,9 @@ int main() {
   std::vector<std::string> entries;
   int selected = 0;
 
-  for (int i = 0; i < 30; ++i)
+  for (int i = 0; i < 30; ++i) {
     entries.push_back("RadioBox " + std::to_string(i));
+  }
   auto radiobox = Radiobox(&entries, &selected);
   auto renderer = Renderer(radiobox, [&] {
     return radiobox->Render() | vscroll_indicator | frame |

examples/component/renderer.cpp

@@ -19,10 +19,11 @@ int main() {
 
   // 1. Example of focusable renderer:
   auto renderer_focusable = Renderer([](bool focused) {
-    if (focused)
+    if (focused) {
       return text("FOCUSABLE RENDERER()") | center | bold | border;
-    else
+    } else {
       return text(" Focusable renderer() ") | center | border;
+    }
   });
 
   // 2. Examples of a non focusable renderer.
@@ -33,10 +34,11 @@ int main() {
   // 3. Renderer can wrap other components to redefine their Render() function.
   auto button = Button("Wrapped quit button", screen.ExitLoopClosure());
   auto renderer_wrap = Renderer(button, [&] {
-    if (button->Focused())
+    if (button->Focused()) {
       return button->Render() | bold | color(Color::Red);
-    else
+    } else {
       return button->Render();
+    }
   });
 
   // Let's renderer everyone:

examples/component/scrollbar.cpp

@@ -3,6 +3,7 @@
 // the LICENSE file.
 #include <ftxui/component/component.hpp>
 #include <ftxui/component/screen_interactive.hpp>
+#include <string>
 
 using namespace ftxui;
 

examples/component/window.cpp

@@ -3,6 +3,7 @@
 // the LICENSE file.
 #include <ftxui/component/component.hpp>
 #include <ftxui/component/screen_interactive.hpp>
+#include <string>
 
 using namespace ftxui;
 

examples/dom/canvas.cpp

@@ -32,10 +32,12 @@ int main() {
 
   // Plot a function:
   std::vector<int> ys(100);
-  for (int x = 0; x < 100; x++)
+  for (int x = 0; x < 100; x++) {
     ys[x] = int(80 + 20 * cos(x * 0.2));
-  for (int x = 0; x < 99; x++)
+  }
+  for (int x = 0; x < 99; x++) {
     c.DrawPointLine(x, ys[x], x + 1, ys[x + 1], Color::Red);
+  }
 
   auto document = canvas(&c) | border;
 

examples/dom/package_manager.cpp

@@ -86,8 +86,9 @@ int main() {
 
   auto render = [&]() {
     std::vector<Element> entries;
-    for (auto& task : displayed_task)
+    for (auto& task : displayed_task) {
       entries.push_back(renderTask(task));
+    }
 
     return vbox({
         // List of tasks.
@@ -138,8 +139,9 @@ int main() {
     std::this_thread::sleep_for(0.01s);
 
     // Exit
-    if (nb_active + nb_queued == 0)
+    if (nb_active + nb_queued == 0) {
       break;
+    }
 
     // Update the model for the next frame.
     updateModel();

examples/dom/spinner.cpp

@@ -21,8 +21,9 @@ int main() {
   for (int index = 0; index < 200; ++index) {
     std::vector<Element> entries;
     for (int i = 0; i < 23; ++i) {
-      if (i != 0)
+      if (i != 0) {
         entries.push_back(separator());
+      }
       entries.push_back(  //
           hbox({
               text(std::to_string(i)) | size(WIDTH, EQUAL, 2),

examples/index.css

@@ -1,15 +1,19 @@
 @import url(https://fonts.googleapis.com/css?family=Khula:700);
 
+html {
+  --toc-width: 250px;
+}
+
 body {
-  background-color:#EEE;
-  padding:0px;
-  margin:0px;
+  background-color: #EEE;
+  padding: 0px;
+  margin: 0px;
   font-family: Khula, Helvetica, sans-serif;
   font-size: 130%;
 }
 
 .page {
-  max-width:1300px;
+  max-width: 1300px;
   margin: auto;
   padding: 10px;
 }
@@ -20,7 +24,7 @@ a {
   margin: 0 -.25rem;
   padding: 0 .25rem;
   transition: color .3s ease-in-out,
-              box-shadow .3s ease-in-out;
+    box-shadow .3s ease-in-out;
 }
 
 a:hover {
@@ -30,45 +34,48 @@ a:hover {
 
 h1 {
   text-decoration: underline;
-  width:100%;
-  background-color: rgba(100,100,255,0.5);
+  width: 100%;
+  background-color: rgba(100, 100, 255, 0.5);
   padding: 10px;
   margin: 0;
 }
 
 
 #selectExample {
-  flex:1;
+  flex: 1;
 }
 
-#selectExample, #selectExample option {
+#selectExample,
+#selectExample option {
   font-size: 16px;
   font-family: sans-serif;
   font-weight: 700;
   line-height: 1.3;
-  border:0px;
+  border: 0px;
   background-color: #bbb;
-  color:black;
+  color: black;
 }
 
 #selectExample:focus {
-  outline:none;
+  outline: none;
 }
 
 #terminal {
-  width:100%;
+  width: 100%;
   height 500px;
   height: calc(clamp(200px, 100vh - 300px, 900px));
   overflow: hidden;
-  border:none;
-  background-color:black;
+  border: none;
+  padding: 10px;
+  margin: 10px;
 }
 
 #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);
+  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.75),
+    0px 2px 80px 0px rgba(0, 0, 0, 0.50);
+  background-color: black;
 }
 
 .fakeButtons {
@@ -76,7 +83,7 @@ h1 {
   width: 10px;
   border-radius: 50%;
   border: 1px solid #000;
-  margin:6px;
+  margin: 6px;
   background-color: #ff3b47;
   border-color: #9d252b;
   display: inline-block;
@@ -95,13 +102,79 @@ h1 {
 }
 
 .fakeMenu {
-  display:flex;
+  display: flex;
   flex-direction: row;
-  width:100%;
+  width: 100%;
   box-sizing: border-box;
   height: 25px;
   background-color: #bbb;
-  color:black;
+  color: black;
   margin: 0 auto;
   overflow: hidden;
 }
+
+.toc-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--toc-width);
+  background: white;
+  padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+}
+
+.toc-title {
+  font-weight: bold;
+  margin-bottom: 5px;
+  font-size: 0.9em;
+  color: #555;
+
+  position: sticky;
+  transition: position 1.0s ease-in-out;
+  top: 0;
+  z-index: 1;
+  padding: 20px;
+  margin: 0;
+
+  border-bottom: 1px solid #ddd;
+
+  /* Gradient background for the title */
+  background-color: #f0f0f0;
+}
+
+.toc-item {
+  padding: 3px 8px;
+  margin: 0;
+  cursor: pointer;
+  font-size: 0.85em;
+  border-radius: 3px;
+  transition: background 0.2s;
+}
+
+.toc-item:hover {
+  background: #f0f0f0;
+}
+
+.toc-item.selected {
+  background: #e0e0e0;
+  font-weight: bold;
+}
+
+@media (max-width: 1024px) {
+  .toc-container {
+    display: none;
+  }
+
+  .page {
+    margin-left: 0;
+  }
+}
+
+@media (min-width: 1025px) {
+  .page {
+    margin-left: calc(var(--toc-width) + 20px);
+  }
+}

examples/index.html

@@ -9,13 +9,18 @@
     <script type="module" src="index.mjs"></script>
   </head>
   <body>
+    <div class="toc-container">
+      <div class="toc-list"></div>
+    </div>
     <script id="example_script"></script>
 
     <div class="page">
       <p>
         <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/>
+        This showcases the: <a
+          href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
+        folder. See <a id="source">source</a>.
       </p>
 
       <div id="terminalContainer">

examples/index.mjs

@@ -7,7 +7,7 @@ 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);
@@ -55,7 +55,7 @@ const stdout = code => {
 const stderr = code => {
   if (code == 0 || code == 10) {
     console.error(String.fromCodePoint(...stderr_buffer));
-    stderr_buffer = [];
+    stderr_buffer.length = 0;
   } else {
     stderr_buffer.push(code)
   }
@@ -89,12 +89,72 @@ window.Module = {
     const resize_observer = new ResizeObserver(resize_handler);
     resize_observer.observe(term_element);
     resize_handler();
-
-    // Disable scrollbar
-    //term.write('\x1b[?47h')
   },
 };
 
+const source = document.querySelector("#source");
+source.href = "https://github.com/ArthurSonzogni/FTXUI/blob/main/examples/" + example + ".cpp";
+
 const words = example.split('/')
 words[1] = "ftxui_example_" + words[1] + ".js"
 document.querySelector("#example_script").src = words.join('/');
+
+
+// Table of Contents (TOC) for quick navigation.
+
+// Get select element
+const selectEl = document.querySelector('select#selectExample');
+if (!selectEl) {
+  console.error('select#selectExample not found');
+} else {
+  // Get TOC container
+  const tocContainer = document.querySelector('.toc-container');
+  const tocList = tocContainer.querySelector('.toc-list');
+
+  // Group options by directory
+  const groupedOptions = Array.from(selectEl.options).reduce((acc, option) => {
+    const [dir, file] = option.text.split('/');
+    if (!acc[dir]) {
+      acc[dir] = [];
+    }
+    acc[dir].push({ option, file });
+    return acc;
+  }, {});
+
+  // Generate TOC items
+  for (const dir in groupedOptions) {
+    const dirContainer = document.createElement('div');
+
+    const dirHeader = document.createElement('div');
+    dirHeader.textContent = dir;
+    dirHeader.className = 'toc-title';
+    dirContainer.appendChild(dirHeader);
+
+    groupedOptions[dir].forEach(({ option, file }) => {
+      const tocItem = document.createElement('div');
+      tocItem.textContent = file;
+      tocItem.className = 'toc-item';
+
+      if (selectEl.options[selectEl.selectedIndex].value === option.value) {
+        tocItem.classList.add('selected');
+      }
+
+      // Click handler
+      tocItem.addEventListener('click', () => {
+        for(let i=0; i<selectEl.options.length; ++i) {
+          if (selectEl.options[i].value == option.value) {
+            selectEl.selectedIndex = i;
+            break;
+          }
+        }
+
+        history.pushState({}, "", "?file=" + option.value);
+        location.reload();
+      });
+
+      dirContainer.appendChild(tocItem);
+    });
+
+    tocList.appendChild(dirContainer);
+  }
+}''

include/ftxui/component/animation.hpp

@@ -8,11 +8,21 @@
 #include <functional>  // for function
 
 namespace ftxui::animation {
-// Components who haven't completed their animation can call this function to
-// request a new frame to be drawn later.
-//
-// When there is no new events and no animations to complete, no new frame is
-// drawn.
+/// @brief RequestAnimationFrame is a function that requests a new frame to be
+/// drawn in the next animation cycle.
+///
+/// @note This function is typically called by components that need to
+/// update their state or appearance over time, such as animations or
+/// transitions. This is useful when the change doesn't depend depend on the
+/// events seen by the terminal, but rather on the passage of time.
+///
+/// Components who haven't completed their animation can call this function to
+/// request a new frame to be drawn later.
+///
+/// When there is no new events and no animations to complete, no new frame is
+/// drawn.
+///
+/// @ingroup component
 void RequestAnimationFrame();
 
 using Clock = std::chrono::steady_clock;

include/ftxui/component/captured_mouse.hpp

@@ -7,6 +7,7 @@
 #include <memory>
 
 namespace ftxui {
+
 class CapturedMouseInterface {
  public:
   CapturedMouseInterface() = default;

include/ftxui/component/component.hpp

@@ -8,6 +8,7 @@
 #include <memory>      // for make_shared, shared_ptr
 #include <utility>     // for forward
 
+#include <ftxui/util/warn_windows_macro.hpp>
 #include "ftxui/component/component_base.hpp"  // for Component, Components
 #include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, MenuOption
 #include "ftxui/dom/elements.hpp"  // for Element

include/ftxui/component/component_options.hpp

@@ -9,8 +9,9 @@
 #include <ftxui/dom/direction.hpp>  // for Direction, Direction::Left, Direction::Right, Direction::Down
 #include <ftxui/dom/elements.hpp>  // for Element, separator
 #include <ftxui/util/ref.hpp>      // for Ref, ConstRef, StringRef
-#include <functional>              // for function
-#include <string>                  // for string
+#include <ftxui/util/warn_windows_macro.hpp>
+#include <functional>  // for function
+#include <string>      // for string
 
 #include "ftxui/component/component_base.hpp"  // for Component
 #include "ftxui/screen/color.hpp"  // for Color, Color::GrayDark, Color::White
@@ -27,6 +28,8 @@ struct EntryState {
   int index;          ///< Index of the entry when applicable or -1.
 };
 
+/// @brief Option for the underline effect.
+/// @ingroup component
 struct UnderlineOption {
   bool enabled = false;
 
@@ -230,7 +233,8 @@ struct SliderOption {
   std::function<void()> on_change;  ///> Called when `value` is updated.
 };
 
-// Parameter pack used by `WindowOptions::render`.
+/// @brief State passed to the `Window` component's render function.
+/// @ingroup component
 struct WindowRenderState {
   Element inner;             ///< The element wrapped inside this window.
   const std::string& title;  ///< The title of the window.

include/ftxui/component/event.hpp

@@ -24,6 +24,8 @@ class ComponentBase;
 ///
 /// Useful documentation about xterm specification:
 /// https://invisible-island.net/xterm/ctlseqs/ctlseqs.html
+///
+/// @ingroup component
 struct Event {
   // --- Constructor section ---------------------------------------------------
   static Event Character(std::string);

include/ftxui/component/loop.hpp

@@ -14,6 +14,45 @@ class ComponentBase;
 using Component = std::shared_ptr<ComponentBase>;
 class ScreenInteractive;
 
+/// @brief Loop is a class that manages the event loop for a component.
+///
+/// It is responsible for running the component, handling events, and
+/// updating the screen.
+///
+/// The Loop class is designed to be used with a ScreenInteractive object,
+/// which represents the terminal screen.
+///
+/// **Example**
+/// ```cpp
+/// #include <ftxui/component/component.hpp>
+/// #include <ftxui/component/screen_interactive.hpp>
+/// #include <ftxui/component/loop.hpp>
+///
+/// int main() {
+///  auto screen = ftxui::ScreenInteractive::TerminalOutput();
+///  auto component = ftxui::Button("Click me", [] { ... });
+///
+///  ftxui::Loop loop(screen.get(), component);
+///
+///  // Either
+///  loop.Run();  // Blocking until the component quits.
+///
+///  // Or
+///  loop.RunOnce();  // Non-blocking, returns immediately.
+///
+///  // Or
+///  loop.RunOnceBlocking();  // Blocking until handling one event.
+///
+///  // Or in a loop:
+///  while (!loop.HasQuitted()) {
+///    loop.RunOnce();
+///
+///    // Do something else like running a different library loop function.
+///  }
+/// }
+/// ```
+///
+/// @ingroup component
 class Loop {
  public:
   Loop(ScreenInteractive* screen, Component component);

include/ftxui/component/receiver.hpp

@@ -4,6 +4,7 @@
 #ifndef FTXUI_COMPONENT_RECEIVER_HPP_
 #define FTXUI_COMPONENT_RECEIVER_HPP_
 
+#include <ftxui/util/warn_windows_macro.hpp>
 #include <algorithm>           // for copy, max
 #include <atomic>              // for atomic, __atomic_base
 #include <condition_variable>  // for condition_variable
@@ -14,6 +15,8 @@
 
 namespace ftxui {
 
+// Deprecated
+//
 // Usage:
 //
 // Initialization:
@@ -39,17 +42,24 @@ namespace ftxui {
 // Receiver::Receive() returns true when there are no more senders.
 
 // clang-format off
+// Deprecated:
 template<class T> class SenderImpl;
+// Deprecated:
 template<class T> class ReceiverImpl;
+// Deprecated:
 
+// Deprecated:
 template<class T> using Sender = std::unique_ptr<SenderImpl<T>>;
+// Deprecated:
 template<class T> using Receiver = std::unique_ptr<ReceiverImpl<T>>;
+// Deprecated:
 template<class T> Receiver<T> MakeReceiver();
 // clang-format on
 
 // ---- Implementation part ----
 
 template <class T>
+// Deprecated:
 class SenderImpl {
  public:
   SenderImpl(const SenderImpl&) = delete;

include/ftxui/component/screen_interactive.hpp

@@ -4,13 +4,10 @@
 #ifndef FTXUI_COMPONENT_SCREEN_INTERACTIVE_HPP
 #define FTXUI_COMPONENT_SCREEN_INTERACTIVE_HPP
 
-#include <atomic>                        // for atomic
-#include <ftxui/component/receiver.hpp>  // for Receiver, Sender
-#include <functional>                    // for function
-#include <memory>                        // for shared_ptr
-#include <string>                        // for string
-#include <thread>                        // for thread
-#include <variant>                       // for variant
+#include <atomic>      // for atomic
+#include <functional>  // for function
+#include <memory>      // for shared_ptr
+#include <string>      // for string
 
 #include "ftxui/component/animation.hpp"       // for TimePoint
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
@@ -27,6 +24,14 @@ struct Event;
 using Component = std::shared_ptr<ComponentBase>;
 class ScreenInteractivePrivate;
 
+namespace task {
+class TaskRunner;
+}
+
+/// @brief ScreenInteractive is a `Screen` that can handle events, run a main
+/// loop, and manage components.
+///
+/// @ingroup component
 class ScreenInteractive : public Screen {
  public:
   // Constructors:
@@ -37,6 +42,9 @@ class ScreenInteractive : public Screen {
   static ScreenInteractive FitComponent();
   static ScreenInteractive TerminalOutput();
 
+  // Destructor.
+  ~ScreenInteractive();
+
   // Options. Must be called before Loop().
   void TrackMouse(bool enable = true);
 
@@ -94,6 +102,10 @@ class ScreenInteractive : public Screen {
 
   void Signal(int signal);
 
+  void FetchTerminalEvents();
+
+  void PostAnimationTask();
+
   ScreenInteractive* suspended_screen_ = nullptr;
   enum class Dimension {
     FitComponent,
@@ -101,30 +113,26 @@ class ScreenInteractive : public Screen {
     Fullscreen,
     TerminalOutput,
   };
-  Dimension dimension_ = Dimension::Fixed;
-  bool use_alternative_screen_ = false;
-  ScreenInteractive(int dimx,
+  ScreenInteractive(Dimension dimension,
+                    int dimx,
                     int dimy,
-                    Dimension dimension,
                     bool use_alternative_screen);
+  const Dimension dimension_;
+  const bool use_alternative_screen_;
 
   bool track_mouse_ = true;
 
-  Sender<Task> task_sender_;
-  Receiver<Task> task_receiver_;
-
   std::string set_cursor_position;
   std::string reset_cursor_position;
 
   std::atomic<bool> quit_{false};
-  std::thread event_listener_;
-  std::thread animation_listener_;
   bool animation_requested_ = false;
   animation::TimePoint previous_animation_time_;
 
   int cursor_x_ = 1;
   int cursor_y_ = 1;
 
+  std::uint64_t frame_count_ = 0;
   bool mouse_captured = false;
   bool previous_frame_resized_ = false;
 
@@ -152,8 +160,14 @@ class ScreenInteractive : public Screen {
   std::unique_ptr<Selection> selection_;
   std::function<void()> selection_on_change_;
 
+  // PIMPL private implementation idiom (Pimpl).
+  struct Internal;
+  std::unique_ptr<Internal> internal_;
+
   friend class Loop;
 
+  Component component_;
+
  public:
   class Private {
    public:

include/ftxui/dom/canvas.hpp

@@ -20,6 +20,21 @@
 
 namespace ftxui {
 
+/// @brief Canvas is a drawable buffer associated with drawing operations.
+///
+/// Canvas is a drawable area that can be used to create complex graphics. It
+/// supports drawing points, lines, circles, ellipses, text, and images using
+/// braille, block, or normal characters.
+///
+/// Note: A terminal contains cells. A cells is a unit of:
+/// - 2x4 braille characters (1x1 pixel)
+/// - 2x2 block characters (2x2 pixels)
+/// - 2x4 normal characters (2x4 pixels)
+///
+/// You need to multiply the x coordinate by 2 and the y coordinate by 4 to
+/// get the correct position in the terminal.
+///
+/// @ingroup dom
 struct Canvas {
  public:
   Canvas() = default;

include/ftxui/dom/direction.hpp

@@ -5,6 +5,11 @@
 #define FTXUI_DOM_DIRECTION_HPP
 
 namespace ftxui {
+
+/// @brief Direction is an enumeration that represents the four cardinal
+/// directions.
+///
+/// @ingroup dom
 enum class Direction {
   Up = 0,
   Down = 1,

include/ftxui/dom/elements.hpp

@@ -24,6 +24,14 @@ using Elements = std::vector<Element>;
 using Decorator = std::function<Element(Element)>;
 using GraphFunction = std::function<std::vector<int>(int, int)>;
 
+/// @brief BorderStyle is an enumeration that represents the different styles
+/// of borders that can be applied to elements in the terminal UI.
+///
+/// BorderStyle is an enumeration that represents the different styles of
+/// borders that can be applied to elements in the terminal UI.
+/// It is used to define the visual appearance of borders around elements,
+/// such as windows, frames, or separators.
+/// @ingroup dom
 enum BorderStyle {
   LIGHT,
   DASHED,

include/ftxui/dom/flexbox_config.hpp

@@ -12,6 +12,18 @@
 
 namespace ftxui {
 
+/// @brief FlexboxConfig is a configuration structure that defines the layout
+/// properties for a flexbox container.
+//
+/// It allows you to specify the direction of the flex items, whether they
+/// should wrap, how they should be justified along the main axis, and how
+/// they should be aligned along the cross axis.
+/// It also includes properties for gaps between flex items in both the
+/// main and cross axes.
+/// This structure is used to configure the layout behavior of flexbox
+/// containers in a terminal user interface.
+///
+/// @ingroup dom
 struct FlexboxConfig {
   /// This establishes the main-axis, thus defining the direction flex items are
   /// placed in the flex container. Flexbox is (aside wrapping) single-direction

include/ftxui/dom/linear_gradient.hpp

@@ -27,8 +27,15 @@ namespace ftxui {
 /// LinearGradient(Color::Red, Color::Blue);
 /// LinearGradient(45, Color::Red, Color::Blue);
 /// ```
+///
+/// @ingroup dom
 struct LinearGradient {
   float angle = 0.f;
+
+  /// A stop is a color at a specific position in the gradient.
+  /// The position is a value between 0.0 and 1.0,
+  /// where 0.0 is the start of the gradient
+  /// and 1.0 is the end of the gradient.
   struct Stop {
     Color color = Color::Default;
     std::optional<float> position;

include/ftxui/dom/node.hpp

@@ -20,6 +20,20 @@ class Screen;
 using Element = std::shared_ptr<Node>;
 using Elements = std::vector<Element>;
 
+/// @brief Node is the base class for all elements in the DOM tree.
+///
+/// It represents a single node in the document object model (DOM) and provides
+/// the basic structure for layout and rendering.
+/// It contains methods for computing layout requirements, setting the box
+/// dimensions, selecting content, rendering to the screen, and checking the
+/// layout status.
+/// It typically contains child elements, which are also instances of Node.
+///
+/// Users are expected to derive from this class to create custom elements.
+///
+/// A list of builtin elements can be found in the `elements.hpp` file.
+///
+/// @ingroup dom
 class Node {
  public:
   Node();

include/ftxui/dom/requirement.hpp

@@ -10,6 +10,11 @@
 namespace ftxui {
 class Node;
 
+/// @brief Requirement is a structure that defines the layout requirements for a
+/// Node in the terminal user interface.
+///
+/// It specifies the minimum size required to fully draw the element,
+/// @ingroup dom
 struct Requirement {
   // The required size to fully draw the element.
   int min_x = 0;

include/ftxui/dom/selection.hpp

@@ -13,7 +13,12 @@
 
 namespace ftxui {
 
-/// @brief Represent a selection in the terminal.
+/// @brief Represents a selection in a terminal user interface.
+///
+/// Selection is a class that represents the two endpoints of a selection in a
+/// terminal user interface.
+///
+/// @ingroup dom
 class Selection {
  public:
   Selection();  // Empty selection.

include/ftxui/dom/table.hpp

@@ -11,28 +11,28 @@
 
 namespace ftxui {
 
-// Usage:
-//
-// Initialization:
-// ---------------
-//
-// auto table = Table({
-//   {"X", "Y"},
-//   {"-1", "1"},
-//   {"+0", "0"},
-//   {"+1", "1"},
-// });
-//
-// table.SelectAll().Border(LIGHT);
-//
-// table.SelectRow(1).Border(DOUBLE);
-// table.SelectRow(1).SeparatorInternal(Light);
-//
-// std::move(table).Element();
-
 class Table;
 class TableSelection;
 
+/// @brief Table is a utility to draw tables.
+///
+/// **example**
+/// ```cpp
+/// auto table = Table({
+///  {"X", "Y"},
+///  {"-1", "1"},
+///  {"+0", "0"},
+///  {"+1", "1"},
+/// });
+///
+/// table.SelectAll().Border(LIGHT);
+/// table.SelectRow(1).Border(DOUBLE);
+/// table.SelectRow(1).SeparatorInternal(LIGHT);
+///
+/// std::move(table).Render();
+/// ```
+///
+/// @ingroup dom
 class Table {
  public:
   Table();

include/ftxui/screen/box.hpp

@@ -6,6 +6,13 @@
 
 namespace ftxui {
 
+/// @brief Box is a structure that represents a rectangular area in a 2D space.
+///
+/// It is defined by its minimum and maximum coordinates along the x and y axes.
+/// Note that the coordinates are inclusive, meaning that the box includes both
+/// the minimum and maximum values.
+///
+/// @ingroup screen
 struct Box {
   int x_min = 0;
   int x_max = 0;

include/ftxui/screen/color.hpp

@@ -15,7 +15,9 @@
 
 namespace ftxui {
 
-/// @brief A class representing terminal colors.
+/// @brief Color is a class that represents a color in the terminal user
+/// interface.
+///
 /// @ingroup screen
 class Color {
  public:

include/ftxui/screen/color_info.hpp

@@ -9,6 +9,10 @@
 
 namespace ftxui {
 
+/// @brief ColorInfo is a structure that contains information about the terminal
+/// color palette.
+///
+/// @ingroup screen
 struct ColorInfo {
   const char* name;
   uint8_t index_256;

include/ftxui/screen/image.hpp

@@ -20,6 +20,9 @@ class Image {
   Image() = delete;
   Image(int dimx, int dimy);
 
+  // Destructor:
+  virtual ~Image() = default;
+
   // 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;

include/ftxui/screen/screen.hpp

@@ -11,7 +11,6 @@
 
 #include "ftxui/screen/image.hpp"     // for Pixel, Image
 #include "ftxui/screen/terminal.hpp"  // for Dimensions
-#include "ftxui/util/autoreset.hpp"   // for AutoReset
 
 namespace ftxui {
 
@@ -31,6 +30,9 @@ class Screen : public Image {
   static Screen Create(Dimensions dimension);
   static Screen Create(Dimensions width, Dimensions height);
 
+  // Destructor:
+  ~Screen() override = default;
+
   std::string ToString() const;
 
   // Print the Screen on to the terminal.
@@ -58,7 +60,7 @@ class Screen : public Image {
       BarBlinking = 5,
       Bar = 6,
     };
-    Shape shape;
+    Shape shape = Hidden;
   };
 
   Cursor cursor() const { return cursor_; }

include/ftxui/screen/terminal.hpp

@@ -5,6 +5,9 @@
 #define FTXUI_SCREEN_TERMINAL_HPP
 
 namespace ftxui {
+
+/// @brief Dimensions is a structure that represents the size of the terminal
+/// @ingroup screen
 struct Dimensions {
   int dimx;
   int dimy;
@@ -14,6 +17,9 @@ namespace Terminal {
 Dimensions Size();
 void SetFallbackSize(const Dimensions& fallbackSize);
 
+/// @brief Color is an enumeration that represents the color support of the
+/// terminal.
+/// @ingroup screen
 enum Color {
   Palette1,
   Palette16,

include/ftxui/util/warn_windows_macro.hpp

@@ -0,0 +1,18 @@
+// 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.
+
+#ifndef FTXUI_UTIL_WARN_WINDOWS_MACRO_H_
+#define FTXUI_UTIL_WARN_WINDOWS_MACRO_H_
+
+#ifdef min
+#error \
+    "The macro 'min' is defined, which conflicts with the standard C++ library and FTXUI. This is often caused by including <windows.h>. To fix this, add '#define NOMINMAX' before including <windows.h>, or pass '/DNOMINMAX' as a compiler flag."
+#endif
+
+#ifdef max
+#error \
+    "The macro 'max' is defined, which conflicts with the standard C++ library and FTXUI. This is often caused by including <windows.h>. To fix this, add '#define NOMINMAX' before including <windows.h>, or pass '/DNOMINMAX' as a compiler flag."
+#endif
+
+#endif  // FTXUI_UTIL_WARN_WINDOWS_MACRO_H_

src/ftxui/component.cppm

@@ -0,0 +1,16 @@
+/// @module ftxui.component
+/// @brief Module file for FTXUI component operations.
+
+export module ftxui.component;
+
+export import ftxui.component.animation;
+export import ftxui.component.captured_mouse;
+export import ftxui.component.component;
+export import ftxui.component.component_base;
+export import ftxui.component.component_options;
+export import ftxui.component.event;
+export import ftxui.component.loop;
+export import ftxui.component.mouse;
+export import ftxui.component.receiver;
+export import ftxui.component.screen_interactive;
+export import ftxui.component.task;

src/ftxui/component/animation.cppm

@@ -0,0 +1,65 @@
+/// @module ftxui.component.animation
+/// @brief C++20 module interface 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/button.cpp

@@ -139,7 +139,6 @@ class ButtonBase : public ComponentBase, public ButtonOption {
  private:
   bool mouse_hover_ = false;
   Box box_;
-  ButtonOption option_;
   float animation_background_ = 0;
   float animation_foreground_ = 0;
   animation::Animator animator_background_ =

src/ftxui/component/captured_mouse.cppm

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

src/ftxui/component/collapsible.cpp

@@ -12,11 +12,11 @@
 
 namespace ftxui {
 
-/// @brief A collapsible component. It display a checkbox with an arrow. Once
-/// activated, the children is displayed.
+/// @brief A collapsible component. It displays a checkbox with an arrow. Once
+/// activated, the child is displayed.
 /// @param label The label of the checkbox.
-/// @param child The children to display.
-/// @param show Hold the state about whether the children is displayed or not.
+/// @param child The child to display.
+/// @param show Hold the state about whether the child is displayed or not.
 ///
 /// ### Example
 /// ```cpp

src/ftxui/component/component.cpp

@@ -35,26 +35,22 @@ ComponentBase::~ComponentBase() {
 /// @brief Return the parent ComponentBase, or nul if any.
 /// @see Detach
 /// @see Parent
-/// @ingroup component
 ComponentBase* ComponentBase::Parent() const {
   return parent_;
 }
 
 /// @brief Access the child at index `i`.
-/// @ingroup component
 Component& ComponentBase::ChildAt(size_t i) {
   assert(i < ChildCount());  // NOLINT
   return children_[i];
 }
 
 /// @brief Returns the number of children.
-/// @ingroup component
 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;
@@ -71,7 +67,6 @@ int ComponentBase::Index() const {
 
 /// @brief Add a child.
 /// @@param child The child to be attached.
-/// @ingroup component
 void ComponentBase::Add(Component child) {
   child->Detach();
   child->parent_ = this;
@@ -81,7 +76,6 @@ void ComponentBase::Add(Component child) {
 /// @brief Detach this child from its parent.
 /// @see Detach
 /// @see Parent
-/// @ingroup component
 void ComponentBase::Detach() {
   if (parent_ == nullptr) {
     return;
@@ -97,7 +91,6 @@ void ComponentBase::Detach() {
 }
 
 /// @brief Remove all children.
-/// @ingroup component
 void ComponentBase::DetachAllChildren() {
   while (!children_.empty()) {
     children_[0]->Detach();
@@ -107,7 +100,6 @@ void ComponentBase::DetachAllChildren() {
 /// @brief Draw the component.
 /// 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.
@@ -143,7 +135,6 @@ Element ComponentBase::Render() {
 /// @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();
@@ -157,7 +148,6 @@ Element ComponentBase::OnRender() {
 /// @return True when the event has been handled.
 /// The default implementation called OnEvent on every child until one return
 /// true. If none returns true, return false.
-/// @ingroup component
 bool ComponentBase::OnEvent(Event event) {  // NOLINT
   for (Component& child : children_) {      // NOLINT
     if (child->OnEvent(event)) {
@@ -170,7 +160,6 @@ bool ComponentBase::OnEvent(Event event) {  // NOLINT
 /// @brief Called in response to an animation event.
 /// @param params the parameters of the animation
 /// The default implementation dispatch the event to every child.
-/// @ingroup component
 void ComponentBase::OnAnimation(animation::Params& params) {
   for (const Component& child : children_) {
     child->OnAnimation(params);
@@ -179,7 +168,6 @@ void ComponentBase::OnAnimation(animation::Params& params) {
 
 /// @brief Return the currently Active child.
 /// @return the currently Active child.
-/// @ingroup component
 Component ComponentBase::ActiveChild() {
   for (auto& child : children_) {
     if (child->Focusable()) {
@@ -192,7 +180,6 @@ Component ComponentBase::ActiveChild() {
 /// @brief Return true when the component contains focusable elements.
 /// The non focusable Components will be skipped when navigating using the
 /// keyboard.
-/// @ingroup component
 bool ComponentBase::Focusable() const {
   for (const Component& child : children_) {  // NOLINT
     if (child->Focusable()) {
@@ -203,7 +190,6 @@ bool ComponentBase::Focusable() const {
 }
 
 /// @brief Returns if the element if the currently active child of its parent.
-/// @ingroup component
 bool ComponentBase::Active() const {
   return parent_ == nullptr || parent_->ActiveChild().get() == this;
 }
@@ -212,7 +198,6 @@ bool ComponentBase::Active() const {
 /// True when the ComponentBase is focused by the user. An element is Focused
 /// when it is with all its ancestors the ActiveChild() of their parents, and it
 /// Focusable().
-/// @ingroup component
 bool ComponentBase::Focused() const {
   const auto* current = this;
   while (current && current->Active()) {
@@ -223,18 +208,15 @@ bool ComponentBase::Focused() const {
 
 /// @brief Make the |child| to be the "active" one.
 /// @param child the child to become active.
-/// @ingroup component
 void ComponentBase::SetActiveChild([[maybe_unused]] ComponentBase* child) {}
 
 /// @brief Make the |child| to be the "active" one.
 /// @param child the child to become active.
-/// @ingroup component
 void ComponentBase::SetActiveChild(Component child) {  // NOLINT
   SetActiveChild(child.get());
 }
 
 /// @brief Configure all the ancestors to give focus to this component.
-/// @ingroup component
 void ComponentBase::TakeFocus() {
   ComponentBase* child = this;
   while (ComponentBase* parent = child->parent_) {
@@ -246,7 +228,6 @@ void ComponentBase::TakeFocus() {
 /// @brief Take the CapturedMouse if available. There is only one component of
 /// them. It represents a component taking priority over others.
 /// @param event The event
-/// @ingroup component
 CapturedMouse ComponentBase::CaptureMouse(const Event& event) {  // NOLINT
   if (event.screen_) {
     return event.screen_->CaptureMouse();

src/ftxui/component/component.cppm

@@ -0,0 +1,59 @@
+/// @module ftxui.component.component
+/// @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/component_base.cppm

@@ -0,0 +1,26 @@
+/// @module ftxui.component.component_base
+/// @brief Module file for the ComponentBase class of the Component module
+
+module;
+
+#include <ftxui/component/component_base.hpp>
+
+export module ftxui.component.component_base;
+
+/**
+ * @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/component_fuzzer.cpp

@@ -2,6 +2,7 @@
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
 #include <cassert>
+#include <ftxui/component/event.hpp>
 #include <vector>
 #include "ftxui/component/component.hpp"
 #include "ftxui/component/terminal_input_parser.hpp"
@@ -22,8 +23,9 @@ bool GeneratorBool(const char*& data, size_t& size) {
 
 std::string GeneratorString(const char*& data, size_t& size) {
   int index = 0;
-  while (index < size && data[index])
+  while (index < size && data[index]) {
     ++index;
+  }
 
   auto out = std::string(data, data + index);
   data += index;
@@ -39,8 +41,9 @@ std::string GeneratorString(const char*& data, size_t& size) {
 }
 
 int GeneratorInt(const char* data, size_t size) {
-  if (size == 0)
+  if (size == 0) {
     return 0;
+  }
   auto out = int(data[0]);
   data++;
   size--;
@@ -112,8 +115,9 @@ Components GeneratorComponents(const char*& data, size_t& size, int depth);
 Component GeneratorComponent(const char*& data, size_t& size, int depth) {
   depth--;
   int value = GeneratorInt(data, size);
-  if (depth <= 0)
+  if (depth <= 0) {
     return Button(GeneratorString(data, size), [] {});
+  }
 
   constexpr int value_max = 19;
   value = (value % value_max + value_max) % value_max;
@@ -212,16 +216,17 @@ extern "C" int LLVMFuzzerTestOneInput(const char* data, size_t size) {
   auto screen =
       Screen::Create(Dimension::Fixed(width), Dimension::Fixed(height));
 
-  auto event_receiver = MakeReceiver<Task>();
-  {
-    auto parser = TerminalInputParser(event_receiver->MakeSender());
-    for (size_t i = 0; i < size; ++i)
-      parser.Add(data[i]);
+  // Generate some events.
+  std::vector<Event> events;
+  auto parser =
+      TerminalInputParser([&](const Event& event) { events.push_back(event); });
+
+  for (size_t i = 0; i < size; ++i) {
+    parser.Add(data[i]);
   }
 
-  Task event;
-  while (event_receiver->Receive(&event)) {
-    component->OnEvent(std::get<Event>(event));
+  for (const auto& event : events) {
+    component->OnEvent(event);
     auto document = component->Render();
     Render(screen, document);
   }

src/ftxui/component/component_options.cpp

@@ -17,7 +17,6 @@ namespace ftxui {
 /// @params _active The color when the component is active.
 /// @params _duration The duration of the animation.
 /// @params _function The easing function of the animation.
-/// @ingroup component
 void AnimatedColorOption::Set(Color _inactive,
                               Color _active,
                               animation::Duration _duration,
@@ -32,7 +31,6 @@ void AnimatedColorOption::Set(Color _inactive,
 /// @brief Set how the underline should animate.
 /// @param d The duration of the animation.
 /// @param f The easing function of the animation.
-/// @ingroup component
 void UnderlineOption::SetAnimation(animation::Duration d,
                                    animation::easing::Function f) {
   SetAnimationDuration(d);
@@ -41,7 +39,6 @@ void UnderlineOption::SetAnimation(animation::Duration d,
 
 /// @brief Set how the underline should animate.
 /// @param d The duration of the animation.
-/// @ingroup component
 void UnderlineOption::SetAnimationDuration(animation::Duration d) {
   leader_duration = d;
   follower_duration = d;
@@ -49,7 +46,6 @@ void UnderlineOption::SetAnimationDuration(animation::Duration d) {
 
 /// @brief Set how the underline should animate.
 /// @param f The easing function of the animation.
-/// @ingroup component
 void UnderlineOption::SetAnimationFunction(animation::easing::Function f) {
   leader_function = f;
   follower_function = std::move(f);
@@ -60,7 +56,6 @@ void UnderlineOption::SetAnimationFunction(animation::easing::Function f) {
 /// follower.
 /// @param f_leader The duration of the animation for the leader.
 /// @param f_follower The duration of the animation for the follower.
-/// @ingroup component
 void UnderlineOption::SetAnimationFunction(
     animation::easing::Function f_leader,
     animation::easing::Function f_follower) {
@@ -68,9 +63,8 @@ void UnderlineOption::SetAnimationFunction(
   follower_function = std::move(f_follower);
 }
 
-/// @brief Standard options for an horizontal menu.
+/// @brief Standard options for a horizontal menu.
 /// This can be useful to implement a tab bar.
-/// @ingroup component
 // static
 MenuOption MenuOption::Horizontal() {
   MenuOption option;
@@ -95,7 +89,6 @@ MenuOption MenuOption::Horizontal() {
 
 /// @brief Standard options for an animated horizontal menu.
 /// This can be useful to implement a tab bar.
-/// @ingroup component
 // static
 MenuOption MenuOption::HorizontalAnimated() {
   auto option = Horizontal();
@@ -105,7 +98,6 @@ MenuOption MenuOption::HorizontalAnimated() {
 
 /// @brief Standard options for a vertical menu.
 /// This can be useful to implement a list of selectable items.
-/// @ingroup component
 // static
 MenuOption MenuOption::Vertical() {
   MenuOption option;
@@ -127,7 +119,6 @@ MenuOption MenuOption::Vertical() {
 
 /// @brief Standard options for an animated vertical menu.
 /// This can be useful to implement a list of selectable items.
-/// @ingroup component
 // static
 MenuOption MenuOption::VerticalAnimated() {
   auto option = MenuOption::Vertical();
@@ -148,9 +139,8 @@ MenuOption MenuOption::VerticalAnimated() {
   return option;
 }
 
-/// @brief Standard options for a horitontal menu with some separator.
+/// @brief Standard options for a horizontal menu with some separator.
 /// This can be useful to implement a tab bar.
-/// @ingroup component
 // static
 MenuOption MenuOption::Toggle() {
   auto option = MenuOption::Horizontal();
@@ -159,7 +149,6 @@ MenuOption MenuOption::Toggle() {
 }
 
 /// @brief Create a ButtonOption, highlighted using [] characters.
-/// @ingroup component
 // static
 ButtonOption ButtonOption::Ascii() {
   ButtonOption option;
@@ -172,7 +161,6 @@ ButtonOption ButtonOption::Ascii() {
 }
 
 /// @brief Create a ButtonOption, inverted when focused.
-/// @ingroup component
 // static
 ButtonOption ButtonOption::Simple() {
   ButtonOption option;
@@ -188,7 +176,6 @@ ButtonOption ButtonOption::Simple() {
 
 /// @brief Create a ButtonOption. The button is shown using a border, inverted
 /// when focused. This is the current default.
-/// @ingroup component
 ButtonOption ButtonOption::Border() {
   ButtonOption option;
   option.transform = [](const EntryState& s) {
@@ -205,7 +192,6 @@ ButtonOption ButtonOption::Border() {
 }
 
 /// @brief Create a ButtonOption, using animated colors.
-/// @ingroup component
 // static
 ButtonOption ButtonOption::Animated() {
   return Animated(Color::Black, Color::GrayLight,  //
@@ -213,7 +199,6 @@ ButtonOption ButtonOption::Animated() {
 }
 
 /// @brief Create a ButtonOption, using animated colors.
-/// @ingroup component
 // static
 ButtonOption ButtonOption::Animated(Color color) {
   return ButtonOption::Animated(
@@ -224,7 +209,6 @@ ButtonOption ButtonOption::Animated(Color color) {
 }
 
 /// @brief Create a ButtonOption, using animated colors.
-/// @ingroup component
 // static
 ButtonOption ButtonOption::Animated(Color background, Color foreground) {
   // NOLINTBEGIN
@@ -237,7 +221,6 @@ ButtonOption ButtonOption::Animated(Color background, Color foreground) {
 }
 
 /// @brief Create a ButtonOption, using animated colors.
-/// @ingroup component
 // static
 ButtonOption ButtonOption::Animated(Color background,
                                     Color foreground,
@@ -257,7 +240,6 @@ ButtonOption ButtonOption::Animated(Color background,
 }
 
 /// @brief Option for standard Checkbox.
-/// @ingroup component
 // static
 CheckboxOption CheckboxOption::Simple() {
   auto option = CheckboxOption();
@@ -282,7 +264,6 @@ CheckboxOption CheckboxOption::Simple() {
 }
 
 /// @brief Option for standard Radiobox
-/// @ingroup component
 // static
 RadioboxOption RadioboxOption::Simple() {
   auto option = RadioboxOption();
@@ -307,7 +288,6 @@ RadioboxOption RadioboxOption::Simple() {
 }
 
 /// @brief Standard options for the input component.
-/// @ingroup component
 // static
 InputOption InputOption::Default() {
   InputOption option;
@@ -330,7 +310,6 @@ InputOption InputOption::Default() {
 }
 
 /// @brief Standard options for a more beautiful input component.
-/// @ingroup component
 // static
 InputOption InputOption::Spacious() {
   InputOption option;

src/ftxui/component/component_options.cppm

@@ -0,0 +1,31 @@
+/// @module ftxui.component.component_options
+/// @brief Module file for options for the Component class of the Component module
+
+module;
+
+#include <ftxui/component/component_options.hpp>
+
+export module ftxui.component.component_options;
+
+/**
+ * @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.cpp

@@ -24,7 +24,6 @@ namespace ftxui {
 
 /// @brief An event corresponding to a given typed character.
 /// @param input The character typed by the user.
-/// @ingroup component
 // static
 Event Event::Character(std::string input) {
   Event event;
@@ -35,7 +34,6 @@ Event Event::Character(std::string input) {
 
 /// @brief An event corresponding to a given typed character.
 /// @param c The character typed by the user.
-/// @ingroup component
 // static
 Event Event::Character(char c) {
   return Event::Character(std::string{c});
@@ -43,7 +41,6 @@ Event Event::Character(char c) {
 
 /// @brief An event corresponding to a given typed character.
 /// @param c The character typed by the user.
-/// @ingroup component
 // static
 Event Event::Character(wchar_t c) {
   return Event::Character(to_string(std::wstring{c}));
@@ -52,7 +49,6 @@ Event Event::Character(wchar_t c) {
 /// @brief An event corresponding to a given typed character.
 /// @param input The sequence of character send by the terminal.
 /// @param mouse The mouse state.
-/// @ingroup component
 // static
 Event Event::Mouse(std::string input, struct Mouse mouse) {
   Event event;
@@ -74,7 +70,6 @@ Event Event::CursorShape(std::string input, int shape) {
 
 /// @brief An custom event whose meaning is defined by the user of the library.
 /// @param input An arbitrary sequence of character defined by the developer.
-/// @ingroup component
 // static
 Event Event::Special(std::string input) {
   Event event;

src/ftxui/component/event.cppm

@@ -0,0 +1,19 @@
+/// @module ftxui.component.event
+/// @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.cpp

@@ -11,7 +11,6 @@ namespace ftxui {
 
 /// @brief A Loop is a wrapper around a Component and a ScreenInteractive.
 /// It is used to run a Component in a terminal.
-/// @ingroup component
 /// @see Component, ScreenInteractive.
 /// @see ScreenInteractive::Loop().
 /// @see ScreenInteractive::ExitLoop().
@@ -28,7 +27,6 @@ Loop::~Loop() {
 }
 
 /// @brief Whether the loop has quitted.
-/// @ingroup component
 bool Loop::HasQuitted() {
   return screen_->HasQuitted();
 }

src/ftxui/component/loop.cppm

@@ -0,0 +1,20 @@
+/// @module ftxui.component.loop
+/// @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/maybe.cpp

@@ -15,7 +15,7 @@ namespace ftxui {
 
 /// @brief Decorate a component |child|. It is shown only when |show| returns
 /// true.
-/// @param child the compoenent to decorate.
+/// @param child the component to decorate.
 /// @param show a function returning whether |child| should shown.
 /// @ingroup component
 Component Maybe(Component child, std::function<bool()> show) {
@@ -61,7 +61,7 @@ ComponentDecorator Maybe(std::function<bool()> show) {
 }
 
 /// @brief Decorate a component |child|. It is shown only when |show| is true.
-/// @param child the compoennt to decorate.
+/// @param child the component to decorate.
 /// @param show a boolean. |child| is shown when |show| is true.
 /// @ingroup component
 ///