fix(renderer): integer overflows

README.md

@@ -101,14 +101,29 @@ the primary use-case for myself to create this library in the first place.
     - [ ] horizontal
     - [ ] scroll bar(s)
 
-For the correct rendering of the corresponding layout's that extend the view
-port I need to figure out a way to render what would be visible at a given
-frame. I would need to separate the between the Layout size -> i.e. the size the
-container uses in virtual space and the real screen!
+Decorations should respect the layout and the viewport accordingly. This means
+that scrollbars are always visible (except there is no need to have a scrollbar)
+irrelevant depending on the size of the content. The rectangle apply to all
+cells of the content (and may be overwritten by child elements contents).
+The border of an element should be around independent of the scrolling of the
+contents, just like padding.
 
-Here the sizing options are relevant!
 - *fit*:   adjust virtual space of container by the size of its children (i.e. a
            container needs to be able to get the necessary size of its children)
 - *grow*:  use as much space as available (what exactly would be the difference
            between this option and *fit*?)
 - *fixed*: use exactly as much cells (in the specified direction)
+
+- *center*: elements should have their anchor be placed accordingly to their
+            size and the viewport size.
+- *left*:   the anchor remains at zero (relative to the location of the
+            container on the screen) -> similar to the current implementation!
+- *right*:  the anchor is fixed to the right side (i.e. size of the contents -
+            size of the viewport)
+
+### Input
+
+How is the user input handled in the containers? Should there be active
+containers? Some input may happen for a specific container (i.e. when using
+mouse input). How would I handle scrolling for outer and inner elements of
+a container?

src/render.zig

@@ -37,17 +37,17 @@ pub const Buffered = struct {
         defer this.size = size;
 
         if (!this.created) {
-            this.screen = this.allocator.alloc(Cell, size.cols * size.rows) catch @panic("render.zig: Out of memory.");
+            this.screen = this.allocator.alloc(Cell, @as(usize, size.cols) * @as(usize, size.rows)) catch @panic("render.zig: Out of memory.");
             @memset(this.screen, .{});
-            this.virtual_screen = this.allocator.alloc(Cell, size.cols * size.rows) catch @panic("render.zig: Out of memory.");
+            this.virtual_screen = this.allocator.alloc(Cell, @as(usize, size.cols) * @as(usize, size.rows)) catch @panic("render.zig: Out of memory.");
             @memset(this.virtual_screen, .{});
             this.created = true;
         } else {
             this.allocator.free(this.screen);
-            this.screen = this.allocator.alloc(Cell, size.cols * size.rows) catch @panic("render.zig: Out of memory.");
+            this.screen = this.allocator.alloc(Cell, @as(usize, size.cols) * @as(usize, size.rows)) catch @panic("render.zig: Out of memory.");
             @memset(this.screen, .{});
             this.allocator.free(this.virtual_screen);
-            this.virtual_screen = this.allocator.alloc(Cell, size.cols * size.rows) catch @panic("render.zig: Out of memory.");
+            this.virtual_screen = this.allocator.alloc(Cell, @as(usize, size.cols) * @as(usize, size.rows)) catch @panic("render.zig: Out of memory.");
             @memset(this.virtual_screen, .{});
         }
         try this.clear();
@@ -69,7 +69,7 @@ pub const Buffered = struct {
 
         var idx: usize = 0;
         var vs = this.virtual_screen;
-        const anchor = (viewport.anchor.row * this.size.cols) + viewport.anchor.col;
+        const anchor: usize = (@as(usize, viewport.anchor.row) * @as(usize, this.size.cols)) + @as(usize, viewport.anchor.col);
 
         blk: for (0..viewport.rows) |row| {
             for (0..viewport.cols) |col| {