feat(layout): Framing and Padding implementation

The implementation of `Layout.Framing` however does not use the renderer
and instead writes directly to the terminal (which it should not and
instead use the renderer). The example has been enhanced with both usage
of `Layout.Framing` and `Layout.Padding` Layouts to showcase the
`Layout` implementations.

src/layout/Padding.zig

@@ -24,11 +24,13 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
         size: terminal.Size = undefined,
         element: Element = undefined,
         events: Events = undefined,
+        padding: u16 = undefined,
 
-        pub fn init(allocator: std.mem.Allocator, element: Element) @This() {
+        pub fn init(allocator: std.mem.Allocator, padding: u16, element: Element) @This() {
             return .{
                 .element = element,
                 .events = Events.init(allocator),
+                .padding = padding,
             };
         }
 
@@ -50,8 +52,23 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
             switch (event) {
                 .resize => |size| {
                     this.size = size;
+                    log.debug("Event .resize: {{ .anchor = {{ .col = {d}, .row = {d} }}, .cols = {d}, .rows = {d} }}", .{
+                        size.anchor.col,
+                        size.anchor.row,
+                        size.cols,
+                        size.rows,
+                    });
+                    const sub_event: Event = .{
+                        .resize = .{
+                            .anchor = .{
+                                .col = size.anchor.col + this.padding,
+                                .row = size.anchor.row + this.padding,
+                            },
+                            .cols = size.cols -| this.padding -| this.padding,
+                            .rows = size.rows -| this.padding -| this.padding,
+                        },
+                    };
                     // adjust size according to the containing elements
-                    const sub_event = event;
                     switch ((&this.element).*) {
                         .layout => |*layout| {
                             const events = try layout.handle(sub_event);
@@ -82,15 +99,12 @@ pub fn Layout(comptime Event: type, comptime Renderer: type) type {
         }
 
         pub fn render(this: *@This(), renderer: Renderer) !void {
-            // TODO: padding contents accordingly
             switch ((&this.element).*) {
                 .layout => |*layout| {
                     try layout.render(renderer);
                 },
                 .widget => |*widget| {
-                    const content = try widget.content();
-                    // TODO: use renderer
-                    _ = try terminal.write(content);
+                    try widget.render(renderer);
                 },
             }
         }