diff --git a/.github/workflows/deno.yml b/.github/workflows/deno.yml
index 849eb9c..079cf7d 100644
--- a/.github/workflows/deno.yml
+++ b/.github/workflows/deno.yml
@@ -42,7 +42,7 @@ jobs:
           deno run -A --no-check https://deno.land/x/anzu@1.0.0/src/cli.ts \
            -i ./ "/.+\.ts/" \
            -e "deps.ts" \
-           -l "// Copyright 2022 Im-Beast. All rights reserved. MIT license." \
+           -l "// Copyright 2023 Im-Beast. All rights reserved. MIT license." \
            -p
 
       - name: Push changes
diff --git a/LICENSE.md b/LICENSE.md
index 01ffce4..8eaaf77 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-## Copyright © 2021-2022 Im-Beast
+## Copyright © 2021-2023 Im-Beast
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
 documentation files (the “Software”), to deal in the Software without restriction, including without limitation the
diff --git a/README.md b/README.md
index fac1afa..7776294 100644
--- a/README.md
+++ b/README.md
@@ -22,37 +22,33 @@ Simple [Deno](https://github.com/denoland/deno/) module that allows easy creatio
 
 ## 🖥️ OS Support
 
-| Operating system     | Linux | macOS | Windows¹<sup>,</sup>²   | WSL  |
-| -------------------- | ----- | ----- | ----------------------- | ---- |
-| Base                 | ✔️    | ✔️    | ✔️                      | ✔️   |
-| Keyboard support     | ✔️    | ✔️    | ✔️                      | ✔️   |
-| Mouse support        | ✔️    | ✔️    | ❌                       | ✔️   |
-| Required permissions | none  | none  | --unstable --allow-ffi³ | none |
+| Operating system     | Linux | macOS | Windows¹<sup>,</sup>² | WSL  |
+| -------------------- | ----- | ----- | --------------------- | ---- |
+| Base                 | ✔️     | ✔️     | ✔️                     | ✔️    |
+| Keyboard support     | ✔️     | ✔️     | ✔️                     | ✔️    |
+| Mouse support        | ✔️     | ✔️     | ✔️                     | ✔️    |
+| Required permissions | none  | none  | none                  | none |
 
 ¹ - [WSL](https://docs.microsoft.com/en-us/windows/wsl/install) is a heavily recommended way to run Tui on Windows, if
 you need to stick to clean Windows, please consider using [Windows Terminal](https://github.com/Microsoft/Terminal).
+Windows without WSL is slower at writing to the console, so performance might be worse on it.
 
 ² - If unicode characters are displayed incorrectly type `chcp 65001` into the console to change active console code
 page to use UTF-8 encoding.
 
-³ - Related to [this issue](https://github.com/denoland/deno/issues/5945), in order to recognize all pressed keys
-(including arrows etc.) on Windows Tui uses `C:\Windows\System32\msvcrt.dll` to read pressed keys via `_getch` function,
-see code [here](./src/key_reader.ts?plain=1#L116).
-
 ## 🎓 Get started
 
+#### Replace {version} with relevant module versions
+
 1. Create Tui instance
 
 ```ts
-import { crayon } from "https://deno.land/x/crayon@3.3.2/mod.ts";
+import { crayon } from "https://deno.land/x/crayon@version/mod.ts";
 import { Canvas, Tui } from "https://deno.land/x/tui@version/mod.ts";
 
 const tui = new Tui({
-  style: crayon.bgBlue,
-  canvas: new Canvas({
-    refreshRate: 1000 / 60, // Run in 60FPS
-    stdout: Deno.stdout,
-  }),
+  style: crayon.bgBlack, // Make background black
+  refreshRate: 1000 / 60, // Run in 60FPS
 });
 
 tui.dispatch(); // Close Tui on CTRL+C
@@ -61,11 +57,10 @@ tui.dispatch(); // Close Tui on CTRL+C
 2. Enable interaction using keyboard and mouse
 
 ```ts
-import { handleKeyboardControls, handleKeypresses, handleMouseControls } from "https://deno.land/x/tui@version/mod.ts";
-
+import { handleInput, handleKeyboardControls, handleMouseControls } from "https://deno.land/x/tui@version/mod.ts";
 ...
 
-handleKeypresses(tui);
+handleInput(tui);
 handleMouseControls(tui);
 handleKeyboardControls(tui);
 ```
@@ -73,31 +68,50 @@ handleKeyboardControls(tui);
 3. Add some components
 
 ```ts
-import { ButtonComponent } from "https://deno.land/x/tui@version/src/components/mod.ts";
+import { Button } from "https://deno.land/x/tui@version/src/components/mod.ts";
 
 ...
 
-let value = 0;
-const button = new ButtonComponent({
-  tui,
+// Create signal to make number automatically reactive
+const number = new Signal(0);
+
+const button = new Button({
+  parent: tui,
+  zIndex: 0,
+  label: {
+    text: new Computed(() => number.value.toString()), // cast number to string
+  },
   theme: {
     base: crayon.bgRed,
     focused: crayon.bgLightRed,
     active: crayon.bgYellow,
   },
   rectangle: {
-    column: 15,
-    row: 3,
+    column: 1,
+    row: 1,
     height: 5,
     width: 10,
   },
-  label: String(value),
 });
 
-button.on("stateChange", () => {
-  if (button.state !== "active") return;
-  button.label = String(++value);
-})
+// Subscribe for button state changes
+button.state.subscribe((state) => {
+  // If button is active (pressed) make number bigger by one
+  if (state === "active")  {
+    ++number.value;
+  }
+});
+
+// Listen to mousePress event
+button.on("mousePress", ({ drag, movementX, movementY }) => {
+  if (!drag) return;
+
+  // Use peek() to get signal's value when it happens outside of Signal/Computed/Effect
+  const rectangle = button.rectangle.peek();
+  // Move button by how much mouse has moved while dragging it
+  rectangle.column += movementX;
+  rectangle.row += movementY;
+});
 ```
 
 4. Run Tui
@@ -115,7 +129,7 @@ tui.run();
 <br /> Code should be well document and easy to follow what's going on.
 
 This project follows [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) spec.
-<br /> If your pull request's code could introduce understandability trouble, please add comments to it.
+<br /> If your pull request's code can be hard to understand, please add comments to it.
 
 ## 📝 Licensing
 
diff --git a/deno.jsonc b/deno.jsonc
index 4a20779..0dcc80c 100644
--- a/deno.jsonc
+++ b/deno.jsonc
@@ -1,15 +1,11 @@
 {
   "tasks": {
-    "demo": "deno run --watch --unstable -A ./examples/demo.ts"
+    "demo": "deno run --watch --allow-hrtime ./examples/demo.ts"
   },
   "fmt": {
     "options": {
       "lineWidth": 120
     }
   },
-  "lint": {
-    "rules": {
-      "exclude": ["no-control-regex"]
-    }
-  }
+  "lock": false
 }
diff --git a/deno.lock b/deno.lock
deleted file mode 100644
index 25022bd..0000000
--- a/deno.lock
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "version": "2",
-  "remote": {
-    "https://deno.land/std@0.155.0/fmt/colors.ts": "ff7dc9c9f33a72bd48bc24b21bbc1b4545d8494a431f17894dbc5fe92a938fc4",
-    "https://deno.land/std@0.155.0/testing/_diff.ts": "a23e7fc2b4d8daa3e158fa06856bedf5334ce2a2831e8bf9e509717f455adb2c",
-    "https://deno.land/std@0.155.0/testing/_format.ts": "cd11136e1797791045e639e9f0f4640d5b4166148796cad37e6ef75f7d7f3832",
-    "https://deno.land/std@0.155.0/testing/asserts.ts": "ac295f7fd22a7af107580e2475402a8c386cb1bf18bf837ae266ac0665786026"
-  }
-}
diff --git a/examples/bouncing_box.ts b/examples/bouncing_box.ts
deleted file mode 100644
index 1f9173c..0000000
--- a/examples/bouncing_box.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-// Simple example showing box bouncing similiar to famous DVD Screensaver
-
-import { crayon } from "https://deno.land/x/crayon@3.3.2/mod.ts";
-
-import { Tui } from "../mod.ts";
-import { BoxComponent } from "../src/components/box.ts";
-
-const tui = new Tui({
-  style: crayon.bgBlack.white,
-});
-
-tui.dispatch();
-
-let hue = 0;
-const box = new BoxComponent({
-  tui,
-  theme: {
-    base: (text: string) => crayon.bgHsl(++hue % 360, 50, 50)(text),
-  },
-  rectangle: {
-    column: 1,
-    row: 1,
-    width: 6,
-    height: 3,
-  },
-});
-
-const moveDirection = {
-  x: 1,
-  y: 0.5,
-};
-
-tui.run();
-
-tui.on("update", () => {
-  // Frequency of this type being dispatched is based on `tui.updateRate`
-  // If you would like to support lower or higher update rates you should calculate delta time and base box movement on that
-  const canvasSize = tui.canvas.size;
-
-  if (box.rectangle.row + box.rectangle.height >= canvasSize.rows || box.rectangle.row <= 0) {
-    moveDirection.y *= -1;
-  }
-
-  if (box.rectangle.column + box.rectangle.width >= canvasSize.columns || box.rectangle.column <= 0) {
-    moveDirection.x *= -1;
-  }
-
-  box.rectangle.column += moveDirection.x;
-  box.rectangle.row += moveDirection.y;
-});
diff --git a/examples/demo.ts b/examples/demo.ts
index c6792ee..90f0c4a 100644
--- a/examples/demo.ts
+++ b/examples/demo.ts
@@ -1,49 +1,49 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-// Demo showcasing every component
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { crayon } from "https://deno.land/x/crayon@3.3.3/mod.ts";
 
-import { crayon } from "https://deno.land/x/crayon@3.3.2/mod.ts";
-
-import { handleKeyboardControls, handleKeypresses } from "../src/keyboard.ts";
-import { handleMouseControls } from "../src/mouse.ts";
 import { Tui } from "../src/tui.ts";
-import { Canvas } from "../src/canvas.ts";
-
-import { BoxComponent } from "../src/components/box.ts";
-import { ButtonComponent } from "../src/components/button.ts";
-import { CheckboxComponent } from "../src/components/checkbox.ts";
-import { ComboboxComponent } from "../src/components/combobox.ts";
-import { FrameComponent } from "../src/components/frame.ts";
-import { ProgressBarComponent } from "../src/components/progress_bar.ts";
-import { SliderComponent } from "../src/components/slider.ts";
-import { TextboxComponent } from "../src/components/textbox.ts";
-import { Theme } from "../src/theme.ts";
-import { LabelComponent } from "../src/components/label.ts";
-import { ScrollableViewComponent } from "../src/components/scrollable_view.ts";
-import { TableComponent } from "../src/components/table.ts";
+import { handleInput } from "../src/input.ts";
+import { handleKeyboardControls, handleMouseControls } from "../src/controls.ts";
+
+import { Box } from "../src/components/box.ts";
+import { Text } from "../src/components/text.ts";
+import { Frame } from "../src/components/frame.ts";
+import { Input } from "../src/components/input.ts";
+import { Label } from "../src/components/label.ts";
+import { Table } from "../src/components/table.ts";
+import { Button } from "../src/components/button.ts";
+import { Slider } from "../src/components/slider.ts";
+import { CheckBox } from "../src/components/checkbox.ts";
+import { ComboBox } from "../src/components/combobox.ts";
+import { ProgressBar } from "../src/components/progressbar.ts";
 
-const baseTheme: Theme = {
-  base: crayon.bgLightBlue,
-  focused: crayon.bgCyan,
-  active: crayon.bgBlue,
-};
+import { Theme } from "../src/theme.ts";
+import { View } from "../src/view.ts";
+import { Component } from "../mod.ts";
+import { TextBox } from "../src/components/textbox.ts";
+import { Computed } from "../src/signals.ts";
+import { Signal } from "../src/signals.ts";
 
-const tuiStyle = crayon.bgBlack.white;
 const tui = new Tui({
-  style: tuiStyle,
-  canvas: new Canvas({
-    refreshRate: 1000 / 60,
-    stdout: Deno.stdout,
-  }),
+  style: crayon.bgBlack,
+  refreshRate: 1000 / 60,
 });
 
-tui.dispatch();
-
-handleKeypresses(tui);
+handleInput(tui);
 handleMouseControls(tui);
 handleKeyboardControls(tui);
+tui.dispatch();
+tui.run();
+
+const baseTheme: Theme = {
+  base: crayon.bgLightBlue,
+  focused: crayon.bgCyan,
+  active: crayon.bgBlue,
+  disabled: crayon.bgLightBlack.black,
+};
 
-new BoxComponent({
-  tui,
+new Box({
+  parent: tui,
   theme: baseTheme,
   rectangle: {
     column: 2,
@@ -51,10 +51,11 @@ new BoxComponent({
     height: 5,
     width: 10,
   },
+  zIndex: 0,
 });
 
-new ButtonComponent({
-  tui,
+new Button({
+  parent: tui,
   theme: baseTheme,
   rectangle: {
     column: 15,
@@ -62,10 +63,11 @@ new ButtonComponent({
     height: 5,
     width: 10,
   },
+  zIndex: 0,
 });
 
-new CheckboxComponent({
-  tui,
+new CheckBox({
+  parent: tui,
   theme: baseTheme,
   rectangle: {
     column: 28,
@@ -73,10 +75,12 @@ new CheckboxComponent({
     height: 1,
     width: 1,
   },
+  checked: false,
+  zIndex: 0,
 });
 
-new ComboboxComponent({
-  tui,
+new ComboBox({
+  parent: tui,
   theme: baseTheme,
   rectangle: {
     column: 38,
@@ -84,12 +88,13 @@ new ComboboxComponent({
     height: 1,
     width: 7,
   },
-  options: ["one", "two", "three", "four"],
+  items: ["one", "two", "three", "four"],
+  placeholder: "numer",
   zIndex: 2,
 });
 
-new ComboboxComponent({
-  tui,
+new ComboBox({
+  parent: tui,
   theme: baseTheme,
   rectangle: {
     column: 38,
@@ -97,25 +102,30 @@ new ComboboxComponent({
     height: 1,
     width: 7,
   },
-  options: ["one", "two", "three", "four"],
-  label: "numer",
+  items: ["one", "two", "three", "four"],
+  placeholder: "numer",
   zIndex: 1,
 });
 
-const progressBar1 = new ProgressBarComponent({
-  tui,
-  theme: {
-    ...baseTheme,
-    progress: {
-      base: crayon.bgLightBlue.green,
-      focused: crayon.bgCyan.lightGreen,
-      active: crayon.bgBlue.lightYellow,
-    },
+const progress = new Signal(0);
+let progressDir = 1;
+const progressBarTheme = {
+  ...baseTheme,
+  progress: {
+    base: crayon.bgLightBlue.green,
+    focused: crayon.bgCyan.lightGreen,
+    active: crayon.bgBlue.lightYellow,
   },
-  value: 50,
+};
+
+new ProgressBar({
+  parent: tui,
+  orientation: "horizontal",
+  direction: "normal",
+  theme: progressBarTheme,
+  value: progress,
   min: 0,
   max: 100,
-  direction: "horizontal",
   smooth: true,
   rectangle: {
     column: 48,
@@ -123,39 +133,35 @@ const progressBar1 = new ProgressBarComponent({
     row: 3,
     width: 10,
   },
+  zIndex: 0,
 });
 
-new LabelComponent({
-  tui,
-  align: {
-    horizontal: "center",
-    vertical: "center",
-  },
+new ProgressBar({
+  parent: tui,
+  orientation: "horizontal",
+  direction: "reversed",
+  theme: progressBarTheme,
+  value: progress,
+  min: 0,
+  max: 100,
+  smooth: true,
   rectangle: {
-    column: 75,
-    row: 3,
-    // Automatically adjust size
-    height: -1,
-    width: -1,
+    column: 48,
+    height: 2,
+    row: 6,
+    width: 10,
   },
-  theme: { base: tuiStyle },
-  value: "Centered text\nThat automatically adjusts its rectangle size\n!@#!\nSo cool\nWOW",
+  zIndex: 0,
 });
 
-const progressBar2 = new ProgressBarComponent({
-  tui,
-  theme: {
-    ...baseTheme,
-    progress: {
-      base: crayon.bgLightBlue.green,
-      focused: crayon.bgCyan.lightGreen,
-      active: crayon.bgBlue.lightYellow,
-    },
-  },
-  value: 75,
+new ProgressBar({
+  parent: tui,
+  orientation: "vertical",
+  direction: "normal",
+  theme: progressBarTheme,
+  value: progress,
   min: 0,
   max: 100,
-  direction: "vertical",
   smooth: true,
   rectangle: {
     column: 48,
@@ -163,97 +169,123 @@ const progressBar2 = new ProgressBarComponent({
     row: 10,
     width: 2,
   },
+  zIndex: 0,
 });
 
-new SliderComponent({
-  tui,
-  theme: {
-    ...baseTheme,
-    thumb: {
-      base: crayon.bgMagenta,
-    },
+new ProgressBar({
+  parent: tui,
+  orientation: "vertical",
+  direction: "reversed",
+  theme: progressBarTheme,
+  value: progress,
+  min: 0,
+  max: 100,
+  smooth: true,
+  rectangle: {
+    column: 52,
+    height: 5,
+    row: 10,
+    width: 2,
   },
+  zIndex: 0,
+});
+
+new Label({
+  parent: tui,
+  align: {
+    horizontal: "center",
+    vertical: "center",
+  },
+  rectangle: {
+    column: 75,
+    row: 3,
+    width: 20,
+  },
+  theme: { base: tui.style },
+  text: "Centered text\nThat automatically adjusts its rectangle size\n!@#!\nSo cool\nWOW",
+  zIndex: 0,
+});
+
+const sliderTheme = {
+  ...baseTheme,
+  thumb: {
+    base: crayon.bgMagenta,
+  },
+};
+
+new Slider({
+  parent: tui,
+  orientation: "horizontal",
+  theme: sliderTheme,
+  adjustThumbSize: true,
   value: 5,
   min: 1,
   max: 10,
   step: 1,
-  direction: "horizontal",
   rectangle: {
     column: 61,
     height: 2,
     row: 3,
     width: 10,
   },
+  zIndex: 0,
 });
 
-new SliderComponent({
-  tui,
-  theme: {
-    ...baseTheme,
-    thumb: {
-      base: crayon.bgMagenta,
-    },
-  },
+new Slider({
+  parent: tui,
+  orientation: "vertical",
+  theme: sliderTheme,
+  adjustThumbSize: true,
   value: 5,
   min: 1,
   max: 10,
   step: 1,
-  direction: "vertical",
   rectangle: {
     column: 61,
     height: 5,
     row: 10,
     width: 2,
   },
+  zIndex: 0,
 });
 
-new TextboxComponent({
-  tui,
-  theme: baseTheme,
-  multiline: false,
+const cursorBaseTheme = {
+  ...baseTheme,
+  cursor: { base: crayon.invert },
+};
+
+new Input({
+  parent: tui,
+  placeholder: "type smth",
+  theme: cursorBaseTheme,
   rectangle: {
     column: 2,
     row: 11,
+    width: 14,
     height: 1,
-    width: 10,
   },
-  value: "hi",
+  zIndex: 0,
 });
 
-new TextboxComponent({
-  tui,
-  theme: {
-    ...baseTheme,
-    placeholder: crayon.lightBlack,
-  },
-  multiline: false,
+new Input({
+  parent: tui,
+  placeholder: "smth secret",
+  theme: cursorBaseTheme,
+  password: true,
   rectangle: {
     column: 2,
-    row: 15,
-    height: 1,
-    width: 10,
-  },
-  placeholder: "example",
-});
-
-new TextboxComponent({
-  tui,
-  theme: baseTheme,
-  multiline: false,
-  hidden: true,
-  rectangle: {
-    column: 15,
-    row: 11,
+    row: 13,
+    width: 14,
     height: 1,
-    width: 10,
   },
-  value: "hi!",
+  zIndex: 0,
 });
 
-new TextboxComponent({
-  tui,
+new TextBox({
+  parent: tui,
+  zIndex: 0,
   theme: {
-    ...baseTheme,
+    ...cursorBaseTheme,
     lineNumbers: {
       base: crayon.bgBlue.white,
     },
@@ -261,24 +293,21 @@ new TextboxComponent({
       base: crayon.bgLightBlue,
     },
   },
-  multiline: true,
   lineNumbering: true,
   lineHighlighting: true,
-  hidden: false,
   rectangle: {
     column: 29,
     row: 11,
     height: 5,
     width: 12,
   },
-  value: "hello!\nwhats up?",
 });
 
-new TableComponent({
-  tui,
+new Table({
+  parent: tui,
   theme: {
     base: crayon.bgBlack.white,
-    frame: { focused: crayon.bgBlack.bold },
+    frame: { base: crayon.bgBlack },
     header: { base: crayon.bgBlack.bold.lightBlue },
     selectedRow: {
       base: crayon.bold.bgBlue.white,
@@ -291,7 +320,10 @@ new TableComponent({
     height: 8,
     row: 11,
   },
-  headers: ["ID", "Name"],
+  headers: [
+    { title: "ID" },
+    { title: "Name" },
+  ],
   data: [
     ["0", "Thomas Jeronimo"],
     ["1", "Jeremy Wanker"],
@@ -301,135 +333,192 @@ new TableComponent({
     ["5", "Bernardo Robertson"],
     ["6", "Hershel Grant"],
   ],
-  framePieces: "rounded",
+  charMap: "rounded",
+  zIndex: 0,
 });
 
-const scrollView = new ScrollableViewComponent({
-  tui,
-  theme: {
-    base: crayon.bgLightBlack.lightWhite,
-    scrollbar: {
-      vertical: {
-        thumb: baseTheme.active,
-        track: baseTheme.base,
-      },
-      horizontal: {
-        thumb: baseTheme.active,
-        track: baseTheme.base,
-      },
-      corner: baseTheme.base,
-    },
-  },
+const view = new View({
   rectangle: {
-    column: 100,
-    row: 11,
-    width: 20,
-    height: 8,
+    column: 125,
+    row: 1,
+    width: 10,
+    height: 10,
+  },
+  maxOffset: {
+    columns: 0,
+    rows: 20,
   },
 });
 
-new LabelComponent({
-  tui,
-  view: scrollView,
-  theme: { base: scrollView.style },
-  align: {
-    horizontal: "center",
-    vertical: "top",
+const viewBackground = new Box({
+  parent: tui,
+  rectangle: view.rectangle,
+  theme: {
+    base: crayon.bgLightBlack,
   },
+  zIndex: 1,
+});
+// @ts-ignore-
+viewBackground.NOFRAME = true;
+
+const viewScrollbar = new Slider({
+  parent: tui,
+  min: 0,
+  max: view.maxOffset.rows,
+  value: 0,
+  step: 1,
+  orientation: "vertical",
+  adjustThumbSize: true,
   rectangle: {
-    column: 4,
-    row: 2,
-    height: -1,
-    width: -1,
+    column: view.rectangle.column + view.rectangle.width - 1,
+    row: view.rectangle.row,
+    height: view.rectangle.height,
+    width: 1,
+  },
+  theme: {
+    thumb: { base: crayon.bgRed },
+    base: crayon.bgLightBlue,
   },
-  value: "Scroll down",
+  zIndex: 2,
 });
+// @ts-ignore-
+viewScrollbar.NOFRAME = true;
 
-new LabelComponent({
-  tui,
-  view: scrollView,
-  theme: { base: scrollView.style },
-  align: {
-    horizontal: "center",
-    vertical: "top",
+viewScrollbar.value.subscribe((value) => {
+  view.offset.rows = value;
+});
+
+const box = new Box({
+  parent: tui,
+  view,
+  rectangle: {
+    column: 2,
+    row: 1,
+    width: 4,
+    height: 2,
   },
+  theme: {
+    base: crayon.bgRed,
+  },
+  zIndex: 2,
+});
+
+box.interact = () => {
+  box.state.value = "focused";
+};
+
+box.on("mousePress", ({ drag, movementX, movementY }) => {
+  if (!drag) return;
+  const rectangle = box.rectangle.value;
+  rectangle.column += movementX;
+  rectangle.row += movementY;
+});
+
+const moveButton = new Button({
+  parent: tui,
   rectangle: {
-    column: 4,
-    row: 12,
-    height: -1,
-    width: -1,
+    column: 2,
+    row: 15,
+    width: 6,
+    height: 2,
   },
-  value: "Scroll right",
+  label: { text: "move\nme" },
+  theme: {
+    base: crayon.bgGreen,
+    focused: crayon.bgLightGreen,
+    active: crayon.bgMagenta,
+  },
+  zIndex: 2,
 });
 
-new ButtonComponent({
-  tui,
-  view: scrollView,
-  theme: baseTheme,
+moveButton.on("mousePress", (event) => {
+  if (!event.drag) return;
+  const rectangle = moveButton.rectangle.value;
+  rectangle.column += event.movementX;
+  rectangle.row += event.movementY;
+});
+
+new Text({
+  parent: tui,
+  view,
   rectangle: {
-    column: 30,
-    row: 12,
-    height: 1,
-    width: 7,
+    column: 2,
+    row: 13,
   },
-  label: "Hello!!",
+  theme: baseTheme,
+  text: "wopa",
+  zIndex: 2,
 });
 
 // Generate frames and labels for every component
-queueMicrotask(() => {
+tui.canvas.on("render", () => {
+  const components: Component[] = [];
+  const tuiStyleTheme = { base: tui.style };
+
   for (const component of tui.components) {
-    const { rectangle, view } = component;
-    if (!rectangle) continue;
-
-    const name = component.constructor.name.replace("Component", "");
-    const theme = {
-      base: component.view?.style ?? tuiStyle,
-    };
-
-    new LabelComponent({
-      tui,
-      view,
-      theme,
-      align: {
-        horizontal: "left",
-        vertical: "top",
-      },
-      rectangle: {
-        column: rectangle.column - 1,
-        row: rectangle.row - 2,
-        height: -1,
-        width: -1,
-      },
-      value: name,
-    });
-
-    new FrameComponent({
-      tui,
-      view,
-      component,
-      framePieces: "rounded",
-      theme: {
-        base: tuiStyle,
-        focused: tuiStyle.bold,
-      },
-    });
+    if (
+      // @ts-expect-error NOFRAME
+      component.view.peek() || component.parent !== tui || component.NOFRAME ||
+      component === performanceStats
+    ) {
+      continue;
+    }
+
+    const name = component.constructor.name;
+
+    const { column, row } = component.rectangle.peek();
+    components.push(
+      new Text({
+        parent: tui,
+        theme: tuiStyleTheme,
+        visible: false,
+        rectangle: {
+          column: column - 1,
+          row: row - 2,
+        },
+        text: name,
+        zIndex: component.zIndex,
+      }),
+      new Frame({
+        parent: tui,
+        rectangle: component.rectangle,
+        visible: false,
+        charMap: "rounded",
+        theme: tuiStyleTheme,
+        zIndex: component.zIndex,
+      }),
+    );
   }
-});
 
-let direction = 1;
-let avgFps = 60;
+  tui.on("keyPress", ({ ctrl, meta, shift, key }) => {
+    if (!ctrl || key !== "f" || meta || shift) return;
+    for (const component of components) {
+      component.visible.value = !component.visible.value;
+    }
+  });
+}, true);
 
-tui.run();
+const fps = new Signal(60);
+let lastRender = 0;
 
-tui.on("update", () => {
-  avgFps = ((avgFps * 99) + tui.canvas.fps) / 100;
-  const fpsText = `${avgFps.toFixed(2)} FPS`;
-  tui.canvas.draw(0, 0, baseTheme.base(fpsText));
+const performanceStats = new Text({
+  parent: tui,
+  rectangle: { column: 0, row: 0 },
+  theme: baseTheme,
+  text: new Computed(() =>
+    `\
+FPS: ${fps.value.toFixed(2)}\
+ | Components: ${tui.components.size}\
+ | Drawn objects: ${tui.canvas.drawnObjects.length}\
+ | Press CTRL+F to toggle Frame/Label visibility`
+  ),
+  zIndex: 0,
+});
 
-  if (progressBar1.value === progressBar1.max || progressBar1.value === progressBar1.min) {
-    direction *= -1;
-  }
+tui.canvas.on("render", () => {
+  fps.value = 1000 / (performance.now() - lastRender);
+  lastRender = performance.now();
 
-  progressBar1.value += direction;
-  progressBar2.value += direction;
+  progress.value += progressDir;
+  if (progress.peek() >= 100 || progress.peek() <= 0) progressDir *= -1;
 });
diff --git a/examples/draggable_box.ts b/examples/draggable_box.ts
deleted file mode 100644
index 28c03ee..0000000
--- a/examples/draggable_box.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-// Example of creating your own component by extending provided ones
-
-import { crayon } from "https://deno.land/x/crayon@3.3.2/mod.ts";
-
-import { handleKeypresses, handleMouseControls, PlaceComponentOptions, Tui } from "../mod.ts";
-import { BoxComponent } from "../src/components/box.ts";
-
-const tui = new Tui({
-  style: crayon.bgBlack.white,
-});
-
-tui.dispatch();
-
-handleKeypresses(tui);
-handleMouseControls(tui);
-
-class DraggableBoxComponent extends BoxComponent {
-  constructor(options: PlaceComponentOptions) {
-    super(options);
-
-    tui.on("mousePress", ({ drag, x, y }) => {
-      if (!drag || this.state === "base") return;
-
-      this.rectangle.column = x;
-      this.rectangle.row = y;
-    });
-  }
-
-  // Make component interactable
-  interact(): void {
-    this.state = "focused";
-  }
-}
-
-new DraggableBoxComponent({
-  tui,
-  theme: {
-    base: crayon.bgBlue,
-    focused: crayon.bgLightBlue,
-  },
-  rectangle: {
-    column: 1,
-    row: 1,
-    width: 6,
-    height: 3,
-  },
-});
-
-new DraggableBoxComponent({
-  tui,
-  theme: {
-    base: crayon.bgYellow,
-    focused: crayon.bgLightYellow,
-  },
-  rectangle: {
-    column: 1,
-    row: 1,
-    width: 6,
-    height: 3,
-  },
-  zIndex: 1,
-});
-
-new DraggableBoxComponent({
-  tui,
-  theme: {
-    base: crayon.bgMagenta,
-    focused: crayon.bgLightMagenta,
-  },
-  rectangle: {
-    column: 1,
-    row: 1,
-    width: 6,
-    height: 3,
-  },
-  zIndex: 2,
-});
-
-new DraggableBoxComponent({
-  tui,
-  theme: {
-    base: crayon.bgGreen,
-    focused: crayon.bgLightGreen,
-  },
-  rectangle: {
-    column: 1,
-    row: 1,
-    width: 6,
-    height: 3,
-  },
-  zIndex: 3,
-});
-
-tui.run();
diff --git a/mod.ts b/mod.ts
index d23c80a..444cdc5 100644
--- a/mod.ts
+++ b/mod.ts
@@ -1,11 +1,14 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-export * from "./src/canvas.ts";
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 export * from "./src/component.ts";
+export * from "./src/controls.ts";
 export * from "./src/event_emitter.ts";
-export * from "./src/key_reader.ts";
-export * from "./src/keyboard.ts";
-export * from "./src/mouse.ts";
+export * from "./src/input.ts";
 export * from "./src/theme.ts";
 export * from "./src/tui.ts";
 export * from "./src/types.ts";
+
+export * from "./src/canvas/mod.ts";
+
 export * from "./src/utils/mod.ts";
+
+export * from "./src/input_reader/mod.ts";
diff --git a/src/canvas.ts b/src/canvas.ts
deleted file mode 100644
index ed9a1b9..0000000
--- a/src/canvas.ts
+++ /dev/null
@@ -1,232 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { EmitterEvent, EventEmitter } from "./event_emitter.ts";
-import { Timing } from "./types.ts";
-
-import { sleep } from "./utils/async.ts";
-import { textWidth } from "./utils/strings.ts";
-import { moveCursor } from "./utils/ansi_codes.ts";
-import { fits, fitsInRectangle } from "./utils/numbers.ts";
-import { isFullWidth, stripStyles, UNICODE_CHAR_REGEXP } from "./utils/strings.ts";
-
-import type { ConsoleSize, Rectangle, Stdout } from "./types.ts";
-import { Deffered } from "./utils/deffered.ts";
-
-const textEncoder = new TextEncoder();
-
-/** Interface defining object that {Canvas}'s constructor can interpret */
-export interface CanvasOptions {
-  /** How often canvas tries to find differences in its frameBuffer and render */
-  refreshRate: number;
-  /** Stdout to which canvas will render frameBuffer */
-  stdout: Stdout;
-}
-
-/** Map that contains events that {Canvas} can dispatch */
-export type CanvasEventMap = {
-  render: EmitterEvent<[Timing]>;
-  frame: EmitterEvent<[Timing]>;
-  resize: EmitterEvent<[ConsoleSize]>;
-};
-
-/** Canvas implementation that can be drawn onto and then rendered on terminal screen */
-export class Canvas extends EventEmitter<CanvasEventMap> {
-  size: ConsoleSize;
-  refreshRate: number;
-  stdout: Stdout;
-  frameBuffer: string[][];
-  previousFrameBuffer: this["frameBuffer"];
-  lastRender: number;
-  fps: number;
-
-  constructor(options: CanvasOptions) {
-    super();
-
-    this.refreshRate = options.refreshRate;
-    this.stdout = options.stdout;
-    this.frameBuffer = [];
-    this.previousFrameBuffer = [];
-    this.fps = 0;
-    this.lastRender = 0;
-    this.size = Deno.consoleSize();
-
-    switch (Deno.build.os) {
-      case "windows":
-        this.on("render", (timing) => {
-          if (timing !== Timing.Pre) return;
-          this.resizeCanvas(Deno.consoleSize());
-        });
-        break;
-      default:
-        Deno.addSignalListener("SIGWINCH", () => {
-          this.resizeCanvas(Deno.consoleSize());
-        });
-        break;
-    }
-  }
-
-  /**
-   * Change `size` property, then clear `frameBuffer` and `previousFrameBuffer` to force re-render all of the canvas
-   * If `size` parameter matches canvas's `size` property then nothing happens
-   */
-  resizeCanvas(size: ConsoleSize): void {
-    const { columns, rows } = this.size;
-    if (size.columns === columns && size.rows === rows) return;
-
-    this.size = size;
-    this.frameBuffer = [];
-    this.previousFrameBuffer = [];
-    this.emit("resize", size);
-  }
-
-  /**
-   * Render value starting on column and row on canvas
-   *
-   * When rectangle is given:
-   * If particular part of the rendering doesn't fit within rectangle boundaries then it's not drawn
-   */
-  draw(column: number, row: number, value: string, rectangle?: Rectangle): void {
-    if (typeof value !== "string" || value.length === 0 || typeof column !== "number" || typeof row !== "number") {
-      return;
-    }
-
-    column = ~~column;
-    row = ~~row;
-
-    const stripped = stripStyles(value);
-
-    if (stripped.length === 0) return;
-
-    const frameBufferRow = this.frameBuffer[row] ||= [];
-
-    if (stripped.length === 1) {
-      if (!fitsInRectangle(column, row, rectangle)) return;
-
-      frameBufferRow[column] = value;
-
-      if (frameBufferRow[column + 1] === undefined) {
-        const style = value.replace(stripped, "").replaceAll("\x1b[0m", "");
-        frameBufferRow[column + 1] = `${style} \x1b[0m`;
-      }
-      return;
-    }
-
-    const resetStyleIndex = value.indexOf("\x1b[0m");
-    const noResetStyle = resetStyleIndex === -1 ? "" : value.substring(0, resetStyleIndex);
-    const borderIndex = noResetStyle.lastIndexOf("m", noResetStyle.length - stripped.length);
-
-    const distinctStyles = (
-      noResetStyle.substring(0, borderIndex) +
-      noResetStyle.substring(borderIndex).replace(stripped, "")
-    ).split("\x1b[0m").filter((v) => v.length > 0);
-
-    if (distinctStyles.length > 1) {
-      for (const [i, style] of distinctStyles.entries()) {
-        const previousStyle = distinctStyles?.[i - 1];
-        this.draw(column + textWidth(previousStyle), row, style, rectangle);
-      }
-      return;
-    }
-
-    const style = distinctStyles[0] ?? "";
-
-    if (value.includes("\n")) {
-      for (const [i, line] of value.split("\n").entries()) {
-        this.draw(column, row + i, style + line + "\x1b[0m", rectangle);
-      }
-      return;
-    }
-
-    const realCharacters = stripped.match(UNICODE_CHAR_REGEXP);
-    if (!realCharacters?.length) return;
-
-    if (rectangle && !fits(row, rectangle.row, rectangle.row + rectangle.height)) return;
-
-    let offset = 0;
-    for (const character of realCharacters) {
-      const offsetColumn = column + offset;
-
-      if (rectangle && !fits(offsetColumn, rectangle.column, rectangle.column + rectangle.width)) {
-        offset += isFullWidth(character) ? 2 : 1;
-        continue;
-      }
-
-      frameBufferRow[offsetColumn] = `${style}${character}\x1b[0m`;
-      if (isFullWidth(character)) {
-        delete frameBufferRow[offsetColumn + 1];
-        ++offset;
-      } else if (offsetColumn + 1 < frameBufferRow.length) {
-        frameBufferRow[offsetColumn + 1] ??= `${style} \x1b[0m`;
-      }
-
-      ++offset;
-    }
-  }
-
-  /**
-   * Checks for individual row and column changes in canvas, then renders just the changes.
-   * In the way yield and emit proper events.
-   */
-  renderFrame(frame: string[][]): void {
-    this.emit("render", Timing.Pre);
-
-    const { previousFrameBuffer, size } = this;
-
-    rows:
-    for (let r = 0; r < frame.length; ++r) {
-      if (r >= size.rows) break rows;
-
-      const previousRow = previousFrameBuffer[r];
-      const row = this.frameBuffer[r];
-
-      if (JSON.stringify(previousRow) === JSON.stringify(row)) {
-        continue rows;
-      }
-
-      columns:
-      for (let c = 0; c < row.length; ++c) {
-        if (c >= size.columns) continue rows;
-
-        const column = row[c];
-        if (previousRow?.[c] === column) continue columns;
-
-        Deno.writeSync(
-          this.stdout.rid,
-          textEncoder.encode(moveCursor(r, c) + column),
-        );
-      }
-    }
-
-    this.lastRender = performance.now();
-    this.previousFrameBuffer = structuredClone(frame);
-
-    this.emit("render", Timing.Post);
-  }
-
-  /**
-   * Runs a loop in which it checks whether frameBuffer has changed (anything new has been drawn).
-   * If so, run `renderFrame()` with current frame buffer and in the way yield and emit proper events.
-   * On each iteration it sleeps for adjusted `refreshRate` time.
-   */
-  render(): () => void {
-    const deffered = new Deffered<void>();
-
-    (async () => {
-      while (deffered.state === "pending") {
-        let deltaTime = performance.now();
-        this.fps = 1000 / (performance.now() - this.lastRender);
-
-        if (this.lastRender === 0 || JSON.stringify(this.frameBuffer) !== JSON.stringify(this.previousFrameBuffer)) {
-          this.emit("frame", Timing.Pre);
-          this.renderFrame(this.frameBuffer);
-          this.emit("frame", Timing.Post);
-        }
-
-        deltaTime -= performance.now();
-        await sleep(this.refreshRate + deltaTime);
-      }
-    })();
-
-    return deffered.resolve;
-  }
-}
diff --git a/src/canvas/box.ts b/src/canvas/box.ts
new file mode 100644
index 0000000..02405e6
--- /dev/null
+++ b/src/canvas/box.ts
@@ -0,0 +1,71 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { DrawObject, DrawObjectOptions } from "./draw_object.ts";
+import { BaseSignal } from "../signals.ts";
+
+import type { Rectangle } from "../types.ts";
+import { signalify } from "../utils/signals.ts";
+
+export interface BoxObjectOptions extends DrawObjectOptions {
+  rectangle: Rectangle | BaseSignal<Rectangle>;
+  filler?: string | BaseSignal<string>;
+}
+
+export class BoxObject extends DrawObject<"box"> {
+  filler: BaseSignal<string>;
+
+  constructor(options: BoxObjectOptions) {
+    super("box", options);
+
+    this.rectangle = signalify(options.rectangle);
+    this.filler = signalify(options.filler ?? " ");
+  }
+
+  rerender(): void {
+    const { canvas, rerenderCells, omitCells } = this;
+    const { frameBuffer, rerenderQueue } = canvas;
+    const { rows, columns } = canvas.size.peek();
+
+    const rectangle = this.rectangle.peek();
+    const style = this.style.peek();
+    const filler = this.filler.peek();
+
+    let rowRange = Math.min(rectangle.row + rectangle.height, rows);
+    let columnRange = Math.min(rectangle.column + rectangle.width, columns);
+
+    const viewRectangle = this.view.peek()?.rectangle;
+    if (viewRectangle) {
+      rowRange = Math.min(rowRange, viewRectangle.row + viewRectangle.height);
+      columnRange = Math.min(columnRange, viewRectangle.column + viewRectangle.width);
+    }
+
+    for (let row = rectangle.row; row < rerenderCells.length; ++row) {
+      if (!(row in rerenderCells)) continue;
+      else if (row >= rowRange) continue;
+
+      const rerenderColumns = rerenderCells[row];
+      if (!rerenderColumns) break;
+
+      const omitColumns = omitCells[row];
+
+      if (omitColumns?.size === rectangle.width) {
+        omitColumns?.clear();
+        continue;
+      }
+
+      const rowBuffer = frameBuffer[row] ??= [];
+      const rerenderQueueRow = rerenderQueue[row] ??= new Set();
+
+      for (const column of rerenderColumns) {
+        if (omitColumns?.has(column) || column < rectangle.column || column >= columnRange) {
+          continue;
+        }
+
+        rowBuffer[column] = style(filler);
+        rerenderQueueRow.add(column);
+      }
+
+      rerenderColumns.clear();
+      omitColumns?.clear();
+    }
+  }
+}
diff --git a/src/canvas/canvas.ts b/src/canvas/canvas.ts
new file mode 100644
index 0000000..6bf76a5
--- /dev/null
+++ b/src/canvas/canvas.ts
@@ -0,0 +1,177 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { EmitterEvent, EventEmitter } from "../event_emitter.ts";
+
+import { moveCursor } from "../utils/ansi_codes.ts";
+import { SortedArray } from "../utils/sorted_array.ts";
+import { rectangleIntersection } from "../utils/numbers.ts";
+
+import type { ConsoleSize, Stdout } from "../types.ts";
+import { DrawObject } from "./draw_object.ts";
+import { BaseSignal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+const textEncoder = new TextEncoder();
+const textBuffer = new Uint8Array(384 ** 2);
+
+/** Interface defining object that {Canvas}'s constructor can interpret */
+export interface CanvasOptions {
+  /** Stdout to which canvas will render frameBuffer */
+  stdout: Stdout;
+  size: ConsoleSize | BaseSignal<ConsoleSize>;
+}
+
+/** Map that contains events that {Canvas} can dispatch */
+export type CanvasEventMap = {
+  render: EmitterEvent<[]>;
+};
+
+export class Canvas extends EventEmitter<CanvasEventMap> {
+  stdout: Stdout;
+  size: BaseSignal<ConsoleSize>;
+  frameBuffer: string[][];
+  resize: boolean;
+  rerenderQueue: Set<number>[];
+  drawnObjects: SortedArray<DrawObject>;
+
+  constructor(options: CanvasOptions) {
+    super();
+
+    this.resize = true;
+    this.frameBuffer = [];
+    this.rerenderQueue = [];
+    this.stdout = options.stdout;
+    this.size = signalify(options.size, { deepObserve: true });
+    this.drawnObjects = new SortedArray((a, b) => a.zIndex.peek() - b.zIndex.peek() || a.id - b.id);
+  }
+
+  updateIntersections(object: DrawObject): void {
+    if (object.outOfBounds) return;
+
+    const { omitCells, objectsUnder } = object;
+
+    const zIndex = object.zIndex.peek();
+    const rectangle = object.rectangle.peek();
+
+    let objectsUnderPointer = 0;
+
+    for (const object2 of this.drawnObjects) {
+      if (object === object2 || object2.outOfBounds) continue;
+
+      const zIndex2 = object2.zIndex.peek();
+      if (zIndex2 < zIndex || (zIndex2 === zIndex && object2.id < object.id)) {
+        objectsUnder[objectsUnderPointer++] = object2;
+        continue;
+      }
+
+      const intersection = rectangleIntersection(rectangle, object2.rectangle.peek(), true);
+      if (!intersection) continue;
+
+      const rowRange = intersection.row + intersection.height;
+      const columnRange = intersection.column + intersection.width;
+      for (let row = intersection.row; row < rowRange; ++row) {
+        const omitColumns = omitCells[row] ??= new Set();
+
+        for (let column = intersection.column; column < columnRange; ++column) {
+          omitColumns.add(column);
+        }
+      }
+    }
+
+    if (objectsUnder.length !== objectsUnderPointer) {
+      objectsUnder.splice(objectsUnderPointer);
+    }
+  }
+
+  render(): void {
+    const { frameBuffer, drawnObjects, resize } = this;
+
+    if (resize) this.resize = false;
+
+    // TODO: Recalculate object intersections when their rectangle changes
+    for (const object of drawnObjects) {
+      object.outOfBounds = false;
+
+      if (resize) {
+        object.rendered = false;
+      }
+
+      object.update();
+
+      // DrawObjects might set outOfBounds in update()
+      if (!object.outOfBounds) {
+        object.updateOutOfBounds();
+      }
+
+      if (object.outOfBounds) {
+        continue;
+      }
+
+      object.updateMovement();
+      object.updatePreviousRectangle();
+    }
+
+    for (const object of drawnObjects) {
+      if (object.outOfBounds || (object.rendered && object.rerenderCells.length === 0)) {
+        continue;
+      }
+
+      this.updateIntersections(object);
+
+      if (object.rendered) {
+        object.rerender();
+      } else {
+        object.render();
+        object.rendered = true;
+      }
+    }
+
+    let drawSequence = "";
+    let lastRow = -1;
+    let lastColumn = -1;
+
+    const { rid } = this.stdout;
+    const { rerenderQueue } = this;
+
+    for (let row = 0; row < rerenderQueue.length; ++row) {
+      const columns = rerenderQueue[row];
+      if (!columns?.size) continue;
+      const rowBuffer = frameBuffer[row] ??= [];
+
+      for (const column of columns) {
+        if (row !== lastRow || column !== lastColumn + 1) {
+          drawSequence += moveCursor(row, column);
+        }
+
+        const cell = rowBuffer[column];
+        if (drawSequence.length + cell.length > 1024) {
+          Deno.writeSync(
+            rid,
+            textBuffer.subarray(
+              0,
+              textEncoder.encodeInto(moveCursor(lastRow, lastColumn) + drawSequence, textBuffer).written,
+            ),
+          );
+          drawSequence = moveCursor(row, column);
+        }
+
+        drawSequence += cell;
+
+        lastRow = row;
+        lastColumn = column;
+      }
+
+      columns.clear();
+    }
+
+    // Complete final loop draw sequence
+    Deno.writeSync(
+      rid,
+      textBuffer.subarray(
+        0,
+        textEncoder.encodeInto(moveCursor(lastRow, lastColumn) + drawSequence, textBuffer).written,
+      ),
+    );
+
+    this.emit("render");
+  }
+}
diff --git a/src/canvas/draw_object.ts b/src/canvas/draw_object.ts
new file mode 100644
index 0000000..4999a0e
--- /dev/null
+++ b/src/canvas/draw_object.ts
@@ -0,0 +1,214 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { fitsInRectangle, rectangleEquals, rectangleIntersection } from "../utils/numbers.ts";
+
+import type { Style } from "../theme.ts";
+import type { Canvas } from "./canvas.ts";
+import type { Offset, Rectangle } from "../types.ts";
+import { View } from "../view.ts";
+import { BaseSignal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+export interface DrawObjectOptions {
+  canvas: Canvas;
+
+  omitCells?: number[];
+  omitCellsPointer?: number;
+
+  view?: View | BaseSignal<View | undefined>;
+  style: Style | BaseSignal<Style>;
+  zIndex: number | BaseSignal<number>;
+}
+
+let id = 0;
+export class DrawObject<Type extends string = string> {
+  id: number;
+  type: Type;
+
+  canvas: Canvas;
+
+  style: BaseSignal<Style>;
+  zIndex: BaseSignal<number>;
+
+  view: BaseSignal<View | undefined>;
+  viewOffset: Offset;
+
+  rectangle!: BaseSignal<Rectangle>;
+  previousRectangle?: Rectangle;
+
+  objectsUnder: DrawObject[];
+  objectsUnderPointer: number;
+
+  omitCells: Set<number>[];
+  rerenderCells: Set<number>[];
+
+  rendered: boolean;
+  outOfBounds: boolean;
+
+  constructor(type: Type, options: DrawObjectOptions) {
+    this.id = id++;
+    this.type = type;
+
+    this.canvas = options.canvas;
+
+    this.viewOffset = { columns: 0, rows: 0 };
+
+    this.omitCells = [];
+    this.rerenderCells = [];
+
+    this.objectsUnder = [];
+    this.objectsUnderPointer = 0;
+
+    this.rendered = false;
+    this.outOfBounds = false;
+
+    this.view = signalify(options.view);
+    this.zIndex = signalify(options.zIndex);
+    this.style = signalify(options.style);
+    this.style.subscribe(() => {
+      this.rendered = false;
+    });
+  }
+
+  draw(): void {
+    this.rendered = false;
+    this.canvas.drawnObjects.push(this);
+  }
+
+  erase(): void {
+    this.canvas.drawnObjects.remove(this);
+
+    const { objectsUnder } = this;
+    const { column, row, width, height } = this.rectangle.peek();
+
+    const rowRange = row + height;
+    const columnRange = column + width;
+    for (let r = row; r < rowRange; ++r) {
+      for (let c = column; c < columnRange; ++c) {
+        for (const objectUnder of objectsUnder) {
+          objectUnder.queueRerender(r, c);
+        }
+      }
+    }
+  }
+
+  queueRerender(row: number, column: number): void {
+    const viewRectangle = this.view.peek()?.rectangle;
+    if (row < 0 || column < 0) return;
+    const { columns, rows } = this.canvas.size.peek();
+    if (row >= rows || column >= columns) return;
+
+    if (
+      viewRectangle && (
+        row < viewRectangle.row || column < viewRectangle.column ||
+        row >= viewRectangle.row + viewRectangle.height || column >= viewRectangle.column + viewRectangle.width
+      )
+    ) return;
+
+    (this.rerenderCells[row] ??= new Set()).add(column);
+  }
+
+  updatePreviousRectangle(): void {
+    const { previousRectangle } = this;
+    const { column, row, width, height } = this.rectangle.peek();
+
+    if (!previousRectangle) {
+      this.previousRectangle = { column, row, width, height };
+    } else {
+      previousRectangle.column = column;
+      previousRectangle.row = row;
+      previousRectangle.width = width;
+      previousRectangle.height = height;
+    }
+  }
+
+  updateMovement(): void {
+    const { previousRectangle, objectsUnder } = this;
+    const rectangle = this.rectangle.peek();
+
+    // Rerender cells that changed because objects position changed
+    if (!previousRectangle || rectangleEquals(rectangle, previousRectangle)) return;
+
+    const intersection = rectangleIntersection(rectangle, previousRectangle, true);
+
+    const previousRowRange = previousRectangle.row + previousRectangle.height;
+    const previousColumnRange = previousRectangle.column + previousRectangle.width;
+    for (let r = previousRectangle.row; r < previousRowRange; ++r) {
+      for (let c = previousRectangle.column; c < previousColumnRange; ++c) {
+        if (intersection && fitsInRectangle(c, r, intersection)) {
+          continue;
+        }
+
+        for (const objectUnder of objectsUnder) {
+          objectUnder.queueRerender(r, c);
+        }
+      }
+    }
+
+    const rowRange = rectangle.row + rectangle.height;
+    const columnRange = rectangle.column + rectangle.width;
+    for (let r = rectangle.row; r < rowRange; ++r) {
+      for (let c = rectangle.column; c < columnRange; ++c) {
+        if (intersection && fitsInRectangle(c, r, intersection)) {
+          continue;
+        }
+
+        for (const objectUnder of objectsUnder) {
+          objectUnder.queueRerender(r, c);
+        }
+
+        this.queueRerender(r, c);
+      }
+    }
+  }
+
+  updateOutOfBounds(): void {
+    const { columns, rows } = this.canvas.size.peek();
+    const { column, row, width, height } = this.rectangle.peek();
+
+    this.outOfBounds = width === 0 || height === 0 ||
+      column > columns || row > rows ||
+      column + width < 0 || row + height < 0;
+  }
+
+  update(): void {
+    const rectangle = this.rectangle.peek();
+    const { column, row, width, height } = rectangle;
+
+    const view = this.view.peek();
+    if (!view) return;
+
+    const viewRectangle = view.rectangle;
+    const { offset } = view;
+    const { viewOffset } = this;
+
+    rectangle.column += viewRectangle.column - offset.columns - viewOffset.columns;
+    rectangle.row += viewRectangle.row - offset.rows - viewOffset.rows;
+
+    viewOffset.columns = viewRectangle.column - offset.columns;
+    viewOffset.rows = viewRectangle.row - offset.rows;
+
+    if (
+      column > viewRectangle.column + viewRectangle.width ||
+      row > viewRectangle.row + viewRectangle.height ||
+      column + width < viewRectangle.column || row + height < viewRectangle.row
+    ) {
+      this.updateMovement();
+      this.outOfBounds = true;
+    }
+  }
+
+  render(): void {
+    const { column, row, width, height } = this.rectangle.peek();
+
+    const rowRange = row + height;
+    const columnRange = column + width;
+    for (let r = row; r < rowRange; ++r) {
+      for (let c = column; c < columnRange; ++c) {
+        this.queueRerender(r, c);
+      }
+    }
+    this.rerender();
+  }
+
+  rerender(): void {}
+}
diff --git a/src/canvas/mod.ts b/src/canvas/mod.ts
new file mode 100644
index 0000000..c25041f
--- /dev/null
+++ b/src/canvas/mod.ts
@@ -0,0 +1,5 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+export * from "./box.ts";
+export * from "./text.ts";
+export * from "./canvas.ts";
+export * from "./draw_object.ts";
diff --git a/src/canvas/text.ts b/src/canvas/text.ts
new file mode 100644
index 0000000..5d6d171
--- /dev/null
+++ b/src/canvas/text.ts
@@ -0,0 +1,158 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { DrawObject, DrawObjectOptions } from "./draw_object.ts";
+
+import { textWidth, UNICODE_CHAR_REGEXP } from "../utils/strings.ts";
+import { fitsInRectangle, rectangleEquals, rectangleIntersection } from "../utils/numbers.ts";
+import { BaseSignal, Effect } from "../signals.ts";
+import { Rectangle } from "../types.ts";
+import { signalify } from "../utils/signals.ts";
+
+export type TextRectangle = { column: number; row: number; width?: number };
+
+export interface TextObjectOptions extends DrawObjectOptions {
+  value: string | BaseSignal<string>;
+  overwriteRectangle?: boolean | BaseSignal<boolean>;
+  rectangle: TextRectangle | BaseSignal<TextRectangle>;
+  multiCodePointSupport?: boolean | BaseSignal<boolean>;
+}
+
+export class TextObject extends DrawObject<"text"> {
+  text: BaseSignal<string>;
+  valueChars: string[] | string;
+  overwriteRectangle: BaseSignal<boolean>;
+  multiCodePointSupport: BaseSignal<boolean>;
+
+  constructor(options: TextObjectOptions) {
+    super("text", options);
+
+    this.text = signalify(options.value);
+    this.rectangle = signalify(options.rectangle) as BaseSignal<Rectangle>;
+    this.overwriteRectangle = signalify(options.overwriteRectangle ?? false);
+    this.multiCodePointSupport = signalify(options.multiCodePointSupport ?? false);
+    this.valueChars = this.multiCodePointSupport.value
+      ? this.text.value.match(UNICODE_CHAR_REGEXP) ?? ""
+      : this.text.value;
+
+    new Effect(() => {
+      const _style = this.style.value;
+      const text = this.text.value;
+      const rectangle = this.rectangle.value;
+      const multiCodePointSupport = this.multiCodePointSupport.value;
+      const overwriteRectangle = this.overwriteRectangle.value;
+
+      if (!overwriteRectangle) {
+        rectangle.width = textWidth(text);
+        rectangle.height = 1;
+      }
+
+      const { valueChars: previousValueChars } = this;
+      const valueChars = this.valueChars = multiCodePointSupport ? text.match(UNICODE_CHAR_REGEXP) ?? [] : text;
+
+      const { row, column, width } = rectangle;
+      const barrier = overwriteRectangle
+        ? (width < previousValueChars.length ? width : -1)
+        : (valueChars.length < previousValueChars.length ? valueChars.length : -1);
+
+      for (let c = 0; c < Math.max(valueChars.length, previousValueChars.length); ++c) {
+        if (barrier !== -1 && c >= barrier) {
+          for (const objectUnder of this.objectsUnder) {
+            objectUnder.queueRerender(row, column + c);
+          }
+        } else if (valueChars[c] !== previousValueChars[c]) {
+          this.queueRerender(row, column + c);
+        }
+      }
+    });
+  }
+
+  updateMovement(): void {
+    const { objectsUnder, previousRectangle } = this;
+    const rectangle = this.rectangle.peek();
+
+    // Rerender cells that changed because objects position changed
+    if (!previousRectangle || rectangleEquals(rectangle, previousRectangle)) return;
+
+    const intersection = rectangleIntersection(rectangle, previousRectangle, true);
+
+    const previousRow = previousRectangle.row;
+    const previousColumnRange = previousRectangle.column + previousRectangle.width;
+    for (let column = previousRectangle.column; column < previousColumnRange; ++column) {
+      if (intersection && fitsInRectangle(column, previousRow, intersection)) {
+        continue;
+      }
+
+      for (const objectUnder of objectsUnder) {
+        objectUnder.queueRerender(previousRow, column);
+      }
+    }
+
+    const hasOriginMoved = rectangle.column !== previousRectangle.column || rectangle.row !== previousRectangle.row;
+
+    const { row } = rectangle;
+    const columnRange = rectangle.column + rectangle.width;
+    for (let column = rectangle.column; column < columnRange; ++column) {
+      // When text moves it needs to be rerendered completely because of text continuity
+      if (hasOriginMoved) this.queueRerender(row, column);
+
+      if (intersection && fitsInRectangle(column, row, intersection)) {
+        continue;
+      }
+
+      for (const objectUnder of objectsUnder) {
+        objectUnder.queueRerender(row, column);
+      }
+    }
+  }
+
+  rerender(): void {
+    const { canvas, valueChars, omitCells, rerenderCells } = this;
+
+    const { frameBuffer, rerenderQueue } = canvas;
+    const { columns, rows } = canvas.size.peek();
+
+    const rectangle = this.rectangle.peek();
+    const style = this.style.peek();
+
+    const { row } = rectangle;
+
+    let rowRange = Math.min(row, rows);
+    let columnRange = Math.min(rectangle.column + valueChars.length, columns);
+
+    const viewRectangle = this.view.peek()?.rectangle;
+    if (viewRectangle) {
+      rowRange = Math.min(row, viewRectangle.row + viewRectangle.height);
+      columnRange = Math.min(columnRange, viewRectangle.column + viewRectangle.width);
+    }
+
+    if (row > rowRange) return;
+
+    const rerenderColumns = rerenderCells[row];
+    if (!rerenderColumns) return;
+
+    const omitColumns = omitCells[row];
+    if (omitColumns?.size === valueChars.length) {
+      omitColumns?.clear();
+      return;
+    }
+
+    const rowBuffer = frameBuffer[row] ??= [];
+
+    const rerenderQueueRow = rerenderQueue[row] ??= new Set();
+
+    for (const column of rerenderColumns) {
+      if (
+        column >= columnRange ||
+        column < rectangle.column ||
+        omitColumns?.has(column)
+      ) {
+        continue;
+      }
+
+      rowBuffer[column] = style(valueChars[column - rectangle.column]);
+      rerenderQueueRow.add(column);
+    }
+
+    rerenderColumns.clear();
+    omitColumns?.clear();
+  }
+}
diff --git a/src/component.ts b/src/component.ts
index 4665680..d39f08f 100644
--- a/src/component.ts
+++ b/src/component.ts
@@ -1,196 +1,187 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 import { Tui } from "./tui.ts";
 import { hierarchizeTheme, Style, Theme } from "./theme.ts";
 import { EmitterEvent, EventEmitter } from "./event_emitter.ts";
 
-import type { ViewComponent } from "./components/view.ts";
-import type { KeyPress, MousePress, MultiKeyPress, Rectangle } from "./types.ts";
-import type { EventRecord } from "./event_emitter.ts";
-
-/** Type defining any {Component}, even inherited ones */
-// deno-lint-ignore no-explicit-any
-export type AnyComponent = Component<any>;
+import type { Rectangle } from "./types.ts";
+import { SortedArray } from "./utils/sorted_array.ts";
+import { DrawObject } from "./canvas/draw_object.ts";
+import { View } from "./view.ts";
+import { InputEventRecord } from "./input_reader/mod.ts";
+import { BaseSignal, Computed, Signal } from "./signals.ts";
+import { signalify } from "./utils/signals.ts";
 
-/** Interface defining object that {Component}'s constructor can interpret */
 export interface ComponentOptions {
-  /** Parent tui, used for retrieving canvas and adding event listeners */
-  tui: Tui;
-  /** Component that can manipulate drawing position on the canvas by replacing `tui` element with fake one */
-  view?: ViewComponent;
-  /** Theme defining look of component */
-  theme?: Partial<Theme>;
-  /** Position and size of component */
-  rectangle?: Rectangle;
-  /** Components get rendered based on this value, lower values get rendered first */
-  zIndex?: number;
+  tui?: Tui;
+  theme: Partial<Theme>;
+  parent: Component | Tui;
+  zIndex: number | BaseSignal<number>;
+  visible?: boolean | BaseSignal<boolean>;
+  rectangle: Rectangle | BaseSignal<Rectangle>;
+  view?: View | undefined | BaseSignal<View | undefined>;
 }
 
-/** Interface defining what's accessible in {Component} class */
-export interface ComponentPrivate {
-  theme: Theme;
-  draw(): void;
-  interact(method?: "keyboard" | "mouse"): void;
-  state: ComponentState;
-  zIndex: number;
+export interface Interaction {
+  time: number;
+  method: "keyboard" | "mouse" | undefined;
 }
 
-/** Implementation for {Component} class */
-export type ComponentImplementation = ComponentPrivate;
-
-/** Default EventMap that every component should use */
-export type ComponentEventMap = {
-  stateChange: EmitterEvent<[Component<EventRecord>]>;
-  remove: EmitterEvent<[Component<EventRecord>]>;
-  keyPress: EmitterEvent<[KeyPress]>;
-  multiKeyPress: EmitterEvent<[MultiKeyPress]>;
-  mousePress: EmitterEvent<[MousePress]>;
-};
-
-/** Interactivity states that components should use */
-export type ComponentState =
-  | "focused"
-  | "active"
-  | "base";
-
-/** Base Component that should be used as base for creating other components */
-export class Component<
-  EventMap extends EventRecord = Record<never, never>,
-> extends EventEmitter<EventMap & ComponentEventMap> implements ComponentImplementation {
-  #state: ComponentState;
-  #view?: ViewComponent<EventRecord>;
-  #rectangle?: Rectangle;
+/** Possible states of a component */
+export type ComponentState = keyof Theme;
+
+export class Component extends EventEmitter<
+  { destroy: EmitterEvent<[Component]> } & InputEventRecord
+> {
+  #drawn: boolean;
+  #destroyed: boolean;
+
+  subComponentOf?: Component;
+
+  visible: BaseSignal<boolean>;
+  state: BaseSignal<ComponentState>;
+  view: BaseSignal<View | undefined>;
+  zIndex: BaseSignal<number>;
+  rectangle: BaseSignal<Rectangle>;
+  style: BaseSignal<Style>;
 
   tui: Tui;
   theme: Theme;
-  zIndex: number;
+  parent: Component | Tui;
+  children: SortedArray<Component>;
+  drawnObjects: Record<string, DrawObject | DrawObject[]>;
+  subComponents: Record<string, Component>;
+  lastInteraction: Interaction;
 
   constructor(options: ComponentOptions) {
     super();
 
-    this.#rectangle = options.rectangle;
-    this.theme = hierarchizeTheme(options.theme ?? {});
-    this.zIndex = options.zIndex ?? 0;
-    this.#state = "base";
-    this.tui = options.tui;
-    this.#view = options.view;
-
-    const offKeyPress = this.tui.on("keyPress", (keyPress) => {
-      if (this.#state !== "base") this.emit("keyPress", keyPress);
+    this.#drawn = false;
+    this.#destroyed = false;
+    this.parent = options.parent;
+
+    const { parent } = this;
+    this.tui = options.tui ?? ("tui" in parent ? parent.tui : parent);
+
+    this.parent.children.push(this);
+    this.children = new SortedArray();
+    this.drawnObjects = {};
+    this.subComponents = {};
+
+    this.lastInteraction = {
+      time: -1,
+      method: undefined,
+    };
+
+    this.view = signalify(options.view);
+    this.zIndex = signalify(options.zIndex);
+    this.visible = signalify(options.visible ?? true);
+    this.rectangle = signalify(options.rectangle, { deepObserve: true, watchObjectIndex: true });
+
+    this.visible.subscribe((visible) => {
+      if (this.#destroyed) return;
+
+      if (!this.#drawn && visible) {
+        if (!this.tui.children.includes(this)) return;
+        this.draw();
+      } else {
+        this.changeDrawnObjectVisibility(visible, false);
+      }
+
+      for (const child of this.children) {
+        child.visible.value = visible;
+      }
     });
 
-    const offMultiKeyPress = this.tui.on("multiKeyPress", (multiKeyPress) => {
-      if (this.#state !== "base") this.emit("multiKeyPress", multiKeyPress);
-    });
+    this.state = new Signal<ComponentState>("base");
+    this.theme = hierarchizeTheme(options.theme);
+    this.style = new Computed(() => {
+      const state = this.state.value;
 
-    const offMousePress = this.tui.on("mousePress", (mousePress) => {
-      if (this.#state !== "base") this.emit("mousePress", mousePress);
-    });
+      const { focusedComponents } = this.tui;
+      if (state === "focused" || state === "active") {
+        focusedComponents.add(this);
+      } else {
+        focusedComponents.delete(this);
+      }
 
-    this.on("remove", () => {
-      offKeyPress();
-      offMultiKeyPress();
-      offMousePress();
+      return this.theme[state];
     });
 
-    // This should run after everything else is setup
-    // That's why it's added after everything on even loop is ready
     queueMicrotask(() => {
-      this.tui.components.push(this);
-      this.tui.emit("addComponent", this);
+      this.tui.addChild(this);
     });
   }
 
-  /** Returns view that's currently associated with component */
-  get view(): ViewComponent<EventRecord> | undefined {
-    return this.#view;
-  }
-
-  /** Sets view that will be associated with component and updates view offsets */
-  set view(view) {
-    if (view) {
-      this.tui = view.fakeTui;
-
-      view.components.push(this);
-      view.updateOffsets(this);
-    } else if (this.view) {
-      this.tui = this.view.fakeTui.realTui;
-
-      this.view.components.remove(this);
-      this.view.updateOffsets();
-    }
-
-    this.#view = view;
-  }
-
-  /** Returns component's rectangle */
-  get rectangle(): Rectangle | undefined {
-    return this.#rectangle;
-  }
-
-  /** Sets component's rectangle */
-  set rectangle(rectangle) {
-    this.#rectangle = rectangle;
-  }
-
-  /** Returns current component style */
-  get style(): Style {
-    return this.theme[this.state];
-  }
-
-  /** Sets current component state and dispatches stateChange event */
-  set state(state) {
-    this.#state = state;
-    this.emit("stateChange", this);
-  }
-
-  /** Returns current component state */
-  get state(): ComponentState {
-    return this.#state;
+  /**
+   * Interact with component using mouse/keyboard
+   */
+  interact(method: "keyboard" | "mouse"): void {
+    this.lastInteraction.time = Date.now();
+    this.lastInteraction.method = method;
   }
 
   /**
-   * Function that's used for rendering component
-   * It's called on `tui` update event
+   * Changes visibility of `drawnObjects` (erases/draws them depending on {visible})
+   *
+   * If {visible} is set to false and {remove} is set to true it deletes objects from `drawnObjects`
    */
-  draw(): void {}
+  changeDrawnObjectVisibility(visible: boolean, remove = false): void {
+    const { drawnObjects } = this;
+    for (const key in drawnObjects) {
+      const value = drawnObjects[key];
+
+      if (Array.isArray(value)) {
+        for (const object of value) {
+          if (visible) object.draw();
+          else object.erase();
+        }
+      } else {
+        if (visible) value.draw();
+        else value.erase();
+      }
+
+      if (remove) delete drawnObjects[key];
+    }
+  }
 
   /**
-   * Function that's used for interacting with a component
-   * It's called by keyboard and mouse control handlers
+   * Destroys component:
+   *  - Disables all listeners
+   *  - Removes all `drawnObjects`
+   *  - calls `destroy()` on its children
+   *  - Removes itself from `subComponentOf.subComponents`
+   *  - Removes itself from `parent.children`
    */
-  interact(_method?: "keyboard" | "mouse"): void {}
+  destroy(): void {
+    this.emit("destroy", this);
+    this.#destroyed = true;
 
-  /** Remove component from `tui` and dispatch `removeComponent` event   */
-  remove(): void {
     this.off();
-    this.emit("remove", this);
-    this.tui.components.remove(this);
-    this.tui.emit("removeComponent", this);
-  }
-}
+    this.changeDrawnObjectVisibility(false, true);
 
-/** Interface defining object that {Component}'s constructor can interpret */
-export interface PlaceComponentOptions extends ComponentOptions {
-  rectangle: Rectangle;
-}
+    const { children } = this.parent;
+    children.splice(children.indexOf(this), 1);
 
-/** Component that definitely has it's rectangle set */
-export class PlaceComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends Component<EventMap> {
-  #rectangle: Rectangle;
+    for (const child of this.children) {
+      child.destroy();
+    }
 
-  constructor(options: PlaceComponentOptions) {
-    super(options);
-    this.#rectangle = options.rectangle;
-  }
+    const subComponents = this.subComponentOf?.subComponents;
+    delete this.subComponentOf;
 
-  get rectangle(): Rectangle {
-    return this.#rectangle;
+    if (!subComponents) return;
+    for (const index in subComponents) {
+      if (subComponents[index] === this) delete subComponents[index];
+    }
   }
 
-  set rectangle(rectangle) {
-    this.#rectangle = rectangle;
+  /**
+   * Draw component
+   *
+   * If called more than one times it deletes previous `drawnObjects`
+   */
+  draw(): void {
+    this.#drawn = true;
+    this.changeDrawnObjectVisibility(false, true);
   }
 }
diff --git a/src/components/box.ts b/src/components/box.ts
index 8cec1fc..b67ed44 100644
--- a/src/components/box.ts
+++ b/src/components/box.ts
@@ -1,22 +1,22 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { BoxObject } from "../canvas/box.ts";
+import { Component } from "../component.ts";
 
-import { PlaceComponent, PlaceComponentOptions } from "../component.ts";
-
-import type { EventRecord } from "../event_emitter.ts";
-
-/** Simple component that is a Box that cannot be interacted with by default */
-export class BoxComponent<EventMap extends EventRecord = Record<never, never>> extends PlaceComponent<EventMap> {
-  constructor(options: PlaceComponentOptions) {
-    super(options);
-  }
+export class Box extends Component {
+  declare drawnObjects: { box: BoxObject };
 
   draw(): void {
     super.draw();
 
-    const { style } = this;
-    const { canvas } = this.tui;
-    const { column, row, width, height } = this.rectangle;
+    const box = new BoxObject({
+      canvas: this.tui.canvas,
+      view: this.view,
+      style: this.style,
+      zIndex: this.zIndex,
+      rectangle: this.rectangle,
+    });
 
-    canvas.draw(column, row, style((" ".repeat(width) + "\n").repeat(height)));
+    this.drawnObjects.box = box;
+    box.draw();
   }
 }
diff --git a/src/components/button.ts b/src/components/button.ts
index 4f42a6f..e2722ec 100644
--- a/src/components/button.ts
+++ b/src/components/button.ts
@@ -1,54 +1,85 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { ComponentOptions } from "../component.ts";
+import { Box } from "./box.ts";
 
-import { BoxComponent } from "./box.ts";
-import { PlaceComponentOptions } from "../component.ts";
+import type { BoxObject } from "../canvas/box.ts";
+import { Label, LabelAlign } from "./label.ts";
+import { BaseSignal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
 
-import type { EventRecord } from "../event_emitter.ts";
+const centerAlign: LabelAlign = {
+  horizontal: "center",
+  vertical: "center",
+};
 
-/** Interface defining object that {ButtonComponent}'s constructor can interpret */
-export interface ButtonComponentOptions extends PlaceComponentOptions {
-  /** Text displayed on the center of the button */
-  label?: string;
+export interface ButtonOptions extends ComponentOptions {
+  label?: {
+    text: string | BaseSignal<string>;
+    align?: LabelAlign | BaseSignal<LabelAlign>;
+  };
 }
 
-/** Implementation for {ButtonComponent} class */
-export type ButtonComponentImplementation = ButtonComponentOptions;
+export class Button extends Box {
+  declare drawnObjects: { box: BoxObject };
+  declare subComponents: { label?: Label };
+  label: BaseSignal<{
+    text: BaseSignal<string | undefined>;
+    align: BaseSignal<LabelAlign>;
+  }>;
 
-/** Component that can be pressed */
-export class ButtonComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends BoxComponent<EventMap> implements ButtonComponentImplementation {
-  #lastInteraction = 0;
+  constructor(options: ButtonOptions) {
+    super(options);
 
-  label?: string;
+    let { label } = options;
 
-  constructor(options: ButtonComponentOptions) {
-    super(options);
-    this.label = options.label;
+    if (!label) {
+      label = { text: "", align: centerAlign };
+    }
+
+    label.text = signalify(label.text);
+    label.align = signalify(label.align ?? centerAlign);
+
+    this.label = signalify(label as unknown as this["label"], { deepObserve: true });
+    this.label.value.text.subscribe(() => {
+      this.#updateLabelSubcomponent();
+    });
   }
 
   draw(): void {
     super.draw();
+    this.#updateLabelSubcomponent();
+  }
 
-    if (this.label) {
-      const { style } = this;
-      const { canvas } = this.tui;
-      const { column, row, width, height } = this.rectangle;
+  interact(method: "mouse" | "keyboard"): void {
+    const interactionInterval = Date.now() - this.lastInteraction.time;
 
-      canvas.draw(
-        column + (width / 2) - (this.label.length / 2),
-        row + (height / 2),
-        style(this.label),
-      );
-    }
+    this.state.value = this.state.peek() === "focused" && (interactionInterval < 500 || method === "keyboard")
+      ? "active"
+      : "focused";
+
+    super.interact(method);
   }
 
-  interact(method?: "mouse" | "keyboard"): void {
-    const now = Date.now();
-    const interactionDelay = now - this.#lastInteraction;
+  #updateLabelSubcomponent(): void {
+    if (!this.label.value.text.value) {
+      this.subComponents.label?.destroy();
+      return;
+    }
+
+    const label = new Label({
+      parent: this,
+      theme: this.theme,
+      zIndex: this.zIndex,
+      rectangle: this.rectangle,
+      overwriteRectangle: true,
+      text: this.label.value.text as BaseSignal<string>,
+      align: this.label.value.align,
+    });
 
-    this.state = this.state === "focused" && (interactionDelay < 500 || method === "keyboard") ? "active" : "focused";
+    label.state = this.state;
+    label.style = this.style;
 
-    this.#lastInteraction = now;
+    label.subComponentOf = this;
+    this.subComponents.label = label;
   }
 }
diff --git a/src/components/checkbox.ts b/src/components/checkbox.ts
index 5ef3b7a..c0dcf39 100644
--- a/src/components/checkbox.ts
+++ b/src/components/checkbox.ts
@@ -1,60 +1,35 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { ComponentOptions } from "../component.ts";
+import { BaseSignal, Computed } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+import { Button, ButtonOptions } from "./button.ts";
 
-import { ButtonComponent } from "./button.ts";
-import { PlaceComponentOptions } from "../component.ts";
-
-import type { EventRecord } from "../event_emitter.ts";
-
-enum Mark {
+export enum Mark {
   Check = "✓",
   Cross = "✗",
 }
 
-/** Interface defining object that {CheckboxComponent}'s constructor can interpret */
-export interface CheckboxComponentOptions extends PlaceComponentOptions {
-  /** Whether checkbox is checked or not */
-  value?: boolean;
+export interface CheckBoxOptions extends ComponentOptions {
+  checked: boolean | BaseSignal<boolean>;
 }
 
-/** Complementary interface defining what's accessible in {CheckboxComponent} class in addition to {CheckboxComponentOptions} */
-export interface CheckboxComponentPrivate {
-  value: boolean;
-}
+export class CheckBox extends Button {
+  checked: BaseSignal<boolean>;
 
-/** Implementation for {CheckboxComponent} class */
-export type CheckboxComponentImplementation = CheckboxComponentPrivate;
+  constructor(options: CheckBoxOptions) {
+    const checkedSignal = signalify(options.checked);
 
-/** Component that allows user to toggle input */
-export class CheckboxComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends ButtonComponent<EventMap> implements CheckboxComponentImplementation {
-  #value: boolean;
+    (options as ButtonOptions).label = {
+      text: new Computed(() => checkedSignal.value ? Mark.Check : Mark.Cross),
+    };
 
-  label: string;
-
-  constructor(options: CheckboxComponentOptions) {
     super(options);
-    this.#value = options.value ?? false;
-    this.label = this.value ? Mark.Check : Mark.Cross;
-  }
-
-  /** Whether checkbox is checked or not */
-  get value(): boolean {
-    return this.#value;
-  }
-
-  set value(value: boolean) {
-    this.label = value ? Mark.Check : Mark.Cross;
-    this.state = value ? "active" : "base";
-    this.#value = value;
-  }
 
-  draw(): void {
-    super.draw();
+    this.checked = checkedSignal;
   }
 
-  interact(_method?: "mouse" | "keyboard"): void {
-    this.state = this.state === "focused" || this.state === "active" ? "active" : "focused";
-    if (this.state === "active") this.value = !this.value;
+  interact(method: "mouse" | "keyboard"): void {
+    super.interact(method);
+    if (this.state.peek() === "active") this.checked.value = !this.checked.peek();
   }
 }
diff --git a/src/components/combobox.ts b/src/components/combobox.ts
index 27d8750..63bbbc2 100644
--- a/src/components/combobox.ts
+++ b/src/components/combobox.ts
@@ -1,118 +1,103 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { Component, ComponentOptions } from "../component.ts";
-import { BoxComponent } from "./box.ts";
-import { ButtonComponent } from "./button.ts";
-import { EmitterEvent } from "../event_emitter.ts";
-
-import type { Rectangle } from "../types.ts";
-import type { EventRecord } from "../event_emitter.ts";
-
-/** Interface defining object that {ComboboxComponent}'s constructor can interpret */
-export interface ComboboxComponentOptions<OptionType extends string[] = string[]> extends ComponentOptions {
-  rectangle: Rectangle;
-  /** Text displayed on combobox by default */
-  label?: string;
-  /** Possible values of combobox */
-  options: OptionType;
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { BaseSignal, Computed, Signal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+import { Button, ButtonOptions } from "./button.ts";
+
+export interface ComboBoxOptions<Items extends string[] = string[]> extends Omit<ButtonOptions, "label"> {
+  placeholder?: string;
+  items: Items | BaseSignal<Items>;
+  selectedItem?: number | undefined | BaseSignal<number | undefined>;
 }
 
-/** Complementary interface defining what's accessible in {ComboboxComponent} class in addition to {ComboboxComponentOptions} */
-export interface ComboboxComponentPrivate<OptionType extends string[] = string[]> {
-  label: string;
-  /** Currently selected option */
-  value?: OptionType[number];
-}
-
-/** Implementation for {ComboboxComponent} class */
-export type ComboboxComponentImplementation = ComboboxComponentOptions & ComboboxComponentPrivate;
-
-/** EventMap that {ComboboxComponent} uses */
-export type ComboboxComponentEventMap = {
-  valueChange: EmitterEvent<[ComboboxComponent<string[], EventRecord>]>;
-};
-
-/**
- * Component that allows user to input value by selecting one from available options.
- * If `label` isn't provided then first value from `options` will be used.
- */
-export class ComboboxComponent<
-  OptionType extends string[] = string[],
-  EventMap extends EventRecord = Record<never, never>,
-> extends BoxComponent<EventMap & ComboboxComponentEventMap> implements ComboboxComponentImplementation {
-  #lastInteraction = 0;
-  #temporaryComponents: Component[] = [];
-
-  label: string;
-  options: string[];
-  option?: OptionType[number];
-
-  constructor(options: ComboboxComponentOptions<OptionType>) {
-    super(options);
-    this.options = options.options;
-    this.label = options.label ?? this.options[0];
-    this.option = options.label ? undefined : this.options[0];
+export class ComboBox<Items extends string[] = string[]> extends Button {
+  declare subComponents: { [button: number]: Button };
+  #subComponentsLength: number;
+
+  items: BaseSignal<Items>;
+  expanded: BaseSignal<boolean>;
+  selectedItem: BaseSignal<number | undefined>;
+  placeholder: BaseSignal<string>;
+
+  constructor(options: ComboBoxOptions<Items>) {
+    const selectedItemSignal = signalify(options.selectedItem);
+    const itemsSignal = signalify(options.items, { deepObserve: true });
+    const placeholderSignal = signalify(options.placeholder ?? "");
+
+    const buttonOptions: ButtonOptions = options;
+    buttonOptions.label = {
+      text: new Computed(() => {
+        const items = itemsSignal.value;
+        const selectedItem = selectedItemSignal.value;
+        const placeholder = placeholderSignal.value;
+        return selectedItem === undefined ? placeholder : items[selectedItem];
+      }),
+    };
+
+    super(buttonOptions);
+
+    this.items = itemsSignal;
+    this.expanded = new Signal(false);
+    this.placeholder = placeholderSignal;
+    this.selectedItem = selectedItemSignal;
+
+    this.#subComponentsLength = this.items.value.length;
+    this.#updateItemButtons();
+
+    this.items.subscribe((items) => {
+      this.#updateItemButtons();
+      this.#subComponentsLength = items.length;
+    });
   }
 
-  draw(): void {
-    super.draw();
-
-    if (this.label) {
-      const { style } = this;
-      const { canvas } = this.tui;
-      const { column, row, width, height } = this.rectangle;
+  #updateItemButtons(): void {
+    const { subComponents } = this;
+    const items = this.items.peek();
+
+    for (let i = 0; i < Math.max(items.length, this.#subComponentsLength); ++i) {
+      const subComponent = subComponents[i];
+      if (subComponent) {
+        if (i >= items.length) {
+          subComponent.destroy();
+          delete subComponents[i];
+        }
+        continue;
+      }
 
-      canvas.draw(
-        column + (width / 2) - (this.label.length / 2),
-        row + (height / 2),
-        style(this.label),
-      );
+      const buttonRectangle = { column: 0, row: 0, width: 0, height: 0 };
+
+      const button = new Button({
+        parent: this,
+        theme: this.theme,
+        zIndex: this.zIndex,
+        visible: this.expanded,
+        label: {
+          text: new Computed(() => this.items.value[i]),
+        },
+        rectangle: new Computed(() => {
+          const { column, row, width, height } = this.rectangle.value;
+          buttonRectangle.column = column;
+          buttonRectangle.row = row + (i + 1) * height;
+          buttonRectangle.width = width;
+          buttonRectangle.height = height;
+          return buttonRectangle;
+        }),
+      });
+
+      button.state.subscribe(() => {
+        if (button.state.peek() !== "active") return;
+        this.selectedItem.value = i;
+        this.expanded.value = false;
+      });
+
+      subComponents[i] = button;
     }
   }
 
-  interact(): void {
-    const now = Date.now();
-    const interactionDelay = now - this.#lastInteraction;
-
-    this.state = this.state === "focused" && interactionDelay < 500 ? "active" : "focused";
-
-    const temporaryComponents = this.#temporaryComponents;
-
-    if (this.state === "active") {
-      const { column, row, width, height } = this.rectangle;
-
-      for (const [i, option] of this.options.entries()) {
-        const button = new ButtonComponent({
-          tui: this.tui,
-          rectangle: {
-            column,
-            row: row + ((i + 1) * height),
-            height,
-            width,
-          },
-          label: option,
-          theme: this.theme,
-          zIndex: this.zIndex,
-        });
-
-        button.on("stateChange", (component) => {
-          const { state } = component;
-          if (state !== "active") return;
-          this.label = option;
-          this.option = option;
-          this.emit("valueChange", this);
-          this.interact();
-        });
-
-        temporaryComponents.push(button);
-      }
-    } else {
-      for (const component of temporaryComponents) {
-        component.remove();
-      }
-      temporaryComponents.length = 0;
-    }
+  interact(method: "mouse" | "keyboard"): void {
+    super.interact(method);
 
-    this.#lastInteraction = now;
+    if (this.state.peek() === "active") {
+      this.expanded.value = !this.expanded.peek();
+    }
   }
 }
diff --git a/src/components/frame.ts b/src/components/frame.ts
index 5d11e19..6a58bb9 100644
--- a/src/components/frame.ts
+++ b/src/components/frame.ts
@@ -1,159 +1,142 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { Component, ComponentOptions, ComponentState } from "../component.ts";
-
-import type { EventRecord } from "../event_emitter.ts";
-
-import type { Rectangle } from "../types.ts";
-
-export const sharpFramePieces = {
-  topLeft: "┌",
-  topRight: "┐",
-  bottomLeft: "└",
-  bottomRight: "┘",
-  horizontal: "─",
-  vertical: "│",
-} as const;
-
-export const roundedFramePieces = {
-  topLeft: "╭",
-  topRight: "╮",
-  bottomLeft: "╰",
-  bottomRight: "╯",
-  horizontal: "─",
-  vertical: "│",
-} as const;
-
-/** Type that specifies structore of object that defines how frame looks like  */
-export type FramePieceType = {
-  [key in keyof typeof sharpFramePieces]: string;
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+// deno-lint-ignore-file
+import { Component, ComponentOptions } from "../component.ts";
+
+import { BoxObject } from "../canvas/box.ts";
+import { TextObject } from "../canvas/text.ts";
+
+import { BaseSignal, Computed } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+export const FrameUnicodeCharacters = {
+  sharp: {
+    topLeft: "┌",
+    topRight: "┐",
+    bottomLeft: "└",
+    bottomRight: "┘",
+    horizontal: "─",
+    vertical: "│",
+  },
+  rounded: {
+    topLeft: "╭",
+    topRight: "╮",
+    bottomLeft: "╰",
+    bottomRight: "╯",
+    horizontal: "─",
+    vertical: "│",
+  },
 };
 
-/** Interface defining object that {FrameComponent}'s constructor can interpret */
-export type FrameComponentOptions =
-  & ComponentOptions
-  & {
-    /** Option that changes from characters from which {FrameComponent} is built */
-    framePieces?: "sharp" | "rounded" | FramePieceType;
-  }
-  & (
-    {
-      rectangle?: never;
-      /** Component that {FrameComponent} will surround */
-      component: Component;
-    } | {
-      component?: never;
-      rectangle: Rectangle;
-    }
-  );
-
-/** Complementary interface defining what's accessible in {FrameComponent} class in addition to {FrameComponentOptions} */
-export interface FrameComponentPrivate {
-  framePieces: "sharp" | "rounded" | FramePieceType;
-  rectangle: Rectangle;
-  component?: Component;
-}
-
-/** Implementation for {FrameComponent} class */
-export type FrameComponentImplementation = FrameComponentPrivate;
-
-/** Component that creates frame border either around a `component` or within `rectangle` depending on what's specified */
-export class FrameComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends Component<EventMap> implements FrameComponentImplementation {
-  #component?: Component;
-  #rectangle?: Rectangle;
-
-  framePieces: "sharp" | "rounded" | FramePieceType;
-
-  constructor(options: FrameComponentOptions) {
-    super({
-      tui: options.tui,
-      view: options.view,
-      rectangle: options.rectangle,
-      theme: options.theme ?? options.component?.theme,
-      zIndex: options.zIndex ?? options.component?.zIndex,
-    });
-
-    this.component = options.component;
-    if (!this.#component) {
-      this.rectangle = options.rectangle!;
-    }
-
-    this.framePieces = options.framePieces ?? "sharp";
-
-    if (!this.#rectangle) {
-      throw new Error("You need to pass either rectangle or component that has its rectangle set to FrameComponent");
-    }
-  }
-
-  get rectangle(): Rectangle {
-    if (this.#component) {
-      const { column, row, width, height } = this.#component!.rectangle!;
-
-      return {
-        column: column - 1,
-        row: row - 1,
-        width: width + 2,
-        height: height + 2,
-      };
-    }
-
-    return this.#rectangle!;
-  }
-
-  set rectangle(rectangle: Rectangle) {
-    this.#rectangle = rectangle;
-  }
-
-  get component(): Component | undefined {
-    return this.#component;
-  }
-
-  set component(component: Component | undefined) {
-    this.#component = component;
+export type FrameUnicodeCharactersType = {
+  [key in keyof typeof FrameUnicodeCharacters["rounded"]]: string;
+};
 
-    if (!this.#component) return;
-    if (!this.#component.rectangle) {
-      throw new Error("You need component that has its rectangle set");
-    }
-    this.rectangle = this.#component.rectangle;
-  }
+export interface FrameOptions extends ComponentOptions {
+  charMap: keyof typeof FrameUnicodeCharacters | FrameUnicodeCharactersType;
+}
 
-  get state(): ComponentState {
-    return this.component?.state ?? "base";
+export class Frame extends Component {
+  declare drawnObjects: {
+    top: TextObject;
+    bottom: TextObject;
+    left: BoxObject;
+    right: BoxObject;
+  };
+
+  charMap: BaseSignal<FrameUnicodeCharactersType>;
+
+  constructor(options: FrameOptions) {
+    super(options);
+    this.charMap = signalify(
+      typeof options.charMap === "string" ? FrameUnicodeCharacters[options.charMap] : options.charMap,
+    );
   }
 
-  set state(_value) {}
-
   draw(): void {
     super.draw();
 
-    const { style, framePieces } = this;
-    const { canvas } = this.component?.tui ?? this.tui;
+    const { canvas } = this.tui;
+
+    const topRectangle = { column: 0, row: 0 };
+    const top = new TextObject({
+      canvas,
+      view: this.view,
+      style: this.style,
+      zIndex: this.zIndex,
+      value: new Computed(() => {
+        const { topLeft, horizontal, topRight } = this.charMap.value;
+        return topLeft + horizontal.repeat(this.rectangle.value.width) + topRight;
+      }),
+      rectangle: new Computed(() => {
+        const { column, row } = this.rectangle.value;
+        topRectangle.column = column - 1;
+        topRectangle.row = row - 1;
+        return topRectangle;
+      }),
+    });
 
-    const { column, row, width, height } = this.rectangle;
+    const bottomRectangle = { column: 0, row: 0 };
+    const bottom = new TextObject({
+      canvas,
+      view: this.view,
+      style: this.style,
+      zIndex: this.zIndex,
+      value: new Computed(() => {
+        const { bottomLeft, horizontal, bottomRight } = this.charMap.value;
+        return bottomLeft + horizontal.repeat(this.rectangle.value.width) + bottomRight;
+      }),
+      rectangle: new Computed(() => {
+        const { column, row, height } = this.rectangle.value;
+        bottomRectangle.column = column - 1;
+        bottomRectangle.row = row + height;
+        return bottomRectangle;
+      }),
+    });
 
-    const pieces = framePieces === "sharp"
-      ? sharpFramePieces
-      : framePieces === "rounded"
-      ? roundedFramePieces
-      : framePieces;
+    const verticalCharMapSignal = new Computed(() => this.charMap.value.vertical);
+
+    const leftRectangle = { column: 0, row: 0, width: 1, height: 0 };
+    const left = new BoxObject({
+      canvas,
+      view: this.view,
+      style: this.style,
+      zIndex: this.zIndex,
+      filler: verticalCharMapSignal,
+      rectangle: new Computed(() => {
+        const { column, row, height } = this.rectangle.value;
+        leftRectangle.column = column - 1;
+        leftRectangle.row = row;
+        leftRectangle.height = height;
+        return leftRectangle;
+      }),
+    });
 
-    canvas.draw(column, row, style(pieces.topLeft));
-    canvas.draw(column + width - 1, row, style(pieces.topRight));
+    const rightRectangle = { column: 0, row: 0, width: 1, height: 0 };
+    const right = new BoxObject({
+      canvas,
+      view: this.view,
+      style: this.style,
+      zIndex: this.zIndex,
+      filler: verticalCharMapSignal,
+      rectangle: new Computed(() => {
+        const { column, row, width, height } = this.rectangle.value;
+        rightRectangle.column = column + width;
+        rightRectangle.row = row;
+        rightRectangle.height = height;
+        return rightRectangle;
+      }),
+    });
 
-    for (let y = row + 1; y < row + height - 1; ++y) {
-      canvas.draw(column, y, style(pieces.vertical));
-      canvas.draw(column + width - 1, y, style(pieces.vertical));
-    }
+    const { drawnObjects } = this;
 
-    for (let x = column + 1; x < column + width - 1; ++x) {
-      canvas.draw(x, row, style(pieces.horizontal));
-      canvas.draw(x, row + height - 1, style(pieces.horizontal));
-    }
+    drawnObjects.top = top;
+    drawnObjects.bottom = bottom;
+    drawnObjects.left = left;
+    drawnObjects.right = right;
 
-    canvas.draw(column, row + height - 1, style(pieces.bottomLeft));
-    canvas.draw(column + width - 1, row + height - 1, style(pieces.bottomRight));
+    top.draw();
+    bottom.draw();
+    left.draw();
+    right.draw();
   }
 }
diff --git a/src/components/input.ts b/src/components/input.ts
new file mode 100644
index 0000000..5de7ee5
--- /dev/null
+++ b/src/components/input.ts
@@ -0,0 +1,181 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Box } from "./box.ts";
+import { ComponentOptions } from "../component.ts";
+
+import { BoxObject } from "../canvas/box.ts";
+import { TextObject } from "../canvas/text.ts";
+import { Theme } from "../theme.ts";
+import { DeepPartial } from "../types.ts";
+import { cropToWidth, insertAt } from "../utils/strings.ts";
+import { clamp } from "../utils/numbers.ts";
+import { BaseSignal, Computed, Signal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+export interface InputTheme extends Theme {
+  value: Theme;
+  cursor: Theme;
+  placeholder: Theme;
+}
+
+export interface InputOptions extends ComponentOptions {
+  text?: string | BaseSignal<string>;
+  validator?: RegExp | BaseSignal<RegExp>;
+  password?: boolean | BaseSignal<boolean>;
+  placeholder?: string | BaseSignal<string>;
+  multiCodePointSupport?: boolean | BaseSignal<boolean>;
+
+  theme: DeepPartial<InputTheme, "cursor">;
+}
+
+export class Input extends Box {
+  declare drawnObjects: {
+    box: BoxObject;
+    text: TextObject;
+    cursor: TextObject;
+  };
+  declare theme: InputTheme;
+
+  text: BaseSignal<string>;
+  password: BaseSignal<boolean>;
+  cursorPosition: BaseSignal<number>;
+  validator: BaseSignal<RegExp | undefined>;
+  multiCodePointSupport: BaseSignal<boolean>;
+  placeholder: BaseSignal<string | undefined>;
+
+  constructor(options: InputOptions) {
+    super(options);
+
+    this.theme.value ??= this.theme;
+    this.theme.placeholder ??= this.theme.value;
+
+    this.cursorPosition = new Signal(0);
+
+    this.text = signalify(options.text ?? "");
+    this.validator = signalify(options.validator);
+    this.placeholder = signalify(options.placeholder);
+    this.password = signalify(options.password ?? false);
+    this.multiCodePointSupport = signalify(options.multiCodePointSupport ?? false);
+
+    this.on("keyPress", ({ key, ctrl, meta }) => {
+      if (ctrl || meta) return;
+
+      const cursorPosition = this.cursorPosition.peek();
+      const validator = this.validator.peek();
+      const value = this.text.peek();
+
+      let character = "";
+      switch (key) {
+        case "backspace":
+          if (cursorPosition === 0) return;
+          this.text.value = value.slice(0, cursorPosition - 1) + value.slice(cursorPosition);
+          this.cursorPosition.value = clamp(cursorPosition - 1, 0, value.length);
+          return;
+        case "delete":
+          this.text.value = value.slice(0, cursorPosition) + value.slice(cursorPosition + 1);
+          return;
+        case "left":
+          this.cursorPosition.value = clamp(cursorPosition - 1, 0, value.length);
+          return;
+        case "right":
+          this.cursorPosition.value = clamp(cursorPosition + 1, 0, value.length);
+          return;
+        case "home":
+          this.cursorPosition.value = 0;
+          return;
+        case "end":
+          this.cursorPosition.value = value.length;
+          return;
+        case "space":
+          character = " ";
+          break;
+        case "tab":
+          character = "\t";
+          break;
+        default:
+          if (key.length > 1) return;
+          character = key;
+      }
+
+      if (validator && !validator?.test(character)) return;
+      this.text.value = insertAt(value, cursorPosition, character);
+      this.cursorPosition.value = clamp(cursorPosition + 1, 0, this.text.value.length);
+    });
+  }
+
+  draw(): void {
+    super.draw();
+
+    const { canvas } = this.tui;
+
+    const textRectangle = { column: 0, row: 0, width: 0 };
+    const text = new TextObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      multiCodePointSupport: this.multiCodePointSupport,
+      style: new Computed(() =>
+        this.theme[!this.text.value && this.placeholder ? "placeholder" : "value"][this.state.value]
+      ),
+      value: new Computed(() => {
+        const password = this.password.value;
+        const placeholder = this.placeholder.value;
+        const cursorPosition = this.cursorPosition.value;
+        const value = this.text.value.replace("\t", " ");
+        const { width } = this.rectangle.value;
+
+        if (!value && placeholder) {
+          return cropToWidth(placeholder, width);
+        }
+
+        const offsetX = cursorPosition - width + 1;
+        return password
+          ? "*".repeat(Math.min(value.length, width))
+          : cropToWidth(offsetX > 0 ? value.slice(offsetX, cursorPosition) : value, width);
+      }),
+      rectangle: new Computed(() => {
+        const { row, column } = this.rectangle.value;
+        textRectangle.column = column;
+        textRectangle.row = row;
+        return textRectangle;
+      }),
+    });
+
+    const cursorRectangle = { column: 0, row: 0, width: 1, height: 1 };
+    const cursor = new TextObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      multiCodePointSupport: this.multiCodePointSupport,
+      value: new Computed(() => {
+        const value = this.text.value;
+        const placeholder = this.placeholder.value;
+        const cursorPosition = this.cursorPosition.value;
+        return (value ? value[cursorPosition] : placeholder?.[cursorPosition]) ?? " ";
+      }),
+      style: new Computed(() => this.theme.cursor[this.state.value]),
+      rectangle: new Computed(() => {
+        const cursorPosition = this.cursorPosition.value;
+        const { row, column, width } = this.rectangle.value;
+        cursorRectangle.column = column + Math.min(cursorPosition, width - 1);
+        cursorRectangle.row = row;
+        return cursorRectangle;
+      }),
+    });
+
+    this.drawnObjects.text = text;
+    this.drawnObjects.cursor = cursor;
+
+    text.draw();
+    cursor.draw();
+  }
+
+  interact(method: "keyboard" | "mouse"): void {
+    const interactionInterval = Date.now() - this.lastInteraction.time;
+
+    this.state.value = this.state.peek() === "focused" && (interactionInterval < 500 || method === "keyboard")
+      ? "active"
+      : "focused";
+
+    super.interact(method);
+  }
+}
diff --git a/src/components/label.ts b/src/components/label.ts
index 65c3d45..d88b435 100644
--- a/src/components/label.ts
+++ b/src/components/label.ts
@@ -1,105 +1,142 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { TextObject } from "../canvas/text.ts";
 import { Component, ComponentOptions } from "../component.ts";
 
-import { textWidth } from "../utils/strings.ts";
+import { cropToWidth, textWidth } from "../utils/strings.ts";
 
 import type { Rectangle } from "../types.ts";
-import type { EventRecord } from "../event_emitter.ts";
+import { BaseSignal, Computed, Effect } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
 
-/** Interface describing positioning of label when given boundaries using `rectangle` */
-export interface LabelTextAlign {
-  horizontal: "left" | "center" | "right";
+export type LabelRectangle = Omit<Rectangle, "width" | "height"> & {
+  width?: number;
+  height?: number;
+};
+
+export interface LabelAlign {
   vertical: "top" | "center" | "bottom";
+  horizontal: "left" | "center" | "right";
 }
 
-/** Interface defining object that {LabelComponent}'s constructor can interpret */
-export interface LabelComponentOptions extends ComponentOptions {
-  rectangle: Rectangle;
-  /** Position of label when given boundaries using `rectangle` */
-  align: LabelTextAlign;
-  /** Text displayed on label */
-  value: string;
+export interface LabelOptions extends Omit<ComponentOptions, "rectangle"> {
+  text: string | BaseSignal<string>;
+  rectangle: LabelRectangle | BaseSignal<LabelRectangle>;
+  align?: LabelAlign | BaseSignal<LabelAlign>;
+  multiCodePointSupport?: boolean | BaseSignal<boolean>;
+  overwriteRectangle?: boolean | BaseSignal<boolean>;
 }
 
-/** Implementation for {LabelComponent} class */
-export type LabelComponentImplementation = LabelComponentOptions;
+export class Label extends Component {
+  declare drawnObjects: { texts: TextObject[] };
 
-/**
- * Component that displays text in given `rectangle`
- * When `rectangle`'s `width` and/or `height` properties are set to `-1` then `width` and/or `height` are set dynamically depending on the text size.
- */
-export class LabelComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends Component<EventMap> implements LabelComponentImplementation {
-  #rectangle: Rectangle;
+  #valueLines?: string[];
 
-  value: string;
-  align: LabelTextAlign;
+  text: BaseSignal<string>;
+  align: BaseSignal<LabelAlign>;
+  overwriteRectangle: BaseSignal<boolean>;
+  multiCodePointSupport: BaseSignal<boolean>;
 
-  constructor(options: LabelComponentOptions) {
-    super(options);
-
-    this.value = options.value;
-    this.align = options.align;
-    this.#rectangle = options.rectangle;
-    this.rectangle = options.rectangle;
-  }
-
-  get rectangle(): Rectangle {
-    return this.#rectangle;
-  }
+  constructor(options: LabelOptions) {
+    super(options as ComponentOptions);
 
-  set rectangle(rectangle: Rectangle) {
-    this.#rectangle = rectangle;
+    this.text = signalify(options.text);
+    this.overwriteRectangle = signalify(options.overwriteRectangle ?? false);
+    this.multiCodePointSupport = signalify(options.multiCodePointSupport ?? false);
+    this.align = signalify(options.align ?? { vertical: "top", horizontal: "left" }, { deepObserve: true });
 
-    const lines = this.value.split("\n");
+    new Effect(() => {
+      const value = this.text.value;
+      const rectangle = this.rectangle.value;
+      const overwriteRectangle = this.overwriteRectangle.value;
 
-    const dynamicWidth = this.#rectangle.width === -1;
-    const dynamicHeight = this.#rectangle.width === -1;
+      const lastValueLines = this.#valueLines;
+      const valueLines = this.#valueLines = value.split("\n");
+      if (!overwriteRectangle) {
+        rectangle.width = valueLines.reduce((p, c) => Math.max(p, textWidth(c)), 0);
+        rectangle.height = valueLines.length;
+      }
 
-    for (const [i, line] of lines.entries()) {
-      if (dynamicWidth) this.rectangle.width = Math.max(this.rectangle.width, textWidth(line));
-      if (dynamicHeight) this.rectangle.height = Math.max(this.rectangle.height, i + 1);
-    }
+      if (!lastValueLines) return;
+      if (valueLines.length > lastValueLines.length) {
+        this.#fillDrawObjects();
+      } else if (valueLines.length < lastValueLines.length) {
+        this.#popUnusedDrawObjects();
+      }
+    });
   }
 
   draw(): void {
     super.draw();
+    this.drawnObjects.texts = [];
+    this.#valueLines = this.text.peek().split("\n");
+    this.#fillDrawObjects();
+  }
 
-    const { style, align, value } = this;
-    const { canvas } = this.tui;
-
-    const { column, row, width, height } = this.rectangle;
-
-    const lines = value.split("\n");
-    for (const [i, line] of lines.entries()) {
-      let r = row + i;
-      let c = column;
-
-      switch (align.horizontal) {
-        case "left":
-          break;
-        case "center":
-          c += (width - textWidth(line)) / 2;
-          break;
-        case "right":
-          c += width - textWidth(line);
-          break;
-      }
+  #fillDrawObjects(): void {
+    if (!this.#valueLines) throw new Error("#valueLines has to be set");
+
+    const { drawnObjects } = this;
+
+    for (let offset = drawnObjects.texts.length; offset < this.#valueLines.length; ++offset) {
+      const textRectangle = { column: 0, row: 0, width: 0, height: 0 };
+      const text = new TextObject({
+        canvas: this.tui.canvas,
+        view: this.view,
+        style: this.style,
+        zIndex: this.zIndex,
+        multiCodePointSupport: this.multiCodePointSupport,
+        value: new Computed(() => {
+          // associate computed with this.text
+          this.text.value;
+          const value = this.#valueLines![offset];
+          return cropToWidth(value, this.rectangle.value.width);
+        }),
+        rectangle: new Computed(() => {
+          // associate computed with this.text
+          this.text.value;
+
+          const { column, row, width, height } = this.rectangle.value;
+          textRectangle.column = column;
+          textRectangle.row = row + offset;
+
+          let value = this.#valueLines![offset];
+          value = cropToWidth(value, width);
+          const valueWidth = textWidth(value);
+
+          const { vertical, horizontal } = this.align.value;
+          switch (horizontal) {
+            case "center":
+              textRectangle.column += ~~((width - valueWidth) / 2);
+              break;
+            case "right":
+              textRectangle.column += width - valueWidth;
+              break;
+          }
+
+          textRectangle.row = row + offset;
+          switch (vertical) {
+            case "center":
+              textRectangle.row += ~~(height / 2 - this.#valueLines!.length / 2);
+              break;
+            case "bottom":
+              textRectangle.row += height - this.#valueLines!.length;
+              break;
+          }
+
+          return textRectangle;
+        }),
+      });
+
+      drawnObjects.texts[offset] = text;
+      text.draw();
+    }
+  }
 
-      switch (align.vertical) {
-        case "top":
-          break;
-        case "center":
-          r += height / 2 - lines.length / 2;
-          break;
-        case "bottom":
-          r += height - lines.length;
-          break;
-      }
+  #popUnusedDrawObjects(): void {
+    if (!this.#valueLines) throw new Error("#valueLines has to be set");
 
-      canvas.draw(c, r, style(line), this.rectangle);
+    for (const text of this.drawnObjects.texts.splice(this.#valueLines.length)) {
+      text.erase();
     }
   }
 }
diff --git a/src/components/mod.ts b/src/components/mod.ts
index 4369385..894d536 100644
--- a/src/components/mod.ts
+++ b/src/components/mod.ts
@@ -1,14 +1,13 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 export * from "./box.ts";
 export * from "./button.ts";
 export * from "./checkbox.ts";
 export * from "./combobox.ts";
 export * from "./frame.ts";
+export * from "./input.ts";
 export * from "./label.ts";
-export * from "./progress_bar.ts";
-export * from "./scrollable_view.ts";
+export * from "./progressbar.ts";
 export * from "./slider.ts";
 export * from "./table.ts";
+export * from "./text.ts";
 export * from "./textbox.ts";
-export * from "./view.ts";
diff --git a/src/components/progress_bar.ts b/src/components/progress_bar.ts
deleted file mode 100644
index 3cdd638..0000000
--- a/src/components/progress_bar.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { hierarchizeTheme, Theme } from "../theme.ts";
-import { PlaceComponentOptions } from "../component.ts";
-import { BoxComponent } from "./box.ts";
-import { EmitterEvent } from "../event_emitter.ts";
-
-import { clamp, normalize } from "../utils/numbers.ts";
-
-import type { DeepPartial } from "../types.ts";
-import type { EventRecord } from "../event_emitter.ts";
-
-export const horizontalSmoothProgressChars = ["█", "▉", "▉", "▊", "▋", "▍", "▎", "▏"] as const;
-export const verticalSmoothProgressChars = ["█", "🮆", "🮅", "🮄", "🮃", "🮂", "▔"] as const;
-
-/** Theme used by {ProgressBarComponent} to style itself */
-export interface ProgressBarTheme extends Theme {
-  progress: Theme;
-}
-
-/** Interface defining object that {ProgressBarComponent}'s constructor can interpret */
-export interface ProgressBarComponentOptions extends PlaceComponentOptions {
-  theme?: DeepPartial<ProgressBarTheme>;
-  /** Current value */
-  value: number;
-  /** Minimal value of {ProgressBarComponent} */
-  min: number;
-  /** Maximal value of {ProgressBarComponent} */
-  max: number;
-  /** Whether {ProgressBarComponent} is vertical or horizontal */
-  direction: "horizontal" | "vertical";
-  /**
-   * Whether {ProgressBarComponent} should use UNICODE characters to create effect of more gradual, smooth looking progress
-   * Keep in mind that not every terminal might support used characters
-   */
-  smooth?: boolean;
-}
-
-/** Complementary interface defining what's accessible in {ProgressBarComponent} class in addition to {ProgressBarComponentOptions} */
-export interface ProgressBarComponentPrivate {
-  theme: ProgressBarTheme;
-  smooth: boolean;
-}
-
-/** Implementation for {ProgressBarComponent} class */
-export type ProgressBarComponentImplementation = ProgressBarComponentOptions & ProgressBarComponentPrivate;
-
-/** EventMap that {ProgressBarComponent} uses */
-export type ProgressBarComponentEventMap = {
-  valueChange: EmitterEvent<[ProgressBarComponent<EventRecord>]>;
-};
-
-/** Component that indicates progress */
-export class ProgressBarComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends BoxComponent<EventMap & ProgressBarComponentEventMap> implements ProgressBarComponentImplementation {
-  declare theme: ProgressBarTheme;
-
-  #value: number;
-
-  direction: "horizontal" | "vertical";
-  min: number;
-  max: number;
-  smooth: boolean;
-
-  constructor(options: ProgressBarComponentOptions) {
-    super(options);
-    this.direction = options.direction;
-    this.min = options.min;
-    this.max = options.max;
-    this.#value = options.value;
-    this.smooth = options.smooth ?? false;
-    this.theme.progress = hierarchizeTheme(options.theme?.progress ?? {});
-  }
-
-  get value() {
-    return this.#value;
-  }
-
-  set value(value) {
-    const prev = this.#value;
-    this.#value = clamp(value, this.min, this.max);
-
-    if (this.#value !== prev) {
-      this.emit("valueChange", this);
-    }
-  }
-
-  draw(): void {
-    super.draw();
-
-    const { theme, state, value, min, max, direction } = this;
-    const { canvas } = this.tui;
-    const { column, row, width, height } = this.rectangle;
-
-    const normalizedValue = normalize(value, min, max);
-
-    const progressStyle = theme.progress[state];
-
-    let valueString: string;
-
-    if (this.smooth) {
-      valueString = "";
-
-      const vertical = direction === "vertical";
-      const charMap = vertical ? verticalSmoothProgressChars : horizontalSmoothProgressChars;
-
-      main:
-      for (let i = normalizedValue * (vertical ? height : width); i > 0;) {
-        for (const [j, char] of charMap.entries()) {
-          const step = (8 - j) / 8;
-
-          if (i - step > 0) {
-            valueString += vertical ? char.repeat(width) + "\n" : char;
-            i -= step;
-            continue main;
-          }
-        }
-
-        i = 0;
-      }
-    }
-
-    switch (direction) {
-      case "horizontal":
-        {
-          valueString ??= " ".repeat(normalizedValue * width);
-          canvas.draw(
-            column,
-            row,
-            progressStyle((valueString + "\n").repeat(height)),
-          );
-        }
-        break;
-      case "vertical":
-        {
-          valueString ??= (" ".repeat(width) + "\n").repeat(normalizedValue * height);
-          canvas.draw(
-            column,
-            row,
-            progressStyle(valueString),
-          );
-        }
-        break;
-    }
-  }
-
-  interact(): void {
-    this.state = this.state === "focused" || this.state === "active" ? "active" : "focused";
-  }
-}
diff --git a/src/components/progressbar.ts b/src/components/progressbar.ts
new file mode 100644
index 0000000..4f8f3d0
--- /dev/null
+++ b/src/components/progressbar.ts
@@ -0,0 +1,193 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Box } from "./box.ts";
+import { Theme } from "../theme.ts";
+import { ComponentOptions } from "../component.ts";
+
+import { BoxObject } from "../canvas/box.ts";
+import { TextObject } from "../canvas/text.ts";
+
+import { normalize } from "../utils/numbers.ts";
+
+import type { DeepPartial } from "../types.ts";
+import { BaseSignal, Computed } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+export type ProgressBarCharMapType = {
+  vertical: string[];
+  horizontal: string[];
+};
+
+export const progressBarCharMap: ProgressBarCharMapType = {
+  vertical: ["█", "🮆", "🮅", "🮄", "🮃", "🮂", "▔"],
+  horizontal: ["█", "▉", "▉", "▊", "▋", "▍", "▎", "▏"],
+};
+
+export type ProgressBarOrientation = "vertical" | "horizontal";
+export type ProgressBarDirection = "normal" | "reversed";
+
+export interface ProgressBarTheme extends Theme {
+  progress: Theme;
+}
+
+export interface ProgressBarOptions extends ComponentOptions {
+  min: number | BaseSignal<number>;
+  max: number | BaseSignal<number>;
+  value: number | BaseSignal<number>;
+  smooth: boolean | BaseSignal<boolean>;
+  direction: ProgressBarDirection | BaseSignal<ProgressBarDirection>;
+  charMap?: ProgressBarCharMapType | BaseSignal<ProgressBarCharMapType>;
+  orientation: ProgressBarOrientation | BaseSignal<ProgressBarOrientation>;
+
+  theme: DeepPartial<ProgressBarTheme, "progress">;
+}
+
+export class ProgressBar extends Box {
+  declare drawnObjects: { box: BoxObject; progress: BoxObject | TextObject[] };
+  declare theme: ProgressBarTheme;
+
+  min: BaseSignal<number>;
+  max: BaseSignal<number>;
+  value: BaseSignal<number>;
+  smooth: BaseSignal<boolean>;
+  direction: BaseSignal<ProgressBarDirection>;
+  orientation: BaseSignal<ProgressBarOrientation>;
+  charMap: BaseSignal<ProgressBarCharMapType>;
+
+  constructor(options: ProgressBarOptions) {
+    super(options);
+
+    const { min, max, value, smooth, direction, orientation, charMap } = options;
+    this.min = signalify(min);
+    this.max = signalify(max);
+    this.value = signalify(value);
+    this.smooth = signalify(smooth);
+    this.direction = signalify(direction);
+    this.orientation = signalify(orientation);
+    this.charMap = signalify(charMap ?? progressBarCharMap);
+  }
+
+  draw(): void {
+    super.draw();
+
+    if (this.smooth) {
+      this.drawnObjects.progress = [];
+      this.#fillSmoothDrawObjects();
+    } else {
+      const progressRectangle = { column: 0, row: 0, width: 0, height: 0 };
+      const progress = new BoxObject({
+        canvas: this.tui.canvas,
+        view: this.view,
+        zIndex: this.zIndex,
+        style: new Computed(() => this.theme.progress[this.state.value]),
+        rectangle: new Computed(() => {
+          let normalizedValue = normalize(this.value.value, this.min.value, this.max.value);
+          if (this.direction.value === "reversed") normalizedValue = 1 - normalizedValue;
+
+          const { column, row, width, height } = this.rectangle.value;
+          progressRectangle.column = column;
+          progressRectangle.row = row;
+
+          if (this.orientation.value === "horizontal") {
+            progressRectangle.width = Math.round(width * normalizedValue);
+            progressRectangle.height = height;
+          } else {
+            progressRectangle.width = width;
+            progressRectangle.height = Math.round(height * normalizedValue);
+          }
+
+          const { progress } = this.drawnObjects;
+          if (Array.isArray(progress)) {
+            if (progress.length > height) {
+              this.#popUnusedSmoothDrawObjects();
+            } else if (progress.length < height) {
+              this.#fillSmoothDrawObjects();
+            }
+          }
+
+          return progressRectangle;
+        }),
+      });
+
+      this.drawnObjects.progress = progress;
+      progress.draw();
+    }
+  }
+
+  interact(method: "mouse" | "keyboard"): void {
+    const interactionInterval = Date.now() - this.lastInteraction.time;
+
+    this.state.value = this.state.peek() === "focused" && (interactionInterval < 500 || method === "keyboard")
+      ? "active"
+      : "focused";
+
+    super.interact(method);
+  }
+
+  #fillSmoothDrawObjects() {
+    if (!Array.isArray(this.drawnObjects.progress)) {
+      throw new Error("drawnObjects.progress needs to be an array");
+    }
+
+    for (let offset = this.drawnObjects.progress.length; offset < this.rectangle.peek().height; ++offset) {
+      const progressLineRectangle = { column: 0, row: 0 };
+      const progressLine = new TextObject({
+        canvas: this.tui.canvas,
+        multiCodePointSupport: true,
+        view: this.view,
+        zIndex: this.zIndex,
+        style: new Computed(() => this.theme.progress[this.state.value]),
+        rectangle: new Computed(() => {
+          const { column, row } = this.rectangle.value;
+          progressLineRectangle.column = column;
+          progressLineRectangle.row = row + offset;
+          return progressLineRectangle;
+        }),
+        value: new Computed(() => {
+          let normalizedValue = normalize(this.value.value, this.min.value, this.max.value);
+          if (this.direction.value === "reversed") normalizedValue = 1 - normalizedValue;
+
+          const charMap = this.charMap.value[this.orientation.value];
+          const step = 1 / (charMap.length);
+
+          const { width, height } = this.rectangle.value;
+
+          if (this.orientation.value === "horizontal") {
+            const steps = normalizedValue * width;
+            const remainder = steps % 1;
+            return charMap[0].repeat(steps) +
+              (
+                remainder < step ? "" : charMap[charMap.length - Math.max(Math.round(remainder / step), 1)]
+              );
+          } else {
+            const steps = normalizedValue * height;
+
+            const remainder = steps % 1;
+
+            if (offset - 1 >= steps - remainder) {
+              return "";
+            } else if (offset < steps - remainder) {
+              return charMap[0].repeat(width);
+            } else {
+              return remainder < step
+                ? ""
+                : charMap[charMap.length - Math.max(Math.round(remainder / step), 1)].repeat(width);
+            }
+          }
+        }),
+      });
+
+      this.drawnObjects.progress.push(progressLine);
+      progressLine.draw();
+    }
+  }
+
+  #popUnusedSmoothDrawObjects(): void {
+    if (!Array.isArray(this.drawnObjects.progress)) {
+      throw new Error("drawnObjects.progress needs to be an array");
+    }
+
+    for (const progressLine of this.drawnObjects.progress.splice(this.rectangle.peek().height)) {
+      progressLine.erase();
+    }
+  }
+}
diff --git a/src/components/scrollable_view.ts b/src/components/scrollable_view.ts
deleted file mode 100644
index 01c6032..0000000
--- a/src/components/scrollable_view.ts
+++ /dev/null
@@ -1,198 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { emptyStyle, Style, Theme } from "../theme.ts";
-
-import { PlaceComponentOptions } from "../component.ts";
-import { ViewComponent } from "./view.ts";
-import { SliderComponent } from "./slider.ts";
-
-import { clamp } from "../utils/numbers.ts";
-
-import type { DeepPartial } from "../types.ts";
-import type { EventRecord } from "../event_emitter.ts";
-
-/** Theme used by {ScrollableView} to style itself */
-export interface ScrollableViewTheme extends Theme {
-  scrollbar: {
-    horizontal: {
-      track: Style;
-      thumb: Style;
-    };
-    vertical: {
-      track: Style;
-      thumb: Style;
-    };
-    corner: Style;
-  };
-}
-
-/** Interface defining object that {ScrollableView}'s constructor can interpret */
-export interface ScrollableViewComponentOptions extends PlaceComponentOptions {
-  theme?: DeepPartial<ScrollableViewTheme>;
-}
-
-/** Complementary interface defining what's accessible in {SliderComponent} class in addition to {SliderComponentOptions} */
-export interface ScrollableViewComponentPrivate {
-  theme: ScrollableViewTheme;
-  scrollbars: {
-    vertical?: SliderComponent | undefined;
-    horizontal?: SliderComponent | undefined;
-  };
-}
-
-/** Implementation for {ScrollableViewComponent} class */
-export type ScrollableViewComponentImplementation = ScrollableViewComponentPrivate & ScrollableViewComponentOptions;
-
-/**
- * Component that can be assigned to other component's `view` property.
- * This allows components to be drawn independently from other components.
- * Components drawn over bounds of this component automatically adjust its offset, and when needed scrollbars are added.
- */
-export class ScrollableViewComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends ViewComponent<EventMap> implements ScrollableViewComponentImplementation {
-  declare theme: ScrollableViewTheme;
-
-  scrollbars: {
-    vertical?: SliderComponent;
-    horizontal?: SliderComponent;
-  };
-
-  constructor(options: ScrollableViewComponentOptions) {
-    super(options);
-    this.margin = { top: 0, left: 0, right: 0, bottom: 0 };
-
-    const { theme } = options;
-
-    const horizontal = theme?.scrollbar?.horizontal;
-    const vertical = theme?.scrollbar?.vertical;
-
-    const corner = theme?.scrollbar?.corner;
-    this.theme.scrollbar = {
-      horizontal: {
-        track: horizontal?.track ?? emptyStyle,
-        thumb: horizontal?.thumb ?? emptyStyle,
-      },
-      vertical: {
-        track: vertical?.track ?? emptyStyle,
-        thumb: vertical?.thumb ?? emptyStyle,
-      },
-      corner: corner ?? emptyStyle,
-    };
-
-    this.scrollbars = {};
-
-    this.on("mousePress", (mousePress) => {
-      const { scroll, shift } = mousePress;
-      if (!scroll) return;
-
-      const { horizontal, vertical } = this.scrollbars;
-
-      if (shift) {
-        this.offset.x = clamp(this.offset.x + scroll, 0, this.maxOffset.x);
-        if (horizontal) horizontal.value = this.offset.x;
-      } else {
-        this.offset.y = clamp(this.offset.y + scroll, 0, this.maxOffset.y);
-        if (vertical) vertical.value = this.offset.y;
-      }
-    });
-
-    const updateScrollbarOffsets = () => {
-      const { horizontal, vertical } = this.scrollbars;
-
-      if (horizontal) horizontal.max = this.maxOffset.x;
-      if (vertical) vertical.max = this.maxOffset.y;
-    };
-
-    this.tui.on("addComponent", updateScrollbarOffsets);
-    this.tui.on("removeComponent", updateScrollbarOffsets);
-  }
-
-  draw(): void {
-    super.draw();
-
-    const { tui, theme } = this;
-    const { canvas } = this.tui;
-    const { column, row, width, height } = this.rectangle;
-
-    if (this.maxOffset.x > 0 && !this.scrollbars.horizontal) {
-      this.scrollbars.horizontal = new SliderComponent({
-        tui,
-        direction: "horizontal",
-        min: 0,
-        max: 0,
-        value: 0,
-        step: 1,
-        rectangle: {
-          column,
-          width: width - 1,
-          row: row + height - 1,
-          height: 1,
-        },
-        theme: {
-          base: theme.scrollbar.vertical.track,
-          thumb: {
-            base: theme.scrollbar.vertical.thumb,
-          },
-        },
-      });
-
-      this.scrollbars.horizontal.on("valueChange", (component) => {
-        this.offset.x = component.value;
-      });
-
-      this.margin.right = 1;
-      this.updateOffsets();
-    } else if (this.maxOffset.x === 0 && this.scrollbars.horizontal) {
-      this.scrollbars.horizontal.remove();
-      delete this.scrollbars.horizontal;
-      this.margin.right = 0;
-      this.updateOffsets();
-    }
-
-    if (this.maxOffset.y > 0 && !this.scrollbars.vertical) {
-      this.scrollbars.vertical = new SliderComponent({
-        tui,
-        direction: "vertical",
-        min: 0,
-        max: 0,
-        value: 0,
-        step: 1,
-        rectangle: {
-          column: column + width - 1,
-          width: 1,
-          height: height - 1,
-          row,
-        },
-        theme: {
-          base: theme.scrollbar.vertical.track,
-          thumb: {
-            base: theme.scrollbar.vertical.thumb,
-          },
-        },
-      });
-
-      this.scrollbars.vertical.on("valueChange", (component) => {
-        this.offset.y = component.value;
-      });
-
-      this.margin.bottom = 1;
-      this.updateOffsets();
-    } else if (this.maxOffset.y === 0 && this.scrollbars.vertical) {
-      this.scrollbars.vertical.remove();
-      delete this.scrollbars.vertical;
-      this.margin.bottom = 0;
-      this.updateOffsets();
-    }
-
-    if (this.maxOffset.x > 0 && this.maxOffset.y > 0) {
-      const cornerStyle = theme.scrollbar.corner;
-      canvas.draw(column + width - 1, row + height - 1, cornerStyle(" "));
-    }
-  }
-
-  interact(method?: "keyboard" | "mouse") {
-    if (method === "keyboard") return;
-    this.state = "focused";
-  }
-}
diff --git a/src/components/slider.ts b/src/components/slider.ts
index 2d2f53e..ecc5c2a 100644
--- a/src/components/slider.ts
+++ b/src/components/slider.ts
@@ -1,161 +1,145 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Box } from "./box.ts";
+import { Theme } from "../theme.ts";
+import { ComponentOptions } from "../component.ts";
 
-import { hierarchizeTheme, Theme } from "../theme.ts";
-
-import { PlaceComponentOptions } from "../component.ts";
-import { BoxComponent } from "./box.ts";
-import { EmitterEvent } from "../event_emitter.ts";
+import { BoxObject } from "../canvas/box.ts";
 
 import { clamp, normalize } from "../utils/numbers.ts";
 
 import type { DeepPartial } from "../types.ts";
-import type { EventRecord } from "../event_emitter.ts";
+import { BaseSignal, Computed } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+export type SliderOrientation = "vertical" | "horizontal";
 
-/** Theme used by {SliderComponent} to style itself */
 export interface SliderTheme extends Theme {
   thumb: Theme;
 }
 
-/** Interface defining object that {SliderComponent}'s constructor can interpret */
-export interface SliderComponentOptions extends PlaceComponentOptions {
-  value: number;
-  min: number;
-  max: number;
-  step: number;
-  direction: "horizontal" | "vertical";
-  adjustThumbSize?: boolean;
-  theme?: DeepPartial<SliderTheme>;
-}
-
-/** Complementary interface defining what's accessible in {ScrollableViewComponent} class in addition to {SliderComponentOptions} */
-export interface SliderComponentPrivate {
-  adjustThumbSize: boolean;
-  theme: SliderTheme;
+export interface SliderOptions extends ComponentOptions {
+  min: number | BaseSignal<number>;
+  max: number | BaseSignal<number>;
+  step: number | BaseSignal<number>;
+  value: number | BaseSignal<number>;
+  adjustThumbSize: boolean | BaseSignal<boolean>;
+  orientation: SliderOrientation | BaseSignal<SliderOrientation>;
+  theme: DeepPartial<SliderTheme, "thumb">;
 }
 
-/** Implementation for {SliderComponent} class */
-export type SliderComponentImplementation = SliderComponentOptions & SliderComponentPrivate;
-
-/** EventMap that {SliderComponent} uses */
-export type SliderComponentEventMap = {
-  valueChange: EmitterEvent<[SliderComponent<EventRecord>]>;
-};
-
-/** Component that allows user to input number by sliding a handle */
-export class SliderComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends BoxComponent<EventMap & SliderComponentEventMap> implements SliderComponentImplementation {
+export class Slider extends Box {
+  declare drawnObjects: { box: BoxObject; thumb: BoxObject };
   declare theme: SliderTheme;
 
-  direction: "horizontal" | "vertical";
-  min: number;
-  max: number;
-  step: number;
-  #value: number;
-  adjustThumbSize: boolean;
+  min: BaseSignal<number>;
+  max: BaseSignal<number>;
+  step: BaseSignal<number>;
+  value: BaseSignal<number>;
+  adjustThumbSize: BaseSignal<boolean>;
+  orientation: BaseSignal<SliderOrientation>;
 
-  constructor(options: SliderComponentOptions) {
+  constructor(options: SliderOptions) {
     super(options);
-    this.direction = options.direction;
-    this.min = options.min;
-    this.max = options.max;
-    this.#value = options.value;
-    this.step = options.step;
-    this.theme.thumb = hierarchizeTheme(options.theme?.thumb ?? {});
-    this.adjustThumbSize = options.adjustThumbSize ?? false;
-
-    const lastMove = { x: -1, y: -1, time: 0 };
-    this.on("keyPress", ({ key, ctrl, meta, shift }) => {
-      if (ctrl || meta || shift) return;
+    this.min = signalify(options.min);
+    this.max = signalify(options.max);
+    this.step = signalify(options.step);
+    this.value = signalify(options.value ?? 0);
+    this.orientation = signalify(options.orientation);
+    this.adjustThumbSize = signalify(options.adjustThumbSize ?? false);
+
+    this.on("keyPress", ({ key, ctrl, shift, meta }) => {
+      if (ctrl || shift || meta) return;
+
+      const min = this.min.peek();
+      const max = this.max.peek();
+      const step = this.step.peek();
+      const value = this.value.peek();
 
       switch (key) {
         case "up":
         case "right":
-          this.value += this.step;
+          this.value.value = clamp(value + step, min, max);
           break;
         case "down":
         case "left":
-          this.value -= this.step;
+          this.value.value = clamp(value - step, min, max);
           break;
       }
     });
 
-    this.on("mousePress", ({ x, y, drag }) => {
-      if (Date.now() - lastMove.time > 300) {
-        lastMove.x = -1;
-        lastMove.y = -1;
-      }
-
-      if (!drag || (this.state !== "active" && this.state !== "focused")) return;
+    this.on("mousePress", ({ drag, movementX, movementY, ctrl, shift, meta }) => {
+      if (!drag || ctrl || shift || meta) return;
 
-      switch (this.direction) {
-        case "horizontal":
-          if (lastMove.x === -1) break;
-          this.value += (x - lastMove.x) * this.step;
-          break;
-        case "vertical":
-          if (lastMove.y === -1) break;
-          this.value += (y - lastMove.y) * this.step;
-          break;
-      }
+      const { min, max, step, value, orientation } = this;
 
-      lastMove.x = x;
-      lastMove.y = y;
-      lastMove.time = Date.now();
+      value.value = clamp(
+        value.peek() + (orientation.peek() === "horizontal" ? movementX : movementY) * step.peek(),
+        min.peek(),
+        max.peek(),
+      );
     });
-  }
-
-  get value(): number {
-    return this.#value;
-  }
 
-  set value(value) {
-    const prev = this.#value;
-    this.#value = clamp(value, this.min, this.max);
+    this.on("mouseScroll", ({ scroll }) => {
+      const { min, max, step, value } = this;
 
-    if (this.#value !== prev) {
-      this.emit("valueChange", this);
-    }
+      this.value.value = clamp(value.peek() + scroll * step.peek(), min.peek(), max.peek());
+    });
   }
 
   draw(): void {
     super.draw();
 
-    const { theme, state, value, min, max, direction } = this;
-    const { canvas } = this.tui;
-    const { column, row, width, height } = this.rectangle;
-
-    const normalizedValue = normalize(value, min, max);
-
-    const thumbStyle = theme.thumb[state];
-
-    switch (direction) {
-      case "horizontal":
-        {
-          const thumbWidth = this.adjustThumbSize ? ~~((width - 1) / (max - min)) : 1;
-
-          canvas.draw(
-            column + normalizedValue * (width - thumbWidth),
-            row,
-            thumbStyle((" ".repeat(Math.max(thumbWidth, 1)) + "\n").repeat(height)),
+    const thumbRectangle = { column: 0, row: 0, width: 0, height: 0 };
+    const thumb = new BoxObject({
+      view: this.view,
+      zIndex: this.zIndex,
+      canvas: this.tui.canvas,
+      style: new Computed(() => this.theme.thumb[this.state.value]),
+      rectangle: new Computed(() => {
+        const value = this.value.value;
+        const min = this.min.value;
+        const max = this.max.value;
+
+        const { column, row, width, height } = this.rectangle.value;
+        const horizontal = this.orientation.value === "horizontal";
+        const normalizedValue = normalize(value, min, max);
+
+        if (horizontal) {
+          const thumbSize = this.adjustThumbSize.value ? Math.round((width) / (max - min)) : 1;
+
+          thumbRectangle.column = Math.min(
+            column + width - thumbSize,
+            column + Math.round((width - 1) * normalizedValue),
           );
-        }
-        break;
-      case "vertical":
-        {
-          const thumbHeight = this.adjustThumbSize ? ~~((height - 1) / (max - min)) : 1;
-
-          canvas.draw(
-            column,
-            row + normalizedValue * (height - thumbHeight),
-            thumbStyle((" ".repeat(width) + "\n").repeat(Math.max(thumbHeight, 1))),
+          thumbRectangle.row = row;
+          thumbRectangle.width = thumbSize;
+          thumbRectangle.height = height;
+        } else {
+          const thumbSize = this.adjustThumbSize.value ? Math.round((height) / (max - min)) : 1;
+
+          thumbRectangle.column = column;
+          thumbRectangle.row = Math.min(
+            row + height - thumbSize,
+            row + Math.round((height - 1) * normalizedValue),
           );
+          thumbRectangle.width = width;
+          thumbRectangle.height = thumbSize;
         }
-        break;
-    }
+
+        return thumbRectangle;
+      }),
+    });
+
+    this.drawnObjects.thumb = thumb;
+    thumb.draw();
   }
 
-  interact(): void {
-    this.state = (this.state === "focused" || this.state === "active") ? "active" : "focused";
+  interact(method: "keyboard" | "mouse"): void {
+    super.interact(method);
+    const interactionInterval = Date.now() - this.lastInteraction.time;
+
+    this.state.value = this.state.peek() === "focused" && (interactionInterval < 500 || method === "keyboard")
+      ? "active"
+      : "focused";
   }
 }
diff --git a/src/components/table.ts b/src/components/table.ts
index 39846b1..434e1e2 100644
--- a/src/components/table.ts
+++ b/src/components/table.ts
@@ -1,301 +1,366 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 import { Component, ComponentOptions } from "../component.ts";
 
-import type { EventRecord } from "../event_emitter.ts";
-import { hierarchizeTheme, replaceEmptyStyle, Theme } from "../theme.ts";
+import { BoxObject } from "../canvas/box.ts";
+import { TextObject } from "../canvas/text.ts";
 
-import { DeepPartial, Rectangle } from "../types.ts";
-import { clamp } from "../utils/numbers.ts";
+import type { DeepPartial, Rectangle } from "../types.ts";
+import { Theme } from "../theme.ts";
 import { textWidth } from "../utils/strings.ts";
+import { clamp } from "../utils/numbers.ts";
+import { BaseSignal, Computed, Effect, Signal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+
+export const TableUnicodeCharacters = {
+  sharp: {
+    topLeft: "┌",
+    topRight: "┐",
+    bottomLeft: "└",
+    bottomRight: "┘",
+    leftHorizontal: "├",
+    rightHorizontal: "┤",
+    horizontal: "─",
+    vertical: "│",
+  },
+  rounded: {
+    topLeft: "╭",
+    topRight: "╮",
+    bottomLeft: "╰",
+    bottomRight: "╯",
+    leftHorizontal: "├",
+    rightHorizontal: "┤",
+    horizontal: "─",
+    vertical: "│",
+  },
+};
 
-export const sharpTableFramePieces = {
-  topLeft: "┌",
-  topRight: "┐",
-  bottomLeft: "└",
-  bottomRight: "┘",
-  leftHorizontal: "├",
-  rightHorizontal: "┤",
-  horizontal: "─",
-  vertical: "│",
-} as const;
-
-export const roundedTableFramePieces = {
-  topLeft: "╭",
-  topRight: "╮",
-  bottomLeft: "╰",
-  bottomRight: "╯",
-  leftHorizontal: "├",
-  rightHorizontal: "┤",
-  horizontal: "─",
-  vertical: "│",
-  topHorizontal: "┬",
-  bottomHorizontal: "┴",
-  cross: "┼",
-} as const;
-
-/** Type that specifies structore of object that defines how table frame looks like  */
-export type TableFramePieceType = {
-  [key in keyof typeof sharpTableFramePieces]: string;
+export type TableUnicodeCharactersType = {
+  [key in keyof typeof TableUnicodeCharacters["rounded"]]: string;
 };
 
-/** Theme used by {TableComponent} to style itself */
 export interface TableTheme extends Theme {
-  /** Style for table headers */
+  frame: Theme;
   header: Theme;
-  /** Style for currently selected row */
   selectedRow: Theme;
-  /** Style for frame surrounding table */
-  frame: Theme;
 }
 
-/** Object that determines text & width of a column in {TableComponent}'s headers */
-export interface TableHeader {
-  /** Text displayed above column */
+export type TableHeader<WidthDefined extends boolean> = {
   title: string;
-  /** Enforced width of a column */
-  width: number;
-}
+} & (WidthDefined extends true ? { width: number } : { width?: number });
 
-/** Interface defining object that {TableComponent}'s constructor can interpret */
-export interface TableComponentOptions extends Omit<ComponentOptions, "rectangle"> {
-  theme: DeepPartial<TableTheme>;
-  /**
-   *  Headers detailing size & text displayed for each data column
-   *  When string is used width is determined by maximal width of either text or data in column
-   */
-  headers: (TableHeader | string)[];
-  /** Data displayed by table */
-  data: string[][];
-  /**
-   *  Position and size of component
-   *  {TableComponent}'s rectangle doesn't include `width` property as width is defined by headers and table data
-   */
+export interface TableOptions extends Omit<ComponentOptions, "rectangle"> {
+  theme: DeepPartial<TableTheme, "frame" | "header" | "selectedRow">;
+  headers: TableHeader<false>[];
   rectangle: Omit<Rectangle, "width">;
-  /** Option that changes characters that surround {TableComponent} */
-  framePieces?: "sharp" | "rounded" | TableFramePieceType;
+  data: string[][];
+  charMap: keyof typeof TableUnicodeCharacters | TableUnicodeCharactersType;
 }
 
-/** Implementation for {TableComponent} class */
-export type TableComponentImplementation = Omit<TableComponentOptions, "rectangle"> & {
-  rectangle: Rectangle;
-};
-
-/** Component that can be pressed */
-export class TableComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends Component<EventMap> implements TableComponentImplementation {
+export class Table extends Component {
   declare theme: TableTheme;
-
-  #lastInteraction = 0;
-  #lastSelectedRow = 0;
-  #rectangle: Rectangle;
-
-  rowOffset: number;
-  headers: TableHeader[];
-  data: string[][];
-  selectedRow: number;
-  framePieces: "sharp" | "rounded" | TableFramePieceType;
-
-  constructor(options: TableComponentOptions) {
+  declare drawnObjects: {
+    frame: [
+      top: TextObject,
+      bottom: TextObject,
+      spacer: TextObject,
+      left: BoxObject,
+      right: BoxObject,
+    ];
+
+    header: TextObject;
+    data: TextObject[];
+  };
+
+  data: BaseSignal<string[][]>;
+  headers: BaseSignal<TableHeader<true>[]>;
+  charMap: BaseSignal<TableUnicodeCharactersType>;
+  selectedRow: BaseSignal<number>;
+  offsetRow: BaseSignal<number>;
+
+  constructor(options: TableOptions) {
     super(options as unknown as ComponentOptions);
 
-    this.theme.frame = hierarchizeTheme(options.theme.frame ?? {});
-    this.theme.selectedRow = hierarchizeTheme(options.theme.selectedRow ?? {});
-    this.theme.header = hierarchizeTheme(options.theme.header ?? {});
-
-    this.framePieces = options.framePieces ?? "sharp";
-    this.rowOffset = 0;
-    this.selectedRow = 0;
-    this.data = options.data;
-    this.headers = options.headers.map((header, i) => {
-      let title = "";
-      let width = 0;
-
-      if (typeof header === "object") {
-        title = header.title;
-        width = header.width;
-      } else {
-        title = header;
+    this.data = signalify(options.data, { deepObserve: true });
+    this.charMap = signalify(
+      typeof options.charMap === "string" ? TableUnicodeCharacters[options.charMap] : options.charMap,
+      { deepObserve: true },
+    );
+    this.headers = signalify(options.headers as TableHeader<true>[], { deepObserve: true });
+    this.selectedRow = new Signal(0);
+    this.offsetRow = new Signal(0);
+
+    new Effect(() => {
+      const headers = this.headers.value;
+      let width = 1;
+      for (let i = 0; i < headers.length; ++i) {
+        const header = headers[i];
+        header.width = Math.max(
+          textWidth(header.title),
+          this.data.value.reduce((a, b) => Math.max(a, textWidth(b[i])), 0),
+        );
+        width += header.width + 1;
       }
-
-      return {
-        title,
-        width: width || Math.max(
-          textWidth(title),
-          this.data.reduce((a, b) => Math.max(a, textWidth(b[i])), 0),
-        ),
-      };
+      this.rectangle.value.width = width;
     });
 
-    const { column, row, height } = options.rectangle;
-
-    this.#rectangle = {
-      column,
-      row,
-      width: -1,
-      height,
-    };
+    this.data.subscribe((data) => {
+      const dataDrawObjects = this.drawnObjects.data?.length;
+      if (!dataDrawObjects) return;
+      if (data.length > dataDrawObjects) {
+        this.#fillDataDrawObjects();
+      } else if (data.length < dataDrawObjects) {
+        this.#popUnusedDataDrawObjects();
+      }
+    });
 
     this.on("keyPress", ({ key, ctrl, meta, shift }) => {
       if (ctrl || meta || shift) return;
 
-      const lastDataRow = this.data.length - 1;
+      const { height } = this.rectangle.peek();
+      const lastDataRow = this.data.peek().length - 1;
+
+      const { selectedRow, offsetRow } = this;
 
       switch (key) {
         case "up":
-          --this.selectedRow;
+          --selectedRow.value;
           break;
         case "down":
-          ++this.selectedRow;
+          ++selectedRow.value;
           break;
         case "pageup":
-          this.selectedRow -= ~~(lastDataRow / 100);
+          selectedRow.value -= ~~(lastDataRow / 100);
           break;
         case "pagedown":
-          this.selectedRow += ~~(lastDataRow / 100);
+          selectedRow.value += ~~(lastDataRow / 100);
           break;
         case "home":
-          this.selectedRow = 0;
+          selectedRow.value = 0;
           break;
         case "end":
-          this.selectedRow = lastDataRow;
+          selectedRow.value = lastDataRow;
           break;
       }
 
-      this.selectedRow = clamp(this.selectedRow, 0, lastDataRow);
-      this.rowOffset = clamp(this.selectedRow - ~~((height - 4) / 2), 0, lastDataRow - height + 5);
+      selectedRow.value = clamp(selectedRow.peek(), 0, lastDataRow - 1);
+      offsetRow.value = clamp(selectedRow.peek() - ~~((height - 4) / 2), 0, lastDataRow - height + 5);
     });
 
-    this.on("mousePress", ({ scroll, y, shift }) => {
-      const { row, height } = this.#rectangle;
+    this.on("mouseEvent", (mouseEvent) => {
+      if (mouseEvent.ctrl || mouseEvent.meta || mouseEvent.shift) return;
+      const { y } = mouseEvent;
+      const { row, height } = this.rectangle.peek();
 
-      const lastDataRow = this.data.length - 1;
+      const lastDataRow = this.data.peek().length - 1;
 
-      if (scroll !== 0) {
-        if (shift) scroll *= ~~(lastDataRow / 100);
-        this.rowOffset = clamp(this.rowOffset + scroll, 0, lastDataRow - height + 5);
-      } else if (y >= row + 3 && y <= row + height - 2) {
-        const dataRow = y - row + this.rowOffset - 3;
-        const clampedRow = clamp(dataRow, 0, lastDataRow);
-        if (dataRow !== clampedRow) return;
-        this.selectedRow = dataRow;
+      if ("scroll" in mouseEvent) {
+        this.offsetRow.value = clamp(this.offsetRow.peek() + mouseEvent.scroll, 0, lastDataRow - height + 5);
+      } else if ("button" in mouseEvent && y >= row + 3 && y <= row + height - 2) {
+        const dataRow = y - row + this.offsetRow.peek() - 3;
+        if (dataRow !== clamp(dataRow, 0, lastDataRow)) return;
+        this.selectedRow.value = dataRow;
       }
     });
   }
 
-  get rectangle(): Rectangle {
-    return {
-      ...this.#rectangle,
-      width: this.headers.reduce<number>(
-        // + 1 because of spacing between each header
-        (a, b) => a + b.width + 1,
-        0,
-        // + 1 because of frames  on each side
-      ) + 1,
-    };
-  }
-
-  set rectangle(rectangle) {
-    this.#rectangle = rectangle;
-  }
-
   draw(): void {
-    const { style, theme, state, data, headers, framePieces } = this;
-    const frameStyle = replaceEmptyStyle(theme.frame[state], style);
-    const headerStyle = replaceEmptyStyle(theme.header[state], style);
-    const selectedRowStyle = replaceEmptyStyle(theme.selectedRow[state], style);
+    super.draw();
 
     const { canvas } = this.tui;
-    const { column, row, width, height } = this.rectangle;
-
-    canvas.draw(column, row, style((" ".repeat(width) + "\n").repeat(height)));
+    const { drawnObjects } = this;
 
     // Drawing header cells
-    {
-      let colOffset = 0;
-      for (const header of headers) {
-        canvas.draw(column + colOffset + 1, row + 1, headerStyle(header.title));
-        colOffset += header.width + 1;
-      }
-    }
-
-    // Drawing data cells
-    {
-      let colOffset = 0;
-      const lastRow = row + height - 1;
-      const lastColumn = column + width - 1;
-      for (const [r, rowData] of data.entries()) {
-        if (r < this.rowOffset) continue;
-        const drawRow = row + r + 3 - this.rowOffset;
-        if (drawRow >= lastRow) break;
-
-        const isSelected = r === this.selectedRow;
-        const rowStyle = isSelected ? selectedRowStyle : style;
-        if (isSelected) {
-          canvas.draw(column, drawRow, rowStyle(" ".repeat(width)));
+    const headerRectangle = { column: 0, row: 0 };
+    const header = new TextObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      style: new Computed(() => this.theme.header[this.state.value]),
+      rectangle: new Computed(() => {
+        const { column, row } = this.rectangle.value;
+        headerRectangle.column = column + 1;
+        headerRectangle.row = row + 1;
+        return headerRectangle;
+      }),
+      value: new Computed(() => {
+        // associate computed with this.data
+        this.data.value;
+
+        const headers = this.headers.value;
+        let value = "";
+
+        for (const header of headers) {
+          value += header.title + " ".repeat(header.width + 1 - textWidth(header.title));
         }
 
-        colOffset = 0;
-
-        for (const [c, colData] of rowData.entries()) {
-          const drawColumn = column + colOffset + 1;
-          if (drawColumn >= lastColumn) continue;
+        return value;
+      }),
+    });
 
-          const headerWidth = headers[c].width;
+    header.draw();
+    drawnObjects.header = header;
 
-          canvas.draw(drawColumn, drawRow, rowStyle(colData), {
-            column: drawColumn,
-            row: drawRow,
-            width: Math.min(
-              lastColumn - drawColumn - 1,
-              headerWidth - 1,
-            ),
-            height: 1,
-          });
-          colOffset += headerWidth + 1;
-        }
-      }
-    }
+    // Drawing data cells
+    drawnObjects.data = [];
+    this.#fillDataDrawObjects();
+
+    // Drawing frame
+    const frameStyleSignal = new Computed(() => this.theme.frame[this.state.value]);
+
+    const topRectangle = { column: 0, row: 0 };
+    const top = new TextObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      style: frameStyleSignal,
+      rectangle: new Computed(() => {
+        const { column, row } = this.rectangle.value;
+        topRectangle.column = column;
+        topRectangle.row = row;
+        return topRectangle;
+      }),
+      value: new Computed(() => {
+        const { topLeft, horizontal, topRight } = this.charMap.value;
+        return topLeft + horizontal.repeat(this.rectangle.value.width - 2) + topRight;
+      }),
+    });
 
-    // Render frame
-    const pieces = framePieces === "sharp"
-      ? sharpTableFramePieces
-      : framePieces === "rounded"
-      ? roundedTableFramePieces
-      : framePieces;
+    const bottomRectangle = { column: 0, row: 0 };
+    const bottom = new TextObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      style: frameStyleSignal,
+      rectangle: new Computed(() => {
+        const { column, row, height } = this.rectangle.value;
+        bottomRectangle.column = column;
+        bottomRectangle.row = row + height - 1;
+        return bottomRectangle;
+      }),
+      value: new Computed(() => {
+        const { bottomLeft, horizontal, bottomRight } = this.charMap.value;
+        return bottomLeft + horizontal.repeat(this.rectangle.value.width - 2) + bottomRight;
+      }),
+    });
 
-    canvas.draw(column, row, frameStyle(pieces.topLeft));
-    canvas.draw(column + width - 1, row, frameStyle(pieces.topRight));
+    const verticalCharMapSignal = new Computed(() => this.charMap.value.vertical);
+
+    const leftRectangle = { column: 0, row: 0, width: 1, height: 0 };
+    const left = new BoxObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      style: frameStyleSignal,
+      filler: verticalCharMapSignal,
+      rectangle: new Computed(() => {
+        const { column, row, height } = this.rectangle.value;
+        leftRectangle.column = column;
+        leftRectangle.row = row + 1;
+        leftRectangle.height = height - 2;
+        return leftRectangle;
+      }),
+    });
 
-    for (let y = row + 1; y < row + height - 1; ++y) {
-      canvas.draw(column, y, frameStyle(pieces.vertical));
-      canvas.draw(column + width - 1, y, frameStyle(pieces.vertical));
-    }
+    const rightRectangle = { column: 0, row: 0, width: 1, height: 0 };
+    const right = new BoxObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      filler: verticalCharMapSignal,
+      style: frameStyleSignal,
+      rectangle: new Computed(() => {
+        const { column, row, width, height } = this.rectangle.value;
+        rightRectangle.column = column + width - 1;
+        rightRectangle.row = row + 1;
+        rightRectangle.height = height - 2;
+        return rightRectangle;
+      }),
+    });
 
-    canvas.draw(column, row + 2, frameStyle(pieces.leftHorizontal));
-    canvas.draw(column + width - 1, row + 2, frameStyle(pieces.rightHorizontal));
+    const middleRectangle = { column: 0, row: 0 };
+    const spacer = new TextObject({
+      canvas,
+      zIndex: this.zIndex,
+      style: frameStyleSignal,
+      rectangle: new Computed(() => {
+        const { column, row } = this.rectangle.value;
+        middleRectangle.column = column;
+        middleRectangle.row = row + 2;
+        return middleRectangle;
+      }),
+      value: new Computed(() => {
+        const { leftHorizontal, horizontal, rightHorizontal } = this.charMap.value;
+        return leftHorizontal + horizontal.repeat(this.rectangle.value.width - 2) + rightHorizontal;
+      }),
+    });
 
-    for (let x = column + 1; x < column + width - 1; ++x) {
-      canvas.draw(x, row, frameStyle(pieces.horizontal));
-      canvas.draw(x, row + 2, frameStyle(pieces.horizontal));
-      canvas.draw(x, row + height - 1, frameStyle(pieces.horizontal));
-    }
+    drawnObjects.frame = [top, bottom, spacer, left, right];
 
-    canvas.draw(column, row + height - 1, frameStyle(pieces.bottomLeft));
-    canvas.draw(column + width - 1, row + height - 1, frameStyle(pieces.bottomRight));
+    top.draw();
+    bottom.draw();
+    left.draw();
+    right.draw();
+    spacer.draw();
   }
 
-  interact(method?: "mouse" | "keyboard"): void {
-    const now = Date.now();
-    const interactionDelay = now - this.#lastInteraction;
+  interact(method: "mouse" | "keyboard"): void {
+    const interactionInterval = Date.now() - this.lastInteraction.time;
 
-    this.state = this.state === "focused" &&
-        ((this.selectedRow == this.#lastSelectedRow && interactionDelay < 500) || method === "keyboard")
+    this.state.value = this.state.peek() === "focused" && (interactionInterval < 500 || method === "keyboard")
       ? "active"
       : "focused";
 
-    this.#lastInteraction = now;
-    this.#lastSelectedRow = this.selectedRow;
+    super.interact(method);
+  }
+
+  #fillDataDrawObjects(): void {
+    const { canvas } = this.tui;
+    const { drawnObjects } = this;
+
+    for (let i = drawnObjects.data.length; i < this.rectangle.peek().height - 4; ++i) {
+      const textRectangle = { column: 0, row: 0 };
+      const text = new TextObject({
+        canvas,
+        view: this.view,
+        zIndex: this.zIndex,
+        style: new Computed(() => {
+          const offsetRow = this.offsetRow.value;
+          const selectedRow = this.selectedRow.value;
+          const selectedRowStyle = this.theme.selectedRow[this.state.value];
+          const style = this.style.value;
+          return (i + offsetRow) === selectedRow ? selectedRowStyle : style;
+        }),
+        value: new Computed(() => {
+          const dataRow = this.data.value[i + this.offsetRow.value];
+          const headers = this.headers.value;
+
+          let string = "";
+          let prevData = "";
+          for (const [j, dataCell] of dataRow.entries()) {
+            if (j !== 0) string += " ".repeat(headers[j - 1].width - textWidth(prevData) + 1);
+            string += dataCell;
+            prevData = dataCell;
+          }
+
+          string += " ".repeat(this.rectangle.value.width - 1 - textWidth(string));
+          return string;
+        }),
+        rectangle: new Computed(() => {
+          const { column, row } = this.rectangle.value;
+          textRectangle.column = column + 1;
+          textRectangle.row = row + i + 3;
+          return textRectangle;
+        }),
+      });
+
+      drawnObjects.data.push(text);
+      text.draw();
+    }
+  }
+
+  #popUnusedDataDrawObjects(): void {
+    for (const dataCell of this.drawnObjects.data.splice(this.data.value.length)) {
+      dataCell.erase();
+    }
   }
 }
diff --git a/src/components/text.ts b/src/components/text.ts
new file mode 100644
index 0000000..81e5032
--- /dev/null
+++ b/src/components/text.ts
@@ -0,0 +1,48 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { TextObject } from "../canvas/text.ts";
+import { Component, ComponentOptions } from "../component.ts";
+import { BaseSignal } from "../signals.ts";
+import { Rectangle } from "../types.ts";
+import { signalify } from "../utils/signals.ts";
+
+export type TextRectangle = Omit<Rectangle, "width" | "height"> & {
+  width?: number;
+};
+
+export interface TextOptions extends Omit<ComponentOptions, "rectangle"> {
+  text: string | BaseSignal<string>;
+  rectangle: TextRectangle | BaseSignal<TextRectangle>;
+  overwriteWidth?: boolean | BaseSignal<boolean>;
+  multiCodePointSupport?: boolean | BaseSignal<boolean>;
+}
+
+export class Text extends Component {
+  declare drawnObjects: { text: TextObject };
+
+  text: BaseSignal<string>;
+  overwriteRectangle: BaseSignal<boolean>;
+  multiCodePointSupport: BaseSignal<boolean>;
+
+  constructor(options: TextOptions) {
+    super(options as unknown as ComponentOptions);
+    this.text = signalify(options.text);
+    this.overwriteRectangle = signalify(options.overwriteWidth ?? false);
+    this.multiCodePointSupport = signalify(options.multiCodePointSupport ?? false);
+  }
+
+  draw(): void {
+    const text = new TextObject({
+      canvas: this.tui.canvas,
+      view: this.view,
+      value: this.text,
+      style: this.style,
+      zIndex: this.zIndex,
+      rectangle: this.rectangle,
+      multiCodePointSupport: this.multiCodePointSupport,
+      overwriteRectangle: this.overwriteRectangle,
+    });
+
+    this.drawnObjects.text = text;
+    text.draw();
+  }
+}
diff --git a/src/components/textbox.ts b/src/components/textbox.ts
index 204ffca..a1333e4 100644
--- a/src/components/textbox.ts
+++ b/src/components/textbox.ts
@@ -1,279 +1,318 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { ComponentEventMap, PlaceComponentOptions } from "../component.ts";
-import { BoxComponent } from "./box.ts";
-import { EmitterEvent } from "../event_emitter.ts";
-
-import { insertAt } from "../utils/strings.ts";
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Box } from "./box.ts";
+import { ComponentOptions } from "../component.ts";
+
+import { BoxObject } from "../canvas/box.ts";
+import { TextObject } from "../canvas/text.ts";
+import { Theme } from "../theme.ts";
+import { DeepPartial } from "../types.ts";
+import { cropToWidth, insertAt } from "../utils/strings.ts";
 import { clamp } from "../utils/numbers.ts";
+import { BaseSignal, Computed, Effect, Signal } from "../signals.ts";
+import { signalify } from "../utils/signals.ts";
+import { KeyPressEvent } from "../input_reader/types.ts";
 
-import type { EventRecord } from "../event_emitter.ts";
-import { emptyStyle, hierarchizeTheme, Style, Theme } from "../theme.ts";
-import type { DeepPartial, KeyPress } from "../types.ts";
+export interface CursorPosition {
+  x: number;
+  y: number;
+}
 
-export interface TextboxTheme extends Theme {
+export interface TextBoxTheme extends Theme {
+  value: Theme;
+  cursor: Theme;
   /** Style for numbers counting textbox rows */
   lineNumbers: Theme;
   /** Style for currently selected text row */
   highlightedLine: Theme;
-  /** Style for placeholder text */
-  placeholder: Style;
 }
 
-/** Interface defining object that {TextboxComponent}'s constructor can interpret */
-export interface TextboxComponentOptions extends PlaceComponentOptions {
-  theme?: DeepPartial<TextboxTheme>;
-  /** Whether texbox should allow new lines */
-  multiline?: boolean;
-  /** Whether textbox value should be starred ("*") */
-  hidden?: boolean;
-  /** Current value of textbox */
-  value?: string;
-  /** Text displayed as a proposition of example text input */
-  placeholder?: string;
+export interface TextBoxOptions extends ComponentOptions {
+  text?: string | BaseSignal<string>;
+  validator?: RegExp | BaseSignal<RegExp>;
+  theme: DeepPartial<TextBoxTheme, "cursor">;
+  multiCodePointSupport?: boolean | BaseSignal<boolean>;
   /** Whether to highlight currently selected text row */
-  lineHighlighting?: boolean;
+  lineHighlighting?: boolean | BaseSignal<boolean>;
   /** Whether to number textbox rows */
-  lineNumbering?: boolean;
+  lineNumbering?: boolean | BaseSignal<boolean>;
   /** Function that defines what key does what while textbox is focused/active */
-  keyboardHandler?: (textbox: TextboxComponent<EventRecord>) => (keyPress: KeyPress) => void;
+  keyboardHandler?: (keyPress: KeyPressEvent) => void;
 }
 
-/** Complementary interface defining what's accessible in {TextboxComponent} class in addition to {TextboxComponentOptions} */
-export interface TextboxComponentPrivate {
-  theme: TextboxTheme;
-  lineHighlighting: boolean;
-  lineNumbering: boolean;
-  multiline: boolean;
-  hidden: boolean;
-  value: string;
-}
-
-/** Implementation for {TextboxComponent} class */
-export type TextboxComponentImplementation = TextboxComponentOptions & TextboxComponentPrivate;
-
-/** EventMap that {TextboxComponent} uses */
-export type TextboxComponentEventMap = ComponentEventMap & {
-  valueChange: EmitterEvent<[TextboxComponent<EventRecord>]>;
-};
-
-/** Default keyboard handler for {TextboxComponent} */
-export function textboxKeyboardHandler(textbox: TextboxComponent<EventRecord>): (keyPress: KeyPress) => void {
-  return (keyPress) => {
-    const { key, ctrl, meta } = keyPress;
-    if (ctrl || meta) return;
-
-    let { x, y } = textbox.cursorPosition;
-
-    const startValue = textbox.value;
-
-    if (key.length === 1) {
-      textbox.rawValue[y] = insertAt(textbox.rawValue[y], x, key);
-      ++x;
-    } else {
-      const currentLine = textbox.rawValue[y];
-      const endOfLine = x === currentLine.length;
-
-      switch (key) {
-        case "space":
-          textbox.rawValue[y] = insertAt(textbox.rawValue[y], x, " ");
-          ++x;
-          break;
-        case "tab":
-          textbox.rawValue[y] = insertAt(textbox.rawValue[y], x, "  ");
-          ++x;
-          break;
-        case "up":
-          --y;
-          break;
-        case "down":
-          y = Math.min(++y, textbox.rawValue.length - 1);
-          break;
-        case "left":
-          --x;
-          break;
-        case "right":
-          ++x;
-          break;
-        case "home":
-          x = 0;
-          break;
-        case "end":
-          x = currentLine.length;
-          break;
-        case "return":
-          if (!textbox.multiline) break;
-
-          if (!endOfLine) {
-            const splitLines = [currentLine.slice(0, x), currentLine.slice(x)];
-            textbox.rawValue.splice(y, 1, ...splitLines);
-            x = 0;
-          }
-          ++y;
-          break;
-        case "delete":
-          if (!endOfLine) {
-            textbox.rawValue[y] = currentLine.slice(0, x) + currentLine.slice(x + 1);
-          } else if (textbox.rawValue.length > y + 1) {
-            const combinedLines = currentLine + textbox.rawValue[y + 1];
-            textbox.rawValue.splice(y, 2, combinedLines);
-          }
-          break;
-        case "backspace":
-          if (y - 1 >= 0 && x === 0) {
-            const previousLine = textbox.rawValue[y - 1];
-            const combinedLines = previousLine + currentLine;
-            textbox.rawValue.splice(y - 1, 2, combinedLines);
-            --y;
-            x = previousLine.length;
-          } else if (x !== 0) {
-            textbox.rawValue[y] = currentLine.slice(0, x - 1) + currentLine.slice(x);
-            --x;
-          }
-          break;
-      }
-    }
-
-    y = Math.max(y, 0);
-    textbox.rawValue[y] ||= "";
-    x = clamp(x, 0, textbox.rawValue[y].length);
-    textbox.cursorPosition = { x, y };
-
-    if (textbox.value !== startValue) {
-      textbox.emit("valueChange", textbox);
-    }
+export class TextBox extends Box {
+  declare drawnObjects: {
+    box: BoxObject;
+    lines: TextObject[];
+    lineNumbers: TextObject[];
+    cursor: TextObject;
   };
-}
+  declare theme: TextBoxTheme;
 
-/**
- * Component that allows user to input text.
- * It implements most important ways to manipulate inputting text e.g.:
- *  - Arrows - Move cursor in specified direction
- *  - Return – Create new line
- *  - Home/End - Go to the start/end of the line
- *  - PgUp/PgDown - Go to the start/end of the text input
- *  - Delete/Backspace - Delete preceding/subsequent character
- */
-export class TextboxComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends BoxComponent<EventMap & TextboxComponentEventMap> implements TextboxComponentImplementation {
-  declare theme: TextboxTheme;
-
-  rawValue: string[] = [];
-  #placeholder?: string[];
-
-  cursorPosition: {
-    x: number;
-    y: number;
-  };
-  multiline: boolean;
-  hidden: boolean;
-  lineHighlighting: boolean;
-  lineNumbering: boolean;
-  placeholder?: string;
-
-  constructor(options: TextboxComponentOptions) {
-    super(options);
-    this.multiline = options.multiline ?? false;
-    this.lineHighlighting = options.lineHighlighting ?? false;
-    this.lineNumbering = options.lineNumbering ?? false;
-    this.hidden = options.hidden ?? false;
-    this.value = options.value ?? "";
-    this.cursorPosition = { x: this.rawValue.at(-1)?.length ?? 0, y: this.rawValue.length - 1 ?? 0 };
-    this.placeholder = options.placeholder;
-    if (this.placeholder) {
-      this.#placeholder = this.placeholder.split("\n");
-    }
-
-    this.theme.placeholder = options.theme?.placeholder ?? emptyStyle;
-    this.theme.highlightedLine = hierarchizeTheme(options.theme?.highlightedLine ?? {});
-    this.theme.lineNumbers = hierarchizeTheme(options.theme?.lineNumbers ?? {});
+  #textLines: Computed<string[]>;
 
-    this.on("keyPress", textboxKeyboardHandler(this));
-  }
+  text: BaseSignal<string>;
+  lineNumbering: BaseSignal<boolean>;
+  lineHighlighting: BaseSignal<boolean>;
+  cursorPosition: BaseSignal<CursorPosition>;
+  multiCodePointSupport: BaseSignal<boolean>;
 
-  get value(): string {
-    return this.rawValue.join("\n");
-  }
+  constructor(options: TextBoxOptions) {
+    super(options);
 
-  set value(value: string) {
-    const split = value.split("\n");
-    this.rawValue = this.multiline ? split : [split.join("")];
+    this.theme.value ??= this.theme;
+    this.theme.lineNumbers ??= this.theme;
+    this.theme.highlightedLine ??= this.theme;
+
+    this.cursorPosition = new Signal({ x: 0, y: 0 }, { deepObserve: true });
+
+    this.text = signalify(options.text ?? "");
+    this.lineNumbering = signalify(options.lineNumbering ?? false);
+    this.lineHighlighting = signalify(options.lineHighlighting ?? false);
+    this.multiCodePointSupport = signalify(options.multiCodePointSupport ?? false);
+
+    // FIXME: This creates unnecessary arrays each time it runs
+    this.#textLines = new Computed(() => this.text.value.split("\n"));
+
+    new Effect(() => {
+      this.#updateLineDrawObjects();
+    });
+
+    this.on(
+      "keyPress",
+      options.keyboardHandler ?? (({ key, ctrl, meta }) => {
+        if (ctrl || meta) return;
+
+        const cursorPosition = this.cursorPosition.peek();
+        const textLines = this.#textLines.peek();
+        const textLine = textLines[cursorPosition.y] ??= "";
+
+        let character: string;
+
+        switch (key) {
+          case "left":
+            --cursorPosition.x;
+            break;
+          case "right":
+            ++cursorPosition.x;
+            break;
+          case "up":
+            --cursorPosition.y;
+            break;
+          case "down":
+            if (textLines.length - 1 > cursorPosition.y) {
+              ++cursorPosition.y;
+            }
+            break;
+          case "home":
+            cursorPosition.x = 0;
+            return;
+          case "end":
+            cursorPosition.x = textLine.length;
+            return;
+
+          case "backspace":
+            if (cursorPosition.x === 0) {
+              if (cursorPosition.y === 0) return;
+              textLines[cursorPosition.y - 1] += textLines[cursorPosition.y];
+              textLines.splice(cursorPosition.y, 1);
+              --cursorPosition.y;
+              cursorPosition.x = textLines[cursorPosition.y].length;
+            } else {
+              textLines[cursorPosition.y] = textLine.slice(0, cursorPosition.x - 1) + textLine.slice(cursorPosition.x);
+              cursorPosition.x = clamp(cursorPosition.x - 1, 0, textLine.length);
+            }
+            break;
+          case "delete":
+            textLines[cursorPosition.y] = textLine.slice(0, cursorPosition.x) + textLine.slice(cursorPosition.x + 1);
+
+            if (cursorPosition.x === textLine.length && textLines.length - 1 > cursorPosition.y) {
+              textLines[cursorPosition.y] += textLines[cursorPosition.y + 1];
+              textLines.splice(cursorPosition.y + 1, 1);
+            }
+            break;
+          case "return":
+            ++cursorPosition.y;
+            break;
+
+          case "space":
+            character = " ";
+            break;
+          case "tab":
+            character = "\t";
+            break;
+          default:
+            if (key.length > 1) return;
+            character = key;
+        }
+
+        cursorPosition.y = clamp(cursorPosition.y, 0, textLines.length);
+        cursorPosition.x = clamp(cursorPosition.x, 0, textLines[cursorPosition.y]?.length ?? 0);
+
+        if (character!) {
+          textLines[cursorPosition.y] = insertAt(textLine, cursorPosition.x, character);
+          ++cursorPosition.x;
+        }
+
+        this.text.value = textLines.join("\n");
+      }),
+    );
   }
 
   draw(): void {
     super.draw();
 
     const { canvas } = this.tui;
+    const { drawnObjects } = this;
+
+    drawnObjects.lineNumbers = [];
+    drawnObjects.lines = [];
+
+    this.#updateLineDrawObjects();
+
+    const cursorRectangle = { column: 0, row: 0, width: 1, height: 1 };
+    const cursor = new TextObject({
+      canvas,
+      view: this.view,
+      zIndex: this.zIndex,
+      multiCodePointSupport: this.multiCodePointSupport,
+      value: new Computed(() => {
+        const cursorPosition = this.cursorPosition.value;
+        const value = this.#textLines.value[cursorPosition.y];
+        return value?.[cursorPosition.x] ?? " ";
+      }),
+      style: new Computed(() => this.theme.cursor[this.state.value]),
+      rectangle: new Computed(() => {
+        const cursorPosition = this.cursorPosition.value;
+        const { row, column, width, height } = this.rectangle.value;
+
+        cursorRectangle.row = row + Math.min(cursorPosition.y, height - 1);
+
+        if (this.lineNumbering.value) {
+          const lineNumbersWidth = this.drawnObjects.lineNumbers[0].rectangle.peek().width;
+          cursorRectangle.column = column + lineNumbersWidth + Math.min(cursorPosition.x, width - lineNumbersWidth - 1);
+        } else {
+          cursorRectangle.column = column + Math.min(cursorPosition.x, width - 1);
+        }
+
+        return cursorRectangle;
+      }),
+    });
+
+    drawnObjects.cursor = cursor;
+    cursor.draw();
+  }
 
-    let { column, row, width, height } = this.rectangle;
-    const textLineOffset = `${this.rawValue.length}`.length;
-
-    if (this.lineNumbering) {
-      column += textLineOffset;
-      width -= textLineOffset;
-    }
-
-    if (!this.value && !this.placeholder) return;
-    const isPlaceholder = !this.value;
-    const textArray = isPlaceholder ? this.#placeholder! : this.rawValue;
-
-    const textStyle = isPlaceholder && this.theme.placeholder
-      ? (text: string) => this.style(this.theme.placeholder(text).replaceAll("\x1b[0m", ""))
-      : this.style;
-
-    const { x, y } = this.cursorPosition;
-
-    const offsetX = Math.max(x - width + 1, 0);
-    const offsetY = Math.max(y - height + 1, 0);
-
-    const lineNumbersStyle = this.theme.lineNumbers[this.state];
-    const highlightedLineStyle = this.theme.highlightedLine[this.state];
-
-    for (const [i, line] of textArray.entries()) {
-      if (i < offsetY) continue;
-      if (i - offsetY >= height) break;
+  interact(method: "keyboard" | "mouse"): void {
+    this.state.value = "focused";
+    super.interact(method);
+  }
 
-      let lineText = line.slice(offsetX, offsetX + width);
-      lineText = this.hidden ? "*".repeat(lineText.length) : lineText;
+  #updateLineDrawObjects(): void {
+    const { lineNumbers, lines } = this.drawnObjects;
+    if (!lines) return;
 
-      if (this.lineHighlighting && i === y && highlightedLineStyle !== emptyStyle) {
-        lineText = highlightedLineStyle(lineText);
-        canvas.draw(column, row + i - offsetY, highlightedLineStyle(" ".repeat(width)));
+    const { canvas } = this.tui;
+    const elements = lines.length;
+    const { height } = this.rectangle.value;
+    const lineNumbering = this.lineNumbering.value;
+
+    for (let offset = 0; offset < Math.max(height, elements); ++offset) {
+      const lineNumber = lineNumbers[offset];
+      if (!lineNumber && lineNumbering) {
+        const lineNumberRectangle = { column: 0, row: 0, width: 0 };
+        const lineNumber = new TextObject({
+          canvas,
+          view: this.view,
+          zIndex: this.zIndex,
+          multiCodePointSupport: this.multiCodePointSupport,
+          style: new Computed(() => this.theme.lineNumbers[this.state.value]),
+          value: new Computed(() => {
+            const { height } = this.rectangle.value;
+            const cursorPosition = this.cursorPosition.value;
+
+            const lineNumber = offset + Math.max(cursorPosition.y - height + 1, 0) + 1;
+            const maxLineNumber = this.#textLines.value.length;
+
+            return `${lineNumber}`.padEnd(`${maxLineNumber}`.length, " ");
+          }),
+          rectangle: new Computed(() => {
+            const { row, column } = this.rectangle.value;
+            lineNumberRectangle.column = column;
+            lineNumberRectangle.row = row + offset;
+            return lineNumberRectangle;
+          }),
+        });
+
+        lineNumbers[offset] = lineNumber;
+        lineNumber.draw();
+      } else if (lineNumber && !lineNumbering) {
+        lineNumber.erase();
+        delete lineNumbers[offset];
       }
 
-      lineText = textStyle(lineText);
-
-      canvas.draw(
-        column,
-        row + i - offsetY,
-        lineText,
-      );
-
-      if (!this.lineNumbering) continue;
-
-      const rowNumber = `${i + 1}`;
-      const rowNumberText = lineNumbersStyle(
-        this.lineNumbering ? (rowNumber + " ".repeat(textLineOffset - rowNumber.length)) : "",
-      );
-
-      canvas.draw(
-        column - textLineOffset,
-        row + i - offsetY,
-        rowNumberText,
-      );
+      const line = lines[offset];
+      if (!line) {
+        const lineRectangle = { column: 0, row: 0, width: 0 };
+        const line = new TextObject({
+          canvas,
+          view: this.view,
+          zIndex: this.zIndex,
+          multiCodePointSupport: this.multiCodePointSupport,
+          style: new Computed(() => {
+            // associate computed with this.text
+            this.text.value;
+
+            const state = this.state.value;
+            const highlightLine = this.lineHighlighting.value;
+            const cursorPosition = this.cursorPosition.value;
+
+            const offsetY = Math.max(cursorPosition.y - this.rectangle.value.height + 1, 0);
+            const currentLine = offsetY + offset;
+
+            if (highlightLine && cursorPosition.y === currentLine) {
+              return this.theme.highlightedLine[state];
+            } else return this.theme.value[state];
+          }),
+          value: new Computed(() => {
+            const cursorPosition = this.cursorPosition.value;
+
+            let { width, height } = this.rectangle.value;
+            if (this.lineNumbering.value) {
+              const lineNumbersWidth = this.drawnObjects.lineNumbers[0].rectangle.peek().width;
+              width -= lineNumbersWidth;
+            }
+
+            const offsetX = cursorPosition.x - width + 1;
+            const offsetY = Math.max(cursorPosition.y - height + 1, 0);
+
+            const value = this.#textLines.value[offset + offsetY]?.replace("\t", " ") ?? "";
+
+            return cropToWidth(offsetX > 0 ? value.slice(offsetX, cursorPosition.x) : value, width).padEnd(width, " ");
+          }),
+          rectangle: new Computed(() => {
+            // associate computed with this.lineNumbering and this.#textLines
+            this.lineNumbering.value;
+            this.#textLines.value;
+
+            const { row, column } = this.rectangle.value;
+            lineRectangle.column = column;
+            lineRectangle.row = row + offset;
+
+            if (this.lineNumbering.value) {
+              const lineNumbersWidth = this.drawnObjects.lineNumbers[0].rectangle.peek().width;
+              lineRectangle.column += lineNumbersWidth;
+            }
+
+            return lineRectangle;
+          }),
+        });
+
+        lines[offset] = line;
+        line.draw();
+      } else if (offset >= height) {
+        line.erase();
+        delete lines[offset];
+      }
     }
-
-    if (this.state === "base") return;
-
-    canvas.draw(
-      column + Math.min(x, width - 1),
-      row + Math.min(y, height - 1),
-      textStyle("\x1b[7m" + (textArray[y][x] ?? " ") + "\x1b[0m"),
-    );
-  }
-
-  interact(): void {
-    this.state = "focused";
   }
 }
diff --git a/src/components/view.ts b/src/components/view.ts
deleted file mode 100644
index 4f5803b..0000000
--- a/src/components/view.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { Tui } from "../tui.ts";
-import { Canvas } from "../canvas.ts";
-import { Component, PlaceComponent, PlaceComponentOptions } from "../component.ts";
-
-import { SortedArray } from "../utils/sorted_array.ts";
-
-import type { Margin, Offset, Rectangle } from "../types.ts";
-import type { EventRecord } from "../event_emitter.ts";
-
-/** Interface describing object that disguises itself as {Canvas} and intercepts `draw` function and `rectangle` boundaries */
-export interface FakeCanvas extends Canvas {
-  canvas: Canvas;
-  rectangle: Rectangle;
-}
-
-/** Interface describing object that disguises itself as {Tui} and replaces `canvas` with {FakeCanvas} */
-export interface FakeTui extends Tui {
-  realTui: Tui;
-  canvas: FakeCanvas;
-}
-
-/** Interface defining object that {ViewComponent}'s constructor can interpret */
-export interface ViewComponentOptions extends PlaceComponentOptions {
-  rectangle: Rectangle;
-  /** Empty edge around `rectangle` */
-  margin?: Margin;
-}
-
-/** Complementary interface defining what's accessible in {ViewComponent} class in addition to {ViewComponentOptions} */
-export interface ViewComponentPrivate {
-  margin: Margin;
-}
-
-/** Implementation for {ViewComponent} class */
-export type ViewComponentImplementation = ViewComponentOptions & ViewComponentPrivate;
-
-/**
- * Component that can be assigned to other component's `view` property.
- * This allows components to be drawn independently from other components.
- */
-export class ViewComponent<
-  EventMap extends EventRecord = Record<never, never>,
-> extends PlaceComponent<EventMap> implements ViewComponentImplementation {
-  fakeTui: FakeTui;
-  offset: Offset;
-  maxOffset: Offset;
-  margin: Margin;
-  components: SortedArray<Component<EventRecord>>;
-
-  constructor(options: ViewComponentOptions) {
-    super(options);
-
-    this.offset = { x: 0, y: 0 };
-    this.maxOffset = { x: 0, y: 0 };
-    this.margin = options.margin ?? { top: 0, left: 0, right: 0, bottom: 0 };
-
-    this.components = new SortedArray();
-
-    const { canvas } = this.tui;
-    const fakeCanvas = { canvas } as unknown as FakeCanvas;
-    Object.setPrototypeOf(fakeCanvas, canvas);
-    Object.setPrototypeOf(fakeCanvas, {
-      draw: (drawColumn: number, drawRow: number, value: string) => {
-        const { x, y } = this.offset;
-        const { top, bottom, left, right } = this.margin;
-        const { column, row, width, height } = this.rectangle;
-
-        fakeCanvas.canvas.draw(drawColumn + column + left - x, drawRow + row + top - y, value, {
-          column,
-          row,
-          height: height - bottom - 1,
-          width: width - right - 1,
-        });
-      },
-    });
-
-    const { tui } = this;
-    const fakeTui = { realTui: tui, canvas: fakeCanvas } as FakeTui;
-    this.fakeTui = Object.setPrototypeOf(fakeTui, tui);
-
-    fakeTui.on("addComponent", (component) => {
-      if (component.view !== this || !component.rectangle) return;
-
-      component.tui = fakeTui;
-      component.view = this;
-
-      this.components.push(component);
-      this.updateOffsets(component);
-    });
-
-    fakeTui.on("removeComponent", (component) => {
-      if (component.view !== this) return;
-
-      component.tui = fakeTui.realTui;
-      component.view = undefined;
-
-      this.components.remove(component);
-      this.updateOffsets();
-    });
-  }
-
-  /** @param component if specified then checks and updates offsets when given component overflows current offsets otherwise it loops over components to recalculate offsets */
-  updateOffsets(component?: Component<EventRecord>): void {
-    const { top, bottom, left, right } = this.margin;
-
-    if (!component) {
-      this.maxOffset = { x: 0, y: 0 };
-
-      for (const component of this.components) {
-        const { column, row, width, height } = component.rectangle!;
-
-        this.maxOffset = {
-          x: Math.max(this.maxOffset.x, column + width + right + left - this.rectangle.width),
-          y: Math.max(this.maxOffset.y, row + height + bottom + top - this.rectangle.height),
-        };
-      }
-
-      return;
-    }
-
-    if (!component.rectangle) return;
-
-    const { column, row, width, height } = component.rectangle;
-
-    this.maxOffset = {
-      x: Math.max(this.maxOffset.x, column + width + right + left - this.rectangle.width),
-      y: Math.max(this.maxOffset.y, row + height + bottom + top - this.rectangle.height),
-    };
-  }
-
-  draw(): void {
-    super.draw();
-
-    const { style } = this;
-    const { canvas } = this.tui;
-    const { column, row, width, height } = this.rectangle;
-
-    canvas.draw(column, row, style((" ".repeat(width) + "\n").repeat(height)));
-  }
-}
diff --git a/src/controls.ts b/src/controls.ts
new file mode 100644
index 0000000..92d69ef
--- /dev/null
+++ b/src/controls.ts
@@ -0,0 +1,153 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Component } from "./component.ts";
+import { Tui } from "./tui.ts";
+import { DISABLE_MOUSE, ENABLE_MOUSE } from "./utils/ansi_codes.ts";
+import { getComponentClosestToTopLeftCorner, isInteractable } from "./utils/component.ts";
+import { fitsInRectangle } from "./utils/numbers.ts";
+
+const textEncoder = new TextEncoder();
+
+let lastSelectedComponent: Component;
+
+/**
+ * Enable handling of controlling Tui using keyboard
+ */
+export function handleKeyboardControls(tui: Tui): void {
+  tui.on("keyPress", ({ key, ctrl, shift, meta }) => {
+    if ((!ctrl && key !== "return") || shift || meta) return;
+
+    lastSelectedComponent ??= getComponentClosestToTopLeftCorner(
+      tui,
+      (object) => isInteractable(object) && object.visible.peek(),
+    );
+
+    if (!lastSelectedComponent) return;
+
+    let vectorX = 0;
+    let vectorY = 0;
+
+    switch (key) {
+      case "return":
+        lastSelectedComponent.interact("keyboard");
+        return;
+      case "up":
+        --vectorY;
+        break;
+      case "down":
+        ++vectorY;
+        break;
+      case "left":
+        --vectorX;
+        break;
+      case "right":
+        ++vectorX;
+        break;
+      default:
+        return;
+    }
+
+    const lastRectangle = lastSelectedComponent.rectangle.peek();
+
+    let bestCandidate: Component | undefined = undefined;
+    let bestCandidateDistance;
+
+    for (const component of tui.components) {
+      if (
+        component === lastSelectedComponent ||
+        !component.visible ||
+        component.subComponentOf ||
+        !isInteractable(component)
+      ) {
+        continue;
+      }
+
+      const rectangle = component.rectangle.peek();
+      if (
+        !(
+          (vectorX === 1 && rectangle.column > lastRectangle.column) ||
+          (vectorX === -1 && rectangle.column < lastRectangle.column) ||
+          vectorX === 0
+        ) || !(
+          (vectorY === 1 && rectangle.row > lastRectangle.row) ||
+          (vectorY === -1 && rectangle.row < lastRectangle.row) ||
+          vectorY === 0
+        )
+      ) continue;
+
+      const distance = (
+        (lastRectangle.column - rectangle.column) ** 2 +
+        (lastRectangle.row - rectangle.row) ** 2
+      ) ** 0.5;
+
+      if (
+        !bestCandidateDistance || distance < bestCandidateDistance ||
+        (bestCandidate && distance <= bestCandidateDistance && component.zIndex > bestCandidate.zIndex)
+      ) {
+        bestCandidate = component;
+        bestCandidateDistance = distance;
+      }
+    }
+
+    if (!bestCandidate) return;
+
+    bestCandidate.state.value = "focused";
+    lastSelectedComponent.state.value = "base";
+    lastSelectedComponent = bestCandidate;
+  });
+}
+
+/**
+ * Enable handling of controlling Tui using mouse
+ */
+export function handleMouseControls(tui: Tui): void {
+  const { rid } = tui.stdout;
+  Deno.writeSync(rid, textEncoder.encode(ENABLE_MOUSE));
+  tui.on("destroy", () => {
+    Deno.writeSync(rid, textEncoder.encode(DISABLE_MOUSE));
+  });
+
+  tui.on("mousePress", ({ x, y, drag, shift, meta, ctrl, release }) => {
+    lastSelectedComponent ??= getComponentClosestToTopLeftCorner(
+      tui,
+      (object) => isInteractable(object) && object.visible.peek(),
+    );
+
+    if (!lastSelectedComponent || shift || meta || ctrl || drag) return;
+
+    let bestCandidate: Component | undefined = undefined;
+    for (const component of tui.components) {
+      if (
+        !component.visible.peek() ||
+        component.subComponentOf ||
+        !isInteractable(component) ||
+        !fitsInRectangle(x, y, component.rectangle.peek())
+      ) {
+        continue;
+      }
+
+      if (!bestCandidate) {
+        bestCandidate = component;
+        continue;
+      }
+
+      if (bestCandidate.zIndex.peek() > component.zIndex.peek()) continue;
+
+      bestCandidate = component;
+    }
+
+    if (!bestCandidate) {
+      lastSelectedComponent.state.value = "base";
+      return;
+    } else if (bestCandidate !== lastSelectedComponent) {
+      lastSelectedComponent.state.value = "base";
+    }
+
+    if (!release) {
+      bestCandidate.interact("mouse");
+    } else if (bestCandidate.state.peek() === "active") {
+      bestCandidate.state.value = "base";
+    }
+
+    lastSelectedComponent = bestCandidate;
+  });
+}
diff --git a/src/event_emitter.ts b/src/event_emitter.ts
index c81d348..de909a3 100644
--- a/src/event_emitter.ts
+++ b/src/event_emitter.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 /** Type for event listener function */
 export type EventListener<
diff --git a/src/input.ts b/src/input.ts
new file mode 100644
index 0000000..5b635a2
--- /dev/null
+++ b/src/input.ts
@@ -0,0 +1,8 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Tui } from "./tui.ts";
+import { emitInputEvents } from "./input_reader/mod.ts";
+
+/** Emit input events to Tui  */
+export async function handleInput(tui: Tui): Promise<void> {
+  await emitInputEvents(tui.stdin, tui);
+}
diff --git a/src/input_reader/decoders/keyboard.ts b/src/input_reader/decoders/keyboard.ts
new file mode 100644
index 0000000..7cea3f2
--- /dev/null
+++ b/src/input_reader/decoders/keyboard.ts
@@ -0,0 +1,160 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+/** Decode code sequence to {KeyPress} object. */
+import type { Alphabet, Key, KeyPressEvent } from "../types.ts";
+
+const lowerCaseAlphabet = "abcdefghijklmnopqrstuvwxyz";
+
+const keyPress: KeyPressEvent = {
+  buffer: new Uint8Array(0),
+  key: "-",
+  meta: false,
+  ctrl: false,
+  shift: false,
+};
+
+export function decodeKey(buffer: Uint8Array, code: string): KeyPressEvent {
+  if (code[0] === "\x1b") code = code.slice(1);
+  keyPress.buffer = buffer;
+  keyPress.key = code as Key;
+  keyPress.ctrl = false;
+  keyPress.meta = false;
+  keyPress.shift = false;
+
+  switch (code) {
+    case "\r":
+    case "\n":
+      keyPress.key = "return";
+      break;
+    case "\t":
+      keyPress.key = "tab";
+      break;
+    case "\b":
+    case "\x7f":
+      keyPress.key = "backspace";
+      break;
+    case "\x1b":
+      keyPress.key = "escape";
+      break;
+    case " ":
+      keyPress.key = "space";
+      break;
+    default:
+      {
+        if (buffer[0] !== 27) {
+          const offset96 = String.fromCharCode(buffer[0] + 96);
+          if (lowerCaseAlphabet.indexOf(offset96) !== -1) {
+            keyPress.key = offset96 as Alphabet;
+            keyPress.ctrl = true;
+            break;
+          }
+        }
+
+        if (code.length === 1) {
+          keyPress.shift = code !== code.toLowerCase();
+          keyPress.meta = buffer[0] === 27;
+          break;
+        } else if (buffer.length === 1) {
+          keyPress.key = "escape";
+          break;
+        }
+
+        const modifier = code.match(/\d+.+(\d+)/)?.[1] ?? "";
+        switch (modifier) {
+          case "5":
+            keyPress.ctrl = true;
+            break;
+          case "3":
+            keyPress.meta = true;
+            break;
+          case "2":
+            keyPress.shift = true;
+            break;
+        }
+
+        code = code.replace(`1;${modifier}`, "").replace(`;${modifier}`, "").replace("1;", "");
+        switch (code) {
+          case "OP":
+          case "[P":
+            keyPress.key = "f1";
+            break;
+          case "OG":
+          case "[Q":
+            keyPress.key = "f2";
+            break;
+          case "OR":
+          case "[R":
+            keyPress.key = "f3";
+            break;
+          case "OS":
+          case "[S":
+            keyPress.key = "f4";
+            break;
+          case "[15~":
+            keyPress.key = "f5";
+            break;
+          case "[17~":
+            keyPress.key = "f6";
+            break;
+          case "[18~":
+            keyPress.key = "f7";
+            break;
+          case "[19~":
+            keyPress.key = "f8";
+            break;
+          case "[20~":
+            keyPress.key = "f9";
+            break;
+          case "[21~":
+            keyPress.key = "f10";
+            break;
+          case "[23~":
+            keyPress.key = "f11";
+            break;
+          case "[24~":
+            keyPress.key = "f12";
+            break;
+
+          case "[A":
+            keyPress.key = "up";
+            break;
+          case "[B":
+            keyPress.key = "down";
+            break;
+          case "[C":
+            keyPress.key = "right";
+            break;
+          case "[D":
+            keyPress.key = "left";
+            break;
+
+          case "[2~":
+            keyPress.key = "insert";
+            break;
+          case "[3~":
+            keyPress.key = "delete";
+            break;
+
+          case "[5~":
+            keyPress.key = "pageup";
+            break;
+          case "[6~":
+            keyPress.key = "pagedown";
+            break;
+
+          case "[H":
+            keyPress.key = "home";
+            break;
+          case "[F":
+            keyPress.key = "end";
+            break;
+
+          case "[E":
+            keyPress.key = "clear";
+            break;
+        }
+      }
+      break;
+  }
+
+  return keyPress;
+}
diff --git a/src/input_reader/decoders/mouse.ts b/src/input_reader/decoders/mouse.ts
new file mode 100644
index 0000000..7f5ec7b
--- /dev/null
+++ b/src/input_reader/decoders/mouse.ts
@@ -0,0 +1,183 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import type { MouseEvent, MousePressEvent, MouseScrollEvent } from "../types.ts";
+
+const a: MouseEvent = {
+  key: "mouse",
+  x: 0,
+  y: 0,
+  movementX: 0,
+  movementY: 0,
+  buffer: new Uint8Array(0),
+  shift: false,
+  ctrl: false,
+  meta: false,
+};
+const b = structuredClone(a);
+
+let mouseEvent: MouseEvent = a;
+let lastMouseEvent: MouseEvent = b;
+
+/**
+ * Decode SGR mouse mode code sequence to {MousePress} object.
+ * If it can't convert specified {code} to {MousePress} it returns undefined.
+ */
+export function decodeMouseSGR(
+  buffer: Uint8Array,
+  code: string,
+): MousePressEvent | MouseScrollEvent | undefined {
+  const action = code.at(-1);
+  if (!code.startsWith("\x1b[<") || (action !== "m" && action !== "M")) {
+    return undefined;
+  }
+
+  const release = action === "m";
+
+  const xSeparator = code.indexOf(";");
+  let modifiers = +code.slice(3, xSeparator);
+  const ySeparator = code.indexOf(";", xSeparator + 1);
+  let x = +code.slice(xSeparator + 1, ySeparator);
+  let y = +code.slice(ySeparator + 1, code.length - 1);
+
+  x -= 1;
+  y -= 1;
+
+  const movementX = lastMouseEvent ? x - lastMouseEvent.x : 0;
+  const movementY = lastMouseEvent ? y - lastMouseEvent.y : 0;
+
+  let scroll: MouseScrollEvent["scroll"] = 0;
+  if (modifiers >= 64) {
+    scroll = modifiers % 2 === 0 ? -1 : 1;
+    modifiers -= scroll < 0 ? 64 : 65;
+  }
+
+  let drag = false;
+  if (modifiers >= 32) {
+    drag = true;
+    modifiers -= 32;
+  }
+
+  let ctrl = false;
+  if (modifiers >= 16) {
+    ctrl = true;
+    modifiers -= 16;
+  }
+
+  let meta = false;
+  if (modifiers >= 8) {
+    meta = true;
+    modifiers -= 8;
+  }
+
+  let shift = false;
+  if (modifiers >= 4) {
+    shift = true;
+    modifiers -= 4;
+  }
+
+  let button: MousePressEvent["button"];
+  if (!scroll) {
+    button = modifiers as MousePressEvent["button"];
+  }
+
+  lastMouseEvent = mouseEvent;
+  const previous = lastMouseEvent;
+  mouseEvent = previous;
+
+  // Clear data from previous events
+  const allMouseEvents = mouseEvent as Partial<MousePressEvent & MouseScrollEvent>;
+  delete allMouseEvents.scroll;
+  delete allMouseEvents.drag;
+  delete allMouseEvents.button;
+  delete allMouseEvents.release;
+
+  mouseEvent.buffer = buffer;
+  mouseEvent.x = x;
+  mouseEvent.y = y;
+  mouseEvent.ctrl = ctrl;
+  mouseEvent.meta = meta;
+  mouseEvent.shift = shift;
+  mouseEvent.movementX = movementX;
+  mouseEvent.movementY = movementY;
+
+  if (scroll) {
+    const mouseScrollEvent = mouseEvent as MouseScrollEvent;
+    mouseScrollEvent.scroll = scroll;
+    return mouseScrollEvent;
+  } else {
+    const mousePressEvent = mouseEvent as MousePressEvent;
+    mousePressEvent.drag = drag;
+    mousePressEvent.button = button!;
+    mousePressEvent.release = release;
+    return mousePressEvent;
+  }
+}
+
+/**
+ * Decode VT and UTF8 mouse mode code sequence to {MousePress} object.
+ * If it can't convert specified {code} to {MousePress} it returns undefined.
+ */
+export function decodeMouseVT_UTF8(
+  buffer: Uint8Array,
+  code: string,
+): MousePressEvent | MouseScrollEvent | undefined {
+  if (!code.startsWith("\x1b[M")) return undefined;
+
+  const modifiers = code.charCodeAt(3);
+  let x = code.charCodeAt(4);
+  let y = code.charCodeAt(5);
+
+  x -= 0o41;
+  y -= 0o41;
+
+  const movementX = lastMouseEvent ? x - lastMouseEvent.x : 0;
+  const movementY = lastMouseEvent ? y - lastMouseEvent.y : 0;
+
+  const buttonInfo = modifiers & 3;
+  let release = false;
+
+  let button: MousePressEvent["button"];
+  if (buttonInfo === 3) {
+    release = true;
+  } else {
+    button = buttonInfo as MousePressEvent["button"];
+  }
+
+  const shift = !!(modifiers & 4);
+  const meta = !!(modifiers & 8);
+  const ctrl = !!(modifiers & 16);
+  const scroll = button && !!(modifiers & 32) && !!(modifiers & 64) ? (modifiers & 3 ? 1 : -1) : 0;
+  if (scroll) button = undefined;
+  const drag = !scroll && !!(modifiers & 64);
+
+  lastMouseEvent = mouseEvent;
+  const previous = lastMouseEvent;
+  mouseEvent = previous;
+
+  // Clear data from previous events
+  const allMouseEvents = mouseEvent as Partial<MousePressEvent & MouseScrollEvent>;
+  delete allMouseEvents.scroll;
+  delete allMouseEvents.drag;
+  delete allMouseEvents.button;
+  delete allMouseEvents.release;
+
+  mouseEvent.buffer = buffer;
+  mouseEvent.x = x;
+  mouseEvent.y = y;
+  mouseEvent.ctrl = ctrl;
+  mouseEvent.meta = meta;
+  mouseEvent.shift = shift;
+  mouseEvent.movementX = movementX;
+  mouseEvent.movementY = movementY;
+
+  if (scroll) {
+    const mouseScrollEvent = mouseEvent as MouseScrollEvent;
+    mouseScrollEvent.scroll = scroll;
+    return mouseScrollEvent;
+  } else {
+    const mousePressEvent = mouseEvent as MousePressEvent;
+    mousePressEvent.drag = drag;
+    mousePressEvent.button = button!;
+    mousePressEvent.release = release;
+    return mousePressEvent;
+  }
+}
diff --git a/src/input_reader/mod.ts b/src/input_reader/mod.ts
new file mode 100644
index 0000000..decd601
--- /dev/null
+++ b/src/input_reader/mod.ts
@@ -0,0 +1,51 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
+import type { KeyPressEvent, MouseEvent, MousePressEvent, MouseScrollEvent } from "./types.ts";
+import type { Stdin } from "../types.ts";
+import { decodeMouseSGR, decodeMouseVT_UTF8 } from "./decoders/mouse.ts";
+import { decodeKey } from "./decoders/keyboard.ts";
+import type { EmitterEvent, EventEmitter } from "../event_emitter.ts";
+
+export type InputEventRecord = {
+  keyPress: EmitterEvent<[KeyPressEvent]>;
+  mouseEvent: EmitterEvent<[MouseEvent | MousePressEvent | MouseScrollEvent]>;
+  mousePress: EmitterEvent<[MousePressEvent]>;
+  mouseScroll: EmitterEvent<[MouseScrollEvent]>;
+};
+
+/**
+ * Read keypresses from given stdin, parse them and emit to given emitter.
+ * On Windows keys are read by calling `_getch()` in `msvcrt.dll`.
+ */
+export async function emitInputEvents(stdin: Stdin, emitter: EventEmitter<InputEventRecord>) {
+  try {
+    stdin.setRaw(true, { cbreak: Deno.build.os !== "windows" });
+  } catch {
+    // omit
+  }
+  for await (const buffer of stdin.readable) {
+    for (const event of decodeBuffer(buffer)) {
+      if (event.key === "mouse") {
+        emitter.emit("mouseEvent", event);
+
+        if ("button" in event) emitter.emit("mousePress", event);
+        else if ("scroll" in event) emitter.emit("mouseScroll", event);
+      } else {
+        emitter.emit("keyPress", event);
+      }
+    }
+  }
+}
+
+const textDecoder = new TextDecoder();
+
+/**
+ * Decode character(s) from buffer that was sent to stdin from terminal on mostly
+ * @see https://invisible-island.net/xterm/ctlseqs/ctlseqs.txt for reference used to create this function
+ */
+export function* decodeBuffer(
+  buffer: Uint8Array,
+): Generator<KeyPressEvent | MouseEvent | MousePressEvent | MouseScrollEvent, void, void> {
+  const code = textDecoder.decode(buffer);
+  yield decodeMouseVT_UTF8(buffer, code) ?? decodeMouseSGR(buffer, code) ?? decodeKey(buffer, code);
+}
diff --git a/src/input_reader/types.ts b/src/input_reader/types.ts
new file mode 100644
index 0000000..714ecd0
--- /dev/null
+++ b/src/input_reader/types.ts
@@ -0,0 +1,131 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Range } from "../types.ts";
+
+/** Interface defining key press issued to stdin */
+export interface KeyPressEvent {
+  key: Key;
+  meta: boolean;
+  ctrl: boolean;
+  shift: boolean;
+  buffer: Uint8Array;
+}
+
+/** Interface defining any mouse event issued to stdin */
+export interface MouseEvent {
+  key: "mouse";
+  buffer: Uint8Array;
+  x: number;
+  y: number;
+  movementX: number;
+  movementY: number;
+  meta: boolean;
+  ctrl: boolean;
+  shift: boolean;
+}
+
+/** Interface defining mouse press issued to stdin */
+export interface MousePressEvent extends MouseEvent {
+  drag: boolean;
+  release: boolean;
+  /** undefined when `release` is true */
+  button: 0 | 1 | 2 | undefined;
+}
+
+export interface MouseScrollEvent extends MouseEvent {
+  drag: boolean;
+  /**
+   *  - 1 – Scrolls downwards
+   *  - 0 – Doesn't scroll
+   *  - -1 – Scrolls upwards
+   */
+  scroll: 1 | 0 | -1;
+}
+
+export type Key =
+  | Alphabet
+  | Chars
+  | SpecialKeys
+  | `${Range<0, 10>}`
+  | `f${Range<1, 12>}`;
+
+/** Type defining letters from the latin alphabet */
+export type Alphabet =
+  | "a"
+  | "b"
+  | "c"
+  | "d"
+  | "e"
+  | "f"
+  | "g"
+  | "h"
+  | "i"
+  | "j"
+  | "k"
+  | "l"
+  | "m"
+  | "n"
+  | "o"
+  | "p"
+  | "q"
+  | "r"
+  | "s"
+  | "t"
+  | "u"
+  | "v"
+  | "w"
+  | "x"
+  | "y"
+  | "z";
+
+/** Type defining special keys */
+export type SpecialKeys =
+  | "return"
+  | "tab"
+  | "backspace"
+  | "escape"
+  | "space"
+  | "up"
+  | "down"
+  | "left"
+  | "right"
+  | "clear"
+  | "insert"
+  | "delete"
+  | "pageup"
+  | "pagedown"
+  | "home"
+  | "end"
+  | "tab";
+
+/** Type defining interpunction characters */
+export type Chars =
+  | "!"
+  | "@"
+  | "#"
+  | "$"
+  | "%"
+  | "^"
+  | "&"
+  | "*"
+  | "("
+  | ")"
+  | "-"
+  | "_"
+  | "="
+  | "+"
+  | "["
+  | "{"
+  | "]"
+  | "}"
+  | "'"
+  | '"'
+  | ";"
+  | ":"
+  | ","
+  | "<"
+  | "."
+  | ">"
+  | "/"
+  | "?"
+  | "\\"
+  | "|";
diff --git a/src/key_reader.ts b/src/key_reader.ts
deleted file mode 100644
index df21022..0000000
--- a/src/key_reader.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { decodeWindowsBuffer } from "./key_reader/windows.ts";
-import { decodeUnixBuffer } from "./key_reader/unix.ts";
-
-import type { KeyPress, MousePress, Stdin } from "./types.ts";
-
-/**
- * Read keypresses from given stdin (except for Windows) and then parse them.
- * On Windows keys are read by calling `_getch()` in `msvcrt.dll`.
- * It yields array of either KeyPress or MousePress
- */
-export async function* readKeypresses(stdin: Stdin): AsyncGenerator<(KeyPress | MousePress)[], void, void> {
-  switch (Deno.build.os) {
-    case "windows": {
-      const dll = Deno.dlopen("C:\\Windows\\System32\\msvcrt.dll", {
-        "_getch": { parameters: [], result: "i32", nonblocking: true },
-      });
-
-      try {
-        stdin.setRaw(true);
-      } catch { /**/ }
-
-      while (true) {
-        let char = await dll.symbols._getch();
-
-        let special: number;
-        if (char === 0 || char === 224) {
-          special = char;
-          char = await dll.symbols._getch();
-        }
-
-        yield [decodeWindowsBuffer(char, special!)];
-      }
-    }
-    default:
-      try {
-        stdin.setRaw(true, { cbreak: true });
-      } catch { /**/ }
-
-      while (true) {
-        const buffer = new Uint8Array(1024);
-        const byteLength = await stdin.read(buffer).catch(() => null);
-        if (typeof byteLength !== "number") continue;
-        yield [...decodeUnixBuffer(buffer.subarray(0, byteLength))];
-      }
-  }
-}
diff --git a/src/key_reader/types.ts b/src/key_reader/types.ts
deleted file mode 100644
index c95c3cd..0000000
--- a/src/key_reader/types.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-import type { Range } from "../types.ts";
-
-/** Type defining keys that `key_reader.ts` can distinguish */
-export type Key =
-  | Alphabet
-  | Chars
-  | SpecialKeys
-  | `${Range<0, 10>}`
-  | `f${Range<1, 12>}`;
-
-/** Type defining letters from the latin alphabet */
-export type Alphabet =
-  | "a"
-  | "b"
-  | "c"
-  | "d"
-  | "e"
-  | "f"
-  | "g"
-  | "h"
-  | "i"
-  | "j"
-  | "k"
-  | "l"
-  | "m"
-  | "n"
-  | "o"
-  | "p"
-  | "q"
-  | "r"
-  | "s"
-  | "t"
-  | "u"
-  | "v"
-  | "w"
-  | "x"
-  | "y"
-  | "z";
-
-/** Type defining special keys */
-export type SpecialKeys =
-  | "return"
-  | "tab"
-  | "backspace"
-  | "escape"
-  | "space"
-  | "up"
-  | "down"
-  | "left"
-  | "right"
-  | "clear"
-  | "insert"
-  | "delete"
-  | "pageup"
-  | "pagedown"
-  | "home"
-  | "end"
-  | "tab";
-
-/** Type defining interpunction characters */
-export type Chars =
-  | "!"
-  | "@"
-  | "#"
-  | "$"
-  | "%"
-  | "^"
-  | "&"
-  | "*"
-  | "("
-  | ")"
-  | "-"
-  | "_"
-  | "="
-  | "+"
-  | "["
-  | "{"
-  | "]"
-  | "}"
-  | "'"
-  | '"'
-  | ";"
-  | ":"
-  | ","
-  | "<"
-  | "."
-  | ">"
-  | "/"
-  | "?"
-  | "\\"
-  | "|";
-
-/** Interface defining key press issued to stdin */
-export interface KeyPress {
-  /** Raw data which was sent to stdin */
-  buffer: Uint8Array | number;
-  /** Key id */
-  key: Key;
-  /** Whether meta button (most often alt) was pressed/held when key was pressed */
-  meta: boolean;
-  /** Whether shift button was pressed/held when key was pressed */
-  shift: boolean;
-  /** Whether ctrl button was pressed/held when key was pressed */
-  ctrl: boolean;
-}
-
-/** Interface defining key press issued to stdin using a mouse */
-export interface MousePress extends Omit<KeyPress, "key"> {
-  /** Mouse key id */
-  key: "mouse";
-  /** Column on which mouse was when action was taken */
-  x: number;
-  /** Row on which mouse was when action was taken */
-  y: number;
-  /**
-   *  Mouse button that has been used
-   *  - 0 - Left
-   *  - 1 - Middle
-   *  - 2 - Right
-   */
-  button: 0 | 1 | 2 | undefined;
-  /** Whether mouse button has been released */
-  release: boolean;
-  /** Whether mouse cursor is dragged */
-  drag: boolean;
-  /**
-   * Whether user scroll
-   *  - 1 - Scrolls downwards
-   *  - 0 - Doesn't scroll
-   *  - -1 - Scrolls upwards)
-   */
-  scroll: 1 | 0 | -1;
-}
-
-/** Interface defining multiple key presses (both {KeyPress} and {MousePress}) that have been issued to stdin at once */
-export interface MultiKeyPress extends Omit<KeyPress, "buffer" | "key"> {
-  /** MultiKeyPress id */
-  key: "multi";
-  /** Raw data which was sent to stdin about every key */
-  buffer: KeyPress["buffer"][];
-  /** Array storing KeyPress information about keys */
-  keys: (KeyPress["key"] | MousePress["key"])[];
-}
diff --git a/src/key_reader/unix.ts b/src/key_reader/unix.ts
deleted file mode 100644
index b69d4d9..0000000
--- a/src/key_reader/unix.ts
+++ /dev/null
@@ -1,296 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-// This module works on Linux and macOS
-
-import type { Alphabet, Key, KeyPress, MousePress } from "./types.ts";
-
-const decoder = new TextDecoder();
-
-/** Decode code sequence to {KeyPress} object. */
-export function decodeKey(buffer: Uint8Array, code: string): KeyPress {
-  const keyPress: KeyPress = {
-    buffer,
-    key: code as Key,
-    meta: false,
-    shift: false,
-    ctrl: false,
-  };
-
-  switch (code) {
-    case "\r":
-    case "\n":
-      keyPress.key = "return";
-      break;
-    case "\t":
-      keyPress.key = "tab";
-      break;
-    case "\b":
-    case "\x7f":
-      keyPress.key = "backspace";
-      break;
-    case "\x1b":
-      keyPress.key = "escape";
-      break;
-    case " ":
-      keyPress.key = "space";
-      break;
-    default:
-      {
-        if (buffer[0] !== 27) {
-          const offset96 = String.fromCharCode(buffer[0] + 96);
-          if (/[a-z]/.test(offset96)) {
-            keyPress.key = offset96 as Alphabet;
-            keyPress.ctrl = true;
-            break;
-          }
-        }
-
-        if (code.length === 1 && /[a-zA-Z]/.test(code)) {
-          const lowerCase = code.toLowerCase();
-          keyPress.key = lowerCase as Key;
-          keyPress.shift = code !== lowerCase;
-          keyPress.meta = buffer[0] === 27;
-          break;
-        }
-
-        const modifier = code.match(/\d+.+(\d+)/)?.[1] ?? "";
-        switch (modifier) {
-          case "5":
-            keyPress.ctrl = true;
-            break;
-          case "3":
-            keyPress.meta = true;
-            break;
-          case "2":
-            keyPress.shift = true;
-            break;
-        }
-
-        code = code.replace(`1;${modifier}`, "").replace(`;${modifier}`, "").replace("1;", "");
-        switch (code) {
-          case "OP":
-          case "[P":
-            keyPress.key = "f1";
-            break;
-          case "OG":
-          case "[Q":
-            keyPress.key = "f2";
-            break;
-          case "OR":
-          case "[R":
-            keyPress.key = "f3";
-            break;
-          case "OS":
-          case "[S":
-            keyPress.key = "f4";
-            break;
-          case "[15~":
-            keyPress.key = "f5";
-            break;
-          case "[17~":
-            keyPress.key = "f6";
-            break;
-          case "[18~":
-            keyPress.key = "f7";
-            break;
-          case "[19~":
-            keyPress.key = "f8";
-            break;
-          case "[20~":
-            keyPress.key = "f9";
-            break;
-          case "[21~":
-            keyPress.key = "f10";
-            break;
-          case "[23~":
-            keyPress.key = "f11";
-            break;
-          case "[24~":
-            keyPress.key = "f12";
-            break;
-
-          case "[A":
-            keyPress.key = "up";
-            break;
-          case "[B":
-            keyPress.key = "down";
-            break;
-          case "[C":
-            keyPress.key = "right";
-            break;
-          case "[D":
-            keyPress.key = "left";
-            break;
-
-          case "[2~":
-            keyPress.key = "insert";
-            break;
-          case "[3~":
-            keyPress.key = "delete";
-            break;
-
-          case "[5~":
-            keyPress.key = "pageup";
-            break;
-          case "[6~":
-            keyPress.key = "pagedown";
-            break;
-
-          case "[H":
-            keyPress.key = "home";
-            break;
-          case "[F":
-            keyPress.key = "end";
-            break;
-
-          case "[E":
-            keyPress.key = "clear";
-            break;
-        }
-      }
-      break;
-  }
-
-  return keyPress;
-}
-
-/**
- * Decode SGR mouse mode code sequence to {MousePress} object.
- * If it can't convert specified {code} to {MousePress} it returns undefined.
- */
-export function decodeMouseSGR(buffer: Uint8Array, code: string): MousePress | undefined {
-  const action = code.at(-1);
-
-  if (!code.startsWith("[<") || (action !== "m" && action !== "M")) {
-    return undefined;
-  }
-
-  const release = action === "m";
-
-  let [modifiers, x, y] = code.slice(2, -1).split(";").map((x) => +x);
-  x -= 1;
-  y -= 1;
-
-  let scroll: MousePress["scroll"] = 0;
-  if (modifiers >= 64) {
-    scroll = modifiers % 2 === 0 ? -1 : 1;
-    modifiers -= scroll < 0 ? 64 : 65;
-  }
-
-  let drag = false;
-  if (modifiers >= 32) {
-    drag = true;
-    modifiers -= 32;
-  }
-
-  let ctrl = false;
-  if (modifiers >= 16) {
-    ctrl = true;
-    modifiers -= 16;
-  }
-
-  let meta = false;
-  if (modifiers >= 8) {
-    meta = true;
-    modifiers -= 8;
-  }
-
-  let shift = false;
-  if (modifiers >= 4) {
-    shift = true;
-    modifiers -= 4;
-  }
-
-  let button: MousePress["button"] = undefined;
-  if (!scroll) {
-    button = modifiers as MousePress["button"];
-  }
-
-  return {
-    key: "mouse",
-    buffer,
-    release,
-    shift,
-    ctrl,
-    meta,
-    button,
-    drag,
-    scroll,
-    x,
-    y,
-  };
-}
-
-/**
- * Decode VT and UTF8 mouse mode code sequence to {MousePress} object.
- * If it can't convert specified {code} to {MousePress} it returns undefined.
- */
-export function decodeMouseVT_UTF8(buffer: Uint8Array, code: string): MousePress | undefined {
-  if (!code.startsWith("[M")) return undefined;
-
-  let [modifiers, x, y] = code.slice(2).split("").map((x) => x.charCodeAt(0));
-
-  x -= 0o41;
-  y -= 0o41;
-
-  const buttonInfo = modifiers & 3;
-  let button: MousePress["button"] = undefined;
-  let release = false;
-
-  if (buttonInfo === 3) {
-    release = true;
-  } else {
-    button = buttonInfo as MousePress["button"];
-  }
-
-  const shift = !!(modifiers & 4);
-  const meta = !!(modifiers & 8);
-  const ctrl = !!(modifiers & 16);
-
-  const scroll = !!(modifiers & 32) && !!(modifiers & 64) ? modifiers & 3 ? 1 : -1 : 0;
-
-  const drag = !scroll && !!(modifiers & 64);
-
-  return {
-    key: "mouse",
-    buffer,
-    release,
-    shift,
-    ctrl,
-    meta,
-    button,
-    drag,
-    scroll,
-    x,
-    y,
-  };
-}
-
-/**
- * Decode character(s) from buffer that was sent to stdin from terminal on mostly
- * @see https://invisible-island.net/xterm/ctlseqs/ctlseqs.txt for reference used to create this function
- */
-export function* decodeUnixBuffer(buffer: Uint8Array): Generator<KeyPress | MousePress, void, void> {
-  const decodedBuffer = decoder.decode(buffer);
-
-  let codes: string[] = [];
-
-  if (decodedBuffer.split("\x1b").length > 1) {
-    codes = decodedBuffer.split(/(?=\x1b)/);
-  } else if (decodedBuffer.length > 1 && !decodedBuffer.includes("\x1b")) {
-    codes = decodedBuffer.split("");
-  } else {
-    codes = [decodedBuffer];
-  }
-
-  for (let code of codes) {
-    code = code.replace("\x1b", "");
-
-    const mousePress = decodeMouseSGR(buffer, code) ?? decodeMouseVT_UTF8(buffer, code);
-    if (mousePress) {
-      yield mousePress;
-      continue;
-    }
-
-    yield decodeKey(buffer, code);
-  }
-}
diff --git a/src/key_reader/windows.ts b/src/key_reader/windows.ts
deleted file mode 100644
index 0be4577..0000000
--- a/src/key_reader/windows.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-// This module works only on Windows
-
-import type { Alphabet, Key, KeyPress } from "./types.ts";
-
-/** Decode buffer to {KeyPress} object. */
-export function decodeWindowsBuffer(buffer: number, specialCharCode?: number): KeyPress {
-  const decodedBuffer = String.fromCharCode(buffer);
-
-  const keyPress: KeyPress = {
-    buffer,
-    key: "" as Key,
-    meta: false,
-    shift: false,
-    ctrl: false,
-  };
-
-  if (typeof specialCharCode !== "undefined") {
-    switch (buffer) {
-      // F1-F10 = 59-68
-      // shift:   +25
-      // ctrl:    +35
-      // meta:    +45
-      case 59:
-        keyPress.key = "f1";
-        break;
-      case 59 + 25:
-        keyPress.key = "f1";
-        keyPress.shift = true;
-        break;
-      case 59 + 35:
-        keyPress.key = "f1";
-        keyPress.ctrl = true;
-        break;
-      case 59 + 45:
-        keyPress.key = "f1";
-        keyPress.meta = true;
-        break;
-      case 60:
-        keyPress.key = "f2";
-        break;
-      case 60 + 25:
-        keyPress.key = "f2";
-        keyPress.shift = true;
-        break;
-      case 60 + 35:
-        keyPress.key = "f2";
-        keyPress.ctrl = true;
-        break;
-      case 60 + 45:
-        keyPress.key = "f2";
-        keyPress.meta = true;
-        break;
-      case 61:
-        keyPress.key = "f3";
-        break;
-      case 61 + 25:
-        keyPress.key = "f3";
-        keyPress.shift = true;
-        break;
-      case 61 + 35:
-        keyPress.key = "f3";
-        keyPress.ctrl = true;
-        break;
-      case 61 + 45:
-        keyPress.key = "f3";
-        keyPress.meta = true;
-        break;
-      case 62:
-        keyPress.key = "f4";
-        break;
-      case 62 + 25:
-        keyPress.key = "f4";
-        keyPress.shift = true;
-        break;
-      case 62 + 35:
-        keyPress.key = "f4";
-        keyPress.ctrl = true;
-        break;
-      case 62 + 45:
-        keyPress.key = "f4";
-        keyPress.meta = true;
-        break;
-      case 63:
-        keyPress.key = "f5";
-        break;
-      case 63 + 25:
-        keyPress.key = "f5";
-        keyPress.shift = true;
-        break;
-      case 63 + 35:
-        keyPress.key = "f5";
-        keyPress.ctrl = true;
-        break;
-      case 63 + 45:
-        keyPress.key = "f5";
-        keyPress.meta = true;
-        break;
-      case 64:
-        keyPress.key = "f6";
-        break;
-      case 64 + 25:
-        keyPress.key = "f6";
-        keyPress.shift = true;
-        break;
-      case 64 + 35:
-        keyPress.key = "f6";
-        keyPress.ctrl = true;
-        break;
-      case 65:
-        keyPress.key = "f7";
-        break;
-      case 65 + 25:
-        keyPress.key = "f7";
-        keyPress.shift = true;
-        break;
-      case 65 + 35:
-        keyPress.key = "f7";
-        keyPress.ctrl = true;
-        break;
-      case 65 + 45:
-        keyPress.key = "f7";
-        keyPress.meta = true;
-        break;
-      case 66:
-        keyPress.key = "f8";
-        break;
-      case 66 + 25:
-        keyPress.key = "f8";
-        keyPress.shift = true;
-        break;
-      case 66 + 35:
-        keyPress.key = "f8";
-        keyPress.ctrl = true;
-        break;
-      case 66 + 45:
-        keyPress.key = "f8";
-        keyPress.meta = true;
-        break;
-      case 67:
-        keyPress.key = "f9";
-        break;
-      case 67 + 25:
-        keyPress.key = "f9";
-        keyPress.shift = true;
-        break;
-      case 67 + 35:
-        keyPress.key = "f9";
-        keyPress.ctrl = true;
-        break;
-      case 67 + 45:
-        keyPress.key = "f9";
-        keyPress.meta = true;
-        break;
-      case 68:
-        keyPress.key = "f10";
-        break;
-      case 68 + 25:
-        keyPress.key = "f10";
-        keyPress.shift = true;
-        break;
-      case 68 + 35:
-        keyPress.key = "f10";
-        keyPress.ctrl = true;
-        break;
-      case 68 + 45:
-        keyPress.key = "f10";
-        keyPress.meta = true;
-        break;
-      // F11-F12 = 133-134
-      // shift:    +2
-      // ctrl:     +4
-      // meta:     +6
-      case 133:
-        keyPress.key = "f11";
-        break;
-      case 135:
-        keyPress.key = "f11";
-        keyPress.shift = true;
-        break;
-      case 137:
-        keyPress.key = "f11";
-        keyPress.ctrl = true;
-        break;
-      case 139:
-        keyPress.key = "f11";
-        keyPress.meta = true;
-        break;
-      case 134:
-        keyPress.key = "f12";
-        break;
-      case 136:
-        keyPress.key = "f12";
-        keyPress.shift = true;
-        break;
-      case 138:
-        keyPress.key = "f12";
-        keyPress.ctrl = true;
-        break;
-      case 140:
-        keyPress.key = "f12";
-        keyPress.meta = true;
-        break;
-
-      case 72:
-        keyPress.key = "up";
-        break;
-      case 141:
-        keyPress.key = "up";
-        keyPress.ctrl = true;
-        break;
-      case 152:
-        keyPress.key = "up";
-        keyPress.meta = true;
-        break;
-
-      case 80:
-        keyPress.key = "down";
-        break;
-      case 145:
-        keyPress.key = "down";
-        keyPress.ctrl = true;
-        break;
-      case 160:
-        keyPress.key = "down";
-        keyPress.meta = true;
-        break;
-
-      case 75:
-        keyPress.key = "left";
-        break;
-      case 115:
-        keyPress.key = "left";
-        keyPress.ctrl = true;
-        break;
-      case 155:
-        keyPress.key = "left";
-        keyPress.meta = true;
-        break;
-
-      case 77:
-        keyPress.key = "right";
-        break;
-      case 116:
-        keyPress.key = "right";
-        keyPress.ctrl = true;
-        break;
-      case 157:
-        keyPress.key = "right";
-        keyPress.meta = true;
-        break;
-
-      case 82:
-        keyPress.key = "insert";
-        break;
-      case 146:
-        keyPress.key = "insert";
-        keyPress.ctrl = true;
-        break;
-      case 162:
-        keyPress.key = "insert";
-        keyPress.meta = true;
-        break;
-
-      case 83:
-        keyPress.key = "delete";
-        break;
-      case 147:
-        keyPress.key = "delete";
-        keyPress.ctrl = true;
-        break;
-      case 163:
-        keyPress.key = "delete";
-        keyPress.meta = true;
-        break;
-
-      case 71:
-        keyPress.key = "home";
-        break;
-      case 119:
-        keyPress.key = "home";
-        keyPress.ctrl = true;
-        break;
-      case 151:
-        keyPress.key = "home";
-        keyPress.meta = true;
-        break;
-
-      case 79:
-        keyPress.key = "end";
-        break;
-      case 117:
-        keyPress.key = "end";
-        keyPress.ctrl = true;
-        break;
-      case 159:
-        keyPress.key = "end";
-        keyPress.meta = true;
-        break;
-
-      case 73:
-        keyPress.key = "pageup";
-        break;
-      // Windows is so dumb, F12 is the same as pageup with ctrl held
-      // case 134:
-      //   keyPress.key = "pageup";
-      //   keyPress.ctrl = true;
-      //   break;
-      case 153:
-        keyPress.key = "pageup";
-        keyPress.meta = true;
-        break;
-
-      case 81:
-        keyPress.key = "pagedown";
-        break;
-      case 118:
-        keyPress.key = "pagedown";
-        keyPress.ctrl = true;
-        break;
-      case 161:
-        keyPress.key = "pagedown";
-        keyPress.meta = true;
-        break;
-    }
-  } else {
-    switch (buffer) {
-      case 13:
-        keyPress.key = "return";
-        break;
-      case 32:
-        keyPress.key = "space";
-        break;
-      case 9:
-        keyPress.key = "tab";
-        break;
-      case 27:
-        keyPress.key = "escape";
-        break;
-      case 8:
-        keyPress.key = "backspace";
-        break;
-      default:
-        {
-          const offset96 = String.fromCharCode(buffer + 96);
-          if (/[a-z]/.test(offset96)) {
-            keyPress.key = offset96 as Alphabet;
-            keyPress.ctrl = true;
-          } else {
-            keyPress.key = decodedBuffer.toLowerCase() as Key;
-            keyPress.shift = keyPress.key !== decodedBuffer;
-          }
-        }
-        break;
-    }
-  }
-
-  return keyPress;
-}
diff --git a/src/keyboard.ts b/src/keyboard.ts
deleted file mode 100644
index cf4a550..0000000
--- a/src/keyboard.ts
+++ /dev/null
@@ -1,196 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { Tui } from "./tui.ts";
-
-import { readKeypresses } from "./key_reader.ts";
-
-import { Component } from "./component.ts";
-import { LabelComponent } from "./components/label.ts";
-import { ViewComponent } from "./components/view.ts";
-import { ScrollableViewComponent } from "./components/scrollable_view.ts";
-
-import { clamp } from "./utils/numbers.ts";
-import { getComponentClosestToTopLeftCorner } from "./utils/component.ts";
-
-import type { KeyPress, MultiKeyPress } from "./types.ts";
-
-/**
- * Intercepts keypresses from `readKeypress()` and dispatch them as events to `tui`
- * that way keyPress, multiKeyPress and mousePress events work
- */
-export async function handleKeypresses(tui: Tui): Promise<void> {
-  for await (const keyPresses of readKeypresses(tui.stdin)) {
-    const multiKeyPress: MultiKeyPress = {
-      key: "multi",
-      keys: [],
-      buffer: [],
-      ctrl: false,
-      meta: false,
-      shift: false,
-    };
-
-    for (const keyPress of keyPresses) {
-      if (keyPress.key === "mouse") {
-        tui.emit("mousePress", keyPress);
-      } else {
-        tui.emit("keyPress", keyPress);
-      }
-
-      multiKeyPress.keys.push(keyPress.key);
-      multiKeyPress.buffer.push(keyPress.buffer);
-      multiKeyPress.shift ||= keyPress.shift;
-      multiKeyPress.meta ||= keyPress.meta;
-      multiKeyPress.ctrl ||= keyPress.ctrl;
-    }
-
-    if (multiKeyPress.keys.length > 1) {
-      tui.emit("multiKeyPress", multiKeyPress);
-    }
-  }
-}
-
-/**
- * `handleKeypresses()` has to be called in order for this function to work.
- * CTRL+Arrows moves focus in appropriate direction.
- * CTRL+F keys switches between views, to get back to default press the same CTRL+F key again.
- * Just Enter (Return) calls `interact("keyboard")` on focused component.
- * It's up to component how it handles it.
- */
-export function handleKeyboardControls(tui: Tui): void {
-  let lastSelectedComponent: Component;
-
-  let currentView: ViewComponent | undefined = undefined;
-  const viewLabel = new LabelComponent({
-    tui,
-    theme: {
-      base: tui.style,
-    },
-    align: { vertical: "top", horizontal: "left" },
-    rectangle: { column: 10, row: 0, width: -1, height: -1 },
-    value: "",
-  });
-
-  Object.defineProperty(viewLabel, "rectangle", {
-    get(this: LabelComponent) {
-      const textLength = this.value.length;
-      return {
-        column: tui.canvas.size.columns - textLength,
-        row: 0,
-        width: textLength,
-        height: -1,
-      };
-    },
-  });
-
-  const keyboardHandler = (keyPress: KeyPress | MultiKeyPress) => {
-    const pressedKeys = keyPress.key === "multi" ? keyPress.keys : [keyPress.key];
-
-    if (!(keyPress.ctrl || (pressedKeys.length === 1 && pressedKeys[0] === "return"))) return;
-
-    lastSelectedComponent = tui.components.find(
-      ({ state, view }) => state !== "base" && view === currentView,
-    ) ?? getComponentClosestToTopLeftCorner(tui, true);
-
-    const moveVector = { x: 0, y: 0 };
-
-    for (const key of pressedKeys) {
-      switch (key) {
-        case "up":
-          --moveVector.y;
-          break;
-        case "down":
-          ++moveVector.y;
-          break;
-        case "left":
-          --moveVector.x;
-          break;
-        case "right":
-          ++moveVector.x;
-          break;
-        case "return":
-          lastSelectedComponent.interact("keyboard");
-          return;
-        default: {
-          if (!/f(\d+)/.test(key)) return;
-          const viewIndex = +key.replace("f", "") - 1;
-          const views = tui.components.filter((component) => component instanceof ViewComponent) as ViewComponent[];
-          const previousView = currentView;
-
-          currentView = views[viewIndex];
-          if (viewIndex >= views.length || currentView === previousView) {
-            if (currentView) currentView.state = "base";
-            currentView = undefined;
-            viewLabel.value = "";
-            return;
-          }
-
-          currentView.interact();
-          viewLabel.value = `View ${viewIndex}`;
-          return;
-        }
-      }
-    }
-
-    const lastRectangle = lastSelectedComponent.rectangle!;
-
-    let closest!: [number, Component];
-    for (const component of tui.components) {
-      const { rectangle, view, interact } = component;
-
-      if (
-        interact === Component.prototype.interact ||
-        component === lastSelectedComponent ||
-        view !== currentView ||
-        !rectangle
-      ) {
-        continue;
-      }
-
-      const distance = (
-        (lastRectangle.column - rectangle.column) ** 2 +
-        (lastRectangle.row - rectangle.row) ** 2
-      ) ** 0.5;
-
-      if (
-        (!closest || distance < closest[0] || (distance === closest[0] && component.zIndex > closest[1].zIndex)) &&
-        (
-          (moveVector.x === 1 && rectangle.column > lastRectangle.column) ||
-          (moveVector.x === -1 && rectangle.column < lastRectangle.column) ||
-          moveVector.x === 0
-        ) && (
-          (moveVector.y === 1 && rectangle.row > lastRectangle.row) ||
-          (moveVector.y === -1 && rectangle.row < lastRectangle.row) ||
-          moveVector.y === 0
-        )
-      ) {
-        closest = [distance, component];
-      }
-    }
-
-    if (!closest) return;
-
-    const closestComponent = closest[1];
-
-    const { view } = closestComponent;
-    if (view) {
-      const { row, column } = closestComponent.rectangle!;
-
-      view.offset.x = clamp(column, 0, view.maxOffset.x);
-      view.offset.y = clamp(row, 0, view.maxOffset.y);
-
-      if (view instanceof ScrollableViewComponent) {
-        const { horizontal, vertical } = view.scrollbars;
-
-        if (horizontal) horizontal.value = view.offset.x;
-        if (vertical) vertical.value = view.offset.x;
-      }
-    }
-
-    lastSelectedComponent.state = "base";
-    closestComponent.interact("keyboard");
-    lastSelectedComponent = closestComponent;
-  };
-
-  tui.on("keyPress", keyboardHandler);
-  tui.on("multiKeyPress", keyboardHandler);
-}
diff --git a/src/mouse.ts b/src/mouse.ts
deleted file mode 100644
index 184be02..0000000
--- a/src/mouse.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { Tui } from "./tui.ts";
-import { Component } from "./component.ts";
-
-import { DISABLE_MOUSE, ENABLE_MOUSE } from "./utils/ansi_codes.ts";
-import { fitsInRectangle } from "./utils/numbers.ts";
-
-import type { Rectangle } from "./types.ts";
-
-const encoder = new TextEncoder();
-
-/**
- * `handleKeypresses()` has to be called in order for this function to work.
- * Clicking component calls `interact("mouse")` on it.
- * It's up to component how it handles it.
- */
-export function handleMouseControls(tui: Tui): void {
-  Deno.writeSync(tui.stdout.rid, encoder.encode(ENABLE_MOUSE));
-
-  tui.on("dispatch", () => {
-    Deno.writeSync(tui.stdout.rid, encoder.encode(DISABLE_MOUSE));
-  });
-
-  tui.on("mousePress", (mousePress) => {
-    const { x, y, drag, scroll, shift, meta, ctrl, release } = mousePress;
-
-    if (drag || scroll !== 0 || shift || meta || ctrl) return;
-
-    const possibleComponents: Component[] = [];
-
-    for (const component of tui.components) {
-      let { rectangle } = component;
-      if (!rectangle) continue;
-
-      const view = component.view;
-      if (view) {
-        const viewRectangle = view.rectangle;
-        const viewOffset = view.offset;
-
-        const viewedRectangle: Rectangle = {
-          column: rectangle.column + viewRectangle.column - viewOffset.x,
-          row: rectangle.row + viewRectangle.row - viewOffset.y,
-          width: rectangle.width,
-          height: rectangle.height,
-        };
-
-        rectangle = viewedRectangle;
-      }
-
-      const fitRectangle = {
-        column: rectangle.column,
-        row: rectangle.row,
-        height: rectangle.height - 1,
-        width: rectangle.width - 1,
-      };
-
-      if (!fitsInRectangle(x, y, fitRectangle)) {
-        continue;
-      }
-
-      const candidate = possibleComponents[0];
-
-      if (!possibleComponents.length || component.zIndex > candidate.zIndex) {
-        possibleComponents.length = 0;
-        possibleComponents.push(component);
-      } else if (component.zIndex === candidate.zIndex && component !== candidate) {
-        possibleComponents.push(component);
-      }
-    }
-
-    const impossibleComponents = tui.components.filter((value) => possibleComponents.indexOf(value) === -1);
-
-    for (const component of impossibleComponents) {
-      component.state = "base";
-    }
-
-    for (const component of possibleComponents) {
-      if (!release) {
-        component.interact("mouse");
-      } else if (component.state === "active") {
-        component.state = "base";
-      }
-    }
-  });
-}
diff --git a/src/signals.ts b/src/signals.ts
new file mode 100644
index 0000000..5ff9b94
--- /dev/null
+++ b/src/signals.ts
@@ -0,0 +1,333 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+// Inspired by Vue.js Ref and Preact's signal API's
+
+import { sleep } from "../mod.ts";
+
+export type SubscriptionCallback<T> = (value: T) => void;
+
+export interface BaseSignalOptions {
+  deepObserve?: boolean;
+  watchObjectIndex?: boolean;
+}
+
+// deno-lint-ignore no-explicit-any
+export type AnySignal = BaseSignal<any>;
+export type AnyEffect = Effect<unknown>;
+export type AnyDependency = AnySignal | AnyEffect;
+
+export class BaseSignal<T> {
+  dependencies: Set<AnyDependency>;
+  subscriptions?: SubscriptionCallback<unknown>[];
+
+  /** Whether value should be deeply observed (needs to be an object) */
+  deepObserve: boolean;
+  /*
+  Only works if `deepObserve` is set to true
+
+  If set to true watch objects and arrays using Proxy to detect changes made directly:
+    - in arrays: via index e.g. `array[5] = "xyz"`
+    - in objects: new properties that weren't present when `BaseSignal` was created.
+
+  If set to false (default, more performant) changes to:
+    - arrays are only detected if `push`, `splice`, `sort`, `reverse` are called.
+      - this overwrites methods on main reference to array, be aware of that.
+    - object properties that were present when `BaseSignal` was created.
+  */
+  watchObjectIndex: boolean;
+
+  constructor(options?: BaseSignalOptions) {
+    this.dependencies = new Set();
+    this.deepObserve = options?.deepObserve ?? false;
+    this.watchObjectIndex = options?.watchObjectIndex ?? false;
+  }
+
+  get value(): T {
+    throw new Error("BaseSignal doesn't actually implement value getter!");
+  }
+  set value(_value: T) {
+    throw new Error("BaseSignal doesn't actually  implement value setter!");
+  }
+
+  peek(): T {
+    throw new Error("BaseSignal doesn't actually implement peek()!");
+  }
+
+  subscribe(callback: SubscriptionCallback<T>): void {
+    (this.subscriptions ??= []).push(callback as SubscriptionCallback<unknown>);
+  }
+
+  updateDependencies(): void {
+    const { dependencies, subscriptions } = this;
+
+    if (subscriptions?.length) {
+      const value = this.peek();
+      for (const callback of subscriptions) {
+        callback(value);
+      }
+    }
+
+    if (!dependencies?.size) return;
+
+    for (const dependency of dependencies) {
+      if (dependency instanceof Effect) {
+        dependency.func();
+      } else if (dependency instanceof Computed) {
+        dependency.update();
+      }
+    }
+  }
+
+  dispose(): void {
+    for (const dependency of this.dependencies) {
+      const isEffect = dependency instanceof Effect;
+      const isComputed = dependency instanceof Computed;
+
+      if (isEffect || isComputed) {
+        const dependants = dependency.dependants;
+        dependants?.delete(this);
+
+        if (!dependants?.size && isComputed) {
+          dependency.dispose();
+          Object.defineProperty(dependency, "value", { value: dependency.peek() });
+        }
+      }
+    }
+  }
+}
+
+export class Signal<T> extends BaseSignal<T> {
+  #value!: T;
+
+  constructor(value: T, options?: BaseSignalOptions) {
+    super(options);
+    this.#value = value;
+    if (this.deepObserve) {
+      this.#value = makeObjectReactiveToSignal(this, this.watchObjectIndex);
+    }
+  }
+
+  get value(): T {
+    if (trackSignals) activeSignals.add(this);
+    return this.#value;
+  }
+
+  set value(value) {
+    if (trackSignals) activeSignals.add(this);
+
+    const oldValue = this.#value;
+    this.#value = value;
+
+    if (value !== oldValue) {
+      this.updateDependencies();
+    }
+  }
+
+  peek(): T {
+    return this.#value;
+  }
+
+  valueOf(): T {
+    return this.#value;
+  }
+
+  toString(): string {
+    return `${this.#value}`;
+  }
+}
+
+export type ComputedFunction<T> = (this: Computed<T>, value: T) => T;
+
+export class Computed<T> extends BaseSignal<T> {
+  #value!: T;
+  #updator: ComputedFunction<T>;
+  dependants?: Set<AnySignal>;
+
+  constructor(updator: ComputedFunction<T>) {
+    super();
+    this.#updator = updator.bind(this);
+    this.update();
+    this.trackDependencies();
+  }
+
+  async trackDependencies() {
+    const dependants = await trackDependencies(this, this.update);
+    dependants.delete(this);
+    this.dependants = dependants;
+
+    for (const signal of dependants) {
+      signal.dependencies.add(this);
+    }
+  }
+
+  /** Update value using `updator` */
+  update(): void {
+    if (trackSignals) activeSignals.add(this);
+
+    const oldValue = this.#value;
+    this.#value = this.#updator(oldValue);
+
+    if (this.#value !== oldValue) {
+      this.updateDependencies();
+    }
+  }
+
+  peek(): T {
+    return this.#value;
+  }
+
+  get value(): T {
+    if (trackSignals) activeSignals.add(this);
+    return this.#value;
+  }
+
+  valueOf(): T {
+    return this.#value;
+  }
+
+  toString(): string {
+    return `${this.#value}`;
+  }
+}
+
+export type EffectFunction<T> = (this: Effect<T>) => unknown;
+
+export class Effect<T> {
+  readonly func: EffectFunction<T>;
+  dependants?: Set<BaseSignal<unknown>>;
+
+  constructor(func: EffectFunction<T>) {
+    this.func = func.bind(this);
+    this.trackDependencies();
+  }
+
+  async trackDependencies() {
+    this.dependants = await trackDependencies(this, this.func);
+    for (const signal of this.dependants) {
+      signal.dependencies.add(this);
+    }
+  }
+
+  /** Remove effect from dependants */
+  dispose(): void {
+    for (const signal of this.dependants!) {
+      signal.dependencies.delete(this);
+    }
+  }
+}
+
+/**
+ * Makes {signal}'s value deeply reactive
+ *
+ * When {watchObjectIndex} is set it is achieved using `Proxy`, otherwise:
+ *  - In case of `Array` it overwrites `push`, `pop`, `splice`, `sort` and `reverse` on object and updates signal when they are called & array changed
+ *  - In case of objects it overwrites all properties on object that are already present with getters and setters and updates signal when values change
+ */
+export function makeObjectReactiveToSignal<T>(signal: Signal<T>, watchObjectIndex: boolean): T {
+  const object = signal.peek();
+  if (typeof object !== "object") {
+    throw new Error("makeObjectReactiveToSignal can only be called when signal's value is an object");
+  }
+
+  if (watchObjectIndex) {
+    // deno-lint-ignore no-explicit-any
+    const reactiveProxyHandler: ProxyHandler<any> = {
+      get(target, property) {
+        return target[property];
+      },
+      set(target, property, value) {
+        const oldValue = target[property];
+        target[property] = value;
+
+        if (value !== oldValue) {
+          signal.updateDependencies();
+        }
+        return true;
+      },
+    };
+
+    return new Proxy(object, reactiveProxyHandler);
+  } else if (Array.isArray(object)) {
+    const push = Array.prototype.push.bind(object);
+    object.push = function (...items) {
+      const output = push(...items);
+      if (items.length) {
+        signal.updateDependencies();
+      }
+      return output;
+    };
+
+    const pop = Array.prototype.pop.bind(object);
+    object.pop = function () {
+      const output = pop();
+      signal.updateDependencies();
+      return output;
+    };
+
+    const splice = Array.prototype.splice.bind(object);
+    object.splice = function (start, deleteCount) {
+      const output = splice(start, deleteCount);
+      if (output.length) {
+        signal.updateDependencies();
+      }
+      return output;
+    };
+
+    const sort = Array.prototype.sort.bind(object);
+    object.sort = function (compareFn) {
+      const output = sort(compareFn) as T & unknown[];
+      signal.updateDependencies();
+      return output;
+    };
+
+    const reverse = Array.prototype.reverse.bind(object);
+    object.reverse = function () {
+      const output = reverse();
+      signal.updateDependencies();
+      return output;
+    };
+
+    return object;
+  }
+
+  const object2 = {} as T;
+
+  for (const property in object) {
+    Object.defineProperty(object2, property, {
+      get() {
+        return object[property];
+      },
+      set(value) {
+        const oldValue = object[property];
+        object[property] = value;
+
+        if (value !== oldValue) {
+          signal.updateDependencies();
+        }
+      },
+    });
+  }
+
+  return object2;
+}
+
+let trackSignals = false;
+let $in = 0;
+let $out = 0;
+// deno-lint-ignore no-explicit-any
+const activeSignals = new Set<BaseSignal<any>>();
+
+/** Track dependencies of given function */
+export async function trackDependencies(thisArg: unknown, func: () => void) {
+  while (trackSignals || $in !== $out) {
+    await sleep(0);
+  }
+
+  trackSignals = true;
+  ++$in;
+  func.call(thisArg);
+  ++$out;
+  trackSignals = false;
+  const active = new Set(activeSignals);
+  activeSignals.clear();
+  return active;
+}
diff --git a/src/theme.ts b/src/theme.ts
index 365b6d6..b5d3c3a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 /** Function that's supposed to return styled text given string as parameter */
 export type Style = (text: string) => string;
@@ -14,34 +14,21 @@ export function replaceEmptyStyle(style: Style, replacement: Style): Style {
 }
 
 /** Applies default values to properties (lower one hierarchy or `emptyStyle`) that aren't set */
-export function hierarchizeTheme<
-  T extends Theme = Theme,
-  Y extends Partial<T> = Partial<T>,
->(input: Y): T {
-  let { base, active, focused } = input;
-
-  base ??= emptyStyle;
-  focused ??= base;
-  active ??= focused ?? base;
-
-  const obj: Record<string, unknown> = {};
-
-  const otherKeys = Object
-    .getOwnPropertyNames(input)
-    .filter((key) => !["base", "focused", "active"].includes(key));
-
-  for (const key of otherKeys) {
-    const property = input[key as keyof Y];
-    if (typeof property !== "object") {
-      obj[key] ??= emptyStyle;
+export function hierarchizeTheme(input: Partial<Theme> = {}): Theme {
+  input.base ??= emptyStyle;
+  input.disabled ??= input.base;
+  input.focused ??= input.base;
+  input.active ??= input.focused;
+
+  const output = input as Theme & Record<string, Theme>;
+  for (const key in output) {
+    if (key === "base" || key === "focused" || key === "active" || key === "disabled" || output === output[key]) {
       continue;
     }
-
-    // deno-lint-ignore no-explicit-any
-    obj[key] = hierarchizeTheme<any, any>(property);
+    output[key] = hierarchizeTheme(output[key]);
   }
 
-  return { ...obj, base, focused, active } as T;
+  return output;
 }
 
 /** Base theme used to style components, can be expanded upon */
@@ -52,4 +39,6 @@ export interface Theme {
   focused: Style;
   /** Style when component is active */
   active: Style;
+  /** Style when component is disabled */
+  disabled: Style;
 }
diff --git a/src/tui.ts b/src/tui.ts
index bd7714f..ddac15c 100644
--- a/src/tui.ts
+++ b/src/tui.ts
@@ -1,189 +1,173 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-import { Canvas } from "./canvas.ts";
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { BoxObject, Canvas } from "./canvas/mod.ts";
 import { Component } from "./component.ts";
-import { emptyStyle, Style } from "./theme.ts";
 import { EmitterEvent, EventEmitter } from "./event_emitter.ts";
-
-import { sleep } from "./utils/async.ts";
-import { SortedArray } from "./utils/sorted_array.ts";
-import { Deffered } from "./utils/deffered.ts";
-import {
-  CLEAR_SCREEN,
-  HIDE_CURSOR,
-  SHOW_CURSOR,
-  USE_PRIMARY_BUFFER,
-  USE_SECONDARY_BUFFER,
-} from "./utils/ansi_codes.ts";
-
-import type { KeyPress, MousePress, MultiKeyPress, Stdin, Stdout, Timing } from "./types.ts";
-import type { EventRecord } from "./event_emitter.ts";
+import { InputEventRecord } from "./input_reader/mod.ts";
+import { Computed } from "./signals.ts";
+import { Style } from "./theme.ts";
+import { Stdin, Stdout } from "./types.ts";
+import { HIDE_CURSOR, SHOW_CURSOR, USE_PRIMARY_BUFFER, USE_SECONDARY_BUFFER } from "./utils/ansi_codes.ts";
 
 const textEncoder = new TextEncoder();
 
-/** Interface defining object that {Tui}'s constructor can interpret */
 export interface TuiOptions {
-  /** Tui will use that canvas to draw on the terminal */
-  canvas?: Canvas;
-  /** Stdin from which tui can read keypresses in `handleKeypresses()`, defaults to `Deno.stdin` */
+  style?: Style;
   stdin?: Stdin;
-  /** Stdout to which tui will write when necessary, defaults to `Deno.stdout` */
   stdout?: Stdout;
-  /** Style of background drawn by tui */
-  style?: Style;
-  /** Distinct update rate at which component `draw()` function will be called, defaults to canvas `refreshRate`*/
-  updateRate?: number;
+  canvas?: Canvas;
+  refreshRate?: number;
 }
 
-/** Interface defining what's accessible in {Tui} class */
-export interface TuiPrivate {
-  canvas: Canvas;
+export class Tui extends EventEmitter<
+  {
+    destroy: EmitterEvent<[]>;
+  } & InputEventRecord
+> {
   stdin: Stdin;
   stdout: Stdout;
-  components: SortedArray<Component>;
-  updateRate: number;
-}
-
-/** Implementation for {Tui} class */
-export type TuiImplementation = TuiOptions & TuiPrivate;
-
-/** EventMap that {Tui} uses */
-export type TuiEventMap = {
-  render: EmitterEvent<[Timing]>;
-  update: EmitterEvent<[]>;
-  keyPress: EmitterEvent<[KeyPress]>;
-  multiKeyPress: EmitterEvent<[MultiKeyPress]>;
-  mousePress: EmitterEvent<[MousePress]>;
-  dispatch: EmitterEvent<[]>;
-  addComponent: EmitterEvent<[Component<EventRecord>]>;
-  removeComponent: EmitterEvent<[Component<EventRecord>]>;
-};
-
-/** Main object of Tui that contains everything keeping it running */
-export class Tui extends EventEmitter<TuiEventMap> implements TuiImplementation {
-  #dispatches: (() => void)[] = [];
-
   canvas: Canvas;
-  stdin: Stdin;
-  stdout: Stdout;
-  style: Style;
-  components: SortedArray<Component<EventRecord>>;
-  updateRate: number;
+  style?: Style;
+  children: Component[];
+  components: Set<Component>;
+  focusedComponents: Set<Component>;
+  drawnObjects: { background?: BoxObject };
+  refreshRate: number;
+
+  #nextUpdateTimeout?: number;
 
   constructor(options: TuiOptions) {
     super();
-
     this.stdin = options.stdin ?? Deno.stdin;
     this.stdout = options.stdout ?? Deno.stdout;
-    this.style = options.style ?? emptyStyle;
-    this.components = new SortedArray((a, b) => a.zIndex - b.zIndex);
-
+    this.refreshRate = options.refreshRate ?? 1000 / 60;
     this.canvas = options.canvas ?? new Canvas({
-      refreshRate: 16,
       stdout: this.stdout,
+      size: Deno.consoleSize(),
     });
 
-    this.updateRate = options.updateRate ?? this.canvas.refreshRate;
-  }
+    this.style = options.style;
 
-  /**
-   * It does several things:
-   *  - Disables all event listeners
-   *  - Calls `Component.remove` on every component in `Tui.components`
-   *  - Stops `Tui.render()` and `Tui.update()` via `Tui.#dispatches`
-   *  - Writes ANSI sequences to stdout which shows back cursor and returns to using primary terminal buffer
-   */
-  remove(): void {
-    this.off();
+    this.drawnObjects = {};
+    this.components = new Set();
+    this.focusedComponents = new Set();
+    this.children = [];
 
-    for (const dispatch of this.#dispatches) dispatch();
-    for (const component of this.components) component.remove();
+    const updateCanvasSize = () => {
+      const { canvas } = this;
+      const { columns, rows } = Deno.consoleSize();
 
-    Deno.writeSync(this.stdout.rid, textEncoder.encode(SHOW_CURSOR + USE_PRIMARY_BUFFER));
-    this.stdin.setRaw(false);
-  }
+      const size = canvas.size.peek();
 
-  /**
-   * Emits "dispatch" event on signals and keystrokes that should terminate an application
-   *  - SIGBREAK
-   *  - SIGTERM (not windows)
-   *  - SIGINT
-   *  - CTRL+C (windows)
-   */
-  dispatch(): void {
-    const closeEventDispatcher = () => this.emit("dispatch");
-
-    switch (Deno.build.os) {
-      case "windows":
-        Deno.addSignalListener("SIGBREAK", closeEventDispatcher);
-
-        this.on("keyPress", ({ key, ctrl }) => {
-          if (key === "c" && ctrl) closeEventDispatcher();
-        });
-        break;
-      default:
-        Deno.addSignalListener("SIGTERM", closeEventDispatcher);
-        break;
+      if (size.columns !== columns || size.rows !== rows) {
+        canvas.resize = true;
+        size.columns = columns;
+        size.rows = rows;
+      }
+    };
+
+    updateCanvasSize();
+    if (Deno.build.os === "windows") {
+      this.canvas.on("render", updateCanvasSize);
+    } else {
+      Deno.addSignalListener("SIGWINCH", updateCanvasSize);
     }
+  }
 
-    Deno.addSignalListener("SIGINT", closeEventDispatcher);
+  addChild(child: Component): void {
+    this.children.push(child);
+    this.components.add(child);
 
-    this.on("dispatch", () => {
-      this.remove();
-      // Delay exiting from app so it's possible to attach anywhere else to "dispatch" event
-      queueMicrotask(() => Deno.exit(0));
-    });
+    if (!child.visible.peek()) return;
+    child.draw();
   }
 
-  /**
-   * Generates "update" events in {Tui}
-   * Returns function that stops it
-   */
-  update(): () => void {
-    const deffered = new Deffered<void>();
-
-    (async () => {
-      while (deffered.state === "pending") {
-        this.emit("update");
-        await sleep(this.updateRate);
-      }
-    })();
+  run(): void {
+    const { style, canvas, stdout, drawnObjects } = this;
+
+    if (style) {
+      const { background } = drawnObjects;
+
+      background?.erase();
+
+      const { columns, rows } = canvas.size.peek();
+
+      const backgroundRectangle = {
+        column: 0,
+        row: 0,
+        width: columns,
+        height: rows,
+      };
+
+      const box = new BoxObject({
+        canvas,
+        rectangle: new Computed(() => {
+          const { columns, rows } = this.canvas.size.value;
+          backgroundRectangle.width = columns;
+          backgroundRectangle.height = rows;
+          return backgroundRectangle;
+        }),
+        style,
+        zIndex: -1,
+      });
+
+      drawnObjects.background = box;
+      box.draw();
+    }
 
-    return deffered.resolve;
-  }
+    Deno.writeSync(stdout.rid, textEncoder.encode(USE_SECONDARY_BUFFER + HIDE_CURSOR));
 
-  /**
-   * Redirects "frame" event from {Canvas} to "render" event in {Tui}
-   * Returns function that stops {Canvas.render}
-   */
-  render(): () => void {
-    this.canvas.on("frame", (timing) => this.emit("render", timing));
-    return this.canvas.render();
+    for (const event of ["keyPress", "mouseEvent", "mousePress", "mouseScroll"] as const) {
+      this.on(event, (arg) => {
+        for (const component of this.focusedComponents) {
+          // @ts-expect-error welp
+          component.emit(event, arg);
+        }
+      });
+    }
+
+    const updateStep = () => {
+      canvas.render();
+      this.#nextUpdateTimeout = setTimeout(updateStep, this.refreshRate);
+    };
+    updateStep();
   }
 
-  /**
-   * It does several things:
-   *  - Writes ANSI sequences to stdout to use secondary terminal buffer, hide cursor and clear screen
-   *  - Calls `Tui.update()` and `Tui.render()`
-   *  - On "update" event it renders background using `Tui.style` and calls `Component.draw()` on every component in `Tui.components`
-   */
-  run(): void {
-    Deno.writeSync(this.stdout.rid, textEncoder.encode(USE_SECONDARY_BUFFER + HIDE_CURSOR + CLEAR_SCREEN));
+  destroy(): void {
+    this.off();
 
-    this.#dispatches.push(
-      this.update(),
-      this.render(),
-    );
+    clearTimeout(this.#nextUpdateTimeout);
 
-    this.on("update", () => {
-      const { columns, rows } = this.canvas.size;
-      this.canvas.draw(0, 0, this.style((" ".repeat(columns) + "\n").repeat(rows)));
+    try {
+      this.stdin.setRaw(false);
+    } catch { /**/ }
 
-      for (const component of this.components) {
-        const { rectangle } = component;
-        if (rectangle && (rectangle.column > columns || rectangle.row > rows)) continue;
-        component.draw();
-      }
+    Deno.writeSync(this.stdout.rid, textEncoder.encode(USE_PRIMARY_BUFFER + SHOW_CURSOR));
+
+    for (const component of this.components) {
+      component.destroy();
+    }
+  }
+
+  dispatch(): void {
+    const destroyDispatcher = () => {
+      this.emit("destroy");
+    };
+
+    if (Deno.build.os === "windows") {
+      Deno.addSignalListener("SIGBREAK", destroyDispatcher);
+
+      this.on("keyPress", ({ key, ctrl }) => {
+        if (ctrl && key === "c") destroyDispatcher();
+      });
+    } else {
+      Deno.addSignalListener("SIGTERM", destroyDispatcher);
+    }
+
+    Deno.addSignalListener("SIGINT", destroyDispatcher);
+
+    this.on("destroy", () => {
+      this.destroy();
+      queueMicrotask(() => Deno.exit(0));
     });
   }
 }
diff --git a/src/types.ts b/src/types.ts
index ae07bd5..59a01ac 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-
-export * from "./key_reader/types.ts";
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 /** Type for Standard Output – where data gets written */
 export type Stdout = typeof Deno.stdout;
@@ -11,20 +9,10 @@ export type Stdin = typeof Deno.stdin;
 /** Type defining terminal's (console) available size measured in columns and rows */
 export type ConsoleSize = ReturnType<typeof Deno.consoleSize>;
 
-/**
- * Type describing time of something happening
- *  - Pre - before it happened
- *  - Post - after it happened
- */
-export enum Timing {
-  Pre = "pre",
-  Post = "post",
-}
-
 /** Type that describes offset */
 export interface Offset {
-  x: number;
-  y: number;
+  columns: number;
+  rows: number;
 }
 
 /** Type that describes empty edge around Rectangle */
@@ -52,10 +40,14 @@ type _Range<From extends number, To extends number, R extends unknown[]> = R["le
     | _Range<From, To, [To, ...R]>;
 
 /** Partial that makes all properties optional, even those within other object properties */
-export type DeepPartial<Object> = {
-  // deno-lint-ignore ban-types
-  [key in keyof Object]?: Object[key] extends object
+export type DeepPartial<Object, OmitKeys extends keyof Object = never> =
+  & {
     // deno-lint-ignore ban-types
-    ? Object[key] extends Function ? Object[key] : DeepPartial<Object[key]>
-    : Object[key];
-};
+    [key in Exclude<keyof Object, OmitKeys>]?: Object[key] extends object
+      // deno-lint-ignore ban-types
+      ? Object[key] extends Function ? Object[key] : DeepPartial<Object[key]>
+      : Object[key];
+  }
+  & {
+    [key in OmitKeys]: DeepPartial<Object[key]>;
+  };
diff --git a/src/utils/ansi_codes.ts b/src/utils/ansi_codes.ts
index 2cfdee2..670ae70 100644
--- a/src/utils/ansi_codes.ts
+++ b/src/utils/ansi_codes.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 /** Get ANSI escape code for moving cursor to given location */
 export function moveCursor(row: number, column: number): string {
diff --git a/src/utils/async.ts b/src/utils/async.ts
index fbb953c..189a285 100644
--- a/src/utils/async.ts
+++ b/src/utils/async.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 /** Asynchronously sleep for {time} milliseconds */
 export function sleep(time: number): Promise<void> {
diff --git a/src/utils/component.ts b/src/utils/component.ts
index 5513f63..9641c85 100644
--- a/src/utils/component.ts
+++ b/src/utils/component.ts
@@ -1,13 +1,23 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
 import { Tui } from "../tui.ts";
 import { Component } from "../component.ts";
 
+/** Returns whether component defines `interact` property  */
+export function isInteractable(component: Component): boolean {
+  return component.interact !== Component.prototype.interact;
+}
+
 /** Returns component that's the closest to top left corner of tui's canvas */
-export function getComponentClosestToTopLeftCorner(tui: Tui, interactable = false): Component {
-  let closestToTLCorner!: [number, Component];
+export function getComponentClosestToTopLeftCorner(tui: Tui, filterFn?: (component: Component) => boolean): Component {
+  let closestDistance!: number;
+  let closestComponent!: Component;
+
   for (const component of tui.components) {
-    const { rectangle, zIndex, interact } = component;
-    if (!rectangle || (interactable && interact === Component.prototype.interact)) {
+    const rectangle = component.rectangle.peek();
+    const zIndex = component.zIndex.peek();
+
+    if (filterFn && !filterFn(component)) {
       continue;
     }
 
@@ -16,9 +26,12 @@ export function getComponentClosestToTopLeftCorner(tui: Tui, interactable = fals
       (0 - rectangle.column) ** 2
     ) ** 0.5;
 
-    if (!closestToTLCorner || (distance < closestToTLCorner[0] && zIndex > closestToTLCorner[1].zIndex)) {
-      closestToTLCorner = [distance, component];
+    if (!closestComponent || (distance < closestDistance && zIndex > closestComponent.zIndex.peek())) {
+      closestDistance = distance;
+      closestComponent = component;
+      if (distance === 0) break;
     }
   }
-  return closestToTLCorner[1];
+
+  return closestComponent;
 }
diff --git a/src/utils/deffered.ts b/src/utils/deffered.ts
deleted file mode 100644
index 51d1300..0000000
--- a/src/utils/deffered.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-/** Promise with `reject` and `resolve` functions */
-export class Deffered<T = void> extends Promise<T> {
-  resolve!: (value: T | PromiseLike<T>) => void;
-  // deno-lint-ignore no-explicit-any
-  reject!: (reason?: any) => void;
-  state!: "pending" | "fulfilled" | "rejected";
-
-  constructor() {
-    let functions!: {
-      resolve: Deffered<T>["resolve"];
-      reject: Deffered<T>["reject"];
-    };
-
-    super((resolve, reject) => {
-      functions = {
-        resolve: (v) => {
-          resolve(v);
-          this.state = "fulfilled";
-        },
-        reject: (v) => {
-          reject(v);
-          this.state = "rejected";
-        },
-      };
-    });
-
-    this.state = "pending";
-    Object.assign(this, functions);
-  }
-
-  static get [Symbol.species]() {
-    return Promise;
-  }
-}
diff --git a/src/utils/mod.ts b/src/utils/mod.ts
index de7b899..5f868cb 100644
--- a/src/utils/mod.ts
+++ b/src/utils/mod.ts
@@ -1,8 +1,8 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 export * from "./ansi_codes.ts";
 export * from "./async.ts";
-export * from "./deffered.ts";
 export * from "./numbers.ts";
 export * from "./sorted_array.ts";
 export * from "./strings.ts";
 export * from "./component.ts";
+export * from "./signals.ts";
diff --git a/src/utils/numbers.ts b/src/utils/numbers.ts
index dc4f906..2203eca 100644
--- a/src/utils/numbers.ts
+++ b/src/utils/numbers.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 import type { Rectangle } from "../types.ts";
 
@@ -13,10 +13,64 @@ export function fits(number: number, min: number, max: number): boolean {
 }
 
 /** Check whether {column} and {row} fit in {rectangle} boundaries */
-export function fitsInRectangle(column: number, row: number, rectangle?: Rectangle): boolean {
-  if (!rectangle) return true;
-  return fits(column, rectangle.column, rectangle.column + rectangle.width) &&
-    fits(row, rectangle.row, rectangle.row + rectangle.height);
+export function fitsInRectangle(column: number, row: number, rectangle: Rectangle): boolean {
+  return (
+    rectangle.width !== 0 && rectangle.height !== 0 &&
+    column >= rectangle.column && column < rectangle.column + rectangle.width &&
+    row >= rectangle.row && row < rectangle.row + rectangle.height
+  );
+}
+
+/** Check whether rectangle {a} is the same as rectangle {b} */
+export function rectangleEquals(a: Rectangle, b: Rectangle): boolean {
+  return (a === b) || (a.column === b.column && a.row === b.row && a.width === b.width && a.height === b.height);
+}
+
+const intersectionObject = { column: 0, row: 0, width: 0, height: 0 };
+/**
+ * Calculate intersection between two rectangles
+ *
+ * When `data` is set to true it returns:
+ *  - collision rectangle when they collide
+ *  - false when they don't
+ *
+ * Otherwise it simply returns boolean whether they collide
+ *
+ * **Don't hold onto intersection object reference that gets returned!**
+ *
+ * **It gets reused to save CPU usage and minimize GC.**
+ */
+export function rectangleIntersection(a: Rectangle, b: Rectangle, data?: false): boolean;
+export function rectangleIntersection(a: Rectangle, b: Rectangle, data: true): false | Rectangle;
+export function rectangleIntersection(a: Rectangle, b: Rectangle, data?: boolean): boolean | Rectangle {
+  const { column: c1, row: r1, width: w1, height: h1 } = a;
+  if (w1 === 0 || h1 === 0) false;
+  const { column: c2, row: r2, width: w2, height: h2 } = b;
+  if (w2 === 0 || h2 === 0) false;
+
+  if (
+    c1 >= c2 + w2 || c2 >= c1 + w1 ||
+    r1 >= r2 + h2 || r2 >= r1 + h1
+  ) {
+    return false;
+  } else if (!data) {
+    return true;
+  }
+
+  const colWidth = Math.min(c1 + w1, c2 + w2);
+  const rowHeight = Math.min(r1 + h1, r2 + h2);
+
+  const width = Math.max(0, colWidth - Math.max(c1, c2));
+  if (width === 0) return false;
+  const height = Math.max(0, rowHeight - Math.max(r1, r2));
+  if (height === 0) return false;
+
+  intersectionObject.column = colWidth - width;
+  intersectionObject.row = rowHeight - height;
+  intersectionObject.width = width;
+  intersectionObject.height = height;
+
+  return intersectionObject;
 }
 
 /** Normalize {value} between 0 and 1 */
diff --git a/src/utils/signals.ts b/src/utils/signals.ts
new file mode 100644
index 0000000..a8896ca
--- /dev/null
+++ b/src/utils/signals.ts
@@ -0,0 +1,7 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { BaseSignal, BaseSignalOptions, Signal } from "../signals.ts";
+
+/** Creates signal from input if it's not already a signal */
+export function signalify<T>(input: T | BaseSignal<T>, options?: BaseSignalOptions): BaseSignal<T> {
+  return input instanceof BaseSignal ? input : new Signal(input, options);
+}
diff --git a/src/utils/sorted_array.ts b/src/utils/sorted_array.ts
index 47bb2d3..6483a5d 100644
--- a/src/utils/sorted_array.ts
+++ b/src/utils/sorted_array.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 export type CompareFn<T> = (a: T, b: T) => number;
 
@@ -21,9 +21,9 @@ export class SortedArray<T = unknown> extends Array<T> {
   }
 
   remove(...items: T[]): number {
-    const filtered = this.filter((item) => !items.includes(item));
-    this.length = 0;
-    this.push(...filtered);
+    for (const item of items) {
+      this.splice(this.indexOf(item), 1);
+    }
     return this.length;
   }
 }
diff --git a/src/utils/strings.ts b/src/utils/strings.ts
index dfcc635..c929734 100644
--- a/src/utils/strings.ts
+++ b/src/utils/strings.ts
@@ -1,4 +1,4 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
 
 /**
  * Regexp that allows for extracting unicode sequences that are supposed to represent single character
@@ -8,37 +8,55 @@
 export const UNICODE_CHAR_REGEXP =
   /\ud83c[\udffb-\udfff](?=\ud83c[\udffb-\udfff])|(?:(?:\ud83c\udff4\udb40\udc67\udb40\udc62\udb40(?:\udc65|\udc73|\udc77)\udb40(?:\udc6e|\udc63|\udc6c)\udb40(?:\udc67|\udc74|\udc73)\udb40\udc7f)|[^\ud800-\udfff][\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff\u1ab0-\u1aff\u1dc0-\u1dff]?|[\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff\u1ab0-\u1aff\u1dc0-\u1dff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff]|[\ud800-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff\u1ab0-\u1aff\u1dc0-\u1dff]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff\u1ab0-\u1aff\u1dc0-\u1dff]|\ud83c[\udffb-\udfff])?)*/g;
 
-/** Strips string of all styles */
+// deno-lint-ignore no-control-regex
+const STRIP_STYLE_REGEXP = /\x1b\[([0-9]|;)+m/gi;
+
+/** Strips string of all its styles */
 export function stripStyles(string: string): string {
-  return string.replaceAll(/\x1b\[([0-9]|;)+m/gi, "");
+  return string.replaceAll(STRIP_STYLE_REGEXP, "");
 }
 
-/** Inserts string into string on given index */
+/** Inserts {value} into {string} on given {index} */
 export function insertAt(string: string, index: number, value: string): string {
   return string.slice(0, index) + value + string.slice(index);
 }
 
-/** Returns real text width */
+/** Returns real {text} width */
 export function textWidth(text: string): number {
   if (!text) return 0;
 
   let width = 0;
-  for (const letter of stripStyles(text)) {
-    width += isFullWidth(letter) ? 2 : 1;
+  const strippedString = stripStyles(text);
+  for (let i = 0; i < strippedString.length; i++) {
+    width += characterWidth(strippedString[i]);
   }
 
   return width;
 }
 
+/** Crops {text} to given {width} */
+export function cropToWidth(text: string, width: number): string {
+  text = text.slice(0, width);
+  if (textWidth(text) <= width) return text;
+  do {
+    text = text.slice(0, -1);
+  } while (textWidth(text) > width);
+  return text;
+}
+
 /**
- * Check whether character is full width
+ * Return width of given character
  *
  * Originally created by sindresorhus: https://github.com/sindresorhus/is-fullwidth-code-point/blob/main/index.js
  */
-export function isFullWidth(character: string): boolean {
+export function characterWidth(character: string): number {
   const codePoint = character.charCodeAt(0);
 
-  return (
+  if (codePoint === 0xD83E || codePoint === 0x200B) {
+    return 0;
+  }
+
+  if (
     codePoint >= 0x1100 &&
     (codePoint <= 0x115f ||
       codePoint === 0x2329 ||
@@ -56,5 +74,14 @@ export function isFullWidth(character: string): boolean {
       (0x1b000 <= codePoint && codePoint <= 0x1b001) ||
       (0x1f200 <= codePoint && codePoint <= 0x1f251) ||
       (0x20000 <= codePoint && codePoint <= 0x3fffd))
-  );
+  ) {
+    return 2;
+  }
+
+  return 1;
+}
+
+/** Returns capitalized string created from {text} */
+export function capitalize<T extends string>(text: T): Capitalize<T> {
+  return (text[0].toUpperCase() + text.slice(1)) as Capitalize<T>;
 }
diff --git a/src/view.ts b/src/view.ts
new file mode 100644
index 0000000..d9d64f1
--- /dev/null
+++ b/src/view.ts
@@ -0,0 +1,20 @@
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+import { Offset, Rectangle } from "./types.ts";
+
+interface ViewOptions {
+  offset?: Offset;
+  maxOffset?: Offset;
+  rectangle: Rectangle;
+}
+
+export class View {
+  offset: Offset;
+  maxOffset: Offset;
+  rectangle: Rectangle;
+
+  constructor(options: ViewOptions) {
+    this.rectangle = options.rectangle;
+    this.offset = options.offset ?? { columns: 0, rows: 0 };
+    this.maxOffset = options.maxOffset ?? { columns: 0, rows: 0 };
+  }
+}
diff --git a/tests/deps.ts b/tests/deps.ts
index 7a4097a..cef4bcb 100644
--- a/tests/deps.ts
+++ b/tests/deps.ts
@@ -1 +1 @@
-export * from "https://deno.land/std@0.155.0/testing/asserts.ts";
+export * from "https://deno.land/std@0.175.0/testing/asserts.ts";
diff --git a/tests/event_emitter.test.ts b/tests/event_emitter.test.ts
index e72f42b..99be292 100644
--- a/tests/event_emitter.test.ts
+++ b/tests/event_emitter.test.ts
@@ -1,4 +1,5 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
 import { EventEmitter } from "../src/event_emitter.ts";
 import { assertEquals } from "./deps.ts";
 
diff --git a/tests/utils/async.test.ts b/tests/utils/async.test.ts
index 0d51d47..3fa66f2 100644
--- a/tests/utils/async.test.ts
+++ b/tests/utils/async.test.ts
@@ -1,4 +1,5 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
 import { sleep } from "../../src/utils/async.ts";
 import { assertAlmostEquals } from "../deps.ts";
 
diff --git a/tests/utils/deffered.test.ts b/tests/utils/deffered.test.ts
deleted file mode 100644
index 0e36983..0000000
--- a/tests/utils/deffered.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-import { sleep } from "../../src/utils/async.ts";
-import { Deffered } from "../../src/utils/deffered.ts";
-import { assert } from "../deps.ts";
-
-Deno.test("utils/deffered.ts", async (t) => {
-  await t.step("Deffered", async () => {
-    const deffered = new Deffered();
-    const deffered2 = new Deffered();
-
-    setTimeout(deffered.resolve, 10);
-    setTimeout(deffered2.reject, 15);
-
-    setTimeout(() => {
-      if (deffered.state === "pending") {
-        assert(false, "Deffered still pending when it should already be resolved");
-      }
-    }, 20);
-
-    await deffered
-      .then(() => {
-        assert(true);
-      })
-      .catch(() => {
-        assert(false, "Deffered rejected instead of resolving");
-      });
-
-    await deffered2
-      .then(() => assert(false, "Deffered resolved instead of rejecting"))
-      .catch(() => assert(true));
-
-    await sleep(10);
-  });
-});
diff --git a/tests/utils/numbers.test.ts b/tests/utils/numbers.test.ts
index fdb4391..d8ab72e 100644
--- a/tests/utils/numbers.test.ts
+++ b/tests/utils/numbers.test.ts
@@ -1,4 +1,5 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
 import { clamp, fits, fitsInRectangle, normalize } from "../../src/utils/numbers.ts";
 import { assertEquals } from "../deps.ts";
 
@@ -34,7 +35,8 @@ Deno.test("utils/numbers.ts", async (t) => {
     assertEquals(fitsInRectangle(13, 0, rectangle), false);
     assertEquals(fitsInRectangle(13, 6, rectangle), true);
     assertEquals(fitsInRectangle(5, 5, rectangle), true);
-    assertEquals(fitsInRectangle(15, 15, rectangle), true);
+    assertEquals(fitsInRectangle(14, 14, rectangle), true);
+    assertEquals(fitsInRectangle(15, 15, rectangle), false);
   });
 
   await t.step("normalize()", () => {
diff --git a/tests/utils/sorted_array.test.ts b/tests/utils/sorted_array.test.ts
index 562c1a8..9e8aeba 100644
--- a/tests/utils/sorted_array.test.ts
+++ b/tests/utils/sorted_array.test.ts
@@ -1,4 +1,5 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
 import { SortedArray } from "../../src/utils/sorted_array.ts";
 import { assertEquals } from "../deps.ts";
 
diff --git a/tests/utils/strings.test.ts b/tests/utils/strings.test.ts
index 6b4b519..ba5765d 100644
--- a/tests/utils/strings.test.ts
+++ b/tests/utils/strings.test.ts
@@ -1,9 +1,11 @@
-// Copyright 2022 Im-Beast. All rights reserved. MIT license.
-import { insertAt, isFullWidth, stripStyles, textWidth, UNICODE_CHAR_REGEXP } from "../../src/utils/strings.ts";
+// Copyright 2023 Im-Beast. All rights reserved. MIT license.
+
+import { characterWidth, insertAt, stripStyles, textWidth, UNICODE_CHAR_REGEXP } from "../../src/utils/strings.ts";
 import { assertEquals } from "../deps.ts";
 
 const unicodeString = "♥☭👀f🌏g⚠5✌💢✅💛🌻";
 const fullWidths = ["０", "１", "２", "３", "４", "ｈ", "ｉ", "ｊ", "ｋ", "ｌ", "テ", "ク", "ワ"];
+const halfWidths = ["a", "b", "1", "ą", "ł", "､", "ﾝ", "ｼ"];
 
 Deno.test("utils/strings.ts", async (t) => {
   await t.step("UNICODE_CHAR_REGEXP", () => {
@@ -18,16 +20,14 @@ Deno.test("utils/strings.ts", async (t) => {
     assertEquals(insertAt("test", 4, "!"), "test!");
   });
 
-  await t.step("isFullWidth()", () => {
+  await t.step("characterWidth()", () => {
     for (const character of fullWidths) {
-      assertEquals(isFullWidth(character), true);
+      assertEquals(characterWidth(character), 2);
     }
 
-    assertEquals(isFullWidth("a"), false);
-    assertEquals(isFullWidth("ą"), false);
-    assertEquals(isFullWidth("1"), false);
-    assertEquals(isFullWidth("k"), false);
-    assertEquals(isFullWidth("z"), false);
+    for (const character of halfWidths) {
+      assertEquals(characterWidth(character), 1);
+    }
   });
 
   await t.step("stripStyles()", () => {