Adds example project using FTXUI (#1044)

Bug:https://github.com/eclipse-ecal/ecal/pull/2095

.bcr/README.md

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

.bcr/metadata.template.json

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

.bcr/presubmit.yml

@@ -0,0 +1,21 @@
+matrix:
+  platform:
+  - centos7
+  - debian10
+  - ubuntu2004
+  - macos
+  - windows
+  bazel: [6.x, 7.x, 8.x]
+tasks:
+  verify_targets:
+    name: Build and test.
+    platform: ${{ platform }}
+    bazel: ${{ bazel }}
+    build_targets:
+    - '@ftxui//:ftxui'
+    - '@ftxui//:screen'
+    - '@ftxui//:dom'
+    - '@ftxui//:component'
+    test_targets:
+    - '@ftxui//:tests'
+

.bcr/source.template.json

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

.clang-tidy

@@ -0,0 +1,35 @@
+---
+Checks: "*,
+        -*-macro-usage,
+        -*-magic-numbers,
+        -*-narrowing-conversions
+        -*-unnecessary-value-param,
+        -*-uppercase-literal-suffix,
+        -abseil-*,
+        -altera-*,
+        -android-*,
+        -bugprone-easily-swappable-parameters,
+        -cppcoreguidelines-non-private-member-variables-in-classes,
+        -cppcoreguidelines-pro-type-union-access,
+        -fuchsia-*,
+        -google-*,
+        -hicpp-signed-bitwise,
+        -llvm*,
+        -misc-no-recursion,
+        -misc-non-private-member-variables-in-classes,
+        -modernize-use-nodiscard,
+        -modernize-use-trailing-return-type,
+        -readability-avoid-const-params-in-decls,
+        -readability-else-after-return,
+        -readability-identifier-length,
+        -readability-implicit-bool-conversion,
+        -readability-non-const-parameter,
+        -readability-simplify-boolean-expr,
+        -readability-static-accessed-through-instance,
+        -readability-use-anyofallof,
+        -readability-avoid-nested-conditional-operator,
+        -zircon-*,
+"
+WarningsAsErrors: ''
+HeaderFilterRegex: ''
+FormatStyle:     none

.github/workflows/build.yaml

@@ -0,0 +1,156 @@
+name: Build
+
+on:
+  # On new commits to main:
+  push:
+    branches:
+      - main
+
+  # On pull requests:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+
+  test_bazel:
+    name: "Bazel, ${{ matrix.compiler }}, ${{ matrix.os }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - os: ubuntu-latest
+            compiler: gcc
+
+          - os: ubuntu-latest
+            compiler: llvm
+
+          - os: macos-latest
+            compiler: llvm
+
+          - os: macos-latest
+            compiler: gcc
+
+          - os: windows-latest
+            compiler: cl
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Build with Bazel"
+        run: bazel build ...
+
+      - name: "Tests with Bazel"
+        run: bazel run tests
+
+  test_cmake:
+    name: "CMake, ${{ matrix.compiler }}, ${{ matrix.os }}"
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: Linux GCC
+            os: ubuntu-latest
+            compiler: gcc
+
+          - name: Linux Clang
+            os: ubuntu-latest
+            compiler: llvm
+            gcov_executable: "llvm-cov gcov"
+
+          - name: MacOS clang
+            os: macos-latest
+            compiler: llvm
+            gcov_executable: "llvm-cov gcov"
+
+          - name: Windows MSVC
+            os: windows-latest
+            compiler: cl
+
+    runs-on: ${{ matrix.os }}
+    steps:
+      - name: Get number of CPU cores
+        uses: SimenB/github-actions-cpu-cores@v1
+        id: cpu-cores
+
+      - name: "Checkout repository"
+        uses: actions/checkout@v3
+
+      - name: "Setup Cpp"
+        uses: aminya/setup-cpp@v1
+        with:
+          compiler: ${{ matrix.compiler }}
+          vcvarsall: ${{ contains(matrix.os, 'windows' )}}
+          cmake: true
+          ninja: true
+          clangtidy: false
+          cppcheck: false
+          gcovr: "5.0"
+          opencppcoverage: true
+
+      # make sure coverage is only enabled for Debug builds, since it sets -O0
+      # to make sure coverage has meaningful results
+      - name: "Configure CMake"
+        run: >
+          cmake -S .
+          -B ./build
+          -DCMAKE_BUILD_TYPE:STRING=Debug
+          -DCMAKE_BUILD_PARALLEL_LEVEL=${{ steps.cpu-cores.outputs.count }}
+          -DFTXUI_ENABLE_COVERAGE:BOOL=ON
+          -DFTXUI_BUILD_DOCS:BOOL=OFF
+          -DFTXUI_BUILD_EXAMPLES:BOOL=ON
+          -DFTXUI_BUILD_TESTS:BOOL=ON
+          -DFTXUI_BUILD_TESTS_FUZZER:BOOL=OFF
+          -DFTXUI_ENABLE_INSTALL:BOOL=ON
+          -DFTXUI_DEV_WARNINGS:BOOL=ON ;
+
+      - name: "Build"
+        run: >
+          cmake
+          --build ./build
+
+      - name: Unix - Test
+        if: runner.os != 'Windows'
+        working-directory: ./build
+        run: >
+          ctest -C Debug --rerun-failed --output-on-failure;
+
+      - name: Unix - coverage
+        if: matrix.gcov_executable != ''
+        working-directory: ./build
+        run: >
+          gcovr
+          -j ${{env.nproc}}
+          --delete
+          --root ../
+          --exclude "../examples"
+          --exclude ".*google.*"
+          --exclude ".*test.*"
+          --exclude-unreachable-branches
+          --exclude-throw-branches
+          --sort-uncovered
+          --print-summary
+          --xml-pretty
+          --xml
+          coverage.xml
+          .
+          --gcov-executable '${{ matrix.gcov_executable }}';
+
+      - name: Windows - Test and coverage
+        if: runner.os == 'Windows'
+        working-directory: ./build
+        run: >
+          OpenCppCoverage.exe
+          --export_type cobertura:coverage.xml
+          --cover_children
+          --
+          ctest -C Debug --rerun-failed --output-on-failure;
+
+      - name: Publish to codecov
+        uses: codecov/codecov-action@v3
+        with:
+          flags: ${{ runner.os }}
+          name: ${{ runner.os }}-coverage
+          files: ./build/coverage.xml

.github/workflows/codeql-analysis.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ master ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ master ]
-  schedule:
-    - cron: '38 7 * * 4'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'cpp' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-        # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/documentation.yaml

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

.github/workflows/linux-clang.yaml

@@ -1,27 +0,0 @@
-name: Linux Clang
-
-on:
-  - pull_request
-  - push
-
-jobs:
-  build:
-    name: Linux Clang
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: seanmiddleditch/gha-setup-ninja@master
-      - name: Build
-        run: >
-          mkdir build;
-          cd build;
-          cmake ..
-          -DCMAKE_CXX_COMPILER=clang++
-          -DFTXUI_BUILD_TESTS=ON;
-          cmake --build . --config Release;
-
-      - name: Tests
-        if: ${{ matrix.config.test }}
-        run: >
-          cd build;
-          ./tests

.github/workflows/linux-emscripten.yaml

@@ -1,47 +0,0 @@
-name: Linux Emscripten
-
-on:
-  - pull_request
-  - push
-
-jobs:
-  build:
-    name: Linux Emscripten
-    runs-on: ubuntu-latest
-    env:
-      DOCUMENTATION: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }}
-    steps:
-      - uses: actions/checkout@v2
-      - uses: seanmiddleditch/gha-setup-ninja@master
-      - uses: mymindstorm/setup-emsdk@v7
-
-      - name: Install Doxygen/Graphviz
-        if: fromJSON(env.DOCUMENTATION)
-        run: |
-          sudo apt-get update
-          sudo apt-get install doxygen graphviz
-
-      - name: Build
-        run: |
-          emcmake cmake -G Ninja -DCMAKE_BUILD_TYPE=Release -S . -B build
-          cmake --build build
-
-      - name: Build documentation
-        if: fromJSON(env.DOCUMENTATION)
-        run: |
-          cd build
-          cmake --build . --target doc
-          # Copy emscripten built examples to the doxygen output directory for deployment
-          rsync -amv --include='*/' --include='*.html' --include='*.js' --include='*.wasm' --exclude='*' examples doc/doxygen/html
-
-      # Deploy the HTML documentation to GitHub Pages
-      - name: GH Pages Deployment
-        if: fromJSON(env.DOCUMENTATION)
-        uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: build/doc/doxygen/html/
-          enable_jekyll: false
-          allow_empty_commit: false
-          force_orphan: true
-          publish_branch: gh-pages

.github/workflows/linux-gcc.yaml

@@ -1,26 +0,0 @@
-name: Linux GCC
-
-on:
-  - pull_request
-  - push
-
-jobs:
-  build:
-    name: Linux GCC
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: seanmiddleditch/gha-setup-ninja@master
-      - name: Build
-        run: >
-          mkdir build;
-          cd build;
-          cmake ..
-          -DCMAKE_CXX_COMPILER=g++-9
-          -DFTXUI_BUILD_TESTS=ON;
-          cmake --build . --config Release;
-
-      - name: Tests
-        run: >
-          cd build;
-          ./tests

.github/workflows/mac-clang.yaml

@@ -1,27 +0,0 @@
-name: MacOS Clang
-
-on:
-  - pull_request
-  - push
-
-jobs:
-  build:
-    name: MacOS Clang
-    runs-on: macos-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: seanmiddleditch/gha-setup-ninja@master
-      - name: Build
-        run: >
-          mkdir build;
-          cd build;
-          cmake ..
-          -DCMAKE_CXX_COMPILER=clang++
-          -DFTXUI_BUILD_TESTS=ON;
-          cmake --build . --config Release;
-
-      - name: Tests
-        if: ${{ matrix.config.test }}
-        run: >
-          cd build;
-          ./tests

.github/workflows/publish.yaml

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

.github/workflows/release.yaml

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

.github/workflows/windows-msvc.yaml

@@ -1,28 +0,0 @@
-name: Windows MSVC
-
-on:
-  - pull_request
-  - push
-
-jobs:
-  build:
-    name: Windows MSVC
-    runs-on: windows-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: seanmiddleditch/gha-setup-ninja@master
-      - uses: ilammy/msvc-dev-cmd@v1
-      - name: Build
-        run: >
-          mkdir build;
-          cd build;
-          cmake ..
-          -DCMAKE_CXX_COMPILER="cl"
-          -DFTXUI_BUILD_TESTS=ON;
-          cmake --build . --config Release;
-
-      - name: Tests
-        if: ${{ matrix.config.test }}
-        run: >
-          cd build;
-          ./tests.exe

.gitignore

@@ -0,0 +1,70 @@
+# Ignore all the files, except the ones we expect.
+# See https://jasonstitt.com/gitignore-whitelisting-patterns
+*
+!*/
+
+# Ignore build directories generated by default MSVC CMake integration
+# (otherwise causes terribly slow indexing)
+out/
+
+# Allowed top-level files:
+!.clang-format
+!.clang-tidy
+!.gitignore
+!CHANGELOG.md
+!CMakeLists.txt
+!LICENSE
+!README.md
+!codecov.yml
+!flake.lock
+!flake.nix
+!ftxui.pc.in
+!iwyu.imp
+!WORKSPACE.bazel
+!BUILD.bazel
+!MODULE.bazel
+!.bazelrc
+
+# .github directory:
+!.github/**/*.yaml
+!.github/**/*.yml
+
+# cmake directory:
+!cmake/**/*.in
+!cmake/**/*.cmake
+
+# bazel directory:
+!bazel/**/*.bzl
+!.bcr/*
+
+# doc directory:
+!doc/**/Doxyfile.in
+!doc/**/*.txt
+!doc/**/*.css
+!doc/**/*.html
+!doc/**/*.xml
+!doc/**/*.md
+
+# examples directory:
+!examples/**/*.cpp
+!examples/**/*.css
+!examples/**/*.hpp
+!examples/**/*.html
+!examples/**/*.html.disabled
+!examples/**/*.ipp
+!examples/**/*.js
+!examples/**/*.mjs
+!examples/**/*.py
+!examples/**/*.txt
+
+# include directory:
+!include/ftxui/**/*.hpp
+!include/ftxui/**/*.cpp
+
+# src directory:
+!src/ftxui/**/*.hpp
+!src/ftxui/**/*.cpp
+
+# tools directory:
+!tools/**/*.sh
+!tools/**/*.cpp

.nxxm/deps

@@ -1,5 +0,0 @@
-{
-  "platform": [
-    "GTest::+gtest"
-  ]
-}

BUILD.bazel

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

CHANGELOG.md

@@ -1,20 +1,428 @@
-# Changelog
+Changelog
+=========
 
-## Current
+Future release
+------------
 
