UPDATE: Adds web app (#79)

Things missing:

* Browse mode
* Front end tests
* Storybook

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

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;

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;

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 {

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;

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);
+}

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);
+        }
+    }
+}

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);
+}

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);
+}

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);
+}

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);
+        }
+    }
+}

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()
+        )
     );
 }
 

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);
+}

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

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]

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,
+}

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;

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(())
+    }
+}

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)

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(())
+    }
 }

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;
+}

webapp/.gitignore

@@ -0,0 +1,2 @@
+node_modules/*
+dist/*

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.

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
+    }
+  }
+}

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>

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"
+  }
+}

webapp/src/App.css

@@ -0,0 +1,6 @@
+#root {
+  position: absolute;
+  inset: 10px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+}

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;

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

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;

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;

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;

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;

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;

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",
+}

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>
+  );
+};

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;

webapp/src/components/navigation/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./navigation";
+export type { NavigationProps } from "./navigation";

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;

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;

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;

webapp/src/components/navigation/types.ts

@@ -0,0 +1,5 @@
+export interface SheetOptions {
+  name: string;
+  color: string;
+  sheetId: number;
+}

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");
+});

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);
+});

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;

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;
+}

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;

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;

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}`;
+};

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;

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;
+  }
+}

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;

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+ */
+}

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;

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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,
+};

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>

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>

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>

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>

webapp/src/index.css

@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}

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"
+  }
+}

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>,
+);

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",
+    },
+  },
+});

webapp/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

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" }]
+}

webapp/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

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: ['..'],
+    },
+  },
+});

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)
 }