feat(inline): rendering without alternate screen

Fix issue with growth resize for containers with corresponding
borders, padding and gaps.

examples/direct.zig

@@ -20,12 +20,12 @@ const QuitText = struct {
         assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
 
         const y = 0;
-        const x = size.x / 2 -| (text.len / 2);
+        const x = 2;
         const anchor = (y * size.x) + x;
 
         for (text, 0..) |cp, idx| {
             cells[anchor + idx].style.fg = .white;
-            cells[anchor + idx].style.emphasis = &.{.bold};
+            cells[anchor + idx].style.emphasis = &.{ .bold, .underline };
             cells[anchor + idx].cp = cp;
 
             // NOTE do not write over the contents of this `Container`'s `Size`
@@ -35,7 +35,7 @@ const QuitText = struct {
 };
 
 const Prompt = struct {
-    len: u16 = 5,
+    len: u16 = 3,
     pub fn element(this: *@This()) App.Element {
         return .{
             .ptr = this,
@@ -58,16 +58,14 @@ const Prompt = struct {
         assert(cells.len == @as(usize, size.x) * @as(usize, size.y));
 
         for (0..this.len) |idx| {
-            cells[idx].style.bg = .red;
+            cells[idx].style.bg = .blue;
             cells[idx].style.fg = .black;
             cells[idx].style.emphasis = &.{.bold};
         }
-        cells[this.len - 1].style.cursor = true; // marks the actual end of the rendering!
-
-        const anchor = 1;
-        cells[anchor + 0].cp = 'N';
-        cells[anchor + 1].cp = 'O';
-        cells[anchor + 2].cp = 'R';
+        cells[1].cp = '>';
+        // leave one clear whitespace after the prompt
+        cells[this.len].style.bg = .default;
+        cells[this.len].style.cursor = true; // marks the actual end of the rendering!
     }
 };
 
@@ -86,6 +84,7 @@ pub fn main() !void {
     var container: App.Container = try .init(gpa, .{
         .layout = .{
             .direction = .vertical,
+            .gap = 1, // show empty line between elements to allow navigation through paragraph jumping
         },
         .size = .{
             .grow = .horizontal_only,
@@ -96,10 +95,12 @@ pub fn main() !void {
     var quit_text: QuitText = .{};
     var intermediate: App.Container = try .init(gpa, .{
         .border = .{
-            .sides = .all,
+            .sides = .{ .left = true },
+            .color = .grey,
         },
         .layout = .{
             .direction = .horizontal,
+            .padding = .{ .left = 1, .top = 1 },
         },
     }, quit_text.element());
     try intermediate.append(try .init(gpa, .{
@@ -109,11 +110,18 @@ pub fn main() !void {
     try intermediate.append(try .init(gpa, .{
         .rectangle = .{ .fill = .green },
     }, .{}));
-    try container.append(intermediate);
+
+    var padding_container: App.Container = try .init(gpa, .{
+        .layout = .{
+            .padding = .horizontal(1),
+        },
+    }, .{});
+    try padding_container.append(intermediate);
+    try container.append(padding_container);
 
     var prompt: Prompt = .{};
     try container.append(try .init(gpa, .{
-        .rectangle = .{ .fill = .red },
+        .rectangle = .{ .fill = .grey },
         .size = .{
             .dim = .{ .y = 1 },
         },