Use shared_ptr instead of unique_ptr for elements.

This allow users to pass it into initializer list. Then clang-format
will produce 'acceptable' indentations.

This fixes:
https://github.com/ArthurSonzogni/FTXUI/issues/18

examples/component/gallery.cpp

@@ -57,27 +57,28 @@ class MyComponent : public Component {
     container.Add(&input);
   }
 
-  // clang-format off
   Element Render(std::wstring name, Component& component) {
-    return
-      hbox(
+    return hbox({
         text(name) | size(WIDTH, EQUAL, 8),
         separator(),
-        component.Render()
-      );
+        component.Render(),
+    });
   }
 
   Element Render() override {
-    return
-      vbox(
-        Render(L"menu", menu), separator(),
-        Render(L"toggle", toggle), separator(),
-        Render(L"checkbox", checkbox_container), separator(),
-        Render(L"radiobox", radiobox), separator(),
-        Render(L"input", input) | size(WIDTH, LESS_THAN, 30)
-      ) | border;
+    return vbox({
+               Render(L"menu", menu),
+               separator(),
+               Render(L"toggle", toggle),
+               separator(),
+               Render(L"checkbox", checkbox_container),
+               separator(),
+               Render(L"radiobox", radiobox),
+               separator(),
+               Render(L"input", input) | size(WIDTH, LESS_THAN, 30),
+           }) |
+           border;
   }
-  // clang-format on
 };
 
 int main(int argc, const char* argv[]) {

examples/component/homescreen.cpp

@@ -41,49 +41,60 @@ class HTopComponent : public Component {
   HTopComponent() {}
   ~HTopComponent() override {}
 
-  // clang-format off
   Element Render() override {
-    return
-      hbox(
-        vbox(
-          // --- Frequency ---
-          text(L"Frequency [Mhz]") | hcenter,
-          hbox(
-            vbox(
-              text(L"2400 "), filler(),
-              text(L"1200 "), filler(),
-              text(L"0% ")
-            ),
-            graph(std::ref(my_graph))
-          ) | flex,
-          separator(),
-          // --- Utilization ---
-          text(L"Utilization [%]") | hcenter,
-          hbox(
-            vbox(
-              text(L"100 "), filler(),
-              text(L"50 "), filler(),
-              text(L"0 ")
-            ),
-            graph(std::ref(my_graph)) | color(Color::RedLight)
-          ) | flex 
-        ) | flex,
-        separator(),
-        // --- Ram ---
-        vbox(
-          text(L"Ram [Mo]") | hcenter,
-          hbox(
-            vbox(
-              text(L"8192"), filler(),
-              text(L"4096 "), filler(),
-              text(L"0 ")
-            ),
-            graph(std::ref(my_graph)) | color(Color::BlueLight)
-         ) | flex
-       ) | flex
-     ) | flex | border;
+    auto frequency = vbox({
+        text(L"Frequency [Mhz]") | hcenter,
+        hbox({
+            vbox({
+                text(L"2400 "),
+                filler(),
+                text(L"1200 "),
+                filler(),
+                text(L"0% "),
+            }),
+            graph(std::ref(my_graph)) | flex,
+        }) | flex,
+    });
+
+    auto utilization = vbox({
+        text(L"Utilization [%]") | hcenter,
+        hbox({
+            vbox({
+                text(L"100 "),
+                filler(),
+                text(L"50 "),
+                filler(),
+                text(L"0 "),
+            }),
+            graph(std::ref(my_graph)) | color(Color::RedLight),
+        }) | flex,
+    });
+
+    auto ram = vbox({
+        text(L"Ram [Mo]") | hcenter,
+        hbox({
+            vbox({
+                text(L"8192"),
+                filler(),
+                text(L"4096 "),
+                filler(),
+                text(L"0 "),
+            }),
+            graph(std::ref(my_graph)) | color(Color::BlueLight),
+        }) | flex,
+    });
+
+    return hbox({
+               vbox({
+                   frequency | flex,
+                   separator(),
+                   utilization | flex,
+               }) | flex,
+               separator(),
+               ram | flex,
+           }) |
+           flex | border;
   }
-  // clang-format on
 };
 
 class CompilerComponent : public Component {
@@ -173,37 +184,38 @@ class CompilerComponent : public Component {
     input_container.Add(&input);
   }
 
-  // clang-format off
   Element Render() override {
-    return
-      vbox(
-        hbox(
-          window(text(L"Compiler"),
-            compiler.Render() | frame | size(HEIGHT, LESS_THAN, 6)
-          ),
-          window(text(L"Flags"), flag.Render()),
-          vbox(
-            window(text(L"Executable:"), executable.Render())
-              | size(WIDTH, EQUAL, 20),
-            window(text(L"Input"),
-              hbox(
-                vbox(
-                  hbox(text(L"Add: "), input_add.Render())
-                    | size(WIDTH, EQUAL, 20)
-                    | size(HEIGHT, EQUAL, 1),
-                  filler()
-                ),
-                separator(),
-                input.Render() | frame | size(HEIGHT, EQUAL, 3) | flex
-              )
-            ) | size(WIDTH, EQUAL, 60)
-          ),
-          filler()
-        ),
-        hflow(RenderCommandLine())
-      ) | border;
+    auto compiler_win = window(text(L"Compiler"), compiler.Render() | frame);
+    auto flags_win = window(text(L"Flags"), flag.Render());
+    auto executable_win = window(text(L"Executable:"), executable.Render());
+    auto input_win =
+        window(text(L"Input"),
+               hbox({
+                   vbox({
+                       hbox({
+                           text(L"Add: "),
+                           input_add.Render(),
+                       }) | size(WIDTH, EQUAL, 20) |
+                           size(HEIGHT, EQUAL, 1),
+                       filler(),
+                   }),
+                   separator(),
+                   input.Render() | frame | size(HEIGHT, EQUAL, 3) | flex,
+               }));
+    return vbox({
+               hbox({
+                   compiler_win | size(HEIGHT, LESS_THAN, 6),
+                   flags_win,
+                   vbox({
+                       executable_win | size(WIDTH, EQUAL, 20),
+                       input_win | size(WIDTH, EQUAL, 60),
+                   }),
+                   filler(),
+               }),
+               hflow(RenderCommandLine()),
+           }) |
+           border;
   }
-  // clang-format on
 
   Elements RenderCommandLine() {
     Elements line;
@@ -230,100 +242,94 @@ class CompilerComponent : public Component {
 };
 
 class SpinnerComponent : public Component {
-  // clang-format off
   Element Render() override {
     Elements entries;
-    for(int i = 0; i<22; ++i) {
+    for (int i = 0; i < 22; ++i) {
       if (i != 0)
-      entries.push_back(
-        spinner(i, shift/2)
-          | bold
-          | size(WIDTH, GREATER_THAN, 2)
-          | border
-      );
+        entries.push_back(spinner(i, shift / 2) | bold |
+                          size(WIDTH, GREATER_THAN, 2) | border);
     }
     return hflow(std::move(entries)) | border;
   }
-  // clang-format on
 };
 
 class ColorComponent : public Component {
-  // clang-format off
   Element Render() override {
-    return
-      hbox(
-        vbox(
-          color(Color::Default, text(L"Default")),
-          color(Color::Black, text(L"Black")),
-          color(Color::GrayDark, text(L"GrayDark")),
-          color(Color::GrayLight, text(L"GrayLight")),
-          color(Color::White, text(L"White")),
-          color(Color::Blue, text(L"Blue")),
-          color(Color::BlueLight, text(L"BlueLight")),
-          color(Color::Cyan, text(L"Cyan")),
-          color(Color::CyanLight, text(L"CyanLight")),
-          color(Color::Green, text(L"Green")),
-          color(Color::GreenLight, text(L"GreenLight")),
-          color(Color::Magenta, text(L"Magenta")),
-          color(Color::MagentaLight, text(L"MagentaLight")),
-          color(Color::Red, text(L"Red")),
-          color(Color::RedLight, text(L"RedLight")),
-          color(Color::Yellow, text(L"Yellow")),
-          color(Color::YellowLight, text(L"YellowLight"))
-        ),
-        vbox(
-          bgcolor(Color::Default, text(L"Default")),
-          bgcolor(Color::Black, text(L"Black")),
-          bgcolor(Color::GrayDark, text(L"GrayDark")),
-          bgcolor(Color::GrayLight, text(L"GrayLight")),
-          bgcolor(Color::White, text(L"White")),
-          bgcolor(Color::Blue, text(L"Blue")),
-          bgcolor(Color::BlueLight, text(L"BlueLight")),
-          bgcolor(Color::Cyan, text(L"Cyan")),
-          bgcolor(Color::CyanLight, text(L"CyanLight")),
-          bgcolor(Color::Green, text(L"Green")),
-          bgcolor(Color::GreenLight, text(L"GreenLight")),
-          bgcolor(Color::Magenta, text(L"Magenta")),
-          bgcolor(Color::MagentaLight, text(L"MagentaLight")),
-          bgcolor(Color::Red, text(L"Red")),
-          bgcolor(Color::RedLight, text(L"RedLight")),
-          bgcolor(Color::Yellow, text(L"Yellow")),
-          bgcolor(Color::YellowLight, text(L"YellowLight"))
-        )
-      ) | hcenter | border;
-    // clang-format on
+    return hbox({
+               vbox({
+                   color(Color::Default, text(L"Default")),
+                   color(Color::Black, text(L"Black")),
+                   color(Color::GrayDark, text(L"GrayDark")),
+                   color(Color::GrayLight, text(L"GrayLight")),
+                   color(Color::White, text(L"White")),
+                   color(Color::Blue, text(L"Blue")),
+                   color(Color::BlueLight, text(L"BlueLight")),
+                   color(Color::Cyan, text(L"Cyan")),
+                   color(Color::CyanLight, text(L"CyanLight")),
+                   color(Color::Green, text(L"Green")),
+                   color(Color::GreenLight, text(L"GreenLight")),
+                   color(Color::Magenta, text(L"Magenta")),
+                   color(Color::MagentaLight, text(L"MagentaLight")),
+                   color(Color::Red, text(L"Red")),
+                   color(Color::RedLight, text(L"RedLight")),
+                   color(Color::Yellow, text(L"Yellow")),
+                   color(Color::YellowLight, text(L"YellowLight")),
+               }),
+               vbox({
+                   bgcolor(Color::Default, text(L"Default")),
+                   bgcolor(Color::Black, text(L"Black")),
+                   bgcolor(Color::GrayDark, text(L"GrayDark")),
+                   bgcolor(Color::GrayLight, text(L"GrayLight")),
+                   bgcolor(Color::White, text(L"White")),
+                   bgcolor(Color::Blue, text(L"Blue")),
+                   bgcolor(Color::BlueLight, text(L"BlueLight")),
+                   bgcolor(Color::Cyan, text(L"Cyan")),
+                   bgcolor(Color::CyanLight, text(L"CyanLight")),
+                   bgcolor(Color::Green, text(L"Green")),
+                   bgcolor(Color::GreenLight, text(L"GreenLight")),
+                   bgcolor(Color::Magenta, text(L"Magenta")),
+                   bgcolor(Color::MagentaLight, text(L"MagentaLight")),
+                   bgcolor(Color::Red, text(L"Red")),
+                   bgcolor(Color::RedLight, text(L"RedLight")),
+                   bgcolor(Color::Yellow, text(L"Yellow")),
+                   bgcolor(Color::YellowLight, text(L"YellowLight")),
+               }),
+           }) |
+           hcenter | border;
   }
 };
 
 class GaugeComponent : public Component {
-  // clang-format off
   Element RenderGauge(int delta) {
     float progress = (shift + delta) % 1000 / 1000.f;
-    return hbox(text(std::to_wstring(int(progress * 100)) + L"% ") | size(WIDTH, EQUAL, 5),
-                gauge(progress));
+    return hbox({
+        text(std::to_wstring(int(progress * 100)) + L"% ") |
+            size(WIDTH, EQUAL, 5),
+        gauge(progress),
+    });
   }
   Element Render() override {
-    return
-      vbox(
-        RenderGauge(0) | color(Color::Black),
-        RenderGauge(100) | color(Color::GrayDark),
-        RenderGauge(50) | color(Color::GrayLight),
-        RenderGauge(6894) | color(Color::White), separator(),
-        RenderGauge(6841) | color(Color::Blue),
-        RenderGauge(9813) | color(Color::BlueLight),
-        RenderGauge(98765) | color(Color::Cyan),
-        RenderGauge(98) | color(Color::CyanLight),
-        RenderGauge(9846) | color(Color::Green),
-        RenderGauge(1122) | color(Color::GreenLight),
-        RenderGauge(84) | color(Color::Magenta),
-        RenderGauge(645) | color(Color::MagentaLight),
-        RenderGauge(568) | color(Color::Red),
-        RenderGauge(2222) | color(Color::RedLight),
-        RenderGauge(220) | color(Color::Yellow),
-        RenderGauge(348) | color(Color::YellowLight)
-      ) | border;
+    return vbox({
+               RenderGauge(0) | color(Color::Black),
+               RenderGauge(100) | color(Color::GrayDark),
+               RenderGauge(50) | color(Color::GrayLight),
+               RenderGauge(6894) | color(Color::White),
+               separator(),
+               RenderGauge(6841) | color(Color::Blue),
+               RenderGauge(9813) | color(Color::BlueLight),
+               RenderGauge(98765) | color(Color::Cyan),
+               RenderGauge(98) | color(Color::CyanLight),
+               RenderGauge(9846) | color(Color::Green),
+               RenderGauge(1122) | color(Color::GreenLight),
+               RenderGauge(84) | color(Color::Magenta),
+               RenderGauge(645) | color(Color::MagentaLight),
+               RenderGauge(568) | color(Color::Red),
+               RenderGauge(2222) | color(Color::RedLight),
+               RenderGauge(220) | color(Color::Yellow),
+               RenderGauge(348) | color(Color::YellowLight),
+           }) |
+           border;
   };
-  // clang-format on
 };
 
 class Tab : public Component {
@@ -354,8 +360,11 @@ class Tab : public Component {
   }
 
   Element Render() override {
-    return vbox(text(L"FTXUI Demo") | bold | hcenter,
-                tab_selection.Render() | hcenter, container.Render());
+    return vbox({
+        text(L"FTXUI Demo") | bold | hcenter,
+        tab_selection.Render() | hcenter,
+        container.Render(),
+    });
   }
 };
 

examples/component/input.cpp

@@ -33,18 +33,13 @@ class MyComponent : public Component {
   Input input_2;
   Input input_3;
 
-  // clang-format off
   Element Render() override {
-    return
-      border(
-        vbox(
-          hbox(text(L" input_1 : "), input_1.Render()),
-          hbox(text(L" input_2 : "), input_2.Render()),
-          hbox(text(L" input_3 : "), input_3.Render())
-        )
-      );
+    return border(vbox({
+        hbox({text(L" input_1 : "), input_1.Render()}),
+        hbox({text(L" input_2 : "), input_2.Render()}),
+        hbox({text(L" input_3 : "), input_3.Render()}),
+    }));
   }
-  // clang-format on
 };
 
 int main(int argc, const char* argv[]) {

examples/component/menu2.cpp

@@ -40,38 +40,39 @@ class MyComponent : public Component {
   Menu left_menu;
   Menu right_menu;
 
-  // clang-format off
-   Element Render() override {
-     int sum = left_menu.selected * 10 + right_menu.selected;
-     return
-       border(
-         vbox(
-           // -------- Top panel --------------
-           hbox(
-             // -------- Left Menu --------------
-             vbox(
-               hcenter(bold(text(L"Percentage by 10%"))),
-               separator(),
-               left_menu.Render()
-             ) | flex,
-             // -------- Right Menu --------------
-             vbox(
-               hcenter(bold(text(L"Percentage by 1%"))),
-               separator(),
-               right_menu.Render()
-             ) | flex,
-             filler()
-           ),
-           separator(),
-           // -------- Bottom panel --------------
-           vbox(
-             hbox(text(L" gauge : "), gauge(sum/100.0)),
-             hbox(text(L"  text : "), text(to_wstring(std::to_string(sum) + " %")))
-           ) | flex
-         )
-       );
-   }
-  // clang-format on
+  Element Render() override {
+    int sum = left_menu.selected * 10 + right_menu.selected;
+    return border(vbox({
+        // -------- Top panel --------------
+        hbox({
+            // -------- Left Menu --------------
+            vbox({
+                hcenter(bold(text(L"Percentage by 10%"))),
+                separator(),
+                left_menu.Render(),
+            }) | flex,
+            // -------- Right Menu --------------
+            vbox({
+                hcenter(bold(text(L"Percentage by 1%"))),
+                separator(),
+                right_menu.Render(),
+            }) | flex,
+            filler(),
+        }),
+        separator(),
+        // -------- Bottom panel --------------
+        vbox({
+            hbox({
+                text(L" gauge : "),
+                gauge(sum / 100.0),
+            }),
+            hbox({
+                text(L"  text : "),
+                text(to_wstring(std::to_string(sum) + " %")),
+            }),
+        }) | flex,
+    }));
+  }
 };
 
 int main(int argc, const char* argv[]) {

examples/component/menu_style.cpp

@@ -57,14 +57,14 @@ class MyComponent : public Component {
   // clang-format off
    Element Render() override {
      return
-        hbox(
+        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;
+          menu_6.Render() | flex,
+        }) | border;
    }
   // clang-format on
 };

examples/component/toggle.cpp

@@ -38,19 +38,24 @@ class MyComponent : public Component {
   Toggle toggle_3_;
   Toggle toggle_4_;
 
-  // clang-format off
   Element Render() override {
-    return
-      vbox(
+    return vbox({
         text(L"Choose your options:"),
         text(L""),
         hbox(text(L" * Poweroff on startup      : "), toggle_1_.Render()),
         hbox(text(L" * Out of process           : "), toggle_2_.Render()),
         hbox(text(L" * Price of the information : "), toggle_3_.Render()),
-        hbox(text(L" * Number of elements       : "), toggle_4_.Render())
-      );
+        hbox(text(L" * Number of elements       : "), toggle_4_.Render()),
+    });
+  }
+
+  bool OnEvent(Event event) {
+    if (event == Event::Return) {
+      on_enter();
+      return true;
+    }
+    return Component::OnEvent(event);
   }
-  // clang-format on
 };
 
 int main(int argc, const char* argv[]) {

examples/dom/border.cpp

@@ -11,41 +11,33 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
+  auto document = hbox({
       window(text(L" main frame ") | hcenter,
-        vbox(
-          text(L"Line 1"),
-          text(L"Line 2"),
-          text(L"Line 3"),
-          vbox(
-            text(L"Line 4"),
-            text(L"Line 5"),
-            text(L"Line 6")
-          ) | border,
-          hbox(
-            window(text(L"frame 2"),
-              vbox(
-                text(L"Line 4"),
-                text(L"Line 5"),
-                text(L"Line 6")
-              )
-            ),
-            window(text(L"frame 3"),
-              vbox(
-                text(L"Line 7"),
-                text(L"Line 8"),
-                text(L"Line 9")
-              )
-            )
-          ),
-          text(L"footer footer footer footer footer")
-        )
-      ),
-      filler()
-    );
-  // clang-format on
+             vbox({
+                 text(L"Line 1"),
+                 text(L"Line 2"),
+                 text(L"Line 3"),
+                 vbox({
+                     text(L"Line 4"),
+                     text(L"Line 5"),
+                     text(L"Line 6"),
+                 }) | border,
+                 hbox({
+                     window(text(L"frame 2"), vbox({
+                                                  text(L"Line 4"),
+                                                  text(L"Line 5"),
+                                                  text(L"Line 6"),
+                                              })),
+                     window(text(L"frame 3"), vbox({
+                                                  text(L"Line 7"),
+                                                  text(L"Line 8"),
+                                                  text(L"Line 9"),
+                                              })),
+                 }),
+                 text(L"footer footer footer footer footer"),
+             })),
+      filler(),
+  });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
   std::cout << screen.ToString() << std::endl;

examples/dom/dbox.cpp

@@ -9,19 +9,16 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    dbox(
-      vbox(
-        text(L"line_1"),
-        text(L"line_2"),
-        text(L"line_3"),
-        text(L"line_4"),
-        text(L"line_5")
-      ) | border,
-      text(L"overlay") | border | center
-    );
-  // clang-format on
+  auto document = dbox({
+      vbox({
+          text(L"line_1"),
+          text(L"line_2"),
+          text(L"line_3"),
+          text(L"line_4"),
+          text(L"line_5"),
+      }) | border,
+      text(L"overlay") | border | center,
+  });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/gauge.cpp

@@ -17,14 +17,11 @@ int main(int argc, const char* argv[]) {
   for (float percentage = 0.0f; percentage <= 1.0f; percentage += 0.002f) {
     std::wstring data_downloaded =
         std::to_wstring(int(percentage * 5000)) + L"/5000";
-    // clang-format off
-    auto document =
-        hbox(
-          text(L"downloading:"),
-          gauge(percentage) | flex,
-          text(L" " + data_downloaded)
-        );
-    // clang-format on
+    auto document = hbox({
+        text(L"downloading:"),
+        gauge(percentage) | flex,
+        text(L" " + data_downloaded),
+    });
     auto screen = Screen(100, 1);
     Render(screen, document.get());
     std::cout << reset_position << screen.ToString() << std::flush;

examples/dom/graph.cpp

@@ -45,23 +45,23 @@ int main(int argc, const char* argv[]) {
 
   std::string reset_position;
   for (int i = 0;; ++i) {
-    // clang-format off
     auto document =
-      hbox(
-        vbox(
-          graph(std::ref(my_graph)), separator(),
-          graph(triangle) | inverted
-        ) | flex,
-        separator(),
-        vbox(
-          graph(std::ref(my_graph)) | color(Color::BlueLight), separator(),
-          graph(std::ref(my_graph)) | color(Color::RedLight), separator(),
-          graph(std::ref(my_graph)) | color(Color::YellowLight)
-        ) | flex
-      )
-      | border
-      | size(HEIGHT, GREATER_THAN, 40);
-    // clang-format on
+        hbox({
+            vbox({
+                graph(std::ref(my_graph)),
+                separator(),
+                graph(triangle) | inverted,
+            }) | flex,
+            separator(),
+            vbox({
+                graph(std::ref(my_graph)) | color(Color::BlueLight),
+                separator(),
+                graph(std::ref(my_graph)) | color(Color::RedLight),
+                separator(),
+                graph(std::ref(my_graph)) | color(Color::YellowLight),
+            }) | flex,
+        }) |
+        border | size(HEIGHT, GREATER_THAN, 40);
 
     auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
     Render(screen, document.get());

examples/dom/hflow.cpp

@@ -12,25 +12,35 @@ int main(int argc, const char* argv[]) {
   using namespace ftxui;
   auto make_box = [](size_t dimx, size_t dimy) {
     std::wstring title = to_wstring(dimx) + L"x" + to_wstring(dimy);
-    // clang-format off
     return window(text(title) | hcenter | bold,
                   text(L"content") | hcenter | dim) |
            size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
-    // clang-format on
   };
 
-  // clang-format off
-  auto document =
-      hflow(make_box(7, 7), make_box(7, 5), make_box(5, 7), make_box(10, 4),
-            make_box(10, 4), make_box(10, 4), make_box(10, 4), make_box(11, 4),
-            make_box(11, 4), make_box(11, 4), make_box(11, 4), make_box(12, 4),
-            make_box(12, 5), make_box(12, 4), make_box(13, 4), make_box(13, 3),
-            make_box(13, 3), make_box(10, 3))
-      | size(WIDTH, GREATER_THAN, 20)
-      | border
-      | size(HEIGHT, GREATER_THAN, 30)
-      | size(WIDTH, LESS_THAN, 50);
-  // clang-format on
+  auto style = size(WIDTH, GREATER_THAN, 20) | border |
+               size(HEIGHT, GREATER_THAN, 30) | size(WIDTH, LESS_THAN, 50);
+
+  auto document = hflow({
+                      make_box(7, 7),
+                      make_box(7, 5),
+                      make_box(5, 7),
+                      make_box(10, 4),
+                      make_box(10, 4),
+                      make_box(10, 4),
+                      make_box(10, 4),
+                      make_box(11, 4),
+                      make_box(11, 4),
+                      make_box(11, 4),
+                      make_box(11, 4),
+                      make_box(12, 4),
+                      make_box(12, 5),
+                      make_box(12, 4),
+                      make_box(13, 4),
+                      make_box(13, 3),
+                      make_box(13, 3),
+                      make_box(10, 3),
+                  }) |
+                  style;
 
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());

examples/dom/html_like.cpp

@@ -15,11 +15,11 @@ int main(int argc, const char* argv[]) {
   using namespace std::chrono_literals;
 
   auto img1 = []() { return text(L"img") | border; };
-  auto img2 = []() { return vbox(text(L"big"), text(L"image")) | border; };
+  auto img2 = []() { return vbox({text(L"big"), text(L"image")}) | border; };
 
   std::string reset_position;
   for (int i = 0;; ++i) {
-    auto document =
+    auto document =  //
         hflow(
             paragraph(L"Hello world! Here is an image:"), img1(),
             paragraph(L" Here is a text "), text(L"underlined ") | underlined,

examples/dom/package_manager.cpp

@@ -49,49 +49,54 @@ int main(int argc, const char* argv[]) {
     return text(to_wstring(number)) | size(WIDTH, EQUAL, 3);
   };
 
-  // clang-format off
   auto renderTask = [&](const Task& task) {
     auto style = (task.downloaded == task.size) ? dim : bold;
-    return
-      hbox(
+    return hbox({
         text(task.name) | style,
         separator(),
         to_text(task.downloaded),
         text(L"/"),
         to_text(task.size),
         separator(),
-        gauge(task.downloaded / float(task.size))
-      );
+        gauge(task.downloaded / float(task.size)),
+    });
   };
 
   auto renderSummary = [&]() {
-    return
-      window(text(L" Summary "),
-        vbox(
-          hbox(text(L"- done:   "), to_text(nb_done) | bold) | color(Color::Green),
-          hbox(text(L"- active: "), to_text(nb_active) | bold ) | color(Color::RedLight),
-          hbox(text(L"- queue:  "), to_text(nb_queued) | bold) | color(Color::Red)
-        )
-      );
+    auto summary = vbox({
+        hbox({
+            text(L"- done:   "),
+            to_text(nb_done) | bold,
+        }) | color(Color::Green),
+        hbox({
+            text(L"- active: "),
+            to_text(nb_active) | bold,
+        }) | color(Color::RedLight),
+        hbox({
+            text(L"- queue:  "),
+            to_text(nb_queued) | bold,
+        }) | color(Color::Red),
+    });
+
+    return window(text(L" Summary "), summary);
   };
 
-  auto render = [&](){
+  auto render = [&]() {
     std::vector<Element> entries;
-    for(auto& task : displayed_task)
+    for (auto& task : displayed_task)
       entries.push_back(renderTask(task));
 
-    return
-      vbox(
+    return vbox({
         // List of tasks.
-        window(text(L" Task "),
-          vbox(std::move(entries))
-        ),
+        window(text(L" Task "), vbox(std::move(entries))),
 
         // Summary.
-        hbox(renderSummary(), filler())
-      );
+        hbox({
+            renderSummary(),
+            filler(),
+        }),
+    });
   };
-  // clang-format on
 
   auto updateModel = [&]() {
     for (auto& task : displayed_task) {

examples/dom/paragraph.cpp

@@ -13,25 +13,22 @@ int main(int argc, const char* argv[]) {
   std::wstring p =
       LR"(In probability theory and statistics, Bayes' theorem (alternatively Bayes' law or Bayes' rule) describes the probability of an event, based on prior knowledge of conditions that might be related to the event. For example, if cancer is related to age, then, using Bayes' theorem, a person's age can be used to more accurately assess the probability that they have cancer, compared to the assessment of the probability of cancer made without knowledge of the person's age. One of the many applications of Bayes' theorem is Bayesian inference, a particular approach to statistical inference. When applied, the probabilities involved in Bayes' theorem may have different probability interpretations. With the Bayesian probability interpretation the theorem expresses how a subjective degree of belief should rationally change to account for availability of related evidence. Bayesian inference is fundamental to Bayesian statistics.)";
 
-  // clang-format off
-  auto document =
-    vbox(
-      hbox(
-        hflow(paragraph(p)) | border,
-        hflow(paragraph(p)) | border,
-        hflow(paragraph(p)) | border
-      ) | flex,
-      hbox(
-        hflow(paragraph(p)) | border,
-        hflow(paragraph(p)) | border
-      ) | flex,
-      hbox(
-        hflow(paragraph(p)) | border
-      ) | flex
-    );
-  // clang-format on
+  auto document = vbox({
+      hbox({
+          hflow(paragraph(p)) | border,
+          hflow(paragraph(p)) | border,
+          hflow(paragraph(p)) | border,
+      }) | flex,
+      hbox({
+          hflow(paragraph(p)) | border,
+          hflow(paragraph(p)) | border,
+      }) | flex,
+      hbox({
+          hflow(paragraph(p)) | border,
+      }) | flex,
+  });
 
-  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
+  auto screen = Screen::Create(Dimension::Full(), Dimension::Full());
   Render(screen, document.get());
   std::cout << screen.ToString();
   getchar();

examples/dom/separator.cpp

@@ -9,20 +9,18 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
-      text(L"left-column"),
-      separator(),
-      vbox(
-        center(text(L"right-top")) | flex,
-        separator(),
-        center(text(L"bottom-bottom"))
-      ) | flex,
-      separator(),
-      text(L"right-column")
-    ) | border;
-  // clang-format on
+  auto document = hbox({
+                      text(L"left-column"),
+                      separator(),
+                      vbox({
+                          center(text(L"right-top")) | flex,
+                          separator(),
+                          center(text(L"bottom-bottom")),
+                      }) | flex,
+                      separator(),
+                      text(L"right-column"),
+                  }) |
+                  border;
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/size.cpp

@@ -10,7 +10,6 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
   auto make_box = [](const std::wstring title) {
     return
       window(
@@ -26,7 +25,7 @@ int main(int argc, const char* argv[]) {
         | size(WIDTH, EQUAL, x)
     );
   }
-  // clang-format on
+
   auto document = hbox(std::move(content));
   auto screen = Screen::Create(Dimension::Fit(document));
   Render(screen, document.get());

examples/dom/spinner.cpp

@@ -20,17 +20,17 @@ int main(int argc, const char* argv[]) {
     for (int i = 0; i < 22; ++i) {
       if (i != 0)
         entries.push_back(separator());
-      // clang-format off
-      entries.push_back(
-        hbox(
-          text(to_wstring(i)) | size(WIDTH, EQUAL, 2),
-          separator(),
-          spinner(i, index) | bold
-        )
-      );
-      // clang-format on
+      entries.push_back(  //
+          hbox({
+              text(to_wstring(i)) | size(WIDTH, EQUAL, 2),
+              separator(),
+              spinner(i, index) | bold,
+          }));
     }
-    auto document = hbox(vbox(std::move(entries)) | border, filler());
+    auto document = hbox({
+        vbox(std::move(entries)) | border,
+        filler(),
+    });
     auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
     Render(screen, document.get());
     std::cout << reset_position << screen.ToString() << std::flush;

examples/dom/style_blink.cpp

@@ -9,14 +9,12 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
-      text(L"This text is "),
-      text(L"blink") | blink,
-      text(L". Do you like it?")
-    );
-  // clang-format on
+  auto document =  //
+      hbox({
+          text(L"This text is "),
+          text(L"blink") | blink,
+          text(L". Do you like it?"),
+      });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/style_bold.cpp

@@ -9,14 +9,12 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
-      text(L"This text is "),
-      text(L"bold") | bold,
-      text(L". Do you like it?")
-    );
-  // clang-format on
+  auto document =  //
+      hbox({
+          text(L"This text is "),
+          text(L"bold") | bold,
+          text(L". Do you like it?"),
+      });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/style_dim.cpp

@@ -9,14 +9,12 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
-      text(L"This text is "),
-      text(L"dim") | dim,
-      text(L". Do you like it?")
-    );
-  // clang-format on
+  auto document =  //
+      hbox({
+          text(L"This text is "),
+          text(L"dim") | dim,
+          text(L". Do you like it?"),
+      });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/style_gallery.cpp

@@ -11,7 +11,7 @@ int main(int argc, const char* argv[]) {
   using namespace ftxui;
   // clang-format off
   auto document =
-    hbox(
+    hbox({
       text(L"normal")                           , text(L" ") ,
       text(L"bold")      | bold                 , text(L" ") ,
       text(L"dim")       | dim                  , text(L" ") ,
@@ -19,8 +19,8 @@ int main(int argc, const char* argv[]) {
       text(L"underlined")| underlined           , text(L" ") ,
       text(L"blink")     | blink                , text(L" ") ,
       text(L"color")     | color(Color::Blue)   , text(L" ") ,
-      text(L"bgcolor")   | bgcolor(Color::Blue)
-    );
+      text(L"bgcolor")   | bgcolor(Color::Blue),
+    });
   // clang-format on
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());

examples/dom/style_inverted.cpp

@@ -9,14 +9,11 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
+  auto document = hbox({
       text(L"This text is "),
       text(L"inverted") | inverted,
-      text(L". Do you like it?")
-    );
-  // clang-format on
+      text(L". Do you like it?"),
+  });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/style_underlined.cpp

@@ -9,14 +9,12 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    hbox(
-      text(L"This text is "),
-      text(L"underlined") | underlined,
-      text(L". Do you like it?")
-    );
-  // clang-format on
+  auto document =  //
+      hbox({
+          text(L"This text is "),
+          text(L"underlined") | underlined,
+          text(L". Do you like it?"),
+      });
   auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
   Render(screen, document.get());
 

examples/dom/vbox_hbox.cpp

@@ -9,34 +9,31 @@
 
 int main(int argc, const char* argv[]) {
   using namespace ftxui;
-  // clang-format off
-  auto document =
-    vbox(
-      hbox(
-        text(L"north-west"),
-        filler(),
-        text(L"north-east")
-      ),
-      filler(),
-      hbox(
-        hbox(
+  auto document =  //
+      vbox({
+          hbox({
+              text(L"north-west"),
+              filler(),
+              text(L"north-east"),
+          }),
           filler(),
-          text(L"center"),
-          filler()
-        )
-      ),
-      filler(),
-      hbox(
-        text(L"south-west"),
-        filler(),
-        text(L"south-east")
-      )
-    );
-  // clang-format on
+          hbox({
+              filler(),
+              text(L"center"),
+              filler(),
+          }),
+          filler(),
+          hbox({
+              text(L"south-west"),
+              filler(),
+              text(L"south-east"),
+          }),
+      });
   auto screen = Screen::Create(Dimension::Full());
   Render(screen, document.get());
 
   std::cout << screen.ToString();
+  getchar();
 
   return 0;
 }