Update CHANGELOG for v4.2

Bug:https://github.com/ArthurSonzogni/FTXUI/issues/695

.clang-tidy

@@ -8,14 +8,16 @@ Checks: "*,
         -llvm*,
         -modernize-use-trailing-return-type,
         -zircon-*,
-        -readability-else-after-return,
+        -bugprone-easily-swappable-parameters,
-        -readability-static-accessed-through-instance,
-        -readability-avoid-const-params-in-decls,
         -cppcoreguidelines-non-private-member-variables-in-classes,
+        -misc-no-recursion,
         -misc-non-private-member-variables-in-classes,
         -modernize-use-nodiscard,
-        -misc-no-recursion,
+        -readability-avoid-const-params-in-decls,
+        -readability-else-after-return,
+        -readability-identifier-length,
         -readability-implicit-bool-conversion,
+        -readability-static-accessed-through-instance,
 "
 WarningsAsErrors: ''
 HeaderFilterRegex: ''

.github/workflows/build.yaml

@@ -51,7 +51,7 @@ jobs:
           ninja: true
           clangtidy: true
           cppcheck: false
-          gcovr: true
+          gcovr: "5.0"
           opencppcoverage: true
 
       # make sure coverage is only enabled for Debug builds, since it sets -O0
@@ -66,7 +66,8 @@ jobs:
           -DFTXUI_BUILD_EXAMPLES:BOOL=ON
           -DFTXUI_BUILD_TESTS:BOOL=ON
           -DFTXUI_BUILD_TESTS_FUZZER:BOOL=OFF
-          -DFTXUI_ENABLE_INSTALL:BOOL=ON ;
+          -DFTXUI_ENABLE_INSTALL:BOOL=ON
+          -DFTXUI_DEV_WARNINGS:BOOL=ON ;
 
       - name: "Build"
         run: >
@@ -106,7 +107,7 @@ jobs:
           ctest -C Debug --rerun-failed --output-on-failure;
 
       - name: Publish to codecov
-        uses: codecov/codecov-action@v2
+        uses: codecov/codecov-action@v3
         with:
           flags: ${{ runner.os }}
           name: ${{ runner.os }}-coverage
@@ -160,7 +161,8 @@ jobs:
           -DFTXUI_BUILD_EXAMPLES=OFF
           -DFTXUI_BUILD_TESTS=OFF
           -DFTXUI_BUILD_TESTS_FUZZER=OFF
-          -DFTXUI_ENABLE_INSTALL=ON;
+          -DFTXUI_ENABLE_INSTALL=ON
+          -DFTXUI_DEV_WARNINGS=ON ;
           cmake --build . --target package;
       - uses: shogo82148/actions-upload-release-asset@v1
         with:
@@ -169,7 +171,7 @@ jobs:
           overwrite: true
   
   documentation:
-    needs: package
+    if: github.ref == 'refs/heads/master'
     runs-on: ubuntu-latest
     steps:
       - name: "Checkout repository"
@@ -190,9 +192,24 @@ jobs:
         run: >
           mkdir build;
           cd build;
-          emcmake cmake ..;
+          emcmake cmake ..
+          -DCMAKE_BUILD_TYPE=Release
+          -DFTXUI_BUILD_DOCS=ON
+          -DFTXUI_BUILD_EXAMPLES=ON
+          -DFTXUI_BUILD_TESTS=OFF
+          -DFTXUI_BUILD_TESTS_FUZZER=OFF
+          -DFTXUI_ENABLE_INSTALL=OFF
+          -DFTXUI_DEV_WARNINGS=ON ;
           cmake --build . --target doc;
-          rsync -amv --include='*/' --include='*.html' --include='*.js' --include='*.wasm' --exclude='*' examples doc/doxygen/html;
+          cmake --build . ;
+          rsync -amv
+          --include='*/'
+          --include='*.html'
+          --include='*.js'
+          --include='*.wasm'
+          --exclude='*'
+          examples
+          doc/doxygen/html;
 
       - name: "Deploy"
         uses: peaceiris/actions-gh-pages@v3

CHANGELOG.md

@@ -1,8 +1,106 @@
 Changelog
 =========
 
