add(container/rectangle): add content creation

build.zig

@@ -17,7 +17,6 @@ pub fn build(b: *std.Build) void {
     });
     lib.addImport("code_point", zg.module("code_point"));
 
-    // TODO: examples (not yet available)
     const container = b.addExecutable(.{
         .name = "container",
         .root_source_file = b.path("examples/container.zig"),

examples/container.zig

@@ -27,7 +27,7 @@ pub fn main() !void {
         .border = .{
             .color = .blue,
             .sides = .{
-                .top = false,
+                .left = false,
                 .bottom = false,
             },
             .corners = .rounded,
@@ -37,6 +37,7 @@ pub fn main() !void {
     });
     try container.append(try App.Container.init(allocator, .{
         .border = .{ .color = .light_blue, .corners = .squared },
+        .rectangle = .{ .fill = .blue },
     }));
     try container.append(try App.Container.init(allocator, .{
         .border = .{ .color = .light_blue, .corners = .squared },

src/container.zig

@@ -48,7 +48,6 @@ pub const Border = struct {
         };
         std.debug.assert(frame.len == 6);
 
-        // TODO: respect sides configuration
         // render top and bottom border
         for (0..size.cols) |col| {
             const last_row = (size.rows - 1) * size.cols;
@@ -163,12 +162,22 @@ pub const Rectangle = struct {
     /// `Color` to use to fill the `Rectangle` with
     /// NOTE: used as background color when rendering! such that it renders the
     /// children accordingly without removing the coloring of the `Rectangle`
-    fill: Color = .black,
+    fill: Color = .default,
     /// Configure the corners of the `Rectangle`
     corners: enum(u1) {
         squared,
         rounded,
     } = .squared,
+
+    // NOTE: caller owns `cells` slice and ensures that `cells.len == size.cols * size.rows`
+    pub fn contents(this: @This(), cells: []Cell, size: Size) void {
+        std.debug.assert(cells.len == size.cols * size.rows);
+        for (0..size.rows) |row| {
+            for (0..size.cols) |col| {
+                cells[(row * size.cols) + col].style.bg = this.fill;
+            }
+        }
+    }
 };
 
 /// Scroll configuration struct
@@ -374,6 +383,7 @@ pub fn Container(comptime Event: type) type {
             const cells = try this.allocator.alloc(Cell, this.size.cols * this.size.rows);
             @memset(cells, .{}); // reset all cells
             this.properties.border.contents(cells, this.size, this.properties.layout, @truncate(this.elements.items.len));
+            this.properties.rectangle.contents(cells, this.size);
             return cells;
         }
     };

src/style.zig

@@ -66,10 +66,6 @@ pub fn value(this: Style, writer: anytype, cp: u21) !void {
     try std.fmt.format(writer, "m", .{});
     // content
     try std.fmt.format(writer, "{s}", .{buffer});
-    // TODO: is it necessary to reset the graphics mode afterwards to ensure
-    // that everything rendered behind is still as expected (without any
-    // side-effects)?
-    // try writer.print("\x1b[0m", .{});
 }
 
 // TODO: implement helper functions for terminal capabilities: