add(renderer/direct): write newline function to align view if necessary

Introduce `.cancel` event that is fired when the user sends EOF
in *non raw mode* renderings. The event `.line` now sends the
entire line (even if larger than the internal buffer) but requires
now an `Allocator`.

examples/continuous.zig

@@ -133,7 +133,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -165,7 +165,7 @@ pub fn main() !void {
     }, spinner.element());
     try container.append(nested_container);
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     var framerate: u64 = 60;

examples/demo.zig

@@ -32,7 +32,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -133,7 +133,7 @@ pub fn main() !void {
     }, .{}));
     defer container.deinit(); // also de-initializes the children
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop
@@ -149,7 +149,7 @@ pub fn main() !void {
                 if (key.eql(.{ .cp = 'n', .mod = .{ .ctrl = true } })) {
                     try app.interrupt();
                     renderer.size = .{}; // reset size, such that next resize will cause a full re-draw!
-                    defer app.start() catch @panic("could not start app event loop");
+                    defer app.start(.full) catch @panic("could not start app event loop");
                     var child = std.process.Child.init(&.{"vim"}, allocator);
                     _ = child.spawnAndWait() catch |err| app.postEvent(.{
                         .err = .{

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!
     }
 };
 
@@ -79,13 +77,14 @@ pub fn main() !void {
 
     const gpa = allocator.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(gpa, .{}, .{});
     var renderer = zterm.Renderer.Direct.init(gpa);
     defer renderer.deinit();
 
     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 },
         },
@@ -139,9 +147,10 @@ pub fn main() !void {
 
             // pre event handling
             switch (event) {
-                // NOTE maybe I want to decouple the `key`s from the user input too? i.e. this only makes sense if the output is not echoed!
-                // otherwise just use gnu's `readline`?
+                // NOTE draw the character with the ctrl indication and a newline to make sure the rendering stays consistent
+                .cancel => try renderer.writeCtrlDWithNewline(),
                 .line => |line| {
+                    defer gpa.free(line);
                     log.debug("{s}", .{line});
                 },
                 // NOTE errors could be displayed in another container in case one was received, etc. to provide the user with feedback

examples/elements/alignment.zig

@@ -32,7 +32,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -55,7 +55,7 @@ pub fn main() !void {
     var alignment: App.Alignment = .init(quit_container, .center);
     try container.append(try .init(allocator, .{}, alignment.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/elements/button.zig

@@ -82,7 +82,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -102,7 +102,7 @@ pub fn main() !void {
     try container.append(try App.Container.init(allocator, .{ .rectangle = .{ .fill = .lightgrey } }, element));
     try container.append(try App.Container.init(allocator, .{ .rectangle = .{ .fill = .black } }, button.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/elements/input.zig

@@ -65,7 +65,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -112,7 +112,7 @@ pub fn main() !void {
     }, second_mouse_draw.element()));
     try container.append(nested_container);
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/elements/progress.zig

@@ -32,7 +32,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -85,7 +85,7 @@ pub fn main() !void {
         });
         try container.append(try App.Container.init(allocator, .{}, progress.element()));
     }
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     var framerate: u64 = 60;

examples/elements/radio-button.zig

@@ -32,7 +32,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -51,7 +51,7 @@ pub fn main() !void {
     try container.append(try .init(allocator, .{}, radiobutton.element()));
     try container.append(try App.Container.init(allocator, .{ .rectangle = .{ .fill = .black } }, button.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/elements/scrollable.zig

@@ -65,7 +65,7 @@ pub fn main() !void {
     }
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -151,7 +151,7 @@ pub fn main() !void {
     var scrollable_bottom: App.Scrollable = .init(bottom_box, .enabled(.white, true));
     try container.append(try App.Container.init(allocator, .{}, scrollable_bottom.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/elements/selection.zig

@@ -32,7 +32,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -52,7 +52,7 @@ pub fn main() !void {
     defer container.deinit();
     try container.append(try .init(allocator, .{}, selection.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/errors.zig

@@ -97,7 +97,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -116,7 +116,7 @@ pub fn main() !void {
     try container.append(try App.Container.init(allocator, .{}, info_text.element()));
     try container.append(try App.Container.init(allocator, .{}, error_notification.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     while (true) {

examples/layouts/grid.zig

@@ -35,7 +35,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -69,7 +69,7 @@ pub fn main() !void {
     }
     defer container.deinit(); // also de-initializes the children
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/layouts/horizontal.zig

@@ -35,7 +35,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -61,7 +61,7 @@ pub fn main() !void {
     }, .{}));
     defer container.deinit(); // also de-initializes the children
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/layouts/mixed.zig

@@ -35,7 +35,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -77,7 +77,7 @@ pub fn main() !void {
     }
     defer container.deinit(); // also de-initializes the children
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/layouts/vertical.zig

@@ -35,7 +35,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -60,7 +60,7 @@ pub fn main() !void {
     }, .{}));
     defer container.deinit(); // also de-initializes the children
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

examples/styles/palette.zig

@@ -32,7 +32,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -58,7 +58,7 @@ pub fn main() !void {
     var scrollable: App.Scrollable = .init(box, .disabled);
     try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     while (true) {

examples/styles/text.zig

@@ -178,7 +178,7 @@ pub fn main() !void {
 
     const allocator = gpa.allocator();
 
-    var app: App = .init(.{}, .{});
+    var app: App = .init(allocator, .{}, .{});
     var renderer = zterm.Renderer.Buffered.init(allocator);
     defer renderer.deinit();
 
@@ -209,7 +209,7 @@ pub fn main() !void {
     }, text_styles.element()), .enabled(.white, true));
     try container.append(try App.Container.init(allocator, .{}, scrollable.element()));
 
-    try app.start();
+    try app.start(.full);
     defer app.stop() catch |err| log.err("Failed to stop application: {any}", .{err});
 
     // event loop

src/app.zig

@@ -17,13 +17,14 @@
 ///   );
 ///   // later on create an `App` instance and start the event loop
 ///   var app: App = .init(io, .{}); // provide instance of the `std.Io` and `App` model that shall be used
-///   try app.start();
+///   try app.start(.full);
 ///   defer app.stop() catch unreachable; // does not clean-up the resources used in the model
 /// ```
 pub fn App(comptime M: type, comptime E: type) type {
     if (!isStruct(M)) @compileError("Provided model `M` for `App(comptime M: type, comptime E: type)` is not of type `struct`");
     if (!isTaggedUnion(E)) @compileError("Provided user event `E` for `App(comptime M: type, comptime E: type)` is not of type `union(enum)`.");
     return struct {
+        gpa: Allocator,
         io: std.Io,
         model: Model,
         queue: Queue,
@@ -71,8 +72,9 @@ pub fn App(comptime M: type, comptime E: type) type {
             this.postEvent(.resize);
         }
 
-        pub fn init(io: std.Io, model: Model) @This() {
+        pub fn init(gpa: Allocator, io: std.Io, model: Model) @This() {
             return .{
+                .gpa = gpa,
                 .io = io,
                 .model = model,
                 .queue = .{},
@@ -158,7 +160,7 @@ pub fn App(comptime M: type, comptime E: type) type {
             // thread to read user inputs
             var buf: [512]u8 = undefined;
             // NOTE set the `NONBLOCK` option for the stdin file, such that reading is not blocking!
-            {
+            if (this.config.rawMode) {
                 // TODO is there a better way to do this through the `std.Io` interface?
                 var fl_flags = posix.fcntl(posix.STDIN_FILENO, posix.F.GETFL, 0) catch |err| switch (err) {
                     error.FileBusy => unreachable,
@@ -178,10 +180,13 @@ pub fn App(comptime M: type, comptime E: type) type {
                     else => |e| return e,
                 };
             }
+
+            var remaining_bytes: usize = 0;
+            var lines: std.ArrayList(u8) = .empty;
+            defer lines.deinit(this.gpa);
+
             while (true) {
                 this.quit_event.timedWait(20 * std.time.ns_per_ms) catch {
-                    var remaining_bytes: usize = 0;
-
                     // non-blocking read
                     const read_bytes = terminal.read(buf[remaining_bytes..]) catch |err| switch (err) {
                         error.WouldBlock => {
@@ -191,6 +196,13 @@ pub fn App(comptime M: type, comptime E: type) type {
                         },
                         else => return err,
                     } + remaining_bytes;
+                    remaining_bytes = 0;
+
+                    if (read_bytes == 0) {
+                        // received <EOF>
+                        this.postEvent(.cancel);
+                        continue;
+                    }
 
                     // escape key presses
                     if (buf[0] == 0x1b and read_bytes > 1) {
@@ -431,6 +443,7 @@ pub fn App(comptime M: type, comptime E: type) type {
                             },
                         }
                     } else {
+                        if (this.config.rawMode) {
                             const b = buf[0];
                             const key: Key = switch (b) {
                                 0x00 => .{ .cp = '@', .mod = .{ .ctrl = true } },
@@ -448,17 +461,31 @@ pub fn App(comptime M: type, comptime E: type) type {
                                     var len = read_bytes;
                                     while (!std.unicode.utf8ValidateSlice(buf[0..len])) len -= 1;
                                     remaining_bytes = read_bytes - len;
-                                if (this.config.rawMode) {
                                     var iter: std.unicode.Utf8Iterator = .{ .bytes = buf[0..len], .i = 0 };
                                     while (iter.nextCodepoint()) |cp| this.postEvent(.{ .key = .{ .cp = cp } });
-                                    continue;
-                                } else {
-                                    this.postEvent(.{ .line = buf[0..len] });
-                                    continue;
+                                    if (remaining_bytes > 0) {
+                                        @memmove(buf[0..remaining_bytes], buf[len .. len + remaining_bytes]);
                                     }
+                                    continue; // this switch block does not return a `Key` we continue with loop
                                 },
                             };
                             this.postEvent(.{ .key = key });
+                        } else {
+                            var len = read_bytes;
+                            while (!std.unicode.utf8ValidateSlice(buf[0..len])) len -= 1;
+                            remaining_bytes = read_bytes - len;
+                            try lines.appendSlice(this.gpa, buf[0..len]);
+                            if (remaining_bytes > 0) {
+                                @memmove(buf[0..remaining_bytes], buf[len .. len + remaining_bytes]);
+                            } else {
+                                if (read_bytes != 512 and buf[len - 1] == '\n') this.postEvent(.{ .line = try lines.toOwnedSlice(this.gpa) });
+                                // NOTE line did not end with `\n` but with EOF, meaning the user canceled
+                                if (read_bytes != 512 and buf[len - 1] != '\n') {
+                                    lines.clearRetainingCapacity();
+                                    this.postEvent(.cancel);
+                                }
+                            }
+                        }
                     }
                     continue;
                 };
@@ -509,6 +536,7 @@ const mem = std.mem;
 const fmt = std.fmt;
 const posix = std.posix;
 const Thread = std.Thread;
+const Allocator = mem.Allocator;
 const assert = std.debug.assert;
 const event = @import("event.zig");
 const input = @import("input.zig");

src/container.zig

@@ -764,23 +764,31 @@ pub fn Container(Model: type, Event: type) type {
 
             const sides = this.properties.border.sides;
             switch (layout.direction) {
-                .horizontal => {
+                .vertical => {
                     if (sides.top) {
-                        available -|= 1;
                         remainder -|= 1;
                     }
                     if (sides.bottom) {
-                        available -|= 1;
                         remainder -|= 1;
                     }
-                },
-                .vertical => {
                     if (sides.left) {
                         available -|= 1;
-                        remainder -|= 1;
                     }
                     if (sides.right) {
                         available -|= 1;
+                    }
+                },
+                .horizontal => {
+                    if (sides.top) {
+                        available -|= 1;
+                    }
+                    if (sides.bottom) {
+                        available -|= 1;
+                    }
+                    if (sides.left) {
+                        remainder -|= 1;
+                    }
+                    if (sides.right) {
                         remainder -|= 1;
                     }
                 },
@@ -815,7 +823,7 @@ pub fn Container(Model: type, Event: type) type {
                     .horizontal => if (child.properties.size.grow == .vertical or child.properties.size.grow == .vertical_only or child.properties.size.grow == .both) {
                         child.size.y = available;
                     },
-                    .vertical => if (child.properties.size.grow == .horizontal or child.properties.size.grow == .vertical_only or child.properties.size.grow == .both) {
+                    .vertical => if (child.properties.size.grow == .horizontal or child.properties.size.grow == .horizontal_only or child.properties.size.grow == .both) {
                         child.size.x = available;
                     },
                 }
@@ -862,23 +870,23 @@ pub fn Container(Model: type, Event: type) type {
                     };
                     if (child.properties.size.grow != .fixed and child_size == smallest_size) {
                         switch (layout.direction) {
-                            .horizontal => if (child.properties.size.grow != .vertical) {
+                            .horizontal => if (child.properties.size.grow != .vertical and child.properties.size.grow != .vertical_only) {
                                 child.size.x += size_to_correct;
                                 remainder -|= size_to_correct;
                             },
-                            .vertical => if (child.properties.size.grow != .horizontal) {
+                            .vertical => if (child.properties.size.grow != .horizontal and child.properties.size.grow != .horizontal_only) {
                                 child.size.y += size_to_correct;
                                 remainder -|= size_to_correct;
                             },
                         }
                         if (overflow > 0) {
                             switch (layout.direction) {
-                                .horizontal => if (child.properties.size.grow != .vertical) {
+                                .horizontal => if (child.properties.size.grow != .vertical and child.properties.size.grow != .vertical_only) {
                                     child.size.x += 1;
                                     overflow -|= 1;
                                     remainder -|= 1;
                                 },
-                                .vertical => if (child.properties.size.grow != .horizontal) {
+                                .vertical => if (child.properties.size.grow != .horizontal and child.properties.size.grow != .horizontal_only) {
                                     child.size.y += 1;
                                     overflow -|= 1;
                                     remainder -|= 1;

src/event.zig

@@ -8,6 +8,11 @@ pub const SystemEvent = union(enum) {
     init,
     /// Quit event to signify the end of the event loop (rendering should stop afterwards)
     quit,
+    /// Cancel event to signify that the user provided an EOF
+    ///
+    /// Usually this event is only triggered by the system in *non raw mode*
+    /// renderings otherwise the corresponding `.key` event would be fired instead.
+    cancel,
     /// Resize event to signify that the application should re-draw to resize
     ///
     /// Usually no `Container` nor `Element` should act on that event, as it
@@ -23,7 +28,10 @@ pub const SystemEvent = union(enum) {
         /// associated error message
         msg: []const u8,
     },
-    /// Input line event received in non *raw mode* (instead of individual `key` events)
+    /// Input line event received in *non raw mode* (instead of individual `key` events)
+    ///
+    /// This event contains the entire line until the ending newline character
+    /// (which is included in the payload of this event).
     line: []const u8,
     /// Input key event received from the user
     key: Key,

src/render.zig

@@ -158,6 +158,16 @@ pub const Direct = struct {
         try terminal.clearScreen();
     }
 
+    pub fn writeCtrlDWithNewline(this: *@This()) !void {
+        _ = this;
+        _ = try terminal.write("^D\n");
+    }
+
+    pub fn writeNewline(this: *@This()) !void {
+        _ = this;
+        _ = try terminal.write("\n");
+    }
+
     /// Render provided cells at size (anchor and dimension) into the *screen*.
     pub fn render(this: *@This(), comptime Container: type, container: *Container, comptime Model: type, model: *const Model) !void {
         const size: Point = container.size;