Add "frame" : scrollable area.

ftxui/include/ftxui/component/container.hpp

@@ -13,7 +13,7 @@ class Container : public Component {
  public:
   static Container Vertical();
   static Container Horizontal();
-  static Container Tab(size_t* selector);
+  static Container Tab(int* selector);
 
   ~Container() override = default;
 
@@ -36,8 +36,8 @@ class Container : public Component {
   Element TabRender();
   RenderHandler render_handler_;
 
-  size_t selected_ = 0;
-  size_t* selector_ = &selected_;
+  int selected_ = 0;
+  int* selector_ = &selected_;
 };
 
 }  // namespace ftxui

ftxui/include/ftxui/component/menu.hpp

@@ -15,9 +15,9 @@ class Menu : public Component {
 
   // State.
   std::vector<std::wstring> entries = {};
-  size_t selected = 0;
+  int selected = 0;
 
-  Decorator active_style = inverted;
+  Decorator focused_style = inverted;
   Decorator selected_style = bold;
   Decorator normal_style = nothing;
 

ftxui/include/ftxui/component/toggle.hpp

@@ -13,9 +13,13 @@ class Toggle : public Component {
   ~Toggle() override = default;
 
   // State.
-  size_t selected = 0;
+  int selected = 0;
   std::vector<std::wstring> entries = {L"On", L"Off"};
 
+  Decorator focused_style = inverted;
+  Decorator selected_style = bold;
+  Decorator normal_style = dim;
+
   // Callback.
   std::function<void()> on_change = [](){};
 

ftxui/include/ftxui/dom/box.hpp

@@ -1,15 +0,0 @@
-#ifndef FTXUI_DOM_BOX_HPP
-#define FTXUI_DOM_BOX_HPP
-
-namespace ftxui {
-
-struct Box {
-  int left;
-  int right;
-  int top;
-  int bottom;
-};
-
-}; // namespace ftxui
-
-#endif /* end of include guard: FTXUI_DOM_BOX_HPP */

ftxui/include/ftxui/dom/elements.hpp

@@ -12,21 +12,11 @@ using Element = std::unique_ptr<Node>;
 using Elements = std::vector<Element>;
 using Decorator = std::function<Element(Element)>;
 
-// --- Layout ----
-Element vbox(Elements);
-Element hbox(Elements);
-Element dbox(Elements);
-
-// -- Flexibility --
-Element filler();
-Element flex(Element);
-Decorator size(size_t width, size_t height);
-
-// --- Widget --
+// --- Widget ---
 Element text(std::wstring text);
 Element separator();
 Element gauge(float ratio);
-Element frame(Element);
+Element border(Element);
 Element window(Element title, Element content);
 Element spinner(int charset_index, size_t image_index);
 
@@ -36,19 +26,37 @@ Element dim(Element);
 Element inverted(Element);
 Element underlined(Element);
 Element blink(Element);
-
 Decorator color(Color);
 Decorator bgcolor(Color);
 Element color(Color, Element);
 Element bgcolor(Color, Element);
 
-// --- Util ---
+// --- Layout ---
+// Horizontal, Vertical or stacked set of elements.
+Element vbox(Elements);
+Element hbox(Elements);
+Element dbox(Elements);
+
+// -- Flexibility ---
+// Define how to share the remaining space when not all of it is used inside a
+// container.
+Element filler();
+Element flex(Element);
+Decorator size(size_t width, size_t height);
+
+// --- Frame ---
+// A frame is a scrollable area. The internal area is potentially larger than
+// the external one. The internal area is scrolled in order to make visible the
+// focused element.
+Element frame(Element);
+Element focus(Element);
+Element select(Element);
+
+// --- Util --------------------------------------------------------------------
 Element hcenter(Element);
 Element vcenter(Element);
 Element center(Element);
 Element align_right(Element);
-
-// --- Util ---
 Element nothing(Element element);
 
 // Pipe elements into decorator togethers.

ftxui/include/ftxui/dom/node.hpp

@@ -4,8 +4,8 @@
 #include <memory>
 #include <vector>
 
-#include "ftxui/dom/box.hpp"
 #include "ftxui/dom/requirement.hpp"
+#include "ftxui/screen/box.hpp"
 #include "ftxui/screen/screen.hpp"
 
 namespace ftxui {

ftxui/include/ftxui/dom/requirement.hpp

@@ -1,6 +1,8 @@
 #ifndef FTXUI_DOM_REQUIREMENT_HPP
 #define FTXUI_DOM_REQUIREMENT_HPP
 
+#include "ftxui/screen/box.hpp"
+
 namespace ftxui {
 
 struct Requirement {
@@ -9,6 +11,14 @@ struct Requirement {
 
   // How much flexibility is given to the component.
   struct { int x = 0; int y = 0; } flex;
+
+  // Frame.
+  enum Selection {
+    NORMAL = 0,
+    SELECTED = 1,
+    FOCUSED = 2,
+  } selection = NORMAL;
+  Box selected_box;
 };
 
 }; // namespace ftxui

ftxui/include/ftxui/screen/box.hpp

@@ -0,0 +1,17 @@
+#ifndef FTXUI_SCREEN_BOX_HPP
+#define FTXUI_SCREEN_BOX_HPP
+
+namespace ftxui {
+
+struct Box {
+  int x_min;
+  int x_max;
+  int y_min;
+  int y_max;
+
+  static Box Intersection(Box a, Box b);
+};
+
+}; // namespace ftxui
+
+#endif /* end of include guard: FTXUI_SCREEN_BOX_HPP */

ftxui/include/ftxui/screen/screen.hpp

@@ -6,6 +6,7 @@
 #include <memory>
 
 #include "ftxui/screen/color.hpp"
+#include "ftxui/screen/box.hpp"
 
 namespace ftxui {
   class Node;
@@ -51,6 +52,7 @@ class Screen {
   void Clear();
 
   void ApplyShader();
+  Box stencil;
 
  protected:
   size_t dimx_;

ftxui/include/ftxui/util/autoreset.hpp

@@ -0,0 +1,22 @@
+#ifndef FTXUI_UTIL_AUTORESET_HPP
+#define FTXUI_UTIL_AUTORESET_HPP
+
+namespace ftxui {
+
+template<typename T>
+class AutoReset {
+ public:
+  AutoReset(T* variable, T new_value)
+      : variable_(variable),
+        previous_value_(std::move(*variable)) {
+    *variable_ = std::move(new_value);
+  }
+  ~AutoReset() { *variable_ = std::move(previous_value_); }
+ private:
+  T* variable_;
+  T previous_value_;
+};
+
+} // namespace ftxui
+
+#endif /* end of include guard: FTXUI_UTIL_AUTORESET_HPP */