-## 0.10 (2021-09-30)
+### dom
+- Bugfix: Restore the `dbox` behavior from ftxui 5.0.0. To apply bgcolor
+  blending between the two layers, a new `dboxBlend` will be added.
+
+6.1.8 (2025-05-01)
+------------------
+
+### Build
+- Feature: Support `bazel` build system. See #1032.
+  Proposed by Kostya Serebryany @kcc
+  If all goes well (pending), it should appear in the Bazel central repository.
+  It can be imported into your project using the following lines:
+
+  **MODULE.bazel**
+  ```bazel
+  bazel_dep(name = "ftxui", version = "6.1.8")
+  ```
+
+  **BUILD.bazel**
+  ```bazel
+  deps = [
+    // Depend on the whole library:
+    "@ftxui//:ftxui",
+
+    // Choose a specific submodule:
+    "@ftxui//:component",
+    "@ftxui//:dom",
+    "@ftxui//:screen",
+  ]
+  ```
+
+### Component
+- Bugfix: Fix a crash with ResizeableSplit. See #1023.
+  - Clamp screen size to terminal size.
+  - Disallow `ResizeableSplit` with negative size.
+
+### Dom
+- Bugfix: Disallow specifying a negative size constraint. See #1023.
+
+
+6.0.2 (2025-03-30)
+-----
+
+### Component
+- BugFix: Fix major crash on Windows affecting all components. See #1020
+- BugFix: Fix focusRelative.
+
+6.0.1 (2025-03-28)
+-----
+
+Same as v6.0.0.
+
+Due to a problem tag v6.0.0 was replaced. This isn't a good practice and affect
+developers that started using it in the short timeframe. Submitting a new
+release with the same content is the best way to fix this.
+
+See #1017 and #1019.
+
+6.0.0 (2025-03-23)
+-----
+
+### Component
+- Feature: Add support for raw input. Allowing more keys to be detected.
+- Feature: Add `ScreenInteractive::ForceHandleCtrlC(false)` to allow component
+  to fully override the default `Ctrl+C` handler.
+- Feature: Add `ScreenInteractive::ForceHandleCtrlZ(false)` to allow component
+  to fully override the default `Ctrl+Z` handler.
+- Feature: Add `Mouse::WeelLeft` and `Mouse::WeelRight` events on supported
+  terminals.
+- Feature: Add `Event::DebugString()`.
+- Feature: Add support for `Input`'s insert mode. Add `InputOption::insert`
+  option. Added by @mingsheng13.
+- Feature: Add `DropdownOption` to configure the dropdown. See #826.
+- Feature: Add support for Selection. Thanks @clement-roblot. See #926.
+  - See `ScreenInteractive::GetSelection()`.
+  - See `ScreenInteractive::SelectionChange(...)` listener.
+- Bugfix/Breaking change: `Mouse transition`:
+  - Detect when the mouse move, as opposed to being pressed.
+    The Mouse::Moved motion was added.
+  - Dragging the mouse with the left button pressed now avoids activating
+    multiple checkboxes.
+  - A couple of components are now activated when the mouse is pressed,
+  as opposed to being released.
+  This fixes: https://github.com/ArthurSonzogni/FTXUI/issues/773
+  This fixes: https://github.com/ArthurSonzogni/FTXUI/issues/792
+- Bugfix: mouse.control is now reported correctly.
+- Feature: Add `ScreenInteractive::FullscreenPrimaryScreen()`. This allows
+  displaying a fullscreen component on the primary screen, as opposed to the
+  alternate screen.
+- Bugfix: `Input` `onchange` was not called on backspace or delete key.
+  Fixed by @chrysante in chrysante in PR #776.
+- Bugfix: Propertly restore cursor shape on exit. See #792.
+- Bugfix: Fix cursor position in when in the last column. See #831.
+- Bugfix: Fix `ResizeableSplit` keyboard navigation. Fixed by #842.
+- Bugfix: Fix `Menu` focus. See #841
+- Feature: Add `ComponentBase::Index()`. This allows to get the index of a
+  component in its parent. See #932
+- Feature: Add `EntryState::index`. This allows to get the index of a menu entry.
+  See #932
+- Feature: Add `SliderOption::on_change`. This allows to set a callback when the
+  slider value changes. See #938.
+- Bugfix: Handle `Dropdown` with no entries.
+- Bugfix: Fix crash in `LinearGradient` due to float precision and an off-by-one
+          mistake. See #998.
+
+### Dom
+- Feature: Add `italic` decorator. For instance:
+  ```cpp
+  auto italic_text = text("Italic text") | italic;
+  ```
+  ```cpp
+  auto italic_text = italic(text("Italic text"));
+  ```
+  Proposed by @kenReneris in #1009.
+- Feature: Add `hscroll_indicator`. It display an horizontal indicator
+  reflecting the current scroll position. Proposed by @ibrahimnasson in
+  [issue 752](https://github.com/ArthurSonzogni/FTXUI/issues/752)
+- Feature: Add `extend_beyond_screen` option to `Dimension::Fit(..)`, allowing
+  the element to be larger than the screen. Proposed by @LordWhiro. See #572 and
+  #949.
+- Feature: Add support for Selection. Thanks @clement-roblot. See #926.
+  - See `selectionColor` decorator.
+  - See `selectionBackgroundColor` decorator.
+  - See `selectionForegroundColor` decorator.
+  - See `selectionStyle(style)` decorator.
+  - See `selectionStyleReset` decorator.
+- Breaking change: Change how "focus"/"select" are handled. This fixes the
+  behavior.
+- Breaking change: `Component::OnRender()` becomes the method to override to
+  render a component. This replaces `Component::Render()` that is still in use
+  to call the rendering method on the children. This change allows to fix a
+  couple of issues around focus handling.
+
+### Screen
+- Feature: Add `Box::IsEmpty()`.
+- Feature: Color transparency
+    - Add `Color::RGBA(r,g,b,a)`.
+    - Add `Color::HSVA(r,g,b,a)`.
+    - Add `Color::Blend(Color)`.
+    - Add `Color::IsOpaque()`
+
+### Util
+- Feature: Support arbitrary `Adapter` for `ConstStringListRef`. See #843.
+
+### Build
+- Support for cmake's "unity/jumbo" builds. Fixed by @ClausKlein.
+
+5.0.0
+-----
+
+### Component
+- Breaking: MenuDirection enum is renamed Direction
+- Breaking: GaugeDirection enum is renamed Direction
+- Breaking: Direction enum is renamed WidthOrHeight
+- Breaking: Remove `ComponentBase` copy constructor/assignment.
+- Breaking: MenuOption::entries is renamed MenuOption::entries_option.
+- Breaking: `Ref<{Component}Option>` becomes `{Component}Option` in component constructors.
+- Feature: `ResizeableSplit` now support arbitrary element as a separator.
+- Feature: `input` is now supporting multiple lines.
+- Feature: `input` style is now customizeable.
+- Bugfix: Support F1-F5 from OS terminal.
+- Feature: Add struct based constructor:
+  ```cpp
+  Component Button(ButtonOption options);
+  Component Checkbox(CheckboxOption options);
+  Component Input(InputOption options);
+  Component Menu(MenuOption options);
+  Component MenuEntry(MenuEntryOption options);
+  Component Radiobox(RadioboxOption options);
+  Component Slider(SliderOption<T> options);
+  Component ResizableSplit(ResizableSplitOption options);
+  ```
+- Feature: Add `ScreenInteractive::TrackMouse(false)` disable mouse support.
+
+### 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
+- Breaking: `WordBreakProperty` becomes a uint8_t enum. This yields a 0.8%
+  performance improvement.
+- Breaking: Remove user defined Pixel constructor and equality operator.
+- Performance: 19% faster on benchmarks.
+
+
+### Build
+- Check version compatibility when using cmake find_package()
+- Add `FTXUI_DEV_WARNING` options to turn on warnings when building FTXUI
+- Turn OFF by default `FTXUI_BUILD_DOCS`
+- Turn OFF by default `FTXUI_BUILD_EXAMPLE`
+
+4.1.1
+-----
+
+### Component
+- 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:
+  - See `DASHED` enum, and  `separatorDashed()`, `borderDashed()` functions.
+- Feature: Add colored borders.
+  - See functions: `borderStyled(BorderStyle, Color)` and `borderStyled(Color)`.
+- Feature: Add `LinearGradient`. It can be used in `color` and `bgColor`.
+- 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
+- Check version compatibility when using cmake find_package()
+
+4.1.0  (Abandonned)
+-----
+This version is abandonned and must not be used. It introduced a breaking change in the API.
+
+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
+-----
+
+### Build
+- **breaking**: The library prefix is now back to "lib" (the default). This
+    means non-cmake users should not link against "libftxui-dom" for instance.
+
+### Component
+- **Animations** module! Components can implement the `OnAnimation` method and
+  the animation::Animator to define some animated properties.
+  - `Menu` now support animations.
+  - `Button` now supports animations.
+- Support SIGTSTP. (ctrl+z).
+- Support task posting. `ScreenInteractive::Post(Task)`.
+- `Menu` can now be used in the 4 directions, using `MenuOption.direction`.
+- `Menu` can display an animated underline, using
+  `MenuOption.underline.enabled`.
+- `Button` is now taking the focus in frame.
+- **breaking** All the options are now using a transform function.
+- **breaking** The `Toggle` component is now implemented using `Menu`.
+- **bugfix** Container::Tab implements `Focusable()`.
+- **bugfix** Improved default implementations of ComponentBase `Focusable()` and
+  `ActiveChild()` methods.
+- **bugfix** Automatically convert '\r' keys into '\n' for Linux programs that
+  do not send the correct code for the return key, like the 'bind'.
+  https://github.com/ArthurSonzogni/FTXUI/issues/337
+- Add decorator for components:
+  - `operator|(Component, ComponentDecorator)`
+  - `operator|(Component, ElementDecorator)`
+  - `operator|=(Component, ComponentDecorator)`
+  - `operator|=(Component, ElementDecorator)`
+  - Add the `Maybe` decorator.
+  - Add the `CatchEvent` decorator.
+  - Add the `Renderer` decorator.
+- **breaking** remove the "deprectated.hpp" header and Input support for wide
+    string.
+
+### DOM:
+- **breaking**: The `inverted` decorator now toggle in the inverted attribute.
+- Add `gauge` for the 4 directions. Expose the following API:
+```cpp
+Element gauge(float ratio);
+Element gaugeLeft(float ratio);
+Element gaugeRight(float ratio);
+Element gaugeUp(float ratio);
+Element gaugeDown(float ratio);
+Element gaugeDirection(float ratio, GaugeDirection);
+```
+- Add `separatorHSelector` and `separatorVSelector` elements. This can be used
+  to highlight an area.
+- Add the `automerge` decorator. This makes separator characters to be merged
+  with others nearby.
+- Fix the `Table` rendering function, to allow automerging characters.
+- **Bugfix**: The `vscroll_indicator` now computes its offset and size
+  correctly.
+- Add the `operator|=(Element, Decorator)`
+
+### Screen:
+- Add: `Color::Interpolate(lambda, color_a, color_b)`.
+
+2.0.0
+-----
+
+### Features:
+
+#### Screen
+- Add the `automerge` to the Pixel bit field. This now controls which pixels are
+  automatically merged.
+
+#### DOM:
+- Add the `Canvas` class and `ElementFrom('canvas')` function. Together users of
+  the library can draw using braille and block characters.
+- Support `flexbox` dom elements. This is build symmetrically to the HTML one.
+  All the following attributes are supported: direction, wrap, justify-content,
+  align-items, align-content, gap
+- Add the dom elements helper based on `flexbox`:
+  - `paragraph`
+  - `paragraphAlignLeft`
+  - `paragraphAlignCenter`
+  - `paragraphAlignRight`
+  - `paragraphAlignJustify`
+- Add the helper elements based on `flexbox`: `hflow()`, `vflow()`.
+- Add: `focusPositionRelative` and `focusPosition`
+- Add `Table` constructor from 2D vector of Element, instead of string.
+
+#### Component 
+- Add the `collapsible` component.
+- Add the `ScreenInteractive::WithRestoredIO`. This decorates a callback. This
+  runs it with the terminal hooks temporarilly uninstalled. This is useful if
+  you want to execute command using directly stdin/stdout/sterr.
+
+### Bug
+
+#### Table
+- The `table` horizontal and vertical separator are now correctly expanded.
+
+#### Component 
+- `Input` shouldn't take focus when hovered by the mouse.
+- Modifying `Input`'s during on_enter/on_change event is now working correctly.
+
+### Breaking changes:
+- The behavior of `paragraph` has been modified. It now returns en Element,
+  instead of a list of elements.
+
+0.11.1
+------
+
+# Component
+- Feature: Support for PageUp/PageDown/Home/End buttons.
+- Bugfix: Check the selected element are within bounds for Dropdown.
+
+# Build
+- Bugfix: Package library using the "Release config". Not debug.
+
+0.11
+----
+
+## github workflow
+- Add Windows ad MacOS artefacts.
+- Merge all the workflows.
+
+## Bug
+- On Unix system, fallback to {80,25} screen dimension on failure.
+
+## CMake
+- Support for shared library, via `BUILD_SHARED_LIBS` option.
+- Add library version and symlinks.
+
+0.10 (2021-09-30)
+--------------------
 
 ## Bug
 - Fix the automated merge of borders.
 
 ### Dom
- - `vscroll_indicator`. Show a scrollbar indicator on the right.
+- `Table()` class to build stylised table.
+   See https://github.com/ArthurSonzogni/FTXUI/discussions/228
+- `vscroll_indicator`. Show a scrollbar indicator on the right.
+- `separatorEmpty`. A separator drawing nothing.
+- `separatorFixed`. A separator drawing the provided character.
 
 ### Component
- - `Maybe`: Display an component conditionnally based on a boolean.
- - `Dropdown`: A dropdown select list.
+- `Maybe`: Display an component conditionnally based on a boolean.
+- `Dropdown`: A dropdown select list.
 
-## 0.9 (2021-09-26)
+0.9 (2021-09-26)
+----------------
 
 The initial release where changelog where written.
 

CMakeLists.txt

@@ -1,17 +1,20 @@
-cmake_minimum_required(VERSION 3.11)
-
-include(cmake/ftxui_git_version.cmake)
+cmake_minimum_required(VERSION 3.12)
 
 project(ftxui
   LANGUAGES CXX
-  VERSION 0.10.${git_version}
+  VERSION 6.1.8
+  DESCRIPTION "C++ Functional Terminal User Interface."
 )
 
-option(FTXUI_BUILD_DOCS "Set to ON to build tests" ON)
-option(FTXUI_BUILD_EXAMPLES "Set to ON to build examples" ON)
+option(FTXUI_QUIET "Set to ON for FTXUI to be quiet" OFF)
+option(FTXUI_BUILD_EXAMPLES "Set to ON to build examples" OFF)
+option(FTXUI_BUILD_DOCS "Set to ON to build docs" OFF)
 option(FTXUI_BUILD_TESTS "Set to ON to build tests" OFF)
 option(FTXUI_BUILD_TESTS_FUZZER "Set to ON to enable fuzzing" OFF)
 option(FTXUI_ENABLE_INSTALL "Generate the install target" ON)
+option(FTXUI_CLANG_TIDY "Execute clang-tidy" OFF)
+option(FTXUI_ENABLE_COVERAGE "Execute code coverage" OFF)
+option(FTXUI_DEV_WARNINGS "Enable more compiler warnings and warnings as errors" OFF)
 
 set(FTXUI_MICROSOFT_TERMINAL_FALLBACK_HELP_TEXT "On windows, assume the \
 terminal used will be one of Microsoft and use a set of reasonnable fallback \
@@ -24,75 +27,111 @@ else()
     ${FTXUI_MICROSOFT_TERMINAL_FALLBACK_HELP_TEXT} OFF)
 endif()
 
-add_library(screen STATIC
-  src/ftxui/screen/box.cpp
-  src/ftxui/screen/color.cpp
-  src/ftxui/screen/color_info.cpp
-  src/ftxui/screen/screen.cpp
-  src/ftxui/screen/string.cpp
-  src/ftxui/screen/terminal.cpp
+set(CMAKE_EXPORT_COMPILE_COMMANDS ON)
+
+include(cmake/ftxui_message.cmake)
+
+add_library(screen
   include/ftxui/screen/box.hpp
   include/ftxui/screen/color.hpp
   include/ftxui/screen/color_info.hpp
+  include/ftxui/screen/image.hpp
+  include/ftxui/screen/pixel.hpp
   include/ftxui/screen/screen.hpp
   include/ftxui/screen/string.hpp
+  src/ftxui/screen/box.cpp
+  src/ftxui/screen/color.cpp
+  src/ftxui/screen/color_info.cpp
+  src/ftxui/screen/image.cpp
+  src/ftxui/screen/screen.cpp
+  src/ftxui/screen/string.cpp
+  src/ftxui/screen/terminal.cpp
+  src/ftxui/screen/util.hpp
 )
 
-add_library(dom STATIC
+add_library(dom
+  include/ftxui/dom/canvas.hpp
+  include/ftxui/dom/direction.hpp
   include/ftxui/dom/elements.hpp
+  include/ftxui/dom/flexbox_config.hpp
   include/ftxui/dom/node.hpp
   include/ftxui/dom/requirement.hpp
+  include/ftxui/dom/selection.hpp
   include/ftxui/dom/take_any_args.hpp
+  src/ftxui/dom/automerge.cpp
+  src/ftxui/dom/selection_style.cpp
   src/ftxui/dom/blink.cpp
   src/ftxui/dom/bold.cpp
   src/ftxui/dom/border.cpp
   src/ftxui/dom/box_helper.cpp
   src/ftxui/dom/box_helper.hpp
+  src/ftxui/dom/canvas.cpp
   src/ftxui/dom/clear_under.cpp
   src/ftxui/dom/color.cpp
   src/ftxui/dom/composite_decorator.cpp
   src/ftxui/dom/dbox.cpp
   src/ftxui/dom/dim.cpp
   src/ftxui/dom/flex.cpp
+  src/ftxui/dom/flexbox.cpp
+  src/ftxui/dom/flexbox_config.cpp
+  src/ftxui/dom/flexbox_helper.cpp
+  src/ftxui/dom/flexbox_helper.hpp
+  src/ftxui/dom/focus.cpp
   src/ftxui/dom/frame.cpp
   src/ftxui/dom/gauge.cpp
   src/ftxui/dom/graph.cpp
   src/ftxui/dom/gridbox.cpp
   src/ftxui/dom/hbox.cpp
-  src/ftxui/dom/hflow.cpp
+  src/ftxui/dom/hyperlink.cpp
   src/ftxui/dom/inverted.cpp
+  src/ftxui/dom/italic.cpp
+  src/ftxui/dom/linear_gradient.cpp
   src/ftxui/dom/node.cpp
   src/ftxui/dom/node_decorator.cpp
   src/ftxui/dom/paragraph.cpp
   src/ftxui/dom/reflect.cpp
   src/ftxui/dom/scroll_indicator.cpp
+  src/ftxui/dom/selection.cpp
   src/ftxui/dom/separator.cpp
   src/ftxui/dom/size.cpp
   src/ftxui/dom/spinner.cpp
+  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
 )
 
-add_library(component STATIC
+add_library(component
+  include/ftxui/component/animation.hpp
   include/ftxui/component/captured_mouse.hpp
   include/ftxui/component/component.hpp
   include/ftxui/component/component_base.hpp
+  include/ftxui/component/component_options.hpp
   include/ftxui/component/event.hpp
+  include/ftxui/component/loop.hpp
   include/ftxui/component/mouse.hpp
   include/ftxui/component/receiver.hpp
   include/ftxui/component/screen_interactive.hpp
+  include/ftxui/component/task.hpp
+  src/ftxui/component/animation.cpp
   src/ftxui/component/button.cpp
   src/ftxui/component/catch_event.cpp
   src/ftxui/component/checkbox.cpp
+  src/ftxui/component/collapsible.cpp
   src/ftxui/component/component.cpp
+  src/ftxui/component/component_options.cpp
   src/ftxui/component/container.cpp
   src/ftxui/component/dropdown.cpp
   src/ftxui/component/event.cpp
+  src/ftxui/component/hoverable.cpp
   src/ftxui/component/input.cpp
+  src/ftxui/component/loop.cpp
   src/ftxui/component/maybe.cpp
   src/ftxui/component/menu.cpp
+  src/ftxui/component/modal.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/renderer.cpp
@@ -101,41 +140,42 @@ add_library(component STATIC
   src/ftxui/component/slider.cpp
   src/ftxui/component/terminal_input_parser.cpp
   src/ftxui/component/terminal_input_parser.hpp
-  src/ftxui/component/toggle.cpp
+  src/ftxui/component/util.cpp
+  src/ftxui/component/window.cpp
 )
 
 target_link_libraries(dom
   PUBLIC screen
 )
 
-find_package(Threads)
 target_link_libraries(component
   PUBLIC dom
-  PRIVATE Threads::Threads
 )
 
+if (NOT EMSCRIPTEN)
+  find_package(Threads)
+  target_link_libraries(component
+    PUBLIC Threads::Threads
+  )
+endif()
+
 include(cmake/ftxui_set_options.cmake)
 ftxui_set_options(screen)
 ftxui_set_options(dom)
 ftxui_set_options(component)
 
-if (FTXUI_BUILD_TESTS AND ${CMAKE_VERSION} VERSION_GREATER "3.11.4")
-  include(cmake/ftxui_test.cmake)
-endif()
-
-if(FTXUI_BUILD_EXAMPLES)
-  add_subdirectory(examples)
-endif()
-
-if(FTXUI_BUILD_DOCS)
-  add_subdirectory(doc)
-endif()
+include(cmake/ftxui_coverage.cmake)
+ftxui_check_coverage(screen)
+ftxui_check_coverage(dom)
+ftxui_check_coverage(component)
 
+include(cmake/ftxui_test.cmake)
+include(cmake/ftxui_benchmark.cmake)
+include(cmake/ftxui_fuzzer.cmake)
 include(cmake/iwyu.cmake)
 include(cmake/ftxui_export.cmake)
+include(cmake/ftxui_install.cmake)
+include(cmake/ftxui_package.cmake)
 
-if(FTXUI_ENABLE_INSTALL)
-  include(cmake/ftxui_install.cmake)
-  include(cmake/ftxui_package.cmake)
-endif()
-
+add_subdirectory(examples)
+add_subdirectory(doc)

MODULE.bazel

@@ -0,0 +1,9 @@
+# FTXUI Module.
+module(name = "ftxui", version = "6.1.8", compatibility_level = 6)
+
+# Build deps.
+bazel_dep(name = "rules_cc", version = "0.1.1")
+bazel_dep(name = "platforms", version = "0.0.11")
+
+# Test deps.
+bazel_dep(name = "googletest", version = "1.16.0.bcr.1")

README.md

@@ -1,113 +1,404 @@
 <p align="center">
-  <img src="./examples/component/homescreen.gif" alt="Demo image"></img>
+  <img src="https://github.com/ArthurSonzogni/FTXUI/assets/4759106/6925b6da-0a7e-49d9-883c-c890e1f36007" alt="Demo image"></img>
   <br/>
   <a href="#"><img src="https://img.shields.io/badge/c++-%2300599C.svg?style=flat&logo=c%2B%2B&logoColor=white"></img></a>
   <a href="http://opensource.org/licenses/MIT"><img src="https://img.shields.io/github/license/arthursonzogni/FTXUI?color=black"></img></a>
   <a href="#"><img src="https://img.shields.io/github/stars/ArthurSonzogni/FTXUI"></img></a>
   <a href="#"><img src="https://img.shields.io/github/forks/ArthurSonzogni/FTXUI"></img></a>
   <a href="#"><img src="https://img.shields.io/github/repo-size/ArthurSonzogni/FTXUI"></img></a>
-  <a href="https://github.com/ArthurSonzogni/FTXUI/issues"><img src="https://img.shields.io/github/issues/ArthurSonzogni/FTXUI"></img></a>
   <a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors"><img src="https://img.shields.io/github/contributors/arthursonzogni/FTXUI?color=blue"></img></a>
+  <br/>
+  <a href="https://github.com/ArthurSonzogni/FTXUI/issues"><img src="https://img.shields.io/github/issues/ArthurSonzogni/FTXUI"></img></a>
+  <a href="https://repology.org/project/ftxui/versions"><img src="https://repology.org/badge/latest-versions/ftxui.svg" alt="latest packaged version(s)"></a>
+  <a href="https://codecov.io/gh/ArthurSonzogni/FTXUI">
+    <img src="https://codecov.io/gh/ArthurSonzogni/FTXUI/branch/master/graph/badge.svg?token=C41FdRpNVA"/>
+  </a>
+
   
   <br/>
-  <a href="https://github.com/ArthurSonzogni/FTXUI/wiki">Documentation</a> ·
-  <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Report Bug</a> ·
+  <a href="https://arthursonzogni.github.io/FTXUI/">Documentation</a> ·
+  <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Report a Bug</a> ·
   <a href="https://arthursonzogni.github.io/FTXUI/examples.html">Examples</a> .
   <a href="https://github.com/ArthurSonzogni/FTXUI/issues">Request Feature</a> ·
   <a href="https://github.com/ArthurSonzogni/FTXUI/pulls">Send a Pull Request</a>
 
 </p>
 
-## FTXUI
+# FTXUI
 
 <i>Functional Terminal (X) User interface</i>
 
-A simple C++ library for terminal based user interface.
+A simple cross-platform C++ library for terminal based user interfaces!
 
 ## Feature
  * Functional style. Inspired by
-   [[1]](https://hackernoon.com/building-reactive-terminal-interfaces-in-c-d392ce34e649?gi=d9fb9ce35901)
+   [1](https://hackernoon.com/building-reactive-terminal-interfaces-in-c-d392ce34e649?gi=d9fb9ce35901)
    and [React](https://reactjs.org/)
- * Simple and elegant syntax (in my opinion).
- * Support for [UTF8](https://en.wikipedia.org/wiki/UTF-8) and [fullwidth chars](https://en.wikipedia.org/wiki/Halfwidth_and_fullwidth_forms) (→ 测试).
- * No dependencies.
- * Cross platform. Linux/mac (main target), Windows (experimental thanks to contributors), WebAssembly.
+ * 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.github.io/FTXUI/examples/?file=component/menu_underline_animated_gallery), [Demo 2](https://arthursonzogni.github.io/FTXUI/examples/?file=component/button_style)
+ * Support for drawing. [Demo](https://arthursonzogni.github.io/FTXUI/examples/?file=component/canvas_animated)
+ * No dependencies
+ * **Cross platform**: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
+ * Learn by [examples](#documentation), and [tutorials](#documentation)
+ * Multiple packages: CMake [FetchContent]([https://bewagner.net/programming/2020/05/02/cmake-fetchcontent/](https://cmake.org/cmake/help/latest/module/FetchContent.html)) (preferred),Bazel, vcpkg, pkgbuild, conan.
+ * Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
 
-## Operating systems
-- [![linux-emscripten][badge.linux-emscripten]][link.linux-emscripten]
-- [![linux-gcc][badge.linux-gcc]][link.linux-gcc]
-[![linux-clang][badge.linux-clang]][link.linux-clang]
-- [![windows-msvc][badge.windows-msvc]][link.windows-msvc]
-- [![mac-clang][badge.mac-clang]][link.mac-clang]
-
-[badge.linux-gcc]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/linux-gcc.yaml/badge.svg?branch=master
-[badge.linux-clang]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/linux-clang.yaml/badge.svg?branch=master
-[badge.linux-emscripten]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/linux-emscripten.yaml/badge.svg?branch=master
-[badge.windows-msvc]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/windows-msvc.yaml/badge.svg?branch=master
-[badge.mac-clang]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/mac-clang.yaml/badge.svg?branch=master
-
-[link.linux-gcc]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/linux-gcc.yaml
-[link.linux-clang]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/linux-clang.yaml
-[link.linux-emscripten]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/linux-emscripten.yaml
-[link.windows-msvc]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/windows-msvc.yaml
-[link.mac-clang]: https://github.com/ArthurSonzogni/FTXUI/actions/workflows/mac-clang.yaml
-
-## Example
-~~~cpp
-  vbox({
-    hbox({
-      text("left") | border,
-      text("middle") | border | flex,
-      text("right") | border,
-    }),
-    gauge(0.5) | border,
-  });
-~~~
-
-~~~bash
-┌────┐┌───────────────────────────────────────────────────────────────┐┌─────┐
-│left││middle                                                         ││right│
-└────┘└───────────────────────────────────────────────────────────────┘└─────┘
-┌────────────────────────────────────────────────────────────────────────────┐
-│██████████████████████████████████████                                      │
-└────────────────────────────────────────────────────────────────────────────┘
-~~~
-
-# Documentation
+## Documentation
 
 - [Starter example project](https://github.com/ArthurSonzogni/ftxui-starter)
 - [Documentation](https://arthursonzogni.github.io/FTXUI/)
-- [Examples (WebAssembly)](https://arthursonzogni.com/FTXUI/examples/)
-- [Build using CMake](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake)
-- [Build using nxxm](https://arthursonzogni.com/FTXUI/doc/#build-using-cmake)
+- [Examples (WebAssembly)](https://arthursonzogni.github.io/FTXUI/examples/)
+- [Build using CMake](https://arthursonzogni.github.io/FTXUI/#build-cmake)
+
+## Example
+~~~cpp
+    vbox({
+      hbox({
+        text("one") | border,
+        text("two") | border | flex,
+        text("three") | border | flex,
+      }),
+
+      gauge(0.25) | color(Color::Red),
+      gauge(0.50) | color(Color::White),
+      gauge(0.75) | color(Color::Blue),
+    });
+~~~
+
+![image](https://github.com/ArthurSonzogni/FTXUI/assets/4759106/569bf043-4e85-4245-aad5-2324572135c4)
+
+## Short gallery
+
+#### DOM
+
+This module defines a hierarchical set of Element. An Element manages layout and can be responsive to the terminal dimensions.
+
+They are declared in [<ftxui/dom/elements.hpp>](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html
+)
+  
+<details><summary>Layout</summary>
+
+Element can be arranged together:
+  - horizontally with `hbox`
+  - vertically with `vbox`
+  - inside a grid with `gridbox`
+  - wrap along one direction using the `flexbox`.
+  
+Element can become flexible using the the `flex` decorator.
+  
+[Example](https://arthursonzogni.github.io/FTXUI/examples_2dom_2vbox_hbox_8cpp-example.html) using `hbox`, `vbox` and `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.html) using 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:
+
+![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.github.io/FTXUI/examples/?file=component/flexbox).
+
+</details>
+
+<details><summary>Style</summary>
+
+An element can be decorated using the functions:
+  - `bold`
+  - `italic`
+  - `dim`
+  - `inverted`
+  - `underlined`
+  - `underlinedDouble`
+  - `blink`
+  - `strikethrough`
+  - `color`
+  - `bgcolor`
+  - `hyperlink`
+
+[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)
+  
+FTXUI supports the pipe operator. It means: `decorator1(decorator2(element))` and `element | decorator1 | decorator2` can be used.
+  
+</details>
+
+<details><summary>Colors</summary>
+
+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)
+
+</details>
+  
+<details><summary>Border and separator</summary>
+
+Use decorator border and element separator() to subdivide your UI:
+  
+```cpp
+auto document = vbox({
+    text("top"),
+    separator(),
+    text("bottom"),
+}) | border;
+
+```
+
+[Demo](https://arthursonzogni.github.io/FTXUI/examples_2dom_2separator_8cpp-example.html):
+  
+![image](https://user-images.githubusercontent.com/4759106/147244514-4135f24b-fb8e-4067-8896-bc53545583f7.png)
+  
+</details>
+
+<details><summary>Text and paragraph</summary>
+
+A simple piece of text is represented using `text("content")`.
+
+To support text wrapping following spaces the following functions are provided:
+```cpp
+Element paragraph(std::string text);
+Element paragraphAlignLeft(std::string text);
+Element paragraphAlignRight(std::string text);
+Element paragraphAlignCenter(std::string text);
+Element paragraphAlignJustify(std::string text);
+```
+  
+[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)
+
+</details>
+
+<details><summary>Table</summary>
+
+A class to easily style a table of data.
+
+[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)
+
+</details>
+
+<details><summary>Canvas</summary>
+
+Drawing can be made on a 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):
+  
+![ezgif com-gif-maker (3)](https://user-images.githubusercontent.com/4759106/147250538-783a8246-98e0-4a25-b032-3bd3710549d1.gif)  
+</details>
+
+#### Component
+
+ftxui/component produces dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Renders as an Element (see previous section).
+
+Prebuilt components are declared in [<ftxui/component/component.hpp>](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html)
+
+<details><summary>Gallery</summary>
+
+[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)
+
+</details>
+
+<details><summary>Radiobox</summary>
+
+[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)
+
+</details>
+
+<details><summary>Checkbox</summary>
+
+[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)
+
+</details>
+
+<details><summary>Input</summary>
+
+[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2input_8cpp-example.html):
+
+![image](https://user-images.githubusercontent.com/4759106/147247671-f1d6f606-1845-4e94-a4a0-d4273e9ae6bd.png)
+
+</details>
+
+<details><summary>Toggle</summary>
+
+[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)
+
+</details>
+
+
+<details><summary>Slider</summary>
+
+[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)
+
+</details>
+
+
+<details><summary>Menu</summary>
+
+[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)
+
+</details>
+
+
+<details><summary>ResizableSplit</summary>
+
+[Example](https://arthursonzogni.github.io/FTXUI/examples_2component_2resizable_split_8cpp-example.html):
+
+![ezgif com-gif-maker](https://user-images.githubusercontent.com/4759106/147248372-c55512fe-9b96-4b08-a1df-d05cf2cae431.gif)  
+</details>
+
+
+<details><summary>Dropdown</summary>
+
+[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)
+
+</details>
+
+<details><summary>Tab</summary>
+
+[Vertical](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_vertical_8cpp-example.html):
+  
+![ezgif com-gif-maker (1)](https://user-images.githubusercontent.com/4759106/147250144-22ff044a-4773-4ff7-a49c-12ba4034acb4.gif)
+
+[Horizontal](https://arthursonzogni.github.io/FTXUI/examples_2component_2tab_horizontal_8cpp-example.html):
+  
+  ![ezgif com-gif-maker (2)](https://user-images.githubusercontent.com/4759106/147250217-fe447e0f-7a99-4e08-948a-995087d9b40e.gif)
+
+  
+
+</details>
+
+## Libraries for FTXUI
+- *Want to share a useful Component for FTXUI? Feel free to add yours here*
+- [ftxui-grid-container](https://github.com/mingsheng13/grid-container-ftxui)
+- [ftxui-ip-input](https://github.com/mingsheng13/ip-input-ftxui)
+- [ftxui-image-view](https://github.com/ljrrjl/ftxui-image-view.git): For Image Display.
+
 
 ## Project using FTXUI
 
 Feel free to add your projects here:
+- [json-tui](https://github.com/ArthurSonzogni/json-tui)
 - [git-tui](https://github.com/ArthurSonzogni/git-tui)
+- [ostree-tui](https://github.com/AP-Sensing/ostree-tui)
 - [rgb-tui](https://github.com/ArthurSonzogni/rgb-tui)
 - [chrome-log-beautifier](https://github.com/ArthurSonzogni/chrome-log-beautifier)
 - [x86-64 CPU Architecture Simulation](https://github.com/AnisBdz/CPU)
 - [ltuiny](https://github.com/adrianoviana87/ltuiny)
 - [i3-termdialogs](https://github.com/mibli/i3-termdialogs)
-- [Just-Fast](https://github.com/GiuseppeCesarano/just-fast)
 - [simpPRU](https://github.com/VedantParanjape/simpPRU)
 - [Pigeon ROS TUI](https://github.com/PigeonSensei/Pigeon_ros_tui)
 - [hastur](https://github.com/robinlinden/hastur)
 - [CryptoCalculator](https://github.com/brevis/CryptoCalculator)
 - [todoman](https://github.com/aaleino/todoman)
 - [TimeAccumulator](https://github.com/asari555/TimeAccumulator)
+- [vantage](https://github.com/gokulmaxi/vantage)
+- [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)
+- [Path Finder](https://github.com/Ruebled/Path_Finder)
+- [rw-tui](https://github.com/LeeKyuHyuk/rw-tui)
+- [resource-monitor](https://github.com/catalincd/resource-monitor)
+- [ftxuiFileReader](https://github.com/J0sephDavis/ftxuiFileReader)
+- [ftxui_CPUMeter](https://github.com/tzzzzzzzx/ftxui_CPUMeter)
+- [Captain's log](https://github.com/nikoladucak/caps-log)
+- [FTowerX](https://github.com/MhmRhm/FTowerX)
+- [Caravan](https://github.com/r3w0p/caravan)
+- [Step-Writer](https://github.com/BrianAnakPintar/step-writer)
+- [XJ music](https://github.com/xjmusic/xjmusic)
+- [UDP chat](https://github.com/Sergeydigl3/udp-chat-tui)
+- [2048-cpp](https://github.com/Chessom/2048-cpp)
+- [Memory game](https://github.com/mikolajlubiak/memory)
+- [Terminal Animation](https://github.com/mikolajlubiak/terminal_animation)
+- [pciex](https://github.com/s0nx/pciex)
+- [Fallout terminal hacking](https://github.com/gshigin/yet-another-fallout-terminal-hacking-game)
+- [Lazylist](https://github.com/zhuyongqi9/lazylist)
+- [TUISIC](https://github.com/Dark-Kernel/tuisic)
+- [inLimbo](https://github.com/nots1dd/inLimbo)
+- [BestEdrOfTheMarket](https://github.com/Xacone/BestEdrOfTheMarket)
+- [terminal-rain](https://github.com/Oakamoore/terminal-rain)
+- [keywords](https://github.com/Oakamoore/keywords) ([Play web version :heart:](https://oakamoore.itch.io/keywords))
+- [FTB - tertminal file browser](https://github.com/Cyxuan0311/FTB)
+- [SHOOT!](https://github.com/ShingZhanho/ENGG1340-Project-25Spring)
 
-## Hosted on
- * [github](https://github.com/ArthurSonzogni/ftxui)
- * [gitlab](https://gitlab.com/ArthurSonzogni/ftxui)
+### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
 
-## External package
+Several games using the FTXUI have been made during the Game Jam:
+- [TermBreaker](https://github.com/ArthurSonzogni/termBreaker) [**[Play web version]**](https://arthursonzogni.com/TermBreaker/)
+- [Minesweeper Marathon](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/minesweeper_marathon.md) [**[Play web version]**](https://barlasgarden.com/minesweeper/index.html)
+- [Grand Rounds](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/grandrounds.md)
+- [LightsRound](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/LightsRound.v.0.1.0.md)
+- [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/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)
 
-It is **highly** recommanded to use cmake FetchContent to depends on FTXUI. This
-way you can specify which commit you would like to depends on.
+## Utilization
 
-If you don't, the following packages have been created:
-- vcpkg ([soon](https://github.com/ArthurSonzogni/FTXUI/issues/112))
+It is **highly** recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.
+```cmake
+include(FetchContent)
+
+FetchContent_Declare(ftxui
+  GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
+  GIT_TAG v6.1.8
+)
+
+FetchContent_GetProperties(ftxui)
+if(NOT ftxui_POPULATED)
+  FetchContent_Populate(ftxui)
+  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
+endif()
+```
+
+If you don't, FTXUI may be used from the following packages:
+- [bazel](...)
+- [vcpkg](https://vcpkgx.com/details.html?package=ftxui)
 - [Arch Linux PKGBUILD](https://aur.archlinux.org/packages/ftxui-git/).
+- [conan.io](https://conan.io/center/ftxui)
+- [openSUSE](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui)
+- 
+[![Packaging status](https://repology.org/badge/vertical-allrepos/libftxui.svg)](https://repology.org/project/libftxui/versions)
+
+If you choose to build and link FTXUI yourself, `ftxui-component` must be first in the linking order relative to the other FTXUI libraries, i.e.
+```bash
+g++ . . . -lftxui-component -lftxui-dom -lftxui-screen . . .
+```
+
+## Contributors
+
+<a href="https://github.com/ArthurSonzogni/FTXUI/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=ArthurSonzogni/FTXUI" />
+</a>

WORKSPACE.bazel

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

bazel/ftxui.bzl

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

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,19 +1,21 @@
-if (NOT WIN32)
-  FetchContent_Declare(googlebenchmark
-    GIT_REPOSITORY "https://github.com/google/benchmark"
-    GIT_TAG 62937f91b5c763a8e119d0c20c67b87bde8eff1c 
-  )
-  FetchContent_MakeAvailable(googlebenchmark)
-
-  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
-  )
+if (NOT FTXUI_BUILD_TESTS OR
+    NOT ${CMAKE_VERSION} VERSION_GREATER "3.11.4" OR
+    WIN32
+    )
+  return()
 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_coverage.cmake

@@ -0,0 +1,8 @@
+function(ftxui_check_coverage library)
+  if (FTXUI_ENABLE_COVERAGE)
+    if(CMAKE_CXX_COMPILER_ID STREQUAL "GNU" OR CMAKE_CXX_COMPILER_ID MATCHES ".*Clang")
+      target_compile_options(${library} INTERFACE --coverage -O0 -g)
+      target_link_libraries(${library} INTERFACE --coverage)
+    endif()
+  endif()
+endfunction()

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        "015d1a091af6937488242b70121858bce8fd40e9"  # v1.8.2
+  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++)
 
-function(fuzz name)
+function(fuzz source)
+  set(name "ftxui-${source}")
   add_executable(${name}
-    src/ftxui/component/${name}.cpp
-  )
-  target_include_directories(${name}
-    PRIVATE src
-  )
-  target_link_libraries(${name}
-    PRIVATE component
-  )
-  target_compile_options(${name}
-    PRIVATE -fsanitize=fuzzer,address
-  )
-  target_link_libraries(${name}
-    PRIVATE -fsanitize=fuzzer,address
+    src/ftxui/component/${source}.cpp
   )
+  target_include_directories(${name} PRIVATE src)
+  target_link_libraries(${name} PRIVATE component)
+  target_compile_options(${name} PRIVATE -fsanitize=fuzzer,address)
+  target_link_libraries(${name} PRIVATE -fsanitize=fuzzer,address)
+  target_compile_features(${name} PRIVATE cxx_std_17)
 endfunction(fuzz)
 
 fuzz(terminal_input_parser_test_fuzzer)

cmake/ftxui_git_version.cmake

@@ -1,13 +0,0 @@
-find_package(Git QUIET)
-if (Git_FOUND AND EXISTS "${CMAKE_CURRENT_SOURCE_DIR}/.git")
-  message("git found")
-  execute_process(
-    COMMAND ${GIT_EXECUTABLE} rev-list --count HEAD
-    WORKING_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}
-    OUTPUT_VARIABLE git_version
-    OUTPUT_STRIP_TRAILING_WHITESPACE
-  )
-else()
-  set(git_version 0)
-endif()
-

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(EXPORT ftxui-export
-  FILE ftxui-config-version.cmake
+# ------------------------------------------------------------------------------
+# Install the library and its public headers into the standard subdirectories
+# ------------------------------------------------------------------------------
+install(
+  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_message.cmake

@@ -0,0 +1,17 @@
+function(ftxui_message msg)
+  if (NOT FTXUI_QUIET)
+    message(STATUS "${msg}")
+  endif()
+endfunction()
+
+ftxui_message("┌─ FTXUI options ─────────────────────")
+ftxui_message("│ FTXUI_ENABLE_INSTALL     : ${FTXUI_ENABLE_INSTALL}")
+ftxui_message("│ FTXUI_BUILD_EXAMPLES     : ${FTXUI_BUILD_EXAMPLES}")
+ftxui_message("│ FTXUI_QUIET              : ${FTXUI_QUIET}")
+ftxui_message("│ FTXUI_BUILD_DOCS         : ${FTXUI_BUILD_DOCS}")
+ftxui_message("│ FTXUI_BUILD_TESTS        : ${FTXUI_BUILD_TESTS}")
+ftxui_message("│ FTXUI_BUILD_TESTS_FUZZER : ${FTXUI_BUILD_TESTS_FUZZER}")
+ftxui_message("│ FTXUI_ENABLE_COVERAGE    : ${FTXUI_ENABLE_COVERAGE}")
+ftxui_message("│ FTXUI_DEV_WARNINGS       : ${FTXUI_DEV_WARNINGS}")
+ftxui_message("│ FTXUI_CLANG_TIDY         : ${FTXUI_CLANG_TIDY}")
+ftxui_message("└─────────────────────────────────────")

cmake/ftxui_package.cmake

@@ -1,4 +1,16 @@
-set(CPACK_GENERATOR "DEB;External;RPM;STGZ;TBZ2;TGZ;TXZ;TZ;TZST;ZIP")
+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)
+  set(CPACK_GENERATOR "DragNDrop;NuGet;TGZ;ZIP")
+elseif (WIN32)
+  set(CPACK_GENERATOR "DEB;NuGet;TGZ;ZIP")
+else()
+  set(CPACK_GENERATOR "ZIP")
+endif()
 set(CPACK_DEBIAN_PACKAGE_DEPENDS " ")
 set(CPACK_DEBIAN_PACKAGE_HOMEPAGE_URL "https://github.com/ArthurSonzogni/FTXUI/")
 set(CPACK_DEBIAN_PACKAGE_MAINTAINER "Arthur Sonzogni")

cmake/ftxui_set_options.cmake

@@ -1,29 +1,67 @@
+find_program(CLANG_TIDY_EXE NAMES "clang-tidy" DOC "Path to clang-tidy executable" )
+
 function(ftxui_set_options library)
-  set_target_properties(${library} PROPERTIES PREFIX "ftxui-")
+  set_target_properties(${library} PROPERTIES VERSION ${PROJECT_VERSION})
+  if (NOT ${library} MATCHES "ftxui-*")
+    set_target_properties(${library} PROPERTIES OUTPUT_NAME "ftxui-${library}")
+  endif()
 
+  if (FTXUI_CLANG_TIDY)
+    if (NOT CLANG_TIDY_EXE)
+      message(FATAL_ERROR "clang-tidy requested but executable not found")
+    endif()
 
-  target_include_directories(${library}
-    PUBLIC
+    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} SYSTEM
+    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
   # to the library and the library users.
-  if (MSVC)
+  if (CMAKE_CXX_COMPILER_ID STREQUAL "MSVC")
     target_compile_options(${library} PUBLIC "/utf-8")
   endif()
 
+  # CMake does automatically add -fPIC when linking a shared library, but it
+  # does not add it when linking a static library. This is a problem when the 
+  # static library is later linked into a shared library. 
+  # Doing it helps some users.
+  set_property(TARGET ${library} PROPERTY POSITION_INDEPENDENT_CODE ON)
+
   # Add as many warning as possible:
   if (WIN32)
     if (MSVC)
-      target_compile_options(${library} PRIVATE "/W3")
-      target_compile_options(${library} PRIVATE "/WX")
+      if(FTXUI_DEV_WARNINGS)
+        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")
@@ -31,15 +69,30 @@ function(ftxui_set_options library)
     # Force Win32 to UNICODE
     target_compile_definitions(${library} PRIVATE UNICODE _UNICODE)
   else()
-    target_compile_options(${library} PRIVATE "-Wall")
-    target_compile_options(${library} PRIVATE "-Wextra")
-    target_compile_options(${library} PRIVATE "-pedantic")
-    target_compile_options(${library} PRIVATE "-Werror")
-    target_compile_options(${library} PRIVATE "-Wmissing-declarations")
-    target_compile_options(${library} PRIVATE "-Wdeprecated")
-    target_compile_options(${library} PRIVATE "-Wshadow")
+    if(FTXUI_DEV_WARNINGS)
+      target_compile_options(${library} PRIVATE "-Wall")
+      target_compile_options(${library} PRIVATE "-Werror")
+      target_compile_options(${library} PRIVATE "-Wextra")
+  
+      target_compile_options(${library} PRIVATE "-Wcast-align")
+      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 (CMAKE_CXX_COMPILER_ID MATCHES "Clang")
+    if(FTXUI_DEV_WARNINGS)
+      target_compile_options(${library} PRIVATE "-Wdocumentation")
+    endif()
+  endif()
+
+
   if (FTXUI_MICROSOFT_TERMINAL_FALLBACK)
     target_compile_definitions(${library}
       PRIVATE "FTXUI_MICROSOFT_TERMINAL_FALLBACK")
@@ -47,9 +100,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,48 +1,83 @@
+if (NOT FTXUI_BUILD_TESTS)
+  return()
+endif()
+
 enable_testing()
-set(gtest_force_shared_crt ON CACHE BOOL "" FORCE)
 
-set(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
-include(FetchContent)
+include(cmake/ftxui_find_google_test.cmake)
 
-FetchContent_Declare( googletest
-  GIT_REPOSITORY "https://github.com/google/googletest"
-  GIT_TAG        23ef29555ef4789f555f1ba8c51b4c52975f0907
-)
-FetchContent_MakeAvailable(googletest)
-
-add_executable(tests
+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/dropdown_test.cpp
+  src/ftxui/component/hoverable_test.cpp
   src/ftxui/component/input_test.cpp
+  src/ftxui/component/menu_test.cpp
+  src/ftxui/component/modal_test.cpp
   src/ftxui/component/radiobox_test.cpp
+  src/ftxui/util/ref_test.cpp
   src/ftxui/component/receiver_test.cpp
+  src/ftxui/component/resizable_split_test.cpp
   src/ftxui/component/screen_interactive_test.cpp
+  src/ftxui/component/slider_test.cpp
   src/ftxui/component/terminal_input_parser_test.cpp
   src/ftxui/component/toggle_test.cpp
+  src/ftxui/dom/blink_test.cpp
+  src/ftxui/dom/bold_test.cpp
+  src/ftxui/dom/border_test.cpp
+  src/ftxui/dom/canvas_test.cpp
+  src/ftxui/dom/color_test.cpp
+  src/ftxui/dom/dbox_test.cpp
+  src/ftxui/dom/dim_test.cpp
+  src/ftxui/dom/flexbox_helper_test.cpp
+  src/ftxui/dom/flexbox_test.cpp
   src/ftxui/dom/gauge_test.cpp
   src/ftxui/dom/gridbox_test.cpp
   src/ftxui/dom/hbox_test.cpp
+  src/ftxui/dom/hyperlink_test.cpp
+  src/ftxui/dom/italic_test.cpp
+  src/ftxui/dom/linear_gradient_test.cpp
+  src/ftxui/dom/scroll_indicator_test.cpp
+  src/ftxui/dom/selection_test.cpp
+  src/ftxui/dom/separator_test.cpp
+  src/ftxui/dom/spinner_test.cpp
+  src/ftxui/dom/table_test.cpp
   src/ftxui/dom/text_test.cpp
+  src/ftxui/dom/underlined_test.cpp
   src/ftxui/dom/vbox_test.cpp
+  src/ftxui/screen/color_test.cpp
   src/ftxui/screen/string_test.cpp
 )
 
-target_link_libraries(tests
+target_link_libraries(ftxui-tests
   PRIVATE component
-  PRIVATE gtest
-  PRIVATE gmock
-  PRIVATE gtest_main
+  PRIVATE GTest::gtest
+  PRIVATE GTest::gtest_main
 )
-target_include_directories(tests
+target_include_directories(ftxui-tests
   PRIVATE src
 )
-target_compile_options(tests PRIVATE -fsanitize=address)
-target_link_libraries(tests PRIVATE -fsanitize=address)
+target_compile_features(ftxui-tests PRIVATE cxx_std_20)
 
-if (NOT MSVC)
-  include(cmake/ftxui_benchmark.cmake)
+# Disable unity build for tests. There are several files defining the same
+# function in different anonymous namespaces. This is not allowed in unity
+# builds, as it would result in multiple definitions of the same function.
+set_target_properties(ftxui-tests PROPERTIES UNITY_BUILD OFF)
+
+if (FTXUI_MICROSOFT_TERMINAL_FALLBACK)
+  target_compile_definitions(ftxui-tests
+    PRIVATE "FTXUI_MICROSOFT_TERMINAL_FALLBACK")
 endif()
 
-if (FTXUI_BUILD_TESTS_FUZZER)
-  include(cmake/ftxui_fuzzer.cmake)
-endif()
+include(GoogleTest)
+gtest_discover_tests(ftxui-tests
+  DISCOVERY_TIMEOUT 600
+)
+
+#set(CMAKE_CTEST_ARGUMENTS "--rerun-failed --output-on-failure")
+#set_tests_properties(gen_init_queries PROPERTIES FIXTURES_SETUP f_init_queries)
+#set_tests_properties(test PROPERTIES  FIXTURES_REQUIRED f_init_queries)

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
-      --mapping_file ${CMAKE_CURRENT_SOURCE_DIR}/iwyu.impl
+    PROPERTY "${iwyu_path}" -Xiwyu
+      --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)
-  # 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)
+if (NOT 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%;
-  line-height: 1.45;
+  font-size: 90%;
+  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

examples/CMakeLists.txt

@@ -1,18 +1,29 @@
+if(NOT FTXUI_BUILD_EXAMPLES)
+  return()
+endif()
+
 set(EXAMPLES_DIR ${CMAKE_CURRENT_SOURCE_DIR})
 function(example name)
-  add_executable(${name} ${name}.cpp)
-  target_link_libraries(${name} PUBLIC ${DIRECTORY_LIB})
+  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_20)
 endfunction(example)
 
 add_subdirectory(component)
 add_subdirectory(dom)
 
 if (EMSCRIPTEN)
+  string(APPEND CMAKE_EXE_LINKER_FLAGS " -s ALLOW_MEMORY_GROWTH=1")
+  target_link_options(component PUBLIC "SHELL: -s ALLOW_MEMORY_GROWTH=1")
+
   get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
   foreach(file
       "index.html"
+      "index.mjs"
+      "index.css"
+      "sw.js"
       "run_webassembly.py")
     configure_file(${file} ${file})
   endforeach(file)

examples/component/CMakeLists.txt

@@ -1,29 +1,52 @@
 set(DIRECTORY_LIB component)
 
 example(button)
+example(button_animated)
+example(button_in_frame)
+example(button_style)
+example(canvas_animated)
 example(checkbox)
 example(checkbox_in_frame)
+example(collapsible)
 example(composition)
+example(custom_loop)
 example(dropdown)
+example(dropdown_custom)
+example(flexbox_gallery)
+example(focus)
+example(focus_cursor)
 example(gallery)
 example(homescreen)
 example(input)
+example(input_in_frame)
+example(input_style)
+example(linear_gradient_gallery)
 example(maybe)
 example(menu)
 example(menu2)
 example(menu_entries)
+example(menu_entries_animated)
 example(menu_in_frame)
+example(menu_in_frame_horizontal)
 example(menu_multiple)
 example(menu_style)
+example(menu_underline_animated_gallery)
 example(modal_dialog)
+example(modal_dialog_custom)
 example(nested_screen)
 example(print_key_press)
 example(radiobox)
 example(radiobox_in_frame)
 example(renderer)
 example(resizable_split)
+example(scrollbar)
+example(selection)
 example(slider)
+example(slider_direction)
 example(slider_rgb)
 example(tab_horizontal)
 example(tab_vertical)
+example(textarea)
 example(toggle)
+example(window)
+example(with_restored_io)

examples/component/button.cpp

@@ -1,45 +1,9 @@
-#include <memory>  // for shared_ptr, __shared_ptr_access
-#include <string>  // for operator+, to_wstring
+#include "ftxui/component/component.hpp"
+#include "ftxui/component/screen_interactive.hpp"
 
-#include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
-#include "ftxui/component/component_base.hpp"      // for ComponentBase
-#include "ftxui/component/component_options.hpp"   // for ButtonOption
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for separator, gauge, Element, operator|, vbox, border
-
-using namespace ftxui;
-
-int main(int argc, const char* argv[]) {
-  int value = 50;
-
-  // The tree of components. This defines how to navigate using the keyboard.
-  auto button_option = ButtonOption();
-  button_option.border = false;
-  auto buttons = Container::Horizontal({
-      Button(
-          "[Decrease]", [&] { value--; }, &button_option),
-      Button(
-          "[Increase]", [&] { value++; }, &button_option),
-  });
-
-  // Modify the way to render them on screen:
-  auto component = Renderer(buttons, [&] {
-    return vbox({
-               text("value = " + std::to_string(value)),
-               separator(),
-               gauge(value * 0.01f),
-               separator(),
-               buttons->Render(),
-           }) |
-           border;
-  });
-
-  auto screen = ScreenInteractive::FitComponent();
-  screen.Loop(component);
-  return 0;
+int main(){
+    auto screen = ftxui::ScreenInteractive::Fullscreen();
+    auto testComponent = ftxui::Renderer([](){return ftxui::text("test Component");});
+    screen.Loop(testComponent);
+    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/button_animated.cpp

@@ -0,0 +1,45 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for shared_ptr, __shared_ptr_access
+#include <string>  // for operator+, to_string
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/component_options.hpp"   // for ButtonOption
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for gauge, separator, text, vbox, operator|, Element, border
+#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Green, Color::Red
+
+using namespace ftxui;
+
+int main() {
+  int value = 50;
+
+  // The tree of components. This defines how to navigate using the keyboard.
+  auto buttons = Container::Horizontal({
+      Button(
+          "Decrease", [&] { value--; }, ButtonOption::Animated(Color::Red)),
+      Button(
+          "Reset", [&] { value = 50; }, ButtonOption::Animated(Color::Green)),
+      Button(
+          "Increase", [&] { value++; }, ButtonOption::Animated(Color::Blue)),
+  });
+
+  // Modify the way to render them on screen:
+  auto component = Renderer(buttons, [&] {
+    return vbox({
+        vbox({
+            text("value = " + std::to_string(value)),
+            separator(),
+            gauge(value * 0.01f),
+        }) | border,
+        buttons->Render(),
+    });
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(component);
+  return 0;
+}

examples/component/button_in_frame.cpp

@@ -0,0 +1,47 @@
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
+#include <string>  // for to_string, operator+
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Button, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/component_options.hpp"   // for ButtonOption
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, text, Element, hbox, separator, size, vbox, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
+#include "ftxui/screen/color.hpp"  // for Color, Color::Default, Color::GrayDark, Color::White
+
+using namespace ftxui;
+
+int main() {
+  int counter = 0;
+  auto on_click = [&] { counter++; };
+
+  auto style = ButtonOption::Animated(Color::Default, Color::GrayDark,
+                                      Color::Default, Color::White);
+
+  auto container = Container::Vertical({});
+  for (int i = 0; i < 30; ++i) {
+    auto button = Button("Button " + std::to_string(i), on_click, style);
+    container->Add(button);
+  }
+
+  auto renderer = Renderer(container, [&] {
+    return vbox({
+               hbox({
+                   text("Counter:"),
+                   text(std::to_string(counter)),
+               }),
+               separator(),
+               container->Render() | vscroll_indicator | frame |
+                   size(HEIGHT, LESS_THAN, 20),
+           }) |
+           border;
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(renderer);
+
+  return 0;
+}

examples/component/button_style.cpp

@@ -0,0 +1,60 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <string>  // for operator+, to_string
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Vertical, Renderer, Horizontal, operator|
+#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 Element, separator, text, border
+#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Green, Color::Red
+
+using namespace ftxui;
+
+int main() {
+  int value = 0;
+  auto action = [&] { value++; };
+  auto action_renderer =
+      Renderer([&] { return text("count = " + std::to_string(value)); });
+
+  auto buttons =
+      Container::Vertical({
+          action_renderer,
+          Renderer([] { return separator(); }),
+          Container::Horizontal({
+              Container::Vertical({
+                  Button("Ascii 1", action, ButtonOption::Ascii()),
+                  Button("Ascii 2", action, ButtonOption::Ascii()),
+                  Button("Ascii 3", action, ButtonOption::Ascii()),
+              }),
+              Renderer([] { return separator(); }),
+              Container::Vertical({
+                  Button("Simple 1", action, ButtonOption::Simple()),
+                  Button("Simple 2", action, ButtonOption::Simple()),
+                  Button("Simple 3", action, ButtonOption::Simple()),
+              }),
+              Renderer([] { return separator(); }),
+              Container::Vertical({
+                  Button("Animated 1", action, ButtonOption::Animated()),
+                  Button("Animated 2", action, ButtonOption::Animated()),
+                  Button("Animated 3", action, ButtonOption::Animated()),
+              }),
+              Renderer([] { return separator(); }),
+              Container::Vertical({
+                  Button("Animated 4", action,
+                         ButtonOption::Animated(Color::Red)),
+                  Button("Animated 5", action,
+                         ButtonOption::Animated(Color::Green)),
+                  Button("Animated 6", action,
+                         ButtonOption::Animated(Color::Blue)),
+              }),
+          }),
+      }) |
+      border;
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(buttons);
+  return 0;
+}

examples/component/canvas_animated.cpp

@@ -0,0 +1,262 @@
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSED file.
+#include <cmath>                   // for sin, cos
+#include <ftxui/dom/elements.hpp>  // for canvas, Element, separator, hbox, operator|, border
+#include <ftxui/screen/screen.hpp>  // for Pixel
+#include <memory>   // for allocator, shared_ptr, __shared_ptr_access
+#include <string>   // for string, basic_string
+#include <utility>  // for move
+#include <vector>   // for vector, __alloc_traits<>::value_type
+
+#include "ftxui/component/component.hpp"  // for Renderer, CatchEvent, Horizontal, Menu, Tab
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/event.hpp"               // for Event
+#include "ftxui/component/mouse.hpp"               // for Mouse
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/canvas.hpp"                    // for Canvas
+#include "ftxui/screen/color.hpp"  // for Color, Color::Red, Color::Blue, Color::Green, ftxui
+
+int main() {
+  using namespace ftxui;
+
+  int mouse_x = 0;
+  int mouse_y = 0;
+
+  // A triangle following the mouse, using braille characters.
+  auto renderer_line_braille = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "Several lines (braille)");
+    c.DrawPointLine(mouse_x, mouse_y, 80, 10, Color::Red);
+    c.DrawPointLine(80, 10, 80, 40, Color::Blue);
+    c.DrawPointLine(80, 40, mouse_x, mouse_y, Color::Green);
+    return canvas(std::move(c));
+  });
+
+  // A triangle following the mouse, using block characters.
+  auto renderer_line_block = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "Several lines (block)");
+    c.DrawBlockLine(mouse_x, mouse_y, 80, 10, Color::Red);
+    c.DrawBlockLine(80, 10, 80, 40, Color::Blue);
+    c.DrawBlockLine(80, 40, mouse_x, mouse_y, Color::Green);
+    return canvas(std::move(c));
+  });
+
+  // A circle following the mouse, using braille characters.
+  auto renderer_circle_braille = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A circle (braille)");
+    c.DrawPointCircle(mouse_x, mouse_y, 30);
+    return canvas(std::move(c));
+  });
+
+  // A circle following the mouse, using block characters.
+  auto renderer_circle_block = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A circle (block)");
+    c.DrawBlockCircle(mouse_x, mouse_y, 30);
+    return canvas(std::move(c));
+  });
+
+  // A filled circle following the mouse, using braille characters.
+  auto renderer_circle_filled_braille = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A circle filled (braille)");
+    c.DrawPointCircleFilled(mouse_x, mouse_y, 30);
+    return canvas(std::move(c));
+  });
+
+  // A filled circle following the mouse, using block characters.
+  auto renderer_circle_filled_block = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A circle filled (block)");
+    c.DrawBlockCircleFilled(mouse_x, mouse_y, 30);
+    return canvas(std::move(c));
+  });
+
+  // An ellipse following the mouse, using braille characters.
+  auto renderer_ellipse_braille = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "An ellipse (braille)");
+    c.DrawPointEllipse(mouse_x / 2, mouse_y / 2, mouse_x / 2, mouse_y / 2);
+    return canvas(std::move(c));
+  });
+
+  // An ellipse following the mouse, using block characters.
+  auto renderer_ellipse_block = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "An ellipse (block)");
+    c.DrawBlockEllipse(mouse_x / 2, mouse_y / 2, mouse_x / 2, mouse_y / 2);
+    return canvas(std::move(c));
+  });
+
+  // An ellipse following the mouse filled, using braille characters.
+  auto renderer_ellipse_filled_braille = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A filled ellipse (braille)");
+    c.DrawPointEllipseFilled(mouse_x / 2, mouse_y / 2, mouse_x / 2,
+                             mouse_y / 2);
+    return canvas(std::move(c));
+  });
+
+  // An ellipse following the mouse filled, using block characters.
+  auto renderer_ellipse_filled_block = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A filled ellipse (block)");
+    c.DrawBlockEllipseFilled(mouse_x / 2, mouse_y / 2, mouse_x / 2,
+                             mouse_y / 2);
+    c.DrawBlockEllipse(mouse_x / 2, mouse_y / 2, mouse_x / 2, mouse_y / 2);
+    return canvas(std::move(c));
+  });
+
+  // A text following the mouse
+  auto renderer_text = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A piece of text");
+    c.DrawText(mouse_x, mouse_y, "This is a piece of text with effects",
+               [](Pixel& p) {
+                 p.foreground_color = Color::Red;
+                 p.underlined = true;
+                 p.bold = true;
+               });
+    return canvas(std::move(c));
+  });
+
+  auto renderer_plot_1 = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A graph");
+
+    std::vector<int> ys(100);
+    for (int x = 0; x < 100; x++) {
+      float dx = float(x - mouse_x);
+      float dy = 50.f;
+      ys[x] = int(dy + 20 * cos(dx * 0.14) + 10 * sin(dx * 0.42));
+    }
+    for (int x = 1; x < 99; x++)
+      c.DrawPointLine(x, ys[x], x + 1, ys[x + 1]);
+
+    return canvas(std::move(c));
+  });
+
+  auto renderer_plot_2 = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A symmetrical graph filled");
+    std::vector<int> ys(100);
+    for (int x = 0; x < 100; x++) {
+      ys[x] = int(30 +                                  //
+                  10 * cos(x * 0.2 - mouse_x * 0.05) +  //
+                  5 * sin(x * 0.4) +                    //
+                  5 * sin(x * 0.3 - mouse_y * 0.05));   //
+    }
+    for (int x = 0; x < 100; x++) {
+      c.DrawPointLine(x, 50 + ys[x], x, 50 - ys[x], Color::Red);
+    }
+
+    return canvas(std::move(c));
+  });
+
+  auto renderer_plot_3 = Renderer([&] {
+    auto c = Canvas(100, 100);
+    c.DrawText(0, 0, "A 2D gaussian plot");
+    int size = 15;
+
+    // mouse_x = 5mx + 3*my
+    // mouse_y = 0mx + -5my + 90
+    float my = (mouse_y - 90) / -5.f;
+    float mx = (mouse_x - 3 * my) / 5.f;
+    std::vector<std::vector<float>> ys(size, std::vector<float>(size));
+    for (int y = 0; y < size; y++) {
+      for (int x = 0; x < size; x++) {
+        float dx = x - mx;
+        float dy = y - my;
+        ys[y][x] = -1.5 + 3.0 * std::exp(-0.2f * (dx * dx + dy * dy));
+      }
+    }
+    for (int y = 0; y < size; y++) {
+      for (int x = 0; x < size; x++) {
+        if (x != 0) {
+          c.DrawPointLine(
+              5 * (x - 1) + 3 * (y - 0), 90 - 5 * (y - 0) - 5 * ys[y][x - 1],
+              5 * (x - 0) + 3 * (y - 0), 90 - 5 * (y - 0) - 5 * ys[y][x]);
+        }
+        if (y != 0) {
+          c.DrawPointLine(
+              5 * (x - 0) + 3 * (y - 1), 90 - 5 * (y - 1) - 5 * ys[y - 1][x],
+              5 * (x - 0) + 3 * (y - 0), 90 - 5 * (y - 0) - 5 * ys[y][x]);
+        }
+      }
+    }
+
+    return canvas(std::move(c));
+  });
+
+  int selected_tab = 12;
+  auto tab = Container::Tab(
+      {
+          renderer_line_braille,
+          renderer_line_block,
+          renderer_circle_braille,
+          renderer_circle_block,
+          renderer_circle_filled_braille,
+          renderer_circle_filled_block,
+          renderer_ellipse_braille,
+          renderer_ellipse_block,
+          renderer_ellipse_filled_braille,
+          renderer_ellipse_filled_block,
+
+          renderer_plot_1,
+          renderer_plot_2,
+          renderer_plot_3,
+
+          renderer_text,
+      },
+      &selected_tab);
+
+  // This capture the last mouse position.
+  auto tab_with_mouse = CatchEvent(tab, [&](Event e) {
+    if (e.is_mouse()) {
+      mouse_x = (e.mouse().x - 1) * 2;
+      mouse_y = (e.mouse().y - 1) * 4;
+    }
+    return false;
+  });
+
+  std::vector<std::string> tab_titles = {
+      "line (braille)",
+      "line (block)",
+      "circle (braille)",
+      "circle (block)",
+      "circle filled (braille)",
+      "circle filled (block)",
+      "ellipse (braille)",
+      "ellipse (block)",
+      "ellipse filled (braille)",
+      "ellipse filled (block)",
+      "plot_1 simple",
+      "plot_2 filled",
+      "plot_3 3D",
+      "text",
+  };
+  auto tab_toggle = Menu(&tab_titles, &selected_tab);
+
+  auto component = Container::Horizontal({
+      tab_with_mouse,
+      tab_toggle,
+  });
+
+  // Add some separator to decorate the whole component:
+  auto component_renderer = Renderer(component, [&] {
+    return hbox({
+               tab_with_mouse->Render(),
+               separator(),
+               tab_toggle->Render(),
+           }) |
+           border;
+  });
+
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(component_renderer);
+
+  return 0;
+}

examples/component/checkbox.cpp

@@ -1,25 +1,38 @@
-#include "ftxui/component/captured_mouse.hpp"      // for ftxui
-#include "ftxui/component/component.hpp"           // for Checkbox, Vertical
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <array>  // for array
+#include <iostream>
+#include <memory>  // for shared_ptr, __shared_ptr_access
+#include <string>  // for operator+, to_string
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
-  bool build_examples_state = false;
-  bool build_tests_state = false;
-  bool use_webassembly_state = true;
+int main() {
+  bool download = false;
+  bool upload = false;
+  bool ping = false;
 
-  auto component = Container::Vertical({
-      Checkbox("Build examples", &build_examples_state),
-      Checkbox("Build tests", &build_tests_state),
-      Checkbox("Use WebAssembly", &use_webassembly_state),
+  auto container = Container::Vertical({
+      Checkbox("Download", &download),
+      Checkbox("Upload", &upload),
+      Checkbox("Ping", &ping),
   });
 
-  auto screen = ScreenInteractive::TerminalOutput();
-  screen.Loop(component);
+  auto screen = ScreenInteractive::FitComponent();
+  screen.Loop(container);
+
+  std::cout << "---" << std::endl;
+  std::cout << "Download: " << download << std::endl;
+  std::cout << "Upload: " << upload << std::endl;
+  std::cout << "Ping: " << ping << std::endl;
+  std::cout << "---" << std::endl;
+
   return 0;
 }
-
-// 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/checkbox_in_frame.cpp

@@ -1,26 +1,25 @@
-#include <memory>  // for shared_ptr, __shared_ptr_access, allocator_traits<>::value_type
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <array>   // for array
+#include <memory>  // for shared_ptr, __shared_ptr_access
 #include <string>  // for operator+, to_string
-#include <vector>  // for vector
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, HEIGHT, LESS_THAN
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, size, border, frame, vscroll_indicator, HEIGHT, LESS_THAN
 
 using namespace ftxui;
 
-struct CheckboxState {
-  bool checked;
-};
+int main() {
+  std::array<bool, 30> states;
 
-int main(int argc, const char* argv[]) {
-  std::vector<CheckboxState> states(30);
   auto container = Container::Vertical({});
   for (int i = 0; i < 30; ++i) {
-    states[i].checked = false;
-    container->Add(
-        Checkbox("Checkbox" + std::to_string(i), &states[i].checked));
+    states[i] = false;
+    container->Add(Checkbox("Checkbox" + std::to_string(i), &states[i]));
   }
 
   auto renderer = Renderer(container, [&] {
@@ -33,7 +32,3 @@ int main(int argc, const char* argv[]) {
 
   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/collapsible.cpp

@@ -0,0 +1,57 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>   // for allocator, make_shared, __shared_ptr_access
+#include <utility>  // for move
+#include <vector>   // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Collapsible, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"                  // for text, hbox, Element
+
+using namespace ftxui;
+
+// Take a list of component, display them vertically, one column shifted to the
+// right.
+Component Inner(std::vector<Component> children) {
+  Component vlist = Container::Vertical(std::move(children));
+  return Renderer(vlist, [vlist] {
+    return hbox({
+        text(" "),
+        vlist->Render(),
+    });
+  });
+}
+
+Component Empty() {
+  return std::make_shared<ComponentBase>();
+}
+
+int main() {
+  auto component =
+      Collapsible("Collapsible 1",
+                  Inner({
+                      Collapsible("Collapsible 1.1",
+                                  Inner({
+                                      Collapsible("Collapsible 1.1.1", Empty()),
+                                      Collapsible("Collapsible 1.1.2", Empty()),
+                                      Collapsible("Collapsible 1.1.3", Empty()),
+                                  })),
+                      Collapsible("Collapsible 1.2",
+                                  Inner({
+                                      Collapsible("Collapsible 1.2.1", Empty()),
+                                      Collapsible("Collapsible 1.2.2", Empty()),
+                                      Collapsible("Collapsible 1.2.3", Empty()),
+                                  })),
+                      Collapsible("Collapsible 1.3",
+                                  Inner({
+                                      Collapsible("Collapsible 1.3.1", Empty()),
+                                      Collapsible("Collapsible 1.3.2", Empty()),
+                                      Collapsible("Collapsible 1.3.3", Empty()),
+                                  })),
+                  }));
+
+  ScreenInteractive::FitComponent().Loop(component);
+}

examples/component/composition.cpp

@@ -1,10 +1,12 @@
+// Copyright 2021 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, shared_ptr, __shared_ptr_access
 #include <string>  // for operator+, to_string
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
 #include "ftxui/component/component_base.hpp"      // for ComponentBase
-#include "ftxui/component/component_options.hpp"   // for ButtonOption
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 #include "ftxui/dom/elements.hpp"  // for text, separator, Element, operator|, vbox, border
 
@@ -12,25 +14,18 @@ using namespace ftxui;
 
 // An example of how to compose multiple components into one and maintain their
 // interactiveness.
-int main(int argc, const char* argv[]) {
-  auto button_option = ButtonOption();
-  button_option.border = false;
-
+int main() {
   auto left_count = 0;
   auto right_count = 0;
 
   auto left_buttons = Container::Horizontal({
-      Button(
-          "[Decrease]", [&] { left_count--; }, &button_option),
-      Button(
-          "[Increase]", [&] { left_count++; }, &button_option),
+      Button("Decrease", [&] { left_count--; }),
+      Button("Increase", [&] { left_count++; }),
   });
 
   auto right_buttons = Container::Horizontal({
-      Button(
-          "[Decrease]", [&] { right_count--; }, &button_option),
-      Button(
-          "[Increase]", [&] { right_count++; }, &button_option),
+      Button("Decrease", [&] { right_count--; }),
+      Button("Increase", [&] { right_count++; }),
   });
 
   // Renderer decorates its child with a new rendering function. The way the
@@ -66,7 +61,3 @@ int main(int argc, const char* argv[]) {
 }
 
 // Thanks to Chris Morgan for this example!
-
-// Copyright 2021 Arthur Sonzogni. All rights reserved.
-// Use of this source code is governed by the MIT license that can be found in
-// the LICENSE file.

examples/component/custom_loop.cpp

@@ -0,0 +1,54 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <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;
+}

examples/component/dropdown.cpp

@@ -1,26 +1,26 @@
-#include <functional>  // for function
-#include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
-#include <string>    // for string, basic_string, allocator
-#include <vector>    // for vector
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <string>  // for basic_string, string, allocator
+#include <vector>  // for vector
 
-#include "ftxui/component/captured_mouse.hpp"      // for ftxui
-#include "ftxui/component/component.hpp"           // for Menu
-#include "ftxui/component/component_options.hpp"   // for MenuOption
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Dropdown, Horizontal, Vertical
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
 
-int main(int argc, const char* argv[]) {
+int main() {
   using namespace ftxui;
 
   std::vector<std::string> entries = {
-      "tribute",     "clearance", "ally",     "bend",  "electronics",
-      "module",      "era",       "cultural", "sniff", "nationalism",
-      "negotiation", "deliver",   "figure",   "east",
-      "tribute",     "clearance", "ally",     "bend",  "electronics",
-      "module",      "era",       "cultural", "sniff", "nationalism",
-      "negotiation", "deliver",   "figure",   "east",
-      "tribute",     "clearance", "ally",     "bend",  "electronics",
-      "module",      "era",       "cultural", "sniff", "nationalism",
-      "negotiation", "deliver",   "figure",   "east",
+      "tribute",     "clearance", "ally",        "bend",        "electronics",
+      "module",      "era",       "cultural",    "sniff",       "nationalism",
+      "negotiation", "deliver",   "figure",      "east",        "tribute",
+      "clearance",   "ally",      "bend",        "electronics", "module",
+      "era",         "cultural",  "sniff",       "nationalism", "negotiation",
+      "deliver",     "figure",    "east",        "tribute",     "clearance",
+      "ally",        "bend",      "electronics", "module",      "era",
+      "cultural",    "sniff",     "nationalism", "negotiation", "deliver",
+      "figure",      "east",
   };
 
   int selected_1 = 0;
@@ -42,7 +42,3 @@ int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::FitComponent();
   screen.Loop(layout);
 }
-
-// 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_custom.cpp

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

examples/component/flexbox_gallery.cpp

@@ -0,0 +1,191 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <stddef.h>  // for size_t
+#include <memory>    // for shared_ptr, __shared_ptr_access, allocator
+#include <string>  // for string, basic_string, to_string, operator+, char_traits
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Radiobox, Vertical, Checkbox, Horizontal, Renderer, ResizableSplitBottom, ResizableSplitRight
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, window, operator|, vbox, hbox, Element, flexbox, bgcolor, filler, flex, size, border, hcenter, color, EQUAL, bold, dim, notflex, xflex_grow, yflex_grow, HEIGHT, WIDTH
+#include "ftxui/dom/flexbox_config.hpp"  // for FlexboxConfig, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignItems, FlexboxConfig::Direction, FlexboxConfig::JustifyContent::Center, FlexboxConfig::Wrap
+#include "ftxui/screen/color.hpp"        // for Color, Color::Black
+
+using namespace ftxui;
+
+int main() {
+  auto screen = ScreenInteractive::Fullscreen();
+
+  int direction_index = 0;
+  int wrap_index = 0;
+  int justify_content_index = 0;
+  int align_items_index = 0;
+  int align_content_index = 0;
+
+  std::vector<std::string> directions = {
+      "Row",
+      "RowInversed",
+      "Column",
+      "ColumnInversed",
+  };
+
+  std::vector<std::string> wraps = {
+      "NoWrap",
+      "Wrap",
+      "WrapInversed",
+  };
+
+  std::vector<std::string> justify_content = {
+      "FlexStart",    "FlexEnd",     "Center",      "Stretch",
+      "SpaceBetween", "SpaceAround", "SpaceEvenly",
+  };
+
+  std::vector<std::string> align_items = {
+      "FlexStart",
+      "FlexEnd",
+      "Center",
+      "Stretch",
+  };
+
+  std::vector<std::string> align_content = {
+      "FlexStart",    "FlexEnd",     "Center",      "Stretch",
+      "SpaceBetween", "SpaceAround", "SpaceEvenly",
+  };
+
+  auto radiobox_direction = Radiobox(&directions, &direction_index);
+  auto radiobox_wrap = Radiobox(&wraps, &wrap_index);
+  auto radiobox_justify_content =
+      Radiobox(&justify_content, &justify_content_index);
+  auto radiobox_align_items = Radiobox(&align_items, &align_items_index);
+  auto radiobox_align_content = Radiobox(&align_content, &align_content_index);
+
+  bool element_xflex_grow = false;
+  bool element_yflex_grow = false;
+  bool group_xflex_grow = true;
+  bool group_yflex_grow = true;
+  auto checkbox_element_xflex_grow =
+      Checkbox("element |= xflex_grow", &element_xflex_grow);
+  auto checkbox_element_yflex_grow =
+      Checkbox("element |= yflex_grow", &element_yflex_grow);
+  auto checkbox_group_xflex_grow =
+      Checkbox("group |= xflex_grow", &group_xflex_grow);
+  auto checkbox_group_yflex_grow =
+      Checkbox("group |= yflex_grow", &group_yflex_grow);
+
+  auto make_box = [&](size_t dimx, size_t dimy, size_t index) {
+    std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
+    auto element = window(text(title) | hcenter | bold,
+                          text(std::to_string(index)) | hcenter | dim) |
+                   size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy) |
+                   bgcolor(Color::HSV(index * 25, 255, 255)) |
+                   color(Color::Black);
+    if (element_xflex_grow)
+      element = element | xflex_grow;
+    if (element_yflex_grow)
+      element = element | yflex_grow;
+    return element;
+  };
+
+  auto content_renderer = Renderer([&] {
+    FlexboxConfig config;
+    config.direction = static_cast<FlexboxConfig::Direction>(direction_index);
+    config.wrap = static_cast<FlexboxConfig::Wrap>(wrap_index);
+    config.justify_content =
+        static_cast<FlexboxConfig::JustifyContent>(justify_content_index);
+    config.align_items =
+        static_cast<FlexboxConfig::AlignItems>(align_items_index);
+    config.align_content =
+        static_cast<FlexboxConfig::AlignContent>(align_content_index);
+
+    auto group = flexbox(
+        {
+            make_box(8, 4, 0),
+            make_box(9, 6, 1),
+            make_box(11, 6, 2),
+            make_box(10, 4, 3),
+            make_box(13, 7, 4),
+            make_box(12, 4, 5),
+            make_box(12, 5, 6),
+            make_box(10, 4, 7),
+            make_box(12, 4, 8),
+            make_box(10, 5, 9),
+        },
+        config);
+
+    group = group | bgcolor(Color::Black);
+
+    group = group | notflex;
+
+    if (!group_xflex_grow)
+      group = hbox(group, filler());
+    if (!group_yflex_grow)
+      group = vbox(group, filler());
+
+    group = group | flex;
+    return group;
+  });
+
+  auto center = FlexboxConfig()
+                    .Set(FlexboxConfig::JustifyContent::Center)
+                    .Set(FlexboxConfig::AlignContent::Center);
+  int space_right = 10;
+  int space_bottom = 1;
+  content_renderer = ResizableSplitRight(
+      Renderer([&] { return flexbox({text("resizable")}, center); }),
+      content_renderer, &space_right);
+  content_renderer = ResizableSplitBottom(
+      Renderer([&] { return flexbox({text("resizable")}, center); }),
+      content_renderer, &space_bottom);
+
+  auto main_container = Container::Vertical({
+      Container::Horizontal({
+          radiobox_direction,
+          radiobox_wrap,
+          Container::Vertical({
+              checkbox_element_xflex_grow,
+              checkbox_element_yflex_grow,
+              checkbox_group_xflex_grow,
+              checkbox_group_yflex_grow,
+          }),
+      }),
+      Container::Horizontal({
+          radiobox_justify_content,
+          radiobox_align_items,
+          radiobox_align_content,
+      }),
+      content_renderer,
+  });
+
+  auto main_renderer = Renderer(main_container, [&] {
+    return vbox({
+        vbox({hbox({
+                  window(text("FlexboxConfig::Direction"),
+                         radiobox_direction->Render()),
+                  window(text("FlexboxConfig::Wrap"), radiobox_wrap->Render()),
+                  window(text("Misc:"),
+                         vbox({
+                             checkbox_element_xflex_grow->Render(),
+                             checkbox_element_yflex_grow->Render(),
+                             checkbox_group_xflex_grow->Render(),
+                             checkbox_group_yflex_grow->Render(),
+                         })),
+              }),
+              hbox({
+                  window(text("FlexboxConfig::JustifyContent"),
+                         radiobox_justify_content->Render()),
+                  window(text("FlexboxConfig::AlignItems"),
+                         radiobox_align_items->Render()),
+                  window(text("FlexboxConfig::AlignContent"),
+                         radiobox_align_content->Render()),
+              })}),
+        content_renderer->Render() | flex | border,
+    });
+  });
+
+  screen.Loop(main_renderer);
+
+  return 0;
+}

examples/component/focus.cpp

@@ -0,0 +1,69 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
+#include <string>  // for operator+, char_traits, to_string, string
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"       // for Slider, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for Elements, Element, operator|, separator, text, focusPositionRelative, size, border, flex, frame, bgcolor, gridbox, vbox, EQUAL, center, HEIGHT, WIDTH
+#include "ftxui/screen/color.hpp"  // for Color
+
+using namespace ftxui;
+
+Element make_box(int x, int y) {
+  std::string title = "(" + std::to_string(x) + ", " + std::to_string(y) + ")";
+  return text(title) | center | size(WIDTH, EQUAL, 18) |
+         size(HEIGHT, EQUAL, 9) | border |
+         bgcolor(Color::HSV(x * 255 / 15, 255, y * 255 / 15));
+};
+
+Element make_grid() {
+  std::vector<Elements> rows;
+  for (int i = 0; i < 15; i++) {
+    std::vector<Element> cols;
+    for (int j = 0; j < 15; j++) {
+      cols.push_back(make_box(i, j));
+    }
+    rows.push_back(cols);
+  }
+
+  return gridbox(rows);
+};
+
+int main() {
+  float focus_x = 0.5f;
+  float focus_y = 0.5f;
+
+  auto slider_x = Slider("x", &focus_x, 0.f, 1.f, 0.01f);
+  auto slider_y = Slider("y", &focus_y, 0.f, 1.f, 0.01f);
+
+  auto renderer = Renderer(
+      Container::Vertical({
+          slider_x,
+          slider_y,
+      }),
+      [&] {
+        auto title = "focusPositionRelative(" +        //
+                     std::to_string(focus_x) + ", " +  //
+                     std::to_string(focus_y) + ")";    //
+        return vbox({
+                   text(title),
+                   separator(),
+                   slider_x->Render(),
+                   slider_y->Render(),
+                   separator(),
+                   make_grid() | focusPositionRelative(focus_x, focus_y) |
+                       frame | flex,
+               }) |
+               border;
+      });
+
+  auto screen = ScreenInteractive::Fullscreen();
+  screen.Loop(renderer);
+
+  return 0;
+}

examples/component/focus_cursor.cpp

@@ -0,0 +1,37 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <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;
+}

examples/component/gallery.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <functional>  // for function
 #include <memory>      // for shared_ptr, allocator, __shared_ptr_access
 #include <string>      // for string, basic_string
@@ -23,7 +26,7 @@ Component Wrap(std::string name, Component component) {
   });
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::FitComponent();
 
   // -- Menu
@@ -94,7 +97,25 @@ int main(int argc, const char* argv[]) {
   });
   sliders = Wrap("Slider", sliders);
 
-  // -- Layout -----------------------------------------------------------------
+  // A large text:
+  auto lorel_ipsum = Renderer([] {
+    return vbox({
+        text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. "),
+        text("Sed do eiusmod tempor incididunt ut labore et dolore magna "
+             "aliqua. "),
+        text("Ut enim ad minim veniam, quis nostrud exercitation ullamco "
+             "laboris nisi ut aliquip ex ea commodo consequat. "),
+        text("Duis aute irure dolor in reprehenderit in voluptate velit esse "
+             "cillum dolore eu fugiat nulla pariatur. "),
+        text("Excepteur sint occaecat cupidatat non proident, sunt in culpa "
+             "qui officia deserunt mollit anim id est laborum. "),
+
+    });
+  });
+  lorel_ipsum = Wrap("Lorel Ipsum", lorel_ipsum);
+
+  // -- Layout
+  // -----------------------------------------------------------------
   auto layout = Container::Vertical({
       menu,
       toggle,
@@ -103,6 +124,7 @@ int main(int argc, const char* argv[]) {
       input,
       sliders,
       button,
+      lorel_ipsum,
   });
 
   auto component = Renderer(layout, [&] {
@@ -120,6 +142,8 @@ int main(int argc, const char* argv[]) {
                sliders->Render(),
                separator(),
                button->Render(),
+               separator(),
+               lorel_ipsum->Render(),
            }) |
            xflex | size(WIDTH, GREATER_THAN, 40) | border;
   });
@@ -128,7 +152,3 @@ int main(int argc, const char* argv[]) {
 
   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/homescreen.cpp

@@ -1,27 +1,38 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <stddef.h>    // for size_t
 #include <array>       // for array
+#include <atomic>      // for atomic
 #include <chrono>      // for operator""s, chrono_literals
 #include <cmath>       // for sin
 #include <functional>  // for ref, reference_wrapper, function
 #include <memory>      // for allocator, shared_ptr, __shared_ptr_access
-#include <string>  // for string, basic_string, operator+, char_traits, to_string
+#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 "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"  // for Checkbox, Renderer, Horizontal, Vertical, Menu, Radiobox, Tab, Toggle
-#include "ftxui/component/component_base.hpp"     // for ComponentBase
-#include "ftxui/component/component_options.hpp"  // for InputOption
+#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, 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
-#include "ftxui/dom/elements.hpp"  // for operator|, color, bgcolor, filler, Element, size, vbox, flex, hbox, graph, separator, EQUAL, WIDTH, hcenter, bold, border, window, HEIGHT, Elements, hflow, flex_grow, frame, gauge, LESS_THAN, spinner, dim, GREATER_THAN
-#include "ftxui/screen/color.hpp"  // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default
+#include "ftxui/dom/elements.hpp"  // for text, color, operator|, bgcolor, filler, Element, vbox, size, hbox, separator, flex, window, graph, EQUAL, paragraph, WIDTH, hcenter, Elements, bold, vscroll_indicator, HEIGHT, flexbox, hflow, border, frame, flex_grow, gauge, paragraphAlignCenter, paragraphAlignJustify, paragraphAlignLeft, paragraphAlignRight, dim, spinner, LESS_THAN, center, yframe, GREATER_THAN
+#include "ftxui/dom/flexbox_config.hpp"  // for FlexboxConfig
+#include "ftxui/screen/color.hpp"  // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default, Color::Palette256, ftxui
+#include "ftxui/screen/color_info.hpp"  // for ColorInfo
+#include "ftxui/screen/terminal.hpp"    // for Size, Dimensions
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::Fullscreen();
 
+  // ---------------------------------------------------------------------------
+  // HTOP
+  // ---------------------------------------------------------------------------
   int shift = 0;
 
   auto my_graph = [&shift](int width, int height) {
@@ -89,9 +100,13 @@ int main(int argc, const char* argv[]) {
                separator(),
                ram | flex,
            }) |
-           flex | border;
+           flex;
   });
 
+  // ---------------------------------------------------------------------------
+  // Compiler
+  // ---------------------------------------------------------------------------
+
   const std::vector<std::string> compiler_entries = {
       "gcc",
       "clang",
@@ -245,64 +260,128 @@ int main(int argc, const char* argv[]) {
                }) | size(HEIGHT, LESS_THAN, 8),
                hflow(render_command()) | flex_grow,
            }) |
-           flex_grow | border;
+           flex_grow;
   });
 
+  // ---------------------------------------------------------------------------
+  // Spinner
+  // ---------------------------------------------------------------------------
   auto spinner_tab_renderer = Renderer([&] {
     Elements entries;
     for (int i = 0; i < 22; ++i) {
       entries.push_back(spinner(i, shift / 2) | bold |
                         size(WIDTH, GREATER_THAN, 2) | border);
     }
-    return hflow(std::move(entries)) | border;
+    return hflow(std::move(entries));
   });
 
+  // ---------------------------------------------------------------------------
+  // Colors
+  // ---------------------------------------------------------------------------
   auto color_tab_renderer = Renderer([] {
-    return hbox({
-               vbox({
-                   color(Color::Default, text("Default")),
-                   color(Color::Black, text("Black")),
-                   color(Color::GrayDark, text("GrayDark")),
-                   color(Color::GrayLight, text("GrayLight")),
-                   color(Color::White, text("White")),
-                   color(Color::Blue, text("Blue")),
-                   color(Color::BlueLight, text("BlueLight")),
-                   color(Color::Cyan, text("Cyan")),
-                   color(Color::CyanLight, text("CyanLight")),
-                   color(Color::Green, text("Green")),
-                   color(Color::GreenLight, text("GreenLight")),
-                   color(Color::Magenta, text("Magenta")),
-                   color(Color::MagentaLight, text("MagentaLight")),
-                   color(Color::Red, text("Red")),
-                   color(Color::RedLight, text("RedLight")),
-                   color(Color::Yellow, text("Yellow")),
-                   color(Color::YellowLight, text("YellowLight")),
-               }),
-               vbox({
-                   bgcolor(Color::Default, text("Default")),
-                   bgcolor(Color::Black, text("Black")),
-                   bgcolor(Color::GrayDark, text("GrayDark")),
-                   bgcolor(Color::GrayLight, text("GrayLight")),
-                   bgcolor(Color::White, text("White")),
-                   bgcolor(Color::Blue, text("Blue")),
-                   bgcolor(Color::BlueLight, text("BlueLight")),
-                   bgcolor(Color::Cyan, text("Cyan")),
-                   bgcolor(Color::CyanLight, text("CyanLight")),
-                   bgcolor(Color::Green, text("Green")),
-                   bgcolor(Color::GreenLight, text("GreenLight")),
-                   bgcolor(Color::Magenta, text("Magenta")),
-                   bgcolor(Color::MagentaLight, text("MagentaLight")),
-                   bgcolor(Color::Red, text("Red")),
-                   bgcolor(Color::RedLight, text("RedLight")),
-                   bgcolor(Color::Yellow, text("Yellow")),
-                   bgcolor(Color::YellowLight, text("YellowLight")),
-               }),
-           }) |
-           hcenter | border;
+    auto basic_color_display =
+        vbox({
+            text("16 color palette:"),
+            separator(),
+            hbox({
+                vbox({
+                    color(Color::Default, text("Default")),
+                    color(Color::Black, text("Black")),
+                    color(Color::GrayDark, text("GrayDark")),
+                    color(Color::GrayLight, text("GrayLight")),
+                    color(Color::White, text("White")),
+                    color(Color::Blue, text("Blue")),
+                    color(Color::BlueLight, text("BlueLight")),
+                    color(Color::Cyan, text("Cyan")),
+                    color(Color::CyanLight, text("CyanLight")),
+                    color(Color::Green, text("Green")),
+                    color(Color::GreenLight, text("GreenLight")),
+                    color(Color::Magenta, text("Magenta")),
+                    color(Color::MagentaLight, text("MagentaLight")),
+                    color(Color::Red, text("Red")),
+                    color(Color::RedLight, text("RedLight")),
+                    color(Color::Yellow, text("Yellow")),
+                    color(Color::YellowLight, text("YellowLight")),
+                }),
+                vbox({
+                    bgcolor(Color::Default, text("Default")),
+                    bgcolor(Color::Black, text("Black")),
+                    bgcolor(Color::GrayDark, text("GrayDark")),
+                    bgcolor(Color::GrayLight, text("GrayLight")),
+                    bgcolor(Color::White, text("White")),
+                    bgcolor(Color::Blue, text("Blue")),
+                    bgcolor(Color::BlueLight, text("BlueLight")),
+                    bgcolor(Color::Cyan, text("Cyan")),
+                    bgcolor(Color::CyanLight, text("CyanLight")),
+                    bgcolor(Color::Green, text("Green")),
+                    bgcolor(Color::GreenLight, text("GreenLight")),
+                    bgcolor(Color::Magenta, text("Magenta")),
+                    bgcolor(Color::MagentaLight, text("MagentaLight")),
+                    bgcolor(Color::Red, text("Red")),
+                    bgcolor(Color::RedLight, text("RedLight")),
+                    bgcolor(Color::Yellow, text("Yellow")),
+                    bgcolor(Color::YellowLight, text("YellowLight")),
+                }),
+            }),
+        }) |
+        border;
+
+    auto palette_256_color_display = text("256 colors palette:");
+    {
+      std::vector<std::vector<ColorInfo>> info_columns = ColorInfoSorted2D();
+      Elements columns;
+      for (auto& column : info_columns) {
+        Elements column_elements;
+        for (auto& it : column) {
+          column_elements.push_back(
+              text("   ") | bgcolor(Color(Color::Palette256(it.index_256))));
+        }
+        columns.push_back(hbox(std::move(column_elements)));
+      }
+      palette_256_color_display = vbox({
+                                      palette_256_color_display,
+                                      separator(),
+                                      vbox(columns),
+                                  }) |
+                                  border;
+    }
+
+    // True color display.
+    auto true_color_display = text("TrueColors: 24bits:");
+    {
+      int saturation = 255;
+      Elements array;
+      for (int value = 0; value < 255; value += 16) {
+        Elements line;
+        for (int hue = 0; hue < 255; hue += 6) {
+          line.push_back(text("▀")                                    //
+                         | color(Color::HSV(hue, saturation, value))  //
+                         | bgcolor(Color::HSV(hue, saturation, value + 8)));
+        }
+        array.push_back(hbox(std::move(line)));
+      }
+      true_color_display = vbox({
+                               true_color_display,
+                               separator(),
+                               vbox(std::move(array)),
+                           }) |
+                           border;
+    }
+
+    return flexbox(
+        {
+            basic_color_display,
+            palette_256_color_display,
+            true_color_display,
+        },
+        FlexboxConfig().SetGap(1, 1));
   });
 
+  // ---------------------------------------------------------------------------
+  // Gauges
+  // ---------------------------------------------------------------------------
   auto render_gauge = [&shift](int delta) {
-    float progress = (shift + delta) % 1000 / 1000.f;
+    float progress = (shift + delta) % 500 / 500.f;
     return hbox({
         text(std::to_string(int(progress * 100)) + "% ") |
             size(WIDTH, EQUAL, 5),
@@ -312,32 +391,94 @@ int main(int argc, const char* argv[]) {
 
   auto gauge_component = Renderer([render_gauge] {
     return vbox({
-               render_gauge(0) | color(Color::Black),
-               render_gauge(100) | color(Color::GrayDark),
-               render_gauge(50) | color(Color::GrayLight),
-               render_gauge(6894) | color(Color::White),
-               separator(),
-               render_gauge(6841) | color(Color::Blue),
-               render_gauge(9813) | color(Color::BlueLight),
-               render_gauge(98765) | color(Color::Cyan),
-               render_gauge(98) | color(Color::CyanLight),
-               render_gauge(9846) | color(Color::Green),
-               render_gauge(1122) | color(Color::GreenLight),
-               render_gauge(84) | color(Color::Magenta),
-               render_gauge(645) | color(Color::MagentaLight),
-               render_gauge(568) | color(Color::Red),
-               render_gauge(2222) | color(Color::RedLight),
-               render_gauge(220) | color(Color::Yellow),
-               render_gauge(348) | color(Color::YellowLight),
-           }) |
-           border;
+        render_gauge(0) | color(Color::Black),
+        render_gauge(100) | color(Color::GrayDark),
+        render_gauge(50) | color(Color::GrayLight),
+        render_gauge(6894) | color(Color::White),
+        separator(),
+        render_gauge(6841) | color(Color::Blue),
+        render_gauge(9813) | color(Color::BlueLight),
+        render_gauge(98765) | color(Color::Cyan),
+        render_gauge(98) | color(Color::CyanLight),
+        render_gauge(9846) | color(Color::Green),
+        render_gauge(1122) | color(Color::GreenLight),
+        render_gauge(84) | color(Color::Magenta),
+        render_gauge(645) | color(Color::MagentaLight),
+        render_gauge(568) | color(Color::Red),
+        render_gauge(2222) | color(Color::RedLight),
+        render_gauge(220) | color(Color::Yellow),
+        render_gauge(348) | color(Color::YellowLight),
+    });
   });
 
+  // ---------------------------------------------------------------------------
+  // Paragraph
+  // ---------------------------------------------------------------------------
+  auto make_box = [](size_t dimx, size_t dimy) {
+    std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
+    return window(text(title) | hcenter | bold,
+                  text("content") | hcenter | dim) |
+           size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
+  };
+
+  auto paragraph_renderer_left = Renderer([&] {
+    std::string str =
+        "Lorem Ipsum is simply dummy text of the printing and typesetting "
+        "industry.\nLorem Ipsum has been the industry's standard dummy text "
+        "ever since the 1500s, when an unknown printer took a galley of type "
+        "and scrambled it to make a type specimen book.";
+    return vbox({
+               window(text("Align left:"), paragraphAlignLeft(str)),
+               window(text("Align center:"), paragraphAlignCenter(str)),
+               window(text("Align right:"), paragraphAlignRight(str)),
+               window(text("Align justify:"), paragraphAlignJustify(str)),
+               window(text("Side by side"), hbox({
+                                                paragraph(str),
+                                                separator(),
+                                                paragraph(str),
+                                            })),
+               window(text("Elements with different size:"),
+                      flexbox({
+                          make_box(10, 5),
+                          make_box(9, 4),
+                          make_box(8, 4),
+                          make_box(6, 3),
+                          make_box(10, 5),
+                          make_box(9, 4),
+                          make_box(8, 4),
+                          make_box(6, 3),
+                          make_box(10, 5),
+                          make_box(9, 4),
+                          make_box(8, 4),
+                          make_box(6, 3),
+                      })),
+           }) |
+           vscroll_indicator | yframe | flex;
+  });
+
+  auto paragraph_renderer_right = Renderer([] {
+    return paragraph("<--- This vertical bar is resizable using the  mouse") |
+           center;
+  });
+
+  int paragraph_renderer_split_position = Terminal::Size().dimx / 2;
+  auto paragraph_renderer_group =
+      ResizableSplitLeft(paragraph_renderer_left, paragraph_renderer_right,
+                         &paragraph_renderer_split_position);
+  auto paragraph_renderer_group_renderer =
+      Renderer(paragraph_renderer_group,
+               [&] { return paragraph_renderer_group->Render(); });
+
+  // ---------------------------------------------------------------------------
+  // Tabs
+  // ---------------------------------------------------------------------------
+
   int tab_index = 0;
   std::vector<std::string> tab_entries = {
-      "htop", "color", "spinner", "gauge", "compiler",
+      "htop", "color", "spinner", "gauge", "compiler", "paragraph",
   };
-  auto tab_selection = Toggle(&tab_entries, &tab_index);
+  auto tab_selection =
+      Menu(&tab_entries, &tab_index, MenuOption::HorizontalAnimated());
   auto tab_content = Container::Tab(
       {
           htop,
@@ -345,29 +486,44 @@ int main(int argc, const char* argv[]) {
           spinner_tab_renderer,
           gauge_component,
           compiler_renderer,
+          paragraph_renderer_group_renderer,
       },
       &tab_index);
 
+  auto exit_button =
+      Button("Exit", [&] { screen.Exit(); }, ButtonOption::Animated());
+
   auto main_container = Container::Vertical({
-      tab_selection,
+      Container::Horizontal({
+          tab_selection,
+          exit_button,
+      }),
       tab_content,
   });
 
   auto main_renderer = Renderer(main_container, [&] {
     return vbox({
         text("FTXUI Demo") | bold | hcenter,
-        tab_selection->Render() | hcenter,
+        hbox({
+            tab_selection->Render() | flex,
+            exit_button->Render(),
+        }),
         tab_content->Render() | flex,
     });
   });
 
-  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++;
-      screen.PostEvent(Event::Custom);
+      // The |shift| variable belong to the main thread. `screen.Post(task)`
+      // will execute the update on the thread where |screen| lives (e.g. the
+      // main thread). Using `screen.Post(task)` is threadsafe.
+      screen.Post([&] { shift++; });
+      // After updating the state, request a new frame to be drawn. This is done
+      // by simulating a new "custom" event to be handled.
+      screen.Post(Event::Custom);
     }
   });
 
@@ -377,7 +533,3 @@ int main(int argc, const char* argv[]) {
 
   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/input.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, __shared_ptr_access
 #include <string>  // for char_traits, operator+, string, basic_string
 
@@ -9,33 +12,53 @@
 #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;
 
+  // The data:
   std::string first_name;
   std::string last_name;
   std::string password;
+  std::string phoneNumber;
 
+  // The basic input components:
   Component input_first_name = Input(&first_name, "first name");
   Component input_last_name = Input(&last_name, "last name");
 
+  // The password input component:
   InputOption password_option;
   password_option.password = true;
   Component input_password = Input(&password, "password", password_option);
 
+  // The phone number input component:
+  // We are using `CatchEvent` to filter out non-digit characters.
+  Component input_phone_number = Input(&phoneNumber, "phone number");
+  input_phone_number |= CatchEvent([&](Event event) {
+    return event.is_character() && !std::isdigit(event.character()[0]);
+  });
+  input_phone_number |= CatchEvent([&](Event event) {
+    return event.is_character() && phoneNumber.size() > 10;
+  });
+
+  // The component tree:
   auto component = Container::Vertical({
       input_first_name,
       input_last_name,
       input_password,
+      input_phone_number,
   });
 
+  // Tweak how the component tree is rendered:
   auto renderer = Renderer(component, [&] {
     return vbox({
-               text("Hello " + first_name + " " + last_name),
-               separator(),
                hbox(text(" First name : "), input_first_name->Render()),
                hbox(text(" Last name  : "), input_last_name->Render()),
                hbox(text(" Password   : "), input_password->Render()),
+               hbox(text(" Phone num  : "), input_phone_number->Render()),
+               separator(),
+               text("Hello " + first_name + " " + last_name),
+               text("Your password is " + password),
+               text("Your phone number is " + phoneNumber),
            }) |
            border;
   });
@@ -43,7 +66,3 @@ int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
   screen.Loop(renderer);
 }
-
-// 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/input_in_frame.cpp

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

examples/component/input_style.cpp

@@ -0,0 +1,97 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <ftxui/dom/linear_gradient.hpp>  // for LinearGradient
+#include <ftxui/screen/color.hpp>  // for Color, Color::White, Color::Red, Color::Blue, Color::Black, Color::GrayDark, ftxui
+#include <functional>              // for function
+#include <string>                  // for allocator, string
+#include <utility>                 // for move
+
+#include "ftxui/component/component.hpp"  // for Input, Horizontal, Vertical, operator|
+#include "ftxui/component/component_base.hpp"     // for Component
+#include "ftxui/component/component_options.hpp"  // for InputState, InputOption
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|=, Element, bgcolor, operator|, separatorEmpty, color, borderEmpty, separator, text, center, dim, hbox, vbox, border, borderDouble, borderRounded
+
+int main() {
+  using namespace ftxui;
+
+  InputOption style_1 = InputOption::Default();
+
+  InputOption style_2 = InputOption::Spacious();
+
+  InputOption style_3 = InputOption::Spacious();
+  style_3.transform = [](InputState state) {
+    state.element |= borderEmpty;
+
+    if (state.is_placeholder) {
+      state.element |= dim;
+    }
+
+    if (state.focused) {
+      state.element |= borderDouble;
+      state.element |= bgcolor(Color::White);
+      state.element |= color(Color::Black);
+    } else if (state.hovered) {
+      state.element |= borderRounded;
+      state.element |= bgcolor(LinearGradient(90, Color::Blue, Color::Red));
+      state.element |= color(Color::White);
+    } else {
+      state.element |= border;
+      state.element |= bgcolor(LinearGradient(0, Color::Blue, Color::Red));
+      state.element |= color(Color::White);
+    }
+
+    return state.element;
+  };
+
+  InputOption style_4 = InputOption::Spacious();
+  style_4.transform = [](InputState state) {
+    state.element = hbox({
+        text("Theorem") | center | borderEmpty | bgcolor(Color::Red),
+        separatorEmpty(),
+        separator() | color(Color::White),
+        separatorEmpty(),
+        std::move(state.element),
+    });
+
+    state.element |= borderEmpty;
+    if (state.is_placeholder) {
+      state.element |= dim;
+    }
+
+    if (state.focused) {
+      state.element |= bgcolor(Color::Black);
+    } else {
+      state.element |= bgcolor(Color::Blue);
+    }
+
+    if (state.hovered) {
+      state.element |= bgcolor(Color::GrayDark);
+    }
+
+    return vbox({state.element, separatorEmpty()});
+  };
+
+  auto generateUiFromStyle = [&](InputOption style) {
+    auto first_name = new std::string();   // Leaked
+    auto middle_name = new std::string();  // Leaked
+    auto last_name = new std::string();    // Leaked
+    return Container::Vertical({
+               Input(first_name, "first name", style),
+               Input(middle_name, "middle name", style),
+               Input(last_name, "last name", style),
+           }) |
+           borderEmpty;
+  };
+
+  auto ui = Container::Horizontal({
+      generateUiFromStyle(style_1),
+      generateUiFromStyle(style_2),
+      generateUiFromStyle(style_3),
+      generateUiFromStyle(style_4),
+  });
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(ui);
+}

examples/component/linear_gradient_gallery.cpp

@@ -0,0 +1,55 @@
+// Copyright 2023 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <ftxui/component/component_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, 0.05f);
+  auto slider_end = Slider(&slider_end_text, &end, 0.f, 1.f, 0.05f);
+
+  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);
+}

examples/component/maybe.cpp

@@ -1,20 +1,19 @@
-#include <functional>  // for function
-#include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
-#include <string>    // for string, basic_string, allocator
-#include <vector>    // for vector
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <string>  // for string, allocator, basic_string
+#include <vector>  // for vector
 
-#include "ftxui/component/captured_mouse.hpp"      // for ftxui
-#include "ftxui/component/component.hpp"           // for Menu
-#include "ftxui/component/component_options.hpp"   // for MenuOption
+#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 Element, border, color, operator|, text
+#include "ftxui/screen/color.hpp"  // for Color, Color::Red
 
 using namespace ftxui;
-Component Border(Component child) {
-  return Renderer(child, [child] { return child->Render() | border; });
-}
-
-int main(int argc, const char* argv[]) {
 
+int main() {
   std::vector<std::string> entries = {
       "entry 1",
       "entry 2",
@@ -22,26 +21,21 @@ int main(int argc, const char* argv[]) {
   };
   int menu_1_selected = 0;
   int menu_2_selected = 0;
-  auto menu_1 = Radiobox(&entries, &menu_1_selected);
-  auto menu_2 = Radiobox(&entries, &menu_2_selected);
-
-  menu_1 = Border(menu_1);
-  menu_2 = Border(menu_2);
 
   bool menu_1_show = false;
   bool menu_2_show = false;
 
   auto layout = Container::Vertical({
       Checkbox("Show menu_1", &menu_1_show),
-      Maybe(menu_1, &menu_1_show),
+      Radiobox(&entries, &menu_1_selected) | border | Maybe(&menu_1_show),
       Checkbox("Show menu_2", &menu_2_show),
-      Maybe(menu_2, &menu_2_show),
+      Radiobox(&entries, &menu_2_selected) | border | Maybe(&menu_2_show),
+
+      Renderer([] {
+        return text("You found the secret combinaison!") | color(Color::Red);
+      }) | Maybe([&] { return menu_1_selected == 1 && menu_2_selected == 2; }),
   });
 
   auto screen = ScreenInteractive::TerminalOutput();
   screen.Loop(layout);
 }
-
-// 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/menu.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <functional>  // for function
 #include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
 #include <string>    // for string, basic_string, allocator
@@ -8,7 +11,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();
 
@@ -21,13 +24,9 @@ int main(int argc, const char* argv[]) {
 
   MenuOption option;
   option.on_enter = screen.ExitLoopClosure();
-  auto menu = Menu(&entries, &selected, &option);
+  auto menu = Menu(&entries, &selected, option);
 
   screen.Loop(menu);
 
   std::cout << "Selected element = " << selected << 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/component/menu2.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <functional>  // for function
 #include <memory>      // for allocator, __shared_ptr_access
 #include <string>      // for string, basic_string, operator+, to_string
@@ -10,7 +13,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();
 
@@ -27,9 +30,9 @@ int main(int argc, const char* argv[]) {
   int left_menu_selected = 0;
   int right_menu_selected = 0;
   Component left_menu_ =
-      Menu(&left_menu_entries, &left_menu_selected, &menu_option);
+      Menu(&left_menu_entries, &left_menu_selected, menu_option);
   Component right_menu_ =
-      Menu(&right_menu_entries, &right_menu_selected, &menu_option);
+      Menu(&right_menu_entries, &right_menu_selected, menu_option);
 
   Component container = Container::Horizontal({
       left_menu_,
@@ -74,7 +77,3 @@ int main(int argc, const char* argv[]) {
 
   screen.Loop(renderer);
 }
-
-// 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/menu_entries.cpp

@@ -1,28 +1,37 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <functional>  // for function
 #include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
-#include <memory>    // for shared_ptr, __shared_ptr_access
-#include <string>    // for to_string, allocator
+#include <memory>    // for allocator, shared_ptr, __shared_ptr_access
+#include <string>  // for char_traits, to_string, operator+, string, basic_string
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
 #include "ftxui/component/component.hpp"  // for MenuEntry, Renderer, Vertical
 #include "ftxui/component/component_base.hpp"      // for ComponentBase
 #include "ftxui/component/component_options.hpp"   // for MenuEntryOption
 #include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for operator|, separator, Element, Decorator, color, text, hbox, size, bold, frame, inverted, vbox, HEIGHT, LESS_THAN, border
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, separator, text, hbox, size, frame, color, vbox, HEIGHT, LESS_THAN, bold, border, inverted
 #include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Cyan, Color::Green, Color::Red, Color::Yellow
 
 using namespace ftxui;
 
 // Define a special style for some menu entry.
 MenuEntryOption Colored(ftxui::Color c) {
-  MenuEntryOption special_style;
-  special_style.style_normal = Decorator(color(c));
-  special_style.style_focused = Decorator(color(c)) | inverted;
-  special_style.style_selected = Decorator(color(c)) | bold;
-  special_style.style_selected_focused = Decorator(color(c)) | inverted | bold;
-  return special_style;
+  MenuEntryOption option;
+  option.transform = [c](EntryState state) {
+    state.label = (state.active ? "> " : "  ") + state.label;
+    Element e = text(state.label) | color(c);
+    if (state.focused)
+      e = e | inverted;
+    if (state.active)
+      e = e | bold;
+    return e;
+  };
+  return option;
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
 
   int selected = 0;
@@ -70,7 +79,3 @@ int main(int argc, const char* argv[]) {
 
   std::cout << "Selected element = " << selected << 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/component/menu_entries_animated.cpp

@@ -0,0 +1,65 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <iostream>  // for basic_ostream::operator<<, operator<<, endl, basic_ostream, basic_ostream<>::__ostream_type, cout, ostream
+#include <memory>    // for shared_ptr, __shared_ptr_access
+#include <string>    // for to_string, allocator
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for MenuEntryAnimated, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/component_options.hpp"   // for MenuEntryAnimated
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, separator, Element, Decorator, color, text, hbox, size, bold, frame, inverted, vbox, HEIGHT, LESS_THAN, border
+#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Cyan, Color::Green, Color::Red, Color::Yellow
+
+using namespace ftxui;
+
+// Define a special style for some menu entry.
+MenuEntryOption Colored(ftxui::Color c) {
+  MenuEntryOption option;
+  option.animated_colors.foreground.enabled = true;
+  option.animated_colors.background.enabled = true;
+  option.animated_colors.background.active = c;
+  option.animated_colors.background.inactive = Color::Black;
+  option.animated_colors.foreground.active = Color::White;
+  option.animated_colors.foreground.inactive = c;
+  return option;
+}
+
+int main() {
+  auto screen = ScreenInteractive::TerminalOutput();
+
+  int selected = 0;
+  auto menu = Container::Vertical(
+      {
+          MenuEntry(" 1. rear", Colored(Color::Red)),
+          MenuEntry(" 2. drown", Colored(Color::Yellow)),
+          MenuEntry(" 3. nail", Colored(Color::Green)),
+          MenuEntry(" 4. quit", Colored(Color::Cyan)),
+          MenuEntry(" 5. decorative", Colored(Color::Blue)),
+          MenuEntry(" 7. costume"),
+          MenuEntry(" 8. pick"),
+          MenuEntry(" 9. oral"),
+          MenuEntry("11. minister"),
+          MenuEntry("12. football"),
+          MenuEntry("13. welcome"),
+          MenuEntry("14. copper"),
+          MenuEntry("15. inhabitant"),
+      },
+      &selected);
+
+  // Display together the menu with a border
+  auto renderer = Renderer(menu, [&] {
+    return vbox({
+               hbox(text("selected = "), text(std::to_string(selected))),
+               separator(),
+               menu->Render() | frame,
+           }) |
+           border | bgcolor(Color::Black);
+  });
+
+  screen.Loop(renderer);
+
+  std::cout << "Selected element = " << selected << std::endl;
+}

examples/component/menu_in_frame.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for shared_ptr, __shared_ptr_access
 #include <string>  // for string, basic_string, operator+, to_string
 #include <vector>  // for vector
@@ -10,7 +13,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> entries;
   int selected = 0;
 
@@ -27,7 +30,3 @@ int main(int argc, const char* argv[]) {
 
   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/menu_in_frame_horizontal.cpp

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

examples/component/menu_multiple.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <stdlib.h>  // for EXIT_SUCCESS
 #include <memory>    // for allocator, __shared_ptr_access
 #include <string>  // for string, operator+, basic_string, to_string, char_traits
@@ -17,7 +20,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 = {
       {
@@ -72,7 +75,3 @@ int main(int argc, const char* argv[]) {
   screen.Loop(global);
   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/menu_style.cpp

@@ -1,100 +1,257 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <array>       // for array
+#include <chrono>      // for milliseconds
 #include <functional>  // for function
-#include <memory>      // for shared_ptr, __shared_ptr_access, allocator
-#include <string>      // for string, basic_string
+#include <memory>      // for __shared_ptr_access, shared_ptr, allocator
+#include <string>      // for string, char_traits, operator+, basic_string
 #include <vector>      // for vector
 
-#include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"       // for Menu, Horizontal, Renderer
-#include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/component_options.hpp"   // for MenuOption
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for operator|, color, separator, Decorator, bgcolor, flex, Element, bold, hbox, border, dim
-#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::BlueLight, Color::Red, Color::Yellow
+#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, 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
+#include "ftxui/screen/color.hpp"  // for Color, Color::Red, Color::Black, Color::Yellow, Color::Blue, Color::Default, Color::White
 
-int main(int argc, const char* argv[]) {
-  using namespace ftxui;
+using namespace ftxui;
+
+Component VMenu1(std::vector<std::string>* entries, int* selected);
+Component VMenu2(std::vector<std::string>* entries, int* selected);
+Component VMenu3(std::vector<std::string>* entries, int* selected);
+Component VMenu4(std::vector<std::string>* entries, int* selected);
+Component VMenu5(std::vector<std::string>* entries, int* selected);
+Component VMenu6(std::vector<std::string>* entries, int* selected);
+Component VMenu7(std::vector<std::string>* entries, int* selected);
+Component VMenu8(std::vector<std::string>* entries, int* selected);
+Component HMenu1(std::vector<std::string>* entries, int* selected);
+Component HMenu2(std::vector<std::string>* entries, int* selected);
+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() {
   auto screen = ScreenInteractive::TerminalOutput();
 
-  std::vector<std::string> entries = {
-      "Monkey", "Dog", "Cat", "Bird", "Elephant",
+  std::vector<std::string> entries{
+      "Monkey", "Dog", "Cat", "Bird", "Elephant", "Cat",
   };
-  int menu_1_selected_ = 0;
-  int menu_2_selected_ = 0;
-  int menu_3_selected_ = 0;
-  int menu_4_selected_ = 0;
-  int menu_5_selected_ = 0;
-  int menu_6_selected_ = 0;
+  std::array<int, 12> selected = {0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0};
 
-  MenuOption option_1;
-  option_1.style_focused = bold | color(Color::Blue);
-  option_1.style_selected = color(Color::Blue);
-  option_1.style_selected_focused = bold | color(Color::Blue);
-  option_1.on_enter = screen.ExitLoopClosure();
-  auto menu_1_ = Menu(&entries, &menu_1_selected_, &option_1);
+  auto vmenu_1_ = VMenu1(&entries, &selected[0]);
+  auto vmenu_2_ = VMenu2(&entries, &selected[1]);
+  auto vmenu_3_ = VMenu3(&entries, &selected[2]);
+  auto vmenu_4_ = VMenu4(&entries, &selected[3]);
+  auto vmenu_5_ = VMenu5(&entries, &selected[4]);
+  auto vmenu_6_ = VMenu6(&entries, &selected[5]);
+  auto vmenu_7_ = VMenu7(&entries, &selected[6]);
+  auto vmenu_8_ = VMenu8(&entries, &selected[7]);
 
-  MenuOption option_2;
-  option_2.style_focused = bold | color(Color::Blue);
-  option_2.style_selected = color(Color::Blue);
-  option_2.style_selected_focused = bold | color(Color::Blue);
-  option_2.on_enter = screen.ExitLoopClosure();
-  auto menu_2_ = Menu(&entries, &menu_2_selected_, &option_2);
+  auto hmenu_1_ = HMenu1(&entries, &selected[8]);
+  auto hmenu_2_ = HMenu2(&entries, &selected[9]);
+  auto hmenu_3_ = HMenu3(&entries, &selected[10]);
+  auto hmenu_4_ = HMenu4(&entries, &selected[11]);
+  auto hmenu_5_ = HMenu5(&entries, &selected[12]);
 
-  MenuOption option_3;
-  option_3.style_selected = color(Color::Blue);
-  option_3.style_focused = bgcolor(Color::Blue);
-  option_3.style_selected_focused = bgcolor(Color::Blue);
-  option_3.on_enter = screen.ExitLoopClosure();
-  auto menu_3_ = Menu(&entries, &menu_3_selected_, &option_3);
-
-  MenuOption option_4;
-  option_4.style_selected = bgcolor(Color::Blue);
-  option_4.style_focused = bgcolor(Color::BlueLight);
-  option_4.style_selected_focused = bgcolor(Color::BlueLight);
-  option_4.on_enter = screen.ExitLoopClosure();
-  auto menu_4_ = Menu(&entries, &menu_4_selected_, &option_4);
-
-  MenuOption option_5;
-  option_5.style_normal = bgcolor(Color::Blue);
-  option_5.style_selected = bgcolor(Color::Yellow);
-  option_5.style_focused = bgcolor(Color::Red);
-  option_5.style_selected_focused = bgcolor(Color::Red);
-  option_5.on_enter = screen.ExitLoopClosure();
-  auto menu_5_ = Menu(&entries, &menu_5_selected_, &option_5);
-
-  MenuOption option_6;
-  option_6.style_normal = dim | color(Color::Blue);
-  option_6.style_selected = color(Color::Blue);
-  option_6.style_focused = bold | color(Color::Blue);
-  option_6.style_selected_focused = bold | color(Color::Blue);
-  option_6.on_enter = screen.ExitLoopClosure();
-  auto menu_6_ = Menu(&entries, &menu_6_selected_, &option_6);
-
-  auto container = Container::Horizontal({
-      menu_1_,
-      menu_2_,
-      menu_3_,
-      menu_4_,
-      menu_5_,
-      menu_6_,
+  auto container = Container::Vertical({
+      Container::Horizontal({
+          vmenu_1_,
+          vmenu_2_,
+          vmenu_3_,
+          vmenu_4_,
+          vmenu_5_,
+          vmenu_6_,
+          vmenu_7_,
+          vmenu_8_,
+      }),
+      hmenu_1_,
+      hmenu_2_,
+      hmenu_3_,
+      hmenu_4_,
+      hmenu_5_,
   });
 
-  // clang-format off
   auto renderer = Renderer(container, [&] {
-   return
-      hbox({
-        menu_1_->Render() | flex, separator(),
-        menu_2_->Render() | flex, separator(),
-        menu_3_->Render() | flex, separator(),
-        menu_4_->Render() | flex, separator(),
-        menu_5_->Render() | flex, separator(),
-        menu_6_->Render() | flex,
-      }) | border;
+    return  //
+        hbox({
+            vbox({
+                hbox({
+                    vmenu_1_->Render(),
+                    separator(),
+                    vmenu_2_->Render(),
+                    separator(),
+                    vmenu_3_->Render(),
+                    separator(),
+                    vmenu_4_->Render(),
+                    separator(),
+                    vmenu_5_->Render(),
+                    vmenu_6_->Render(),
+                    separator(),
+                    vmenu_7_->Render(),
+                    separator(),
+                    vmenu_8_->Render(),
+                }),
+                separator(),
+                hmenu_1_->Render(),
+                separator(),
+                hmenu_2_->Render(),
+                separator(),
+                hmenu_3_->Render(),
+                separator(),
+                hmenu_4_->Render(),
+                hmenu_5_->Render(),
+            }) | border,
+            filler(),
+        });
   });
-  // clang-format on
 
   screen.Loop(renderer);
 }
 
-// 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.
+Component VMenu1(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.transform = [](EntryState state) {
+    state.label = (state.active ? "> " : "  ") + state.label;
+    Element e = text(state.label);
+    if (state.focused)
+      e = e | bgcolor(Color::Blue);
+    if (state.active)
+      e = e | bold;
+    return e;
+  };
+  return Menu(entries, selected, option);
+}
+
+Component VMenu2(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.transform = [](EntryState state) {
+    state.label += (state.active ? " <" : "  ");
+    Element e = hbox(filler(), text(state.label));
+    if (state.focused)
+      e = e | bgcolor(Color::Red);
+    if (state.active)
+      e = e | bold;
+    return e;
+  };
+  return Menu(entries, selected, option);
+}
+
+Component VMenu3(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.transform = [](EntryState state) {
+    Element e = state.active ? text("[" + state.label + "]")
+                             : text(" " + state.label + " ");
+    if (state.focused)
+      e = e | bold;
+
+    if (state.focused)
+      e = e | color(Color::Blue);
+    if (state.active)
+      e = e | bold;
+    return e;
+  };
+  return Menu(entries, selected, option);
+}
+
+Component VMenu4(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.transform = [](EntryState state) {
+    if (state.active && state.focused) {
+      return text(state.label) | color(Color::Yellow) | bgcolor(Color::Black) |
+             bold;
+    }
+
+    if (state.active) {
+      return text(state.label) | color(Color::Yellow) | bgcolor(Color::Black);
+    }
+    if (state.focused) {
+      return text(state.label) | color(Color::Black) | bgcolor(Color::Yellow) |
+             bold;
+    }
+    return text(state.label) | color(Color::Black) | bgcolor(Color::Yellow);
+  };
+  return Menu(entries, selected, option);
+}
+
+Component VMenu5(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.transform = [](EntryState state) {
+    auto element = text(state.label);
+    if (state.active && state.focused) {
+      return element | borderDouble;
+    }
+    if (state.active) {
+      return element | border;
+    }
+    if (state.focused) {
+      return element | bold;
+    }
+    return element;
+  };
+  return Menu(entries, selected, option);
+}
+
+Component VMenu6(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::VerticalAnimated();
+  option.underline.color_inactive = Color::Default;
+  option.underline.color_active = Color::Red;
+  option.underline.SetAnimationFunction(animation::easing::Linear);
+  return Menu(entries, selected, option);
+}
+
+Component VMenu7(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.animated_colors.foreground.enabled = true;
+  option.entries_option.animated_colors.background.enabled = true;
+  option.entries_option.animated_colors.background.active = Color::Red;
+  option.entries_option.animated_colors.background.inactive = Color::Black;
+  option.entries_option.animated_colors.foreground.active = Color::White;
+  option.entries_option.animated_colors.foreground.inactive = Color::Red;
+  return Menu(entries, selected, option);
+}
+
+Component VMenu8(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Vertical();
+  option.entries_option.animated_colors.foreground.Set(
+      Color::Red, Color::White, std::chrono::milliseconds(500));
+  return Menu(entries, selected, option);
+}
+
+Component HMenu1(std::vector<std::string>* entries, int* selected) {
+  return Menu(entries, selected, MenuOption::Horizontal());
+}
+
+Component HMenu2(std::vector<std::string>* entries, int* selected) {
+  return Menu(entries, selected, MenuOption::Toggle());
+}
+
+Component HMenu3(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::Toggle();
+  option.elements_infix = [] { return text(" 🮣🮠 "); };
+
+  return Menu(entries, selected, option);
+}
+
+Component HMenu4(std::vector<std::string>* entries, int* selected) {
+  return Menu(entries, selected, MenuOption::HorizontalAnimated());
+}
+
+Component HMenu5(std::vector<std::string>* entries, int* selected) {
+  auto option = MenuOption::HorizontalAnimated();
+  option.underline.SetAnimation(std::chrono::milliseconds(1500),
+                                animation::easing::ElasticOut);
+  option.entries_option.transform = [](EntryState state) {
+    Element e = text(state.label) | hcenter | flex;
+    if (state.active && state.focused)
+      e = e | bold;
+    if (!state.focused && !state.active)
+      e = e | dim;
+    return e;
+  };
+  option.underline.color_inactive = Color::Default;
+  option.underline.color_active = Color::Red;
+  return Menu(entries, selected, option);
+}

examples/component/menu_underline_animated_gallery.cpp

@@ -0,0 +1,93 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <chrono>  // for operator""ms, literals
+#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
+#include <string>  // for string, operator+, to_string, basic_string
+#include <vector>  // for vector
+
+#include "ftxui/component/animation.hpp"       // for BackOut, Duration
+#include "ftxui/component/component.hpp"       // for Menu, Renderer, Vertical
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/component_options.hpp"  // for MenuOption, UnderlineOption
+#include "ftxui/component/mouse.hpp"              // for ftxui
+#include "ftxui/component/screen_interactive.hpp"  // for Component, ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for text, Element, operator|, borderEmpty, inverted
+#include "ftxui/screen/color.hpp"  // for Color, Color::Blue, Color::Red
+
+using namespace ftxui;
+
+Component DummyComponent(int id) {
+  return Renderer([id](bool focused) {
+    auto t = text("component " + std::to_string(id));
+    if (focused)
+      t = t | inverted;
+    return t;
+  });
+}
+
+Component Text(const std::string& t) {
+  return Renderer([t] { return text(t) | borderEmpty; });
+}
+
+int main() {
+  using namespace std::literals;
+  std::vector<std::string> tab_values{
+      "Tab 1", "Tab 2", "Tab 3", "A very very long tab", "탭",
+  };
+  int tab_selected = 0;
+
+  auto container = Container::Vertical({});
+
+  int frame_count = 0;
+  container->Add(Renderer(
+      [&] { return text("Frame count: " + std::to_string(frame_count++)); }));
+
+  {
+    auto option = MenuOption::HorizontalAnimated();
+    container->Add(Text("This demonstrate the Menu component"));
+    container->Add(Menu(&tab_values, &tab_selected, option));
+  }
+
+  {
+    container->Add(Text("Set underline color to blue"));
+    auto option = MenuOption::HorizontalAnimated();
+    option.underline.color_inactive = Color::Blue;
+    container->Add(Menu(&tab_values, &tab_selected, option));
+  }
+
+  {
+    container->Add(Text("Set underline active color to red"));
+    auto option = MenuOption::HorizontalAnimated();
+    option.underline.color_active = Color::Red;
+    container->Add(Menu(&tab_values, &tab_selected, option));
+  }
+
+  {
+    container->Add(Text("Set animation duration to 0ms"));
+    auto option = MenuOption::HorizontalAnimated();
+    option.underline.SetAnimationDuration(0ms);
+    container->Add(Menu(&tab_values, &tab_selected, option));
+  }
+
+  {
+    container->Add(Text("Set animation easing function to back-out"));
+    auto option = MenuOption::HorizontalAnimated();
+    option.underline.SetAnimationFunction(animation::easing::BackOut);
+    option.underline.SetAnimationDuration(350ms);
+    container->Add(Menu(&tab_values, &tab_selected, option));
+  }
+
+  // option.underline_animation_follower_delay = 250ms
+  {
+    container->Add(Text("Add delay to desynchronize animation"));
+    auto option = MenuOption::HorizontalAnimated();
+    option.underline.follower_delay = 250ms;
+    container->Add(Menu(&tab_values, &tab_selected, option));
+  }
+
+  container->SetActiveChild(container->ChildAt(2));
+
+  auto screen = ScreenInteractive::TerminalOutput();
+  screen.Loop(container);
+}

examples/component/modal_dialog.cpp

@@ -1,94 +1,82 @@
-#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(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;
-  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.
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.
+#include <ftxui/component/component_options.hpp>  // for ButtonOption
+#include <ftxui/component/mouse.hpp>              // for ftxui
+#include <functional>                             // for function
+#include <memory>                                 // for allocator, shared_ptr
+
+#include "ftxui/component/component.hpp"  // for Button, operator|=, Renderer, Vertical, Modal
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
+#include "ftxui/dom/elements.hpp"  // for operator|, separator, text, size, Element, vbox, border, GREATER_THAN, WIDTH, center, 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[]) {
+  auto screen = ScreenInteractive::TerminalOutput();
+
+  // State of the application:
+  bool modal_shown = false;
+
+  // Some actions modifying the state:
+  auto show_modal = [&] { modal_shown = true; };
+  auto hide_modal = [&] { modal_shown = false; };
+  auto exit = screen.ExitLoopClosure();
+  auto do_nothing = [&] {};
+
+  // Instanciate the main and modal components:
+  auto main_component = MainComponent(show_modal, exit);
+  auto modal_component = ModalComponent(do_nothing, hide_modal);
+
+  // Use the `Modal` function to use together the main component and its modal
+  // window. The |modal_shown| boolean controls whether the modal is shown or
+  // not.
+  main_component |= Modal(modal_component, &modal_shown);
+
+  screen.Loop(main_component);
+  return 0;
+}

examples/component/modal_dialog_custom.cpp

@@ -0,0 +1,93 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for 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;
+}

examples/component/nested_screen.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, shared_ptr, __shared_ptr_access
 #include <string>  // for operator+, string, char_traits, basic_string
 
@@ -35,7 +38,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(""); });
@@ -45,7 +48,3 @@ int main(int argc, const char* argv[]) {
   }));
   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/print_key_press.cpp

@@ -18,75 +18,48 @@
 
 using namespace ftxui;
 
-std::string Stringify(Event event) {
-  std::string out;
-  for (auto& it : event.input())
-    out += " " + std::to_string((unsigned int)it);
-
-  out = "(" + out + " ) -> ";
-  if (event.is_character()) {
-    out += "character(" + event.character() + ")";
-  } else if (event.is_mouse()) {
-    out += "mouse";
-    switch (event.mouse().button) {
-      case Mouse::Left:
-        out += "_left";
-        break;
-      case Mouse::Middle:
-        out += "_middle";
-        break;
-      case Mouse::Right:
-        out += "_right";
-        break;
-      case Mouse::None:
-        out += "_none";
-        break;
-      case Mouse::WheelUp:
-        out += "_wheel_up";
-        break;
-      case Mouse::WheelDown:
-        out += "_wheel_down";
-        break;
-    }
-    switch (event.mouse().motion) {
-      case Mouse::Pressed:
-        out += "_pressed";
-        break;
-      case Mouse::Released:
-        out += "_released";
-        break;
-    }
-    if (event.mouse().control)
-      out += "_control";
-    if (event.mouse().shift)
-      out += "_shift";
-    if (event.mouse().meta)
-      out += "_meta";
-
-    out += "(" +  //
-           std::to_string(event.mouse().x) + "," +
-           std::to_string(event.mouse().y) + ")";
-  } else {
-    out += "(special)";
+std::string Code(Event event) {
+  std::string codes;
+  for (auto& it : event.input()) {
+    codes += " " + std::to_string((unsigned int)it);
   }
-  return out;
+  return codes;
 }
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::TerminalOutput();
 
   std::vector<Event> keys;
 
-  auto component = Renderer([&] {
-    Elements children;
-    for (size_t i = std::max(0, (int)keys.size() - 20); i < keys.size(); ++i)
-      children.push_back(text(Stringify(keys[i])));
-    return window(text("keys"), vbox(std::move(children)));
+  auto left_column = Renderer([&] {
+    Elements children = {
+        text("Codes"),
+        separator(),
+    };
+    for (size_t i = std::max(0, (int)keys.size() - 20); i < keys.size(); ++i) {
+      children.push_back(text(Code(keys[i])));
+    }
+    return vbox(children);
   });
 
-  component = CatchEvent(component, [&](Event event) {
+  auto right_column = Renderer([&] {
+    Elements children = {
+        text("Event"),
+        separator(),
+    };
+    for (size_t i = std::max(0, (int)keys.size() - 20); i < keys.size(); ++i) {
+      children.push_back(text(keys[i].DebugString()));
+    }
+    return vbox(children);
+  });
+
+  int split_size = 40;
+  auto component = ResizableSplitLeft(left_column, right_column, &split_size);
+  component |= border;
+
+  component |= CatchEvent([&](Event event) {
     keys.push_back(event);
-    return true;
+    return false;
   });
 
   screen.Loop(component);

examples/component/radiobox.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <string>  // for string, allocator, basic_string
 #include <vector>  // for vector
 
@@ -7,7 +10,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> radiobox_list = {
       "Use gcc",
       "Use clang",
@@ -20,7 +23,3 @@ int main(int argc, const char* argv[]) {
   screen.Loop(Radiobox(&radiobox_list, &selected));
   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/radiobox_in_frame.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for shared_ptr, __shared_ptr_access
 #include <string>  // for string, basic_string, operator+, to_string
 #include <vector>  // for vector
@@ -10,7 +13,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> entries;
   int selected = 0;
 
@@ -27,7 +30,3 @@ int main(int argc, const char* argv[]) {
 
   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/renderer.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for shared_ptr, allocator, __shared_ptr_access
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
@@ -7,7 +10,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();
 
@@ -43,7 +46,3 @@ int main(int argc, const char* argv[]) {
       renderer_wrap,
   }));
 }
-
-// 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/resizable_split.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for shared_ptr, allocator, __shared_ptr_access
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
@@ -8,7 +11,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   auto screen = ScreenInteractive::Fullscreen();
 
   auto middle = Renderer([] { return text("middle") | center; });
@@ -33,7 +36,3 @@ int main(int argc, const char* argv[]) {
 
   screen.Loop(renderer);
 }
-
-// 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/scrollbar.cpp

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

examples/component/selection.cpp

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

examples/component/slider.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 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <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/direction.hpp>  // for Direction, Direction::Up
+#include <ftxui/dom/elements.hpp>   // for size, GREATER_THAN, 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 (size_t 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 = Direction::Up;
+    layout_horizontal->Add(Slider<int>(option));
+
+    /* In C++20:
+    layout_horizontal->Add(Slider<int>({
+        .value = &values[i],
+        .max = 100,
+        .increment = 5,
+        .direction = Direction::Up,
+    }));
+    */
+  }
+
+  layout_horizontal |= size(HEIGHT, GREATER_THAN, 20);
+
+  screen.Loop(layout_horizontal);
+}

examples/component/slider_rgb.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, shared_ptr, __shared_ptr_access
 #include <string>  // for char_traits, operator+, to_string
 
@@ -23,7 +26,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;
@@ -56,7 +59,3 @@ int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
   screen.Loop(renderer);
 }
-
-// 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/tab_horizontal.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, __shared_ptr_access, shared_ptr
 #include <string>  // for string, basic_string
 #include <vector>  // for vector
@@ -10,7 +13,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> tab_values{
       "tab_1",
       "tab_2",
@@ -65,7 +68,3 @@ int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
   screen.Loop(renderer);
 }
-
-// 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/tab_vertical.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, __shared_ptr_access, shared_ptr
 #include <string>  // for string, basic_string
 #include <vector>  // for vector
@@ -10,7 +13,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> tab_values{
       "tab_1",
       "tab_2",
@@ -65,7 +68,3 @@ int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
   screen.Loop(renderer);
 }
-
-// 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/textarea.cpp

@@ -0,0 +1,34 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <memory>  // for allocator, __shared_ptr_access, shared_ptr
+#include <string>  // for string
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Input, Renderer, ResizableSplitLeft
+#include "ftxui/component/component_base.hpp"  // for ComponentBase, Component
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, separator, text, Element, flex, vbox, border
+
+int main() {
+  using namespace ftxui;
+
+  std::string content_1;
+  std::string content_2;
+  auto textarea_1 = Input(&content_1);
+  auto textarea_2 = Input(&content_2);
+  int size = 50;
+  auto layout = ResizableSplitLeft(textarea_1, textarea_2, &size);
+
+  auto component = Renderer(layout, [&] {
+    return vbox({
+               text("Input:"),
+               separator(),
+               layout->Render() | flex,
+           }) |
+           border;
+  });
+
+  auto screen = ScreenInteractive::Fullscreen();
+  screen.Loop(component);
+}

examples/component/toggle.cpp

@@ -1,3 +1,6 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
 #include <memory>  // for allocator, __shared_ptr_access
 #include <string>  // for string, basic_string
 #include <vector>  // for vector
@@ -10,7 +13,7 @@
 
 using namespace ftxui;
 
-int main(int argc, const char* argv[]) {
+int main() {
   std::vector<std::string> toggle_1_entries = {
       "On",
       "Off",
@@ -59,7 +62,3 @@ int main(int argc, const char* argv[]) {
   auto screen = ScreenInteractive::TerminalOutput();
   screen.Loop(renderer);
 }
-
-// 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/window.cpp

@@ -0,0 +1,88 @@
+// Copyright 2023 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <ftxui/component/component.hpp>
+#include <ftxui/component/screen_interactive.hpp>
+
+using namespace ftxui;
+
+Component DummyWindowContent() {
+  class Impl : public ComponentBase {
+   private:
+    bool checked[3] = {false, false, false};
+    float slider = 50;
+
+   public:
+    Impl() {
+      Add(Container::Vertical({
+          Checkbox("Check me", &checked[0]),
+          Checkbox("Check me", &checked[1]),
+          Checkbox("Check me", &checked[2]),
+          Slider("Slider", &slider, 0.f, 100.f),
+      }));
+    }
+  };
+  return Make<Impl>();
+}
+
+int main() {
+  int window_1_left = 20;
+  int window_1_top = 10;
+  int window_1_width = 40;
+  int window_1_height = 20;
+
+  auto window_1 = Window({
+      .inner = DummyWindowContent(),
+      .title = "First window",
+      .left = &window_1_left,
+      .top = &window_1_top,
+      .width = &window_1_width,
+      .height = &window_1_height,
+  });
+
+  auto window_2 = Window({
+      .inner = DummyWindowContent(),
+      .title = "My window",
+      .left = 40,
+      .top = 20,
+  });
+
+  auto window_3 = Window({
+      .inner = DummyWindowContent(),
+      .title = "My window",
+      .left = 60,
+      .top = 30,
+  });
+
+  auto window_4 = Window({
+      .inner = DummyWindowContent(),
+  });
+
+  auto window_5 = Window({});
+
+  auto window_container = Container::Stacked({
+      window_1,
+      window_2,
+      window_3,
+      window_4,
+      window_5,
+  });
+
+  auto display_win_1 = Renderer([&] {
+    return text("window_1: " +  //
+                std::to_string(window_1_width) + "x" +
+                std::to_string(window_1_height) + " + " +
+                std::to_string(window_1_left) + "," +
+                std::to_string(window_1_top));
+  });
+
+  auto layout = Container::Vertical({
+      display_win_1,
+      window_container,
+  });
+
+  auto screen = ScreenInteractive::Fullscreen();
+  screen.Loop(layout);
+
+  return EXIT_SUCCESS;
+}

examples/component/with_restored_io.cpp

@@ -0,0 +1,60 @@
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <cstdlib>   // for system, EXIT_SUCCESS
+#include <iostream>  // for operator<<, basic_ostream, basic_ostream::operator<<, cout, endl, flush, ostream, basic_ostream<>::__ostream_type, cin
+#include <memory>    // for shared_ptr, __shared_ptr_access, allocator
+#include <string>    // for getline, string
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Horizontal, Renderer
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, filler, Element, borderEmpty, hbox, size, paragraph, vbox, LESS_THAN, border, center, HEIGHT, WIDTH
+
+int main() {
+  using namespace ftxui;
+
+  auto screen = ScreenInteractive::Fullscreen();
+
+  // When pressing this button, "screen.WithRestoredIO" will execute the
+  // temporarily uninstall the terminal hook and execute the provided callback
+  // function. This allow running the application in a non-interactive mode.
+  auto btn_run = Button("Execute with restored IO", screen.WithRestoredIO([] {
+    std::cout << "This is a child program using stdin/stdout." << std::endl;
+    for (int i = 0; i < 10; ++i) {
+      std::cout << "Please enter 10 strings (" << i << "/10)" << std::flush;
+      std::string input;
+      std::getline(std::cin, input);
+    }
+  }));
+
+  auto btn_quit = Button("Quit", screen.ExitLoopClosure());
+
+  auto layout = Container::Horizontal({
+      btn_run,
+      btn_quit,
+  });
+
+  auto renderer = Renderer(layout, [&] {
+    auto explanation = paragraph(
+        "After clicking this button, the ScreenInteractive will be "
+        "suspended and access to stdin/stdout will temporarilly be "
+        "restore for running a function.");
+    auto element = vbox({
+        explanation | borderEmpty,
+        hbox({
+            btn_run->Render(),
+            filler(),
+            btn_quit->Render(),
+        }),
+    });
+
+    element = element | borderEmpty | border | size(WIDTH, LESS_THAN, 80) |
+              size(HEIGHT, LESS_THAN, 20) | center;
+    return element;
+  });
+
+  screen.Loop(renderer);
+  return EXIT_SUCCESS;
+}

examples/dom/CMakeLists.txt

@@ -1,13 +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(gauge)
+example(gauge_direction)
 example(graph)
+example(gridbox)
 example(hflow)
 example(html_like)
+example(linear_gradient)
 example(package_manager)
 example(paragraph)
 example(separator)
@@ -17,13 +25,14 @@ example(spinner)
 example(style_blink)
 example(style_bold)
 example(style_color)
-example(color_truecolor_RGB)
-example(color_truecolor_HSV)
-example(color_info_palette256)
 example(style_dim)
-example(gridbox)
 example(style_gallery)
+example(style_hyperlink)
 example(style_inverted)
+example(style_italic)
+example(style_strikethrough)
 example(style_underlined)
+example(style_underlined_double)
+example(table)
 example(vbox_hbox)
-example(window)
+example(vflow)

examples/dom/border.cpp

@@ -1,11 +1,15 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <stdlib.h>                // for EXIT_SUCCESS
 #include <ftxui/dom/elements.hpp>  // for text, operator|, vbox, border, Element, Fit, hbox
 #include <ftxui/screen/screen.hpp>  // for Full, Screen
 #include <memory>                   // for allocator
 
-#include "ftxui/dom/node.hpp"    // for Render
-#include "ftxui/screen/box.hpp"  // for ftxui
+#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({
@@ -30,8 +34,5 @@ int main(int argc, const char* argv[]) {
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document);
   screen.Print();
+  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/dom/border_colored.cpp

@@ -0,0 +1,39 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <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;
+}

examples/dom/border_style.cpp

@@ -1,16 +1,20 @@
-#include <ftxui/dom/elements.hpp>  // for text, operator|, vbox, border, Element, Fit, hbox
-#include <ftxui/screen/screen.hpp>  // for Full, Screen
-#include <iostream>
-#include <memory>  // for allocator
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <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/box.hpp"  // for ftxui
+#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,
@@ -22,7 +26,3 @@ int main(int argc, const char* argv[]) {
   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/canvas.cpp

@@ -0,0 +1,48 @@
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.
+#include <stdio.h>                 // for getchar
+#include <cmath>                   // for cos
+#include <ftxui/dom/elements.hpp>  // for Fit, canvas, operator|, border, Element
+#include <ftxui/screen/screen.hpp>  // for Pixel, Screen
+#include <vector>                   // for vector, allocator
+
+#include "ftxui/dom/canvas.hpp"  // for Canvas
+#include "ftxui/dom/node.hpp"    // for Render
+#include "ftxui/screen/color.hpp"  // for Color, Color::Red, Color::Blue, Color::Green, ftxui
+
+int main() {
+  using namespace ftxui;
+
+  auto c = Canvas(100, 100);
+
+  c.DrawText(0, 0, "This is a canvas", [](Pixel& p) {
+    p.foreground_color = Color::Red;
+    p.underlined = true;
+  });
+
+  // Triangle:
+  c.DrawPointLine(10, 10, 80, 10, Color::Red);
+  c.DrawPointLine(80, 10, 80, 40, Color::Blue);
+  c.DrawPointLine(80, 40, 10, 10, Color::Green);
+
+  // Circle, not filled and filled:
+  c.DrawPointCircle(30, 50, 20);
+  c.DrawPointCircleFilled(40, 40, 10);
+
+  // Plot a function:
+  std::vector<int> ys(100);
+  for (int x = 0; x < 100; x++)
+    ys[x] = int(80 + 20 * cos(x * 0.2));
+  for (int x = 0; x < 99; x++)
+    c.DrawPointLine(x, ys[x], x + 1, ys[x + 1], Color::Red);
+
+  auto document = canvas(&c) | border;
+
+  auto screen = Screen::Create(Dimension::Fit(document));
+  Render(screen, document);
+  screen.Print();
+  getchar();
+
+  return 0;
+}