diff --git a/Makefile b/Makefile
index 9344de3..503248f 100644
--- a/Makefile
+++ b/Makefile
@@ -1,6 +1,7 @@
 lint:
 	cargo fmt -- --check
 	cargo clippy --all-targets --all-features
+	cd webapp && npm install && npm run check
 
 format:
 	cargo fmt
@@ -10,7 +11,10 @@ tests: lint
 	./target/debug/documentation
 	cmp functions.md wiki/functions.md || exit 1
 	make remove-artifacts
-	cd bindings/wasm/ && wasm-pack build --target nodejs && node tests/test.mjs
+	# Regretabbly we need to build the wasm twice, once for the nodejs tests
+	# and a second one for the vitest.
+	cd bindings/wasm/ && wasm-pack build --target nodejs && node tests/test.mjs && make
+	cd webapp && npm run test
 
 remove-artifacts:
 	rm -f xlsx/hello-calc.xlsx
diff --git a/base/src/constants.rs b/base/src/constants.rs
index f1f7348..ef58273 100644
--- a/base/src/constants.rs
+++ b/base/src/constants.rs
@@ -6,6 +6,8 @@ pub(crate) const DEFAULT_COLUMN_WIDTH: f64 = 100.0;
 pub(crate) const DEFAULT_ROW_HEIGHT: f64 = 21.0;
 pub(crate) const COLUMN_WIDTH_FACTOR: f64 = 12.0;
 pub(crate) const ROW_HEIGHT_FACTOR: f64 = 2.0;
+pub(crate) const DEFAULT_WINDOW_HEIGH: i64 = 600;
+pub(crate) const DEFAULT_WINDOW_WIDTH: i64 = 800;
 
 pub(crate) const LAST_COLUMN: i32 = 16_384;
 pub(crate) const LAST_ROW: i32 = 1_048_576;
diff --git a/base/src/lib.rs b/base/src/lib.rs
index a5c632b..8c0e45d 100644
--- a/base/src/lib.rs
+++ b/base/src/lib.rs
@@ -57,4 +57,5 @@ pub mod mock_time;
 
 pub use model::get_milliseconds_since_epoch;
 pub use model::Model;
+pub use user_model::BorderArea;
 pub use user_model::UserModel;
diff --git a/base/src/new_empty.rs b/base/src/new_empty.rs
index 3b01cc4..fc4ba11 100644
--- a/base/src/new_empty.rs
+++ b/base/src/new_empty.rs
@@ -4,6 +4,7 @@ use std::collections::HashMap;
 
 use crate::{
     calc_result::Range,
+    constants::{DEFAULT_WINDOW_HEIGH, DEFAULT_WINDOW_WIDTH},
     expressions::{
         lexer::LexerMode,
         parser::{
@@ -353,7 +354,14 @@ impl Model {
         let now = dt.format("%Y-%m-%dT%H:%M:%SZ").to_string();
 
         let mut views = HashMap::new();
-        views.insert(0, WorkbookView { sheet: 0 });
+        views.insert(
+            0,
+            WorkbookView {
+                sheet: 0,
+                window_width: DEFAULT_WINDOW_WIDTH,
+                window_height: DEFAULT_WINDOW_HEIGH,
+            },
+        );
 
         // String versions of the locale are added here to simplify the serialize/deserialize logic
         let workbook = Workbook {
diff --git a/base/src/test/user_model/mod.rs b/base/src/test/user_model/mod.rs
index 1259726..0bb632c 100644
--- a/base/src/test/user_model/mod.rs
+++ b/base/src/test/user_model/mod.rs
@@ -1,14 +1,20 @@
 mod test_add_delete_sheets;
 mod test_autofill_columns;
 mod test_autofill_rows;
+mod test_border;
 mod test_clear_cells;
 mod test_diff_queue;
 mod test_evaluation;
 mod test_general;
 mod test_grid_lines;
+mod test_keyboard_navigation;
+mod test_on_area_selection;
+mod test_on_expand_selected_range;
+mod test_on_paste_styles;
 mod test_rename_sheet;
 mod test_row_column;
 mod test_styles;
 mod test_to_from_bytes;
 mod test_undo_redo;
 mod test_view;
+mod test_window_size;
diff --git a/base/src/test/user_model/test_add_delete_sheets.rs b/base/src/test/user_model/test_add_delete_sheets.rs
index 72ae562..cc07536 100644
--- a/base/src/test/user_model/test_add_delete_sheets.rs
+++ b/base/src/test/user_model/test_add_delete_sheets.rs
@@ -82,3 +82,15 @@ fn delete_sheet_propagates() {
     let sheets_info = model2.get_worksheets_properties();
     assert_eq!(sheets_info.len(), 1);
 }
+
+#[test]
+fn delete_last_sheet() {
+    // Deleting the last sheet, selects the previous
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    model.new_sheet();
+    model.new_sheet();
+    model.set_selected_sheet(2).unwrap();
+    model.delete_sheet(2).unwrap();
+
+    assert_eq!(model.get_selected_sheet(), 1);
+}
diff --git a/base/src/test/user_model/test_border.rs b/base/src/test/user_model/test_border.rs
new file mode 100644
index 0000000..7437ce6
--- /dev/null
+++ b/base/src/test/user_model/test_border.rs
@@ -0,0 +1,416 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::{
+    expressions::{types::Area, utils::number_to_column},
+    types::{Border, BorderItem, BorderStyle},
+    BorderArea, UserModel,
+};
+
+#[test]
+fn borders_all() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "All"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    for row in 5..9 {
+        for column in 6..9 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let border_item = BorderItem {
+                style: BorderStyle::Thin,
+                color: Some("#FF5566".to_string()),
+            };
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: Some(border_item.clone()),
+                right: Some(border_item.clone()),
+                top: Some(border_item.clone()),
+                bottom: Some(border_item.clone()),
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+
+    // Lets remove all of them:
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "None"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    for row in 5..9 {
+        for column in 6..9 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: None,
+                right: None,
+                top: None,
+                bottom: None,
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+}
+
+#[test]
+fn borders_inner() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "Inner"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    // The inner part all have borders
+    for row in 6..8 {
+        for column in 7..8 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let border_item = BorderItem {
+                style: BorderStyle::Thin,
+                color: Some("#FF5566".to_string()),
+            };
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: Some(border_item.clone()),
+                right: Some(border_item.clone()),
+                top: Some(border_item.clone()),
+                bottom: Some(border_item.clone()),
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+    // F5 has border only left and bottom
+    {
+        // We check the border on F5
+        let style = model.get_cell_style(0, 5, 6).unwrap();
+        let border_item = BorderItem {
+            style: BorderStyle::Thin,
+            color: Some("#FF5566".to_string()),
+        };
+        // It should be right and bottom
+        let expected_border = Border {
+            diagonal_up: false,
+            diagonal_down: false,
+            left: None,
+            right: Some(border_item.clone()),
+            top: None,
+            bottom: Some(border_item),
+            diagonal: None,
+        };
+        assert_eq!(style.border, expected_border);
+    }
+    {
+        // Then let's try the bottom-right border
+        let style = model.get_cell_style(0, 8, 8).unwrap();
+        let border_item = BorderItem {
+            style: BorderStyle::Thin,
+            color: Some("#FF5566".to_string()),
+        };
+        // It should be only left and top
+        let expected_border = Border {
+            diagonal_up: false,
+            diagonal_down: false,
+            left: Some(border_item.clone()),
+            right: None,
+            top: Some(border_item.clone()),
+            bottom: None,
+            diagonal: None,
+        };
+        assert_eq!(style.border, expected_border);
+    }
+}
+
+#[test]
+fn borders_outer() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "Outer"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    {
+        // We check the border on F5
+        let style = model.get_cell_style(0, 5, 6).unwrap();
+        let border_item = BorderItem {
+            style: BorderStyle::Thin,
+            color: Some("#FF5566".to_string()),
+        };
+        // It should be only left and top
+        let expected_border = Border {
+            diagonal_up: false,
+            diagonal_down: false,
+            left: Some(border_item.clone()),
+            right: None,
+            top: Some(border_item),
+            bottom: None,
+            diagonal: None,
+        };
+        assert_eq!(style.border, expected_border);
+    }
+    {
+        // Then let's try the bottom-right border
+        let style = model.get_cell_style(0, 8, 8).unwrap();
+        let border_item = BorderItem {
+            style: BorderStyle::Thin,
+            color: Some("#FF5566".to_string()),
+        };
+        // It should be only left and top
+        let expected_border = Border {
+            diagonal_up: false,
+            diagonal_down: false,
+            left: None,
+            right: Some(border_item.clone()),
+            top: None,
+            bottom: Some(border_item.clone()),
+            diagonal: None,
+        };
+        assert_eq!(style.border, expected_border);
+    }
+}
+
+#[test]
+fn borders_top() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "Top"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    for row in 5..9 {
+        for column in 6..9 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let border_item = BorderItem {
+                style: BorderStyle::Thin,
+                color: Some("#FF5566".to_string()),
+            };
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: None,
+                right: None,
+                top: Some(border_item.clone()),
+                bottom: None,
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+}
+
+#[test]
+fn borders_right() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "Right"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    for row in 5..9 {
+        for column in 6..9 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let border_item = BorderItem {
+                style: BorderStyle::Thin,
+                color: Some("#FF5566".to_string()),
+            };
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: None,
+                right: Some(border_item.clone()),
+                top: None,
+                bottom: None,
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+}
+
+#[test]
+fn borders_bottom() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "Bottom"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    for row in 5..9 {
+        for column in 6..9 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let border_item = BorderItem {
+                style: BorderStyle::Thin,
+                color: Some("#FF5566".to_string()),
+            };
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: None,
+                right: None,
+                top: None,
+                bottom: Some(border_item.clone()),
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+}
+
+#[test]
+fn borders_left() {
+    let mut model = UserModel::new_empty("model", "en", "UTC").unwrap();
+    // We set an outer border in cells F5:H9
+    let range = &Area {
+        sheet: 0,
+        row: 5,
+        column: 6,
+        width: 3,
+        height: 4,
+    };
+    assert_eq!(number_to_column(6).unwrap(), "F");
+    assert_eq!(number_to_column(8).unwrap(), "H");
+    // ATM we don't have a way to create the object from Rust, that's ok.
+    let border_area: BorderArea = serde_json::from_str(
+        r##"{
+      "item": {
+        "style": "thin",
+        "color": "#FF5566"
+      },
+      "type": "Left"
+    }"##,
+    )
+    .unwrap();
+    model.set_area_with_border(range, &border_area).unwrap();
+    for row in 5..9 {
+        for column in 6..9 {
+            let style = model.get_cell_style(0, row, column).unwrap();
+            let border_item = BorderItem {
+                style: BorderStyle::Thin,
+                color: Some("#FF5566".to_string()),
+            };
+            let expected_border = Border {
+                diagonal_up: false,
+                diagonal_down: false,
+                left: Some(border_item.clone()),
+                right: None,
+                top: None,
+                bottom: None,
+                diagonal: None,
+            };
+            assert_eq!(style.border, expected_border);
+        }
+    }
+}
diff --git a/base/src/test/user_model/test_keyboard_navigation.rs b/base/src/test/user_model/test_keyboard_navigation.rs
new file mode 100644
index 0000000..a61acae
--- /dev/null
+++ b/base/src/test/user_model/test_keyboard_navigation.rs
@@ -0,0 +1,136 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::{
+    constants::{
+        DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_HEIGHT, DEFAULT_WINDOW_HEIGH, DEFAULT_WINDOW_WIDTH,
+        LAST_COLUMN,
+    },
+    test::util::new_empty_model,
+    UserModel,
+};
+
+#[test]
+fn basic_navigation() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.on_arrow_right().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 2, 1, 2]);
+    assert_eq!(view.column, 2);
+    assert_eq!(view.row, 1);
+
+    model.on_arrow_left().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 1, 1]);
+    assert_eq!(view.column, 1);
+    assert_eq!(view.row, 1);
+
+    model.on_arrow_left().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 1, 1]);
+    assert_eq!(view.column, 1);
+    assert_eq!(view.row, 1);
+
+    model.on_arrow_down().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [2, 1, 2, 1]);
+    assert_eq!(view.column, 1);
+    assert_eq!(view.row, 2);
+
+    model.on_arrow_up().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 1, 1]);
+    assert_eq!(view.column, 1);
+    assert_eq!(view.row, 1);
+
+    model.on_arrow_up().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 1, 1]);
+    assert_eq!(view.column, 1);
+    assert_eq!(view.row, 1);
+}
+
+#[test]
+fn scroll_right() {
+    let window_width = DEFAULT_WINDOW_WIDTH as f64;
+    let column_width = DEFAULT_COLUMN_WIDTH;
+    let column_count = f64::floor(window_width / column_width) as i32;
+
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.on_arrow_right().unwrap();
+
+    model.set_selected_cell(3, column_count).unwrap();
+    model.on_arrow_right().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.left_column, 2);
+
+    model.on_arrow_right().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.left_column, 3);
+}
+
+#[test]
+fn last_colum() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.set_selected_cell(3, LAST_COLUMN).unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.column, LAST_COLUMN);
+
+    model.on_arrow_right().unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.column, LAST_COLUMN);
+}
+
+#[test]
+fn page_down() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    let window_height = DEFAULT_WINDOW_HEIGH as f64;
+    let row_height = DEFAULT_ROW_HEIGHT;
+    let row_count = f64::floor(window_height / row_height) as i32;
+    model.on_page_down().unwrap();
+
+    let view = model.get_selected_view();
+    assert_eq!(view.row, 1 + row_count);
+    let scroll_y = model.get_scroll_y().unwrap();
+    assert_eq!(scroll_y, (row_count as f64) * DEFAULT_ROW_HEIGHT);
+}
+
+// we just test that page up and page down are inverse operations
+#[test]
+fn page_up() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.on_page_down().unwrap();
+    let row1 = model.get_selected_view().row;
+
+    model.on_page_down().unwrap();
+    let row2 = model.get_selected_view().row;
+
+    model.on_page_down().unwrap();
+    let row3 = model.get_selected_view().row;
+
+    model.on_page_down().unwrap();
+
+    model.on_page_up().unwrap();
+    assert_eq!(model.get_selected_view().row, row3);
+
+    model.on_page_up().unwrap();
+    assert_eq!(model.get_selected_view().row, row2);
+
+    model.on_page_up().unwrap();
+    assert_eq!(model.get_selected_view().row, row1);
+
+    model.on_page_up().unwrap();
+    assert_eq!(model.get_selected_view().row, 1);
+}
+
+#[test]
+fn page_up_fails_on_row1() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.on_arrow_up().unwrap();
+    assert_eq!(model.get_selected_view().row, 1);
+}
diff --git a/base/src/test/user_model/test_on_area_selection.rs b/base/src/test/user_model/test_on_area_selection.rs
new file mode 100644
index 0000000..f4025b2
--- /dev/null
+++ b/base/src/test/user_model/test_on_area_selection.rs
@@ -0,0 +1,33 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::{
+    constants::{DEFAULT_COLUMN_WIDTH, DEFAULT_WINDOW_WIDTH},
+    test::util::new_empty_model,
+    UserModel,
+};
+
+#[test]
+fn basic_test() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+
+    model.on_area_selecting(2, 4).unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 2, 4]);
+}
+
+// this checks that is we select in the boundary we automatically scroll
+#[test]
+fn scroll_right() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    let window_width = DEFAULT_WINDOW_WIDTH as f64;
+    let column_width = DEFAULT_COLUMN_WIDTH;
+    let column_count = f64::floor(window_width / column_width) as i32;
+    model.set_selected_cell(3, column_count).unwrap();
+
+    model.on_area_selecting(3, column_count + 3).unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [3, column_count, 3, column_count + 3]);
+    assert_eq!(view.left_column, 4);
+}
diff --git a/base/src/test/user_model/test_on_expand_selected_range.rs b/base/src/test/user_model/test_on_expand_selected_range.rs
new file mode 100644
index 0000000..46b93e5
--- /dev/null
+++ b/base/src/test/user_model/test_on_expand_selected_range.rs
@@ -0,0 +1,151 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::{
+    constants::{DEFAULT_COLUMN_WIDTH, DEFAULT_WINDOW_WIDTH, LAST_COLUMN},
+    test::util::new_empty_model,
+    UserModel,
+};
+
+#[test]
+fn arrow_right() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.on_expand_selected_range("ArrowRight").unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 1, 2]);
+}
+
+#[test]
+fn arrow_right_decreases() {
+    // if the selected cell is on the upper right corner, right-arrow will decrease the size of teh area
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    let (start_row, start_column, end_row, end_column) = (5, 3, 10, 8);
+    model.set_selected_cell(start_row, end_column).unwrap();
+    model
+        .set_selected_range(start_row, start_column, end_row, end_column)
+        .unwrap();
+
+    model.on_expand_selected_range("ArrowRight").unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(
+        view.range,
+        [start_row, start_column + 1, end_row, end_column]
+    );
+}
+
+#[test]
+fn arrow_right_last_column() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.set_selected_cell(1, LAST_COLUMN).unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, LAST_COLUMN, 1, LAST_COLUMN]);
+}
+
+#[test]
+fn arrow_right_scroll_right() {
+    let window_width = DEFAULT_WINDOW_WIDTH as f64;
+    let column_width = DEFAULT_COLUMN_WIDTH;
+    let column_count = f64::floor(window_width / column_width) as i32;
+
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+
+    // initially the column to the left is A
+    let view = model.get_selected_view();
+    assert_eq!(view.left_column, 1);
+
+    // We select all columns from 1 to the last visible
+    let (start_row, start_column, end_row, end_column) = (1, 1, 1, column_count);
+    model.set_selected_cell(start_row, start_column).unwrap();
+    model
+        .set_selected_range(start_row, start_column, end_row, end_column)
+        .unwrap();
+
+    // Now we select one more column
+    model.on_expand_selected_range("ArrowRight").unwrap();
+
+    // The view has updated and the first visible column is B
+    let view = model.get_selected_view();
+    assert_eq!(
+        view.range,
+        [start_row, start_column, end_row, end_column + 1]
+    );
+    assert_eq!(view.left_column, 2);
+
+    // now we click on cell B2 and we
+    model.set_selected_cell(2, 2).unwrap();
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [2, 1, 2, 2]);
+    assert_eq!(view.left_column, 1);
+
+    // a second arrow left won't do anything
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [2, 1, 2, 2]);
+    assert_eq!(view.left_column, 1);
+}
+
+#[test]
+fn arrow_left() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.set_selected_cell(5, 3).unwrap();
+    model.set_selected_range(5, 3, 10, 8).unwrap();
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [5, 3, 10, 7]);
+}
+
+#[test]
+fn arrow_left_left_border() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 1, 1, 1]);
+}
+
+#[test]
+fn arrow_left_increases() {
+    // If the selected cell is on the top right corner
+    // arrow left increases the selected area by
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+
+    let (start_row, start_column, end_row, end_column) = (4, 10, 4, 20);
+    model.set_selected_cell(start_row, end_column).unwrap();
+    model
+        .set_selected_range(start_row, start_column, end_row, end_column)
+        .unwrap();
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+    let view = model.get_selected_view();
+    assert_eq!(
+        view.range,
+        [start_row, start_column - 1, end_row, end_column]
+    );
+}
+
+#[test]
+fn arrow_left_scrolls_left() {
+    // If the selected cell is on the top right corner
+    // arrow left increases the selected area by
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+
+    model.set_top_left_visible_cell(1, 50).unwrap();
+
+    model.set_selected_cell(1, 50).unwrap();
+    // arrow left x 2
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+    model.on_expand_selected_range("ArrowLeft").unwrap();
+
+    let view = model.get_selected_view();
+    assert_eq!(view.range, [1, 48, 1, 50]);
+    assert_eq!(view.left_column, 48);
+    assert_eq!(view.column, 50);
+}
diff --git a/base/src/test/user_model/test_on_paste_styles.rs b/base/src/test/user_model/test_on_paste_styles.rs
new file mode 100644
index 0000000..bb1b9d3
--- /dev/null
+++ b/base/src/test/user_model/test_on_paste_styles.rs
@@ -0,0 +1,48 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::test::util::new_empty_model;
+use crate::types::Fill;
+use crate::UserModel;
+
+#[test]
+fn simple_pasting() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    let mut style = model.get_cell_style(0, 1, 1).unwrap();
+    style.fill = Fill {
+        pattern_type: "solid".to_string(),
+        fg_color: Some("#FF5577".to_string()),
+        bg_color: Some("#33FF44".to_string()),
+    };
+    let styles = vec![vec![style.clone()]];
+
+    model.set_selected_cell(5, 4).unwrap();
+    model.set_selected_range(5, 4, 10, 9).unwrap();
+    model.on_paste_styles(&styles).unwrap();
+
+    for row in 5..10 {
+        for column in 4..9 {
+            let cell_style = model.get_cell_style(0, row, column).unwrap();
+            assert_eq!(cell_style, style);
+        }
+    }
+
+    model.undo().unwrap();
+    let base_style = model.get_cell_style(0, 100, 100).unwrap();
+
+    for row in 5..10 {
+        for column in 4..9 {
+            let cell_style = model.get_cell_style(0, row, column).unwrap();
+            assert_eq!(cell_style, base_style);
+        }
+    }
+
+    model.redo().unwrap();
+
+    for row in 5..10 {
+        for column in 4..9 {
+            let cell_style = model.get_cell_style(0, row, column).unwrap();
+            assert_eq!(cell_style, style);
+        }
+    }
+}
diff --git a/base/src/test/user_model/test_view.rs b/base/src/test/user_model/test_view.rs
index 5a6dcd6..3f9d907 100644
--- a/base/src/test/user_model/test_view.rs
+++ b/base/src/test/user_model/test_view.rs
@@ -52,19 +52,12 @@ fn set_the_cell_sets_the_range() {
 fn set_the_range_does_not_set_the_cell() {
     let model = new_empty_model();
     let mut model = UserModel::from_model(model);
-    model.set_selected_range(5, 4, 10, 6).unwrap();
-    assert_eq!(model.get_selected_sheet(), 0);
-    assert_eq!(model.get_selected_cell(), (0, 1, 1));
     assert_eq!(
-        model.get_selected_view(),
-        SelectedView {
-            sheet: 0,
-            row: 1,
-            column: 1,
-            range: [5, 4, 10, 6],
-            top_row: 1,
-            left_column: 1
-        }
+        model.set_selected_range(5, 4, 10, 6),
+        Err(
+            "The selected cells is not in one of the corners. Row: '1' and row range '(5, 10)'"
+                .to_string()
+        )
     );
 }
 
diff --git a/base/src/test/user_model/test_window_size.rs b/base/src/test/user_model/test_window_size.rs
new file mode 100644
index 0000000..85a6a0c
--- /dev/null
+++ b/base/src/test/user_model/test_window_size.rs
@@ -0,0 +1,29 @@
+#![allow(clippy::unwrap_used)]
+
+use crate::{
+    constants::{DEFAULT_ROW_HEIGHT, DEFAULT_WINDOW_HEIGH, DEFAULT_WINDOW_WIDTH},
+    test::util::new_empty_model,
+    UserModel,
+};
+
+#[test]
+fn basic_test() {
+    let model = new_empty_model();
+    let mut model = UserModel::from_model(model);
+    let window_height = model.get_window_height().unwrap();
+    assert_eq!(window_height, DEFAULT_WINDOW_HEIGH);
+
+    let window_width = model.get_window_width().unwrap();
+    assert_eq!(window_width, DEFAULT_WINDOW_WIDTH);
+
+    // Set the window height to double the default and check that page_down behaves as expected
+    model.set_window_height((window_height * 2) as f64);
+    model.on_page_down().unwrap();
+
+    let row_height = DEFAULT_ROW_HEIGHT;
+    let row_count = f64::floor((window_height * 2) as f64 / row_height) as i32;
+    let view = model.get_selected_view();
+    assert_eq!(view.row, 1 + row_count);
+    let scroll_y = model.get_scroll_y().unwrap();
+    assert_eq!(scroll_y, (row_count as f64) * DEFAULT_ROW_HEIGHT);
+}
diff --git a/base/src/types.rs b/base/src/types.rs
index ebda7c2..b62cdb5 100644
--- a/base/src/types.rs
+++ b/base/src/types.rs
@@ -33,6 +33,10 @@ pub struct WorkbookSettings {
 pub struct WorkbookView {
     /// The index of the currently selected sheet.
     pub sheet: u32,
+    /// The current width of the window
+    pub window_width: i64,
+    /// The current heigh of the window
+    pub window_height: i64,
 }
 
 /// An internal representation of an IronCalc Workbook
diff --git a/base/src/user_model.rs b/base/src/user_model/common.rs
similarity index 84%
rename from base/src/user_model.rs
rename to base/src/user_model/common.rs
index 9351f53..c8f84d7 100644
--- a/base/src/user_model.rs
+++ b/base/src/user_model/common.rs
@@ -2,7 +2,6 @@
 
 use std::{collections::HashMap, fmt::Debug};
 
-use bitcode::{Decode, Encode};
 use serde::{Deserialize, Serialize};
 
 use crate::{
@@ -13,180 +12,35 @@ use crate::{
     },
     model::Model,
     types::{
-        Alignment, BorderItem, BorderStyle, Cell, CellType, Col, HorizontalAlignment, Row,
-        SheetProperties, Style, VerticalAlignment,
+        Alignment, BorderItem, BorderStyle, CellType, Col, HorizontalAlignment, SheetProperties,
+        Style, VerticalAlignment,
     },
     utils::is_valid_hex_color,
 };
 
+use crate::user_model::history::{
+    ColumnData, Diff, DiffList, DiffType, History, QueueDiffs, RowData,
+};
+
 #[derive(Serialize, Deserialize)]
-#[cfg_attr(test, derive(PartialEq, Debug))]
-pub struct SelectedView {
-    pub sheet: u32,
-    pub row: i32,
-    pub column: i32,
-    pub range: [i32; 4],
-    pub top_row: i32,
-    pub left_column: i32,
+pub enum BorderType {
+    All,
+    Inner,
+    Outer,
+    Top,
+    Right,
+    Bottom,
+    Left,
+    CenterH,
+    CenterV,
+    None,
 }
 
-#[derive(Clone, Encode, Decode)]
-struct RowData {
-    row: Option<Row>,
-    data: HashMap<i32, Cell>,
-}
-
-#[derive(Clone, Encode, Decode)]
-struct ColumnData {
-    column: Option<Col>,
-    data: HashMap<i32, Cell>,
-}
-
-#[derive(Clone, Encode, Decode)]
-enum Diff {
-    // Cell diffs
-    SetCellValue {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        new_value: String,
-        old_value: Box<Option<Cell>>,
-    },
-    CellClearContents {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        old_value: Box<Option<Cell>>,
-    },
-    CellClearAll {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        old_value: Box<Option<Cell>>,
-        old_style: Box<Style>,
-    },
-    SetCellStyle {
-        sheet: u32,
-        row: i32,
-        column: i32,
-        old_value: Box<Style>,
-        new_value: Box<Style>,
-    },
-    // Column and Row diffs
-    SetColumnWidth {
-        sheet: u32,
-        column: i32,
-        new_value: f64,
-        old_value: f64,
-    },
-    SetRowHeight {
-        sheet: u32,
-        row: i32,
-        new_value: f64,
-        old_value: f64,
-    },
-    InsertRow {
-        sheet: u32,
-        row: i32,
-    },
-    DeleteRow {
-        sheet: u32,
-        row: i32,
-        old_data: Box<RowData>,
-    },
-    InsertColumn {
-        sheet: u32,
-        column: i32,
-    },
-    DeleteColumn {
-        sheet: u32,
-        column: i32,
-        old_data: Box<ColumnData>,
-    },
-    SetFrozenRowsCount {
-        sheet: u32,
-        new_value: i32,
-        old_value: i32,
-    },
-    SetFrozenColumnsCount {
-        sheet: u32,
-        new_value: i32,
-        old_value: i32,
-    },
-    DeleteSheet {
-        sheet: u32,
-    },
-    NewSheet {
-        index: u32,
-        name: String,
-    },
-    RenameSheet {
-        index: u32,
-        old_value: String,
-        new_value: String,
-    },
-    SetSheetColor {
-        index: u32,
-        old_value: String,
-        new_value: String,
-    },
-    SetShowGridLines {
-        sheet: u32,
-        old_value: bool,
-        new_value: bool,
-    }, // FIXME: we are missing SetViewDiffs
-}
-
-type DiffList = Vec<Diff>;
-
-#[derive(Default)]
-struct History {
-    undo_stack: Vec<DiffList>,
-    redo_stack: Vec<DiffList>,
-}
-
-impl History {
-    fn push(&mut self, diff_list: DiffList) {
-        self.undo_stack.push(diff_list);
-        self.redo_stack = vec![];
-    }
-
-    fn undo(&mut self) -> Option<Vec<Diff>> {
-        match self.undo_stack.pop() {
-            Some(diff_list) => {
-                self.redo_stack.push(diff_list.clone());
-                Some(diff_list)
-            }
-            None => None,
-        }
-    }
-
-    fn redo(&mut self) -> Option<Vec<Diff>> {
-        match self.redo_stack.pop() {
-            Some(diff_list) => {
-                self.undo_stack.push(diff_list.clone());
-                Some(diff_list)
-            }
-            None => None,
-        }
-    }
-
-    fn clear(&mut self) {
-        self.redo_stack = vec![];
-        self.undo_stack = vec![];
-    }
-}
-
-#[derive(Clone, Encode, Decode)]
-enum DiffType {
-    Undo,
-    Redo,
-}
-
-#[derive(Clone, Encode, Decode)]
-struct QueueDiffs {
-    r#type: DiffType,
-    list: DiffList,
+/// This is the struct for a border area
+#[derive(Serialize, Deserialize)]
+pub struct BorderArea {
+    item: BorderItem,
+    r#type: BorderType,
 }
 
 fn boolean(value: &str) -> Result<bool, String> {
@@ -292,7 +146,7 @@ fn vertical(value: &str) -> Result<VerticalAlignment, String> {
 /// # }
 /// ```
 pub struct UserModel {
-    model: Model,
+    pub(crate) model: Model,
     history: History,
     send_queue: Vec<QueueDiffs>,
     pause_evaluation: bool,
@@ -540,6 +394,14 @@ impl UserModel {
         self.push_diff_list(vec![Diff::DeleteSheet { sheet }]);
         // There is no coming back
         self.history.clear();
+        let sheet_count = self.model.workbook.worksheets.len() as u32;
+        // If we are deleting the last sheet we need to change the selected sheet
+        if sheet == sheet_count - 1 && sheet_count > 1 {
+            if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+                view.sheet = sheet_count - 2;
+            };
+        }
+
         self.model.delete_sheet(sheet)?;
         Ok(())
     }
@@ -828,6 +690,155 @@ impl UserModel {
         self.model.set_frozen_columns(sheet, frozen_columns)
     }
 
+    /// Paste `styles` in the selected area
+    pub fn on_paste_styles(&mut self, styles: &[Vec<Style>]) -> Result<(), String> {
+        let styles_heigh = styles.len() as i32;
+        let styles_width = styles[0].len() as i32;
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Ok(());
+        };
+        let range = if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+            if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                view.range
+            } else {
+                return Ok(());
+            }
+        } else {
+            return Ok(());
+        };
+
+        // If the pasted area is smaller than the selected area we increase it
+        let [row_start, column_start, row_end, column_end] = range;
+        let last_row = row_end.max(row_start + styles_heigh - 1);
+        let last_column = column_end.max(column_start + styles_width - 1);
+
+        let mut diff_list = Vec::new();
+        for row in row_start..=last_row {
+            for column in column_start..=last_column {
+                let row_index = ((row - row_start) % styles_heigh) as usize;
+                let column_index = ((column - column_start) % styles_width) as usize;
+                let style = &styles[row_index][column_index];
+                let old_value = self.model.get_style_for_cell(sheet, row, column);
+                self.model.set_cell_style(sheet, row, column, style)?;
+                diff_list.push(Diff::SetCellStyle {
+                    sheet,
+                    row,
+                    column,
+                    old_value: Box::new(old_value),
+                    new_value: Box::new(style.clone()),
+                });
+            }
+        }
+        self.push_diff_list(diff_list);
+
+        // select the pasted range
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.range = [row_start, column_start, last_row, last_column];
+            }
+        }
+        Ok(())
+    }
+
+    /// Sets the border
+    pub fn set_area_with_border(
+        &mut self,
+        range: &Area,
+        border_area: &BorderArea,
+    ) -> Result<(), String> {
+        // FIXME: We need to set the border also in neighbouring cells.
+        let sheet = range.sheet;
+        let mut diff_list = Vec::new();
+        let last_row = range.row + range.height - 1;
+        let last_column = range.column + range.width - 1;
+        for row in range.row..=last_row {
+            for column in range.column..=last_column {
+                let old_value = self.model.get_style_for_cell(sheet, row, column);
+                let mut style = old_value.clone();
+
+                // First remove all existing borders
+                style.border.top = None;
+                style.border.right = None;
+                style.border.bottom = None;
+                style.border.left = None;
+
+                match border_area.r#type {
+                    BorderType::All => {
+                        style.border.top = Some(border_area.item.clone());
+                        style.border.right = Some(border_area.item.clone());
+                        style.border.bottom = Some(border_area.item.clone());
+                        style.border.left = Some(border_area.item.clone());
+                    }
+                    BorderType::Inner => {
+                        if row != range.row {
+                            style.border.top = Some(border_area.item.clone());
+                        }
+                        if row != last_row {
+                            style.border.bottom = Some(border_area.item.clone());
+                        }
+                        if column != range.column {
+                            style.border.left = Some(border_area.item.clone());
+                        }
+                        if column != last_column {
+                            style.border.right = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::Outer => {
+                        if row == range.row {
+                            style.border.top = Some(border_area.item.clone());
+                        }
+                        if row == last_row {
+                            style.border.bottom = Some(border_area.item.clone());
+                        }
+                        if column == range.column {
+                            style.border.left = Some(border_area.item.clone());
+                        }
+                        if column == last_column {
+                            style.border.right = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::Top => style.border.top = Some(border_area.item.clone()),
+                    BorderType::Right => style.border.right = Some(border_area.item.clone()),
+                    BorderType::Bottom => style.border.bottom = Some(border_area.item.clone()),
+                    BorderType::Left => style.border.left = Some(border_area.item.clone()),
+                    BorderType::CenterH => {
+                        if row != range.row {
+                            style.border.top = Some(border_area.item.clone());
+                        }
+                        if row != last_row {
+                            style.border.bottom = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::CenterV => {
+                        if column != range.column {
+                            style.border.left = Some(border_area.item.clone());
+                        }
+                        if column != last_column {
+                            style.border.right = Some(border_area.item.clone());
+                        }
+                    }
+                    BorderType::None => {
+                        // noop, we already removed all the borders
+                    }
+                }
+
+                self.model.set_cell_style(sheet, row, column, &style)?;
+                diff_list.push(Diff::SetCellStyle {
+                    sheet,
+                    row,
+                    column,
+                    old_value: Box::new(old_value),
+                    new_value: Box::new(style),
+                });
+            }
+        }
+
+        self.push_diff_list(diff_list);
+        Ok(())
+    }
+
     /// Updates the range with a cell style.
     /// See also:
     /// * [Model::set_cell_style]
@@ -1154,166 +1165,6 @@ impl UserModel {
         self.model.get_worksheets_properties()
     }
 
-    /// Returns the selected sheet index
-    pub fn get_selected_sheet(&self) -> u32 {
-        if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        }
-    }
-
-    /// Returns the selected cell
-    pub fn get_selected_cell(&self) -> (u32, i32, i32) {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
-            if let Some(view) = worksheet.views.get(&self.model.view_id) {
-                return (sheet, view.row, view.column);
-            }
-        }
-        // return a safe default
-        (0, 1, 1)
-    }
-
-    /// Returns selected view
-    pub fn get_selected_view(&self) -> SelectedView {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
-            if let Some(view) = worksheet.views.get(&self.model.view_id) {
-                return SelectedView {
-                    sheet,
-                    row: view.row,
-                    column: view.column,
-                    range: view.range,
-                    top_row: view.top_row,
-                    left_column: view.left_column,
-                };
-            }
-        }
-        // return a safe default
-        SelectedView {
-            sheet: 0,
-            row: 1,
-            column: 1,
-            range: [1, 1, 1, 1],
-            top_row: 1,
-            left_column: 1,
-        }
-    }
-
-    /// Sets the the selected sheet
-    pub fn set_selected_sheet(&mut self, sheet: u32) -> Result<(), String> {
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Some(view) = self.model.workbook.views.get_mut(&0) {
-            view.sheet = sheet;
-        }
-        Ok(())
-    }
-
-    /// Sets the selected cell
-    pub fn set_selected_cell(&mut self, row: i32, column: i32) -> Result<(), String> {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-        if !is_valid_column_number(column) {
-            return Err(format!("Invalid column: '{column}'"));
-        }
-        if !is_valid_row(row) {
-            return Err(format!("Invalid row: '{row}'"));
-        }
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
-            if let Some(view) = worksheet.views.get_mut(&0) {
-                view.row = row;
-                view.column = column;
-                view.range = [row, column, row, column];
-            }
-        }
-        Ok(())
-    }
-
-    /// Sets the selected range
-    pub fn set_selected_range(
-        &mut self,
-        start_row: i32,
-        start_column: i32,
-        end_row: i32,
-        end_column: i32,
-    ) -> Result<(), String> {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-
-        if !is_valid_column_number(start_column) {
-            return Err(format!("Invalid column: '{start_column}'"));
-        }
-        if !is_valid_column_number(start_row) {
-            return Err(format!("Invalid row: '{start_row}'"));
-        }
-
-        if !is_valid_column_number(end_column) {
-            return Err(format!("Invalid column: '{end_column}'"));
-        }
-        if !is_valid_column_number(end_row) {
-            return Err(format!("Invalid row: '{end_row}'"));
-        }
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
-            if let Some(view) = worksheet.views.get_mut(&0) {
-                view.range = [start_row, start_column, end_row, end_column];
-            }
-        }
-        Ok(())
-    }
-
-    /// Sets the value of the first visible cell
-    pub fn set_top_left_visible_cell(
-        &mut self,
-        top_row: i32,
-        left_column: i32,
-    ) -> Result<(), String> {
-        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
-            view.sheet
-        } else {
-            0
-        };
-
-        if !is_valid_column_number(left_column) {
-            return Err(format!("Invalid column: '{left_column}'"));
-        }
-        if !is_valid_column_number(top_row) {
-            return Err(format!("Invalid row: '{top_row}'"));
-        }
-        if self.model.workbook.worksheet(sheet).is_err() {
-            return Err(format!("Invalid worksheet index {}", sheet));
-        }
-        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
-            if let Some(view) = worksheet.views.get_mut(&0) {
-                view.top_row = top_row;
-                view.left_column = left_column;
-            }
-        }
-        Ok(())
-    }
-
     /// Set the gid lines in the worksheet to visible (`true`) or hidden (`false`)
     pub fn set_show_grid_lines(&mut self, sheet: u32, show_grid_lines: bool) -> Result<(), String> {
         let old_value = self.model.workbook.worksheet(sheet)?.show_grid_lines;
@@ -1643,7 +1494,7 @@ impl UserModel {
 mod tests {
     use crate::{
         types::{HorizontalAlignment, VerticalAlignment},
-        user_model::{horizontal, vertical},
+        user_model::common::{horizontal, vertical},
     };
 
     #[test]
diff --git a/base/src/user_model/history.rs b/base/src/user_model/history.rs
new file mode 100644
index 0000000..4403e43
--- /dev/null
+++ b/base/src/user_model/history.rs
@@ -0,0 +1,164 @@
+use std::collections::HashMap;
+
+use bitcode::{Decode, Encode};
+
+use crate::types::{Cell, Col, Row, Style};
+
+#[derive(Clone, Encode, Decode)]
+pub(crate) struct RowData {
+    pub(crate) row: Option<Row>,
+    pub(crate) data: HashMap<i32, Cell>,
+}
+
+#[derive(Clone, Encode, Decode)]
+pub(crate) struct ColumnData {
+    pub(crate) column: Option<Col>,
+    pub(crate) data: HashMap<i32, Cell>,
+}
+
+#[derive(Clone, Encode, Decode)]
+pub(crate) enum Diff {
+    // Cell diffs
+    SetCellValue {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        new_value: String,
+        old_value: Box<Option<Cell>>,
+    },
+    CellClearContents {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        old_value: Box<Option<Cell>>,
+    },
+    CellClearAll {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        old_value: Box<Option<Cell>>,
+        old_style: Box<Style>,
+    },
+    SetCellStyle {
+        sheet: u32,
+        row: i32,
+        column: i32,
+        old_value: Box<Style>,
+        new_value: Box<Style>,
+    },
+    // Column and Row diffs
+    SetColumnWidth {
+        sheet: u32,
+        column: i32,
+        new_value: f64,
+        old_value: f64,
+    },
+    SetRowHeight {
+        sheet: u32,
+        row: i32,
+        new_value: f64,
+        old_value: f64,
+    },
+    InsertRow {
+        sheet: u32,
+        row: i32,
+    },
+    DeleteRow {
+        sheet: u32,
+        row: i32,
+        old_data: Box<RowData>,
+    },
+    InsertColumn {
+        sheet: u32,
+        column: i32,
+    },
+    DeleteColumn {
+        sheet: u32,
+        column: i32,
+        old_data: Box<ColumnData>,
+    },
+    SetFrozenRowsCount {
+        sheet: u32,
+        new_value: i32,
+        old_value: i32,
+    },
+    SetFrozenColumnsCount {
+        sheet: u32,
+        new_value: i32,
+        old_value: i32,
+    },
+    DeleteSheet {
+        sheet: u32,
+    },
+    NewSheet {
+        index: u32,
+        name: String,
+    },
+    RenameSheet {
+        index: u32,
+        old_value: String,
+        new_value: String,
+    },
+    SetSheetColor {
+        index: u32,
+        old_value: String,
+        new_value: String,
+    },
+    SetShowGridLines {
+        sheet: u32,
+        old_value: bool,
+        new_value: bool,
+    }, // FIXME: we are missing SetViewDiffs
+}
+
+pub(crate) type DiffList = Vec<Diff>;
+
+#[derive(Default)]
+pub(crate) struct History {
+    pub(crate) undo_stack: Vec<DiffList>,
+    pub(crate) redo_stack: Vec<DiffList>,
+}
+
+impl History {
+    pub fn push(&mut self, diff_list: DiffList) {
+        self.undo_stack.push(diff_list);
+        self.redo_stack = vec![];
+    }
+
+    pub fn undo(&mut self) -> Option<Vec<Diff>> {
+        match self.undo_stack.pop() {
+            Some(diff_list) => {
+                self.redo_stack.push(diff_list.clone());
+                Some(diff_list)
+            }
+            None => None,
+        }
+    }
+
+    pub fn redo(&mut self) -> Option<Vec<Diff>> {
+        match self.redo_stack.pop() {
+            Some(diff_list) => {
+                self.undo_stack.push(diff_list.clone());
+                Some(diff_list)
+            }
+            None => None,
+        }
+    }
+
+    pub fn clear(&mut self) {
+        self.redo_stack = vec![];
+        self.undo_stack = vec![];
+    }
+}
+
+#[derive(Clone, Encode, Decode)]
+pub enum DiffType {
+    Undo,
+    Redo,
+}
+
+#[derive(Clone, Encode, Decode)]
+pub struct QueueDiffs {
+    pub r#type: DiffType,
+    pub list: DiffList,
+}
diff --git a/base/src/user_model/mod.rs b/base/src/user_model/mod.rs
new file mode 100644
index 0000000..d35984b
--- /dev/null
+++ b/base/src/user_model/mod.rs
@@ -0,0 +1,12 @@
+#![deny(missing_docs)]
+
+mod common;
+mod history;
+mod ui;
+
+pub use common::UserModel;
+
+#[cfg(test)]
+pub use ui::SelectedView;
+
+pub use common::BorderArea;
diff --git a/base/src/user_model/ui.rs b/base/src/user_model/ui.rs
new file mode 100644
index 0000000..b217b1b
--- /dev/null
+++ b/base/src/user_model/ui.rs
@@ -0,0 +1,687 @@
+#![deny(missing_docs)]
+
+use serde::{Deserialize, Serialize};
+
+use crate::expressions::utils::{is_valid_column_number, is_valid_row};
+
+use super::common::UserModel;
+
+#[derive(Serialize, Deserialize)]
+#[cfg_attr(test, derive(PartialEq, Debug))]
+pub struct SelectedView {
+    pub sheet: u32,
+    pub row: i32,
+    pub column: i32,
+    pub range: [i32; 4],
+    pub top_row: i32,
+    pub left_column: i32,
+}
+
+impl UserModel {
+    /// Returns the selected sheet index
+    pub fn get_selected_sheet(&self) -> u32 {
+        if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        }
+    }
+
+    /// Returns the selected cell
+    pub fn get_selected_cell(&self) -> (u32, i32, i32) {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+            if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                return (sheet, view.row, view.column);
+            }
+        }
+        // return a safe default
+        (0, 1, 1)
+    }
+
+    /// Returns selected view
+    pub fn get_selected_view(&self) -> SelectedView {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+        if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+            if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                return SelectedView {
+                    sheet,
+                    row: view.row,
+                    column: view.column,
+                    range: view.range,
+                    top_row: view.top_row,
+                    left_column: view.left_column,
+                };
+            }
+        }
+        // return a safe default
+        SelectedView {
+            sheet: 0,
+            row: 1,
+            column: 1,
+            range: [1, 1, 1, 1],
+            top_row: 1,
+            left_column: 1,
+        }
+    }
+
+    /// Sets the the selected sheet
+    pub fn set_selected_sheet(&mut self, sheet: u32) -> Result<(), String> {
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Some(view) = self.model.workbook.views.get_mut(&0) {
+            view.sheet = sheet;
+        }
+        Ok(())
+    }
+
+    /// Sets the selected cell for the current view. Note that this also sets the selected range
+    pub fn set_selected_cell(&mut self, row: i32, column: i32) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+        if !is_valid_column_number(column) {
+            return Err(format!("Invalid column: '{column}'"));
+        }
+        if !is_valid_row(row) {
+            return Err(format!("Invalid row: '{row}'"));
+        }
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&0) {
+                view.row = row;
+                view.column = column;
+                view.range = [row, column, row, column];
+            }
+        }
+        Ok(())
+    }
+
+    /// Sets the selected range. Note that the selected cell must be in one of the corners.
+    pub fn set_selected_range(
+        &mut self,
+        start_row: i32,
+        start_column: i32,
+        end_row: i32,
+        end_column: i32,
+    ) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+
+        if !is_valid_column_number(start_column) {
+            return Err(format!("Invalid column: '{start_column}'"));
+        }
+        if !is_valid_row(start_row) {
+            return Err(format!("Invalid row: '{start_row}'"));
+        }
+
+        if !is_valid_column_number(end_column) {
+            return Err(format!("Invalid column: '{end_column}'"));
+        }
+        if !is_valid_row(end_row) {
+            return Err(format!("Invalid row: '{end_row}'"));
+        }
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&0) {
+                let selected_row = view.row;
+                let selected_column = view.column;
+                // The selected cells must be on one of the corners of the selected range:
+                if selected_row != start_row && selected_row != end_row {
+                    return Err(format!(
+                        "The selected cells is not in one of the corners. Row: '{}' and row range '({}, {})'",
+                        selected_row, start_row, end_row
+                    ));
+                }
+                if selected_column != start_column && selected_column != end_column {
+                    return Err(format!(
+                        "The selected cells is not in one of the corners. Column '{}' and column range '({}, {})'",
+                        selected_column, start_column, end_column
+                    ));
+                }
+                view.range = [start_row, start_column, end_row, end_column];
+            }
+        }
+        Ok(())
+    }
+
+    /// The selected range is expanded with the keyboard
+    pub fn on_expand_selected_range(&mut self, key: &str) -> Result<(), String> {
+        let (sheet, window_width, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (
+                    view.sheet,
+                    view.window_width as f64,
+                    view.window_height as f64,
+                )
+            } else {
+                return Ok(());
+            };
+        let (selected_row, selected_column, range, top_row, left_column) =
+            if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+                if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                    (
+                        view.row,
+                        view.column,
+                        view.range,
+                        view.top_row,
+                        view.left_column,
+                    )
+                } else {
+                    return Ok(());
+                }
+            } else {
+                return Ok(());
+            };
+        let [row_start, column_start, row_end, column_end] = range;
+
+        match key {
+            "ArrowRight" => {
+                if selected_column > column_start {
+                    let new_column = column_start + 1;
+                    if !(is_valid_column_number(new_column)) {
+                        return Ok(());
+                    }
+                    self.set_selected_range(row_start, new_column, row_end, column_end)?;
+                } else {
+                    let new_column = column_end + 1;
+                    if !is_valid_column_number(new_column) {
+                        return Ok(());
+                    }
+                    // if the column is not fully visible we 'scroll' right until it is
+                    let mut width = 0.0;
+                    let mut c = left_column;
+                    while c <= new_column {
+                        width += self.model.get_column_width(sheet, c)?;
+                        c += 1;
+                    }
+                    if width > window_width {
+                        self.set_top_left_visible_cell(top_row, left_column + 1)?;
+                    }
+                    self.set_selected_range(row_start, column_start, row_end, column_end + 1)?;
+                }
+            }
+            "ArrowLeft" => {
+                if selected_column < column_end {
+                    let new_column = column_end - 1;
+                    if !is_valid_column_number(new_column) {
+                        return Ok(());
+                    }
+                    if new_column < left_column {
+                        self.set_top_left_visible_cell(top_row, new_column)?;
+                    }
+                    self.set_selected_range(row_start, column_start, row_end, new_column)?;
+                } else {
+                    let new_column = column_start - 1;
+                    if !is_valid_column_number(new_column) {
+                        return Ok(());
+                    }
+                    if new_column < left_column {
+                        self.set_top_left_visible_cell(top_row, new_column)?;
+                    }
+                    self.set_selected_range(row_start, new_column, row_end, column_end)?;
+                }
+            }
+            "ArrowUp" => {
+                if selected_row < row_end {
+                    let new_row = row_end - 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    self.set_selected_range(row_start, column_start, new_row, column_end)?;
+                } else {
+                    let new_row = row_start - 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    if new_row < top_row {
+                        self.set_top_left_visible_cell(new_row, left_column)?;
+                    }
+                    self.set_selected_range(new_row, column_start, row_end, column_end)?;
+                }
+            }
+            "ArrowDown" => {
+                if selected_row > row_start {
+                    let new_row = row_start + 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    self.set_selected_range(new_row, column_start, row_end, column_end)?;
+                } else {
+                    let new_row = row_end + 1;
+                    if !is_valid_row(new_row) {
+                        return Ok(());
+                    }
+                    let mut height = 0.0;
+                    let mut r = top_row;
+                    while r <= new_row + 1 {
+                        height += self.model.get_row_height(sheet, r)?;
+                        r += 1;
+                    }
+                    if height >= window_height {
+                        self.set_top_left_visible_cell(top_row + 1, left_column)?;
+                    }
+                    self.set_selected_range(row_start, column_start, new_row, column_end)?;
+                }
+            }
+            _ => {}
+        }
+
+        Ok(())
+    }
+
+    /// Sets the value of the first visible cell
+    pub fn set_top_left_visible_cell(
+        &mut self,
+        top_row: i32,
+        left_column: i32,
+    ) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            0
+        };
+
+        if !is_valid_column_number(left_column) {
+            return Err(format!("Invalid column: '{left_column}'"));
+        }
+        if !is_valid_row(top_row) {
+            return Err(format!("Invalid row: '{top_row}'"));
+        }
+        if self.model.workbook.worksheet(sheet).is_err() {
+            return Err(format!("Invalid worksheet index {}", sheet));
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&0) {
+                view.top_row = top_row;
+                view.left_column = left_column;
+            }
+        }
+        Ok(())
+    }
+
+    /// Sets the width of the window
+    pub fn set_window_width(&mut self, window_width: f64) {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            view.window_width = window_width as i64;
+        };
+    }
+
+    /// Gets the width of the window
+    pub fn get_window_width(&mut self) -> Result<i64, String> {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            return Ok(view.window_width);
+        };
+        Err("View not found".to_string())
+    }
+
+    /// Sets the height of the window
+    pub fn set_window_height(&mut self, window_height: f64) {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            view.window_height = window_height as i64;
+        };
+    }
+
+    /// Gets the height of the window
+    pub fn get_window_height(&mut self) -> Result<i64, String> {
+        if let Some(view) = self.model.workbook.views.get_mut(&self.model.view_id) {
+            return Ok(view.window_height);
+        };
+        Err("View not found".to_string())
+    }
+
+    /// User presses right arrow
+    pub fn on_arrow_right(&mut self) -> Result<(), String> {
+        let (sheet, window_width) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_width)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_column = view.column + 1;
+        if !is_valid_column_number(new_column) {
+            return Ok(());
+        }
+        // if the column is not fully visible we 'scroll' right until it is
+        let mut width = 0.0;
+        let mut column = view.left_column;
+        while column <= new_column {
+            width += self.model.get_column_width(sheet, column)?;
+            column += 1;
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.column = new_column;
+                view.range = [view.row, new_column, view.row, new_column];
+                if width > window_width as f64 {
+                    view.left_column += 1;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// User presses left arrow
+    pub fn on_arrow_left(&mut self) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_column = view.column - 1;
+        if !is_valid_column_number(new_column) {
+            return Ok(());
+        }
+        // if the column is not fully visible we 'scroll' right until it is
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.column = new_column;
+                view.range = [view.row, new_column, view.row, new_column];
+                if new_column < view.left_column {
+                    view.left_column = new_column;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// User presses up arrow key
+    pub fn on_arrow_up(&mut self) -> Result<(), String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_row = view.row - 1;
+        if !is_valid_row(new_row) {
+            return Ok(());
+        }
+        // if the column is not fully visible we 'scroll' right until it is
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.row = new_row;
+                view.range = [new_row, view.column, new_row, view.column];
+                if new_row < view.top_row {
+                    view.top_row = new_row;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    /// User presses down arrow key
+    pub fn on_arrow_down(&mut self) -> Result<(), String> {
+        let (sheet, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_height)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let new_row = view.row + 1;
+        if !is_valid_row(new_row) {
+            return Ok(());
+        }
+        // if the row is not fully visible we 'scroll' down until it is
+        let mut height = 0.0;
+        let mut row = view.top_row;
+        while row <= new_row + 1 {
+            height += self.model.get_row_height(sheet, row)?;
+            row += 1;
+        }
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.row = new_row;
+                view.range = [new_row, view.column, new_row, view.column];
+                if height > window_height as f64 {
+                    view.top_row += 1;
+                }
+            }
+        }
+        Ok(())
+    }
+
+    // TODO: This function should be memoized
+    /// Returns the x-coordinate of the cell in the top left corner
+    pub fn get_scroll_x(&self) -> Result<f64, String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let mut scroll_x = 0.0;
+        for column in 1..view.left_column {
+            scroll_x += self.model.get_column_width(sheet, column)?;
+        }
+        Ok(scroll_x)
+    }
+
+    // TODO: This function should be memoized
+    /// Returns the y-coordinate of the cell in the top left corner
+    pub fn get_scroll_y(&self) -> Result<f64, String> {
+        let sheet = if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+            view.sheet
+        } else {
+            return Err("View not found".to_string());
+        };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let mut scroll_y = 0.0;
+        for row in 1..view.top_row {
+            scroll_y += self.model.get_row_height(sheet, row)?;
+        }
+        Ok(scroll_y)
+    }
+
+    /// User presses page down.
+    /// The `top_row` is now the first row that is not fully visible
+    pub fn on_page_down(&mut self) -> Result<(), String> {
+        let (sheet, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_height)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+        let mut last_row = view.top_row;
+        let mut height = self.model.get_row_height(sheet, last_row)?;
+        while height <= window_height as f64 {
+            last_row += 1;
+            height += self.model.get_row_height(sheet, last_row)?;
+        }
+        if !is_valid_row(last_row) {
+            return Ok(());
+        }
+        let row_delta = view.row - view.top_row;
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.top_row = last_row;
+                view.row = view.top_row + row_delta;
+                view.range = [view.row, view.column, view.row, view.column];
+            }
+        }
+        Ok(())
+    }
+
+    /// On page up. tis needs to be the inverse of page down
+    pub fn on_page_up(&mut self) -> Result<(), String> {
+        let (sheet, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (view.sheet, view.window_height as f64)
+            } else {
+                return Err("View not found".to_string());
+            };
+        let worksheet = match self.model.workbook.worksheet(sheet) {
+            Ok(s) => s,
+            Err(_) => return Err("Worksheet not found".to_string()),
+        };
+        let view = match worksheet.views.get(&self.model.view_id) {
+            Some(s) => s,
+            None => return Err("View not found".to_string()),
+        };
+
+        let mut first_row = view.top_row;
+        let mut height = self.model.get_row_height(sheet, first_row)?;
+        while height <= window_height && first_row > 1 {
+            first_row -= 1;
+            height += self.model.get_row_height(sheet, first_row)?;
+        }
+
+        let row_delta = view.row - view.top_row;
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.top_row = first_row;
+                view.row = view.top_row + row_delta;
+                view.range = [view.row, view.column, view.row, view.column];
+            }
+        }
+        Ok(())
+    }
+
+    /// We extend the selection to cell (target_row, target_column)
+    pub fn on_area_selecting(&mut self, target_row: i32, target_column: i32) -> Result<(), String> {
+        let (sheet, window_width, window_height) =
+            if let Some(view) = self.model.workbook.views.get(&self.model.view_id) {
+                (
+                    view.sheet,
+                    view.window_width as f64,
+                    view.window_height as f64,
+                )
+            } else {
+                return Ok(());
+            };
+        let (selected_row, selected_column, range, top_row, left_column) =
+            if let Ok(worksheet) = self.model.workbook.worksheet(sheet) {
+                if let Some(view) = worksheet.views.get(&self.model.view_id) {
+                    (
+                        view.row,
+                        view.column,
+                        view.range,
+                        view.top_row,
+                        view.left_column,
+                    )
+                } else {
+                    return Ok(());
+                }
+            } else {
+                return Ok(());
+            };
+        let [row_start, column_start, _row_end, _column_end] = range;
+
+        let mut new_left_column = left_column;
+        if target_column >= selected_column {
+            let mut width = 0.0;
+            let mut column = left_column;
+            while column <= target_column {
+                width += self.model.get_column_width(sheet, column)?;
+                column += 1;
+            }
+
+            while width > window_width {
+                width -= self.model.get_column_width(sheet, new_left_column)?;
+                new_left_column += 1;
+            }
+        } else if target_column < new_left_column {
+            new_left_column = target_column;
+        }
+        let mut new_top_row = top_row;
+        if target_row >= selected_row {
+            let mut height = 0.0;
+            let mut row = top_row;
+            while row <= target_row {
+                height += self.model.get_row_height(sheet, row)?;
+                row += 1;
+            }
+            while height > window_height {
+                height -= self.model.get_row_height(sheet, new_top_row)?;
+                new_top_row += 1;
+            }
+        } else if target_row < new_top_row {
+            new_top_row = target_row;
+        }
+
+        if let Ok(worksheet) = self.model.workbook.worksheet_mut(sheet) {
+            if let Some(view) = worksheet.views.get_mut(&self.model.view_id) {
+                view.range = [row_start, column_start, target_row, target_column];
+                if new_top_row != top_row {
+                    view.top_row = new_top_row;
+                }
+                if new_left_column != left_column {
+                    view.left_column = new_left_column;
+                }
+            }
+        }
+
+        Ok(())
+    }
+}
diff --git a/bindings/wasm/fix_types.py b/bindings/wasm/fix_types.py
index dab2776..67aa826 100644
--- a/bindings/wasm/fix_types.py
+++ b/bindings/wasm/fix_types.py
@@ -107,6 +107,36 @@ autofill_columns_types = r"""
   autoFillColumns(source_area: Area, to_column: number): void;
 """
 
