Avoid breaking changes.

Fixed minor issue in function name

.github/workflows/build.yaml

@@ -220,8 +220,6 @@ jobs:
           rsync -amv
           --include='*/'
           --include='*.html'
-          --include='*.css'
-          --include='*.mjs'
           --include='*.js'
           --include='*.wasm'
           --exclude='*'

.gitignore

@@ -38,16 +38,14 @@ out/
 !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
+!examples/**/*.cpp
+!examples/**/*.hpp
+!examples/**/*.ipp
+!examples/**/*.html
+!examples/**/*.py
+!examples/**/*.js
+!examples/**/*.html.disabled
 
 # include directory:
 !include/ftxui/**/*.hpp

CHANGELOG.md

@@ -35,10 +35,6 @@ current (development)
 - 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.
 

README.md

@@ -43,7 +43,7 @@ A simple cross-platform C++ library for terminal based user interfaces!
  * **Cross platform**: Linux/MacOS (main target), WebAssembly, Windows (Thanks to contributors!).
  * Learn by [examples](#documentation), and [tutorials](#documentation)
  * Multiple packages: CMake [FetchContent]([https://bewagner.net/programming/2020/05/02/cmake-fetchcontent/](https://cmake.org/cmake/help/latest/module/FetchContent.html)) (preferred), vcpkg, pkgbuild, conan.
- * Good practices: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
+ * Good practises: documentation, tests, fuzzers, performance tests, automated CI, automated packaging, etc...
 
 ## Documentation
 
@@ -73,7 +73,7 @@ A simple cross-platform C++ library for terminal based user interfaces!
 
 #### DOM
 
-This module defines a hierarchical set of Element. An Element manages layout and can be responsive to the terminal dimensions.
+This module defines a hierarchical set of Element. An element manages layout and can be responsive to the terminal dimensions.
 
 They are declared in [<ftxui/dom/elements.hpp>](https://arthursonzogni.github.io/FTXUI/elements_8hpp_source.html
 )
@@ -199,7 +199,7 @@ Complex [examples](https://github.com/ArthurSonzogni/FTXUI/blob/master/examples/
 
 #### 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).
+The ftxui/component is needed when you want to produce dynamic UI, reactive to the user's input. It defines a set of ftxui::Component. A component reacts to Events (keyboard, mouse, resize, ...) and Render Element (see previous section).
 
 Prebuilt components are declared in [<ftxui/component/component.hpp>](https://arthursonzogni.github.io/FTXUI/component_8hpp_source.html)
 
@@ -293,10 +293,7 @@ Prebuilt components are declared in [<ftxui/component/component.hpp>](https://ar
 </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.
+- *Want to share a useful component using FTXUI? Feel free adding yours here*
 
 
 ## Project using FTXUI
@@ -304,12 +301,12 @@ Prebuilt components are declared in [<ftxui/component/component.hpp>](https://ar
 Feel free to add your projects here:
 - [json-tui](https://github.com/ArthurSonzogni/json-tui)
 - [git-tui](https://github.com/ArthurSonzogni/git-tui)
-- [ostree-tui](https://github.com/AP-Sensing/ostree-tui)
 - [rgb-tui](https://github.com/ArthurSonzogni/rgb-tui)
 - [chrome-log-beautifier](https://github.com/ArthurSonzogni/chrome-log-beautifier)
 - [x86-64 CPU Architecture Simulation](https://github.com/AnisBdz/CPU)
 - [ltuiny](https://github.com/adrianoviana87/ltuiny)
 - [i3-termdialogs](https://github.com/mibli/i3-termdialogs)
+- [Just-Fast](https://github.com/GiuseppeCesarano/just-fast)
 - [simpPRU](https://github.com/VedantParanjape/simpPRU)
 - [Pigeon ROS TUI](https://github.com/PigeonSensei/Pigeon_ros_tui)
 - [hastur](https://github.com/robinlinden/hastur)
@@ -326,22 +323,6 @@ Feel free to add your projects here:
 - [eCAL monitor](https://github.com/eclipse-ecal/ecal)
 - [Path Finder](https://github.com/Ruebled/Path_Finder)
 - [rw-tui](https://github.com/LeeKyuHyuk/rw-tui)
-- [resource-monitor](https://github.com/catalincd/resource-monitor)
-- [ftxuiFileReader](https://github.com/J0sephDavis/ftxuiFileReader)
-- [ftxui_CPUMeter](https://github.com/tzzzzzzzx/ftxui_CPUMeter)
-- [Captain's log](https://github.com/nikoladucak/caps-log)
-- [FTowerX](https://github.com/MhmRhm/FTowerX)
-- [Caravan](https://github.com/r3w0p/caravan)
-- [Step-Writer](https://github.com/BrianAnakPintar/step-writer)
-- [XJ music](https://github.com/xjmusic/xjmusic)
-- [UDP chat](https://github.com/Sergeydigl3/udp-chat-tui)
-- [2048-cpp](https://github.com/Chessom/2048-cpp)
-- [Memory game](https://github.com/mikolajlubiak/memory)
-- [Terminal Animation](https://github.com/mikolajlubiak/terminal_animation)
-- [pciex](https://github.com/s0nx/pciex)
-- [Fallout terminal hacking](https://github.com/gshigin/yet-another-fallout-terminal-hacking-game)
-- [Lazylist](https://github.com/zhuyongqi9/lazylist)
-- [TUISIC](https://github.com/Dark-Kernel/tuisic)
 
 ### [cpp-best-practices/game_jam](https://github.com/cpp-best-practices/game_jam)
 
@@ -358,15 +339,16 @@ Several games using the FTXUI have been made during the Game Jam:
 - [smoothlife](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/smoothlife.md)
 - [Consu](https://github.com/cpp-best-practices/game_jam/blob/main/Jam1_April_2022/consu.md)
 
-## Utilization
+## External package
 
-It is **highly** recommended to use CMake FetchContent to depend on FTXUI so you may specify which commit you would like to depend on.
+It is **highly** recommended to use CMake FetchContent to depend on FTXUI. This
+way you can specify which commit you would like to depend on.
 ```cmake
 include(FetchContent)
 
 FetchContent_Declare(ftxui
   GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
-  GIT_TAG v5.0.0
+  GIT_TAG v3.0.0
 )
 
 FetchContent_GetProperties(ftxui)
@@ -376,21 +358,14 @@ if(NOT ftxui_POPULATED)
 endif()
 ```
 
-If you don't, FTXUI may be used from the following packages:
+If you don't, the following packages have been created:
 - [vcpkg](https://vcpkgx.com/details.html?package=ftxui)
 - [Arch Linux PKGBUILD](https://aur.archlinux.org/packages/ftxui-git/).
 - [conan.io](https://conan.io/center/ftxui)
 - [openSUSE](https://build.opensuse.org/package/show/devel:libraries:c_c++/ftxui)
-- 
+
 [![Packaging status](https://repology.org/badge/vertical-allrepos/ftxui.svg)](https://repology.org/project/ftxui/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">

doc/mainpage.md

@@ -50,52 +50,51 @@ int main(void) {
 └────┘└────────────────────────────────────┘└─────┘
 ```
 
-## Configure {#configure}
-### Using CMake and find_package {#build-cmake-find-package}
+# Build {#build}
 
-Assuming FTXUI is available or installed on the system.
+## Using CMake {#build-cmake}
 
-**CMakeLists.txt**
-```cmake
-cmake_minimum_required (VERSION 3.11)
-find_package(ftxui 5 REQUIRED)
-project(ftxui-starter LANGUAGES CXX VERSION 1.0.0)
-add_executable(ftxui-starter src/main.cpp)
-target_link_libraries(ftxui-starter
-  PRIVATE ftxui::screen
-  PRIVATE ftxui::dom
-  PRIVATE ftxui::component # Not needed for this example.
-)
+This is an example configuration for your **CMakeLists.txt**
 
-```
-
-### Using CMake and FetchContent {#build-cmake}
-
-If you want to fetch FTXUI using cmake:
-
-**CMakeLists.txt**
+CMakeLists.txt
 ```cmake
 cmake_minimum_required (VERSION 3.11)
 
+# --- Fetch FTXUI --------------------------------------------------------------
 include(FetchContent)
+
 set(FETCHCONTENT_UPDATES_DISCONNECTED TRUE)
 FetchContent_Declare(ftxui
   GIT_REPOSITORY https://github.com/ArthurSonzogni/ftxui
-  GIT_TAG main # Important: Specify a version or a commit hash here.
+  # Important: Specify a GIT_TAG XXXXX here.
+  GIT_TAG main
+)
+
+FetchContent_GetProperties(ftxui)
+if(NOT ftxui_POPULATED)
+  FetchContent_Populate(ftxui)
+  add_subdirectory(${ftxui_SOURCE_DIR} ${ftxui_BINARY_DIR} EXCLUDE_FROM_ALL)
+endif()
+
+# ------------------------------------------------------------------------------
+
+project(ftxui-starter
+  LANGUAGES CXX
+  VERSION 1.0.0
 )
-FetchContent_MakeAvailable(ftxui)
 
-project(ftxui-starter LANGUAGES CXX VERSION 1.0.0)
 add_executable(ftxui-starter src/main.cpp)
+target_include_directories(ftxui-starter PRIVATE src)
+
 target_link_libraries(ftxui-starter
   PRIVATE ftxui::screen
   PRIVATE ftxui::dom
   PRIVATE ftxui::component # Not needed for this example.
 )
+
 ```
 
-## Build
-
+Subsequently, you build the project in the standard fashion as follows:
 ```bash
 mkdir build && cd build
 cmake ..
@@ -635,26 +634,6 @@ Produced by: `ftxui::Input()` from "ftxui/component/component.hpp"
 <script id="asciicast-223719" src="https://asciinema.org/a/223719.js" async></script>
 @endhtmlonly
 
-### Filtered input
-
-On can filter out the characters received by the input component, using
-`ftxui::CatchEvent`.
-
-```cpp
-std::string phone_number;
-Component input = Input(&phone_number, "phone number");
-
-// Filter out non-digit characters.
-input |= CatchEvent([&](Event event) {
-  return event.is_character() && !std::isdigit(event.character()[0]);
-});
-
-// Filter out characters past the 10th one.
-input |= CatchEvent([&](Event event) {
-  return event.is_character() && phone_number.size() >= 10;
-});
-```
-
 ## Menu {#component-menu}
 
 Defines a menu object. It contains a list of entries, one of them is selected.

examples/CMakeLists.txt

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

examples/component/CMakeLists.txt

@@ -38,7 +38,6 @@ example(radiobox)
 example(radiobox_in_frame)
 example(renderer)
 example(resizable_split)
-example(scrollbar)
 example(slider)
 example(slider_direction)
 example(slider_rgb)

examples/component/button.cpp

@@ -34,8 +34,8 @@ int main() {
   int value = 50;
 
   // clang-format off
-  auto btn_dec_01 = Button("-1", [&] { value -= 1; }, Style());
-  auto btn_inc_01 = Button("+1", [&] { value += 1; }, Style());
+  auto btn_dec_01 = Button("-1", [&] { value += 1; }, Style());
+  auto btn_inc_01 = Button("+1", [&] { value -= 1; }, Style());
   auto btn_dec_10 = Button("-10", [&] { value -= 10; }, Style());
   auto btn_inc_10 = Button("+10", [&] { value += 10; }, Style());
   // clang-format on
@@ -53,9 +53,11 @@ int main() {
     return vbox({
                text("value = " + std::to_string(value)),
                separator(),
-               buttons->Render() | flex,
+               gauge(value * 0.01f),
+               separator(),
+               buttons->Render(),
            }) |
-           flex | border;
+           border;
   });
 
   auto screen = ScreenInteractive::FitComponent();

examples/component/homescreen.cpp

@@ -504,10 +504,7 @@ int main() {
   auto main_renderer = Renderer(main_container, [&] {
     return vbox({
         text("FTXUI Demo") | bold | hcenter,
-        hbox({
-            tab_selection->Render() | flex,
-            exit_button->Render(),
-        }),
+        tab_selection->Render(),
         tab_content->Render() | flex,
     });
   });

examples/component/input.cpp

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

examples/component/scrollbar.cpp

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

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

examples/index.html

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

examples/index.mjs

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

flake.lock

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

flake.nix

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

include/ftxui/component/component_base.hpp

@@ -44,7 +44,6 @@ class ComponentBase {
   ComponentBase* Parent() const;
   Component& ChildAt(size_t i);
   size_t ChildCount() const;
-  int Index() const;
   void Add(Component children);
   void Detach();
   void DetachAllChildren();

include/ftxui/component/component_options.hpp

@@ -25,7 +25,6 @@ struct EntryState {
   bool state;         ///< The state of the button/checkbox/radiobox
   bool active;        ///< Whether the entry is the active one.
   bool focused;       ///< Whether the entry is one focused by the user.
-  int index;          ///< Index of the entry when applicable or -1.
 };
 
 struct UnderlineOption {

include/ftxui/dom/node.hpp

@@ -22,7 +22,7 @@ using Elements = std::vector<Element>;
 class Node {
  public:
   Node();
-  explicit Node(Elements children);
+  Node(Elements children);
   Node(const Node&) = delete;
   Node(const Node&&) = delete;
   Node& operator=(const Node&) = delete;

include/ftxui/dom/table.hpp

@@ -36,8 +36,8 @@ class TableSelection;
 class Table {
  public:
   Table();
-  explicit Table(std::vector<std::vector<std::string>>);
-  explicit Table(std::vector<std::vector<Element>>);
+  Table(std::vector<std::vector<std::string>>);
+  Table(std::vector<std::vector<Element>>);
   Table(std::initializer_list<std::vector<std::string>> init);
   TableSelection SelectAll();
   TableSelection SelectCell(int column, int row);

src/ftxui/component/button.cpp

@@ -48,8 +48,11 @@ class ButtonBase : public ComponentBase, public ButtonOption {
     }
 
     auto focus_management = focused ? focus : active ? select : nothing;
-    const EntryState state{
-        *label, false, active, focused_or_hover, Index(),
+    const EntryState state = {
+        *label,
+        false,
+        active,
+        focused_or_hover,
     };
 
     auto element = (transform ? transform : DefaultTransform)  //

src/ftxui/component/checkbox.cpp

@@ -28,7 +28,10 @@ class CheckboxBase : public ComponentBase, public CheckboxOption {
     const bool is_active = Active();
     auto focus_management = is_focused ? focus : is_active ? select : nothing;
     auto entry_state = EntryState{
-        *label, *checked, is_active, is_focused || hovered_, -1,
+        *label,
+        *checked,
+        is_active,
+        is_focused || hovered_,
     };
     auto element = (transform ? transform : CheckboxOption::Simple().transform)(
         entry_state);

src/ftxui/component/component.cpp

@@ -51,22 +51,6 @@ size_t ComponentBase::ChildCount() const {
   return children_.size();
 }
 
-/// @brief Return index of the component in its parent. -1 if no parent.
-/// @ingroup component
-int ComponentBase::Index() const {
-  if (parent_ == nullptr) {
-    return -1;
-  }
-  int index = 0;
-  for (const Component& child : parent_->children_) {
-    if (child.get() == this) {
-      return index;
-    }
-    index++;
-  }
-  return -1;  // Not reached.
-}
-
 /// @brief Add a child.
 /// @@param child The child to be attached.
 /// @ingroup component

src/ftxui/component/menu.cpp

@@ -123,7 +123,10 @@ class MenuBase : public ComponentBase, public MenuOption {
       const bool is_selected = (selected() == i);
 
       const EntryState state = {
-          entries[i], false, is_selected, is_focused, i,
+          entries[i],
+          false,
+          is_selected,
+          is_focused,
       };
 
       auto focus_management = (selected_focus_ != i) ? nothing
@@ -622,8 +625,11 @@ Component MenuEntry(MenuEntryOption option) {
       const bool focused = Focused();
       UpdateAnimationTarget();
 
-      const EntryState state{
-          label(), false, hovered_, focused, Index(),
+      const EntryState state = {
+          label(),
+          false,
+          hovered_,
+          focused,
       };
 
       const Element element =

src/ftxui/component/menu_test.cpp

@@ -226,50 +226,5 @@ TEST(MenuTest, AnimationsVertical) {
   }
 }
 
-TEST(MenuTest, EntryIndex) {
-  int selected = 0;
-  std::vector<std::string> entries = {"0", "1", "2"};
-
-  auto option = MenuOption::Vertical();
-  option.entries = &entries;
-  option.selected = &selected;
-  option.entries_option.transform = [&](const EntryState& state) {
-    int curidx = std::stoi(state.label);
-    EXPECT_EQ(state.index, curidx);
-    return text(state.label);
-  };
-  auto menu = Menu(option);
-  menu->OnEvent(Event::ArrowDown);
-  menu->OnEvent(Event::ArrowDown);
-  menu->OnEvent(Event::Return);
-  entries.resize(2);
-  (void)menu->Render();
-}
-
-TEST(MenuTest, MenuEntryIndex) {
-  int selected = 0;
-
-  MenuEntryOption option;
-  option.transform = [&](const EntryState& state) {
-    int curidx = std::stoi(state.label);
-    EXPECT_EQ(state.index, curidx);
-    return text(state.label);
-  };
-  auto menu = Container::Vertical(
-      {
-          MenuEntry("0", option),
-          MenuEntry("1", option),
-          MenuEntry("2", option),
-      },
-      &selected);
-
-  menu->OnEvent(Event::ArrowDown);
-  menu->OnEvent(Event::ArrowDown);
-  menu->OnEvent(Event::Return);
-  for (int index = 0; index < menu->ChildCount(); index++) {
-    EXPECT_EQ(menu->ChildAt(index)->Index(), index);
-  }
-}
-
 }  // namespace ftxui
 // NOLINTEND

src/ftxui/component/radiobox.cpp

@@ -40,7 +40,10 @@ class RadioboxBase : public ComponentBase, public RadioboxOption {
                               : is_menu_focused ? focus
                                                 : select;
       auto state = EntryState{
-          entries[i], selected() == i, is_selected, is_focused, i,
+          entries[i],
+          selected() == i,
+          is_selected,
+          is_focused,
       };
       auto element =
           (transform ? transform : RadioboxOption::Simple().transform)(state);

src/ftxui/component/window.cpp

@@ -93,7 +93,7 @@ class ResizeDecorator : public NodeDecorator {
 
 Element DefaultRenderState(const WindowRenderState& state) {
   Element element = state.inner;
-  if (!state.active) {
+  if (state.active) {
     element |= dim;
   }