Tweak implementation and documentation.

Enables applications to read piped data while maintaining interactive
keyboard input by redirecting stdin to /dev/tty when explicitly enabled.

BUILD.bazel

@@ -169,15 +169,13 @@ ftxui_cc_library(
         "src/ftxui/component/util.cpp",
         "src/ftxui/component/window.cpp",
 
+
         # Private header from ftxui:dom.
         "src/ftxui/dom/node_decorator.hpp",
 
         # Private header from ftxui:screen.
         "src/ftxui/screen/string_internal.hpp",
         "src/ftxui/screen/util.hpp",
-
-        # Private header.
-        "include/ftxui/util/warn_windows_macro.hpp",
     ],
     hdrs = [
         "include/ftxui/component/animation.hpp",

CHANGELOG.md

@@ -27,16 +27,8 @@ Next
 - Remove dependency on 'pthread'.
 
 ### Component
-- Feature: POSIX Piped Input Handling.
-  - Allows FTXUI applications to read data from stdin (when piped) while still receiving keyboard input from the terminal.
-  - Enabled by default.
-  - Can be disabled using `ScreenInteractive::HandlePipedInput(false)`.
-  - Only available on Linux and macOS.
-  Thanks @HarryPehkonen for PR #1094.
 - Fix ScreenInteractive::FixedSize screen stomps on the preceding terminal
   output. Thanks @zozowell in #1064.
-- Fix vertical `ftxui::Slider`. The "up" key was previously decreasing the
-  value. Thanks @its-pablo in #1093 for reporting the issue.
 
 
 6.1.9 (2025-05-07)

CMakeLists.txt

@@ -178,8 +178,8 @@ include(cmake/ftxui_install.cmake)
 include(cmake/ftxui_package.cmake)
 include(cmake/ftxui_modules.cmake)
 
-add_subdirectory(examples)
 add_subdirectory(doc)
+add_subdirectory(examples)
 
 # You can generate ./examples_modules/ by running
 # ./tools/generate_examples_modules.sh

examples/CMakeLists.txt

@@ -17,12 +17,10 @@ add_subdirectory(dom)
 if (EMSCRIPTEN)
   get_property(EXAMPLES GLOBAL PROPERTY FTXUI::EXAMPLES)
   foreach(file
-      "index.css"
       "index.html"
       "index.mjs"
-      "run_webassembly.py"
-      "sw.js"
-  )
+      "index.css"
+      "run_webassembly.py")
     configure_file(${file} ${file})
   endforeach(file)
 endif()

examples/index.css

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

examples/index.html

@@ -9,18 +9,13 @@
     <script type="module" src="index.mjs"></script>
   </head>
   <body>
-    <div class="toc-container">
-      <div class="toc-list"></div>
-    </div>
     <script id="example_script"></script>
 
     <div class="page">
       <p>
         <a href="https://github.com/ArthurSonzogni/FTXUI">FTXUI</a> is a simple
         functional C++ library for terminal user interface. <br/>
-        This showcases the: <a
-          href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a>
-        folder. See <a id="source">source</a>.
+        This showcases the: <a href="https://github.com/ArthurSonzogni/FTXUI/tree/master/examples">./example/</a> folder. <br/>
       </p>
 
       <div id="terminalContainer">

examples/index.mjs

@@ -92,69 +92,6 @@ window.Module = {
   },
 };
 
-const source = document.querySelector("#source");
-source.href = "https://github.com/ArthurSonzogni/FTXUI/blob/main/examples/" + example + ".cpp";
-
 const words = example.split('/')
 words[1] = "ftxui_example_" + words[1] + ".js"
 document.querySelector("#example_script").src = words.join('/');
-
-
-// Table of Contents (TOC) for quick navigation.
-
-// Get select element
-const selectEl = document.querySelector('select#selectExample');
-if (!selectEl) {
-  console.error('select#selectExample not found');
-} else {
-  // Get TOC container
-  const tocContainer = document.querySelector('.toc-container');
-  const tocList = tocContainer.querySelector('.toc-list');
-
-  // Group options by directory
-  const groupedOptions = Array.from(selectEl.options).reduce((acc, option) => {
-    const [dir, file] = option.text.split('/');
-    if (!acc[dir]) {
-      acc[dir] = [];
-    }
-    acc[dir].push({ option, file });
-    return acc;
-  }, {});
-
-  // Generate TOC items
-  for (const dir in groupedOptions) {
-    const dirContainer = document.createElement('div');
-
-    const dirHeader = document.createElement('div');
-    dirHeader.textContent = dir;
-    dirHeader.className = 'toc-title';
-    dirContainer.appendChild(dirHeader);
-
-    groupedOptions[dir].forEach(({ option, file }) => {
-      const tocItem = document.createElement('div');
-      tocItem.textContent = file;
-      tocItem.className = 'toc-item';
-
-      if (selectEl.options[selectEl.selectedIndex].value === option.value) {
-        tocItem.classList.add('selected');
-      }
-
-      // Click handler
-      tocItem.addEventListener('click', () => {
-        for(let i=0; i<selectEl.options.length; ++i) {
-          if (selectEl.options[i].value == option.value) {
-            selectEl.selectedIndex = i;
-            break;
-          }
-        }
-
-        history.pushState({}, "", "?file=" + option.value);
-        location.reload();
-      });
-
-      dirContainer.appendChild(tocItem);
-    });
-
-    tocList.appendChild(dirContainer);
-  }
-}''

include/ftxui/component/receiver.hpp

@@ -4,7 +4,7 @@
 #ifndef FTXUI_COMPONENT_RECEIVER_HPP_
 #define FTXUI_COMPONENT_RECEIVER_HPP_
 
-#include <ftxui/util/warn_windows_macro.hpp>
+#include <ftxui/util/warn_windows_macro.h>
 #include <algorithm>           // for copy, max
 #include <atomic>              // for atomic, __atomic_base
 #include <condition_variable>  // for condition_variable

include/ftxui/component/screen_interactive.hpp

@@ -147,8 +147,6 @@ class ScreenInteractive : public Screen {
 
   // Piped input handling state (POSIX only)
   bool handle_piped_input_ = true;
-  // File descriptor for /dev/tty, used for piped input handling.
-  int tty_fd_ = -1;
 
   // The style of the cursor to restore on exit.
   int cursor_reset_shape_ = 1;

src/ftxui/component/screen_interactive.cpp

@@ -112,13 +112,13 @@ void ftxui_on_resize(int columns, int rows) {
 
 #else  // POSIX (Linux & Mac)
 
-int CheckStdinReady(int fd) {
+int CheckStdinReady() {
   timeval tv = {0, 0};  // NOLINT
   fd_set fds;
   FD_ZERO(&fds);                                          // NOLINT
-  FD_SET(fd, &fds);                             // NOLINT
-  select(fd + 1, &fds, nullptr, nullptr, &tv);  // NOLINT
-  return FD_ISSET(fd, &fds);                    // NOLINT
+  FD_SET(STDIN_FILENO, &fds);                             // NOLINT
+  select(STDIN_FILENO + 1, &fds, nullptr, nullptr, &tv);  // NOLINT
+  return FD_ISSET(STDIN_FILENO, &fds);                    // NOLINT
 }
 
 #endif
@@ -539,8 +539,6 @@ void ScreenInteractive::Install() {
   // https://github.com/ArthurSonzogni/FTXUI/issues/846
   Flush();
 
-  InstallPipedInputHandling();
-
   // After uninstalling the new configuration, flush it to the terminal to
   // ensure it is fully applied:
   on_exit_functions.emplace([] { Flush(); });
@@ -606,10 +604,9 @@ void ScreenInteractive::Install() {
   }
 
   struct termios terminal;  // NOLINT
-  tcgetattr(tty_fd_, &terminal);
-  on_exit_functions.emplace([terminal = terminal, tty_fd_ = tty_fd_] {
-    tcsetattr(tty_fd_, TCSANOW, &terminal);
-  });
+  tcgetattr(STDIN_FILENO, &terminal);
+  on_exit_functions.emplace(
+      [=] { tcsetattr(STDIN_FILENO, TCSANOW, &terminal); });
 
   // Enabling raw terminal input mode
   terminal.c_iflag &= ~IGNBRK;  // Disable ignoring break condition
@@ -637,7 +634,7 @@ void ScreenInteractive::Install() {
                              // read.
   terminal.c_cc[VTIME] = 0;  // Timeout in deciseconds for non-canonical read.
 
-  tcsetattr(tty_fd_, TCSANOW, &terminal);
+  tcsetattr(STDIN_FILENO, TCSANOW, &terminal);
 
 #endif
 
@@ -673,13 +670,20 @@ void ScreenInteractive::Install() {
   // ensure it is fully applied:
   Flush();
 
+  // Redirect the true terminal to stdin, so that we can read keyboard input
+  // directly from stdin, even if the input is piped from a file or another
+  // process.
+  //
+  // TODO: Instead of redirecting stdin, we could define the file descriptor to
+  // read from, and use it in the TerminalInputParser.
+  InstallPipedInputHandling();
+
   quit_ = false;
 
   PostAnimationTask();
 }
 
 void ScreenInteractive::InstallPipedInputHandling() {
-  tty_fd_ = fileno(stdin);  // NOLINT
 #if !defined(_WIN32) && !defined(__EMSCRIPTEN__)
   // Handle piped input redirection if explicitly enabled by the application.
   // This allows applications to read data from stdin while still receiving
@@ -688,23 +692,29 @@ void ScreenInteractive::InstallPipedInputHandling() {
     return;
   }
 
-  // If stdin is a terminal, we don't need to open /dev/tty.
-  if (isatty(fileno(stdin))) {
+  // If stdin is a terminal, we don't need to redirect it.
+  if (isatty(STDIN_FILENO)) {
     return;
   }
 
-  // Open /dev/tty for keyboard input.
-  tty_fd_ = open("/dev/tty", O_RDONLY);
-  if (tty_fd_ < 0) {
+  // Save the current stdin so we can restore it later.
+  int original_fd = dup(STDIN_FILENO);
+  if (original_fd < 0) {
+    return;
+  }
+
+  // Redirect stdin to the controlling terminal for keyboard input.
+  if (std::freopen("/dev/tty", "r", stdin) == nullptr) {
     // Failed to open /dev/tty (containers, headless systems, etc.)
-    tty_fd_ = fileno(stdin);  // Fallback to stdin.
+    // Clean up and continue without redirection
+    close(original_fd);
     return;
   }
 
-  // Close the /dev/tty file descriptor on exit.
-  on_exit_functions.emplace([this] {
-    close(tty_fd_);
-    tty_fd_ = -1;
+  // Restore the original stdin file descriptor on exit.
+  on_exit_functions.emplace([=] {
+    dup2(original_fd, STDIN_FILENO);
+    close(original_fd);
   });
 #endif
 }
@@ -1142,7 +1152,7 @@ void ScreenInteractive::FetchTerminalEvents() {
     internal_->terminal_input_parser.Add(out[i]);
   }
 #else  // POSIX (Linux & Mac)
-  if (!CheckStdinReady(tty_fd_)) {
+  if (!CheckStdinReady()) {
     const auto timeout =
         std::chrono::steady_clock::now() - internal_->last_char_time;
     const size_t timeout_ms =
@@ -1154,7 +1164,7 @@ void ScreenInteractive::FetchTerminalEvents() {
 
   // Read chars from the terminal.
   std::array<char, 128> out{};
-  size_t l = read(tty_fd_, out.data(), out.size());
+  size_t l = read(fileno(stdin), out.data(), out.size());
 
   // Convert the chars to events.
   for (size_t i = 0; i < l; ++i) {

src/ftxui/component/slider.cpp

@@ -33,20 +33,6 @@ Decorator flexDirection(Direction direction) {
   return xflex;  // NOT_REACHED()
 }
 
-Direction Opposite(Direction d) {
-  switch (d) {
-    case Direction::Up:
-      return Direction::Down;
-    case Direction::Down:
-      return Direction::Up;
-    case Direction::Left:
-      return Direction::Right;
-    case Direction::Right:
-      return Direction::Left;
-  }
-  return d;  // NOT_REACHED()
-}
-
 template <class T>
 class SliderBase : public SliderOption<T>, public ComponentBase {
  public:
@@ -61,15 +47,59 @@ class SliderBase : public SliderOption<T>, public ComponentBase {
            flexDirection(this->direction) | reflect(gauge_box_) | gauge_color;
   }
 
-  void OnDirection(Direction pressed) {
-    if (pressed == this->direction) {
-      this->value() += this->increment();
-      return;
+  void OnLeft() {
+    switch (this->direction) {
+      case Direction::Right:
+        this->value() -= this->increment();
+        break;
+      case Direction::Left:
+        this->value() += this->increment();
+        break;
+      case Direction::Up:
+      case Direction::Down:
+        break;
     }
+  }
 
-    if (pressed == Opposite(this->direction)) {
-      this->value() -= this->increment();
-      return;
+  void OnRight() {
+    switch (this->direction) {
+      case Direction::Right:
+        this->value() += this->increment();
+        break;
+      case Direction::Left:
+        this->value() -= this->increment();
+        break;
+      case Direction::Up:
+      case Direction::Down:
+        break;
+    }
+  }
+
+  void OnUp() {
+    switch (this->direction) {
+      case Direction::Up:
+        this->value() -= this->increment();
+        break;
+      case Direction::Down:
+        this->value() += this->increment();
+        break;
+      case Direction::Left:
+      case Direction::Right:
+        break;
+    }
+  }
+
+  void OnDown() {
+    switch (this->direction) {
+      case Direction::Down:
+        this->value() += this->increment();
+        break;
+      case Direction::Up:
+        this->value() -= this->increment();
+        break;
+      case Direction::Left:
+      case Direction::Right:
+        break;
     }
   }
 
@@ -80,16 +110,16 @@ class SliderBase : public SliderOption<T>, public ComponentBase {
 
     T old_value = this->value();
     if (event == Event::ArrowLeft || event == Event::Character('h')) {
-      OnDirection(Direction::Left);
+      OnLeft();
     }
     if (event == Event::ArrowRight || event == Event::Character('l')) {
-      OnDirection(Direction::Right);
+      OnRight();
     }
     if (event == Event::ArrowUp || event == Event::Character('k')) {
-      OnDirection(Direction::Up);
+      OnDown();
     }
     if (event == Event::ArrowDown || event == Event::Character('j')) {
-      OnDirection(Direction::Down);
+      OnUp();
     }
 
     this->value() = std::max(this->min(), std::min(this->max(), this->value()));