-current (development) 
+4.2
----------------------
+---
+
+### Component
+- Bugfix: Support Fn keys for every terminal specifications.
+
+### Dom
+- Feature: Add `hyperlink` decorator. For instance:
+  ```cpp
+  auto link = text("Click here") | hyperlink("https://github.com/FTXUI")
+  ```
+  See the [OSC 8 page](https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda).
+  FTXUI support proposed by @aaleino in [#662](https://github.com/ArthurSonzogni/FTXUI/issues/662).
+
+### Screen
+- Fix huge performance bug affecting some compilers about unicode bisection.
+
+### Build
+- Check version compatibility when using cmake find_package()
+- Fix missing includes for some gcc versions.
+
+4.1.1
+-----
+
+### Component
+- Revert Feature: Support `ResizableSplit` with customizable separator.
+
+### Build
+- Check version compatibility when using cmake find_package()
+
+4.1.0 (abandonned)
+-----
+
+### Component
+- Feature: Support `ResizableSplit` with customizable separator.
+- Fix: Support arrow keys in application mode
+- Fix: Remove useless new line when using an alternative screen.
+
+### Dom
+- Feature: Add the dashed style for border and separator.
+- Feature: Add colored borders.
+- Feature: Add `LinearGradient`!
+- Improvement: Color::Interpolate() uses gamma correction.
+- Fix: Check the `graph` area is positive.
+
+### Build/Install
+- Use globally set CMAKE_CXX_STANDARD if it is set.
+- Expose the pkg-config file.
+
+4.0.0
+-----
+
+### DOM
+- Feature: more styles:
+  - `strikethrough`
+  - `underlinedDouble`
+- Feature: Customize the cursor. Add the following decorators:
+  - `focusCursorBlock`
+  - `focusCursorBlockBlinking`
+  - `focusCursorBar`
+  - `focusCursorBarBlinking`
+  - `focusCursorUnderline`
+  - `focusCursorUnderlineBlinking`
+- Bugfix: Fix `focus`/`select` when the `vbox`/`hbox`/`dbox` contains a
+  `flexbox`
+- Bugfix: Fix the selected/focused area. It used to be 1 cell larger/longer than
+  requested
+- Bugfix: Forward the selected/focused area from the child in gridbox.
+- Bugfix: Fix incorrect Canvas computed dimensions.
+- Bugfix: Support `vscroll_indicator` with a zero inner size.
+- Bugfix: Fix `vscroll_indicator` hidding the last column.
+
+### Component:
+- Feature: Add the `Modal` component.
+- Feature: `Slider` supports taking references for all its arguments.
+- Feature: `Slider` supports `SliderOption`. It supports:
+    - multiple directions.
+    - multiple colors.
+    - various values (value, min, max, increment).
+- Feature: Define `ScreenInteractive::Exit()`.
+- Feature: Add `Loop` to give developers a better control on the main loop. This
+  can be used to integrate FTXUI into another main loop, without taking the full
+  control.
+- Feature: `Input` supports CTRL+Left and CTRL+Right
+- Feature: Use a blinking bar in the `Input` component.
+- Improvement: The `Menu` keeps the focus when an entry is selected with the
+  mouse.
+- Bugfix: Add implementation of `ButtonOption::Border()`. It was missing.
+- Bugfix: Provide the correct key for F1-F4 and F11.
+- Feature: Add the `Hoverable` component decorators.
+
+### Screen
+- Feature: add `Box::Union(a,b) -> Box`
+- Bugfix: Fix resetting `dim` clashing with resetting of `bold`.
+- Feature: Add emscripten screen resize support.
+- Bugfix: Add unicode 13 support for full width characters.
+- Bugfix: Fix MSVC treating codecvt C++17 deprecated function as an error.
+
+### Build
+- Support using the google test version provided by the package manager.
 
 3.0.0
 -----

CMakeLists.txt

@@ -2,7 +2,8 @@ cmake_minimum_required(VERSION 3.11)
 
 project(ftxui
   LANGUAGES CXX
-  VERSION 3.0.0
+  VERSION 4.1.1
+  DESCRIPTION "C++ Functional Terminal User Interface."
 )
 
 option(FTXUI_BUILD_DOCS "Set to ON to build docs" ON)
@@ -12,6 +13,7 @@ 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 \
@@ -50,6 +52,7 @@ add_library(dom
   src/ftxui/dom/automerge.cpp
   src/ftxui/dom/blink.cpp
   src/ftxui/dom/bold.cpp
+  src/ftxui/dom/hyperlink.cpp
   src/ftxui/dom/border.cpp
   src/ftxui/dom/box_helper.cpp
   src/ftxui/dom/box_helper.hpp
@@ -71,6 +74,7 @@ add_library(dom
   src/ftxui/dom/gridbox.cpp
   src/ftxui/dom/hbox.cpp
   src/ftxui/dom/inverted.cpp
+  src/ftxui/dom/linear_gradient.cpp
   src/ftxui/dom/node.cpp
   src/ftxui/dom/node_decorator.cpp
   src/ftxui/dom/paragraph.cpp
@@ -79,9 +83,11 @@ add_library(dom
   src/ftxui/dom/separator.cpp
   src/ftxui/dom/size.cpp
   src/ftxui/dom/spinner.cpp
+  src/ftxui/dom/strikethrough.cpp
   src/ftxui/dom/table.cpp
   src/ftxui/dom/text.cpp
   src/ftxui/dom/underlined.cpp
+  src/ftxui/dom/underlined_double.cpp
   src/ftxui/dom/util.cpp
   src/ftxui/dom/vbox.cpp
 )
@@ -93,6 +99,7 @@ add_library(component
   include/ftxui/component/component_base.hpp
   include/ftxui/component/component_options.hpp
   include/ftxui/component/event.hpp
+  include/ftxui/component/loop.hpp
   include/ftxui/component/mouse.hpp
   include/ftxui/component/receiver.hpp
   include/ftxui/component/screen_interactive.hpp
@@ -107,9 +114,12 @@ add_library(component
   src/ftxui/component/container.cpp
   src/ftxui/component/dropdown.cpp
   src/ftxui/component/event.cpp
+  src/ftxui/component/hoverable.cpp
   src/ftxui/component/input.cpp
+  src/ftxui/component/loop.cpp
   src/ftxui/component/maybe.cpp
   src/ftxui/component/menu.cpp
+  src/ftxui/component/modal.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/renderer.cpp
@@ -125,15 +135,16 @@ target_link_libraries(dom
   PUBLIC screen
 )
 
-find_package(Threads)
 target_link_libraries(component
   PUBLIC dom
-  PUBLIC Threads::Threads
 )
 
-set_target_properties(screen PROPERTIES VERSION ${PROJECT_VERSION})
+if (NOT EMSCRIPTEN)
-set_target_properties(dom PROPERTIES VERSION ${PROJECT_VERSION})
+  find_package(Threads)
-set_target_properties(component PROPERTIES VERSION ${PROJECT_VERSION})
+  target_link_libraries(component
+    PUBLIC Threads::Threads
+  )
+endif()
 
 include(cmake/ftxui_set_options.cmake)
 ftxui_set_options(screen)
@@ -145,22 +156,13 @@ ftxui_check_coverage(screen)
 ftxui_check_coverage(dom)
 ftxui_check_coverage(component)
 
-if (FTXUI_BUILD_TESTS AND ${CMAKE_VERSION} VERSION_GREATER "3.11.4")
+include(cmake/ftxui_test.cmake)
-  include(cmake/ftxui_test.cmake)
+include(cmake/ftxui_benchmark.cmake)
-endif()
+include(cmake/ftxui_fuzzer.cmake)
-
-if(FTXUI_BUILD_EXAMPLES)
-  add_subdirectory(examples)
-endif()
-
-if(FTXUI_BUILD_DOCS)
-  add_subdirectory(doc)
-endif()
-
 include(cmake/iwyu.cmake)
 include(cmake/ftxui_export.cmake)
+include(cmake/ftxui_install.cmake)
+include(cmake/ftxui_package.cmake)
 
-if(FTXUI_ENABLE_INSTALL)
+add_subdirectory(examples)
-  include(cmake/ftxui_install.cmake)
+add_subdirectory(doc)
-  include(cmake/ftxui_package.cmake)
-endif()

README.md

@@ -35,8 +35,8 @@ A simple C++ library for terminal based user interfaces!
  * Simple and elegant syntax (in my opinion)
  * Keyboard & mouse navigation.
  * 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.com/FTXUI/examples/?file=component/menu_underline_animated_gallery), [Demo 2](https://arthursonzogni.com/FTXUI/examples/?file=component/button_style)
+ * 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.com/FTXUI/examples/?file=component/canvas_animated)
+ * Support for drawing. [Demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/canvas_animated)
  * No dependencies
  * Cross platform: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
  * Learn by [examples](#documentation), and [tutorials](#documentation)
@@ -47,8 +47,8 @@ A simple C++ library for terminal based user interfaces!
 
 - [Starter example project](https://github.com/ArthurSonzogni/ftxui-starter)
 - [Documentation](https://arthursonzogni.github.io/FTXUI/)
-- [Examples (WebAssembly)](https://arthursonzogni.com/FTXUI/examples/)
+- [Examples (WebAssembly)](https://arthursonzogni.github.io/FTXUI/examples/)
-- [Build using CMake](https://github.com/ArthurSonzogni/FTXUI/blob/master/doc/mainpage.md#using-cmake)
+- [Build using CMake](https://arthursonzogni.github.io/FTXUI/#build-cmake)
 
 ## Operating systems
 
@@ -111,7 +111,7 @@ Element can become flexible using the the `flex` decorator.
 
 ![image](https://user-images.githubusercontent.com/4759106/147243064-780ac7cc-605b-475f-94b8-cf7c4aed03a5.png)
 
-[See](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html) also this [demo](https://arthursonzogni.com/FTXUI/examples/?file=component/flexbox).
+[See](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html) also this [demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/flexbox).
 
 </details>
 
@@ -122,9 +122,12 @@ An element can be decorated using the functions:
   - `dim`
   - `inverted`
   - `underlined`
+  - `underlinedDouble`
   - `blink`
+  - `strikethrough`
   - `color`
   - `bgcolor`
+  - `hyperlink`
 
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2style_gallery_8cpp-example.html)
 
@@ -212,7 +215,7 @@ Prebuilt components are declared in [<ftxui/component/component.hpp>](https://ar
 
 <details><summary>Gallery</summary>
 
-[Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.com/FTXUI/examples/?file=component/gallery))
+[Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/gallery))
 
 ![image](https://user-images.githubusercontent.com/4759106/147247330-b60beb9f-e665-48b4-81c0-4b01ee95bc66.png)
 
@@ -324,6 +327,10 @@ Feel free to add your projects here:
 - [tabdeeli](https://github.com/typon/tabdeeli)
 - [tiles](https://github.com/tusharpm/tiles)
 - [cachyos-cli-installer](https://github.com/cachyos/new-cli-installer)
+- [beagle-config](https://github.com/SAtacker/beagle-config)
+- [turing_cmd](https://github.com/DanArmor/turing_cmd)
+- [StartUp](https://github.com/StubbornVegeta/StartUp)
+- [eCAL monitor](https://github.com/eclipse-ecal/ecal)
 
 ## [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
 
@@ -335,7 +342,7 @@ Several games using the FTXUI have been made during the Game Jam:
 - [DanteO](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/danteo.md)
 - [Sumo](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/sumo.md)
 - [Drag Me aROUND](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/drag_me_around.md)
-- [DisarmSelfDestruct](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/LightsRound.v.0.1.0.md)
+- [DisarmSelfDestruct](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/DisarmSelfDestruct.md)
 - [TheWorld](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/TheWorld.md)
 - [smoothlife](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/smoothlife.md)
 - [Consu](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/consu.md)
@@ -349,7 +356,7 @@ include(FetchContent)
 
 FetchContent_Declare(ftxui
   GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
-  GIT_TAG v2.0.0
+  GIT_TAG v3.0.0
 )
 
 FetchContent_GetProperties(ftxui)
@@ -360,7 +367,7 @@ endif()
 ```
 
 If you don't, the following packages have been created:
-- [vcpkg](https://vcpkg.info/port/ftxui)
+- [vcpkg](https://vcpkgx.com/details.html?package=ftxui)
 - [Arch Linux PKGBUILD](https://aur.archlinux.org/packages/ftxui-git/).
 - [conan.io](https://conan.io/center/ftxui)
 

cmake/ftxui-config.cmake.in

@@ -2,3 +2,5 @@
 
 include(CMakeFindDependencyMacro)
 find_dependency(Threads)
+
+include("${CMAKE_CURRENT_LIST_DIR}/ftxui-targets.cmake")

cmake/ftxui_benchmark.cmake

@@ -1,31 +1,21 @@
-if (NOT WIN32)
+if (NOT FTXUI_BUILD_TESTS OR
-  FetchContent_Declare(googlebenchmark
+    NOT ${CMAKE_VERSION} VERSION_GREATER "3.11.4" OR
-    GIT_REPOSITORY "https://github.com/google/benchmark"
+    WIN32
-    GIT_TAG 62937f91b5c763a8e119d0c20c67b87bde8eff1c 
-    GIT_PROGRESS TRUE
-  )
-
-  FetchContent_GetProperties(googlebenchmark)
-  set (BENCHMARK_ENABLE_GTEST_TESTS OFF CACHE INTERNAL "")
-  set (BENCHMARK_ENABLE_TESTING OFF CACHE INTERNAL "")
-  if(NOT googlebenchmark_POPULATED)
-    FetchContent_Populate(googlebenchmark)
-    add_subdirectory(
-      ${googlebenchmark_SOURCE_DIR}
-      ${googlebenchmark_BINARY_DIR}
-      EXCLUDE_FROM_ALL
     )
-  endif()
+  return()
-
-  add_executable(ftxui_benchmark
-    src/ftxui/dom/benchmark_test.cpp
-  )
-  target_link_libraries(ftxui_benchmark
-    PRIVATE dom
-    PRIVATE benchmark::benchmark
-    PRIVATE benchmark::benchmark_main
-  )
-  target_include_directories(ftxui_benchmark
-    PRIVATE src
-  )
 endif()
+
+include(cmake/ftxui_find_google_benchmark.cmake)
+
+add_executable(ftxui-benchmark
+  src/ftxui/dom/benchmark_test.cpp
+  )
+ftxui_set_options(ftxui-benchmark)
+target_link_libraries(ftxui-benchmark
+  PRIVATE dom
+  PRIVATE benchmark::benchmark
+  PRIVATE benchmark::benchmark_main
+  )
+target_include_directories(ftxui-benchmark
+  PRIVATE src
+  )

cmake/ftxui_export.cmake

@@ -4,5 +4,5 @@ add_library(ftxui::component ALIAS component)
 export(
   TARGETS screen dom component
   NAMESPACE ftxui::
-  FILE ${PROJECT_BINARY_DIR}/ftxui-targets.cmake
+  FILE "${PROJECT_BINARY_DIR}/ftxui-targets.cmake"
 )

cmake/ftxui_find_google_benchmark.cmake

@@ -0,0 +1,32 @@
+# Some developers would be happier with the google benchmark version provided
+# from their package manager. Use it if it is installed the package provide
+# cmake support.
+# https://github.com/ArthurSonzogni/FTXUI/issues/551
+find_package(benchmark QUIET)
+if (benchmark_FOUND)
+  return()
+endif()
+
+option(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
+option(FETCHCONTENT_QUIET FALSE)
+include(FetchContent)
+
+FetchContent_Declare(googlebenchmark
+  GIT_REPOSITORY "https://github.com/google/benchmark"
+  GIT_TAG        62937f91b5c763a8e119d0c20c67b87bde8eff1c 
+  GIT_PROGRESS   TRUE
+)
+
+FetchContent_GetProperties(googlebenchmark)
+set (BENCHMARK_ENABLE_GTEST_TESTS OFF CACHE INTERNAL "")
+set (BENCHMARK_ENABLE_TESTING OFF CACHE INTERNAL "")
+if(googlebenchmark_POPULATED)
+  return()
+endif()
+
+FetchContent_Populate(googlebenchmark)
+add_subdirectory(
+  ${googlebenchmark_SOURCE_DIR}
+  ${googlebenchmark_BINARY_DIR}
+  EXCLUDE_FROM_ALL
+)

cmake/ftxui_find_google_test.cmake

@@ -0,0 +1,33 @@
+# Some developers would be happier with the gtest version provided from their
+# package manager. Use it if it is installed the package provide cmake support.
+# https://github.com/ArthurSonzogni/FTXUI/issues/551
+find_package(GTest QUIET)
+
+if (GTest_FOUND)
+  return()
+endif()
+
+option(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
+option(FETCHCONTENT_QUIET FALSE)
+include(FetchContent)
+
+FetchContent_Declare(googletest
+  GIT_REPOSITORY "https://github.com/google/googletest"
+  GIT_TAG        23ef29555ef4789f555f1ba8c51b4c52975f0907
+  GIT_PROGRESS   TRUE
+)
+
+FetchContent_GetProperties(googletest)
+if(googletest_POPULATED)
+  return()
+endif()
+
+FetchContent_Populate(googletest)
+set(BUILD_GMOCK OFF CACHE INTERNAL "")
+set(INSTALL_GTEST OFF CACHE INTERNAL "")
+set(gtest_force_shared_crt ON CACHE INTERNAL "")
+add_subdirectory(
+  "${googletest_SOURCE_DIR}"
+  "${googletest_BINARY_DIR}"
+  EXCLUDE_FROM_ALL
+)

cmake/ftxui_fuzzer.cmake

@@ -1,22 +1,20 @@
+if (NOT FTXUI_BUILD_TESTS_FUZZER)
+  return()
+endif()
+
 set(CMAKE_C_COMPILER clang)
 set(CMAKE_CXX_COMPILER clang++)
+set(CMAKE_CXX_STANDARD 17)
 
 function(fuzz name)
   add_executable(${name}
     src/ftxui/component/${name}.cpp
   )
-  target_include_directories(${name}
+  target_include_directories(${name} PRIVATE src)
-    PRIVATE src
+  target_link_libraries(${name} PRIVATE component)
-  )
+  target_compile_options(${name} PRIVATE -fsanitize=fuzzer,address)
-  target_link_libraries(${name}
+  target_link_libraries(${name} PRIVATE -fsanitize=fuzzer,address)
-    PRIVATE component
+  target_compile_features(${name} PRIVATE cxx_std_17)
-  )
-  target_compile_options(${name}
-    PRIVATE -fsanitize=fuzzer,address
-  )
-  target_link_libraries(${name}
-    PRIVATE -fsanitize=fuzzer,address
-  )
 endfunction(fuzz)
 
 fuzz(terminal_input_parser_test_fuzzer)

cmake/ftxui_install.cmake

@@ -1,29 +1,60 @@
+if(NOT FTXUI_ENABLE_INSTALL)
+  return()
+endif()
+
 include(GNUInstallDirs)
-install(TARGETS screen dom component
-    EXPORT ftxui-export
-    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
-    ARCHIVE DESTINATION ${CMAKE_INSTALL_LIBDIR}
-)
-
-install(DIRECTORY include/ftxui DESTINATION ${CMAKE_INSTALL_INCLUDEDIR})
-
 include(CMakePackageConfigHelpers)
-configure_package_config_file(ftxui-config.cmake.in
-  ${CMAKE_CURRENT_BINARY_DIR}/ftxui-config.cmake
-  INSTALL_DESTINATION ${CMAKE_INSTALL_LIBDIR}/ftxui/cmake
-  PATH_VARS CMAKE_INSTALL_INCLUDEDIR
-)
-write_basic_package_version_file(
-  ftxui-config-version.cmake
-  VERSION ${PACKAGE_VERSION}
-  COMPATIBILITY AnyNewerVersion
-)
 
-install(FILES ${CMAKE_CURRENT_BINARY_DIR}/ftxui-config.cmake
+# ------------------------------------------------------------------------------
-  DESTINATION ${CMAKE_INSTALL_LIBDIR}/cmake/ftxui
+# Install the library and its public headers into the standard subdirectories
-)
+# ------------------------------------------------------------------------------
-install(EXPORT ftxui-export
+install(
-  FILE ftxui-config-version.cmake
+  TARGETS screen dom component
+  EXPORT ftxui-targets
+  )
+
+install(
+  DIRECTORY include/ftxui
+  DESTINATION "${CMAKE_INSTALL_INCLUDEDIR}"
+  )
+
+# ------------------------------------------------------------------------------
+# Install the exported cmake targets for use in other CMake projects.
+# ------------------------------------------------------------------------------
+install(
+  EXPORT ftxui-targets
   NAMESPACE ftxui::
-  DESTINATION ${CMAKE_INSTALL_LIBDIR}/cmake/ftxui
+  DESTINATION "${CMAKE_INSTALL_LIBDIR}/cmake/ftxui"
-)
+  )
+
+# ------------------------------------------------------------------------------
+# Create and install the ftuxi-config.cmake and ftuxi-config-version.cmake files
+# needed to support users of find_package()
+# ------------------------------------------------------------------------------
+configure_package_config_file(
+  "${CMAKE_CURRENT_SOURCE_DIR}/cmake/ftxui-config.cmake.in"
+  "${CMAKE_CURRENT_BINARY_DIR}/cmake/ftxui-config.cmake"
+  INSTALL_DESTINATION "${CMAKE_INSTALL_LIBDIR}/ftxui/cmake"
+  PATH_VARS CMAKE_INSTALL_INCLUDEDIR
+  )
+write_basic_package_version_file(
+  "${CMAKE_CURRENT_BINARY_DIR}/cmake/ftxui-config-version.cmake"
+  VERSION ${PACKAGE_VERSION}
+  COMPATIBILITY SameMajorVersion
+  )
+install(
+  FILES
+  "${CMAKE_CURRENT_BINARY_DIR}/cmake/ftxui-config.cmake"
+  "${CMAKE_CURRENT_BINARY_DIR}/cmake/ftxui-config-version.cmake"
+  DESTINATION "${CMAKE_INSTALL_LIBDIR}/cmake/ftxui"
+  )
+
+# ------------------------------------------------------------------------------
+# Create and install pkg-config file for easy use of library in build systems
+# other than CMake:
+# ------------------------------------------------------------------------------
+configure_file(ftxui.pc.in ${CMAKE_CURRENT_BINARY_DIR}/ftxui.pc @ONLY)
+install(
+  FILES "${CMAKE_CURRENT_BINARY_DIR}/ftxui.pc"
+  DESTINATION "${CMAKE_INSTALL_LIBDIR}/pkgconfig"
+  )

cmake/ftxui_package.cmake

@@ -1,3 +1,7 @@
+if(NOT FTXUI_ENABLE_INSTALL)
+  return()
+endif()
+
 if (UNIX AND NOT APPLE)
   set(CPACK_GENERATOR "DEB;External;RPM;STGZ;TBZ2;TGZ;TXZ;TZ;TZST;ZIP")
 elseif (UNIX AND APPLE)

cmake/ftxui_set_options.cmake

@@ -1,29 +1,48 @@
-find_program( CLANG_TIDY_EXE NAMES "clang-tidy" DOC "Path to clang-tidy executable" )
+find_program(CLANG_TIDY_EXE NAMES "clang-tidy" DOC "Path to clang-tidy executable" )
 if(NOT CLANG_TIDY_EXE)
   message(STATUS "clang-tidy not found.")
 else()
   message(STATUS "clang-tidy found: ${CLANG_TIDY_EXE}")
 endif()
 
-
 function(ftxui_set_options library)
-  set_target_properties(${library} PROPERTIES OUTPUT_NAME "ftxui-${library}")
+  message(STATUS "ftxui_set_options " ${library})
+  set_target_properties(${library} PROPERTIES VERSION ${PROJECT_VERSION})
+  if (NOT ${library} MATCHES "ftxui-*")
+    set_target_properties(${library} PROPERTIES OUTPUT_NAME "ftxui-${library}")
+  endif()
 
   if(CLANG_TIDY_EXE AND FTXUI_CLANG_TIDY)
     set_target_properties(${library}
       PROPERTIES CXX_CLANG_TIDY "${CLANG_TIDY_EXE};-warnings-as-errors=*"
     )
+
+    # By using "PUBLIC" as opposed to "SYSTEM INTERFACE", the compiler warning
+    # are enforced on the headers. This is behind "FTXUI_CLANG_TIDY", so that it
+    # applies only when developing FTXUI and on the CI. User's of the library
+    # get only the SYSTEM INTERFACE instead.
+    target_include_directories(${library}
+      PUBLIC
+        $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}/include>
+    )
+  else()
+    target_include_directories(${library} SYSTEM
+      INTERFACE
+        $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}/include>
+    )
   endif()
 
-  target_include_directories(${library}
+  target_include_directories(${library} SYSTEM
-    PUBLIC
+    INTERFACE
       $<INSTALL_INTERFACE:include>
-      $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}/include>
-    PRIVATE
-      src
   )
 
-  # C++17 is used. We require fold expression at least.
+  target_include_directories(${library}
+    PRIVATE
+      $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}/src>
+      $<BUILD_INTERFACE:${CMAKE_CURRENT_SOURCE_DIR}/include>
+  )
+
   target_compile_features(${library} PUBLIC cxx_std_17)
 
   # Force Microsoft Visual Studio to decode sources files in UTF-8. This applies
@@ -35,8 +54,10 @@ function(ftxui_set_options library)
   # Add as many warning as possible:
   if (WIN32)
     if (MSVC)
-      target_compile_options(${library} PRIVATE "/W3")
+      if(FTXUI_DEV_WARNINGS)
-      target_compile_options(${library} PRIVATE "/WX")
+        target_compile_options(${library} PRIVATE "/W3")
+        target_compile_options(${library} PRIVATE "/WX")
+      endif()
       target_compile_options(${library} PRIVATE "/wd4244")
       target_compile_options(${library} PRIVATE "/wd4267")
       target_compile_options(${library} PRIVATE "/D_CRT_SECURE_NO_WARNINGS")
@@ -44,13 +65,21 @@ function(ftxui_set_options library)
     # Force Win32 to UNICODE
     target_compile_definitions(${library} PRIVATE UNICODE _UNICODE)
   else()
-    target_compile_options(${library} PRIVATE "-Wall")
+    if(FTXUI_DEV_WARNINGS)
-    target_compile_options(${library} PRIVATE "-Wextra")
+      target_compile_options(${library} PRIVATE "-Wall")
-    target_compile_options(${library} PRIVATE "-pedantic")
+      target_compile_options(${library} PRIVATE "-Werror")
-    target_compile_options(${library} PRIVATE "-Werror")
+      target_compile_options(${library} PRIVATE "-Wextra")
-    target_compile_options(${library} PRIVATE "-Wmissing-declarations")
+  
-    target_compile_options(${library} PRIVATE "-Wdeprecated")
+      target_compile_options(${library} PRIVATE "-Wcast-align")
-    target_compile_options(${library} PRIVATE "-Wshadow")
+      target_compile_options(${library} PRIVATE "-Wdeprecated")
+      target_compile_options(${library} PRIVATE "-Wmissing-declarations")
+      target_compile_options(${library} PRIVATE "-Wnon-virtual-dtor")
+      target_compile_options(${library} PRIVATE "-Wnull-dereference")
+      target_compile_options(${library} PRIVATE "-Woverloaded-virtual")
+      target_compile_options(${library} PRIVATE "-Wpedantic")
+      target_compile_options(${library} PRIVATE "-Wshadow")
+      target_compile_options(${library} PRIVATE "-Wunused")
+    endif()
   endif()
 
   if (FTXUI_MICROSOFT_TERMINAL_FALLBACK)
@@ -60,9 +89,7 @@ function(ftxui_set_options library)
 endfunction()
 
 if (EMSCRIPTEN)
-  #string(APPEND CMAKE_CXX_FLAGS " -s ASSERTIONS=1")
   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

@@ -1,40 +1,27 @@
-enable_testing()
+if (NOT FTXUI_BUILD_TESTS)
-
+  return()
-option(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
-option(FETCHCONTENT_QUIET FALSE)
-include(FetchContent)
-
-FetchContent_Declare(googletest
-  GIT_REPOSITORY "https://github.com/google/googletest"
-  GIT_TAG        23ef29555ef4789f555f1ba8c51b4c52975f0907
-  GIT_PROGRESS   TRUE
-)
-FetchContent_GetProperties(googletest)
-if(NOT googletest_POPULATED)
-  FetchContent_Populate(googletest)
-  set(BUILD_GMOCK OFF CACHE INTERNAL "")
-  set(INSTALL_GTEST OFF CACHE INTERNAL "")
-  set(gtest_force_shared_crt ON CACHE INTERNAL "")
-  add_subdirectory(
-    ${googletest_SOURCE_DIR}
-    ${googletest_BINARY_DIR}
-    EXCLUDE_FROM_ALL
-  )
 endif()
 
-add_executable(tests
+enable_testing()
+
+include(cmake/ftxui_find_google_test.cmake)
+
+add_executable(ftxui-tests
   src/ftxui/component/animation_test.cpp
   src/ftxui/component/button_test.cpp
   src/ftxui/component/collapsible_test.cpp
   src/ftxui/component/component_test.cpp
   src/ftxui/component/component_test.cpp
   src/ftxui/component/container_test.cpp
+  src/ftxui/component/hoverable_test.cpp
   src/ftxui/component/input_test.cpp
   src/ftxui/component/menu_test.cpp
+  src/ftxui/component/modal_test.cpp
   src/ftxui/component/radiobox_test.cpp
   src/ftxui/component/receiver_test.cpp
   src/ftxui/component/resizable_split_test.cpp
   src/ftxui/component/screen_interactive_test.cpp
+  src/ftxui/component/slider_test.cpp
   src/ftxui/component/terminal_input_parser_test.cpp
   src/ftxui/component/toggle_test.cpp
   src/ftxui/dom/blink_test.cpp
@@ -49,6 +36,8 @@ add_executable(tests
   src/ftxui/dom/gauge_test.cpp
   src/ftxui/dom/gridbox_test.cpp
   src/ftxui/dom/hbox_test.cpp
+  src/ftxui/dom/hyperlink_test.cpp
+  src/ftxui/dom/linear_gradient_test.cpp
   src/ftxui/dom/scroll_indicator_test.cpp
   src/ftxui/dom/separator_test.cpp
   src/ftxui/dom/spinner_test.cpp
@@ -60,24 +49,22 @@ add_executable(tests
   src/ftxui/screen/string_test.cpp
 )
 
-target_link_libraries(tests
+target_link_libraries(ftxui-tests
   PRIVATE component
-  PRIVATE gtest
+  PRIVATE GTest::gtest
-  PRIVATE gtest_main
+  PRIVATE GTest::gtest_main
 )
-target_include_directories(tests
+target_include_directories(ftxui-tests
   PRIVATE src
 )
-ftxui_set_options(tests)
+target_compile_features(ftxui-tests PRIVATE cxx_std_20)
+
+if (FTXUI_MICROSOFT_TERMINAL_FALLBACK)
+  target_compile_definitions(ftxui-tests
+    PRIVATE "FTXUI_MICROSOFT_TERMINAL_FALLBACK")
+endif()
 
 include(GoogleTest)
-gtest_discover_tests(tests
+gtest_discover_tests(ftxui-tests
   DISCOVERY_TIMEOUT 600
 )
-
-
-include(cmake/ftxui_benchmark.cmake)
-
-if (FTXUI_BUILD_TESTS_FUZZER)
-  include(cmake/ftxui_fuzzer.cmake)
-endif()

cmake/iwyu.cmake

@@ -1,7 +1,7 @@
 find_program(iwyu_path NAMES include-what-you-use iwyu)
 if(iwyu_path)
   set_property(TARGET ${lib}
-    PROPERTY ${iwyu_path} -Xiwyu
+    PROPERTY "${iwyu_path}" -Xiwyu
-      --mapping_file ${CMAKE_CURRENT_SOURCE_DIR}/iwyu.impl
+      --mapping_file "${CMAKE_CURRENT_SOURCE_DIR}/iwyu.imp"
   )
 endif()

codecov.yml

@@ -0,0 +1,12 @@
+codecov:
+  require_ci_to_pass: no
+  notify:
+    after_n_builds: 4
+    wait_for_ci: yes
+
+coverage:
+  precision: 2
+  round: down
+  range: "50...100"
+
+comment: false

doc/CMakeLists.txt

@@ -1,22 +1,27 @@
+if(NOT FTXUI_BUILD_DOCS)
+  return()
+endif()
+
 find_package(Doxygen)
-if (DOXYGEN_FOUND)
+if (NOT DOXYGEN_FOUND)
-  # Generate example list for documentation
-  set(EXAMPLE_LIST "${CMAKE_CURRENT_BINARY_DIR}/example_list.md")
-  file(WRITE ${EXAMPLE_LIST} "# Examples")
-  get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
-  foreach(EXAMPLE IN LISTS EXAMPLES)
-    file(APPEND ${EXAMPLE_LIST} "\n@example examples/${EXAMPLE}.cpp")
-  endforeach(EXAMPLE IN LISTS EXAMPLES)
-
-  configure_file(Doxyfile.in Doxyfile @ONLY)
-
-  # note the option ALL which allows to build the docs together with the application
-  add_custom_target(doc
-    COMMAND ${DOXYGEN_EXECUTABLE} ${CMAKE_CURRENT_BINARY_DIR}/Doxyfile
-    WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
-    COMMENT "Generating API documentation with Doxygen"
-    VERBATIM
-    )
-else (DOXYGEN_FOUND)
   message("Doxygen need to be installed to generate the doxygen documentation")
-endif (DOXYGEN_FOUND)
+  return()
+endif()
+
+# Generate example list for documentation
+set(EXAMPLE_LIST "${CMAKE_CURRENT_BINARY_DIR}/example_list.md")
+file(WRITE ${EXAMPLE_LIST} "# Examples")
+get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
+foreach(EXAMPLE IN LISTS EXAMPLES)
+  file(APPEND ${EXAMPLE_LIST} "\n@example examples/${EXAMPLE}.cpp")
+endforeach(EXAMPLE IN LISTS EXAMPLES)
+
+configure_file(Doxyfile.in Doxyfile @ONLY)
+
+# note the option ALL which allows to build the docs together with the application
+add_custom_target(doc
+  COMMAND ${DOXYGEN_EXECUTABLE} ${CMAKE_CURRENT_BINARY_DIR}/Doxyfile
+  WORKING_DIRECTORY ${CMAKE_CURRENT_BINARY_DIR}
+  COMMENT "Generating API documentation with Doxygen"
+  VERBATIM
+  )

doc/doxygen_extra.css

@@ -178,11 +178,12 @@ div.headertitle {
 }
 
 div.fragment {
-  padding: 16px;
   background-color: #f3f3f3;
-  border: 0 solid;
-  transition: all 0.5s ease-in-out;
   border-radius:5px;
+  border: 0 solid;
+  border: none;
+  padding:16px;
+  transition: all 0.5s ease-in-out;
 }
 
 div.fragment:hover {
@@ -192,8 +193,9 @@ div.fragment:hover {
 
 div.line {
   font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-  font-size: 85%;
+  font-size: 90%;
-  line-height: 1.45;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-kerning: none;
   -webkit-transition-duration: 0;
   -moz-transition-duration: 0;
   -ms-transition-duration: 0;
@@ -206,15 +208,6 @@ div.line.glow {
   box-shadow: none;
 }
 
-pre.fragment {
-  border: 0 solid #C4CFE5;
-  padding: 16px;
-  background-color: #f3f3f3;
-  font-size: 85%;
-  line-height: 1.45;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-}
-
 /* @group Code Colorization */
 span.keyword {
   color: #808000

doc/mainpage.md

@@ -4,8 +4,8 @@
 
 Welcome to the FTXUI documentation!
 
-This is a brief tutorial. You are also encouraged to learn, by reading the
+This is a brief tutorial. You are also encouraged to self-learn by reading the
-[examples](./examples.html)
+[examples](./examples.html).
 
 @tableofcontents 
 
@@ -45,17 +45,19 @@ int main(void) {
 
 **output**
 ```bash
-┌────┐┌─────────────────────────────────────────────────────────────────┐┌─────┐
+┌────┐┌────────────────────────────────────┐┌─────┐
-│left││middle                                                           ││right│
+│left││middle                              ││right│
-└────┘└─────────────────────────────────────────────────────────────────┘└─────┘
+└────┘└────────────────────────────────────┘└─────┘
 ```
 
 # Build {#build}
 
 ## Using CMake {#build-cmake}
 
+This is an example configuration for your **CMakeLists.txt**
+
 CMakeLists.txt
-~~~cmake
+```cmake
 cmake_minimum_required (VERSION 3.11)
 
 # --- Fetch FTXUI --------------------------------------------------------------
@@ -89,38 +91,43 @@ target_link_libraries(ftxui-starter
   PRIVATE ftxui::component # Not needed for this example.
 )
 
-~~~
+```
 
-Build
+Subsequently, you build the project in the standard fashion as follows:
-~~~sh
+```bash
 mkdir build && cd build
 cmake ..
 make
 ./main
-~~~
+```
 
 # List of modules. {#modules}
 
-The project is made from into 3 modules:
+The project is comprised of 3 modules:
 
-1. **ftxui/screen** defines a `ftxui::Screen`, this is a grid of `ftxui::Pixel`.
+1. **ftxui/screen** defines a `ftxui::Screen`, a grid of `ftxui::Pixel`.
 
 2. **ftxui/dom** is the main module. It defines a hierarchical set of
    `ftxui::Element`.  An element draws something on the `ftxui::Screen`. It is
    responsive to the size of its container.
 
-3. **ftxui/component** The part is only needed if you need to respond to the
+3. **ftxui/component** The module is required if your program needs to respond
-   User input. It defines a set of `ftxui::Component`.  The use can navigates
+   to user input. It defines a set of `ftxui::Component`. These components can
+   be utilized to navigate the program by using the arrow keys and interacting
+   with widgets such as the checkbox. You can also make you own components.
+   The use can navigates
    using the arrow keys and interact with widgets like checkbox/inputbox/... You
    can make you own components.
 
 # screen {#module-screen}
 
-It defines a `ftxui::Screen`. This is a grid of `ftxui::Pixel`. A Pixel
+This is the visual element of the program. It defines a `ftxui::Screen`, which
-represent a Unicode character and its associated style (bold, colors, etc...).
+is a grid of `ftxui::Pixel`. A Pixel represents a Unicode character and its
-The screen can be printed as a string using `ftxui::Screen::ToString()`.
+associated style (bold, colors, etc.). The screen can be printed as a string
+using `ftxui::Screen::ToString()`. The following example highlights this
+process:
 
-~~~cpp
+```cpp
   #include <ftxui/screen/screen.hpp>
   #include <iostream>
 
@@ -136,12 +143,14 @@ The screen can be printed as a string using `ftxui::Screen::ToString()`.
     std::cout << screen.ToString();
     return EXIT_SUCCESS;
   }
-~~~
+```
 
 # dom {#module-dom}
 
 This module defines a hierarchical set of `ftxui::Element`. An element manages
-layout and can be responsive to the terminal dimensions.
+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
+number of operators:
 
 **Example:**
 ```cpp
@@ -165,7 +174,8 @@ document |= border
 
 **List of elements**
 
-They are all defined inside:
+The list of all elements are included and can be accessed by including the
+corresponding header file:
 ```cpp
 #include <ftxui/dom/elements.hpp>
 ```
@@ -175,41 +185,44 @@ They are all defined inside:
 ## text ## {#dom-text}
 
 The most simple widget. It displays a text.
-~~~cpp
+```cpp
 text("I am a piece of text");
-~~~
+```
-~~~bash
+```bash
 I am a piece of text.
-~~~
+```
 
 ## vtext {#dom-vtext}
 
-Same as `ftxui::text`, but vertical.
+Identical to `ftxui::text`, but displayed vertically.
-~~~cpp
+
+Code:
+```cpp
 vtext("HELLO");
-~~~
+```
-~~~bash
+
+Terminal output:
+```bash
 H
 E
 L
 L
 O
-~~~
+```
 
 ## paragraph {#dom-paragraph}
 
+Similar to `ftxui::text`, but the individual word are wrapped along multiple
+lines, depending on the width of its container.
+
+Sample Code:
 ```cpp
 paragraph("A very long text")
 ```
 
-Similar to `ftxui::text`, but this support line wrapping and alignments. The
-words are split by spaces
-
-[Paragraph example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2paragraph_8cpp-example.html)
-  
 ![ezgif com-gif-maker (4)](https://user-images.githubusercontent.com/4759106/147251370-983a06e7-6f41-4113-92b8-942f43d34d06.gif)
 
-See:
+For a more detailed example refer to [detailed example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2paragraph_8cpp-example.html). Paragraph also includes a number of other variants as shown below:
 ```cpp
 Element paragraph(std::string text);
 Element paragraphAlignLeft(std::string text);
@@ -221,25 +234,28 @@ Element paragraphAlignJustify(std::string text);
 
 ## border {#dom-border}
 
-Add a border around an element
+Adds a border around an element.
-~~~cpp
-border(text("The element"))
-~~~
 
-~~~bash
+Code:
+```cpp
+border(text("The element"))
+```
+
+Terminal output:
+```bash
 ┌───────────┐
 │The element│
 └───────────┘
-~~~
+```
 
-Same, with the pipe operator:
+You can achieve the same behavior by using the pipe operator.
 
+Code:
 ```cpp
 text("The element") | border
 ```
 
-Border come with different styles.
+Border also comes in a variety of styles as shown below:
-See:
 ```cpp
 Element border(Element);
 Element borderLight(Element);
@@ -254,24 +270,27 @@ Decorator borderWith(Pixel);
 
 ## window ## {#dom-window}
 
-A `ftxui::window` is a `ftxui::border`, but with some text on top of the border.
+A `ftxui::window` is a `ftxui::border`, but with an additional header. To add a
-Add a border around an element
+window around an element, wrap it and specify a string as the header.
-~~~cpp
+Code:
+```cpp
 window("The window", text("The element"))
-~~~
+```
 
-~~~bash
+Terminal output:
+```bash
 ┌The window─┐
 │The element│
 └───────────┘
-~~~
+```
 
 ## separator {#dom-separator}
 
-Display a vertical or horizontal line to visually split the content of a
+Displays a vertical/horizontal line to visually split the content of a
 container in two.
 
-~~~cpp
+Code:
+```cpp
 border(
   hbox({
     text("Left"), 
@@ -279,17 +298,17 @@ border(
     text("Right")
   })
 )
-~~~
+```
 
-~~~bash
+Terminal output:
+```bash
 ┌────┬─────┐
 │left│right│
 └────┴─────┘
-~~~
+```
 
 
-Separators come with different styles:
+Separators come in a variety of flavors as shown below:
-See:
 ```cpp
 Element separator(void);
 Element separatorLight();
@@ -311,18 +330,21 @@ Element separatorVSelector(float up,
 
 ## gauge {#dom-gauge}
 
-A gauge. It can be used to represent a progress bar.
+It constitutes a gauge. It can be used to represent a progress bar.
-~~~cpp
-border(gauge(0.5))
-~~~
 
-~~~bash
+Code:
+```cpp
+border(gauge(0.5))
+```
+
+Teminal output:
+```bash
 ┌────────────────────────────────────────────────────────────────────────────┐
 │██████████████████████████████████████                                      │
 └────────────────────────────────────────────────────────────────────────────┘
-~~~
+```
 
-A gauge can be displayed into several directions. See:
+Gauges can be displayed in many orientations as shown below:
 ```cpp
 Element gauge(float ratio);
 Element gaugeLeft(float ratio);
@@ -344,21 +366,21 @@ Element graph(GraphFunction);
 ```
 
 ## Colors {#dom-colors}
-A terminal console can usually display colored text and colored background.
 
-~~~cpp
+Most terminal consoles can display colored text and colored backgrounds. FTXUI
+supports every color palette:
+```cpp
 Decorator color(Color);
 Decorator bgcolor(Color);
-~~~
+```
 
-FTXUI support every color palette:
 
 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}
 
-On most terminal the following colors are supported:
+On most terminals the following colors are supported:
 - Default
 
 - Black
@@ -385,7 +407,7 @@ On most terminal the following colors are supported:
 - Yellow
 - YellowLight
 
-Example:
+Example use of the above colors using the pipe operator:
 ```cpp
 text("Blue foreground") | color(Color::Blue);
 text("Blue background") | bgcolor(Color::Blue);
@@ -405,7 +427,11 @@ text("HotPink") | color(Color::HotPink);
 
 ### TrueColor #{#dom-colors-true-color}
 
-On terminal supporting trueColor, you can directly chose the 24bit RGB color:
+On terminal supporting trueColor, you can directly use the 24bit RGB color
+space:
+
+Use the constructors below to specify the **RGB** or **HSV** values for your
+color:
 
 There are two constructors:
 ```cpp
@@ -418,98 +444,140 @@ 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
 
-## Style {#dom-style}
+## LinearGradient #{#dom-linear-gradient}
-A terminal console can usually display colored text and colored background.
-The text can also have different effects: bold, dim, underlined, inverted,
-blink.
 
-~~~cpp
+FTXUI supports linear gradient. Either on the foreground or the background.
+
+```cpp
+Decorator color(const LinearGradient&);
+Decorator bgcolor(const LinearGradient&);
+```
+
+A `ftxui::LinearGradient` is defined by an angle in degree, and a list of color
+stops.
+```cpp
+auto gradient = LinearGradient()
+  .Angle(45)
+  .AddStop(0.0, Color::Red)
+  .AddStop(0.5, Color::Green)
+  .AddStop(1.0, Color::Blue);
+```
+
+You can also use simplified constructors:
+```cpp
+LinearGradient(Color::Red, Color::Blue);
+```
+```cpp
+LinearGradient(45, Color::Red, Color::Blue);
+```
+
+See [demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/linear_gradient_gallery).
+
+
+## Style {#dom-style}
+In addition to colored text and colored backgrounds. Many terminals support text
+effects such as: `bold`, `dim`, `underlined`, `inverted`, `blink`.
+
+```cpp
 Element bold(Element);
 Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
+Element underlinedDouble(Element);
+Element strikethrough(Element);
 Element blink(Element);
 Decorator color(Color);
 Decorator bgcolor(Color);
-~~~
+Decorator colorgrad(LinearGradient);
+Decorator bgcolorgrad(LinearGradient);
+```
 
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2style_gallery_8cpp-example.html)
 
 ![image](https://user-images.githubusercontent.com/4759106/147244118-380bf834-9e33-40df-9ff0-07c10f2598ef.png)
 
-Example:
+To use these effects, simply wrap your elements with your desired effect:
-~~~cpp
+```cpp
 underlined(bold(text("This text is bold and underlined")))
-~~~
+```
 
-Tips: The pipe operator can be used to chain Decorator:
+Alternatively, use the pipe operator to chain it on your element:
-~~~cpp
+```cpp
-text("This text is bold")) | bold | underlined
+text("This text is bold") | bold | underlined
-~~~
+```
 
 ## Layout {#dom-layout}
 
-Element can be arranged together:
+Enables elements to be arranged in the following ways:
-  - horizontally with `ftxui::hbox`
+  - **Horizontally** with `ftxui::hbox`
-  - vertically with `ftxui::vbox`
+  - **Vertically** with `ftxui::vbox`
-  - inside a grid with `ftxui::gridbox`
+  - **Inside a grid** with `ftxui::gridbox`
-  - wrap along one direction using the `ftxui::flexbox`.
+  - **Wrapped along one direction** using the `ftxui::flexbox`.
   
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html) using `ftxui::hbox`, `ftxui::vbox` and `ftxui::filler`.
 
 ![image](https://user-images.githubusercontent.com/4759106/147242524-7103b5d9-1a92-4e2d-ac70-b3d6740061e3.png)
   
   
-[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.htmlp) using `ftxui::gridbox`:
+[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2gridbox_8cpp-example.htmlp)
+using `ftxui::gridbox`:
 
 ![image](https://user-images.githubusercontent.com/4759106/147242972-0db1f2e9-0790-496f-86e6-ed2c604f7a73.png)
 
-[Example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp) using flexbox:
+[Example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/hflow.cpp)
+using flexbox:
 
 ![image](https://user-images.githubusercontent.com/4759106/147243064-780ac7cc-605b-475f-94b8-cf7c4aed03a5.png)
 
-[See](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html) also this [demo](https://arthursonzogni.com/FTXUI/examples/?file=component/flexbox).
+Checkout this
+[example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2hflow_8cpp-example.html)
+and the associated
+[demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/flexbox).
 
-Element can become flexible using the the `ftxui::flex` decorator.
+Element can also become flexible using the the `ftxui::flex` decorator.
 
-**Examples**
+Code:
-~~~cpp
+```cpp
   hbox({
     text("left") | border ,
     text("middle") | border | flex,
     text("right") | border,
   });
-~~~
+```
-~~~bash
+Terminal output:
-┌────┐┌─────────────────────────────────────────────────────────────────┐┌─────┐
+```bash
-│left││middle                                                           ││right│
+┌────┐┌─────────────────────────────────────────────────────┐┌─────┐
-└────┘└─────────────────────────────────────────────────────────────────┘└─────┘
+│left││middle                                               ││right│
-~~~
+└────┘└─────────────────────────────────────────────────────┘└─────┘
+```
 
-~~~cpp
+Code:
+```cpp
   hbox({
     text("left") | border ,
     text("middle") | border | flex,
     text("right") | border | flex,
   });
-~~~
+```
-~~~bash
+
-┌────┐┌───────────────────────────────────┐┌───────────────────────────────────┐
+Terminal output:
-│left││middle                             ││right                              │
+```bash
-└────┘└───────────────────────────────────┘└───────────────────────────────────┘
+┌────┐┌───────────────────────────────┐┌───────────────────────────────┐
-~~~
+│left││middle                         ││right                          │
+└────┘└───────────────────────────────┘└───────────────────────────────┘
+```
 
 ## Table {#dom-table}
 
-A class to easily style a table of data.
+Enables easy formatting of data into a neat table like visual form.
 
-[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html):
+[Code example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2table_8cpp-example.html):
   
 ![image](https://user-images.githubusercontent.com/4759106/147250766-77d8ec9e-cf2b-486d-9866-1fd9f1bd2e6b.png)
 
 ## Canvas {#dom-canvas}
 
-See [<ftxui/dom/canvas.hpp>](./canvas_8hpp_source.html)
+See the API [<ftxui/dom/canvas.hpp>](./canvas_8hpp_source.html)
 
 ```cpp
   auto c = Canvas(100, 100);
@@ -517,41 +585,41 @@ See [<ftxui/dom/canvas.hpp>](./canvas_8hpp_source.html)
   auto element = canvas(c);
 ```
 
-Drawing can be made on a `ftxui::Canvas`, using braille, block, or simple
+Drawing can be performed on a `ftxui::Canvas`, using braille, block, or simple
 characters:
   
 Simple [example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/dom/canvas.cpp):
   
 ![image](https://user-images.githubusercontent.com/4759106/147245843-76cc62fb-ccb4-421b-aacf-939f9afb42fe.png)
 
-Complex [examples](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp):
+Complex [example](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/component/canvas_animated.cpp):
   
-![ezgif com-gif-maker (3)](https://user-images.githubusercontent.com/4759106/147250538-783a8246-98e0-4a25-b032-3bd3710549d1.gif)  
+![ezgif com-gif-maker (3)](https://user-images.githubusercontent.com/4759106/147250538-783a8246-98e0-4a25-b032-3bd3710549d1.gif)
-
 # component {#module-component}
 
-The `ftxui::component`module defines the logic to produce interactive component
+The `ftxui::component` module defines the logic that produces interactive
-responding to user's events (keyboard, mouse, etc...)
+components that respond to user events (keyboard, mouse, etc.).
 
-A `ftxui::ScreenInteractive` defines a main loop to render a component.
+A `ftxui::ScreenInteractive` defines a main loop that renders a component.
 
-A `ftxui::Component` is a shared pointer to a `ftxui::ComponentBase`. The later
+A `ftxui::Component` is a shared pointer to a `ftxui::ComponentBase`. The latter defines:
-defines
   - `ftxui::ComponentBase::Render()`: How to render the interface.
   - `ftxui::ComponentBase::OnEvent()`: How to react to events.
-  - `ftxui::ComponentBase::Add()`: Give a parent/child relation ship in between
+  - `ftxui::ComponentBase::Add()`: Construct a parent/child relationship
-    two component. This defines a tree a components, which help properly define
+    between two components. The tree of component is used to define how to
-    how keyboard navigation works.
+    navigate using the keyboard.
+
+`ftxui::Element` are used to render a single frame.
 
-`ftxui::Element` are used to render a single frame. On the other side
 `ftxui::Component` are used to render dynamic user interface, producing multiple
 frame, and updating its state on events.
 
-[Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.com/FTXUI/examples/?file=component/gallery))
+[Gallery](https://arthursonzogni.github.io/FTXUI/examples_2component_2gallery_8cpp-example.html) of multiple components. ([demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/gallery))
 
 ![image](https://user-images.githubusercontent.com/4759106/147247330-b60beb9f-e665-48b4-81c0-4b01ee95bc66.png)
 
-Predefined components are available in ["ftxui/dom/component.hpp"](./component_8hpp.html)
+All predefined components are available in
+["ftxui/dom/component.hpp"](./component_8hpp.html)
 
 \include ftxui/component/component.hpp
 
@@ -569,6 +637,8 @@ Produced by: `ftxui::Input()` from "ftxui/component/component.hpp"
 
 ## Menu {#component-menu}
 
+Defines a menu object. It contains a list of entries, one of them is selected.
+
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2menu_8cpp-example.html):
 
 ![image](https://user-images.githubusercontent.com/4759106/147247822-0035fd6f-bb13-4b3a-b057-77eb9291582f.png)
@@ -582,6 +652,8 @@ Produced by: `ftxui::Menu()` from "ftxui/component/component.hpp"
 
 ## Toggle {#component-toggle}
 
+A special kind of menu. The entries are displayed horizontally.
+
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2toggle_8cpp-example.html):
 
 ![image](https://user-images.githubusercontent.com/4759106/147249383-e2201cf1-b7b8-4a5a-916f-d761e3e7ae40.png)
@@ -594,6 +666,9 @@ Produced by: `ftxui::Toggle()` from "ftxui/component/component.hpp"
 
 ## CheckBox {#component-checkbox}
 
+This component defines a checkbox. It is a single entry that can be turned
+on/off.
+
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2checkbox_8cpp-example.html):
 
 ![image](https://user-images.githubusercontent.com/4759106/147246646-b86926a9-1ef9-4efb-af98-48a9b62acd81.png)
@@ -606,6 +681,8 @@ Produced by: `ftxui::Checkbox()` from "ftxui/component/component.hpp"
 
 ## RadioBox {#component-radiobox}
 
+A radiobutton component. This is a list of entries, where one can be turned on.
+
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2radiobox_8cpp-example.html):
   
 ![image](https://user-images.githubusercontent.com/4759106/147246401-809d14a5-6621-4e36-8dd9-a2d75ef2a94e.png)
@@ -618,6 +695,9 @@ Produced by: `ftxui::Radiobox()` from "ftxui/component/component.hpp"
 
 ## Dropdown {#component-dropdown}
 
+A drop down menu is a component that when checked display a list of element for
+the user to select one.
+
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2dropdown_8cpp-example.html):
 
 ![youtube-video-gif (3)](https://user-images.githubusercontent.com/4759106/147246982-1e821751-531c-4e1f-bc37-2fa290e143cd.gif)
@@ -626,6 +706,9 @@ Produced by: `ftxui::Dropdown()` from "ftxui/component/component.hpp"
 
 ## Slider {#component-slider}
 
+Represents a slider object that consists of a range with binned intermediate
+intervals. It can be created by `ftxui::Slider()`.
+
 [Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2slider_8cpp-example.html):
 
 ![image](https://user-images.githubusercontent.com/4759106/147249265-7e2cad75-082c-436e-affe-44a550c480ab.png)
@@ -634,7 +717,7 @@ Produced by: `ftxui::Slider()` from "ftxui/component/component.hpp"
 
 ## Renderer {#component-renderer}
 
-Produced by: `ftxui::Renderer()` from \ref 'ftxui/component/component.hpp'. This
+Produced by: `ftxui::Renderer()` from \ref ftxui/component/component.hpp. This
 component decorate another one by using a different function to render an
 interface.
 
@@ -647,11 +730,11 @@ auto renderer = Renderer(inner, [&] {
 });
 ```
 
-`ftxui::Renderer` also support the component decorator pattern:
+`ftxui::Renderer` also supports the component decorator pattern:
 ```cpp
 auto component = [...]
 component = component
-  | Renderer([] (Element e) { return e | border))
+  | Renderer([](Element e) { return e | border))
   | Renderer(bold)
 ```
 
@@ -663,9 +746,8 @@ component = component | border | bold;
 
 ## CatchEvent {#component-catchevent}
 
-Produced by: `ftxui::CatchEvent()` from \ref 'ftxui/component/component.hpp'.
+Produced by: `ftxui::CatchEvent()` from \ref ftxui/component/component.hpp.
-This component decorate another one and catch the events before the underlying
+This component decorate others, catching events before the underlying component.
-component.
 
 Examples:
 ```cpp
@@ -694,9 +776,9 @@ component = component
 
 ## Collapsible {#component-collapsible}
 
-Useful for section whose visibility can be toggle on/off by the user.
+Useful for visual elements whose visibility can be toggle on/off by the user.
-This is basically, a combinaison of a `ftxui::Checkbox` and a `ftxui::Maybe`
+Essentially, this the combination of the `ftxui::Checkbox()` and
-components.
+`ftxui::Maybe()` components.
 
 ```cpp
 auto collabsible = Collapsible("Show more", inner_element);
@@ -704,9 +786,9 @@ auto collabsible = Collapsible("Show more", inner_element);
 
 ## Maybe {#component-maybe}
 
-Produced by: `ftxui::Maybe()` from \ref `ftxui/component/component.hpp`.
+Produced by: `ftxui::Maybe()` from \ref ftxui/component/component.hpp.
-This component decorate another one, by showing/hiding it depending on a boolean
+This component can be utilized to show/hide any other component via a boolean or
-or a predicate.
+a predicate.
 
 Example with a boolean:
 ```cpp
@@ -721,9 +803,8 @@ auto component = Renderer([]{ return "Hello World!"; });
 auto maybe_component = Maybe(component, [&] { return time > 10; })
 ```
 
-`ftxui::Maybe` can be used as a decorator.
+As usual, `ftxui::Maybe` can also be used as a decorator:
-
+```cpp
-```
 component = component
   | Maybe(&a_boolean)
   | Maybe([&] { return time > 10; })
@@ -759,22 +840,20 @@ 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::{Left, Right, Top, Bottom}  {#component-resizable-split}
+## ResizableSplit  {#component-resizable-split}
 
-[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html):
+It defines a horizontal or vertical separation between two children components.
-
+The position of the split is variable and controllable using the mouse. 
-![ezgif com-gif-maker](https://user-images.githubusercontent.com/4759106/147248372-c55512fe-9b96-4b08-a1df-d05cf2cae431.gif)  
+There are four possible splits:
-
-Produced by:
 - `ftxui::ResizableSplitLeft()`
 - `ftxui::ResizableSplitRight()`
 - `ftxui::ResizableSplitTop()`
 - `ftxui::ResizableSplitBottom()`
 from "ftxui/component/component.hpp"
 
-It defines an horizontal or vertical separation in between two children
+[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html):
-component. The position of the split is variable and controllable using the
+
-mouse.
+![ezgif com-gif-maker](https://user-images.githubusercontent.com/4759106/147248372-c55512fe-9b96-4b08-a1df-d05cf2cae431.gif)  
 
 @htmlonly
 <script id="asciicast-tprMH2EdkUoMb7D2YxgMGgpzx" src="https://asciinema.org/a/tprMH2EdkUoMb7D2YxgMGgpzx.js" async></script>
@@ -782,16 +861,14 @@ mouse.
 
 ## Force a frame redraw. {#component-force-redraw}
 
-Whenever a new group of events have been processed: keyboard, mouse, window
+Typically, `ftxui::ScreenInteractive::Loop()` is responsible for drawing a new
-resize, etc..., the `ftxui::ScreenInteractive::Loop()` is responsible for
+frame whenever a new group of events (e.g keyboard, mouse, window resize, etc.)
-drawing a new frame.
+has been processed. However, you might want to react to arbitrary events that
-
+are unknown to FTXUI. To accomplish this, you must post events using
-You might want to react to arbitrary events that are unknown to FTXUI. This can
+`ftxui::ScreenInteractive::PostEvent` (**this is thread safe**) via a thread.
-be achieve by posting events via `ftxui::ScreenInteractive::PostEvent`, via a
+You will have to post the event `ftxui::Event::Custom`.
-thread. You can post the event`ftxui::Event::Custom`.
 
+Example:
 ```cpp
 screen->PostEvent(Event::Custom);
 ```
-
-`ftxui::ScreenInteractive::PostEvent` is thread safe.

examples/CMakeLists.txt

@@ -1,9 +1,14 @@
+if(NOT FTXUI_BUILD_EXAMPLES)
+  return()
+endif()
+
 set(EXAMPLES_DIR ${CMAKE_CURRENT_SOURCE_DIR})
 function(example name)
   add_executable(ftxui_example_${name} ${name}.cpp)
   target_link_libraries(ftxui_example_${name} PUBLIC ${DIRECTORY_LIB})
   file(RELATIVE_PATH dir ${EXAMPLES_DIR} ${CMAKE_CURRENT_SOURCE_DIR})
   set_property(GLOBAL APPEND PROPERTY FTXUI::EXAMPLES ${dir}/${name})
+  target_compile_features(ftxui_example_${name} PRIVATE cxx_std_17)
 endfunction(example)
 
 add_subdirectory(component)
@@ -19,6 +24,7 @@ if (EMSCRIPTEN)
   get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
   foreach(file
       "index.html"
+      "sw.js"
       "run_webassembly.py")
     configure_file(${file} ${file})
   endforeach(file)

examples/component/CMakeLists.txt

@@ -9,12 +9,15 @@ example(checkbox)
 example(checkbox_in_frame)
 example(collapsible)
 example(composition)
+example(custom_loop)
 example(dropdown)
 example(flexbox_gallery)
 example(focus)
+example(focus_cursor)
 example(gallery)
 example(homescreen)
 example(input)
+example(linear_gradient_gallery)
 example(maybe)
 example(menu)
 example(menu2)
@@ -25,6 +28,7 @@ example(menu_multiple)
 example(menu_style)
 example(menu_underline_animated_gallery)
 example(modal_dialog)
+example(modal_dialog_custom)
 example(nested_screen)
 example(print_key_press)
 example(radiobox)
@@ -32,6 +36,7 @@ example(radiobox_in_frame)
 example(renderer)
 example(resizable_split)
 example(slider)
+example(slider_direction)
 example(slider_rgb)
 example(tab_horizontal)
 example(tab_vertical)

examples/component/button.cpp

@@ -9,7 +9,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   int value = 50;
 
   // The tree of components. This defines how to navigate using the keyboard.

examples/component/button_animated.cpp

@@ -11,7 +11,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   int value = 50;
 
   // The tree of components. This defines how to navigate using the keyboard.

examples/component/button_in_frame.cpp

@@ -11,7 +11,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   int counter = 0;
   auto on_click = [&] { counter++; };
 

examples/component/button_style.cpp

@@ -1,4 +1,3 @@
-#include <memory>  // for shared_ptr
 #include <string>  // for operator+, to_string
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
@@ -6,12 +5,12 @@
 #include "ftxui/component/component_base.hpp"      // for Component
 #include "ftxui/component/component_options.hpp"   // for ButtonOption
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for separator, Element, text, border
+#include "ftxui/dom/elements.hpp"  // for Element, separator, text, border
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Green, Color::Red
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   int value = 0;
   auto action = [&] { value++; };
   auto action_renderer =

examples/component/canvas_animated.cpp

@@ -14,7 +14,7 @@
 #include "ftxui/dom/canvas.hpp"                    // for Canvas
 #include "ftxui/screen/color.hpp"  // for Color, Color::Red, Color::Blue, Color::Green, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   int mouse_x = 0;

examples/component/checkbox.cpp

@@ -8,12 +8,12 @@
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   Component input_list = Container::Vertical({});
   std::vector<std::string> items(100, "");
-  for (int i = 0; i < items.size(); ++i) {
+  for (size_t i = 0; i < items.size(); ++i) {
     input_list->Add(Input(&(items[i]), "placeholder " + std::to_string(i)));
   }
 

examples/component/checkbox_in_frame.cpp

@@ -10,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::array<bool, 30> states;
 
   auto container = Container::Vertical({});

examples/component/collapsible.cpp

@@ -26,7 +26,7 @@ Component Empty() {
   return std::make_shared<ComponentBase>();
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto component =
       Collapsible("Collapsible 1",
                   Inner({

examples/component/composition.cpp

@@ -11,7 +11,7 @@ using namespace ftxui;
 
 // An example of how to compose multiple components into one and maintain their
 // interactiveness.
-int main(int argc, const char* argv[]) {
+int main() {
   auto left_count = 0;
   auto right_count = 0;
 

examples/component/custom_loop.cpp

@@ -0,0 +1,55 @@
+#include <stdlib.h>                   // for EXIT_SUCCESS
+#include <chrono>                     // for milliseconds
+#include <ftxui/component/event.hpp>  // for Event
+#include <ftxui/component/mouse.hpp>  // for ftxui
+#include <ftxui/dom/elements.hpp>  // for text, separator, Element, operator|, vbox, border
+#include <memory>                  // for allocator, shared_ptr
+#include <string>                  // for operator+, to_string
+#include <thread>                  // for sleep_for
+
+#include "ftxui/component/component.hpp"  // for CatchEvent, Renderer, operator|=
+#include "ftxui/component/loop.hpp"       // for Loop
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+int main() {
+  using namespace ftxui;
+  auto screen = ScreenInteractive::FitComponent();
+
+  // Create a component counting the number of frames drawn and event handled.
+  int custom_loop_count = 0;
+  int frame_count = 0;
+  int event_count = 0;
+  auto component = Renderer([&] {
+    frame_count++;
+    return vbox({
+               text("This demonstrates using a custom ftxui::Loop. It "),
+               text("runs at 100 iterations per seconds. The FTXUI events "),
+               text("are all processed once per iteration and a new frame "),
+               text("is rendered as needed"),
+               separator(),
+               text("ftxui event count: " + std::to_string(event_count)),
+               text("ftxui frame count: " + std::to_string(frame_count)),
+               text("Custom loop count: " + std::to_string(custom_loop_count)),
+           }) |
+           border;
+  });
+
+  component |= CatchEvent([&](Event) -> bool {
+    event_count++;
+    return false;
+  });
+
+  Loop loop(&screen, component);
+
+  while (!loop.HasQuitted()) {
+    custom_loop_count++;
+    loop.RunOnce();
+    std::this_thread::sleep_for(std::chrono::milliseconds(10));
+  }
+
+  return EXIT_SUCCESS;
+}
+
+// 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.

examples/component/dropdown.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/component/component.hpp"  // for Dropdown, Horizontal, Vertical
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   std::vector<std::string> entries = {

examples/component/flexbox_gallery.cpp

@@ -13,7 +13,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::Fullscreen();
 
   int direction_index = 0;

examples/component/focus.cpp

@@ -31,7 +31,7 @@ Element make_grid() {
   return gridbox(rows);
 };
 
-int main(int argc, const char* argv[]) {
+int main() {
   float focus_x = 0.5f;
   float focus_y = 0.5f;
 

examples/component/focus_cursor.cpp

@@ -0,0 +1,38 @@
+#include <ftxui/component/captured_mouse.hpp>  // for ftxui
+#include <string>  // for allocator, operator+, char_traits, string
+
+#include "ftxui/component/component.hpp"           // for Renderer, Vertical
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
+#include "ftxui/dom/elements.hpp"  // for text, Decorator, focus, focusCursorBar, focusCursorBarBlinking, focusCursorBlock, focusCursorBlockBlinking, focusCursorUnderline, focusCursorUnderlineBlinking, hbox, Element
+
+using namespace ftxui;
+
+Component Instance(std::string label, Decorator focusCursor) {
+  return Renderer([=](bool focused) {
+    if (focused) {
+      return hbox({
+          text("> " + label + " "),
+          focusCursor(text(" ")),
+      });
+    }
+    return text("  " + label + " ");
+  });
+};
+
+int main() {
+  auto screen = ScreenInteractive::Fullscreen();
+  screen.Loop(Container::Vertical({
+      Instance("focus", focus),
+      Instance("focusCursorBlock", focusCursorBlock),
+      Instance("focusCursorBlockBlinking", focusCursorBlockBlinking),
+      Instance("focusCursorBar", focusCursorBar),
+      Instance("focusCursorBarBlinking", focusCursorBarBlinking),
+      Instance("focusCursorUnderline", focusCursorUnderline),
+      Instance("focusCursorUnderlineBlinking", focusCursorUnderlineBlinking),
+  }));
+  return 0;
+}
+
+// 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.

examples/component/gallery.cpp

@@ -23,7 +23,7 @@ Component Wrap(std::string name, Component component) {
   });
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::FitComponent();
 
   // -- Menu

examples/component/homescreen.cpp

@@ -1,17 +1,18 @@
 #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 <functional>  // for ref, reference_wrapper, function
 #include <memory>      // for allocator, shared_ptr, __shared_ptr_access
-#include <string>  // for string, basic_string, operator+, to_string, char_traits
+#include <string>  // for string, basic_string, char_traits, operator+, to_string
 #include <thread>   // for sleep_for, thread
 #include <utility>  // for move
 #include <vector>   // for vector
 
 #include "../dom/color_info_sorted_2d.ipp"  // for ColorInfoSorted2D
 #include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, ResizableSplitLeft, Tab
-#include "ftxui/component/component_base.hpp"     // for ComponentBase
+#include "ftxui/component/component_base.hpp"  // for ComponentBase, Component
 #include "ftxui/component/component_options.hpp"  // for MenuOption, InputOption
 #include "ftxui/component/event.hpp"              // for Event, Event::Custom
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
@@ -23,7 +24,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::Fullscreen();
 
   // ---------------------------------------------------------------------------
@@ -499,13 +500,18 @@ int main(int argc, const char* argv[]) {
     });
   });
 
-  bool refresh_ui_continue = true;
+  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);
-      shift++;
+      // The |shift| variable belong to the main thread. `screen.Post(task)`
-      screen.PostEvent(Event::Custom);
+      // 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);
     }
   });
 

examples/component/input.cpp

@@ -9,7 +9,7 @@
 #include "ftxui/dom/elements.hpp"  // for text, hbox, separator, Element, operator|, vbox, border
 #include "ftxui/util/ref.hpp"  // for Ref
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   std::string first_name;

examples/component/linear_gradient_gallery.cpp

@@ -0,0 +1,56 @@
+#include <ftxui/component/component_base.hpp>  // for ComponentBase, Component
+#include <ftxui/dom/elements.hpp>  // for operator|, Element, flex, bgcolor, text, vbox, center
+#include <ftxui/dom/linear_gradient.hpp>  // for LinearGradient
+#include <ftxui/screen/color.hpp>         // for Color, Color::Blue, Color::Red
+#include <memory>                         // for __shared_ptr_access, shared_ptr
+#include <string>  // for allocator, operator+, char_traits, string, to_string
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Slider, Renderer, Vertical
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+int main() {
+  using namespace ftxui;
+  auto screen = ScreenInteractive::Fullscreen();
+
+  int angle = 180.f;
+  float start = 0.f;
+  float end = 1.f;
+
+  std::string slider_angle_text;
+  std::string slider_start_text;
+  std::string slider_end_text;
+
+  auto slider_angle = Slider(&slider_angle_text, &angle, 0, 360);
+  auto slider_start = Slider(&slider_start_text, &start, 0.f, 1.f);
+  auto slider_end = Slider(&slider_end_text, &end, 0.f, 1.f);
+
+  auto layout = Container::Vertical({
+      slider_angle,
+      slider_start,
+      slider_end,
+  });
+
+  auto renderer = Renderer(layout, [&] {
+    slider_angle_text = "angle = " + std::to_string(angle) + "°";
+    slider_start_text = "start = " + std::to_string(int(start * 100)) + "%";
+    slider_end_text = "end   = " + std::to_string(int(end * 100)) + "%";
+
+    auto background = text("Gradient") | center |
+                      bgcolor(LinearGradient()
+                                  .Angle(angle)
+                                  .Stop(Color::Blue, start)
+                                  .Stop(Color::Red, end));
+    return vbox({
+               background | flex,
+               layout->Render(),
+           }) |
+           flex;
+  });
+
+  screen.Loop(renderer);
+}
+
+// Copyright 2023 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

examples/component/maybe.cpp

@@ -1,17 +1,16 @@
-#include <memory>  // for shared_ptr
+#include <string>  // for string, allocator, basic_string
-#include <string>  // for string, basic_string, allocator
 #include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/component.hpp"  // for operator|, Maybe, Checkbox, Radiobox, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"      // for Component
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for border, color, operator|, text, Element
+#include "ftxui/dom/elements.hpp"  // for Element, border, color, operator|, text
 #include "ftxui/screen/color.hpp"  // for Color, Color::Red
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> entries = {
       "entry 1",
       "entry 2",

examples/component/menu.cpp

@@ -8,7 +8,7 @@
 #include "ftxui/component/component_options.hpp"   // for MenuOption
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto screen = ScreenInteractive::TerminalOutput();
 

examples/component/menu2.cpp

@@ -10,7 +10,7 @@
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for text, separator, bold, hcenter, vbox, hbox, gauge, Element, operator|, border
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto screen = ScreenInteractive::TerminalOutput();
 

examples/component/menu_entries.cpp

@@ -28,7 +28,7 @@ MenuEntryOption Colored(ftxui::Color c) {
   return option;
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
 
   int selected = 0;

examples/component/menu_entries_animated.cpp

@@ -24,7 +24,7 @@ MenuEntryOption Colored(ftxui::Color c) {
   return option;
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
 
   int selected = 0;

examples/component/menu_in_frame.cpp

@@ -10,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> entries;
   int selected = 0;
 

examples/component/menu_multiple.cpp

@@ -17,7 +17,7 @@ Component Window(std::string title, Component component) {
   });
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   int menu_selected[] = {0, 0, 0};
   std::vector<std::vector<std::string>> menu_entries = {
       {

examples/component/menu_style.cpp

@@ -1,14 +1,14 @@
 #include <array>       // for array
 #include <chrono>      // for milliseconds
 #include <functional>  // for function
-#include <memory>      // for shared_ptr, __shared_ptr_access, allocator
+#include <memory>      // for __shared_ptr_access, shared_ptr, allocator
-#include <string>      // for string, char_traits, basic_string, operator+
+#include <string>      // for string, char_traits, operator+, basic_string
 #include <vector>      // for vector
 
 #include "ftxui/component/animation.hpp"  // for ElasticOut, Linear
 #include "ftxui/component/component.hpp"  // for Menu, Horizontal, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"     // for ComponentBase
-#include "ftxui/component/component_options.hpp"  // for MenuOption, MenuEntryOption, AnimatedColorOption, AnimatedColorsOption, UnderlineOption
+#include "ftxui/component/component_options.hpp"  // for MenuOption, EntryState, MenuEntryOption, AnimatedColorOption, AnimatedColorsOption, UnderlineOption
 #include "ftxui/component/mouse.hpp"              // for ftxui
 #include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for separator, operator|, Element, text, bgcolor, hbox, bold, color, filler, border, vbox, borderDouble, dim, flex, hcenter
@@ -30,7 +30,7 @@ Component HMenu3(std::vector<std::string>* entries, int* selected);
 Component HMenu4(std::vector<std::string>* entries, int* selected);
 Component HMenu5(std::vector<std::string>* entries, int* selected);
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
 
   std::vector<std::string> entries{

examples/component/menu_underline_animated_gallery.cpp

@@ -1,6 +1,6 @@
 #include <chrono>  // for operator""ms, literals
-#include <memory>  // for shared_ptr, __shared_ptr_access, allocator
+#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
-#include <string>  // for string, basic_string, operator+, to_string
+#include <string>  // for string, operator+, to_string, basic_string
 #include <vector>  // for vector
 
 #include "ftxui/component/animation.hpp"       // for BackOut, Duration
@@ -27,7 +27,7 @@ Component Text(const std::string& t) {
   return Renderer([t] { return text(t) | borderEmpty; });
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace std::literals;
   std::vector<std::string> tab_values{
       "Tab 1", "Tab 2", "Tab 3", "A very very long tab", "탭",

examples/component/modal_dialog.cpp

@@ -1,94 +1,83 @@
-#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
+#include <ftxui/component/component_options.hpp>  // for ButtonOption
-#include <string>  // for string, basic_string, char_traits, operator+
+#include <ftxui/component/mouse.hpp>              // for ftxui
-#include <vector>  // for vector
+#include <functional>                             // for function
+#include <memory>                                 // for allocator, shared_ptr
 
-#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, operator|=, Renderer, Vertical, Modal
-#include "ftxui/component/component.hpp"  // for Button, Renderer, Horizontal, Tab
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
-#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/dom/elements.hpp"  // for operator|, separator, text, size, Element, vbox, border, GREATER_THAN, WIDTH, center, HEIGHT
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
-#include "ftxui/dom/elements.hpp"  // for operator|, Element, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
+using namespace ftxui;
+
+auto button_style = ButtonOption::Animated();
+
+// Definition of the main component. The details are not important.
+Component MainComponent(std::function<void()> show_modal,
+                        std::function<void()> exit) {
+  auto component = Container::Vertical({
+      Button("Show modal", show_modal, button_style),
+      Button("Quit", exit, button_style),
+  });
+  // Polish how the two buttons are rendered:
+  component |= Renderer([&](Element inner) {
+    return vbox({
+               text("Main component"),
+               separator(),
+               inner,
+           })                                //
+           | size(WIDTH, GREATER_THAN, 15)   //
+           | size(HEIGHT, GREATER_THAN, 15)  //
+           | border                          //
+           | center;                         //
+  });
+  return component;
+}
+
+// Definition of the modal component. The details are not important.
+Component ModalComponent(std::function<void()> do_nothing,
+                         std::function<void()> hide_modal) {
+  auto component = Container::Vertical({
+      Button("Do nothing", do_nothing, button_style),
+      Button("Quit modal", hide_modal, button_style),
+  });
+  // Polish how the two buttons are rendered:
+  component |= Renderer([&](Element inner) {
+    return vbox({
+               text("Modal component "),
+               separator(),
+               inner,
+           })                               //
+           | size(WIDTH, GREATER_THAN, 30)  //
+           | border;                        //
+  });
+  return component;
+}
 
 int main(int argc, const char* argv[]) {
-  using namespace ftxui;
   auto screen = ScreenInteractive::TerminalOutput();
 
-  // There are two layers. One at depth = 0 and the modal window at depth = 1;
+  // State of the application:
-  int depth = 0;
+  bool modal_shown = false;
 
-  // The current rating of FTXUI.
+  // Some actions modifying the state:
-  std::string rating = "3/5 stars";
+  auto show_modal = [&] { modal_shown = true; };
+  auto hide_modal = [&] { modal_shown = false; };
+  auto exit = screen.ExitLoopClosure();
+  auto do_nothing = [&] {};
 
-  // At depth=0, two buttons. One for rating FTXUI and one for quitting.
+  // Instanciate the main and modal components:
-  auto button_rate_ftxui = Button("Rate FTXUI", [&] { depth = 1; });
+  auto main_component = MainComponent(show_modal, exit);
-  auto button_quit = Button("Quit", screen.ExitLoopClosure());
+  auto modal_component = ModalComponent(do_nothing, hide_modal);
 
-  auto depth_0_container = Container::Horizontal({
+  // Use the `Modal` function to use together the main component and its modal
-      button_rate_ftxui,
+  // window. The |modal_shown| boolean controls whether the modal is shown or
-      button_quit,
+  // not.
-  });
+  main_component |= Modal(modal_component, &modal_shown);
-  auto depth_0_renderer = Renderer(depth_0_container, [&] {
-    return vbox({
-               text("Modal dialog example"),
-               separator(),
-               text("☆☆☆ FTXUI:" + rating + " ☆☆☆") | bold,
-               filler(),
-               hbox({
-                   button_rate_ftxui->Render(),
-                   filler(),
-                   button_quit->Render(),
-               }),
-           }) |
-           border | size(HEIGHT, GREATER_THAN, 18) | center;
-  });
 
-  // At depth=1, The "modal" window.
+  screen.Loop(main_component);
-  std::vector<std::string> rating_labels = {
-      "1/5 stars", "2/5 stars", "3/5 stars", "4/5 stars", "5/5 stars",
-  };
-  auto on_rating = [&](std::string new_rating) {
-    rating = new_rating;
-    depth = 0;
-  };
-  auto depth_1_container = Container::Horizontal({
-      Button(&rating_labels[0], [&] { on_rating(rating_labels[0]); }),
-      Button(&rating_labels[1], [&] { on_rating(rating_labels[1]); }),
-      Button(&rating_labels[2], [&] { on_rating(rating_labels[2]); }),
-      Button(&rating_labels[3], [&] { on_rating(rating_labels[3]); }),
-      Button(&rating_labels[4], [&] { on_rating(rating_labels[4]); }),
-  });
-
-  auto depth_1_renderer = Renderer(depth_1_container, [&] {
-    return vbox({
-               text("Do you like FTXUI?"),
-               separator(),
-               hbox(depth_1_container->Render()),
-           }) |
-           border;
-  });
-
-  auto main_container = Container::Tab(
-      {
-          depth_0_renderer,
-          depth_1_renderer,
-      },
-      &depth);
-
-  auto main_renderer = Renderer(main_container, [&] {
-    Element document = depth_0_renderer->Render();
-
-    if (depth == 1) {
-      document = dbox({
-          document,
-          depth_1_renderer->Render() | clear_under | center,
-      });
-    }
-    return document;
-  });
-
-  screen.Loop(main_renderer);
   return 0;
 }
 
-// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.

examples/component/modal_dialog_custom.cpp

@@ -0,0 +1,94 @@
+#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
+#include <string>  // for string, basic_string, char_traits, operator+
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Renderer, Horizontal, Tab
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
+
+int main() {
+  using namespace ftxui;
+  auto screen = ScreenInteractive::TerminalOutput();
+
+  // There are two layers. One at depth = 0 and the modal window at depth = 1;
+  int depth = 0;
+
+  // The current rating of FTXUI.
+  std::string rating = "3/5 stars";
+
+  // At depth=0, two buttons. One for rating FTXUI and one for quitting.
+  auto button_rate_ftxui = Button("Rate FTXUI", [&] { depth = 1; });
+  auto button_quit = Button("Quit", screen.ExitLoopClosure());
+
+  auto depth_0_container = Container::Horizontal({
+      button_rate_ftxui,
+      button_quit,
+  });
+  auto depth_0_renderer = Renderer(depth_0_container, [&] {
+    return vbox({
+               text("Modal dialog example"),
+               separator(),
+               text("☆☆☆ FTXUI:" + rating + " ☆☆☆") | bold,
+               filler(),
+               hbox({
+                   button_rate_ftxui->Render(),
+                   filler(),
+                   button_quit->Render(),
+               }),
+           }) |
+           border | size(HEIGHT, GREATER_THAN, 18) | center;
+  });
+
+  // At depth=1, The "modal" window.
+  std::vector<std::string> rating_labels = {
+      "1/5 stars", "2/5 stars", "3/5 stars", "4/5 stars", "5/5 stars",
+  };
+  auto on_rating = [&](std::string new_rating) {
+    rating = new_rating;
+    depth = 0;
+  };
+  auto depth_1_container = Container::Horizontal({
+      Button(&rating_labels[0], [&] { on_rating(rating_labels[0]); }),
+      Button(&rating_labels[1], [&] { on_rating(rating_labels[1]); }),
+      Button(&rating_labels[2], [&] { on_rating(rating_labels[2]); }),
+      Button(&rating_labels[3], [&] { on_rating(rating_labels[3]); }),
+      Button(&rating_labels[4], [&] { on_rating(rating_labels[4]); }),
+  });
+
+  auto depth_1_renderer = Renderer(depth_1_container, [&] {
+    return vbox({
+               text("Do you like FTXUI?"),
+               separator(),
+               hbox(depth_1_container->Render()),
+           }) |
+           border;
+  });
+
+  auto main_container = Container::Tab(
+      {
+          depth_0_renderer,
+          depth_1_renderer,
+      },
+      &depth);
+
+  auto main_renderer = Renderer(main_container, [&] {
+    Element document = depth_0_renderer->Render();
+
+    if (depth == 1) {
+      document = dbox({
+          document,
+          depth_1_renderer->Render() | clear_under | center,
+      });
+    }
+    return document;
+  });
+
+  screen.Loop(main_renderer);
+  return 0;
+}
+
+// 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.

examples/component/nested_screen.cpp

@@ -35,7 +35,7 @@ void Nested(std::string path) {
   screen.Loop(renderer);
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::FitComponent();
   auto button_quit = Button("Quit", screen.ExitLoopClosure());
   auto button_nested = Button("Nested", [] { Nested(""); });

examples/component/print_key_press.cpp

@@ -25,7 +25,7 @@ std::string Stringify(Event event) {
 
   out = "(" + out + " ) -> ";
   if (event.is_character()) {
-    out += "character(" + event.character() + ")";
+    out += "Event::Character(\"" + event.character() + "\")";
   } else if (event.is_mouse()) {
     out += "mouse";
     switch (event.mouse().button) {
@@ -66,13 +66,75 @@ std::string Stringify(Event event) {
     out += "(" +  //
            std::to_string(event.mouse().x) + "," +
            std::to_string(event.mouse().y) + ")";
+  } else if (event == Event::ArrowLeft) {
+    out += "Event::ArrowLeft";
+  } else if (event == Event::ArrowRight) {
+    out += "Event::ArrowRight";
+  } else if (event == Event::ArrowUp) {
+    out += "Event::ArrowUp";
+  } else if (event == Event::ArrowDown) {
+    out += "Event::ArrowDown";
+  } else if (event == Event::ArrowLeftCtrl) {
+    out += "Event::ArrowLeftCtrl";
+  } else if (event == Event ::ArrowRightCtrl) {
+    out += "Event::ArrowRightCtrl";
+  } else if (event == Event::ArrowUpCtrl) {
+    out += "Event::ArrowUpCtrl";
+  } else if (event == Event::ArrowDownCtrl) {
+    out += "Event::ArrowDownCtrl";
+  } else if (event == Event::Backspace) {
+    out += "Event::Backspace";
+  } else if (event == Event::Delete) {
+    out += "Event::Delete";
+  } else if (event == Event::Escape) {
+    out += "Event::Escape";
+  } else if (event == Event::Return) {
+    out += "Event::Return";
+  } else if (event == Event::Tab) {
+    out += "Event::Tab";
+  } else if (event == Event::TabReverse) {
+    out += "Event::TabReverse";
+  } else if (event == Event::F1) {
+    out += "Event::F1";
+  } else if (event == Event::F2) {
+    out += "Event::F2";
+  } else if (event == Event::F3) {
+    out += "Event::F3";
+  } else if (event == Event::F4) {
+    out += "Event::F4";
+  } else if (event == Event::F5) {
+    out += "Event::F5";
+  } else if (event == Event::F6) {
+    out += "Event::F6";
+  } else if (event == Event::F7) {
+    out += "Event::F7";
+  } else if (event == Event::F8) {
+    out += "Event::F8";
+  } else if (event == Event::F9) {
+    out += "Event::F9";
+  } else if (event == Event::F10) {
+    out += "Event::F10";
+  } else if (event == Event::F11) {
+    out += "Event::F11";
+  } else if (event == Event::F12) {
+    out += "Event::F12";
+  } else if (event == Event::Home) {
+    out += "Event::Home";
+  } else if (event == Event::End) {
+    out += "Event::End";
+  } else if (event == Event::PageUp) {
+    out += "Event::PageUp";
+  } else if (event == Event::PageDown) {
+    out += "Event::PageDown";
+  } else if (event == Event::Custom) {
+    out += "Custom";
   } else {
     out += "(special)";
   }
   return out;
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
 
   std::vector<Event> keys;

examples/component/radiobox.cpp

@@ -7,7 +7,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> radiobox_list = {
       "Use gcc",
       "Use clang",

examples/component/radiobox_in_frame.cpp

@@ -10,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> entries;
   int selected = 0;
 

examples/component/renderer.cpp

@@ -7,7 +7,7 @@
 #include "ftxui/dom/elements.hpp"  // for operator|, Element, text, bold, border, center, color
 #include "ftxui/screen/color.hpp"  // for Color, Color::Red
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto screen = ScreenInteractive::FitComponent();
 

examples/component/resizable_split.cpp

@@ -8,7 +8,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::Fullscreen();
 
   auto middle = Renderer([] { return text("middle") | center; });

examples/component/slider.cpp

@@ -4,7 +4,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
   int value = 50;
   auto slider = Slider("Value:", &value, 0, 100, 1);

examples/component/slider_direction.cpp

@@ -0,0 +1,49 @@
+#include <array>                                  // for array
+#include <cmath>                                  // for sin
+#include <ftxui/component/component_base.hpp>     // for ComponentBase
+#include <ftxui/component/component_options.hpp>  // for SliderOption
+#include <ftxui/dom/elements.hpp>  // for size, GREATER_THAN, GaugeDirection, GaugeDirection::Up, HEIGHT
+#include <ftxui/util/ref.hpp>  // for ConstRef, Ref
+#include <memory>              // for shared_ptr, __shared_ptr_access
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Horizontal, Slider, operator|=
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+using namespace ftxui;
+
+int main() {
+  auto screen = ScreenInteractive::TerminalOutput();
+  std::array<int, 30> values;
+  for (int i = 0; i < values.size(); ++i) {
+    values[i] = 50 + 20 * std::sin(i * 0.3);
+  }
+
+  auto layout_horizontal = Container::Horizontal({});
+  for (auto& value : values) {
+    // In C++17:
+    SliderOption<int> option;
+    option.value = &value;
+    option.max = 100;
+    option.increment = 5;
+    option.direction = GaugeDirection::Up;
+    layout_horizontal->Add(Slider<int>(option));
+
+    /* In C++20:
+    layout_horizontal->Add(Slider<int>({
+        .value = &values[i],
+        .max = 100,
+        .increment = 5,
+        .direction = GaugeDirection::Up,
+    }));
+    */
+  }
+
+  layout_horizontal |= size(HEIGHT, GREATER_THAN, 20);
+
+  screen.Loop(layout_horizontal);
+}
+
+// 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.

examples/component/slider_rgb.cpp

@@ -23,7 +23,7 @@ Element ColorString(int red, int green, int blue) {
   );
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   int red = 128;
   int green = 25;
   int blue = 100;

examples/component/tab_horizontal.cpp

@@ -10,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> tab_values{
       "tab_1",
       "tab_2",

examples/component/tab_vertical.cpp

@@ -10,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> tab_values{
       "tab_1",
       "tab_2",

examples/component/toggle.cpp

@@ -10,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> toggle_1_entries = {
       "On",
       "Off",

examples/dom/CMakeLists.txt

@@ -1,19 +1,21 @@
 set(DIRECTORY_LIB dom)
 
 example(border)
+example(border_colored)
 example(border_style)
+example(canvas)
 example(color_gallery)
 example(color_info_palette256)
 example(color_truecolor_HSV)
 example(color_truecolor_RGB)
 example(dbox)
-example(canvas)
 example(gauge)
 example(gauge_direction)
 example(graph)
 example(gridbox)
 example(hflow)
 example(html_like)
+example(linear_gradient)
 example(package_manager)
 example(paragraph)
 example(separator)
@@ -25,8 +27,11 @@ example(style_bold)
 example(style_color)
 example(style_dim)
 example(style_gallery)
+example(style_hyperlink)
 example(style_inverted)
+example(style_strikethrough)
 example(style_underlined)
+example(style_underlined_double)
 example(table)
 example(vbox_hbox)
 example(vflow)

examples/dom/border_colored.cpp

@@ -0,0 +1,40 @@
+#include <ftxui/dom/elements.hpp>  // for operator|, text, Element, Fit, borderDouble, borderHeavy, borderLight, borderRounded, vbox
+#include <ftxui/screen/screen.hpp>  // for Screen
+#include <iostream>                 // for endl, cout, ostream
+#include <memory>                   // for allocator
+
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/color.hpp"  // for ftxui
+
+int main() {
+  using namespace ftxui;
+
+  auto make_boxed = [] {
+    return vbox({
+        text("borderLight") | borderStyled(LIGHT, Color::Red),
+        text("borderDashed") | borderStyled(DASHED, Color::Green),
+        text("borderHeavy") | borderStyled(HEAVY, Color::Blue),
+        text("borderDouble") | borderStyled(DOUBLE, Color::Yellow),
+        text("borderRounded") | borderStyled(ROUNDED, Color::Cyan),
+    });
+  };
+
+  auto document = hbox({
+                      make_boxed(),
+                      separator() | color(Color::Red),
+                      make_boxed(),
+                      separator() | color(Color::Red),
+                      make_boxed(),
+                  }) |
+                  borderStyled(ROUNDED, Color::Red);
+
+  auto screen =
+      Screen::Create(Dimension::Fit(document), Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+  std::cout << std::endl;
+}
+
+// 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.

examples/dom/border_style.cpp

@@ -6,11 +6,12 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   auto document = vbox({
       text("borderLight") | borderLight,
+      text("borderDashed") | borderDashed,
       text("borderHeavy") | borderHeavy,
       text("borderDouble") | borderDouble,
       text("borderRounded") | borderRounded,

examples/dom/canvas.cpp

@@ -8,7 +8,7 @@
 #include "ftxui/dom/node.hpp"    // for Render
 #include "ftxui/screen/color.hpp"  // for Color, Color::Red, Color::Blue, Color::Green, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   auto c = Canvas(100, 100);

examples/dom/color_info_palette256.cpp

@@ -10,7 +10,7 @@
 using namespace ftxui;
 #include "./color_info_sorted_2d.ipp"  // for ColorInfoSorted2D
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::vector<ColorInfo>> info_columns = ColorInfoSorted2D();
 
   // Draw every columns

examples/dom/color_truecolor_HSV.cpp

@@ -6,7 +6,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for Color, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   int saturation = 255;

examples/dom/color_truecolor_RGB.cpp

@@ -6,7 +6,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for Color, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   int saturation = 255;

examples/dom/dbox.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document = dbox({
       vbox({

examples/dom/gauge.cpp

@@ -2,13 +2,13 @@
 #include <ftxui/dom/elements.hpp>  // for text, gauge, operator|, flex, hbox, Element
 #include <ftxui/screen/screen.hpp>  // for Screen
 #include <iostream>                 // for cout, endl, ostream
-#include <string>  // for allocator, operator+, char_traits, operator<<, string, to_string, basic_string
+#include <string>  // for allocator, char_traits, operator+, operator<<, string, to_string, basic_string
 #include <thread>  // for sleep_for
 
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   using namespace std::chrono_literals;
 

examples/dom/gauge_direction.cpp

@@ -1,14 +1,14 @@
 #include <chrono>                  // for operator""s, chrono_literals
-#include <ftxui/dom/elements.hpp>  // for text, gauge, operator|, flex, hbox, Element
+#include <ftxui/dom/elements.hpp>  // for filler, operator|, separator, text, border, Element, vbox, vtext, hbox, center, gaugeDown, gaugeLeft, gaugeRight, gaugeUp
 #include <ftxui/screen/screen.hpp>  // for Screen
 #include <iostream>                 // for cout, endl, ostream
-#include <string>  // for allocator, operator+, char_traits, operator<<, string, to_string, basic_string
+#include <string>  // for allocator, operator+, operator<<, string, to_string
 #include <thread>  // for sleep_for
 
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   using namespace std::chrono_literals;
 

examples/dom/gridbox.cpp

@@ -6,7 +6,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto cell = [](const char* t) { return text(t) | border; };
   auto document =  //

examples/dom/hflow.cpp

@@ -1,13 +1,12 @@
 #include <stdio.h>                 // for getchar
 #include <ftxui/dom/elements.hpp>  // for operator|, size, Element, text, hcenter, Decorator, Fit, WIDTH, hflow, window, EQUAL, GREATER_THAN, HEIGHT, bold, border, dim, LESS_THAN
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
-#include <memory>                   // for shared_ptr
+#include <string>  // for allocator, char_traits, operator+, to_string, string
-#include <string>  // for allocator, operator+, to_string, char_traits, string
 
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto make_box = [](int dimx, int dimy) {
     std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);

examples/dom/html_like.cpp

@@ -1,7 +1,6 @@
 #include <chrono>                   // for operator""s, chrono_literals
 #include <ftxui/screen/screen.hpp>  // for Screen
 #include <iostream>                 // for cout, ostream
-#include <memory>                   // for shared_ptr
 #include <string>                   // for allocator, operator<<, string
 #include <thread>                   // for sleep_for
 
@@ -10,7 +9,7 @@
 #include "ftxui/screen/box.hpp"    // for ftxui
 #include "ftxui/screen/color.hpp"  // for Color, Color::Red
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   using namespace std::chrono_literals;
 

examples/dom/linear_gradient.cpp

@@ -0,0 +1,26 @@
+#include <ftxui/dom/elements.hpp>  // for bgcolor, operator|, operator|=, text, center, Element
+#include <ftxui/dom/linear_gradient.hpp>  // for LinearGradient::Stop, LinearGradient
+#include <ftxui/screen/screen.hpp>        // for Full, Screen
+#include <memory>                         // for allocator, shared_ptr
+
+#include "ftxui/dom/node.hpp"  // for Render
+#include "ftxui/screen/color.hpp"  // for Color, Color::DeepPink1, Color::DeepSkyBlue1, Color::Yellow, ftxui
+
+int main() {
+  using namespace ftxui;
+  auto document = text("gradient") | center;
+
+  document |= bgcolor(LinearGradient()
+                          .Angle(45)
+                          .Stop(Color::DeepPink1)
+                          .Stop(Color::DeepSkyBlue1));
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
+  Render(screen, document);
+  screen.Print();
+
+  return 0;
+}
+
+// Copyright 2023 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

examples/dom/package_manager.cpp

@@ -2,7 +2,7 @@
 #include <ftxui/dom/elements.hpp>  // for operator|, text, Element, hbox, bold, color, filler, separator, vbox, window, gauge, Fit, size, dim, EQUAL, WIDTH
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <iostream>                 // for cout, endl, ostream
-#include <list>  // for list, operator!=, _List_iterator, _List_iterator<>::_Self
+#include <list>  // for list, operator==, _List_iterator, _List_iterator<>::_Self
 #include <memory>   // for allocator, shared_ptr, allocator_traits<>::value_type
 #include <string>   // for string, operator<<, to_string
 #include <thread>   // for sleep_for
@@ -12,7 +12,7 @@
 #include "ftxui/dom/node.hpp"  // for Render
 #include "ftxui/screen/color.hpp"  // for Color, Color::Green, Color::Red, Color::RedLight, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   struct Task {

examples/dom/paragraph.cpp

@@ -10,13 +10,13 @@
 #include "ftxui/screen/box.hpp"    // for ftxui
 
 using namespace std::chrono_literals;
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   std::string p =
       R"(In probability theory and statistics, Bayes' theorem (alternatively Bayes' law or Bayes' rule) describes the probability of an event, based on prior knowledge of conditions that might be related to the event. For example, if cancer is related to age, then, using Bayes' theorem, a person's age can be used to more accurately assess the probability that they have cancer, compared to the assessment of the probability of cancer made without knowledge of the person's age. One of the many applications of Bayes' theorem is Bayesian inference, a particular approach to statistical inference. When applied, the probabilities involved in Bayes' theorem may have different probability interpretations. With the Bayesian probability interpretation the theorem expresses how a subjective degree of belief should rationally change to account for availability of related evidence. Bayesian inference is fundamental to Bayesian statistics.)";
 
   std::string reset_position;
-  for (int i = 0;; ++i) {
+  while (true) {
     auto document = vbox({
                         hflow(paragraph(p)),
                         separator(),

examples/dom/separator.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document = hbox({
                       text("left-column"),

examples/dom/separator_style.cpp

@@ -6,7 +6,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/box.hpp"    // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   auto document = vbox({
@@ -16,6 +16,12 @@ int main(int argc, const char* argv[]) {
           hbox(text("left"), separatorLight(), text("right")),
       }) | borderLight,
 
+      vbox({
+          text("separatorDashed"),
+          separatorDashed(),
+          hbox(text("left"), separatorDashed(), text("right")),
+      }) | borderDashed,
+
       vbox({
           text("separatorHeavy"),
           separatorHeavy(),

examples/dom/size.cpp

@@ -7,7 +7,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto make_box = [](const std::string& title) {
     return window(text(title) | hcenter | bold,

examples/dom/spinner.cpp

@@ -10,14 +10,14 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   using namespace std::chrono_literals;
 
   std::string reset_position;
   for (int index = 0; index < 200; ++index) {
     std::vector<Element> entries;
-    for (int i = 0; i < 22; ++i) {
+    for (int i = 0; i < 23; ++i) {
       if (i != 0)
         entries.push_back(separator());
       entries.push_back(  //

examples/dom/style_blink.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document =  //
       hbox({

examples/dom/style_bold.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document =  //
       hbox({

examples/dom/style_color.cpp

@@ -1,59 +1,60 @@
-#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <ftxui/dom/linear_gradient.hpp>  // for LinearGradient
-#include <memory>                   // for allocator
+#include <ftxui/screen/screen.hpp>        // for Full, Screen
+#include <memory>                         // for allocator
 
-#include "ftxui/dom/elements.hpp"  // for text, bgcolor, color, vbox, Fit, filler, hbox
+#include "ftxui/dom/elements.hpp"  // for text, bgcolor, color, vbox, filler, Fit, hbox
 #include "ftxui/dom/node.hpp"      // for Render
-#include "ftxui/screen/box.hpp"    // for ftxui
+#include "ftxui/screen/color.hpp"  // for Color, operator""_rgb, Color::Black, Color::Blue, Color::BlueLight, Color::Cyan, Color::CyanLight, Color::DeepSkyBlue4, Color::Default, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::RedLight, Color::SkyBlue1, Color::White, Color::Yellow, Color::YellowLight, ftxui
-#include "ftxui/screen/color.hpp"  // for Color, Color::Black, Color::Blue, Color::BlueLight, Color::Cyan, Color::CyanLight, Color::Default, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::RedLight, Color::White, Color::Yellow, Color::YellowLight
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
-  // clang-format off
+  auto document = hbox({
-  auto document =
+      vbox({
-    hbox(
+          color(Color::Default, text("Default")),
-      vbox(
+          color(Color::Black, text("Black")),
-        color(Color::Default, text("Default")),
+          color(Color::GrayDark, text("GrayDark")),
-        color(Color::Black, text("Black")),
+          color(Color::GrayLight, text("GrayLight")),
-        color(Color::GrayDark, text("GrayDark")),
+          color(Color::White, text("White")),
-        color(Color::GrayLight, text("GrayLight")),
+          color(Color::Blue, text("Blue")),
-        color(Color::White, text("White")),
+          color(Color::BlueLight, text("BlueLight")),
-        color(Color::Blue, text("Blue")),
+          color(Color::Cyan, text("Cyan")),
-        color(Color::BlueLight, text("BlueLight")),
+          color(Color::CyanLight, text("CyanLight")),
-        color(Color::Cyan, text("Cyan")),
+          color(Color::Green, text("Green")),
-        color(Color::CyanLight, text("CyanLight")),
+          color(Color::GreenLight, text("GreenLight")),
-        color(Color::Green, text("Green")),
+          color(Color::Magenta, text("Magenta")),
-        color(Color::GreenLight, text("GreenLight")),
+          color(Color::MagentaLight, text("MagentaLight")),
-        color(Color::Magenta, text("Magenta")),
+          color(Color::Red, text("Red")),
-        color(Color::MagentaLight, text("MagentaLight")),
+          color(Color::RedLight, text("RedLight")),
-        color(Color::Red, text("Red")),
+          color(Color::Yellow, text("Yellow")),
-        color(Color::RedLight, text("RedLight")),
+          color(Color::YellowLight, text("YellowLight")),
-        color(Color::Yellow, text("Yellow")),
+          color(0x66ff66_rgb, text("Phosphor")),
-        color(Color::YellowLight, text("YellowLight")),
+          color(LinearGradient(Color::SkyBlue1, Color::DeepSkyBlue4),
-        color(0x66ff66_rgb, text("Phosphor"))
+                text("Skyblue to DeepSkyBlue")),
-      ),
+      }),
-      vbox(
+      vbox({
-        bgcolor(Color::Default, text("Default")),
+          bgcolor(Color::Default, text("Default")),
-        bgcolor(Color::Black, text("Black")),
+          bgcolor(Color::Black, text("Black")),
-        bgcolor(Color::GrayDark, text("GrayDark")),
+          bgcolor(Color::GrayDark, text("GrayDark")),
-        bgcolor(Color::GrayLight, text("GrayLight")),
+          bgcolor(Color::GrayLight, text("GrayLight")),
-        bgcolor(Color::White, text("White")),
+          bgcolor(Color::White, text("White")),
-        bgcolor(Color::Blue, text("Blue")),
+          bgcolor(Color::Blue, text("Blue")),
-        bgcolor(Color::BlueLight, text("BlueLight")),
+          bgcolor(Color::BlueLight, text("BlueLight")),
-        bgcolor(Color::Cyan, text("Cyan")),
+          bgcolor(Color::Cyan, text("Cyan")),
-        bgcolor(Color::CyanLight, text("CyanLight")),
+          bgcolor(Color::CyanLight, text("CyanLight")),
-        bgcolor(Color::Green, text("Green")),
+          bgcolor(Color::Green, text("Green")),
-        bgcolor(Color::GreenLight, text("GreenLight")),
+          bgcolor(Color::GreenLight, text("GreenLight")),
-        bgcolor(Color::Magenta, text("Magenta")),
+          bgcolor(Color::Magenta, text("Magenta")),
-        bgcolor(Color::MagentaLight, text("MagentaLight")),
+          bgcolor(Color::MagentaLight, text("MagentaLight")),
-        bgcolor(Color::Red, text("Red")),
+          bgcolor(Color::Red, text("Red")),
-        bgcolor(Color::RedLight, text("RedLight")),
+          bgcolor(Color::RedLight, text("RedLight")),
-        bgcolor(Color::Yellow, text("Yellow")),
+          bgcolor(Color::Yellow, text("Yellow")),
-        bgcolor(Color::YellowLight, text("YellowLight")),
+          bgcolor(Color::YellowLight, text("YellowLight")),
-        bgcolor(0x66ff66_rgb, text("Phosphor"))
+          bgcolor(0x66ff66_rgb, text("Phosphor")),
-      ),
+          bgcolor(LinearGradient(Color::SkyBlue1, Color::DeepSkyBlue4),
-      filler()
+                  text("Skyblue to DeepSkyBlue")),
-    );
+      }),
-  // clang-format on
+      filler(),
+  });
 
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document);

examples/dom/style_dim.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document =  //
       hbox({

examples/dom/style_gallery.cpp

@@ -5,19 +5,22 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   // clang-format off
   auto document =
     hbox({
-      text("normal")                           , text(" ") ,
+      text("normal")                                    , text(" ") ,
-      text("bold")      | bold                 , text(" ") ,
+      text("bold")               | bold                 , text(" ") ,
-      text("dim")       | dim                  , text(" ") ,
+      text("dim")                | dim                  , text(" ") ,
-      text("inverted")  | inverted             , text(" ") ,
+      text("inverted")           | inverted             , text(" ") ,
-      text("underlined")| underlined           , text(" ") ,
+      text("underlined")         | underlined           , text(" ") ,
-      text("blink")     | blink                , text(" ") ,
+      text("underlinedDouble")   | underlinedDouble     , text(" ") ,
-      text("color")     | color(Color::Blue)   , text(" ") ,
+      text("blink")              | blink                , text(" ") ,
-      text("bgcolor")   | bgcolor(Color::Blue),
+      text("strikethrough")      | strikethrough        , text(" ") ,
+      text("color")              | color(Color::Blue)   , text(" ") ,
+      text("bgcolor")            | bgcolor(Color::Blue) , text(" ") ,
+      text("hyperlink")          | hyperlink("https://github.com/ArthurSonzogni/FTXUI"),
     });
   // clang-format on
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));

examples/dom/style_hyperlink.cpp

@@ -0,0 +1,25 @@
+#include <ftxui/dom/elements.hpp>  // for text, operator|, bold, Fit, hbox, Element
+#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <memory>                   // for allocator
+
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/color.hpp"  // for ftxui
+
+int main() {
+  using namespace ftxui;
+  auto document =  //
+      hbox({
+          text("This text is an "),
+          text("hyperlink") | hyperlink("https://www.google.com"),
+          text(". Do you like it?"),
+      });
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+
+  return 0;
+}
+
+// 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.

examples/dom/style_inverted.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document = hbox({
       text("This text is "),

examples/dom/style_strikethrough.cpp

@@ -0,0 +1,25 @@
+#include <ftxui/dom/elements.hpp>  // for text, operator|, strikethrough, Fit, hbox, Element
+#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <memory>                   // for allocator
+
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/color.hpp"  // for ftxui
+
+int main() {
+  using namespace ftxui;
+  auto document =  //
+      hbox({
+          text("This text is "),
+          text("strikethrough") | strikethrough,
+          text(". Do you like it?"),
+      });
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+
+  return 0;
+}
+
+// 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.

examples/dom/style_underlined.cpp

@@ -5,7 +5,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document =  //
       hbox({

examples/dom/style_underlined_double.cpp

@@ -0,0 +1,25 @@
+#include <ftxui/dom/elements.hpp>  // for text, operator|, underlinedDouble, Fit, hbox, Element
+#include <ftxui/screen/screen.hpp>  // for Full, Screen
+#include <memory>                   // for allocator
+
+#include "ftxui/dom/node.hpp"      // for Render
+#include "ftxui/screen/color.hpp"  // for ftxui
+
+int main() {
+  using namespace ftxui;
+  auto document =  //
+      hbox({
+          text("This text is "),
+          text("underlinedDouble") | underlinedDouble,
+          text(". Do you like it?"),
+      });
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+
+  return 0;
+}
+
+// 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.

examples/dom/table.cpp

@@ -8,7 +8,7 @@
 #include "ftxui/dom/node.hpp"  // for Render
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Cyan, Color::White, ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   auto table = Table({

examples/dom/vbox_hbox.cpp

@@ -6,7 +6,7 @@
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto document =  //
       vbox({

examples/dom/vflow.cpp

@@ -1,13 +1,12 @@
 #include <stdio.h>                 // for getchar
 #include <ftxui/dom/elements.hpp>  // for operator|, Element, size, text, hcenter, Fit, vflow, window, EQUAL, bold, border, dim, HEIGHT, WIDTH
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
-#include <memory>                   // for shared_ptr
+#include <string>  // for allocator, char_traits, operator+, to_string, string
-#include <string>  // for allocator, operator+, to_string, char_traits, string
 
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/color.hpp"  // for ftxui
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
   auto make_box = [](int dimx, int dimy) {
     std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);

examples/index.html

@@ -4,7 +4,20 @@
     <title>FTXUI examples WebAssembly</title>
     <script src="https://cdn.jsdelivr.net/npm/xterm@4.18.0/lib/xterm.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-webgl@0.11.4/lib/xterm-addon-webgl.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.5.0/lib/xterm-addon-fit.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.11.0/css/xterm.css"></link>
+    <!--Add COOP/COEP via a ServiceWorker to use SharedArrayBuffer-->
+    <script>
+      if ("serviceWorker" in navigator && !window.crossOriginIsolated) {
+        navigator.serviceWorker.register(new URL("./sw.js", location.href)).then(
+          registration => {
+            if (registration.active && !navigator.serviceWorker.controller) {
+              window.location.reload();
+            }
+          },
+        );
+      } 
+    </script>
   </head>
   <body>
     <script id="example_script"></script>
@@ -67,21 +80,43 @@
       }
     }
     const term = new Terminal();
-    term.open(document.querySelector('#terminal'));
+    const term_element = document.querySelector('#terminal');
-    term.resize(140,43);
+    term.open(term_element);
-    term.loadAddon(new (WebglAddon.WebglAddon)());
+
+    const webgl_addon = new (WebglAddon.WebglAddon)();
+    term.loadAddon(webgl_addon);
+
     const onBinary = e => {
       for(c of e)
         stdin_buffer.push(c.charCodeAt(0));
     }
     term.onBinary(onBinary);
     term.onData(onBinary)
+    term.resize(140,43);
     window.Module = {
       preRun: () => {
         FS.init(stdin, stdout, stderr);
       },
       postRun: [],
-      onRuntimeInitialized: () => {},
+      onRuntimeInitialized: () => {
+        if (window.Module._ftxui_on_resize == undefined)
+          return;
+
+        const fit_addon = new (FitAddon.FitAddon)();
+        term.loadAddon(fit_addon);
+        fit_addon.fit();
+        const resize_handler = () => {
+          const {cols, rows} = fit_addon.proposeDimensions();
+          term.resize(cols, rows);
+          window.Module._ftxui_on_resize(cols, rows);
+        };
+        const resize_observer = new ResizeObserver(resize_handler);
+        resize_observer.observe(term_element);
+        resize_handler();
+
+        // Disable scrollbar
+        term.write('\x1b[?47h')
+      },
     };
 
     const words = example.split('/')
@@ -125,9 +160,11 @@
     }
 
     #terminal {
-      padding:10px;
+      width:100%;
+      height: 500px;
+      height: calc(clamp(200px, 100vh - 300px, 900px));
+      overflow: hidden;
       border:none;
-      background-color:black;
       padding:auto;
     }
 

examples/sw.js

@@ -0,0 +1,25 @@
+// sw.js
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", e => e.waitUntil(self.clients.claim()));
+self.addEventListener("fetch", e => {
+  if (e.request.mode != 'navigate' &&
+    !e.request.url.includes(".worker.js")) {
+    return;
+  }
+
+  e.respondWith((async () => {
+    const response = await fetch(e.request);
+
+    const newHeaders = new Headers(response.headers);
+    newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
+    newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");
+
+    const moddedResponse = new Response(response.body, {
+      status: response.status,
+      statusText: response.statusText,
+      headers: newHeaders,
+    });
+
+    return moddedResponse;
+  })());
+});

flake.lock

@@ -0,0 +1,43 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "locked": {
+        "lastModified": 1678901627,
+        "narHash": "sha256-U02riOqrKKzwjsxc/400XnElV+UtPUQWpANPlyazjH0=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "93a2b84fc4b70d9e089d029deacc3583435c2ed6",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1679734080,
+        "narHash": "sha256-z846xfGLlon6t9lqUzlNtBOmsgQLQIZvR6Lt2dImk1M=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "dbf5322e93bcc6cfc52268367a8ad21c09d76fea",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixpkgs-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,61 @@
+{
+  description = "C++ Functional Terminal User Interface library";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
+    flake-utils.url = "github:numtide/flake-utils";
+  };
+
+  outputs = {self, nixpkgs, flake-utils}:
+    flake-utils.lib.eachDefaultSystem (system:
+      let pkgs = import nixpkgs { inherit system; }; in
+      {
+        packages.ftxui = pkgs.stdenv.mkDerivation rec {
+          pname = "ftxui";
+          version = "v4.0.0";
+          src = pkgs.fetchFromGitHub {
+            owner = "ArthurSonzogni";
+            repo = "FTXUI";
+            rev = version;
+            sha256 = "sha256-3kAhHDUwzwdvHc8JZAcA14tGqa6w69qrN1JXhSxNBQY=";
+          };
+
+          nativeBuildInputs = [
+            pkgs.cmake
+          ];
+
+          cmakeFlags = [
+            "-DFTXUI_ENABLE_INSTALL=ON"
+            "-DFTXUI_BUILD_EXAMPLES=OFF"
+            "-DFTXUI_BUILD_TESTS=OFF"
+            "-DFTXUI_BUILD_DOCS=OFF"
+            "-DCMAKE_BUILD_TYPE=Release"
+          ];
+
+          meta = {
+            homepage = "https://arthursonzogni.github.io/FTXUI/";
+            description = "C++ Functional Terminal User Interface.";
+            longDescription = ''
+              Functional Terminal (X) User interface
+              
+              A simple C++ library for terminal based user interfaces!
+              Feature
+              - Functional style. Inspired by [1] and React
+              - Simple and elegant syntax (in my opinion)
+              - Keyboard & mouse navigation.
+              - Support for UTF8 and fullwidth chars (→ 测试)
+              - Support for animations. Demo 1, Demo 2
+              - Support for drawing. Demo
+              - No dependencies
+              - Cross platform: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
+              - Learn by examples, and tutorials
+              - Multiple packages: CMake FetchContent (preferred), vcpkg, pkgbuild, conan, nix, etc...
+              - Good practises: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
+            '';
+            license = pkgs.lib.licenses.mit;
+            platforms = pkgs.lib.platforms.all;
+          };
+        };
+      }
+    );
+}