+set_cell_style = r"""
+/**
+* @param {any} styles
+*/
+  onPasteStyles(styles: any): void;
+"""
+
+set_cell_style_types = r"""
+/**
+* @param {CellStyle[][]} styles
+*/
+  onPasteStyles(styles: CellStyle[][]): void;
+"""
+
+set_area_border = r"""
+/**
+* @param {any} area
+* @param {any} border_area
+*/
+  setAreaWithBorder(area: any, border_area: any): void;
+"""
+
+set_area_border_types = r"""
+/**
+* @param {Area} area
+* @param {BorderArea} border_area
+*/
+  setAreaWithBorder(area: Area, border_area: BorderArea): void;
+"""
+
 def fix_types(text):
     text = text.replace(get_tokens_str, get_tokens_str_types)
     text = text.replace(update_style_str, update_style_str_types)
@@ -115,6 +145,8 @@ def fix_types(text):
     text = text.replace(view, view_types)
     text = text.replace(autofill_rows, autofill_rows_types)
     text = text.replace(autofill_columns, autofill_columns_types)
+    text = text.replace(set_cell_style, set_cell_style_types)
+    text = text.replace(set_area_border, set_area_border_types)
     with open("types.ts") as f:
         types_str = f.read()
         header_types = "{}\n\n{}".format(header, types_str)
diff --git a/bindings/wasm/src/lib.rs b/bindings/wasm/src/lib.rs
index 8a08e1f..9dffc3d 100644
--- a/bindings/wasm/src/lib.rs
+++ b/bindings/wasm/src/lib.rs
@@ -4,9 +4,9 @@ use wasm_bindgen::{
 };
 
 use ironcalc_base::{
-    expressions::{lexer::util::get_tokens as tokenizer, types::Area},
-    types::CellType,
-    UserModel as BaseModel,
+    expressions::{lexer::util::get_tokens as tokenizer, types::Area, utils::number_to_column},
+    types::{CellType, Style},
+    BorderArea, UserModel as BaseModel,
 };
 
 fn to_js_error(error: String) -> JsError {
@@ -20,6 +20,15 @@ pub fn get_tokens(formula: &str) -> Result<JsValue, JsError> {
     let tokens = tokenizer(formula);
     serde_wasm_bindgen::to_value(&tokens).map_err(JsError::from)
 }
+
+#[wasm_bindgen(js_name = "columnNameFromNumber")]
+pub fn column_name_from_number(column: i32) -> Result<String, JsError> {
+    match number_to_column(column) {
+        Some(c) => Ok(c),
+        None => Err(JsError::new("Invalid column number")),
+    }
+}
+
 #[wasm_bindgen]
 pub struct Model {
     model: BaseModel,
@@ -102,6 +111,13 @@ impl Model {
         self.model.rename_sheet(sheet, name).map_err(to_js_error)
     }
 
+    #[wasm_bindgen(js_name = "setSheetColor")]
+    pub fn set_sheet_color(&mut self, sheet: u32, color: &str) -> Result<(), JsError> {
+        self.model
+            .set_sheet_color(sheet, color)
+            .map_err(to_js_error)
+    }
+
     #[wasm_bindgen(js_name = "rangeClearAll")]
     pub fn range_clear_all(
         &mut self,
@@ -264,6 +280,12 @@ impl Model {
             .map(|x| serde_wasm_bindgen::to_value(&x).unwrap())
     }
 
+    #[wasm_bindgen(js_name = "onPasteStyles")]
+    pub fn on_paste_styles(&mut self, styles: JsValue) -> Result<(), JsError> {
+        let styles: &Vec<Vec<Style>> = &serde_wasm_bindgen::from_value(styles).unwrap();
+        self.model.on_paste_styles(styles).map_err(to_js_error)
+    }
+
     #[wasm_bindgen(js_name = "getCellType")]
     pub fn get_cell_type(&self, sheet: u32, row: i32, column: i32) -> Result<i32, JsError> {
         Ok(
@@ -376,4 +398,88 @@ impl Model {
             .auto_fill_columns(&area, to_column)
             .map_err(to_js_error)
     }
+
+    #[wasm_bindgen(js_name = "onArrowRight")]
+    pub fn on_arrow_right(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_right().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onArrowLeft")]
+    pub fn on_arrow_left(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_left().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onArrowUp")]
+    pub fn on_arrow_up(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_up().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onArrowDown")]
+    pub fn on_arrow_down(&mut self) -> Result<(), JsError> {
+        self.model.on_arrow_down().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onPageDown")]
+    pub fn on_page_down(&mut self) -> Result<(), JsError> {
+        self.model.on_page_down().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onPageUp")]
+    pub fn on_page_up(&mut self) -> Result<(), JsError> {
+        self.model.on_page_up().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "setWindowWidth")]
+    pub fn set_window_width(&mut self, window_width: f64) {
+        self.model.set_window_width(window_width);
+    }
+
+    #[wasm_bindgen(js_name = "setWindowHeight")]
+    pub fn set_window_height(&mut self, window_height: f64) {
+        self.model.set_window_height(window_height);
+    }
+
+    #[wasm_bindgen(js_name = "getScrollX")]
+    pub fn get_scroll_x(&self) -> Result<f64, JsError> {
+        self.model.get_scroll_x().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "getScrollY")]
+    pub fn get_scroll_y(&self) -> Result<f64, JsError> {
+        self.model.get_scroll_y().map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onExpandSelectedRange")]
+    pub fn on_expand_selected_range(&mut self, key: &str) -> Result<(), JsError> {
+        self.model
+            .on_expand_selected_range(key)
+            .map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "onAreaSelecting")]
+    pub fn on_area_selecting(
+        &mut self,
+        target_row: i32,
+        target_column: i32,
+    ) -> Result<(), JsError> {
+        self.model
+            .on_area_selecting(target_row, target_column)
+            .map_err(to_js_error)
+    }
+
+    #[wasm_bindgen(js_name = "setAreaWithBorder")]
+    pub fn set_area_with_border(
+        &mut self,
+        area: JsValue,
+        border_area: JsValue,
+    ) -> Result<(), JsError> {
+        let range: Area =
+            serde_wasm_bindgen::from_value(area).map_err(|e| to_js_error(e.to_string()))?;
+        let border: BorderArea =
+            serde_wasm_bindgen::from_value(border_area).map_err(|e| to_js_error(e.to_string()))?;
+        self.model
+            .set_area_with_border(&range, &border)
+            .map_err(|e| to_js_error(e.to_string()))?;
+        Ok(())
+    }
 }
diff --git a/bindings/wasm/types.ts b/bindings/wasm/types.ts
index 65b4827..241d540 100644
--- a/bindings/wasm/types.ts
+++ b/bindings/wasm/types.ts
@@ -6,6 +6,24 @@ export interface Area {
   height: number;
 }
 
+export enum BorderType {
+  All = "All",
+  Inner = "Inner",
+  Outer = "Outer",
+  Top = "Top",
+  Right = "Right",
+  Bottom = "Bottom",
+  Left = "Left",
+  CenterH = "CenterH",
+  CenterV = "CenterV",
+  None = "None",
+}
+
+export interface BorderArea {
+  item: BorderItem;
+  type: BorderType;
+}
+
 type ErrorType =
   | "REF"
   | "NAME"
@@ -115,20 +133,6 @@ interface CellStyleFont {
   scheme: string;
 }
 
-export enum BorderType {
-  BorderAll,
-  BorderInner,
-  BorderCenterH,
-  BorderCenterV,
-  BorderOuter,
-  BorderNone,
-  BorderTop,
-  BorderRight,
-  BorderBottom,
-  BorderLeft,
-  None,
-}
-
 export interface BorderOptions {
   color: string;
   style: BorderStyle;
@@ -192,3 +196,12 @@ export interface CellStyle {
   num_fmt: string;
   alignment?: Alignment;
 }
+
+export interface SelectedView {
+  sheet: number;
+  row: number;
+  column: number;
+  range: [number, number, number, number];
+  top_row: number;
+  left_column: number;
+}
diff --git a/webapp/.gitignore b/webapp/.gitignore
new file mode 100644
index 0000000..3659f1a
--- /dev/null
+++ b/webapp/.gitignore
@@ -0,0 +1,2 @@
+node_modules/*
+dist/*
diff --git a/webapp/README.md b/webapp/README.md
new file mode 100644
index 0000000..5f232c9
--- /dev/null
+++ b/webapp/README.md
@@ -0,0 +1,58 @@
+# IronCalc Web App
+
+The webapp is build with React and TypeScript. We use icons from [Lucide](https://lucide.dev/)
+
+## Build
+
+First thing build the wasm is the `../bindings/wasm` folder.
+
+If you have nodejs installed you just need to:
+
+```bash
+npm install
+```
+
+## Local development
+
+
+```bash
+npm run dev
+```
+
+## Linter and formatting
+
+We use [biome](https://biomejs.dev/):
+
+```
+npm run check
+```
+
+Will check for linter and formatting issues.
+
+## Testing
+
+We use vitest. Simply:
+
+```
+npm run test
+```
+
+Warning: There is only the testing infrastructure in place.
+
+## Deploy
+
+Deploying is a bit of a manual hassle right now:
+To build a deployable frontend:
+
+```bash
+npm run build
+```
+
+Please copy the `inroncalc.svg` icon and the models you want to have as 'examples' in the internal 'ic' format.
+I normally compress the wasm and js files with brotli
+
+```
+brotli wasm_bg-*****.wasm
+```
+
+Copy to the final destination and you are good to go.
\ No newline at end of file
diff --git a/webapp/biome.json b/webapp/biome.json
new file mode 100644
index 0000000..f0cb895
--- /dev/null
+++ b/webapp/biome.json
@@ -0,0 +1,18 @@
+{
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "correctness": { "noUnusedImports": "error" }
+    }
+  },
+  "formatter": {
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "css": {
+    "formatter": {
+      "enabled": true
+    }
+  }
+}
diff --git a/webapp/index.html b/webapp/index.html
new file mode 100644
index 0000000..fde05c2
--- /dev/null
+++ b/webapp/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/ironcalc.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- <meta name="theme-color" content="#1bb566"> -->
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#F2994A" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
+    <title>IronCalc Spreadsheet</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
new file mode 100644
index 0000000..56a318a
--- /dev/null
+++ b/webapp/package-lock.json
@@ -0,0 +1,3742 @@
+{
+  "name": "frontend",
+  "version": "0.1.3",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "frontend",
+      "version": "0.1.3",
+      "dependencies": {
+        "@emotion/react": "^11.11.4",
+        "@emotion/styled": "^11.11.5",
+        "@ironcalc/wasm": "file:../bindings/wasm/pkg",
+        "@mui/material": "^5.15.15",
+        "i18next": "^23.11.1",
+        "lucide-react": "^0.427.0",
+        "react": "^18.2.0",
+        "react-colorful": "^5.6.1",
+        "react-dom": "^18.2.0",
+        "react-i18next": "^13.5.0"
+      },
+      "devDependencies": {
+        "@biomejs/biome": "1.8.3",
+        "@types/react": "^18.2.75",
+        "@types/react-dom": "^18.2.24",
+        "@vitejs/plugin-react": "^4.2.1",
+        "ts-node": "^10.9.2",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.8",
+        "vite-plugin-svgr": "^4.2.0",
+        "vitest": "^2.0.5"
+      }
+    },
+    "../bindings/wasm/pkg": {
+      "name": "@ironcalc/wasm",
+      "version": "0.1.3",
+      "license": "MIT/Apache-2.0"
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.2.tgz",
+      "integrity": "sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==",
+      "dependencies": {
+        "@babel/highlight": "^7.24.2",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.4.tgz",
+      "integrity": "sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.4.tgz",
+      "integrity": "sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.24.2",
+        "@babel/generator": "^7.24.4",
+        "@babel/helper-compilation-targets": "^7.23.6",
+        "@babel/helper-module-transforms": "^7.23.3",
+        "@babel/helpers": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/core/node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.4.tgz",
+      "integrity": "sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.24.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.23.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz",
+      "integrity": "sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.23.5",
+        "@babel/helper-validator-option": "^7.23.5",
+        "browserslist": "^4.22.2",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz",
+      "integrity": "sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.23.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz",
+      "integrity": "sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.22.15",
+        "@babel/types": "^7.23.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+      "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.24.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz",
+      "integrity": "sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==",
+      "dependencies": {
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.23.3",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz",
+      "integrity": "sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-module-imports": "^7.22.15",
+        "@babel/helper-simple-access": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/helper-validator-identifier": "^7.22.20"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz",
+      "integrity": "sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+      "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.22.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz",
+      "integrity": "sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz",
+      "integrity": "sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.22.20",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
+      "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz",
+      "integrity": "sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.4.tgz",
+      "integrity": "sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.24.0",
+        "@babel/traverse": "^7.24.1",
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.24.2",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.2.tgz",
+      "integrity": "sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "chalk": "^2.4.2",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
+    },
+    "node_modules/@babel/highlight/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/highlight/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
+      "integrity": "sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==",
+      "dev": true,
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.1.tgz",
+      "integrity": "sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.1.tgz",
+      "integrity": "sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.24.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz",
+      "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.23.5",
+        "@babel/parser": "^7.24.0",
+        "@babel/types": "^7.24.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.1.tgz",
+      "integrity": "sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.24.1",
+        "@babel/generator": "^7.24.1",
+        "@babel/helper-environment-visitor": "^7.22.20",
+        "@babel/helper-function-name": "^7.23.0",
+        "@babel/helper-hoist-variables": "^7.22.5",
+        "@babel/helper-split-export-declaration": "^7.22.6",
+        "@babel/parser": "^7.24.1",
+        "@babel/types": "^7.24.0",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.24.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz",
+      "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.23.4",
+        "@babel/helper-validator-identifier": "^7.22.20",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@biomejs/biome": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-1.8.3.tgz",
+      "integrity": "sha512-/uUV3MV+vyAczO+vKrPdOW0Iaet7UnJMU4bNMinggGJTAnBPjCoLEYcyYtYHNnUNYlv4xZMH6hVIQCAozq8d5w==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "biome": "bin/biome"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/biome"
+      },
+      "optionalDependencies": {
+        "@biomejs/cli-darwin-arm64": "1.8.3",
+        "@biomejs/cli-darwin-x64": "1.8.3",
+        "@biomejs/cli-linux-arm64": "1.8.3",
+        "@biomejs/cli-linux-arm64-musl": "1.8.3",
+        "@biomejs/cli-linux-x64": "1.8.3",
+        "@biomejs/cli-linux-x64-musl": "1.8.3",
+        "@biomejs/cli-win32-arm64": "1.8.3",
+        "@biomejs/cli-win32-x64": "1.8.3"
+      }
+    },
+    "node_modules/@biomejs/cli-darwin-arm64": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-1.8.3.tgz",
+      "integrity": "sha512-9DYOjclFpKrH/m1Oz75SSExR8VKvNSSsLnVIqdnKexj6NwmiMlKk94Wa1kZEdv6MCOHGHgyyoV57Cw8WzL5n3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-darwin-x64": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-1.8.3.tgz",
+      "integrity": "sha512-UeW44L/AtbmOF7KXLCoM+9PSgPo0IDcyEUfIoOXYeANaNXXf9mLUwV1GeF2OWjyic5zj6CnAJ9uzk2LT3v/wAw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-arm64": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-1.8.3.tgz",
+      "integrity": "sha512-fed2ji8s+I/m8upWpTJGanqiJ0rnlHOK3DdxsyVLZQ8ClY6qLuPc9uehCREBifRJLl/iJyQpHIRufLDeotsPtw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-arm64-musl": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.8.3.tgz",
+      "integrity": "sha512-9yjUfOFN7wrYsXt/T/gEWfvVxKlnh3yBpnScw98IF+oOeCYb5/b/+K7YNqKROV2i1DlMjg9g/EcN9wvj+NkMuQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-x64": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-1.8.3.tgz",
+      "integrity": "sha512-I8G2QmuE1teISyT8ie1HXsjFRz9L1m5n83U1O6m30Kw+kPMPSKjag6QGUn+sXT8V+XWIZxFFBoTDEDZW2KPDDw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-linux-x64-musl": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-1.8.3.tgz",
+      "integrity": "sha512-UHrGJX7PrKMKzPGoEsooKC9jXJMa28TUSMjcIlbDnIO4EAavCoVmNQaIuUSH0Ls2mpGMwUIf+aZJv657zfWWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-win32-arm64": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-1.8.3.tgz",
+      "integrity": "sha512-J+Hu9WvrBevfy06eU1Na0lpc7uR9tibm9maHynLIoAjLZpQU3IW+OKHUtyL8p6/3pT2Ju5t5emReeIS2SAxhkQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@biomejs/cli-win32-x64": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-1.8.3.tgz",
+      "integrity": "sha512-/PJ59vA1pnQeKahemaQf4Nyj7IKUvGQSc3Ze1uIGi+Wvr1xF7rGobSrAAG01T/gUDG21vkDsZYM03NAmPiVkqg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=14.21.3"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz",
+      "integrity": "sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/serialize": "^1.1.2",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.11.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.11.0.tgz",
+      "integrity": "sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/sheet": "^1.2.2",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.11.4",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz",
+      "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/cache": "^11.11.0",
+        "@emotion/serialize": "^1.1.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1",
+        "@emotion/weak-memoize": "^0.3.1",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz",
+      "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.1",
+        "@emotion/memoize": "^0.8.1",
+        "@emotion/unitless": "^0.8.1",
+        "@emotion/utils": "^1.2.1",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz",
+      "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.11.5",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.5.tgz",
+      "integrity": "sha512-/ZjjnaNKvuMPxcIiUkf/9SHoG4Q196DRl1w82hQ3WCsjo1IUR8uaGWrC6a87CrYAW0Kb/pK7hk8BnLgLRi9KoQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.11.0",
+        "@emotion/is-prop-valid": "^1.2.2",
+        "@emotion/serialize": "^1.1.4",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
+        "@emotion/utils": "^1.2.1"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ=="
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz",
+      "integrity": "sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.2.1.tgz",
+      "integrity": "sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz",
+      "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww=="
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.1"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz",
+      "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
+      "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
+    },
+    "node_modules/@ironcalc/wasm": {
+      "resolved": "../bindings/wasm/pkg",
+      "link": true
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-beta.40",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz",
+      "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@floating-ui/react-dom": "^2.0.8",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@popperjs/core": "^2.11.8",
+        "clsx": "^2.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
+      "integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
+      "integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/base": "5.0.0-beta.40",
+        "@mui/core-downloads-tracker": "^5.15.15",
+        "@mui/system": "^5.15.15",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "@types/react-transition-group": "^4.4.10",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz",
+      "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/utils": "^5.15.14",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz",
+      "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@emotion/cache": "^11.11.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.15.15",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz",
+      "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/private-theming": "^5.15.14",
+        "@mui/styled-engine": "^5.15.14",
+        "@mui/types": "^7.2.14",
+        "@mui/utils": "^5.15.14",
+        "clsx": "^2.1.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.2.14",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz",
+      "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==",
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.15.14",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz",
+      "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@types/prop-types": "^15.7.11",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.1.tgz",
+      "integrity": "sha512-fH8/o8nSUek8ceQnT7K4EQbSiV7jgkHq81m9lWZFIXjJ7lJzpWXbQFpT/Zh6OZYnpFykvzC3fbEvEAFZu03dPA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.14.1.tgz",
+      "integrity": "sha512-Y/9OHLjzkunF+KGEoJr3heiD5X9OLa8sbT1lm0NYeKyaM3oMhhQFvPB0bNZYJwlq93j8Z6wSxh9+cyKQaxS7PQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.14.1.tgz",
+      "integrity": "sha512-+kecg3FY84WadgcuSVm6llrABOdQAEbNdnpi5X3UwWiFVhZIZvKgGrF7kmLguvxHNQy+UuRV66cLVl3S+Rkt+Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.14.1.tgz",
+      "integrity": "sha512-2pYRzEjVqq2TB/UNv47BV/8vQiXkFGVmPFwJb+1E0IFFZbIX8/jo1olxqqMbo6xCXf8kabANhp5bzCij2tFLUA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.14.1.tgz",
+      "integrity": "sha512-mS6wQ6Do6/wmrF9aTFVpIJ3/IDXhg1EZcQFYHZLHqw6AzMBjTHWnCG35HxSqUNphh0EHqSM6wRTT8HsL1C0x5g==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.14.1.tgz",
+      "integrity": "sha512-p9rGKYkHdFMzhckOTFubfxgyIO1vw//7IIjBBRVzyZebWlzRLeNhqxuSaZ7kCEKVkm/kuC9fVRW9HkC/zNRG2w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.14.1.tgz",
+      "integrity": "sha512-nDY6Yz5xS/Y4M2i9JLQd3Rofh5OR8Bn8qe3Mv/qCVpHFlwtZSBYSPaU4mrGazWkXrdQ98GB//H0BirGR/SKFSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.14.1.tgz",
+      "integrity": "sha512-im7HE4VBL+aDswvcmfx88Mp1soqL9OBsdDBU8NqDEYtkri0qV0THhQsvZtZeNNlLeCUQ16PZyv7cqutjDF35qw==",
+      "cpu": [
+        "ppc64le"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.14.1.tgz",
+      "integrity": "sha512-RWdiHuAxWmzPJgaHJdpvUUlDz8sdQz4P2uv367T2JocdDa98iRw2UjIJ4QxSyt077mXZT2X6pKfT2iYtVEvOFw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.14.1.tgz",
+      "integrity": "sha512-VMgaGQ5zRX6ZqV/fas65/sUGc9cPmsntq2FiGmayW9KMNfWVG/j0BAqImvU4KTeOOgYSf1F+k6at1UfNONuNjA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.14.1.tgz",
+      "integrity": "sha512-9Q7DGjZN+hTdJomaQ3Iub4m6VPu1r94bmK2z3UeWP3dGUecRC54tmVu9vKHTm1bOt3ASoYtEz6JSRLFzrysKlA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.14.1.tgz",
+      "integrity": "sha512-JNEG/Ti55413SsreTguSx0LOVKX902OfXIKVg+TCXO6Gjans/k9O6ww9q3oLGjNDaTLxM+IHFMeXy/0RXL5R/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.14.1.tgz",
+      "integrity": "sha512-ryS22I9y0mumlLNwDFYZRDFLwWh3aKaC72CWjFcFvxK0U6v/mOkM5Up1bTbCRAhv3kEIwW2ajROegCIQViUCeA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.14.1.tgz",
+      "integrity": "sha512-TdloItiGk+T0mTxKx7Hp279xy30LspMso+GzQvV2maYePMAWdmrzqSNZhUpPj3CGw12aGj57I026PgLCTu8CGg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.14.1.tgz",
+      "integrity": "sha512-wQGI+LY/Py20zdUPq+XCem7JcPOyzIJBm3dli+56DJsQOHbnXZFEwgmnC6el1TPAfC8lBT3m+z69RmLykNUbew==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
+    "node_modules/@svgr/core/node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@svgr/core/node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@svgr/core/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
+      "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "dev": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "dev": true
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.5.tgz",
+      "integrity": "sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.12.7",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
+      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.75",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.75.tgz",
+      "integrity": "sha512-+DNnF7yc5y0bHkBTiLKqXFe+L4B3nvOphiMY3tuA5X10esmjqk7smyBZzbGTy2vsiy/Bnzj8yFIBL8xhRacoOg==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.2.24",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.24.tgz",
+      "integrity": "sha512-cN6upcKd8zkGy4HU9F1+/s98Hrp6D4MOcippK4PoE8OZRngohHZpbJn1GsaDLz87MqvHNoT13nHvNqM9ocRHZg==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.10",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz",
+      "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.2.1.tgz",
+      "integrity": "sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.23.5",
+        "@babel/plugin-transform-react-jsx-self": "^7.23.3",
+        "@babel/plugin-transform-react-jsx-source": "^7.23.3",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-2.0.5.tgz",
+      "integrity": "sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==",
+      "dev": true,
+      "dependencies": {
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-2.0.5.tgz",
+      "integrity": "sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/utils": "2.0.5",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/@vitest/runner/node_modules/@vitest/utils": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
+      "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/pretty-format": "2.0.5",
+        "estree-walker": "^3.0.3",
+        "loupe": "^3.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/@vitest/runner/node_modules/loupe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-2.0.5.tgz",
+      "integrity": "sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/pretty-format": "2.0.5",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "dev": true
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
+      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001587",
+        "electron-to-chromium": "^1.4.668",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.13"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/cac": {
+      "version": "6.7.14",
+      "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
+      "integrity": "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001608",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001608.tgz",
+      "integrity": "sha512-cjUJTQkk9fQlJR2s4HMuPMvTiRggl0rAVMtthQuyOlDWuqHXqN8azLq+pi8B2TjwKJ32diHjUqRIKeFX4z1FoA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/clsx": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz",
+      "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "dev": true
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/debug": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/diff": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
+      "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.732",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.732.tgz",
+      "integrity": "sha512-nLrzr6UML+oqCyvseTxJ1WxLsnMSQPJCoHu+MuOuNiCp7BHEdG9AmCTw2Y9FU/wFFc/ETE0F6JVtzzPryEjecw==",
+      "dev": true
+    },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-func-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
+    "node_modules/i18next": {
+      "version": "23.11.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.11.1.tgz",
+      "integrity": "sha512-mXw4A24BiPZKRsbb9ewgSvjYd6fxFCNwJyfK6nYfSTIAX2GkCWcb598m3DFkDZmqADatvuASrKo6qwORz3VwTQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="
+    },
+    "node_modules/is-core-module": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
+      "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w=="
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.427.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.427.0.tgz",
+      "integrity": "sha512-lv9s6c5BDF/ccuA0EgTdskTxIe11qpwBDmzRZHJAKtp8LTewAvDvOM+pTES9IpbBuTqkjiMhOmGpJ/CB+mKjFw==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
+      "dev": true
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
+    "node_modules/react-i18next": {
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-13.5.0.tgz",
+      "integrity": "sha512-CFJ5NDGJ2MUyBohEHxljOq/39NQ972rh1ajnadG9BjTk+UXbHLq4z5DKEbEQBDoIhUmmbuS/fIMJKo6VOax1HA==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
+      "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "3.29.4",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.4.tgz",
+      "integrity": "sha512-oWzmBZwvYrU0iJHtDmhsm662rC15FRXmcjCk1xD771dFDx5jJ02ufAQQTn0etB2emNk4J9EZg/yWKpsn9BWGRw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=14.18.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true
+    },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true
+    },
+    "node_modules/std-env": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.7.0.tgz",
+      "integrity": "sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==",
+      "dev": true
+    },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw=="
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true
+    },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true
+    },
+    "node_modules/tinypool": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.0.tgz",
+      "integrity": "sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==",
+      "dev": true,
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      }
+    },
+    "node_modules/tinyrainbow": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-1.2.0.tgz",
+      "integrity": "sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/ts-node": {
+      "version": "10.9.2",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
+      "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
+      "dev": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ts-node/node_modules/acorn": {
+      "version": "8.11.3",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
+      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ts-node/node_modules/acorn-walk": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.2.tgz",
+      "integrity": "sha512-cjkyv4OtNCIeqhHrfS81QWXoCBPExR/J62oyEqepVw8WaQeSqpW2uhuLPh1m9eWhDuOo/jUXVTlifvesOWp/4A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true,
+      "peer": true
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
+      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.1",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "dev": true
+    },
+    "node_modules/vite": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.8.tgz",
+      "integrity": "sha512-OyZR+c1CE8yeHw5V5t59aXsUPPVTHMDjEZz8MgguLL/Q7NblxhZUlTu9xSPqlsUO/y+X7dlU05jdhvyycD55DA==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.38",
+        "rollup": "^4.13.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-node": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-2.0.5.tgz",
+      "integrity": "sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==",
+      "dev": true,
+      "dependencies": {
+        "cac": "^6.7.14",
+        "debug": "^4.3.5",
+        "pathe": "^1.1.2",
+        "tinyrainbow": "^1.2.0",
+        "vite": "^5.0.0"
+      },
+      "bin": {
+        "vite-node": "vite-node.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.2.0.tgz",
+      "integrity": "sha512-SC7+FfVtNQk7So0XMjrrtLAbEC8qjFPifyD7+fs/E6aaNdVde6umlVVh0QuwDLdOMu7vp5RiGFsB70nj5yo0XA==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.5",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": "^2.6.0 || 3 || 4 || 5"
+      }
+    },
+    "node_modules/vite/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/vite/node_modules/rollup": {
+      "version": "4.14.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.14.1.tgz",
+      "integrity": "sha512-4LnHSdd3QK2pa1J6dFbfm1HN0D7vSK/ZuZTsdyUAlA6Rr1yTouUTL13HaDOGJVgby461AhrNGBS7sCGXXtT+SA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.14.1",
+        "@rollup/rollup-android-arm64": "4.14.1",
+        "@rollup/rollup-darwin-arm64": "4.14.1",
+        "@rollup/rollup-darwin-x64": "4.14.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.14.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.14.1",
+        "@rollup/rollup-linux-arm64-musl": "4.14.1",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.14.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.14.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-gnu": "4.14.1",
+        "@rollup/rollup-linux-x64-musl": "4.14.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.14.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.14.1",
+        "@rollup/rollup-win32-x64-msvc": "4.14.1",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/vitest": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-2.0.5.tgz",
+      "integrity": "sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==",
+      "dev": true,
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@vitest/expect": "2.0.5",
+        "@vitest/pretty-format": "^2.0.5",
+        "@vitest/runner": "2.0.5",
+        "@vitest/snapshot": "2.0.5",
+        "@vitest/spy": "2.0.5",
+        "@vitest/utils": "2.0.5",
+        "chai": "^5.1.1",
+        "debug": "^4.3.5",
+        "execa": "^8.0.1",
+        "magic-string": "^0.30.10",
+        "pathe": "^1.1.2",
+        "std-env": "^3.7.0",
+        "tinybench": "^2.8.0",
+        "tinypool": "^1.0.0",
+        "tinyrainbow": "^1.2.0",
+        "vite": "^5.0.0",
+        "vite-node": "2.0.5",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "@vitest/browser": "2.0.5",
+        "@vitest/ui": "2.0.5",
+        "happy-dom": "*",
+        "jsdom": "*"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest/node_modules/@types/estree": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "dev": true
+    },
+    "node_modules/vitest/node_modules/@vitest/expect": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-2.0.5.tgz",
+      "integrity": "sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/spy": "2.0.5",
+        "@vitest/utils": "2.0.5",
+        "chai": "^5.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest/node_modules/@vitest/spy": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-2.0.5.tgz",
+      "integrity": "sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==",
+      "dev": true,
+      "dependencies": {
+        "tinyspy": "^3.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest/node_modules/@vitest/utils": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-2.0.5.tgz",
+      "integrity": "sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==",
+      "dev": true,
+      "dependencies": {
+        "@vitest/pretty-format": "2.0.5",
+        "estree-walker": "^3.0.3",
+        "loupe": "^3.1.1",
+        "tinyrainbow": "^1.2.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/vitest/node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vitest/node_modules/chai": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-5.1.1.tgz",
+      "integrity": "sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==",
+      "dev": true,
+      "dependencies": {
+        "assertion-error": "^2.0.1",
+        "check-error": "^2.1.1",
+        "deep-eql": "^5.0.1",
+        "loupe": "^3.1.0",
+        "pathval": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vitest/node_modules/check-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz",
+      "integrity": "sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/vitest/node_modules/deep-eql": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
+      "integrity": "sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/vitest/node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
+    "node_modules/vitest/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/vitest/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/vitest/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/loupe": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.1.tgz",
+      "integrity": "sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==",
+      "dev": true,
+      "dependencies": {
+        "get-func-name": "^2.0.1"
+      }
+    },
+    "node_modules/vitest/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/pathval": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/pathval/-/pathval-2.0.0.tgz",
+      "integrity": "sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.16"
+      }
+    },
+    "node_modules/vitest/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/vitest/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/vitest/node_modules/tinyspy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/tinyspy/-/tinyspy-3.0.0.tgz",
+      "integrity": "sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yn": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
+      "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    }
+  }
+}
diff --git a/webapp/package.json b/webapp/package.json
new file mode 100644
index 0000000..72cb6e3
--- /dev/null
+++ b/webapp/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.1.3",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "check": "biome check ./src",
+    "check-write": "biome check --write ./src",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@ironcalc/wasm": "file:../bindings/wasm/pkg",
+    "@mui/material": "^5.15.15",
+    "i18next": "^23.11.1",
+    "lucide-react": "^0.427.0",
+    "react": "^18.2.0",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.2.0",
+    "react-i18next": "^13.5.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "1.8.3",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
+    "@vitejs/plugin-react": "^4.2.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.8",
+    "vite-plugin-svgr": "^4.2.0",
+    "vitest": "^2.0.5"
+  }
+}
diff --git a/webapp/src/App.css b/webapp/src/App.css
new file mode 100644
index 0000000..4e77e42
--- /dev/null
+++ b/webapp/src/App.css
@@ -0,0 +1,6 @@
+#root {
+  position: absolute;
+  inset: 10px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}
diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx
new file mode 100644
index 0000000..dadd4ce
--- /dev/null
+++ b/webapp/src/App.tsx
@@ -0,0 +1,59 @@
+import "./App.css";
+import Workbook from "./components/workbook";
+import "./i18n";
+import styled from "@emotion/styled";
+import init, { Model } from "@ironcalc/wasm";
+import { useEffect, useState } from "react";
+import { WorkbookState } from "./components/workbookState";
+
+function App() {
+  const [model, setModel] = useState<Model | null>(null);
+  const [workbookState, setWorkbookState] = useState<WorkbookState | null>(
+    null,
+  );
+  useEffect(() => {
+    async function start() {
+      await init();
+      const queryString = window.location.search;
+      const urlParams = new URLSearchParams(queryString);
+      const modelName = urlParams.get("model");
+      // If there is a model name ?model=example.ic we try to load it
+      // if there is not, or the loading failed we load an empty model
+      if (modelName) {
+        try {
+          const model_bytes = new Uint8Array(
+            await (await fetch(`./${modelName}`)).arrayBuffer(),
+          );
+          const _model = Model.from_bytes(model_bytes);
+          if (!model) setModel(_model);
+        } catch (e) {
+          const _model = new Model("en", "UTC");
+          if (!model) setModel(_model);
+        }
+      } else {
+        const _model = new Model("en", "UTC");
+        if (!model) setModel(_model);
+      }
+      if (!workbookState) setWorkbookState(new WorkbookState());
+    }
+    start();
+  }, [model, workbookState]);
+
+  if (!model || !workbookState) {
+    return <Loading>Loading</Loading>;
+  }
+
+  // We could use context for model, but the problem is that it should initialized to null.
+  // Passing the property down makes sure it is always defined.
+  return <Workbook model={model} workbookState={workbookState} />;
+}
+
+const Loading = styled("div")`
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+`;
+
+export default App;
diff --git a/webapp/src/components/README.md b/webapp/src/components/README.md
new file mode 100644
index 0000000..dc8fa8a
--- /dev/null
+++ b/webapp/src/components/README.md
@@ -0,0 +1,12 @@
+# Keyboard and mouse events architecture
+
+This document describes the architecture of the keyboard navigation and mouse events in IronCalc Web
+
+There are two modes for mouse events:
+
+* Normal mode: clicking a cell selects it, clicking on a sheet opens it
+* Browse mode: clicking on a cell updates the formula, etc
+
+While in browse mode some mouse events might end the browse mode
+
+We follow Excel's way of navigating a spreadsheet
\ No newline at end of file
diff --git a/webapp/src/components/WorksheetCanvas/constants.ts b/webapp/src/components/WorksheetCanvas/constants.ts
new file mode 100644
index 0000000..b79131b
--- /dev/null
+++ b/webapp/src/components/WorksheetCanvas/constants.ts
@@ -0,0 +1,18 @@
+export const headerCornerBackground = "#FFF";
+export const headerTextColor = "#333";
+export const headerBackground = "#FFF";
+export const headerGlobalSelectorColor = "#EAECF4";
+export const headerSelectedBackground = "#EEEEEE";
+export const headerFullSelectedBackground = "#D3D6E9";
+export const headerSelectedColor = "#333";
+export const headerBorderColor = "#DEE0EF";
+
+export const gridColor = "#D3D6E9";
+export const gridSeparatorColor = "#D3D6E9";
+export const defaultTextColor = "#2E414D";
+
+export const outlineColor = "#F2994A";
+export const outlineBackgroundColor = "#F2994A1A";
+
+export const LAST_COLUMN = 16_384;
+export const LAST_ROW = 1_048_576;
diff --git a/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
new file mode 100644
index 0000000..4c5d00b
--- /dev/null
+++ b/webapp/src/components/WorksheetCanvas/worksheetCanvas.ts
@@ -0,0 +1,1356 @@
+import type { Model } from "@ironcalc/wasm";
+import { columnNameFromNumber } from "@ironcalc/wasm";
+import type { Cell } from "../types";
+import type { WorkbookState } from "../workbookState";
+import {
+  LAST_COLUMN,
+  LAST_ROW,
+  defaultTextColor,
+  gridColor,
+  gridSeparatorColor,
+  headerBackground,
+  headerBorderColor,
+  headerSelectedBackground,
+  headerSelectedColor,
+  headerTextColor,
+  outlineColor,
+} from "./constants";
+
+export interface CanvasSettings {
+  model: Model;
+  width: number;
+  height: number;
+  workbookState: WorkbookState;
+  elements: {
+    canvas: HTMLCanvasElement;
+    cellOutline: HTMLDivElement;
+    areaOutline: HTMLDivElement;
+    cellOutlineHandle: HTMLDivElement;
+    extendToOutline: HTMLDivElement;
+    columnGuide: HTMLDivElement;
+    rowGuide: HTMLDivElement;
+    columnHeaders: HTMLDivElement;
+  };
+  onColumnWidthChanges: (sheet: number, column: number, width: number) => void;
+  onRowHeightChanges: (sheet: number, row: number, height: number) => void;
+}
+
+export const fonts = {
+  regular: 'Inter, "Adjusted Arial Fallback", sans-serif',
+  mono: '"Fira Mono", "Adjusted Courier New Fallback", serif',
+};
+
+export const headerRowHeight = 24;
+export const headerColumnWidth = 30;
+export const devicePixelRatio = window.devicePixelRatio || 1;
+
+export const defaultCellFontFamily = fonts.regular;
+export const headerFontFamily = fonts.regular;
+export const frozenSeparatorWidth = 3;
+
+export default class WorksheetCanvas {
+  sheetWidth: number;
+
+  sheetHeight: number;
+
+  width: number;
+
+  height: number;
+
+  ctx: CanvasRenderingContext2D;
+
+  canvas: HTMLCanvasElement;
+
+  areaOutline: HTMLDivElement;
+
+  cellOutline: HTMLDivElement;
+
+  cellOutlineHandle: HTMLDivElement;
+
+  extendToOutline: HTMLDivElement;
+
+  workbookState: WorkbookState;
+
+  model: Model;
+
+  rowGuide: HTMLDivElement;
+
+  columnHeaders: HTMLDivElement;
+
+  columnGuide: HTMLDivElement;
+
+  onColumnWidthChanges: (sheet: number, column: number, width: number) => void;
+
+  onRowHeightChanges: (sheet: number, row: number, height: number) => void;
+
+  constructor(options: CanvasSettings) {
+    this.model = options.model;
+    this.sheetWidth = 0;
+    this.sheetHeight = 0;
+    this.canvas = options.elements.canvas;
+    this.width = options.width;
+    this.height = options.height;
+    this.ctx = this.setContext();
+    this.workbookState = options.workbookState;
+
+    this.cellOutline = options.elements.cellOutline;
+    this.cellOutlineHandle = options.elements.cellOutlineHandle;
+    this.areaOutline = options.elements.areaOutline;
+    this.extendToOutline = options.elements.extendToOutline;
+    this.rowGuide = options.elements.rowGuide;
+    this.columnGuide = options.elements.columnGuide;
+    this.columnHeaders = options.elements.columnHeaders;
+
+    this.onColumnWidthChanges = options.onColumnWidthChanges;
+    this.onRowHeightChanges = options.onRowHeightChanges;
+    this.resetHeaders();
+  }
+
+  setScrollPosition(scrollPosition: { left: number; top: number }): void {
+    // We ony scroll whole rows and whole columns
+    // left, top are maximized with constraints:
+    //    1. left <= scrollPosition.left
+    //    2. top <= scrollPosition.top
+    //    3. (left, top) are the absolute coordinates of a cell
+    const { column } = this.getBoundedColumn(scrollPosition.left);
+    const { row } = this.getBoundedRow(scrollPosition.top);
+    this.model.setTopLeftVisibleCell(row, column);
+  }
+
+  resetHeaders(): void {
+    for (const handle of this.columnHeaders.querySelectorAll(
+      ".column-resize-handle",
+    )) {
+      handle.remove();
+    }
+    for (const columnSeparator of this.columnHeaders.querySelectorAll(
+      ".frozen-column-separator",
+    )) {
+      columnSeparator.remove();
+    }
+    for (const header of this.columnHeaders.children) {
+      (header as HTMLDivElement).classList.add("column-header");
+    }
+  }
+
+  setContext(): CanvasRenderingContext2D {
+    const { canvas, width, height } = this;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      throw new Error(
+        "This browser does not support 2-dimensional canvas rendering contexts.",
+      );
+    }
+    // If the devicePixelRatio is 2 then the canvas is twice as large to avoid blurring.
+    canvas.width = width * devicePixelRatio;
+    canvas.height = height * devicePixelRatio;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    context.scale(devicePixelRatio, devicePixelRatio);
+    return context;
+  }
+
+  setSize(size: { width: number; height: number }): void {
+    this.width = size.width;
+    this.height = size.height;
+    this.ctx = this.setContext();
+  }
+
+  /**
+   * This is the height of the frozen rows including the width of the separator
+   * It returns 0 if the are no frozen rows
+   */
+  getFrozenRowsHeight(): number {
+    const frozenRows = this.model.getFrozenRowsCount(
+      this.model.getSelectedSheet(),
+    );
+    if (frozenRows === 0) {
+      return 0;
+    }
+    let frozenRowsHeight = 0;
+    for (let row = 1; row <= frozenRows; row += 1) {
+      frozenRowsHeight += this.getRowHeight(this.model.getSelectedSheet(), row);
+    }
+    return frozenRowsHeight + frozenSeparatorWidth;
+  }
+
+  /**
+   * This is the width of the frozen columns including the width of the separator
+   * It returns 0 if the are no frozen columns
+   */
+  getFrozenColumnsWidth(): number {
+    const frozenColumns = this.model.getFrozenColumnsCount(
+      this.model.getSelectedSheet(),
+    );
+    if (frozenColumns === 0) {
+      return 0;
+    }
+    let frozenColumnsWidth = 0;
+    for (let column = 1; column <= frozenColumns; column += 1) {
+      frozenColumnsWidth += this.getColumnWidth(
+        this.model.getSelectedSheet(),
+        column,
+      );
+    }
+    return frozenColumnsWidth + frozenSeparatorWidth;
+  }
+
+  // Get the visible cells (aside from the frozen rows and columns)
+  getVisibleCells(): {
+    topLeftCell: Cell;
+    bottomRightCell: Cell;
+  } {
+    const view = this.model.getSelectedView();
+    const selectedSheet = view.sheet;
+    const frozenRows = this.model.getFrozenRowsCount(selectedSheet);
+    const frozenColumns = this.model.getFrozenColumnsCount(selectedSheet);
+    const rowTop = Math.max(frozenRows + 1, view.top_row);
+    let rowBottom = rowTop;
+    const columnLeft = Math.max(frozenColumns + 1, view.left_column);
+    let columnRight = columnLeft;
+    const frozenColumnsWidth = this.getFrozenColumnsWidth();
+    const frozenRowsHeight = this.getFrozenRowsHeight();
+    let y = headerRowHeight + frozenRowsHeight;
+    for (let row = rowTop; row <= LAST_ROW; row += 1) {
+      const rowHeight = this.getRowHeight(selectedSheet, row);
+      if (y >= this.height - rowHeight || row === LAST_ROW) {
+        rowBottom = row;
+        break;
+      }
+      y += rowHeight;
+    }
+
+    let x = headerColumnWidth + frozenColumnsWidth;
+    for (let column = columnLeft; column <= LAST_COLUMN; column += 1) {
+      const columnWidth = this.getColumnWidth(selectedSheet, column);
+      if (x >= this.width - columnWidth || column === LAST_COLUMN) {
+        columnRight = column;
+        break;
+      }
+      x += columnWidth;
+    }
+
+    const cells = {
+      topLeftCell: { row: rowTop, column: columnLeft },
+      bottomRightCell: { row: rowBottom, column: columnRight },
+    };
+
+    return cells;
+  }
+
+  /**
+   * Returns the {row, top} of the row whose upper y coordinate (top) is maximum and less or equal than maxTop
+   * Both top and maxTop are absolute coordinates
+   */
+  getBoundedRow(maxTop: number): { row: number; top: number } {
+    const selectedSheet = this.model.getSelectedSheet();
+    let top = 0;
+    let row = 1 + this.model.getFrozenRowsCount(selectedSheet);
+    while (row <= LAST_ROW && top <= maxTop) {
+      const height = this.getRowHeight(selectedSheet, row);
+      if (top + height <= maxTop) {
+        top += height;
+      } else {
+        break;
+      }
+      row += 1;
+    }
+    return { row, top };
+  }
+
+  private getBoundedColumn(maxLeft: number): { column: number; left: number } {
+    let left = 0;
+    const selectedSheet = this.model.getSelectedSheet();
+    let column = 1 + this.model.getFrozenColumnsCount(selectedSheet);
+    while (left <= maxLeft && column <= LAST_COLUMN) {
+      const width = this.getColumnWidth(selectedSheet, column);
+      if (width + left <= maxLeft) {
+        left += width;
+      } else {
+        break;
+      }
+      column += 1;
+    }
+    return { column, left };
+  }
+
+  /**
+   * Returns the minimum we can scroll to the left so that
+   * targetColumn is fully visible.
+   * Returns the the first visible column and the scrollLeft position
+   */
+  getMinScrollLeft(targetColumn: number): number {
+    const columnStart =
+      1 + this.model.getFrozenColumnsCount(this.model.getSelectedSheet());
+    /** Distance from the first non frozen cell to the right border of column*/
+    let distance = 0;
+    for (let column = columnStart; column <= targetColumn; column += 1) {
+      const width = this.getColumnWidth(this.model.getSelectedSheet(), column);
+      distance += width;
+    }
+    /** Minimum we need to scroll so that `column` is visible */
+    const minLeft =
+      distance - this.width + this.getFrozenColumnsWidth() + headerColumnWidth;
+
+    // Because scrolling is quantified, we only scroll whole columns,
+    // we need to find the minimum quantum that is larger than minLeft
+    let left = 0;
+    for (let column = columnStart; column <= LAST_COLUMN; column += 1) {
+      const width = this.getColumnWidth(this.model.getSelectedSheet(), column);
+      if (left < minLeft) {
+        left += width;
+      } else {
+        break;
+      }
+    }
+    return left;
+  }
+
+  private renderCell(
+    row: number,
+    column: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+  ): void {
+    const selectedSheet = this.model.getSelectedSheet();
+    const style = this.model.getCellStyle(selectedSheet, row, column);
+
+    let backgroundColor = "#FFFFFF";
+    if (style.fill.fg_color) {
+      backgroundColor = style.fill.fg_color;
+    }
+    const cellGridColor = this.model.getShowGridLines(selectedSheet)
+      ? gridColor
+      : backgroundColor;
+
+    const fontSize = 13;
+    let font = `${fontSize}px ${defaultCellFontFamily}`;
+    let textColor = defaultTextColor;
+    if (style.font) {
+      textColor = style.font.color;
+      font = style.font.b ? `bold ${font}` : `400 ${font}`;
+      if (style.font.i) {
+        font = `italic ${font}`;
+      }
+    }
+    let horizontalAlign = "general";
+    if (style.alignment?.horizontal) {
+      horizontalAlign = style.alignment.horizontal;
+    }
+    let verticalAlign = "bottom";
+    if (style.alignment?.vertical) {
+      verticalAlign = style.alignment.vertical;
+    }
+
+    const context = this.ctx;
+    context.font = font;
+    context.fillStyle = backgroundColor;
+    context.fillRect(x, y, width, height);
+    context.fillStyle = textColor;
+
+    // Let's do the border
+    // Algorithm:
+    //  * we use the border if present
+    //  * otherwise we use the border of the adjacent cell
+    //  * otherwise we use the color of the background
+    //  * otherwise we use the background color of the adjacent cell
+    //  * if everything else fails we use the default grid color
+    // We only set the left and top borders (right and bottom are set later)
+    const border = style.border;
+
+    let borderLeftColor = cellGridColor;
+    let borderLeftWidth = 1;
+    if (border.left) {
+      borderLeftColor = border.left.color;
+      switch (border.left.style) {
+        case "thin":
+          break;
+        case "medium":
+          borderLeftWidth = 2;
+          break;
+        case "thick":
+          borderLeftWidth = 3;
+      }
+    } else {
+      const leftStyle = this.model.getCellStyle(selectedSheet, row, column - 1);
+      if (leftStyle.border.right) {
+        borderLeftColor = leftStyle.border.right.color;
+        switch (leftStyle.border.right.style) {
+          case "thin":
+            break;
+          case "medium":
+            borderLeftWidth = 2;
+            break;
+          case "thick":
+            borderLeftWidth = 3;
+        }
+      } else if (style.fill.fg_color) {
+        borderLeftColor = style.fill.fg_color;
+      } else if (leftStyle.fill.fg_color) {
+        borderLeftColor = leftStyle.fill.fg_color;
+      }
+    }
+    context.beginPath();
+    context.strokeStyle = borderLeftColor;
+    context.lineWidth = borderLeftWidth;
+    context.moveTo(x, y);
+    context.lineTo(x, y + height);
+    context.stroke();
+
+    let borderTopColor = cellGridColor;
+    let borderTopWidth = 1;
+    if (border.top) {
+      borderTopColor = border.top.color;
+      switch (border.top.style) {
+        case "thin":
+          break;
+        case "medium":
+          borderTopWidth = 2;
+          break;
+        case "thick":
+          borderTopWidth = 3;
+      }
+    } else {
+      const topStyle = this.model.getCellStyle(selectedSheet, row - 1, column);
+      if (topStyle.border.bottom) {
+        borderTopColor = topStyle.border.bottom.color;
+        switch (topStyle.border.bottom.style) {
+          case "thin":
+            break;
+          case "medium":
+            borderTopWidth = 2;
+            break;
+          case "thick":
+            borderTopWidth = 3;
+        }
+      } else if (style.fill.fg_color) {
+        borderTopColor = style.fill.fg_color;
+      } else if (topStyle.fill.fg_color) {
+        borderTopColor = topStyle.fill.fg_color;
+      }
+    }
+    context.beginPath();
+    context.strokeStyle = borderTopColor;
+    context.lineWidth = borderTopWidth;
+    context.moveTo(x, y);
+    context.lineTo(x + width, y);
+    context.stroke();
+
+    // Number = 1,
+    // Text = 2,
+    // LogicalValue = 4,
+    // ErrorValue = 16,
+    // Array = 64,
+    // CompoundData = 128,
+
+    const cellType = this.model.getCellType(selectedSheet, row, column);
+    const fullText = this.model.getFormattedCellValue(
+      selectedSheet,
+      row,
+      column,
+    );
+    const padding = 4;
+    if (horizontalAlign === "general") {
+      if (cellType === 1) {
+        horizontalAlign = "right";
+      } else if (cellType === 4) {
+        horizontalAlign = "center";
+      } else {
+        horizontalAlign = "left";
+      }
+    }
+
+    // Create a rectangular clipping region
+    context.save();
+    context.beginPath();
+    context.rect(x, y, width, height);
+    context.clip();
+
+    // Is there any better parameter?
+    const lineHeight = fontSize;
+
+    fullText.split("\n").forEach((text, line) => {
+      const textWidth = context.measureText(text).width;
+      let textX: number;
+      let textY: number;
+      // The idea is that in the present font-size and default row heigh,
+      // top/bottom and center horizontalAlign coincide
+      const verticalPadding = 4;
+      if (horizontalAlign === "right") {
+        textX = width - padding + x - textWidth / 2;
+      } else if (horizontalAlign === "center") {
+        textX = x + width / 2;
+      } else {
+        // left aligned
+        textX = padding + x + textWidth / 2;
+      }
+      if (verticalAlign === "bottom") {
+        textY = y + height - fontSize / 2 - verticalPadding;
+      } else if (verticalAlign === "center") {
+        textY = y + height / 2;
+      } else {
+        // aligned top
+        textY = y + fontSize / 2 + verticalPadding;
+      }
+      textY += line * lineHeight;
+      context.fillText(text, textX, textY);
+      if (style.font) {
+        if (style.font.u) {
+          // There are no text-decoration in canvas. You have to do the underline yourself.
+          const offset = Math.floor(fontSize / 2);
+          context.beginPath();
+          context.strokeStyle = textColor;
+          context.lineWidth = 1;
+          context.moveTo(textX - textWidth / 2, textY + offset);
+          context.lineTo(textX + textWidth / 2, textY + offset);
+          context.stroke();
+        }
+        if (style.font.strike) {
+          // There are no text-decoration in canvas. You have to do the strikethrough yourself.
+          context.beginPath();
+          context.strokeStyle = textColor;
+          context.lineWidth = 1;
+          context.moveTo(textX - textWidth / 2, textY);
+          context.lineTo(textX + textWidth / 2, textY);
+          context.stroke();
+        }
+      }
+    });
+
+    // remove the clipping region
+    context.restore();
+  }
+
+  // Column and row headers with their handles
+  private addColumnResizeHandle(
+    x: number,
+    column: number,
+    columnWidth: number,
+  ): void {
+    const div = document.createElement("div");
+    div.className = "column-resize-handle";
+    div.style.left = `${x - 1}px`;
+    div.style.height = `${headerRowHeight}px`;
+    this.columnHeaders.insertBefore(div, null);
+
+    let initPageX = 0;
+    const resizeHandleMove = (event: MouseEvent): void => {
+      if (columnWidth + event.pageX - initPageX > 0) {
+        div.style.left = `${x + event.pageX - initPageX - 1}px`;
+        this.columnGuide.style.left = `${
+          headerColumnWidth + x + event.pageX - initPageX
+        }px`;
+      }
+    };
+    let resizeHandleUp = (event: MouseEvent): void => {
+      div.style.opacity = "0";
+      this.columnGuide.style.display = "none";
+      document.removeEventListener("mousemove", resizeHandleMove);
+      document.removeEventListener("mouseup", resizeHandleUp);
+      const newColumnWidth = columnWidth + event.pageX - initPageX;
+      this.onColumnWidthChanges(
+        this.model.getSelectedSheet(),
+        column,
+        newColumnWidth,
+      );
+    };
+    resizeHandleUp = resizeHandleUp.bind(this);
+    div.addEventListener("mousedown", (event) => {
+      div.style.opacity = "1";
+      this.columnGuide.style.display = "block";
+      this.columnGuide.style.left = `${headerColumnWidth + x}px`;
+      initPageX = event.pageX;
+      document.addEventListener("mousemove", resizeHandleMove);
+      document.addEventListener("mouseup", resizeHandleUp);
+    });
+  }
+
+  private addRowResizeHandle(y: number, row: number, rowHeight: number): void {
+    const div = document.createElement("div");
+    div.className = "row-resize-handle";
+    div.style.top = `${y - 1}px`;
+    div.style.width = `${headerColumnWidth}px`;
+    const sheet = this.model.getSelectedSheet();
+    this.canvas.parentElement?.insertBefore(div, null);
+    let initPageY = 0;
+    /* istanbul ignore next */
+    const resizeHandleMove = (event: MouseEvent): void => {
+      if (rowHeight + event.pageY - initPageY > 0) {
+        div.style.top = `${y + event.pageY - initPageY - 1}px`;
+        this.rowGuide.style.top = `${y + event.pageY - initPageY}px`;
+      }
+    };
+    let resizeHandleUp = (event: MouseEvent): void => {
+      div.style.opacity = "0";
+      this.rowGuide.style.display = "none";
+      document.removeEventListener("mousemove", resizeHandleMove);
+      document.removeEventListener("mouseup", resizeHandleUp);
+      const newRowHeight = rowHeight + event.pageY - initPageY - 1;
+      this.onRowHeightChanges(sheet, row, newRowHeight);
+    };
+    resizeHandleUp = resizeHandleUp.bind(this);
+    /* istanbul ignore next */
+    div.addEventListener("mousedown", (event) => {
+      div.style.opacity = "1";
+      this.rowGuide.style.display = "block";
+      this.rowGuide.style.top = `${y}px`;
+      initPageY = event.pageY;
+      document.addEventListener("mousemove", resizeHandleMove);
+      document.addEventListener("mouseup", resizeHandleUp);
+    });
+  }
+
+  private styleColumnHeader(
+    width: number,
+    div: HTMLDivElement,
+    selected: boolean,
+  ): void {
+    div.style.boxSizing = "border-box";
+    div.style.width = `${width}px`;
+    div.style.height = `${headerRowHeight}px`;
+    div.style.backgroundColor = selected
+      ? headerSelectedBackground
+      : headerBackground;
+    div.style.color = selected ? headerSelectedColor : headerTextColor;
+    div.style.fontWeight = "bold";
+    div.style.borderLeft = `1px solid ${headerBorderColor}`;
+    div.style.borderTop = `1px solid ${headerBorderColor}`;
+    if (selected) {
+      div.style.borderBottom = `1px solid ${outlineColor}`;
+      div.classList.add("selected");
+    } else {
+      div.classList.remove("selected");
+    }
+  }
+
+  private removeHandles(): void {
+    const root = this.canvas.parentElement;
+    if (root) {
+      for (const handle of root.querySelectorAll(".row-resize-handle"))
+        handle.remove();
+    }
+  }
+
+  private renderRowHeaders(
+    frozenRows: number,
+    topLeftCell: Cell,
+    bottomRightCell: Cell,
+  ): void {
+    const { sheet: selectedSheet, range } = this.model.getSelectedView();
+    let rowStart = range[0];
+    let rowEnd = range[2];
+    if (rowStart > rowEnd) {
+      [rowStart, rowEnd] = [rowEnd, rowStart];
+    }
+    const context = this.ctx;
+
+    let topLeftCornerY = headerRowHeight + 0.5;
+    const firstRow = frozenRows === 0 ? topLeftCell.row : 1;
+
+    for (let row = firstRow; row <= bottomRightCell.row; row += 1) {
+      const rowHeight = this.getRowHeight(selectedSheet, row);
+      const selected = row >= rowStart && row <= rowEnd;
+      context.fillStyle = headerBorderColor;
+      context.fillRect(0, topLeftCornerY, headerColumnWidth, rowHeight);
+      context.fillStyle = selected
+        ? headerSelectedBackground
+        : headerBackground;
+      context.fillRect(
+        1,
+        topLeftCornerY + 1,
+        headerColumnWidth - 2,
+        rowHeight - 2,
+      );
+      if (selected) {
+        context.fillStyle = outlineColor;
+        context.fillRect(headerColumnWidth - 1, topLeftCornerY, 1, rowHeight);
+      }
+      context.fillStyle = selected ? headerSelectedColor : headerTextColor;
+      context.font = `bold 12px ${defaultCellFontFamily}`;
+      context.fillText(
+        `${row}`,
+        headerColumnWidth / 2,
+        topLeftCornerY + rowHeight / 2,
+        headerColumnWidth,
+      );
+      topLeftCornerY += rowHeight;
+      this.addRowResizeHandle(topLeftCornerY, row, rowHeight);
+      if (row === frozenRows) {
+        topLeftCornerY += frozenSeparatorWidth;
+        row = topLeftCell.row - 1;
+      }
+    }
+  }
+
+  private renderColumnHeaders(
+    frozenColumns: number,
+    firstColumn: number,
+    lastColumn: number,
+  ): void {
+    const { columnHeaders } = this;
+    let deltaX = 0;
+    const { range } = this.model.getSelectedView();
+    let columnStart = range[1];
+    let columnEnd = range[3];
+    if (columnStart > columnEnd) {
+      [columnStart, columnEnd] = [columnEnd, columnStart];
+    }
+    for (const header of columnHeaders.querySelectorAll(".column-header"))
+      header.remove();
+    for (const handle of columnHeaders.querySelectorAll(
+      ".column-resize-handle",
+    ))
+      handle.remove();
+    for (const separator of columnHeaders.querySelectorAll(
+      ".frozen-column-separator",
+    ))
+      separator.remove();
+    columnHeaders.style.fontFamily = headerFontFamily;
+    columnHeaders.style.fontSize = "12px";
+    columnHeaders.style.height = `${headerRowHeight}px`;
+    columnHeaders.style.lineHeight = `${headerRowHeight}px`;
+    columnHeaders.style.left = `${headerColumnWidth}px`;
+
+    // Frozen headers
+    for (let column = 1; column <= frozenColumns; column += 1) {
+      const selected = column >= columnStart && column <= columnEnd;
+      deltaX += this.addColumnHeader(deltaX, column, selected);
+    }
+
+    if (frozenColumns !== 0) {
+      const div = document.createElement("div");
+      div.className = "frozen-column-separator";
+      div.style.width = `${frozenSeparatorWidth}px`;
+      div.style.height = `${headerRowHeight}`;
+      div.style.display = "inline-block";
+      div.style.backgroundColor = gridSeparatorColor;
+      this.columnHeaders.insertBefore(div, null);
+      deltaX += frozenSeparatorWidth;
+    }
+
+    for (let column = firstColumn; column <= lastColumn; column += 1) {
+      const selected = column >= columnStart && column <= columnEnd;
+      deltaX += this.addColumnHeader(deltaX, column, selected);
+    }
+
+    columnHeaders.style.width = `${deltaX}px`;
+  }
+
+  private addColumnHeader(
+    deltaX: number,
+    column: number,
+    selected: boolean,
+  ): number {
+    const columnWidth = this.getColumnWidth(
+      this.model.getSelectedSheet(),
+      column,
+    );
+    const div = document.createElement("div");
+    div.className = "column-header";
+    div.textContent = columnNameFromNumber(column);
+    this.columnHeaders.insertBefore(div, null);
+
+    this.styleColumnHeader(columnWidth, div, selected);
+    this.addColumnResizeHandle(deltaX + columnWidth, column, columnWidth);
+    return columnWidth;
+  }
+
+  getSheetDimensions(): [number, number] {
+    let x = headerColumnWidth;
+    for (let column = 1; column < LAST_COLUMN + 1; column += 1) {
+      x += this.getColumnWidth(this.model.getSelectedSheet(), column);
+    }
+    let y = headerRowHeight;
+    for (let row = 1; row < LAST_ROW + 1; row += 1) {
+      y += this.getRowHeight(this.model.getSelectedSheet(), row);
+    }
+    this.sheetWidth = Math.floor(
+      x + this.getColumnWidth(this.model.getSelectedSheet(), LAST_COLUMN),
+    );
+    this.sheetHeight = Math.floor(
+      y + 2 * this.getRowHeight(this.model.getSelectedSheet(), LAST_ROW),
+    );
+    return [this.sheetWidth, this.sheetHeight];
+  }
+
+  /**
+   * Returns the css clip in the canvas of an html element
+   * This is used so we do not see the outlines in the row and column headers
+   * NB: A _different_ (better!) approach would be to have separate canvases for the headers
+   * Then the sheet canvas would have it's own bounding box.
+   * That's tomorrows problem.
+   * PS: Please, do not use this function. If at all we can use the clip-path property
+   */
+  private getClipCSS(
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    includeFrozenRows: boolean,
+    includeFrozenColumns: boolean,
+  ): string {
+    if (!includeFrozenRows && !includeFrozenColumns) {
+      return "";
+    }
+    const frozenColumnsWidth = includeFrozenColumns
+      ? this.getFrozenColumnsWidth()
+      : 0;
+    const frozenRowsHeight = includeFrozenRows ? this.getFrozenRowsHeight() : 0;
+    const yMinCanvas = headerRowHeight + frozenRowsHeight;
+    const xMinCanvas = headerColumnWidth + frozenColumnsWidth;
+
+    const xMaxCanvas =
+      xMinCanvas + this.width - headerColumnWidth - frozenColumnsWidth;
+    const yMaxCanvas =
+      yMinCanvas + this.height - headerRowHeight - frozenRowsHeight;
+
+    const topClip = y < yMinCanvas ? yMinCanvas - y : 0;
+    const leftClip = x < xMinCanvas ? xMinCanvas - x : 0;
+
+    // We don't strictly need to clip on the right and bottom edges because
+    // text is hidden anyway
+    const rightClip = x + width > xMaxCanvas ? xMaxCanvas - x : width + 4;
+    const bottomClip = y + height > yMaxCanvas ? yMaxCanvas - y : height + 4;
+    return `rect(${topClip}px ${rightClip}px ${bottomClip}px ${leftClip}px)`;
+  }
+
+  private getAreaDimensions(
+    startRow: number,
+    startColumn: number,
+    endRow: number,
+    endColumn: number,
+  ): [number, number] {
+    const [xStart, yStart] = this.getCoordinatesByCell(startRow, startColumn);
+    let [xEnd, yEnd] = this.getCoordinatesByCell(endRow, endColumn);
+    xEnd += this.getColumnWidth(this.model.getSelectedSheet(), endColumn);
+    yEnd += this.getRowHeight(this.model.getSelectedSheet(), endRow);
+    const frozenRows = this.model.getFrozenRowsCount(
+      this.model.getSelectedSheet(),
+    );
+    const frozenColumns = this.model.getFrozenColumnsCount(
+      this.model.getSelectedSheet(),
+    );
+    if (frozenRows !== 0 || frozenColumns !== 0) {
+      let [xFrozenEnd, yFrozenEnd] = this.getCoordinatesByCell(
+        frozenRows,
+        frozenColumns,
+      );
+      xFrozenEnd += this.getColumnWidth(
+        this.model.getSelectedSheet(),
+        frozenColumns,
+      );
+      yFrozenEnd += this.getRowHeight(
+        this.model.getSelectedSheet(),
+        frozenRows,
+      );
+      if (startRow <= frozenRows && endRow > frozenRows) {
+        yEnd = Math.max(yEnd, yFrozenEnd);
+      }
+      if (startColumn <= frozenColumns && endColumn > frozenColumns) {
+        xEnd = Math.max(xEnd, xFrozenEnd);
+      }
+    }
+    return [Math.abs(xEnd - xStart), Math.abs(yEnd - yStart)];
+  }
+
+  /**
+   * Returns the coordinates relative to the canvas.
+   * (headerColumnWidth, headerRowHeight) being the coordinates
+   * for the top left corner of the first visible cell
+   */
+  getCoordinatesByCell(row: number, column: number): [number, number] {
+    const selectedSheet = this.model.getSelectedSheet();
+    const frozenColumns = this.model.getFrozenColumnsCount(selectedSheet);
+    const frozenColumnsWidth = this.getFrozenColumnsWidth();
+    const frozenRows = this.model.getFrozenRowsCount(selectedSheet);
+    const frozenRowsHeight = this.getFrozenRowsHeight();
+    const { topLeftCell } = this.getVisibleCells();
+    let x: number;
+    let y: number;
+    if (row <= frozenRows) {
+      // row is one of the frozen rows
+      y = headerRowHeight;
+      for (let r = 1; r < row; r += 1) {
+        y += this.getRowHeight(selectedSheet, r);
+      }
+    } else if (row >= topLeftCell.row) {
+      // row is bellow the frozen rows
+      y = headerRowHeight + frozenRowsHeight;
+      for (let r = topLeftCell.row; r < row; r += 1) {
+        y += this.getRowHeight(selectedSheet, r);
+      }
+    } else {
+      // row is _above_ the frozen rows
+      y = headerRowHeight + frozenRowsHeight;
+      for (let r = topLeftCell.row; r > row; r -= 1) {
+        y -= this.getRowHeight(selectedSheet, r - 1);
+      }
+    }
+    if (column <= frozenColumns) {
+      // It is one of the frozen columns
+      x = headerColumnWidth;
+      for (let c = 1; c < column; c += 1) {
+        x += this.getColumnWidth(selectedSheet, c);
+      }
+    } else if (column >= topLeftCell.column) {
+      // column is to the right of the frozen columns
+      x = headerColumnWidth + frozenColumnsWidth;
+      for (let c = topLeftCell.column; c < column; c += 1) {
+        x += this.getColumnWidth(selectedSheet, c);
+      }
+    } else {
+      // column is to the left of the frozen columns
+      x = headerColumnWidth + frozenColumnsWidth;
+      for (let c = topLeftCell.column; c > column; c -= 1) {
+        x -= this.getColumnWidth(selectedSheet, c - 1);
+      }
+    }
+    return [Math.floor(x), Math.floor(y)];
+  }
+
+  /**
+   * (x, y) are the relative coordinates of a cell WRT the canvas
+   * getCellByCoordinates(headerColumnWidth, headerRowHeight) will return the first visible cell.
+   * Note: If there are frozen rows/columns for some particular coordinates (x, y)
+   * there might be two cells. This method returns the visible one.
+   */
+  getCellByCoordinates(
+    x: number,
+    y: number,
+  ): { row: number; column: number } | null {
+    const frozenColumns = this.model.getFrozenColumnsCount(
+      this.model.getSelectedSheet(),
+    );
+    const frozenColumnsWidth = this.getFrozenColumnsWidth();
+    const frozenRows = this.model.getFrozenRowsCount(
+      this.model.getSelectedSheet(),
+    );
+    const frozenRowsHeight = this.getFrozenRowsHeight();
+    let column = 0;
+    let cellX = headerColumnWidth;
+    const { topLeftCell } = this.getVisibleCells();
+    if (x < headerColumnWidth) {
+      column = topLeftCell.column;
+      while (cellX >= x) {
+        column -= 1;
+        if (column < 1) {
+          column = 1;
+          break;
+        }
+        cellX -= this.getColumnWidth(this.model.getSelectedSheet(), column);
+      }
+    } else if (x < headerColumnWidth + frozenColumnsWidth) {
+      while (cellX <= x) {
+        column += 1;
+        cellX += this.getColumnWidth(this.model.getSelectedSheet(), column);
+        // This cannot happen (would mean cellX > headerColumnWidth + frozenColumnsWidth)
+        if (column > frozenColumns) {
+          /* istanbul ignore next */
+          return null;
+        }
+      }
+    } else {
+      cellX = headerColumnWidth + frozenColumnsWidth;
+      column = topLeftCell.column - 1;
+      while (cellX <= x) {
+        column += 1;
+        if (column > LAST_COLUMN) {
+          return null;
+        }
+        cellX += this.getColumnWidth(this.model.getSelectedSheet(), column);
+      }
+    }
+    let cellY = headerRowHeight;
+    let row = 0;
+    if (y < headerRowHeight) {
+      row = topLeftCell.row;
+      while (cellY >= y) {
+        row -= 1;
+        if (row < 1) {
+          row = 1;
+          break;
+        }
+        cellY -= this.getRowHeight(this.model.getSelectedSheet(), row);
+      }
+    } else if (y < headerRowHeight + frozenRowsHeight) {
+      while (cellY <= y) {
+        row += 1;
+        cellY += this.getRowHeight(this.model.getSelectedSheet(), row);
+        // This cannot happen (would mean cellY > headerRowHeight + frozenRowsHeight)
+        if (row > frozenRows) {
+          /* istanbul ignore next */
+          return null;
+        }
+      }
+    } else {
+      cellY = headerRowHeight + frozenRowsHeight;
+      row = topLeftCell.row - 1;
+      while (cellY <= y) {
+        row += 1;
+        if (row > LAST_ROW) {
+          row = LAST_ROW;
+          break;
+        }
+        cellY += this.getRowHeight(this.model.getSelectedSheet(), row);
+      }
+    }
+    if (row < 1) row = 1;
+    if (column < 1) column = 1;
+    return { row, column };
+  }
+
+  private drawExtendToArea(): void {
+    const { extendToOutline } = this;
+    const extendToArea = this.workbookState.getExtendToArea();
+    if (extendToArea === null) {
+      extendToOutline.style.visibility = "hidden";
+      return;
+    }
+    extendToOutline.style.visibility = "visible";
+
+    let { rowStart, rowEnd, columnStart, columnEnd } = extendToArea;
+    if (rowStart > rowEnd) {
+      [rowStart, rowEnd] = [rowEnd, rowStart];
+    }
+    if (columnStart > columnEnd) {
+      [columnStart, columnEnd] = [columnEnd, columnStart];
+    }
+
+    const [areaX, areaY] = this.getCoordinatesByCell(rowStart, columnStart);
+    const [areaWidth, areaHeight] = this.getAreaDimensions(
+      rowStart,
+      columnStart,
+      rowEnd,
+      columnEnd,
+    );
+    // const { border } = extendToArea;
+    extendToOutline.style.border = `1px dashed ${outlineColor}`;
+    extendToOutline.style.borderRadius = "3px";
+    // switch (border) {
+    //   case 'left': {
+    //     extendToOutline.style.borderLeft = 'none';
+    //     extendToOutline.style.borderTopLeftRadius = '0px';
+    //     extendToOutline.style.borderBottomLeftRadius = '0px';
+
+    //     break;
+    //   }
+    //   case 'right': {
+    //     extendToOutline.style.borderRight = 'none';
+    //     extendToOutline.style.borderTopRightRadius = '0px';
+    //     extendToOutline.style.borderBottomRightRadius = '0px';
+
+    //     break;
+    //   }
+    //   case 'top': {
+    //     extendToOutline.style.borderTop = 'none';
+    //     extendToOutline.style.borderTopRightRadius = '0px';
+    //     extendToOutline.style.borderTopLeftRadius = '0px';
+
+    //     break;
+    //   }
+    //   case 'bottom': {
+    //     extendToOutline.style.borderBottom = 'none';
+    //     extendToOutline.style.borderBottomRightRadius = '0px';
+    //     extendToOutline.style.borderBottomLeftRadius = '0px';
+
+    //     break;
+    //   }
+    //   default:
+    //     break;
+    // }
+    const padding = 1;
+    extendToOutline.style.left = `${areaX - padding}px`;
+    extendToOutline.style.top = `${areaY - padding}px`;
+    extendToOutline.style.width = `${areaWidth + 2 * padding}px`;
+    extendToOutline.style.height = `${areaHeight + 2 * padding}px`;
+  }
+
+  private getColumnWidth(sheet: number, column: number): number {
+    return Math.round(this.model.getColumnWidth(sheet, column));
+  }
+
+  private getRowHeight(sheet: number, row: number): number {
+    return Math.round(this.model.getRowHeight(sheet, row));
+  }
+
+  private drawCellOutline(): void {
+    const [selectedSheet, selectedRow, selectedColumn] =
+      this.model.getSelectedCell();
+    const { topLeftCell } = this.getVisibleCells();
+    const frozenRows = this.model.getFrozenRowsCount(selectedSheet);
+    const frozenColumns = this.model.getFrozenColumnsCount(selectedSheet);
+    const [x, y] = this.getCoordinatesByCell(selectedRow, selectedColumn);
+    const style = this.model.getCellStyle(
+      selectedSheet,
+      selectedRow,
+      selectedColumn,
+    );
+    const padding = -1;
+    const width =
+      this.getColumnWidth(selectedSheet, selectedColumn) + 2 * padding;
+    const height = this.getRowHeight(selectedSheet, selectedRow) + 2 * padding;
+
+    const { cellOutline, areaOutline, cellOutlineHandle } = this;
+    const cellEditing = null;
+
+    cellOutline.style.visibility = "visible";
+    cellOutlineHandle.style.visibility = "visible";
+    if (
+      (selectedRow < topLeftCell.row && selectedRow > frozenRows) ||
+      (selectedColumn < topLeftCell.column && selectedColumn > frozenColumns)
+    ) {
+      cellOutline.style.visibility = "hidden";
+      cellOutlineHandle.style.visibility = "hidden";
+    }
+
+    // Position the cell outline and clip it
+    cellOutline.style.left = `${x - padding}px`;
+    cellOutline.style.top = `${y - padding}px`;
+    // Reset CSS properties
+    cellOutline.style.minWidth = "";
+    cellOutline.style.minHeight = "";
+    cellOutline.style.maxWidth = "";
+    cellOutline.style.maxHeight = "";
+    cellOutline.style.overflow = "hidden";
+    // New properties
+    cellOutline.style.width = `${width}px`;
+    cellOutline.style.height = `${height}px`;
+    if (cellEditing) {
+      cellOutline.style.fontWeight = style.font.b ? "bold" : "normal";
+      cellOutline.style.fontStyle = style.font.i ? "italic" : "normal";
+      // cellOutline.style.backgroundColor = style.fill.fg_color;
+      // TODO: Should we add the same color as the text?
+      // Only if it is not a formula?
+      // cellOutline.style.color = style.font.color;
+    } else {
+      cellOutline.style.background = "none";
+    }
+    // border is 2px so line-height must be height - 4
+    cellOutline.style.lineHeight = `${height - 4}px`;
+    let {
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = this.model.getSelectedView();
+    if (rowStart > rowEnd) {
+      [rowStart, rowEnd] = [rowEnd, rowStart];
+    }
+    if (columnStart > columnEnd) {
+      [columnStart, columnEnd] = [columnEnd, columnStart];
+    }
+    let handleX: number;
+    let handleY: number;
+    // Position the selected area outline
+    if (columnStart === columnEnd && rowStart === rowEnd) {
+      areaOutline.style.visibility = "hidden";
+      [handleX, handleY] = this.getCoordinatesByCell(rowStart, columnStart);
+      handleX += this.getColumnWidth(selectedSheet, columnStart);
+      handleY += this.getRowHeight(selectedSheet, rowStart);
+    } else {
+      areaOutline.style.visibility = "visible";
+      cellOutlineHandle.style.visibility = "visible";
+      const [areaX, areaY] = this.getCoordinatesByCell(rowStart, columnStart);
+      const [areaWidth, areaHeight] = this.getAreaDimensions(
+        rowStart,
+        columnStart,
+        rowEnd,
+        columnEnd,
+      );
+      handleX = areaX + areaWidth;
+      handleY = areaY + areaHeight;
+      areaOutline.style.left = `${areaX - padding}px`;
+      areaOutline.style.top = `${areaY - padding}px`;
+      areaOutline.style.width = `${areaWidth + 2 * padding}px`;
+      areaOutline.style.height = `${areaHeight + 2 * padding}px`;
+      const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows;
+      const clipTop =
+        columnStart < topLeftCell.column && columnStart > frozenColumns;
+      areaOutline.style.clip = this.getClipCSS(
+        areaX,
+        areaY,
+        areaWidth + 2 * padding,
+        areaHeight + 2 * padding,
+        clipLeft,
+        clipTop,
+      );
+      areaOutline.style.border = `1px solid ${outlineColor}`;
+      // hide the handle if it is out of the visible area
+      if (
+        (rowEnd > frozenRows && rowEnd < topLeftCell.row - 1) ||
+        (columnEnd > frozenColumns && columnEnd < topLeftCell.column - 1)
+      ) {
+        cellOutlineHandle.style.visibility = "hidden";
+      }
+
+      // This is in case the selection starts in the frozen area and ends outside of the frozen area
+      // but we have scrolled out the selection.
+      if (
+        rowStart <= frozenRows &&
+        rowEnd > frozenRows &&
+        rowEnd < topLeftCell.row - 1
+      ) {
+        areaOutline.style.borderBottom = "None";
+        cellOutlineHandle.style.visibility = "hidden";
+      }
+      if (
+        columnStart <= frozenColumns &&
+        columnEnd > frozenColumns &&
+        columnEnd < topLeftCell.column - 1
+      ) {
+        areaOutline.style.borderRight = "None";
+        cellOutlineHandle.style.visibility = "hidden";
+      }
+    }
+
+    // draw the handle
+    if (cellEditing !== null) {
+      cellOutlineHandle.style.visibility = "hidden";
+      return;
+    }
+    const handleBBox = cellOutlineHandle.getBoundingClientRect();
+    const handleWidth = handleBBox.width;
+    const handleHeight = handleBBox.height;
+    cellOutlineHandle.style.left = `${handleX - handleWidth / 2}px`;
+    cellOutlineHandle.style.top = `${handleY - handleHeight / 2}px`;
+  }
+
+  renderSheet(): void {
+    console.time("renderSheet");
+    this._renderSheet();
+    console.timeEnd("renderSheet");
+  }
+
+  private _renderSheet(): void {
+    const context = this.ctx;
+    const { canvas } = this;
+    const selectedSheet = this.model.getSelectedSheet();
+    context.lineWidth = 1;
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+
+    // Clear the canvas
+    context.clearRect(0, 0, canvas.width, canvas.height);
+
+    this.removeHandles();
+
+    const { topLeftCell, bottomRightCell } = this.getVisibleCells();
+
+    const frozenColumns = this.model.getFrozenColumnsCount(selectedSheet);
+    const frozenRows = this.model.getFrozenRowsCount(selectedSheet);
+
+    // Draw frozen rows and columns (top-left-pane)
+    let x = headerColumnWidth + 0.5;
+    let y = headerRowHeight + 0.5;
+    for (let row = 1; row <= frozenRows; row += 1) {
+      const rowHeight = this.getRowHeight(selectedSheet, row);
+      x = headerColumnWidth;
+      for (let column = 1; column <= frozenColumns; column += 1) {
+        const columnWidth = this.getColumnWidth(selectedSheet, column);
+        this.renderCell(row, column, x, y, columnWidth, rowHeight);
+        x += columnWidth;
+      }
+      y += rowHeight;
+    }
+    if (frozenRows === 0 && frozenColumns !== 0) {
+      x = headerColumnWidth;
+      for (let column = 1; column <= frozenColumns; column += 1) {
+        x += this.getColumnWidth(selectedSheet, column);
+      }
+    }
+
+    const frozenOffset = frozenSeparatorWidth / 2;
+    // If there are frozen rows draw a separator
+    if (frozenRows) {
+      context.beginPath();
+      context.lineWidth = frozenSeparatorWidth;
+      context.strokeStyle = gridSeparatorColor;
+      context.moveTo(0, y + frozenOffset);
+      context.lineTo(this.width, y + frozenOffset);
+      y += frozenSeparatorWidth;
+      context.stroke();
+      context.lineWidth = 1;
+    }
+
+    // If there are frozen columns draw a separator
+    if (frozenColumns) {
+      context.beginPath();
+      context.lineWidth = frozenSeparatorWidth;
+      context.strokeStyle = gridSeparatorColor;
+      context.moveTo(x + frozenOffset, 0);
+      context.lineTo(x + frozenOffset, this.height);
+      x += frozenSeparatorWidth;
+      context.stroke();
+      context.lineWidth = 1;
+    }
+
+    const frozenX = x;
+    const frozenY = y;
+    // Draw frozen rows (top-right pane)
+    y = headerRowHeight;
+    for (let row = 1; row <= frozenRows; row += 1) {
+      x = frozenX;
+      const rowHeight = this.getRowHeight(selectedSheet, row);
+      for (
+        let { column } = topLeftCell;
+        column <= bottomRightCell.column;
+        column += 1
+      ) {
+        const columnWidth = this.getColumnWidth(selectedSheet, column);
+        this.renderCell(row, column, x, y, columnWidth, rowHeight);
+        x += columnWidth;
+      }
+      y += rowHeight;
+    }
+
+    // Draw frozen columns (bottom-left pane)
+    y = frozenY;
+    for (let { row } = topLeftCell; row <= bottomRightCell.row; row += 1) {
+      x = headerColumnWidth;
+      const rowHeight = this.getRowHeight(selectedSheet, row);
+
+      for (let column = 1; column <= frozenColumns; column += 1) {
+        const columnWidth = this.getColumnWidth(selectedSheet, column);
+        this.renderCell(row, column, x, y, columnWidth, rowHeight);
+
+        x += columnWidth;
+      }
+      y += rowHeight;
+    }
+
+    // Render all remaining cells (bottom-right pane)
+    y = frozenY;
+    for (let { row } = topLeftCell; row <= bottomRightCell.row; row += 1) {
+      x = frozenX;
+      const rowHeight = this.getRowHeight(selectedSheet, row);
+
+      for (
+        let { column } = topLeftCell;
+        column <= bottomRightCell.column;
+        column += 1
+      ) {
+        const columnWidth = this.getColumnWidth(selectedSheet, column);
+        this.renderCell(row, column, x, y, columnWidth, rowHeight);
+
+        x += columnWidth;
+      }
+      y += rowHeight;
+    }
+
+    // Draw column headers
+    this.renderColumnHeaders(
+      frozenColumns,
+      topLeftCell.column,
+      bottomRightCell.column,
+    );
+
+    // Draw row headers
+    this.renderRowHeaders(frozenRows, topLeftCell, bottomRightCell);
+
+    // square in the top left corner
+    context.fillStyle = headerBorderColor;
+    context.fillRect(0, 0, headerColumnWidth, headerRowHeight);
+
+    this.drawCellOutline();
+    this.drawExtendToArea();
+  }
+}
diff --git a/webapp/src/components/borderPicker.tsx b/webapp/src/components/borderPicker.tsx
new file mode 100644
index 0000000..521ae57
--- /dev/null
+++ b/webapp/src/components/borderPicker.tsx
@@ -0,0 +1,538 @@
+import { type BorderOptions, BorderStyle, BorderType } from "@ironcalc/wasm";
+import Popover, { type PopoverOrigin } from "@mui/material/Popover";
+import { styled } from "@mui/material/styles";
+import {
+  Grid2X2 as BorderAllIcon,
+  ChevronRight,
+  PencilLine,
+} from "lucide-react";
+import type React from "react";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  BorderBottomIcon,
+  BorderCenterHIcon,
+  BorderCenterVIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderNoneIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderStyleIcon,
+  BorderTopIcon,
+} from "../icons";
+import { theme } from "../theme";
+import ColorPicker from "./colorPicker";
+
+type BorderPickerProps = {
+  className?: string;
+  onChange: (border: BorderOptions) => void;
+  anchorEl: React.RefObject<HTMLElement>;
+  anchorOrigin?: PopoverOrigin;
+  transformOrigin?: PopoverOrigin;
+  open: boolean;
+};
+
+const BorderPicker = (properties: BorderPickerProps) => {
+  const { t } = useTranslation();
+
+  const [borderSelected, setBorderSelected] = useState(BorderType.None);
+  const [borderColor, setBorderColor] = useState("#000000");
+  const [borderStyle, setBorderStyle] = useState(BorderStyle.Thin);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const [stylePickerOpen, setStylePickerOpen] = useState(false);
+  const closePicker = (): void => {
+    properties.onChange({
+      color: borderColor,
+      style: borderStyle,
+      border: borderSelected,
+    });
+  };
+  const borderColorButton = useRef(null);
+  const borderStyleButton = useRef(null);
+  return (
+    <>
+      <StyledPopover
+        open={properties.open}
+        onClose={(): void => closePicker()}
+        anchorEl={properties.anchorEl.current}
+        anchorOrigin={
+          properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
+        }
+        transformOrigin={
+          properties.transformOrigin || { vertical: "top", horizontal: "left" }
+        }
+      >
+        <BorderPickerDialog>
+          <Borders>
+            <Line>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.All}
+                onClick={() => {
+                  if (borderSelected === BorderType.All) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.All);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderAllIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Inner}
+                onClick={() => {
+                  if (borderSelected === BorderType.Inner) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Inner);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderInnerIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.CenterH}
+                onClick={() => {
+                  if (borderSelected === BorderType.CenterH) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.CenterH);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderCenterHIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.CenterV}
+                onClick={() => {
+                  if (borderSelected === BorderType.CenterV) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.CenterV);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderCenterVIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Outer}
+                onClick={() => {
+                  if (borderSelected === BorderType.Outer) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Outer);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderOuterIcon />
+              </Button>
+            </Line>
+            <Line>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.None}
+                onClick={() => {
+                  if (borderSelected === BorderType.None) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.None);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderNoneIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Top}
+                onClick={() => {
+                  if (borderSelected === BorderType.Top) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Top);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderTopIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Right}
+                onClick={() => {
+                  if (borderSelected === BorderType.Right) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Right);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderRightIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Bottom}
+                onClick={() => {
+                  if (borderSelected === BorderType.Bottom) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Bottom);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderBottomIcon />
+              </Button>
+              <Button
+                type="button"
+                $pressed={borderSelected === BorderType.Left}
+                onClick={() => {
+                  if (borderSelected === BorderType.Left) {
+                    setBorderSelected(BorderType.None);
+                  } else {
+                    setBorderSelected(BorderType.Left);
+                  }
+                }}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderLeftIcon />
+              </Button>
+            </Line>
+          </Borders>
+          <Divider />
+          <Styles>
+            <ButtonWrapper onClick={() => setColorPickerOpen(true)}>
+              <Button
+                type="button"
+                $pressed={false}
+                disabled={false}
+                ref={borderColorButton}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <PencilLine />
+              </Button>
+              <div style={{ flexGrow: 2 }}>Border color</div>
+              <ChevronRightStyled />
+            </ButtonWrapper>
+            <ButtonWrapper
+              onClick={() => setStylePickerOpen(true)}
+              ref={borderStyleButton}
+            >
+              <Button
+                type="button"
+                $pressed={false}
+                disabled={false}
+                title={t("workbook.toolbar.borders_button_title")}
+              >
+                <BorderStyleIcon />
+              </Button>
+              <div style={{ flexGrow: 2 }}>Border style</div>
+              <ChevronRightStyled />
+            </ButtonWrapper>
+          </Styles>
+        </BorderPickerDialog>
+        <ColorPicker
+          color={borderColor}
+          onChange={(color): void => {
+            setBorderColor(color);
+            setColorPickerOpen(false);
+          }}
+          onClose={() => {
+            setColorPickerOpen(false);
+          }}
+          anchorEl={borderColorButton}
+          open={colorPickerOpen}
+        />
+        <StyledPopover
+          open={stylePickerOpen}
+          onClose={(): void => {
+            setStylePickerOpen(false);
+          }}
+          anchorEl={borderStyleButton.current}
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+          transformOrigin={{ vertical: 38, horizontal: -6 }}
+        >
+          <BorderStyleDialog>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.None}
+            >
+              <BorderDescription>None</BorderDescription>
+              <NoneLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Thin);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Thin}
+            >
+              <BorderDescription>Thin</BorderDescription>
+              <SolidLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Medium);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Medium}
+            >
+              <BorderDescription>Medium</BorderDescription>
+              <MediumLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Thick);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Thick}
+            >
+              <BorderDescription>Thick</BorderDescription>
+              <ThickLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dotted);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Dotted}
+            >
+              <BorderDescription>Dotted</BorderDescription>
+              <DottedLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Dashed}
+            >
+              <BorderDescription>Dashed</BorderDescription>
+              <DashedLine />
+            </LineWrapper>
+            <LineWrapper
+              onClick={() => {
+                setBorderStyle(BorderStyle.Dashed);
+                setStylePickerOpen(false);
+              }}
+              $checked={borderStyle === BorderStyle.Double}
+            >
+              <BorderDescription>Double</BorderDescription>
+              <DoubleLine />
+            </LineWrapper>
+          </BorderStyleDialog>
+        </StyledPopover>
+      </StyledPopover>
+    </>
+  );
+};
+
+type LineWrapperProperties = { $checked: boolean };
+const LineWrapper = styled("div")<LineWrapperProperties>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${({ $checked }): string => {
+    if ($checked) {
+      return "#EEEEEE;";
+    }
+    return "inherit;";
+  }};
+  &:hover {
+    border: 1px solid #eeeeee;
+  }
+  padding: 8px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid white;
+`;
+
+const CheckIconWrapper = styled("div")`
+  width: 12px;
+`;
+
+type CheckIconProperties = { $checked: boolean };
+const CheckIcon = styled("div")<CheckIconProperties>`
+  width: 2px;
+  background-color: #eee;
+  height: 28px;
+  visibility: ${({ $checked }): string => {
+    if ($checked) {
+      return "visible";
+    }
+    return "hidden";
+  }};
+`;
+const NoneLine = styled("div")`
+  width: 68px;
+  border-top: 1px solid #e0e0e0;
+`;
+const SolidLine = styled("div")`
+  width: 68px;
+  border-top: 1px solid #333333;
+`;
+const MediumLine = styled("div")`
+  width: 68px;
+  border-top: 2px solid #333333;
+`;
+const ThickLine = styled("div")`
+  width: 68px;
+  border-top: 3px solid #333333;
+`;
+const DashedLine = styled("div")`
+  width: 68px;
+  border-top: 1px dashed #333333;
+`;
+const DottedLine = styled("div")`
+  width: 68px;
+  border-top: 1px dotted #333333;
+`;
+const DoubleLine = styled("div")`
+  width: 68px;
+  border-top: 3px double #333333;
+`;
+
+const Divider = styled("div")`
+  display: inline-flex;
+  heigh: 1px;
+  border-bottom: 1px solid #eee;
+  margin-left: 0px;
+  margin-right: 0px;
+`;
+
+const Borders = styled("div")`
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 4px;
+`;
+
+const Styles = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Line = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+const ButtonWrapper = styled("div")`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &:hover {
+    background-color: #eee;
+    border-top-color: ${(): string => theme.palette.grey["400"]};
+  }
+  cursor: pointer;
+  padding: 8px;
+`;
+
+const BorderStyleDialog = styled("div")`
+  background: ${({ theme }): string => theme.palette.background.default};
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const StyledPopover = styled(Popover)`
+  .MuiPopover-paper {
+    border-radius: 10px;
+    border: 0px solid ${({ theme }): string => theme.palette.background.default};
+    box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
+  }
+  .MuiPopover-padding {
+    padding: 0px;
+  }
+  .MuiList-padding {
+    padding: 0px;
+  }
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 13px;
+`;
+
+const BorderPickerDialog = styled("div")`
+  background: ${({ theme }): string => theme.palette.background.default};
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const BorderDescription = styled("div")`
+  width: 70px;
+`;
+
+type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+const Button = styled("button")<TypeButtonProperties>(
+  ({ disabled, $pressed, $underlinedColor }) => {
+    const result = {
+      width: "24px",
+      height: "24px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      // fontSize: "26px",
+      border: "0px solid #fff",
+      borderRadius: "2px",
+      marginRight: "5px",
+      transition: "all 0.2s",
+      cursor: "pointer",
+      padding: "0px",
+    };
+    if (disabled) {
+      return {
+        ...result,
+        color: theme.palette.grey["600"],
+        cursor: "default",
+      };
+    }
+    return {
+      ...result,
+      borderTop: $underlinedColor ? "3px solid #FFF" : "none",
+      borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
+      color: "#21243A",
+      backgroundColor: $pressed ? theme.palette.grey["600"] : "inherit",
+      "&:hover": {
+        backgroundColor: "#F1F2F8",
+        borderTopColor: "#F1F2F8",
+      },
+      svg: {
+        width: "16px",
+        height: "16px",
+      },
+    };
+  },
+);
+
+const ChevronRightStyled = styled(ChevronRight)`
+  width: 16px;
+  height: 16px;
+`;
+
+export default BorderPicker;
diff --git a/webapp/src/components/colorPicker.tsx b/webapp/src/components/colorPicker.tsx
new file mode 100644
index 0000000..dfdb007
--- /dev/null
+++ b/webapp/src/components/colorPicker.tsx
@@ -0,0 +1,271 @@
+import styled from "@emotion/styled";
+import Popover, { type PopoverOrigin } from "@mui/material/Popover";
+import type React from "react";
+import { useEffect, useRef, useState } from "react";
+import { HexColorInput, HexColorPicker } from "react-colorful";
+import { theme } from "../theme";
+
+type ColorPickerProps = {
+  className?: string;
+  color: string;
+  onChange: (color: string) => void;
+  onClose: () => void;
+  anchorEl: React.RefObject<HTMLElement>;
+  anchorOrigin?: PopoverOrigin;
+  transformOrigin?: PopoverOrigin;
+  open: boolean;
+};
+
+const colorPickerWidth = 240;
+const colorfulHeight = 185; // 150 + 15 + 20
+
+const ColorPicker = (properties: ColorPickerProps) => {
+  const [color, setColor] = useState<string>(properties.color);
+  const recentColors = useRef<string[]>([]);
+
+  const closePicker = (newColor: string): void => {
+    const maxRecentColors = 14;
+    properties.onChange(newColor);
+    const colors = recentColors.current.filter((c) => c !== newColor);
+    recentColors.current = [newColor, ...colors].slice(0, maxRecentColors);
+  };
+
+  const handleClose = (): void => {
+    properties.onClose();
+  };
+
+  useEffect(() => {
+    setColor(properties.color);
+  }, [properties.color]);
+
+  const presetColors = [
+    "#FFFFFF",
+    "#1B717E",
+    "#59B9BC",
+    "#3BB68A",
+    "#8CB354",
+    "#F8CD3C",
+    "#EC5753",
+    "#A23C52",
+    "#D03627",
+    "#523E93",
+    "#3358B7",
+  ];
+
+  return (
+    <Popover
+      open={properties.open}
+      onClose={handleClose}
+      anchorEl={properties.anchorEl.current}
+      anchorOrigin={
+        properties.anchorOrigin || { vertical: "bottom", horizontal: "left" }
+      }
+      transformOrigin={
+        properties.transformOrigin || { vertical: "top", horizontal: "left" }
+      }
+    >
+      <ColorPickerDialog>
+        <HexColorPicker
+          color={color}
+          onChange={(newColor): void => {
+            setColor(newColor);
+          }}
+        />
+        <ColorPickerInput>
+          <HexWrapper>
+            <HexLabel>{"Hex"}</HexLabel>
+            <HexColorInputBox>
+              <HashLabel>{"#"}</HashLabel>
+              <HexColorInput
+                color={color}
+                onChange={(newColor): void => {
+                  setColor(newColor);
+                }}
+              />
+            </HexColorInputBox>
+          </HexWrapper>
+          <Swatch
+            $color={color}
+            onClick={(): void => {
+              closePicker(color);
+            }}
+          />
+        </ColorPickerInput>
+        <HorizontalDivider />
+        <ColorList>
+          {presetColors.map((presetColor) => (
+            <Button
+              key={presetColor}
+              $color={presetColor}
+              onClick={(): void => {
+                closePicker(presetColor);
+              }}
+            />
+          ))}
+        </ColorList>
+        <HorizontalDivider />
+        <RecentLabel>{"Recent"}</RecentLabel>
+        <ColorList>
+          {recentColors.current.map((recentColor) => (
+            <Button
+              key={recentColor}
+              $color={recentColor}
+              onClick={(): void => {
+                closePicker(recentColor);
+              }}
+            />
+          ))}
+        </ColorList>
+      </ColorPickerDialog>
+    </Popover>
+  );
+};
+
+const RecentLabel = styled.div`
+  font-size: 12px;
+  color: ${theme.palette.text.secondary};
+`;
+
+const ColorList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+`;
+
+const Button = styled.button<{ $color: string }>`
+  width: 20px;
+  height: 20px;
+  ${({ $color }): string => {
+    if ($color.toUpperCase() === "#FFFFFF") {
+      return `border: 1px solid ${theme.palette.grey["600"]};`;
+    }
+    return `border: 1px solid ${$color};`;
+  }}
+  background-color: ${({ $color }): string => {
+    return $color;
+  }};
+  box-sizing: border-box;
+  margin-top: 10px;
+  margin-right: 10px;
+  border-radius: 2px;
+`;
+
+const HorizontalDivider = styled.div`
+  height: 0px;
+  width: 100%;
+  border-top: 1px solid ${theme.palette.grey["400"]};
+  margin-top: 15px;
+  margin-bottom: 5px;
+`;
+
+// const StyledPopover = styled(Popover)`
+//   .MuiPopover-paper {
+//     border-radius: 10px;
+//     border: 0px solid ${theme.palette.background.default};
+//     box-shadow: 1px 2px 8px rgba(139, 143, 173, 0.5);
+//   }
+//   .MuiPopover-padding {
+//     padding: 0px;
+//   }
+//   .MuiList-padding {
+//     padding: 0px;
+//   }
+// `;
+
+const ColorPickerDialog = styled.div`
+  background: ${theme.palette.background.default};
+  width: ${colorPickerWidth}px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+
+  & .react-colorful {
+    height: ${colorfulHeight}px;
+    width: ${colorPickerWidth}px;
+  }
+  & .react-colorful__saturation {
+    border-bottom: none;
+    border-radius: 5px;
+  }
+  & .react-colorful__hue {
+    height: 20px;
+    margin-top: 15px;
+    border-radius: 5px;
+  }
+  & .react-colorful__saturation-pointer {
+    width: 14px;
+    height: 14px;
+  }
+  & .react-colorful__hue-pointer {
+    width: 7px;
+    border-radius: 3px;
+  }
+`;
+
+const HashLabel = styled.div`
+  margin: auto 0px auto 10px;
+  font-size: 13px;
+  color: #7d8ec2;
+  font-family: ${theme.typography.button.fontFamily};
+`;
+
+const HexLabel = styled.div`
+  margin: auto 10px auto 0px;
+  font-size: 12px;
+  display: inline-flex;
+  font-family: ${theme.typography.button.fontFamily};
+`;
+
+const HexColorInputBox = styled.div`
+  display: inline-flex;
+  flex-grow: 1;
+  margin-right: 10px;
+  width: 140px;
+  height: 28px;
+  border: 1px solid ${theme.palette.grey["600"]};
+  border-radius: 5px;
+`;
+
+const HexWrapper = styled.div`
+  display: flex;
+  flex-grow: 1;
+  & input {
+    min-width: 0px;
+    border: 0px;
+    background: ${theme.palette.background.default};
+    outline: none;
+    font-family: ${theme.typography.button.fontFamily};
+    font-size: 12px;
+    text-transform: uppercase;
+    text-align: right;
+    padding-right: 10px;
+    border-radius: 5px;
+  }
+
+  & input:focus {
+    border-color: #4298ef;
+  }
+`;
+
+const Swatch = styled.div<{ $color: string }>`
+  display: inline-flex;
+  ${({ $color }): string => {
+    if ($color.toUpperCase() === "#FFFFFF") {
+      return `border: 1px solid ${theme.palette.grey["600"]};`;
+    }
+    return `border: 1px solid ${$color};`;
+  }}
+  background-color: ${({ $color }): string => $color};
+  width: 28px;
+  height: 28px;
+  border-radius: 5px;
+`;
+
+const ColorPickerInput = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 15px;
+`;
+
+export default ColorPicker;
diff --git a/webapp/src/components/formatMenu.tsx b/webapp/src/components/formatMenu.tsx
new file mode 100644
index 0000000..38a001e
--- /dev/null
+++ b/webapp/src/components/formatMenu.tsx
@@ -0,0 +1,136 @@
+import { Menu, MenuItem, styled } from "@mui/material";
+import { type ComponentProps, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import FormatPicker from "./formatPicker";
+import { NumberFormats } from "./formatUtil";
+
+type FormatMenuProps = {
+  children: React.ReactNode;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+  onExited?: () => void;
+  anchorOrigin?: ComponentProps<typeof Menu>["anchorOrigin"];
+};
+
+const FormatMenu = (properties: FormatMenuProps) => {
+  const { t } = useTranslation();
+  const { onChange } = properties;
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isPickerOpen, setPickerOpen] = useState(false);
+  const anchorElement = useRef<HTMLDivElement>(null);
+
+  return (
+    <>
+      <ChildrenWrapper
+        onClick={(): void => setMenuOpen(true)}
+        ref={anchorElement}
+      >
+        {properties.children}
+      </ChildrenWrapper>
+      <Menu
+        open={isMenuOpen}
+        onClose={(): void => setMenuOpen(false)}
+        anchorEl={anchorElement.current}
+        anchorOrigin={properties.anchorOrigin}
+      >
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.AUTO)}>
+          <MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
+        </MenuItemWrapper>
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => onChange(NumberFormats.NUMBER)}>
+          <MenuItemText>{t("toolbar.format_menu.number")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.number_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.PERCENTAGE)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.percentage")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.percentage_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.CURRENCY_EUR)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.currency_eur")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.currency_eur_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.CURRENCY_USD)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.currency_usd")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.currency_usd_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.CURRENCY_GBP)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.currency_gbp")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.currency_gbp_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.DATE_SHORT)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.date_short")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.date_short_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={(): void => onChange(NumberFormats.DATE_LONG)}
+        >
+          <MenuItemText>{t("toolbar.format_menu.date_long")}</MenuItemText>
+          <MenuItemExample>
+            {t("toolbar.format_menu.date_long_example")}
+          </MenuItemExample>
+        </MenuItemWrapper>
+
+        <MenuDivider />
+        <MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
+          <MenuItemText>{t("toolbar.format_menu.custom")}</MenuItemText>
+        </MenuItemWrapper>
+      </Menu>
+      <FormatPicker
+        numFmt={properties.numFmt}
+        onChange={properties.onChange}
+        open={isPickerOpen}
+        onClose={(): void => setPickerOpen(false)}
+        onExited={properties.onExited}
+      />
+    </>
+  );
+};
+
+const MenuItemWrapper = styled(MenuItem)`
+  display: flex;
+  justify-content: space-between;
+  font-size: 14px;
+  width: 100%;
+`;
+
+const ChildrenWrapper = styled("div")`
+  display: flex;
+`;
+
+const MenuDivider = styled("div")``;
+
+const MenuItemText = styled("div")`
+  color: #000;
+`;
+
+const MenuItemExample = styled("div")`
+  margin-left: 20px;
+`;
+
+export default FormatMenu;
diff --git a/webapp/src/components/formatPicker.tsx b/webapp/src/components/formatPicker.tsx
new file mode 100644
index 0000000..1cde552
--- /dev/null
+++ b/webapp/src/components/formatPicker.tsx
@@ -0,0 +1,49 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+type FormatPickerProps = {
+  className?: string;
+  open: boolean;
+  onClose: () => void;
+  onExited?: () => void;
+  numFmt: string;
+  onChange: (numberFmt: string) => void;
+};
+
+const FormatPicker = (properties: FormatPickerProps) => {
+  const { t } = useTranslation();
+  const [formatCode, setFormatCode] = useState(properties.numFmt);
+
+  const onSubmit = (format_code: string): void => {
+    properties.onChange(format_code);
+    properties.onClose();
+  };
+  return (
+    <Dialog open={properties.open} onClose={properties.onClose}>
+      <DialogTitle>{t("num_fmt.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={properties.numFmt}
+          label={t("num_fmt.label")}
+          name="format_code"
+          onChange={(event) => setFormatCode(event.target.value)}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={() => onSubmit(formatCode)}>
+          {t("num_fmt.save")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default FormatPicker;
diff --git a/webapp/src/components/formatUtil.ts b/webapp/src/components/formatUtil.ts
new file mode 100644
index 0000000..c865401
--- /dev/null
+++ b/webapp/src/components/formatUtil.ts
@@ -0,0 +1,36 @@
+export function increaseDecimalPlaces(numberFormat: string): string {
+  // FIXME: Should it be done in the Rust? How should it work?
+  // Increase decimal places for existing numbers with decimals
+  const newNumberFormat = numberFormat.replace(/\.0/g, ".00");
+  // If no decimal places declared, add 0.0
+  if (!newNumberFormat.includes(".")) {
+    if (newNumberFormat.includes("0")) {
+      return newNumberFormat.replace(/0/g, "0.0");
+    }
+    if (newNumberFormat.includes("#")) {
+      return newNumberFormat.replace(/#([^#,]|$)/g, "0.0$1");
+    }
+    return "0.0";
+  }
+  return newNumberFormat;
+}
+
+export function decreaseDecimalPlaces(numberFormat: string): string {
+  // FIXME: Should it be done in the Rust? How should it work?
+  // Decrease decimal places for existing numbers with decimals
+  let newNumberFormat = numberFormat.replace(/\.0/g, ".");
+  // Fix leftover dots
+  newNumberFormat = newNumberFormat.replace(/0\.([^0]|$)/, "0$1");
+  return newNumberFormat;
+}
+
+export enum NumberFormats {
+  AUTO = "general",
+  CURRENCY_EUR = '"€"#,##0.00',
+  CURRENCY_USD = '"$"#,##0.00',
+  CURRENCY_GBP = '"£"#,##0.00',
+  DATE_SHORT = 'dd"/"mm"/"yyyy',
+  DATE_LONG = 'dddd"," mmmm dd"," yyyy',
+  PERCENTAGE = "0.00%",
+  NUMBER = "#,##0.00",
+}
diff --git a/webapp/src/components/formulaDialog.tsx b/webapp/src/components/formulaDialog.tsx
new file mode 100644
index 0000000..803901a
--- /dev/null
+++ b/webapp/src/components/formulaDialog.tsx
@@ -0,0 +1,50 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface FormulaDialogProps {
+  isOpen: boolean;
+  close: () => void;
+  onFormulaChanged: (name: string) => void;
+  defaultFormula: string;
+}
+
+export const FormulaDialog = (properties: FormulaDialogProps) => {
+  const { t } = useTranslation();
+  const [formula, setFormula] = useState(properties.defaultFormula);
+  return (
+    <Dialog open={properties.isOpen} onClose={properties.close}>
+      <DialogTitle>{t("formula_input.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={formula}
+          label={t("formula_input.label")}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onChange={(event) => {
+            setFormula(event.target.value);
+          }}
+          spellCheck="false"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            properties.onFormulaChanged(formula);
+          }}
+        >
+          {t("formula_input.update")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
diff --git a/webapp/src/components/formulabar.tsx b/webapp/src/components/formulabar.tsx
new file mode 100644
index 0000000..a6d016f
--- /dev/null
+++ b/webapp/src/components/formulabar.tsx
@@ -0,0 +1,132 @@
+import { Button, styled } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import { Fx } from "../icons";
+import { FormulaDialog } from "./formulaDialog";
+
+type FormulaBarProps = {
+  cellAddress: string;
+  formulaValue: string;
+  onChange: (value: string) => void;
+};
+
+const formulaBarHeight = 30;
+const headerColumnWidth = 30;
+
+function FormulaBar(properties: FormulaBarProps) {
+  const [formulaDialogOpen, setFormulaDialogOpen] = useState(false);
+  const handleCloseFormulaDialog = () => {
+    setFormulaDialogOpen(false);
+  };
+
+  return (
+    <Container>
+      <AddressContainer>
+        <CellBarAddress>{properties.cellAddress}</CellBarAddress>
+        <StyledButton>
+          <ChevronDown />
+        </StyledButton>
+      </AddressContainer>
+      <Divider />
+      <FormulaContainer>
+        <FormulaSymbolButton>
+          <Fx />
+        </FormulaSymbolButton>
+        <Editor
+          onClick={() => {
+            setFormulaDialogOpen(true);
+          }}
+        >
+          {properties.formulaValue}
+        </Editor>
+      </FormulaContainer>
+      <FormulaDialog
+        isOpen={formulaDialogOpen}
+        close={handleCloseFormulaDialog}
+        defaultFormula={properties.formulaValue}
+        onFormulaChanged={(newName) => {
+          properties.onChange(newName);
+          setFormulaDialogOpen(false);
+        }}
+      />
+    </Container>
+  );
+}
+
+const StyledButton = styled(Button)`
+  width: 15px;
+  min-width: 0px;
+  padding: 0px;
+  color: inherit;
+  font-weight: inherit;
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+const FormulaSymbolButton = styled(StyledButton)`
+  margin-right: 8px;
+`;
+
+const Divider = styled("div")`
+  background-color: #e0e0e0;
+  width: 1px;
+  height: 20px;
+  margin-left: 16px;
+  margin-right: 16px;
+`;
+
+const FormulaContainer = styled("div")`
+  margin-left: 10px;
+  line-height: 22px;
+  font-weight: normal;
+  width: 100%;
+  height: 22px;
+  display: flex;
+`;
+
+const Container = styled("div")`
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background: ${(properties): string =>
+    properties.theme.palette.background.default};
+  height: ${formulaBarHeight}px;
+`;
+
+const AddressContainer = styled("div")`
+  padding-left: 16px;
+  color: #333;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 11px;
+  display: flex;
+  font-weight: 600;
+  flex-grow: row;
+  min-width: ${headerColumnWidth}px;
+`;
+
+const CellBarAddress = styled("div")`
+  width: 100%;
+  text-align: "center";
+`;
+
+const Editor = styled("div")`
+  position: relative;
+  width: 100%;
+  padding: 0px;
+  border-width: 0px;
+  outline: none;
+  resize: none;
+  white-space: pre-wrap;
+  vertical-align: bottom;
+  overflow: hidden;
+  text-align: left;
+  span {
+    min-width: 1px;
+  }
+`;
+
+export default FormulaBar;
diff --git a/webapp/src/components/navigation/index.ts b/webapp/src/components/navigation/index.ts
new file mode 100644
index 0000000..ed58bb6
--- /dev/null
+++ b/webapp/src/components/navigation/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./navigation";
+export type { NavigationProps } from "./navigation";
diff --git a/webapp/src/components/navigation/menus.tsx b/webapp/src/components/navigation/menus.tsx
new file mode 100644
index 0000000..4f83523
--- /dev/null
+++ b/webapp/src/components/navigation/menus.tsx
@@ -0,0 +1,122 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+  styled,
+} from "@mui/material";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { SheetOptions } from "./types";
+
+interface SheetRenameDialogProps {
+  isOpen: boolean;
+  close: () => void;
+  onNameChanged: (name: string) => void;
+  defaultName: string;
+}
+
+export const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
+  const { t } = useTranslation();
+  const [name, setName] = useState(properties.defaultName);
+  return (
+    <Dialog open={properties.isOpen} onClose={properties.close}>
+      <DialogTitle>{t("sheet_rename.title")}</DialogTitle>
+      <DialogContent dividers>
+        <TextField
+          defaultValue={name}
+          label={t("sheet_rename.label")}
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onChange={(event) => {
+            setName(event.target.value);
+          }}
+          spellCheck="false"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            properties.onNameChanged(name);
+          }}
+        >
+          {t("sheet_rename.rename")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+interface SheetListMenuProps {
+  isOpen: boolean;
+  close: () => void;
+  anchorEl: HTMLButtonElement | null;
+  onSheetSelected: (index: number) => void;
+  sheetOptionsList: SheetOptions[];
+}
+
+const SheetListMenu = (properties: SheetListMenuProps) => {
+  const { isOpen, close, anchorEl, onSheetSelected, sheetOptionsList } =
+    properties;
+
+  return (
+    <StyledMenu
+      open={isOpen}
+      onClose={close}
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "left",
+      }}
+      transformOrigin={{
+        vertical: "bottom",
+        horizontal: 6,
+      }}
+    >
+      {sheetOptionsList.map((tab, index) => (
+        <StyledMenuItem
+          key={tab.sheetId}
+          onClick={(): void => onSheetSelected(index)}
+        >
+          <ItemColor style={{ backgroundColor: tab.color }} />
+          <ItemName>{tab.name}</ItemName>
+        </StyledMenuItem>
+      ))}
+    </StyledMenu>
+  );
+};
+
+const StyledMenu = styled(Menu)({
+  "& .MuiPaper-root": {
+    borderRadius: 8,
+    padding: 4,
+  },
+  "& .MuiList-padding": {
+    padding: 0,
+  },
+});
+
+const StyledMenuItem = styled(MenuItem)({
+  padding: 8,
+  borderRadius: 4,
+});
+
+const ItemColor = styled("div")`
+  width: 12px;
+  height: 12px;
+  border-radius: 4px;
+  margin-right: 8px;
+`;
+
+const ItemName = styled("div")`
+  font-size: 13px;
+  color: #333;
+`;
+
+export default SheetListMenu;
diff --git a/webapp/src/components/navigation/navigation.tsx b/webapp/src/components/navigation/navigation.tsx
new file mode 100644
index 0000000..f86a8da
--- /dev/null
+++ b/webapp/src/components/navigation/navigation.tsx
@@ -0,0 +1,145 @@
+import { styled } from "@mui/material";
+import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { StyledButton } from "../toolbar";
+import SheetListMenu from "./menus";
+import Sheet from "./sheet";
+import type { SheetOptions } from "./types";
+
+export interface NavigationProps {
+  sheets: SheetOptions[];
+  selectedIndex: number;
+  onSheetSelected: (index: number) => void;
+  onAddBlankSheet: () => void;
+  onSheetColorChanged: (hex: string) => void;
+  onSheetRenamed: (name: string) => void;
+  onSheetDeleted: () => void;
+}
+
+function Navigation(props: NavigationProps) {
+  const { t } = useTranslation();
+  const { onSheetSelected, sheets, selectedIndex } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <Container>
+      <StyledButton
+        title={t("navigation.add_sheet")}
+        $pressed={false}
+        onClick={props.onAddBlankSheet}
+      >
+        <Plus />
+      </StyledButton>
+      <StyledButton
+        onClick={handleClick}
+        title={t("navigation.sheet_list")}
+        $pressed={false}
+      >
+        <Menu />
+      </StyledButton>
+      <Sheets>
+        <SheetInner>
+          {sheets.map((tab, index) => (
+            <Sheet
+              key={tab.sheetId}
+              name={tab.name}
+              color={tab.color}
+              selected={index === selectedIndex}
+              onSelected={() => onSheetSelected(index)}
+              onColorChanged={(hex: string): void => {
+                props.onSheetColorChanged(hex);
+              }}
+              onRenamed={(name: string): void => {
+                props.onSheetRenamed(name);
+              }}
+              onDeleted={(): void => {
+                props.onSheetDeleted();
+              }}
+            />
+          ))}
+        </SheetInner>
+      </Sheets>
+      <LeftDivider />
+      <ChevronLeftStyled />
+      <ChevronRightStyled />
+      <RightDivider />
+      <Advert>ironcalc.com</Advert>
+      <SheetListMenu
+        anchorEl={anchorEl}
+        isOpen={open}
+        close={handleClose}
+        sheetOptionsList={sheets}
+        onSheetSelected={onSheetSelected}
+      />
+    </Container>
+  );
+}
+
+const ChevronLeftStyled = styled(ChevronLeft)`
+  color: #333333;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+const ChevronRightStyled = styled(ChevronRight)`
+  color: #333333;
+  width: 16px;
+  height: 16px;
+  padding: 4px;
+  cursor: pointer;
+`;
+
+// Note I have to specify the font-family in every component that can be considered stand-alone
+const Container = styled("div")`
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  display: flex;
+  height: 40px;
+  align-items: center;
+  padding-left: 12px;
+  font-family: Inter;
+  background-color: #fff;
+`;
+
+const Sheets = styled("div")`
+  flex-grow: 2;
+  overflow: hidden;
+`;
+
+const SheetInner = styled("div")`
+  display: flex;
+`;
+
+const LeftDivider = styled("div")`
+  height: 10px;
+  width: 1px;
+  background-color: #eee;
+  margin: 0px 10px 0px 0px;
+`;
+
+const RightDivider = styled("div")`
+  height: 10px;
+  width: 1px;
+  background-color: #eee;
+  margin: 0px 20px 0px 10px;
+`;
+
+const Advert = styled("div")`
+  color: #f2994a;
+  margin-right: 12px;
+  font-size: 12px;
+`;
+
+export default Navigation;
diff --git a/webapp/src/components/navigation/sheet.tsx b/webapp/src/components/navigation/sheet.tsx
new file mode 100644
index 0000000..8850f87
--- /dev/null
+++ b/webapp/src/components/navigation/sheet.tsx
@@ -0,0 +1,142 @@
+import { Button, Menu, MenuItem, styled } from "@mui/material";
+import { ChevronDown } from "lucide-react";
+import { useRef, useState } from "react";
+import ColorPicker from "../colorPicker";
+import { SheetRenameDialog } from "./menus";
+interface SheetProps {
+  name: string;
+  color: string;
+  selected: boolean;
+  onSelected: () => void;
+  onColorChanged: (hex: string) => void;
+  onRenamed: (name: string) => void;
+  onDeleted: () => void;
+}
+function Sheet(props: SheetProps) {
+  const { name, color, selected, onSelected } = props;
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const colorButton = useRef(null);
+  const open = Boolean(anchorEl);
+  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const [renameDialogOpen, setRenameDialogOpen] = useState(false);
+  const handleCloseRenameDialog = () => {
+    setRenameDialogOpen(false);
+  };
+  const handleOpenRenameDialog = () => {
+    setRenameDialogOpen(true);
+  };
+  return (
+    <>
+      <Wrapper
+        style={{ borderBottomColor: color, fontWeight: selected ? 600 : 400 }}
+        onClick={() => {
+          onSelected();
+        }}
+        ref={colorButton}
+      >
+        <Name>{name}</Name>
+        <StyledButton onClick={handleOpen}>
+          <ChevronDown />
+        </StyledButton>
+      </Wrapper>
+      <StyledMenu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: 6,
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            handleOpenRenameDialog();
+            handleClose();
+          }}
+        >
+          Rename
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            setColorPickerOpen(true);
+            handleClose();
+          }}
+        >
+          Change Color
+        </MenuItem>
+        <MenuItem
+          onClick={() => {
+            props.onDeleted();
+            handleClose();
+          }}
+        >
+          {" "}
+          Delete
+        </MenuItem>
+      </StyledMenu>
+      <SheetRenameDialog
+        isOpen={renameDialogOpen}
+        close={handleCloseRenameDialog}
+        defaultName={name}
+        onNameChanged={(newName) => {
+          props.onRenamed(newName);
+          setRenameDialogOpen(false);
+        }}
+      />
+      <ColorPicker
+        color={color}
+        onChange={(color): void => {
+          props.onColorChanged(color);
+          setColorPickerOpen(false);
+        }}
+        onClose={() => {
+          setColorPickerOpen(false);
+        }}
+        anchorEl={colorButton}
+        open={colorPickerOpen}
+      />
+    </>
+  );
+}
+
+const StyledMenu = styled(Menu)``;
+
+const StyledButton = styled(Button)`
+  width: 15px;
+  height: 24px;
+  min-width: 0px;
+  padding: 0px;
+  color: inherit;
+  font-weight: inherit;
+  svg {
+    width: 15px;
+    height: 15px;
+  }
+`;
+
+const Wrapper = styled("div")`
+  display: flex;
+  margin-left: 20px;
+  border-bottom: 3px solid;
+  border-top: 3px solid white;
+  line-height: 34px;
+  align-items: center;
+`;
+
+const Name = styled("div")`
+  font-size: 12px;
+  margin-right: 5px;
+  text-wrap: nowrap;
+`;
+
+export default Sheet;
diff --git a/webapp/src/components/navigation/types.ts b/webapp/src/components/navigation/types.ts
new file mode 100644
index 0000000..2a9ec1d
--- /dev/null
+++ b/webapp/src/components/navigation/types.ts
@@ -0,0 +1,5 @@
+export interface SheetOptions {
+  name: string;
+  color: string;
+  sheetId: number;
+}
diff --git a/webapp/src/components/tests/model.test.ts b/webapp/src/components/tests/model.test.ts
new file mode 100644
index 0000000..80c21c9
--- /dev/null
+++ b/webapp/src/components/tests/model.test.ts
@@ -0,0 +1,13 @@
+import { readFile } from "node:fs/promises";
+import { Model, initSync } from "@ironcalc/wasm";
+import { expect, test } from "vitest";
+
+// This is a simple test that showcases how to load the wasm module in the tests
+
+test("simple calculation", async () => {
+  const buffer = await readFile("node_modules/@ironcalc/wasm/wasm_bg.wasm");
+  initSync(buffer);
+  const model = new Model("en", "UTC");
+  model.setUserInput(0, 1, 1, "=21*2");
+  expect(model.getFormattedCellValue(0, 1, 1)).toBe("42");
+});
diff --git a/webapp/src/components/tests/util.test.ts b/webapp/src/components/tests/util.test.ts
new file mode 100644
index 0000000..1b37902
--- /dev/null
+++ b/webapp/src/components/tests/util.test.ts
@@ -0,0 +1,7 @@
+import { expect, test } from "vitest";
+import { isNavigationKey } from "../util";
+
+test("checks arrow left is a navigation key", () => {
+  expect(isNavigationKey("ArrowLeft")).toBe(true);
+  expect(isNavigationKey("Arrow")).toBe(false);
+});
diff --git a/webapp/src/components/toolbar.tsx b/webapp/src/components/toolbar.tsx
new file mode 100644
index 0000000..f63c581
--- /dev/null
+++ b/webapp/src/components/toolbar.tsx
@@ -0,0 +1,453 @@
+import type {
+  BorderOptions,
+  HorizontalAlignment,
+  VerticalAlignment,
+} from "@ironcalc/wasm";
+import { styled } from "@mui/material/styles";
+import {
+  AlignCenter,
+  AlignLeft,
+  AlignRight,
+  ArrowDownToLine,
+  ArrowUpToLine,
+  Bold,
+  ChevronDown,
+  Euro,
+  Grid2X2,
+  Grid2x2Check,
+  Grid2x2X,
+  Italic,
+  PaintBucket,
+  Paintbrush2,
+  Percent,
+  Redo2,
+  Strikethrough,
+  Type,
+  Underline,
+  Undo2,
+} from "lucide-react";
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ArrowMiddleFromLine,
+  DecimalPlacesDecreaseIcon,
+  DecimalPlacesIncreaseIcon,
+} from "../icons";
+import { theme } from "../theme";
+import BorderPicker from "./borderPicker";
+import ColorPicker from "./colorPicker";
+import FormatMenu from "./formatMenu";
+import {
+  NumberFormats,
+  decreaseDecimalPlaces,
+  increaseDecimalPlaces,
+} from "./formatUtil";
+
+type ToolbarProperties = {
+  canUndo: boolean;
+  canRedo: boolean;
+  onRedo: () => void;
+  onUndo: () => void;
+  onToggleUnderline: (u: boolean) => void;
+  onToggleBold: (v: boolean) => void;
+  onToggleItalic: (v: boolean) => void;
+  onToggleStrike: (v: boolean) => void;
+  onToggleHorizontalAlign: (v: string) => void;
+  onToggleVerticalAlign: (v: string) => void;
+  onCopyStyles: () => void;
+  onTextColorPicked: (hex: string) => void;
+  onFillColorPicked: (hex: string) => void;
+  onNumberFormatPicked: (numberFmt: string) => void;
+  onBorderChanged: (border: BorderOptions) => void;
+  fillColor: string;
+  fontColor: string;
+  bold: boolean;
+  underline: boolean;
+  italic: boolean;
+  strike: boolean;
+  horizontalAlign: HorizontalAlignment;
+  verticalAlign: VerticalAlignment;
+  canEdit: boolean;
+  numFmt: string;
+  showGridLines: boolean;
+  onToggleShowGridLines: (show: boolean) => void;
+};
+
+function Toolbar(properties: ToolbarProperties) {
+  const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
+  const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
+  const [borderPickerOpen, setBorderPickerOpen] = useState(false);
+
+  const fontColorButton = useRef(null);
+  const fillColorButton = useRef(null);
+  const borderButton = useRef(null);
+
+  const { t } = useTranslation();
+
+  const { canEdit } = properties;
+
+  return (
+    <ToolbarContainer>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onUndo}
+        disabled={!properties.canUndo}
+        title={t("toolbar.undo")}
+      >
+        <Undo2 />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onRedo}
+        disabled={!properties.canRedo}
+        title={t("toolbar.redo")}
+      >
+        <Redo2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={properties.onCopyStyles}
+        title={t("toolbar.copy_styles")}
+      >
+        <Paintbrush2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(NumberFormats.CURRENCY_EUR);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.euro")}
+      >
+        <Euro />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(NumberFormats.PERCENTAGE);
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.percentage")}
+      >
+        <Percent />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(
+            decreaseDecimalPlaces(properties.numFmt),
+          );
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.decimal_places_decrease")}
+      >
+        <DecimalPlacesDecreaseIcon />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={(): void => {
+          properties.onNumberFormatPicked(
+            increaseDecimalPlaces(properties.numFmt),
+          );
+        }}
+        disabled={!canEdit}
+        title={t("toolbar.decimal_places_increase")}
+      >
+        <DecimalPlacesIncreaseIcon />
+      </StyledButton>
+      <FormatMenu
+        numFmt={properties.numFmt}
+        onChange={(numberFmt): void => {
+          properties.onNumberFormatPicked(numberFmt);
+        }}
+        onExited={(): void => {}}
+        anchorOrigin={{
+          horizontal: 20, // Aligning the menu to the middle of FormatButton
+          vertical: "bottom",
+        }}
+      >
+        <StyledButton
+          type="button"
+          $pressed={false}
+          disabled={!canEdit}
+          title={t("toolbar.format_number")}
+          sx={{
+            width: "40px", // Keep in sync with anchorOrigin in FormatMenu above
+            fontSize: "13px",
+            fontWeight: 400,
+          }}
+        >
+          {"123"}
+          <ChevronDown />
+        </StyledButton>
+      </FormatMenu>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={properties.bold}
+        onClick={() => properties.onToggleBold(!properties.bold)}
+        disabled={!canEdit}
+        title={t("toolbar.bold")}
+      >
+        <Bold />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.italic}
+        onClick={() => properties.onToggleItalic(!properties.italic)}
+        disabled={!canEdit}
+        title={t("toolbar.italic")}
+      >
+        <Italic />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.underline}
+        onClick={() => properties.onToggleUnderline(!properties.underline)}
+        disabled={!canEdit}
+        title={t("toolbar.underline")}
+      >
+        <Underline />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.strike}
+        onClick={() => properties.onToggleStrike(!properties.strike)}
+        disabled={!canEdit}
+        title={t("toolbar.strike_trough")}
+      >
+        <Strikethrough />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        title={t("toolbar.font_color")}
+        ref={fontColorButton}
+        $underlinedColor={properties.fontColor}
+        onClick={() => setFontColorPickerOpen(true)}
+      >
+        <Type />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={false}
+        disabled={!canEdit}
+        title={t("toolbar.fill_color")}
+        ref={fillColorButton}
+        $underlinedColor={properties.fillColor}
+        onClick={() => setFillColorPickerOpen(true)}
+      >
+        <PaintBucket />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "left"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "left" ? "general" : "left",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_left")}
+      >
+        <AlignLeft />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "center"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "center" ? "general" : "center",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_center")}
+      >
+        <AlignCenter />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.horizontalAlign === "right"}
+        onClick={() =>
+          properties.onToggleHorizontalAlign(
+            properties.horizontalAlign === "right" ? "general" : "right",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.align_right")}
+      >
+        <AlignRight />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "top"}
+        onClick={() =>
+          properties.onToggleVerticalAlign(
+            properties.verticalAlign === "top" ? "bottom" : "top",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_top")}
+      >
+        <ArrowUpToLine />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "center"}
+        onClick={() =>
+          properties.onToggleVerticalAlign(
+            properties.verticalAlign === "center" ? "bottom" : "center",
+          )
+        }
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_center")}
+      >
+        <ArrowMiddleFromLine />
+      </StyledButton>
+      <StyledButton
+        type="button"
+        $pressed={properties.verticalAlign === "bottom"}
+        onClick={() => properties.onToggleVerticalAlign("bottom")}
+        disabled={!canEdit}
+        title={t("toolbar.vertical_align_bottom")}
+      >
+        <ArrowDownToLine />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() => setBorderPickerOpen(true)}
+        ref={borderButton}
+        disabled={!canEdit}
+        title={t("toolbar.borders")}
+      >
+        <Grid2X2 />
+      </StyledButton>
+      <Divider />
+      <StyledButton
+        type="button"
+        $pressed={false}
+        onClick={() =>
+          properties.onToggleShowGridLines(!properties.showGridLines)
+        }
+        disabled={!canEdit}
+        title={t("toolbar.show_hide_grid_lines")}
+      >
+        {properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
+      </StyledButton>
+
+      <ColorPicker
+        color={properties.fontColor}
+        onChange={(color): void => {
+          properties.onTextColorPicked(color);
+          setFontColorPickerOpen(false);
+        }}
+        onClose={() => {
+          setFontColorPickerOpen(false);
+        }}
+        anchorEl={fontColorButton}
+        open={fontColorPickerOpen}
+      />
+      <ColorPicker
+        color={properties.fillColor}
+        onChange={(color): void => {
+          properties.onFillColorPicked(color);
+          setFillColorPickerOpen(false);
+        }}
+        onClose={() => {
+          setFillColorPickerOpen(false);
+        }}
+        anchorEl={fillColorButton}
+        open={fillColorPickerOpen}
+      />
+      <BorderPicker
+        onChange={(border): void => {
+          properties.onBorderChanged(border);
+          setBorderPickerOpen(false);
+        }}
+        anchorEl={borderButton}
+        open={borderPickerOpen}
+      />
+    </ToolbarContainer>
+  );
+}
+const toolbarHeight = 40;
+
+const ToolbarContainer = styled("div")`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  background: ${({ theme }) => theme.palette.background.paper};
+  height: ${toolbarHeight}px;
+  line-height: ${toolbarHeight}px;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey["600"]};
+  font-family: Inter;
+  border-radius: 4px 4px 0px 0px;
+  overflow-x: auto;
+`;
+
+type TypeButtonProperties = { $pressed: boolean; $underlinedColor?: string };
+export const StyledButton = styled("button")<TypeButtonProperties>(
+  ({ disabled, $pressed, $underlinedColor }) => {
+    const result = {
+      width: "24px",
+      height: "24px",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: "26px",
+      border: "0px solid #fff",
+      borderRadius: "2px",
+      marginRight: "5px",
+      transition: "all 0.2s",
+      cursor: "pointer",
+      backgroundColor: "white",
+      padding: "0px",
+      svg: {
+        width: "16px",
+        height: "16px",
+      },
+    };
+    if (disabled) {
+      return {
+        ...result,
+        color: theme.palette.grey["600"],
+        cursor: "default",
+      };
+    }
+    return {
+      ...result,
+      borderTop: $underlinedColor ? "3px solid #FFF" : "none",
+      borderBottom: $underlinedColor ? `3px solid ${$underlinedColor}` : "none",
+      color: "#21243A",
+      backgroundColor: $pressed ? "#EEE" : "#FFF",
+      "&:hover": {
+        backgroundColor: "#F1F2F8",
+        borderTopColor: "#F1F2F8",
+      },
+    };
+  },
+);
+
+const Divider = styled("div")({
+  width: "0px",
+  height: "10px",
+  borderLeft: "1px solid #D3D6E9",
+  marginLeft: "5px",
+  marginRight: "10px",
+});
+
+export default Toolbar;
diff --git a/webapp/src/components/types.ts b/webapp/src/components/types.ts
new file mode 100644
index 0000000..be71f3e
--- /dev/null
+++ b/webapp/src/components/types.ts
@@ -0,0 +1,11 @@
+export interface Area {
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+export interface Cell {
+  row: number;
+  column: number;
+}
diff --git a/webapp/src/components/useKeyboardNavigation.ts b/webapp/src/components/useKeyboardNavigation.ts
new file mode 100644
index 0000000..c96711a
--- /dev/null
+++ b/webapp/src/components/useKeyboardNavigation.ts
@@ -0,0 +1,225 @@
+import { type KeyboardEvent, type RefObject, useCallback } from "react";
+import { type NavigationKey, isEditingKey, isNavigationKey } from "./util";
+
+export enum Border {
+  Top = "top",
+  Bottom = "bottom",
+  Right = "right",
+  Left = "left",
+}
+
+interface Options {
+  onCellsDeleted: () => void;
+  onExpandAreaSelectedKeyboard: (
+    key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
+  ) => void;
+  onEditKeyPressStart: (initText: string) => void;
+  onCellEditStart: () => void;
+  onBold: () => void;
+  onItalic: () => void;
+  onUnderline: () => void;
+  onNavigationToEdge: (direction: NavigationKey) => void;
+  onPageDown: () => void;
+  onPageUp: () => void;
+  onArrowDown: () => void;
+  onArrowUp: () => void;
+  onArrowLeft: () => void;
+  onArrowRight: () => void;
+  onKeyHome: () => void;
+  onKeyEnd: () => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  onNextSheet: () => void;
+  onPreviousSheet: () => void;
+  root: RefObject<HTMLDivElement>;
+}
+
+// # IronCalc Keyboard accessibility:
+// * ArrowKeys: navigation
+// * Enter: ArrowDown (Excel behaviour not g-sheets)
+// * Tab: arrow right
+// * Shift+Tab: arrow left
+// * Home/End: First/last column
+// * Shift+Arrows: selection
+// * Ctrl+Arrows: navigating to edge
+// * Ctrl+Home/End: navigation to end
+// * PagDown/Up scroll Down/Up
+// * Alt+ArrowDown/Up: next/previous sheet
+//   (NB: Excel uses Ctrl+PageUp/Down for this but that highjacks a browser behaviour,
+//    go to next/previous tab)
+// * Ctrl+u/i/b: style
+// * Ctrl+z/y: undo/redo
+// * F2: start editing
+
+// References:
+// In Google Sheets: Ctrl+/ shows the list of keyboard shortcuts
+// https://support.google.com/docs/answer/181110
+// https://support.microsoft.com/en-us/office/keyboard-shortcuts-in-excel-1798d9d5-842a-42b8-9c99-9b7213f0040f
+
+const useKeyboardNavigation = (
+  options: Options,
+): { onKeyDown: (event: KeyboardEvent) => void } => {
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const { key } = event;
+      const { root } = options;
+      // Silence the linter
+      if (!root.current) {
+        return;
+      }
+      if (event.target !== root.current) {
+        return;
+      }
+      if (event.metaKey || event.ctrlKey) {
+        switch (key) {
+          case "z": {
+            options.onUndo();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "y": {
+            options.onRedo();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "b": {
+            options.onBold();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "i": {
+            options.onItalic();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          case "u": {
+            options.onUnderline();
+            event.stopPropagation();
+            event.preventDefault();
+
+            break;
+          }
+          // No default
+        }
+        if (isNavigationKey(key)) {
+          // Ctrl+Arrows, Ctrl+Home/End
+          options.onNavigationToEdge(key);
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        return;
+      }
+      if (event.altKey) {
+        switch (key) {
+          case "ArrowDown": {
+            // select next sheet
+            options.onNextSheet();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+          }
+          case "ArrowUp": {
+            // select previous sheet
+            options.onPreviousSheet();
+            event.stopPropagation();
+            event.preventDefault();
+            break;
+          }
+        }
+      }
+      if (key === "F2") {
+        options.onCellEditStart();
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      if (isEditingKey(key) || key === "Backspace") {
+        const initText = key === "Backspace" ? "" : key;
+        options.onEditKeyPressStart(initText);
+        event.stopPropagation();
+        event.preventDefault();
+        return;
+      }
+      // Worksheet Navigation
+      if (event.shiftKey) {
+        if (
+          key === "ArrowRight" ||
+          key === "ArrowLeft" ||
+          key === "ArrowUp" ||
+          key === "ArrowDown"
+        ) {
+          options.onExpandAreaSelectedKeyboard(key);
+        } else if (key === "Tab") {
+          options.onArrowLeft();
+          event.stopPropagation();
+          event.preventDefault();
+        }
+        return;
+      }
+      switch (key) {
+        case "ArrowRight":
+        case "Tab": {
+          options.onArrowRight();
+
+          break;
+        }
+        case "ArrowLeft": {
+          options.onArrowLeft();
+
+          break;
+        }
+        case "ArrowDown":
+        case "Enter": {
+          options.onArrowDown();
+
+          break;
+        }
+        case "ArrowUp": {
+          options.onArrowUp();
+
+          break;
+        }
+        case "End": {
+          options.onKeyEnd();
+
+          break;
+        }
+        case "Home": {
+          options.onKeyHome();
+
+          break;
+        }
+        case "Delete": {
+          options.onCellsDeleted();
+
+          break;
+        }
+        case "PageDown": {
+          options.onPageDown();
+
+          break;
+        }
+        case "PageUp": {
+          options.onPageUp();
+
+          break;
+        }
+        // No default
+      }
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    [options],
+  );
+  return { onKeyDown };
+};
+
+export default useKeyboardNavigation;
diff --git a/webapp/src/components/usePointer.ts b/webapp/src/components/usePointer.ts
new file mode 100644
index 0000000..78a12d3
--- /dev/null
+++ b/webapp/src/components/usePointer.ts
@@ -0,0 +1,169 @@
+import { type PointerEvent, type RefObject, useCallback, useRef } from "react";
+import type WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+import {
+  headerColumnWidth,
+  headerRowHeight,
+} from "./WorksheetCanvas/worksheetCanvas";
+import type { Cell } from "./types";
+
+interface PointerSettings {
+  canvasElement: RefObject<HTMLCanvasElement>;
+  worksheetCanvas: RefObject<WorksheetCanvas | null>;
+  worksheetElement: RefObject<HTMLDivElement>;
+  onCellSelected: (cell: Cell, event: React.MouseEvent) => void;
+  onAreaSelecting: (cell: Cell) => void;
+  onAreaSelected: () => void;
+  onExtendToCell: (cell: Cell) => void;
+  onExtendToEnd: () => void;
+}
+
+interface PointerEvents {
+  onPointerDown: (event: PointerEvent) => void;
+  onPointerMove: (event: PointerEvent) => void;
+  onPointerUp: (event: PointerEvent) => void;
+  onPointerHandleDown: (event: PointerEvent) => void;
+}
+
+const usePointer = (options: PointerSettings): PointerEvents => {
+  const isSelecting = useRef(false);
+  const isExtending = useRef(false);
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent): void => {
+      // Range selections are disabled on non-mouse devices. Use touch move only
+      // to scroll for now.
+      if (event.pointerType !== "mouse") {
+        return;
+      }
+
+      if (isSelecting.current) {
+        const { canvasElement, worksheetCanvas } = options;
+        const canvas = canvasElement.current;
+        const worksheet = worksheetCanvas.current;
+        // Silence the linter
+        if (!worksheet || !canvas) {
+          return;
+        }
+        let x = event.clientX;
+        let y = event.clientY;
+        const canvasRect = canvas.getBoundingClientRect();
+        x -= canvasRect.x;
+        y -= canvasRect.y;
+        const cell = worksheet.getCellByCoordinates(x, y);
+        if (cell) {
+          options.onAreaSelecting(cell);
+        } else {
+          console.log("Failed");
+        }
+      } else if (isExtending.current) {
+        const { canvasElement, worksheetCanvas } = options;
+        const canvas = canvasElement.current;
+        const worksheet = worksheetCanvas.current;
+        // Silence the linter
+        if (!worksheet || !canvas) {
+          return;
+        }
+        let x = event.clientX;
+        let y = event.clientY;
+        const canvasRect = canvas.getBoundingClientRect();
+        x -= canvasRect.x;
+        y -= canvasRect.y;
+        const cell = worksheet.getCellByCoordinates(x, y);
+        if (!cell) {
+          return;
+        }
+        options.onExtendToCell(cell);
+      }
+    },
+    [options],
+  );
+
+  const onPointerUp = useCallback(
+    (event: PointerEvent): void => {
+      if (isSelecting.current) {
+        const { worksheetElement } = options;
+        isSelecting.current = false;
+        worksheetElement.current?.releasePointerCapture(event.pointerId);
+        options.onAreaSelected();
+      } else if (isExtending.current) {
+        const { worksheetElement } = options;
+        isExtending.current = false;
+        worksheetElement.current?.releasePointerCapture(event.pointerId);
+        options.onExtendToEnd();
+      }
+    },
+    [options],
+  );
+
+  const onPointerDown = useCallback(
+    (event: PointerEvent) => {
+      let x = event.clientX;
+      let y = event.clientY;
+      const { canvasElement, worksheetElement, worksheetCanvas } = options;
+      const worksheet = worksheetCanvas.current;
+      const canvas = canvasElement.current;
+      const worksheetWrapper = worksheetElement.current;
+      // Silence the linter
+      if (!canvas || !worksheet || !worksheetWrapper) {
+        return;
+      }
+      const canvasRect = canvas.getBoundingClientRect();
+      x -= canvasRect.x;
+      y -= canvasRect.y;
+      // Makes sure is in the sheet area
+      if (
+        x > canvasRect.width ||
+        x < headerColumnWidth ||
+        y < headerRowHeight ||
+        y > canvasRect.height
+      ) {
+        if (
+          x > 0 &&
+          x < headerColumnWidth &&
+          y > headerRowHeight &&
+          y < canvasRect.height
+        ) {
+          // Click on a row number
+          const cell = worksheet.getCellByCoordinates(headerColumnWidth, y);
+          if (cell) {
+            // TODO
+            // Row selected
+          }
+        }
+        return;
+      }
+      const cell = worksheet.getCellByCoordinates(x, y);
+      if (cell) {
+        options.onCellSelected(cell, event);
+        isSelecting.current = true;
+        worksheetWrapper.setPointerCapture(event.pointerId);
+      }
+    },
+    [options],
+  );
+
+  const onPointerHandleDown = useCallback(
+    (event: PointerEvent) => {
+      const worksheetWrapper = options.worksheetElement.current;
+      // Silence the linter
+      if (!worksheetWrapper) {
+        return;
+      }
+      isExtending.current = true;
+      worksheetWrapper.setPointerCapture(event.pointerId);
+      event.stopPropagation();
+      event.preventDefault();
+    },
+    [options],
+  );
+
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerHandleDown,
+    // onContextMenu,
+  };
+};
+
+export default usePointer;
diff --git a/webapp/src/components/util.ts b/webapp/src/components/util.ts
new file mode 100644
index 0000000..137608c
--- /dev/null
+++ b/webapp/src/components/util.ts
@@ -0,0 +1,42 @@
+import type { Area, Cell } from "./types";
+
+import { columnNameFromNumber } from "@ironcalc/wasm";
+
+/**
+ *  Returns true if the keypress should start editing
+ */
+export function isEditingKey(key: string): boolean {
+  if (key.length !== 1) {
+    return false;
+  }
+  const code = key.codePointAt(0) ?? 0;
+  if (code > 0 && code < 255) {
+    return true;
+  }
+  return false;
+}
+
+export type NavigationKey =
+  | "ArrowRight"
+  | "ArrowLeft"
+  | "ArrowDown"
+  | "ArrowUp"
+  | "Home"
+  | "End";
+
+export const isNavigationKey = (key: string): key is NavigationKey =>
+  ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(
+    key,
+  );
+
+export const getCellAddress = (selectedArea: Area, selectedCell?: Cell) => {
+  const isSingleCell =
+    selectedArea.rowStart === selectedArea.rowEnd &&
+    selectedArea.columnEnd === selectedArea.columnStart;
+
+  return isSingleCell && selectedCell
+    ? `${columnNameFromNumber(selectedCell.column)}${selectedCell.row}`
+    : `${columnNameFromNumber(selectedArea.columnStart)}${
+        selectedArea.rowStart
+      }:${columnNameFromNumber(selectedArea.columnEnd)}${selectedArea.rowEnd}`;
+};
diff --git a/webapp/src/components/workbook.tsx b/webapp/src/components/workbook.tsx
new file mode 100644
index 0000000..94eff8b
--- /dev/null
+++ b/webapp/src/components/workbook.tsx
@@ -0,0 +1,378 @@
+import type { BorderOptions, Model, WorksheetProperties } from "@ironcalc/wasm";
+import { styled } from "@mui/material/styles";
+import { useEffect, useRef, useState } from "react";
+import { LAST_COLUMN } from "./WorksheetCanvas/constants";
+import FormulaBar from "./formulabar";
+import Navigation from "./navigation/navigation";
+import Toolbar from "./toolbar";
+import useKeyboardNavigation from "./useKeyboardNavigation";
+import { type NavigationKey, getCellAddress } from "./util";
+import type { WorkbookState } from "./workbookState";
+import Worksheet from "./worksheet";
+
+const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
+  const { model, workbookState } = props;
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // Calling `setRedrawId((id) => id + 1);` forces a redraw
+  // This is needed because `model` can change without React being aware of it
+  const setRedrawId = useState(0)[1];
+  const info = model
+    .getWorksheetsProperties()
+    .map(({ name, color, sheet_id }: WorksheetProperties) => {
+      return { name, color: color ? color : "#FFF", sheetId: sheet_id };
+    });
+
+  const onRedo = () => {
+    model.redo();
+    setRedrawId((id) => id + 1);
+  };
+
+  const onUndo = () => {
+    model.undo();
+    setRedrawId((id) => id + 1);
+  };
+
+  const updateRangeStyle = (stylePath: string, value: string) => {
+    const {
+      sheet,
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = model.getSelectedView();
+    const row = Math.min(rowStart, rowEnd);
+    const column = Math.min(columnStart, columnEnd);
+    const range = {
+      sheet,
+      row,
+      column,
+      width: Math.abs(columnEnd - columnStart) + 1,
+      height: Math.abs(rowEnd - rowStart) + 1,
+    };
+    model.updateRangeStyle(range, stylePath, value);
+    setRedrawId((id) => id + 1);
+  };
+
+  const onToggleUnderline = (value: boolean) => {
+    updateRangeStyle("font.u", `${value}`);
+  };
+
+  const onToggleItalic = (value: boolean) => {
+    updateRangeStyle("font.i", `${value}`);
+  };
+
+  const onToggleBold = (value: boolean) => {
+    updateRangeStyle("font.b", `${value}`);
+  };
+
+  const onToggleStrike = (value: boolean) => {
+    updateRangeStyle("font.strike", `${value}`);
+  };
+
+  const onToggleHorizontalAlign = (value: string) => {
+    updateRangeStyle("alignment.horizontal", value);
+  };
+
+  const onToggleVerticalAlign = (value: string) => {
+    updateRangeStyle("alignment.vertical", value);
+  };
+
+  const onTextColorPicked = (hex: string) => {
+    updateRangeStyle("font.color", hex);
+  };
+
+  const onFillColorPicked = (hex: string) => {
+    updateRangeStyle("fill.fg_color", hex);
+  };
+
+  const onNumberFormatPicked = (numberFmt: string) => {
+    updateRangeStyle("num_fmt", numberFmt);
+  };
+
+  const onCopyStyles = () => {
+    const {
+      sheet,
+      range: [rowStart, columnStart, rowEnd, columnEnd],
+    } = model.getSelectedView();
+    const row1 = Math.min(rowStart, rowEnd);
+    const column1 = Math.min(columnStart, columnEnd);
+    const row2 = Math.max(rowStart, rowEnd);
+    const column2 = Math.max(columnStart, columnEnd);
+
+    const styles = [];
+    for (let row = row1; row <= row2; row++) {
+      const styleRow = [];
+      for (let column = column1; column <= column2; column++) {
+        styleRow.push(model.getCellStyle(sheet, row, column));
+      }
+      styles.push(styleRow);
+    }
+    workbookState.setCopyStyles(styles);
+    // FIXME: This is so that the cursor indicates there are styles to be pasted
+    const el = rootRef.current?.getElementsByClassName("sheet-container")[0];
+    if (el) {
+      (el as HTMLElement).style.cursor =
+        `url('data:image/svg+xml;utf8,<svg data-v-56bd7dfc="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-paintbrush-vertical"><path d="M10 2v2"></path><path d="M14 2v4"></path><path d="M17 2a1 1 0 0 1 1 1v9H6V3a1 1 0 0 1 1-1z"></path><path d="M6 12a1 1 0 0 0-1 1v1a2 2 0 0 0 2 2h2a1 1 0 0 1 1 1v2.9a2 2 0 1 0 4 0V17a1 1 0 0 1 1-1h2a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1"></path></svg>'), auto`;
+    }
+  };
+
+  // FIXME: I *think* we should have only one on onKeyPressed function that goes to
+  // the Rust end
+  const { onKeyDown } = useKeyboardNavigation({
+    onCellsDeleted: (): void => {
+      const {
+        sheet,
+        range: [rowStart, columnStart, rowEnd, columnEnd],
+      } = model.getSelectedView();
+      const row = Math.min(rowStart, rowEnd);
+      const column = Math.min(columnStart, columnEnd);
+
+      const width = Math.abs(columnEnd - columnStart) + 1;
+      const height = Math.abs(rowEnd - rowStart) + 1;
+      model.rangeClearContents(
+        sheet,
+        row,
+        column,
+        row + height,
+        column + width,
+      );
+      setRedrawId((id) => id + 1);
+    },
+    onExpandAreaSelectedKeyboard: (
+      key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
+    ): void => {
+      model.onExpandSelectedRange(key);
+      setRedrawId((id) => id + 1);
+    },
+    onEditKeyPressStart: (initText: string): void => {
+      console.log(initText);
+      throw new Error("Function not implemented.");
+    },
+    onCellEditStart: (): void => {
+      throw new Error("Function not implemented.");
+    },
+    onBold: () => {
+      const { sheet, row, column } = model.getSelectedView();
+      const value = !model.getCellStyle(sheet, row, column).font.b;
+      onToggleBold(!value);
+    },
+    onItalic: () => {
+      const { sheet, row, column } = model.getSelectedView();
+      const value = !model.getCellStyle(sheet, row, column).font.i;
+      onToggleItalic(!value);
+    },
+    onUnderline: () => {
+      const { sheet, row, column } = model.getSelectedView();
+      const value = !model.getCellStyle(sheet, row, column).font.u;
+      onToggleUnderline(!value);
+    },
+    onNavigationToEdge: (direction: NavigationKey): void => {
+      console.log(direction);
+      throw new Error("Function not implemented.");
+    },
+    onPageDown: (): void => {
+      model.onPageDown();
+      setRedrawId((id) => id + 1);
+    },
+    onPageUp: (): void => {
+      model.onPageUp();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowDown: (): void => {
+      model.onArrowDown();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowUp: (): void => {
+      model.onArrowUp();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowLeft: (): void => {
+      model.onArrowLeft();
+      setRedrawId((id) => id + 1);
+    },
+    onArrowRight: (): void => {
+      model.onArrowRight();
+      setRedrawId((id) => id + 1);
+    },
+    onKeyHome: (): void => {
+      const view = model.getSelectedView();
+      const cell = model.getSelectedCell();
+      model.setSelectedCell(cell[1], 1);
+      model.setTopLeftVisibleCell(view.top_row, 1);
+      setRedrawId((id) => id + 1);
+    },
+    onKeyEnd: (): void => {
+      const view = model.getSelectedView();
+      const cell = model.getSelectedCell();
+      model.setSelectedCell(cell[1], LAST_COLUMN);
+      model.setTopLeftVisibleCell(view.top_row, LAST_COLUMN - 5);
+      setRedrawId((id) => id + 1);
+    },
+    onUndo: (): void => {
+      model.undo();
+      setRedrawId((id) => id + 1);
+    },
+    onRedo: (): void => {
+      model.redo();
+      setRedrawId((id) => id + 1);
+    },
+    onNextSheet: (): void => {
+      const nextSheet = model.getSelectedSheet() + 1;
+      if (nextSheet >= model.getWorksheetsProperties().length) {
+        model.setSelectedSheet(0);
+      } else {
+        model.setSelectedSheet(nextSheet);
+      }
+    },
+    onPreviousSheet: (): void => {
+      const nextSheet = model.getSelectedSheet() - 1;
+      if (nextSheet < 0) {
+        model.setSelectedSheet(model.getWorksheetsProperties().length - 1);
+      } else {
+        model.setSelectedSheet(nextSheet);
+      }
+    },
+    root: rootRef,
+  });
+
+  useEffect(() => {
+    if (!rootRef.current) {
+      return;
+    }
+    rootRef.current.focus();
+  });
+
+  const {
+    sheet,
+    row,
+    column,
+    range: [rowStart, columnStart, rowEnd, columnEnd],
+  } = model.getSelectedView();
+
+  const cellAddress = getCellAddress(
+    { rowStart, rowEnd, columnStart, columnEnd },
+    { row, column },
+  );
+  const formulaValue = model.getCellContent(sheet, row, column);
+
+  const style = model.getCellStyle(sheet, row, column);
+
+  return (
+    <Container ref={rootRef} onKeyDown={onKeyDown} tabIndex={0}>
+      <Toolbar
+        canUndo={model.canUndo()}
+        canRedo={model.canRedo()}
+        onRedo={onRedo}
+        onUndo={onUndo}
+        onToggleUnderline={onToggleUnderline}
+        onToggleBold={onToggleBold}
+        onToggleItalic={onToggleItalic}
+        onToggleStrike={onToggleStrike}
+        onToggleHorizontalAlign={onToggleHorizontalAlign}
+        onToggleVerticalAlign={onToggleVerticalAlign}
+        onCopyStyles={onCopyStyles}
+        onTextColorPicked={onTextColorPicked}
+        onFillColorPicked={onFillColorPicked}
+        onNumberFormatPicked={onNumberFormatPicked}
+        onBorderChanged={(border: BorderOptions): void => {
+          const {
+            sheet,
+            range: [rowStart, columnStart, rowEnd, columnEnd],
+          } = model.getSelectedView();
+          const row = Math.min(rowStart, rowEnd);
+          const column = Math.min(columnStart, columnEnd);
+
+          const width = Math.abs(columnEnd - columnStart) + 1;
+          const height = Math.abs(rowEnd - rowStart) + 1;
+          const borderArea = {
+            type: border.border,
+            item: border,
+          };
+          model.setAreaWithBorder(
+            { sheet, row, column, width, height },
+            borderArea,
+          );
+          setRedrawId((id) => id + 1);
+        }}
+        fillColor={style.fill.fg_color || "#FFF"}
+        fontColor={style.font.color}
+        bold={style.font.b}
+        underline={style.font.u}
+        italic={style.font.i}
+        strike={style.font.strike}
+        horizontalAlign={
+          style.alignment ? style.alignment.horizontal : "general"
+        }
+        verticalAlign={style.alignment ? style.alignment.vertical : "center"}
+        canEdit={true}
+        numFmt={style.num_fmt}
+        showGridLines={model.getShowGridLines(sheet)}
+        onToggleShowGridLines={(show) => {
+          model.setShowGridLines(sheet, show);
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <FormulaBar
+        cellAddress={cellAddress}
+        formulaValue={formulaValue}
+        onChange={(value) => {
+          model.setUserInput(sheet, row, column, value);
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <Worksheet
+        model={model}
+        workbookState={workbookState}
+        refresh={(): void => {
+          setRedrawId((id) => id + 1);
+        }}
+      />
+      <Navigation
+        sheets={info}
+        selectedIndex={model.getSelectedSheet()}
+        onSheetSelected={(sheet: number): void => {
+          model.setSelectedSheet(sheet);
+          setRedrawId((value) => value + 1);
+        }}
+        onAddBlankSheet={(): void => {
+          model.newSheet();
+          setRedrawId((value) => value + 1);
+        }}
+        onSheetColorChanged={(hex: string): void => {
+          try {
+            model.setSheetColor(model.getSelectedSheet(), hex);
+            setRedrawId((value) => value + 1);
+          } catch (e) {
+            // TODO: Show a proper modal dialog
+            alert(`${e}`);
+          }
+        }}
+        onSheetRenamed={(name: string): void => {
+          try {
+            model.renameSheet(model.getSelectedSheet(), name);
+            setRedrawId((value) => value + 1);
+          } catch (e) {
+            // TODO: Show a proper modal dialog
+            alert(`${e}`);
+          }
+        }}
+        onSheetDeleted={(): void => {
+          const selectedSheet = model.getSelectedSheet();
+          model.deleteSheet(selectedSheet);
+          setRedrawId((value) => value + 1);
+        }}
+      />
+    </Container>
+  );
+};
+
+const Container = styled("div")`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+export default Workbook;
diff --git a/webapp/src/components/workbookState.ts b/webapp/src/components/workbookState.ts
new file mode 100644
index 0000000..7149f5f
--- /dev/null
+++ b/webapp/src/components/workbookState.ts
@@ -0,0 +1,48 @@
+import type { CellStyle } from "@ironcalc/wasm";
+
+export enum AreaType {
+  rowsDown = 0,
+  columnsRight = 1,
+  rowsUp = 2,
+  columnsLeft = 3,
+}
+
+export interface Area {
+  type: AreaType;
+  rowStart: number;
+  rowEnd: number;
+  columnStart: number;
+  columnEnd: number;
+}
+
+type AreaStyles = CellStyle[][];
+
+export class WorkbookState {
+  private extendToArea: Area | null;
+  private copyStyles: AreaStyles | null;
+
+  constructor() {
+    this.extendToArea = null;
+    this.copyStyles = null;
+  }
+
+  getExtendToArea(): Area | null {
+    return this.extendToArea;
+  }
+
+  clearExtendToArea(): void {
+    this.extendToArea = null;
+  }
+
+  setExtendToArea(area: Area): void {
+    this.extendToArea = area;
+  }
+
+  setCopyStyles(styles: AreaStyles | null): void {
+    this.copyStyles = styles;
+  }
+
+  getCopyStyles(): AreaStyles | null {
+    return this.copyStyles;
+  }
+}
diff --git a/webapp/src/components/worksheet.tsx b/webapp/src/components/worksheet.tsx
new file mode 100644
index 0000000..29deef2
--- /dev/null
+++ b/webapp/src/components/worksheet.tsx
@@ -0,0 +1,464 @@
+import type { Model } from "@ironcalc/wasm";
+import { styled } from "@mui/material/styles";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import {
+  outlineBackgroundColor,
+  outlineColor,
+} from "./WorksheetCanvas/constants";
+import WorksheetCanvas from "./WorksheetCanvas/worksheetCanvas";
+import type { Cell } from "./types";
+import usePointer from "./usePointer";
+import { AreaType, type WorkbookState } from "./workbookState";
+
+function useWindowSize() {
+  const [size, setSize] = useState([0, 0]);
+  useLayoutEffect(() => {
+    function updateSize() {
+      setSize([window.innerWidth, window.innerHeight]);
+    }
+    window.addEventListener("resize", updateSize);
+    updateSize();
+    return () => window.removeEventListener("resize", updateSize);
+  }, []);
+  return size;
+}
+
+function Worksheet(props: {
+  model: Model;
+  workbookState: WorkbookState;
+  refresh: () => void;
+}) {
+  const canvasElement = useRef<HTMLCanvasElement>(null);
+
+  const worksheetElement = useRef<HTMLDivElement>(null);
+  const scrollElement = useRef<HTMLDivElement>(null);
+  // const rootElement = useRef<HTMLDivElement>(null);
+  const spacerElement = useRef<HTMLDivElement>(null);
+  const cellOutline = useRef<HTMLDivElement>(null);
+  const areaOutline = useRef<HTMLDivElement>(null);
+  const cellOutlineHandle = useRef<HTMLDivElement>(null);
+  const extendToOutline = useRef<HTMLDivElement>(null);
+  const columnResizeGuide = useRef<HTMLDivElement>(null);
+  const rowResizeGuide = useRef<HTMLDivElement>(null);
+  const columnHeaders = useRef<HTMLDivElement>(null);
+  const worksheetCanvas = useRef<WorksheetCanvas | null>(null);
+
+  const ignoreScrollEventRef = useRef(false);
+
+  const { model, workbookState, refresh } = props;
+  const [clientWidth, clientHeight] = useWindowSize();
+  useEffect(() => {
+    const canvasRef = canvasElement.current;
+    const columnGuideRef = columnResizeGuide.current;
+    const rowGuideRef = rowResizeGuide.current;
+    const columnHeadersRef = columnHeaders.current;
+    const worksheetRef = worksheetElement.current;
+
+    const outline = cellOutline.current;
+    const handle = cellOutlineHandle.current;
+    const area = areaOutline.current;
+    const extendTo = extendToOutline.current;
+
+    if (
+      !canvasRef ||
+      !columnGuideRef ||
+      !rowGuideRef ||
+      !columnHeadersRef ||
+      !worksheetRef ||
+      !outline ||
+      !handle ||
+      !area ||
+      !extendTo ||
+      !scrollElement.current
+    )
+      return;
+    model.setWindowWidth(clientWidth - 37);
+    model.setWindowHeight(clientHeight - 149);
+    const canvas = new WorksheetCanvas({
+      width: worksheetRef.clientWidth,
+      height: worksheetRef.clientHeight,
+      model,
+      workbookState,
+      elements: {
+        canvas: canvasRef,
+        columnGuide: columnGuideRef,
+        rowGuide: rowGuideRef,
+        columnHeaders: columnHeadersRef,
+        cellOutline: outline,
+        cellOutlineHandle: handle,
+        areaOutline: area,
+        extendToOutline: extendTo,
+      },
+      onColumnWidthChanges(sheet, column, width) {
+        model.setColumnWidth(sheet, column, width);
+        worksheetCanvas.current?.renderSheet();
+      },
+      onRowHeightChanges(sheet, row, height) {
+        model.setRowHeight(sheet, row, height);
+        worksheetCanvas.current?.renderSheet();
+      },
+    });
+    const scrollX = model.getScrollX();
+    const scrollY = model.getScrollY();
+    const [sheetWidth, sheetHeight] = [scrollX + 100_000, scrollY + 500_000]; //canvas.getSheetDimensions();
+    if (spacerElement.current) {
+      spacerElement.current.style.height = `${sheetHeight}px`;
+      spacerElement.current.style.width = `${sheetWidth}px`;
+    }
+    const left = scrollElement.current.scrollLeft;
+    const top = scrollElement.current.scrollTop;
+    if (scrollX !== left) {
+      ignoreScrollEventRef.current = true;
+      scrollElement.current.scrollLeft = scrollX;
+      setTimeout(() => {
+        ignoreScrollEventRef.current = false;
+      }, 0);
+    }
+
+    if (scrollY !== top) {
+      ignoreScrollEventRef.current = true;
+      scrollElement.current.scrollTop = scrollY;
+      setTimeout(() => {
+        ignoreScrollEventRef.current = false;
+      }, 0);
+    }
+
+    canvas.renderSheet();
+    worksheetCanvas.current = canvas;
+  });
+
+  const sheetNames = model
+    .getWorksheetsProperties()
+    .map((s: { name: string }) => s.name);
+
+  const {
+    onPointerMove,
+    onPointerDown,
+    onPointerHandleDown,
+    onPointerUp,
+    // onContextMenu,
+  } = usePointer({
+    onCellSelected: (cell: Cell, event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      model.setSelectedCell(cell.row, cell.column);
+      refresh();
+    },
+    onAreaSelecting: (cell: Cell) => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { row, column } = cell;
+      model.onAreaSelecting(row, column);
+      canvas.renderSheet();
+    },
+    onAreaSelected: () => {
+      const styles = workbookState.getCopyStyles();
+      if (styles?.length) {
+        model.onPasteStyles(styles);
+        const canvas = worksheetCanvas.current;
+        if (!canvas) {
+          return;
+        }
+        canvas.renderSheet();
+      }
+      workbookState.setCopyStyles(null);
+      if (worksheetElement.current) {
+        worksheetElement.current.style.cursor = "auto";
+      }
+    },
+    onExtendToCell: (cell) => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { row, column } = cell;
+      const {
+        range: [rowStart, columnStart, rowEnd, columnEnd],
+      } = model.getSelectedView();
+      // We are either extending by rows or by columns
+      // And we could be doing it in the positive direction (downwards or right)
+      // or the negative direction (upwards or left)
+
+      if (
+        row > rowEnd &&
+        ((column <= columnEnd && column >= columnStart) ||
+          (column < columnStart && columnStart - column < row - rowEnd) ||
+          (column > columnEnd && column - columnEnd < row - rowEnd))
+      ) {
+        // rows downwards
+        const area = {
+          type: AreaType.rowsDown,
+          rowStart: rowEnd + 1,
+          rowEnd: row,
+          columnStart,
+          columnEnd,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        row < rowStart &&
+        ((column <= columnEnd && column >= columnStart) ||
+          (column < columnStart && columnStart - column < rowStart - row) ||
+          (column > columnEnd && column - columnEnd < rowStart - row))
+      ) {
+        // rows upwards
+        const area = {
+          type: AreaType.rowsUp,
+          rowStart: row,
+          rowEnd: rowStart,
+          columnStart,
+          columnEnd,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        column > columnEnd &&
+        ((row <= rowEnd && row >= rowStart) ||
+          (row < rowStart && rowStart - row < column - columnEnd) ||
+          (row > rowEnd && row - rowEnd < column - columnEnd))
+      ) {
+        // columns right
+        const area = {
+          type: AreaType.columnsRight,
+          rowStart,
+          rowEnd,
+          columnStart: columnEnd + 1,
+          columnEnd: column,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      } else if (
+        column < columnStart &&
+        ((row <= rowEnd && row >= rowStart) ||
+          (row < rowStart && rowStart - row < columnStart - column) ||
+          (row > rowEnd && row - rowEnd < columnStart - column))
+      ) {
+        // columns left
+        const area = {
+          type: AreaType.columnsLeft,
+          rowStart,
+          rowEnd,
+          columnStart: column,
+          columnEnd: columnStart,
+        };
+        workbookState.setExtendToArea(area);
+        canvas.renderSheet();
+      }
+    },
+    onExtendToEnd: () => {
+      const canvas = worksheetCanvas.current;
+      if (!canvas) {
+        return;
+      }
+      const { sheet, range } = model.getSelectedView();
+      const extendedArea = workbookState.getExtendToArea();
+      if (!extendedArea) {
+        return;
+      }
+      const rowStart = Math.min(range[0], range[2]);
+      const height = Math.abs(range[2] - range[0]) + 1;
+      const width = Math.abs(range[3] - range[1]) + 1;
+      const columnStart = Math.min(range[1], range[3]);
+
+      const area = { sheet, row: rowStart, column: columnStart, width, height };
+
+      switch (extendedArea.type) {
+        case AreaType.rowsDown:
+          model.autoFillRows(area, extendedArea.rowEnd);
+          break;
+        case AreaType.rowsUp: {
+          model.autoFillRows(area, extendedArea.rowStart);
+          break;
+        }
+        case AreaType.columnsRight: {
+          model.autoFillColumns(area, extendedArea.columnEnd);
+          break;
+        }
+        case AreaType.columnsLeft: {
+          model.autoFillColumns(area, extendedArea.columnStart);
+          break;
+        }
+      }
+      workbookState.clearExtendToArea();
+      canvas.renderSheet();
+    },
+    canvasElement,
+    worksheetElement,
+    worksheetCanvas,
+  });
+
+  const onScroll = (): void => {
+    if (!scrollElement.current || !worksheetCanvas.current) {
+      return;
+    }
+    if (ignoreScrollEventRef.current) {
+      // Programmatic scroll ignored
+      return;
+    }
+    const left = scrollElement.current.scrollLeft;
+    const top = scrollElement.current.scrollTop;
+
+    worksheetCanvas.current.setScrollPosition({ left, top });
+    worksheetCanvas.current.renderSheet();
+  };
+
+  return (
+    <Wrapper ref={scrollElement} onScroll={onScroll} className="scroll">
+      <Spacer ref={spacerElement} />
+      <SheetContainer
+        className="sheet-container"
+        ref={worksheetElement}
+        onPointerDown={(event) => {
+          onPointerDown(event);
+        }}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onDoubleClick={(event) => {
+          const { sheet, row, column } = model.getSelectedView();
+          const _text = model.getCellContent(sheet, row, column) || "";
+          // TODO
+          event.stopPropagation();
+          event.preventDefault();
+        }}
+      >
+        <SheetCanvas ref={canvasElement} />
+        <CellOutline ref={cellOutline} />
+        <AreaOutline ref={areaOutline} />
+        <ExtendToOutline ref={extendToOutline} />
+        <CellOutlineHandle
+          ref={cellOutlineHandle}
+          onPointerDown={onPointerHandleDown}
+        />
+        <ColumnResizeGuide ref={columnResizeGuide} />
+        <RowResizeGuide ref={rowResizeGuide} />
+        <ColumnHeaders ref={columnHeaders} />
+      </SheetContainer>
+    </Wrapper>
+  );
+}
+
+const Spacer = styled("div")`
+  position: absolute;
+  height: 5000px;
+  width: 5000px;
+`;
+
+const SheetContainer = styled("div")`
+  position: sticky;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+
+  .column-resize-handle {
+    position: absolute;
+    top: 0px;
+    width: 3px;
+    opacity: 0;
+    background: ${outlineColor};
+    border-radius: 5px;
+    cursor: col-resize;
+  }
+
+  .column-resize-handle:hover {
+    opacity: 1;
+  }
+  .row-resize-handle {
+    position: absolute;
+    left: 0px;
+    height: 3px;
+    opacity: 0;
+    background: ${outlineColor};
+    border-radius: 5px;
+    cursor: row-resize;
+  }
+
+  .row-resize-handle:hover {
+    opacity: 1;
+  }
+`;
+
+const Wrapper = styled("div")({
+  position: "absolute",
+  overflow: "scroll",
+  top: 71,
+  left: 0,
+  right: 0,
+  bottom: 41,
+});
+
+const SheetCanvas = styled("canvas")`
+  position: relative;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 40px;
+`;
+
+const ColumnResizeGuide = styled("div")`
+  position: absolute;
+  top: 0px;
+  display: none;
+  height: 100%;
+  width: 0px;
+  border-left: 1px dashed ${outlineColor};
+`;
+
+const ColumnHeaders = styled("div")`
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  overflow: hidden;
+  display: flex;
+  & .column-header {
+    display: inline-block;
+    text-align: center;
+    overflow: hidden;
+    height: 100%;
+    user-select: none;
+  }
+`;
+
+const RowResizeGuide = styled("div")`
+  position: absolute;
+  display: none;
+  left: 0px;
+  height: 0px;
+  width: 100%;
+  border-top: 1px dashed ${outlineColor};
+`;
+
+const AreaOutline = styled("div")`
+  position: absolute;
+  border: 1px solid ${outlineColor};
+  border-radius: 3px;
+  background-color: ${outlineBackgroundColor};
+`;
+
+const CellOutline = styled("div")`
+  position: absolute;
+  border: 2px solid ${outlineColor};
+  border-radius: 3px;
+  word-break: break-word;
+  font-size: 13px;
+  display: flex;
+`;
+
+const CellOutlineHandle = styled("div")`
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: ${outlineColor};
+  cursor: crosshair;
+  // border: 1px solid white;
+  border-radius: 1px;
+`;
+
+const ExtendToOutline = styled("div")`
+  position: absolute;
+  border: 1px dashed ${outlineColor};
+  border-radius: 3px;
+`;
+
+export default Worksheet;
diff --git a/webapp/src/fonts.css b/webapp/src/fonts.css
new file mode 100644
index 0000000..9df9d6d
--- /dev/null
+++ b/webapp/src/fonts.css
@@ -0,0 +1,16 @@
+/* inter-regular - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: url("fonts/inter-v13-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+/* inter-600 - latin */
+@font-face {
+  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: url("fonts/inter-v13-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
diff --git a/webapp/src/fonts/inter-v13-latin-600.woff2 b/webapp/src/fonts/inter-v13-latin-600.woff2
new file mode 100644
index 0000000..da1c039
Binary files /dev/null and b/webapp/src/fonts/inter-v13-latin-600.woff2 differ
diff --git a/webapp/src/fonts/inter-v13-latin-regular.woff2 b/webapp/src/fonts/inter-v13-latin-regular.woff2
new file mode 100644
index 0000000..d228a4a
Binary files /dev/null and b/webapp/src/fonts/inter-v13-latin-regular.woff2 differ
diff --git a/webapp/src/i18n.ts b/webapp/src/i18n.ts
new file mode 100644
index 0000000..27f92df
--- /dev/null
+++ b/webapp/src/i18n.ts
@@ -0,0 +1,18 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+import translationEN from "./locale/en_us.json";
+
+const resources = {
+  "en-US": { translation: translationEN },
+};
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: "en-US",
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
diff --git a/webapp/src/icons/arrow-middle-from-line.svg b/webapp/src/icons/arrow-middle-from-line.svg
new file mode 100644
index 0000000..b771ca2
--- /dev/null
+++ b/webapp/src/icons/arrow-middle-from-line.svg
@@ -0,0 +1,14 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="arrow-middle-from-line" clip-path="url(#clip0_107_4135)">
+<path id="Vector" d="M8 14.6667V10.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M8 5.33333V1.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M14.6667 8H1.33334" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M10 12.6667L8 10.6667L6 12.6667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M10 3.33333L8 5.33333L6 3.33333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_107_4135">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/webapp/src/icons/border-bottom.svg b/webapp/src/icons/border-bottom.svg
new file mode 100644
index 0000000..e43473d
--- /dev/null
+++ b/webapp/src/icons/border-bottom.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 14H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 11.3333V3.33333C14 2.59695 13.403 2 12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-center-h.svg b/webapp/src/icons/border-center-h.svg
new file mode 100644
index 0000000..ef4d7fc
--- /dev/null
+++ b/webapp/src/icons/border-center-h.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.33333V3.33333C14 2.59695 13.403 2 12.6667 2H8M14 10.6667V12.6667C14 13.403 13.403 14 12.6667 14H8M2 10.6667V12.6667C2 13.403 2.59695 14 3.33333 14H8M2 5.33333V3.33333C2 2.59695 2.59695 2 3.33333 2H8M8 14V10.6667M8 2V5.33333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-center-v.svg b/webapp/src/icons/border-center-v.svg
new file mode 100644
index 0000000..ddb5527
--- /dev/null
+++ b/webapp/src/icons/border-center-v.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6667 2H12.6667C13.403 2 14 2.59695 14 3.33333V8M5.33333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V8M5.33333 14H3.33333C2.59695 14 2 13.403 2 12.6667V8M10.6667 14H12.6667C13.403 14 14 13.403 14 12.6667V8M2 8H5.33333M14 8H10.6667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-inner.svg b/webapp/src/icons/border-inner.svg
new file mode 100644
index 0000000..3754ceb
--- /dev/null
+++ b/webapp/src/icons/border-inner.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 5.33333V3.33333C14 2.59695 13.403 2 12.6667 2H10.6667M14 10.6667V12.6667C14 13.403 13.403 14 12.6667 14H10.6667M2 10.6667V12.6667C2 13.403 2.59695 14 3.33333 14H5.33333M2 5.33333V3.33333C2 2.59695 2.59695 2 3.33333 2H5.33333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-left.svg b/webapp/src/icons/border-left.svg
new file mode 100644
index 0000000..5a2913f
--- /dev/null
+++ b/webapp/src/icons/border-left.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66667 2H12.6667C13.403 2 14 2.59695 14 3.33333V12.6667C14 13.403 13.403 14 12.6667 14H4.66667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-none.svg b/webapp/src/icons/border-none.svg
new file mode 100644
index 0000000..6e8fb15
--- /dev/null
+++ b/webapp/src/icons/border-none.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-outer.svg b/webapp/src/icons/border-outer.svg
new file mode 100644
index 0000000..9521af0
--- /dev/null
+++ b/webapp/src/icons/border-outer.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.66667 8H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4.66667L8 11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-right.svg b/webapp/src/icons/border-right.svg
new file mode 100644
index 0000000..2bd7e15
--- /dev/null
+++ b/webapp/src/icons/border-right.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3333 2H3.33333C2.59695 2 2 2.59695 2 3.33333V12.6667C2 13.403 2.59695 14 3.33333 14H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H11.3333" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 2V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/border-style.svg b/webapp/src/icons/border-style.svg
new file mode 100644
index 0000000..a74cde3
--- /dev/null
+++ b/webapp/src/icons/border-style.svg
@@ -0,0 +1,15 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<!-- <path d="M14 4H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 2"/>
+<path d="M14 12H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.01 2"/> -->
+<style>
+    line {
+      stroke: black;
+    }
+  </style>
+<line x1="0" y1="2" x2="16" y2="2" />
+  <!-- Dashes and gaps of the same size -->
+<line x1="0" y1="8" x2="16" y2="8" stroke-dasharray="2.28 2.28" />
+  <!-- Dashes and gaps of different sizes -->
+<line x1="0" y1="14" x2="16" y2="14" stroke-dasharray="1 2" />
+</svg>
diff --git a/webapp/src/icons/border-top.svg b/webapp/src/icons/border-top.svg
new file mode 100644
index 0000000..9051f73
--- /dev/null
+++ b/webapp/src/icons/border-top.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 4.66667V12.6667C14 13.403 13.403 14 12.6667 14H3.33333C2.59695 14 2 13.403 2 12.6667V4.66667" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 2H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 8H14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 4.66667V14" stroke="#B2B2B2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/decrease-decimal.svg b/webapp/src/icons/decrease-decimal.svg
new file mode 100644
index 0000000..ab46d1e
--- /dev/null
+++ b/webapp/src/icons/decrease-decimal.svg
@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11.3333H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 9.33333L5 11.3333L7 13.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66667 4.33333C7.66667 3.59695 7.06971 3 6.33333 3C5.59695 3 5 3.59695 5 4.33333V5.66667C5 6.40305 5.59695 7 6.33333 7C7.06971 7 7.66667 6.40305 7.66667 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7H3.00667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/delete-column.svg b/webapp/src/icons/delete-column.svg
new file mode 100644
index 0000000..36fc423
--- /dev/null
+++ b/webapp/src/icons/delete-column.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.33333L2 12.6667C2 13.403 2.59695 14 3.33333 14L3.66667 14C4.40305 14 5 13.403 5 12.6667L5 3.33333C5 2.59695 4.40305 2 3.66667 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6L2 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6L11 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 10L2 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10L11 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 3.33333L11 12.6667C11 13.403 11.597 14 12.3333 14L12.6667 14C13.403 14 14 13.403 14 12.6667L14 3.33333C14 2.59695 13.403 2 12.6667 2L12.3333 2C11.597 2 11 2.59695 11 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 9.41422L9.41421 6.58579" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 6.58578L9.41421 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/delete-row.svg b/webapp/src/icons/delete-row.svg
new file mode 100644
index 0000000..ffebabf
--- /dev/null
+++ b/webapp/src/icons/delete-row.svg
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V3.66667C2 4.40305 2.59695 5 3.33333 5H12.6667C13.403 5 14 4.40305 14 3.66667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.6667 11H3.33333C2.59695 11 2 11.597 2 12.3333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V12.3333C14 11.597 13.403 11 12.6667 11Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 11V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.58578 6.58578L9.41421 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.41422 6.58578L6.58579 9.41421" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/fx.svg b/webapp/src/icons/fx.svg
new file mode 100644
index 0000000..fb9e203
--- /dev/null
+++ b/webapp/src/icons/fx.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.182 13.305C0.303333 13.3917 0.468 13.435 0.676 13.435C0.962 13.435 1.24367 13.3483 1.521 13.175C1.79833 13.0103 2.05833 12.7937 2.301 12.525C2.55233 12.2563 2.77333 11.9703 2.964 11.667C3.16333 11.3637 3.32367 11.069 3.445 10.783C3.575 10.5057 3.653 10.276 3.679 10.094L4.459 5.011H5.954V4.439H4.537L4.706 3.36C4.80133 2.75334 4.96167 2.281 5.187 1.943C5.421 1.59634 5.73733 1.423 6.136 1.423C6.422 1.423 6.67767 1.488 6.903 1.618L7.189 1.787H7.293L7.566 1.28C7.592 1.23667 7.61367 1.189 7.631 1.137C7.657 1.085 7.67 1.04167 7.67 1.007C7.67 0.93767 7.64833 0.881336 7.605 0.838003C7.57033 0.786003 7.49233 0.72967 7.371 0.669003C7.30167 0.643003 7.22367 0.621336 7.137 0.604003C7.05033 0.578003 6.95933 0.565002 6.864 0.565002C6.53467 0.565002 6.20967 0.651669 5.889 0.825003C5.56833 0.98967 5.265 1.21067 4.979 1.488C4.693 1.75667 4.43733 2.047 4.212 2.359C3.98667 2.66234 3.80033 2.957 3.653 3.243C3.51433 3.52034 3.432 3.75434 3.406 3.945L3.328 4.439H2.249V5.011H3.25L2.405 10.692C2.31833 11.2813 2.17533 11.745 1.976 12.083C1.77667 12.4297 1.508 12.603 1.17 12.603C0.953333 12.603 0.788667 12.564 0.676 12.486L0.39 12.278H0.312L0.0779999 12.746C0.026 12.85 0 12.9367 0 13.006C0 13.1187 0.0606667 13.2183 0.182 13.305ZM5.90545 9.98999C5.82745 10.1027 5.78845 10.211 5.78845 10.315H6.65945C6.70279 10.211 6.75045 10.1113 6.80245 10.016C6.85445 9.91199 6.93245 9.78199 7.03645 9.62599C7.14045 9.46132 7.30079 9.23166 7.51745 8.93699C7.73412 8.64232 8.03312 8.25232 8.41445 7.76699L9.45445 10.341H9.49345L11.2745 9.92499V9.82099L10.3385 9.44399L9.37645 6.98699C9.80112 6.50166 10.1521 6.11166 10.4295 5.81699C10.7068 5.52232 10.9235 5.29266 11.0795 5.12799C11.2441 4.96332 11.3568 4.83332 11.4175 4.73799C11.4868 4.63399 11.5215 4.53432 11.5215 4.43899H10.7025C10.6678 4.52566 10.6288 4.61666 10.5855 4.71199C10.5421 4.79866 10.4728 4.91566 10.3775 5.06299C10.2908 5.20166 10.1565 5.39666 9.97445 5.64799C9.79245 5.89932 9.54545 6.22866 9.23345 6.63599L8.31045 4.30899H8.27145L6.43845 4.72499V4.82899L7.38745 5.21899L8.27145 7.40299C7.78612 7.95766 7.38312 8.40399 7.06245 8.74199C6.74179 9.07999 6.48612 9.34432 6.29545 9.53499C6.11345 9.72566 5.98345 9.87732 5.90545 9.98999Z" fill="#828282"/>
+</svg>
diff --git a/webapp/src/icons/increase-decimal.svg b/webapp/src/icons/increase-decimal.svg
new file mode 100644
index 0000000..c8ffa01
--- /dev/null
+++ b/webapp/src/icons/increase-decimal.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 11.3333H5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5 9.33333L12.5 11.3333L10.5 13.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.66667 4.33333C7.66667 3.59695 7.06971 3 6.33333 3C5.59695 3 5 3.59695 5 4.33333V5.66667C5 6.40305 5.59695 7 6.33333 7C7.06971 7 7.66667 6.40305 7.66667 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3333 4.33333C12.3333 3.59695 11.7364 3 11 3C10.2636 3 9.66667 3.59695 9.66667 4.33333V5.66667C9.66667 6.40305 10.2636 7 11 7C11.7364 7 12.3333 6.40305 12.3333 5.66667V4.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 7H3.00667" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/index.ts b/webapp/src/icons/index.ts
new file mode 100644
index 0000000..5f2dd16
--- /dev/null
+++ b/webapp/src/icons/index.ts
@@ -0,0 +1,46 @@
+import DecimalPlacesDecreaseIcon from "./decrease-decimal.svg?react";
+import DecimalPlacesIncreaseIcon from "./increase-decimal.svg?react";
+
+import BorderBottomIcon from "./border-bottom.svg?react";
+import BorderCenterHIcon from "./border-center-h.svg?react";
+import BorderCenterVIcon from "./border-center-v.svg?react";
+import BorderInnerIcon from "./border-inner.svg?react";
+import BorderLeftIcon from "./border-left.svg?react";
+import BorderNoneIcon from "./border-none.svg?react";
+import BorderOuterIcon from "./border-outer.svg?react";
+import BorderRightIcon from "./border-right.svg?react";
+import BorderStyleIcon from "./border-style.svg?react";
+import BorderTopIcon from "./border-top.svg?react";
+
+import ArrowMiddleFromLine from "./arrow-middle-from-line.svg?react";
+import DeleteColumnIcon from "./delete-column.svg?react";
+import DeleteRowIcon from "./delete-row.svg?react";
+import InsertColumnLeftIcon from "./insert-column-left.svg?react";
+import InsertColumnRightIcon from "./insert-column-right.svg?react";
+import InsertRowAboveIcon from "./insert-row-above.svg?react";
+import InsertRowBelow from "./insert-row-below.svg?react";
+
+import Fx from "./fx.svg?react";
+
+export {
+  ArrowMiddleFromLine,
+  DecimalPlacesDecreaseIcon,
+  DecimalPlacesIncreaseIcon,
+  BorderBottomIcon,
+  BorderCenterHIcon,
+  BorderCenterVIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderTopIcon,
+  BorderNoneIcon,
+  BorderStyleIcon,
+  DeleteColumnIcon,
+  DeleteRowIcon,
+  InsertColumnLeftIcon,
+  InsertColumnRightIcon,
+  InsertRowAboveIcon,
+  InsertRowBelow,
+  Fx,
+};
diff --git a/webapp/src/icons/insert-column-left.svg b/webapp/src/icons/insert-column-left.svg
new file mode 100644
index 0000000..1d6e56d
--- /dev/null
+++ b/webapp/src/icons/insert-column-left.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 12.6667L14 3.33333C14 2.59695 13.403 2 12.6667 2L9.33333 2C8.59695 2 8 2.59695 8 3.33333L8 12.6667C8 13.403 8.59695 14 9.33333 14L12.6667 14C13.403 14 14 13.403 14 12.6667Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 6L8 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 10L8 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6L4 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 8L2 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/insert-column-right.svg b/webapp/src/icons/insert-column-right.svg
new file mode 100644
index 0000000..5cc5178
--- /dev/null
+++ b/webapp/src/icons/insert-column-right.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 3.33333L2 12.6667C2 13.403 2.59695 14 3.33333 14L6.66667 14C7.40305 14 8 13.403 8 12.6667L8 3.33333C8 2.59695 7.40305 2 6.66667 2L3.33333 2C2.59695 2 2 2.59695 2 3.33333Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 10L8 10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 6L8 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 10L12 6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 8L14 8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/insert-row-above.svg b/webapp/src/icons/insert-row-above.svg
new file mode 100644
index 0000000..336d193
--- /dev/null
+++ b/webapp/src/icons/insert-row-above.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 8H3.33333C2.59695 8 2 8.59695 2 9.33333V12.6667C2 13.403 2.59695 14 3.33333 14H12.6667C13.403 14 14 13.403 14 12.6667V9.33333C14 8.59695 13.403 8 12.6667 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 11H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 4H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/icons/insert-row-below.svg b/webapp/src/icons/insert-row-below.svg
new file mode 100644
index 0000000..8b7f88b
--- /dev/null
+++ b/webapp/src/icons/insert-row-below.svg
@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6667 2H3.33333C2.59695 2 2 2.59695 2 3.33333V6.66667C2 7.40305 2.59695 8 3.33333 8H12.6667C13.403 8 14 7.40305 14 6.66667V3.33333C14 2.59695 13.403 2 12.6667 2Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2 5H14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 2V8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 12H10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 10V14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/webapp/src/index.css b/webapp/src/index.css
new file mode 100644
index 0000000..ea1e941
--- /dev/null
+++ b/webapp/src/index.css
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/webapp/src/locale/en_us.json b/webapp/src/locale/en_us.json
new file mode 100644
index 0000000..0852bdf
--- /dev/null
+++ b/webapp/src/locale/en_us.json
@@ -0,0 +1,55 @@
+{
+  "toolbar": {
+    "redo": "Redo",
+    "undo": "Undo",
+    "copy_styles": "Copy styles",
+    "euro": "Format as Euro",
+    "percentage": "Format as Percentage",
+    "bold": "Bold",
+    "italic": "Italic",
+    "underline": "Underline",
+    "strike_through": "Strikethrough",
+    "align_left": "Align left",
+    "align_right": "Align right",
+    "align_center": "Align center",
+    "format_number": "Format number",
+    "font_color": "Font color",
+    "fill_color": "Fill color",
+    "borders": "Borders",
+    "decimal_places_increase": "Increase decimal places",
+    "decimal_places_decrease": "Decrease decimal places",
+    "format_menu": {
+      "auto": "Auto",
+      "number": "Number",
+      "percentage": "Percentage",
+      "currency_eur": "Euro (EUR)",
+      "currency_usd": "Dollar (USD",
+      "currency_gbp": "British Pound (GBD)",
+      "date_short": "Short date",
+      "date_long": "Long date",
+      "custom": "Custom",
+      "number_example": "1,000.00",
+      "percentage_example": "10%",
+      "currency_eur_example": "€",
+      "currency_usd_example": "$",
+      "currency_gbp_example": "£",
+      "date_short_example": "09/24/2024",
+      "date_long_example": "Tuesday, September 24, 2024"
+    }
+  },
+  "num_fmt": {
+    "title": "Custom number format",
+    "label": "Number format",
+    "save": "Save"
+  },
+  "sheet_rename": {
+    "rename": "Save",
+    "label": "New name",
+    "title": "Rename Sheet"
+  },
+  "formula_input": {
+    "update": "Update",
+    "label": "Formula",
+    "title": "Update formula"
+  }
+}
diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
new file mode 100644
index 0000000..edb6ee8
--- /dev/null
+++ b/webapp/src/main.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import { theme } from "./theme.ts";
+
+// biome-ignore lint: we know the 'root' element exists.
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>,
+);
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
new file mode 100644
index 0000000..6f4080d
--- /dev/null
+++ b/webapp/src/theme.ts
@@ -0,0 +1,66 @@
+import { createTheme } from "@mui/material/styles";
+import "./fonts.css";
+
+export const theme = createTheme({
+  typography: {
+    fontFamily: "Inter",
+  },
+  palette: {
+    common: {
+      black: "#272525",
+      white: "#FFF",
+    },
+    primary: {
+      main: "#F2994A",
+      light: "#EFAA6D",
+      dark: "#D68742",
+      contrastText: "#FFF",
+    },
+    secondary: {
+      main: "#2F80ED",
+      light: "#4E92EC",
+      dark: "#2B6EC8",
+      contrastText: "#FFF",
+    },
+    error: {
+      main: "#EB5757",
+      light: "#E77A7A",
+      dark: "#CB4C4C",
+      contrastText: "#FFF",
+    },
+    warning: {
+      main: "#F2C94C",
+      light: "#EED384",
+      dark: "#D6B244",
+      contrastText: "#FFF",
+    },
+    info: {
+      main: "#9E9E9E",
+      light: "#E0E0E0",
+      dark: "#757575",
+      contrastText: "#FFF",
+    },
+    success: {
+      main: "#27AE60",
+      light: "#57BD82",
+      dark: "#239152",
+      contrastText: "#FFF",
+    },
+    grey: {
+      "50": "#F2F2F2",
+      "100": "#F5F5F5",
+      "200": "#EEEEEE",
+      "300": "#E0E0E0",
+      "400": "#BDBDBD",
+      "500": "#9E9E9E",
+      "600": "#757575",
+      "700": "#616161",
+      "800": "#424242",
+      "900": "#333333",
+      A100: "#F2F2F2",
+      A200: "#EEEEEE",
+      A400: "#bdbdbd",
+      A700: "#616161",
+    },
+  },
+});
diff --git a/webapp/src/vite-env.d.ts b/webapp/src/vite-env.d.ts
new file mode 100644
index 0000000..b1f45c7
--- /dev/null
+++ b/webapp/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />
diff --git a/webapp/tsconfig.json b/webapp/tsconfig.json
new file mode 100644
index 0000000..47787c0
--- /dev/null
+++ b/webapp/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/webapp/tsconfig.node.json b/webapp/tsconfig.node.json
new file mode 100644
index 0000000..42872c5
--- /dev/null
+++ b/webapp/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/webapp/vite.config.ts b/webapp/vite.config.ts
new file mode 100644
index 0000000..60a7425
--- /dev/null
+++ b/webapp/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import svgr from 'vite-plugin-svgr';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), svgr()],
+  server: {
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: ['..'],
+    },
+  },
+});
diff --git a/xlsx/src/import/mod.rs b/xlsx/src/import/mod.rs
index d130237..cbc0d49 100644
--- a/xlsx/src/import/mod.rs
+++ b/xlsx/src/import/mod.rs
@@ -93,6 +93,8 @@ fn load_xlsx_from_reader<R: Read + std::io::Seek>(
         0,
         WorkbookView {
             sheet: selected_sheet,
+            window_width: 800,
+            window_height: 600,
         },
     );
     Ok(Workbook {
@@ -111,8 +113,6 @@ fn load_xlsx_from_reader<R: Read + std::io::Seek>(
     })
 }
 
-// Public methods
-
 /// Imports a file from disk into an internal representation
 fn load_from_excel(file_name: &str, locale: &str, tz: &str) -> Result<Workbook, XlsxError> {
     let file_path = std::path::Path::new(file_name);
@@ -134,6 +134,7 @@ pub fn load_from_xlsx(file_name: &str, locale: &str, tz: &str) -> Result<Model,
 pub fn load_from_icalc(file_name: &str) -> Result<Model, XlsxError> {
     let contents = fs::read(file_name)
         .map_err(|e| XlsxError::IO(format!("Could not extract workbook name: {}", e)))?;
-    let workbook: Workbook = bitcode::decode(&contents).unwrap();
+    let workbook: Workbook = bitcode::decode(&contents)
+        .map_err(|e| XlsxError::IO(format!("Failed to decode file: {}", e)))?;
     Model::from_workbook(workbook).map_err(XlsxError::Workbook)
 }
diff --git a/xlsx/tests/example.ic b/xlsx/tests/example.ic
index 1d31219..740cd6b 100644
Binary files a/xlsx/tests/example.ic and b/xlsx/tests/example.ic differ