Merge pull request #19 from JoyOfHardware/add_term_support

Add term support

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "rust-analyzer.cargo.cfgs": {
+        "FASTWAVE_PLATFORM": "TAURI",
+        // "FASTWAVE_PLATFORM": "BROWSER",
+    },
+    // https://github.com/rustwasm/wasm-bindgen/issues/2339#issuecomment-2147636233
+    "rust-analyzer.cargo.extraEnv": {
+        "RUSTFLAGS": "--cfg=web_sys_unstable_apis"
+    },
+    // to prevent rebuilding from scratch on each change
+    "rust-analyzer.cargo.target": "wasm32-unknown-unknown"
+}

Cargo.toml

@@ -3,7 +3,9 @@ members = [
     "frontend",
     "backend",
     "shared",
-    "src-tauri",
+    "src-tauri", 
+    "test_files/components/rust_decoder",
+    "test_files/components/rust_diagram_connector",
 ]
 resolver = "2"
 

Makefile.toml

@@ -18,6 +18,7 @@ dependencies = [
     "install_mzoon", 
     "init_pixi_canvas",
     "init_tauri_glue",
+    "init_excalidraw_canvas",
 ]
 
 [tasks.start]
@@ -27,6 +28,7 @@ run_task = { fork = true, parallel = true, name = [
     "tauri_dev_with_cleanup", 
     "watch_pixi_canvas",
     "watch_tauri_glue",
+    "watch_excalidraw_canvas",
 ]}
 
 [tasks.start_browser]
@@ -36,6 +38,7 @@ run_task = { fork = true, parallel = true, name = [
     "mzoon_start_with_cleanup", 
     "watch_pixi_canvas",
     "watch_tauri_glue",
+    "watch_excalidraw_canvas",
 ]}
 
 [tasks.start_browser_release]
@@ -45,6 +48,7 @@ run_task = { fork = true, parallel = true, name = [
     "mzoon_start_release_with_cleanup", 
     "watch_pixi_canvas",
     "watch_tauri_glue",
+    "watch_excalidraw_canvas",
 ]}
 
 [tasks.bundle]
@@ -161,7 +165,7 @@ description = "Install Tauri CLI (tauri) locally"
 command = "cargo"
 args = [
     "install", 
-    "tauri-cli@=2.0.0-beta.17", 
+    "tauri-cli@=2.1.0", 
     "--locked",
     "--root",
     "tauri",
@@ -204,7 +208,14 @@ run_task = { fork = true, parallel = true, name = [
 description = "Compile `frontend/typescript/pixi_canvas` on change"
 cwd = "frontend/typescript/pixi_canvas"
 command = "node_modules/.bin/esbuild"
-args = ["pixi_canvas.ts", "--bundle", "--outfile=../bundles/pixi_canvas.js", "--format=esm", "--watch"]
+args = [
+    "pixi_canvas.ts",
+    "--bundle",
+    "--outfile=../bundles/pixi_canvas.js",
+    "--format=esm",
+    "--minify",
+    "--watch"
+]
 
 [tasks.watch_build_pixi_canvas.windows]
 command = "node_modules/.bin/esbuild.cmd"
@@ -249,7 +260,14 @@ run_task = { fork = true, parallel = true, name = [
 description = "Compile `frontend/typescript/tauri_glue` on change"
 cwd = "frontend/typescript/tauri_glue"
 command = "node_modules/.bin/esbuild"
-args = ["tauri_glue.ts", "--bundle", "--outfile=../bundles/tauri_glue.js", "--format=esm", "--watch"]
+args = [
+    "tauri_glue.ts",
+    "--bundle",
+    "--outfile=../bundles/tauri_glue.js",
+    "--format=esm",
+    "--minify",
+    "--watch"
+]
 
 [tasks.watch_build_tauri_glue.windows]
 command = "node_modules/.bin/esbuild.cmd"
@@ -272,3 +290,68 @@ args = [
 [tasks.watch_typecheck_tauri_glue.windows]
 command = "node_modules/.bin/tsc.cmd"
 
+## excalidraw_canvas ##
+
+[tasks.init_excalidraw_canvas]
+description = "Initialize `frontend/typescript/excalidraw_canvas`"
+dependencies = [
+    "init_excalidraw_canvas_npm_install", 
+    "init_excalidraw_canvas_en_json", 
+]
+
+[tasks.init_excalidraw_canvas_npm_install]
+description = "Partly initialize `frontend/typescript/excalidraw_canvas`"
+cwd = "frontend/typescript/excalidraw_canvas"
+command = "npm"
+args = ["install"]
+
+[tasks.init_excalidraw_canvas_npm_install.windows]
+command = "npm.cmd"
+
+[tasks.init_excalidraw_canvas_en_json]
+description = "Partly initialize `frontend/typescript/excalidraw_canvas`"
+cwd = "frontend/typescript/excalidraw_canvas"
+command = "cp"
+args = ["-r", "locales", "node_modules/@excalidraw/excalidraw/types/"]
+
+[tasks.watch_excalidraw_canvas]
+description = "Build and typescheck Typescript on change"
+run_task = { fork = true, parallel = true, name = [
+    "watch_build_excalidraw_canvas",
+    "watch_typecheck_excalidraw_canvas",
+]}
+
+[tasks.watch_build_excalidraw_canvas]
+description = "Compile `frontend/typescript/excalidraw_canvas` on change"
+cwd = "frontend/typescript/excalidraw_canvas"
+command = "node_modules/.bin/esbuild"
+args = [
+    "excalidraw_canvas.tsx",
+    "--bundle",
+    "--outfile=../bundles/excalidraw_canvas.js",
+    "--format=esm",
+    "--minify",
+    "--watch",
+]
+
+[tasks.watch_build_excalidraw_canvas.windows]
+command = "node_modules/.bin/esbuild.cmd"
+
+[tasks.watch_typecheck_excalidraw_canvas]
+description = "Typecheck `frontend/typescript/excalidraw_canvas` on change"
+cwd = "frontend/typescript/excalidraw_canvas"
+command = "node_modules/.bin/tsc"
+args = [
+    "excalidraw_canvas.tsx",
+    "--jsx", "react",
+    "--watch",
+    "--noEmit",
+    "--preserveWatchOutput",
+    "--strict",
+    "--target", "esnext",
+    "--module", "esnext",
+    "--moduleResolution", "bundler",
+]
+
+[tasks.watch_typecheck_excalidraw_canvas.windows]
+command = "node_modules/.bin/tsc.cmd"

MoonZoon.toml

@@ -25,6 +25,7 @@ frontend = [
 backend = [
     "backend/Cargo.toml",
     "backend/src",
+    "backend/globals.js",
     "backend/index.js",
     "backend/style.css",
 ]

README.md

@@ -3,39 +3,91 @@
 
 ---
 
+<p align="center">Default state - Dark (new design)</p>
+<p align="center">
+  <img width="800" src="docs/home_dark.png" alt="Fastwave - Default state - Dark (not implemented yet)" />
+</p>
+
+<p align="center">Loaded files - Dark (new design)</p>
+<p align="center">
+  <img width="800" src="docs/loaded_files_dark.png" alt="Fastwave - Loaded files - Dark (not implemented yet)" />
+</p>
+
+<p align="center">Default state - Light (new design)</p>
+<p align="center">
+  <img width="800" src="docs/home_light.png" alt="Fastwave - Default state - Light (not implemented yet)" />
+</p>
+
+<p align="center">Loaded files - Light (new design)</p>
+<p align="center">
+  <img width="800" src="docs/loaded_files_light.png" alt="Fastwave - Loaded files - Light (not implemented yet)" />
+</p>
+
+
+<p align="center">Browser (Firefox)</p>
 <p align="center">
   <img width="800" src="docs/screenshot_firefox.png" alt="Fastwave - Browser (Firefox)" />
-  Browser (Firefox)
 </p>
 
+<p align="center">Desktop, miller columns and tree</p>
 <p align="center">
   <img width="800" src="docs/video_desktop.gif" alt="Fastwave - Desktop, miller columns and tree" />
-  Desktop, miller columns and tree 
 </p>
 
+<p align="center">Zoom, pan and basic number formats</p>
 <p align="center">
   <img width="800" src="docs/video_zoom_formatting_simple.gif" alt="Fastwave - Zoom, pan and basic number formats" />
-  Zoom, pan and basic number formats 
 </p>
 
+<p align="center">Zoom and all formats</p>
 <p align="center">
   <img width="800" src="docs/video_zoom_formatting.gif" alt="Fastwave - Zoom and all formats" />
-  Zoom and all formats 
 </p>
 
+<p align="center">Javascript commands</p>
 <p align="center">
   <img width="800" src="docs/video_javascript_commands.gif" alt="Fastwave - Javascript commands" />
-  Javascript commands 
 </p>
 
+<p align="center">Load and save selected variables</p>
 <p align="center">
   <img width="800" src="docs/video_load_save_selected_vars.gif" alt="Fastwave - Load and save selected variables" />
-  Load and save selected variables 
+</p>
+
+<p align="center">Decoders (Plugins) Demo</p> 
+<p align="center">
+  <img width="800" src="docs/video_decoders.gif" alt="Fastwave - Decoders demo" />
+</p>
+
+<p align="center">Decoder Interface</p>
+<p align="center">
+  <img width="500" src="docs/screenshot_world_wit.png" alt="Fastwave - Decoder Interface" />
+</p>
+
+<p align="center">Diagrams - open, edit, JS API</p>
+<p align="center">
+  <img width="800" src="docs/video_diagrams.gif" alt="Fastwave - Diagrams" />
+</p>
+
+<p align="center">Diagram Connector Demo</p> 
+<p align="center">
+  <img width="800" src="docs/video_diagram_connector.gif" alt="Fastwave - Diagram Connector demo" />
+</p>
+
+<p align="center">Diagram Connector Code snippet</p>
+<p align="center">
+  <img width="500" src="docs/screenshot_diagram_connector_rs.png" alt="Fastwave - Diagram Connector Code snippet" />
 </p>
 
 ---
 
-### Install requirements:
+### Installation (desktop version):
+
+Download and install from [Releases](https://github.com/JoyOfHardware/FastWave2.0/releases/latest)
+
+---
+
+### Requirements to build from source:
 
 1. Install [Rust](https://www.rust-lang.org/tools/install)
 2. Install [Node.js](https://nodejs.org/)
@@ -87,8 +139,24 @@ Troubleshooting:
 
 1. `makers format`
 
+---
 
+### Rebuild Decoders:
+
+See `test_files/components/[language]_decoder/README.md`
+
+---
 
 ### Test files
 
 See the folder `test_files`.
+
+---
+
+# Sponsors
+
+<p align="center">
+    <a href="https://NLnet.nl">
+        <img src="docs/nlnet_logo.png" width="269" alt="Logo NLnet">
+    </a>
+</p>

backend/favicon.html

@@ -0,0 +1,8 @@
+<link rel="apple-touch-icon" sizes="180x180" href="/_api/public/favicon/apple-touch-icon.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/_api/public/favicon/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="16x16" href="/_api/public/favicon/favicon-16x16.png">
+<link rel="manifest" href="/_api/public/favicon/site.webmanifest">
+<link rel="shortcut icon" href="/_api/public/favicon/favicon.ico">
+<meta name="msapplication-TileColor" content="#00a300">
+<meta name="msapplication-config" content="/_api/public/favicon/browserconfig.xml">
+<meta name="theme-color" content="#ffffff">

backend/globals.js

@@ -0,0 +1,7 @@
+// -- Excalidraw settings --
+// @TODO replace with "true" once Preact is integrated into ExcalidrawCanvas
+var process = { env: { IS_PREACT: "false" } };
+// @TODO probably remove or update once Preact is integrated into ExcalidrawCanvas
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true };
+window.EXCALIDRAW_ASSET_PATH = "/_api/public/excalidraw/";
+// -- / --

backend/index.js

@@ -1,2 +1,3 @@
 import { FW } from '/_api/pkg/frontend.js';
 window.FW = FW;
+

backend/src/main.rs

@@ -3,7 +3,13 @@ use moon::*;
 async fn frontend() -> Frontend {
     Frontend::new()
         .title("FastWave")
+        .append_to_head(include_str!("../favicon.html")) // realfavicongenerator.net
         .append_to_head(concat!("<style>", include_str!("../style.css"), "</style>"))
+        .append_to_head(concat!(
+            "<script>",
+            include_str!("../globals.js"),
+            "</script>"
+        ))
         .append_to_head(concat!(
             "<script type=\"module\">",
             include_str!("../index.js"),

backend/style.css

@@ -1,3 +1,4 @@
 html {
-    background-color: DarkSlateBlue;
-}
+    /* background-color: DarkSlateBlue; */
+    background-color: oklch(41.43% 0.125 262.26);
+}

frontend/Cargo.toml

@@ -10,7 +10,11 @@ publish.workspace = true
 [dev-dependencies]
 wasm-bindgen-test = "0.3.19"
 
+[lints.rust]
+unexpected_cfgs = { level = "allow", check-cfg = ['cfg(FASTWAVE_PLATFORM)'] }
+
 [dependencies]
+unicode-segmentation = "1.10"
 zoon.workspace = true
 wellen.workspace = true
 shared = { path = "../shared", features = ["frontend"] }

frontend/src/command_panel.rs

@@ -0,0 +1,141 @@
+use crate::{script_bridge, theme::*};
+use zoon::*;
+
+pub struct CommandPanel {}
+
+impl CommandPanel {
+    pub fn new() -> impl Element {
+        Self {}.root()
+    }
+
+    fn root(&self) -> impl Element {
+        let command_result: Mutable<Option<Result<JsValue, JsValue>>> = <_>::default();
+        Row::new()
+            .s(Align::new().top())
+            .s(Gap::both(30))
+            .s(Width::fill())
+            .s(Padding::new().x(20).bottom(20))
+            .item(self.command_editor_panel(command_result.clone()))
+            .item(self.command_result_panel(command_result.read_only()))
+    }
+
+    fn command_editor_panel(
+        &self,
+        command_result: Mutable<Option<Result<JsValue, JsValue>>>,
+    ) -> impl Element {
+        Column::new()
+            .s(Align::new().top())
+            .s(Gap::new().y(10))
+            .s(Width::growable())
+            .item(
+                Row::new()
+                    .s(Gap::new().x(15))
+                    .s(Padding::new().x(5))
+                    .item(El::new().child("Javascript commands"))
+                    .item(El::new().s(Align::new().right()).child("Shift + Enter")),
+            )
+            .item(self.command_editor(command_result))
+    }
+
+    fn command_editor(
+        &self,
+        command_result: Mutable<Option<Result<JsValue, JsValue>>>,
+    ) -> impl Element {
+        let (script, script_signal) = Mutable::new_and_signal_cloned(String::new());
+        // @TODO perhaps replace with an element with syntax highlighter like https://github.com/WebCoder49/code-input later
+        TextArea::new()
+            .s(Background::new().color(COLOR_SLATE_BLUE))
+            .s(Padding::new().x(10).y(8))
+            .s(RoundedCorners::all(15))
+            .s(Height::default().min(50))
+            .s(Width::fill().min(300))
+            .s(Font::new()
+                .tracking(1)
+                .weight(FontWeight::Medium)
+                .color(COLOR_WHITE)
+                .family([FontFamily::new("Courier New"), FontFamily::Monospace]))
+            .s(Shadows::new([Shadow::new()
+                .inner()
+                .color(COLOR_DARK_SLATE_BLUE)
+                .blur(4)]))
+            // @TODO `spellcheck` and `resize` to MZ API? (together with autocomplete and others?)
+            .update_raw_el(|raw_el| {
+                raw_el
+                    .attr("spellcheck", "false")
+                    .style("resize", "vertical")
+            })
+            .placeholder(Placeholder::new("FW.say_hello()").s(Font::new().color(COLOR_LIGHT_BLUE)))
+            .label_hidden("command editor panel")
+            .text_signal(script_signal)
+            .on_change(clone!((script, command_result) move |text| {
+                script.set_neq(text);
+                command_result.set_neq(None);
+            }))
+            .on_key_down_event_with_options(EventOptions::new().preventable(), move |event| {
+                if event.key() == &Key::Enter {
+                    let RawKeyboardEvent::KeyDown(raw_event) = event.raw_event.clone();
+                    if raw_event.shift_key() {
+                        // @TODO move `prevent_default` to MZ API (next to the `pass_to_parent` method?)
+                        raw_event.prevent_default();
+                        Task::start(clone!((script, command_result) async move {
+                            let result = script_bridge::strict_eval(&script.lock_ref()).await;
+                            command_result.set(Some(result));
+                        }));
+                    }
+                }
+            })
+    }
+
+    fn command_result_panel(
+        &self,
+        command_result: ReadOnlyMutable<Option<Result<JsValue, JsValue>>>,
+    ) -> impl Element {
+        Column::new()
+            .s(Gap::new().y(10))
+            .s(Align::new().top())
+            .s(Scrollbars::both())
+            .s(Padding::new().x(5))
+            .s(Width::growable().max(750))
+            .item(El::new().child("Command result"))
+            .item(self.command_result_el(command_result))
+    }
+
+    fn command_result_el(
+        &self,
+        command_result: ReadOnlyMutable<Option<Result<JsValue, JsValue>>>,
+    ) -> impl Element {
+        El::new()
+            .s(Font::new()
+                .tracking(1)
+                .weight(FontWeight::Medium)
+                .color(COLOR_WHITE)
+                .family([FontFamily::new("Courier New"), FontFamily::Monospace]))
+            .s(Scrollbars::both())
+            .s(Height::default().max(100))
+            .child_signal(command_result.signal_ref(|result| {
+                fn format_complex_js_value(js_value: &JsValue) -> String {
+                    let value = format!("{js_value:?}");
+                    let value = value.strip_prefix("JsValue(").unwrap_throw();
+                    let value = value.strip_suffix(')').unwrap_throw();
+                    value.to_owned()
+                }
+                match result {
+                    Some(Ok(js_value)) => {
+                        if let Some(string_value) = js_value.as_string() {
+                            string_value
+                        } else if let Some(number_value) = js_value.as_f64() {
+                            number_value.to_string()
+                        } else if let Some(bool_value) = js_value.as_bool() {
+                            bool_value.to_string()
+                        } else {
+                            format_complex_js_value(js_value)
+                        }
+                    }
+                    Some(Err(js_value)) => {
+                        format!("ERROR: {}", format_complex_js_value(js_value))
+                    }
+                    None => "-".to_owned(),
+                }
+            }))
+    }
+}

frontend/src/controls_panel.rs

@@ -1,4 +1,4 @@
-use crate::{Filename, Layout};
+use crate::{theme::*, Filename, Layout};
 use std::cell::Cell;
 use std::mem;
 use std::ops::Not;
@@ -238,9 +238,9 @@ impl ControlsPanel {
         let background_color = map_ref! {
             let is_selected = is_selected,
             let is_hovered = button_hovered_signal => match (*is_selected, *is_hovered) {
-                (true, _) => color!("BlueViolet"),
-                (false, true) => color!("MediumSlateBlue"),
-                (false, false) => color!("SlateBlue"),
+                (true, _) => COLOR_BLUE_VIOLET,
+                (false, true) => COLOR_MEDIUM_SLATE_BLUE,
+                (false, false) => COLOR_SLATE_BLUE,
             }
         };
         let task_collapse_on_parent_collapse = {
@@ -332,7 +332,7 @@ impl ControlsPanel {
                         .map_true(|| 10),
                 ))
             .s(Height::fill())
-            .s(Font::new().color_signal(hovered_signal.map_true(|| color!("LightBlue"))))
+            .s(Font::new().color_signal(hovered_signal.map_true(|| COLOR_LIGHT_BLUE)))
             .label(
                 El::new()
                     .s(Transform::with_signal_self(layout_and_expanded.map(
@@ -488,7 +488,7 @@ impl ControlsPanel {
             Button::new()
                 .s(Padding::new().x(15).y(5))
                 .s(Background::new().color_signal(
-                    hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                    hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
                 ))
                 .s(RoundedCorners::all(15))
                 .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))

frontend/src/diagram_panel.rs

@@ -0,0 +1,40 @@
+use zoon::*;
+
+mod excalidraw_canvas;
+use excalidraw_canvas::ExcalidrawCanvas;
+pub use excalidraw_canvas::ExcalidrawController;
+
+#[derive(Clone)]
+pub struct DiagramPanel {
+    canvas_controller: Mutable<Mutable<Option<SendWrapper<ExcalidrawController>>>>,
+}
+
+impl DiagramPanel {
+    pub fn new(
+        canvas_controller: Mutable<Mutable<Option<SendWrapper<ExcalidrawController>>>>,
+    ) -> impl Element {
+        Self { canvas_controller }.root()
+    }
+
+    fn root(&self) -> impl Element {
+        Column::new()
+            .s(Padding::all(20))
+            .s(Scrollbars::y_and_clip_x())
+            .s(Width::fill())
+            .s(Height::fill())
+            .s(Gap::new().y(20))
+            .item(self.canvas())
+    }
+
+    fn canvas(&self) -> impl Element {
+        let canvas_controller = self.canvas_controller.clone();
+        ExcalidrawCanvas::new()
+            .s(Align::new().top())
+            .s(Width::fill())
+            .s(Height::fill())
+            .task_with_controller(move |controller| {
+                canvas_controller.set(controller.clone());
+                async {}
+            })
+    }
+}

frontend/src/diagram_panel/excalidraw_canvas.rs

@@ -0,0 +1,90 @@
+pub use js_bridge::ExcalidrawController;
+use zoon::*;
+
+pub struct ExcalidrawCanvas {
+    raw_el: RawHtmlEl<web_sys::HtmlElement>,
+    controller: Mutable<Option<SendWrapper<js_bridge::ExcalidrawController>>>,
+    task_with_controller: Mutable<Option<TaskHandle>>,
+}
+
+impl Element for ExcalidrawCanvas {}
+
+impl RawElWrapper for ExcalidrawCanvas {
+    type RawEl = RawHtmlEl<web_sys::HtmlElement>;
+    fn raw_el_mut(&mut self) -> &mut Self::RawEl {
+        &mut self.raw_el
+    }
+}
+
+impl Styleable<'_> for ExcalidrawCanvas {}
+impl KeyboardEventAware for ExcalidrawCanvas {}
+impl MouseEventAware for ExcalidrawCanvas {}
+impl PointerEventAware for ExcalidrawCanvas {}
+impl TouchEventAware for ExcalidrawCanvas {}
+impl AddNearbyElement<'_> for ExcalidrawCanvas {}
+impl HasIds for ExcalidrawCanvas {}
+
+impl ExcalidrawCanvas {
+    pub fn new() -> Self {
+        let controller: Mutable<Option<SendWrapper<js_bridge::ExcalidrawController>>> =
+            Mutable::new(None);
+        let task_with_controller = Mutable::new(None);
+        Self {
+            controller: controller.clone(),
+            task_with_controller: task_with_controller.clone(),
+            raw_el: El::new()
+                .s(RoundedCorners::all(10))
+                .s(Clip::both())
+                .after_insert(clone!((controller) move |element| {
+                    Task::start(async move {
+                        let excalidraw_controller = SendWrapper::new(js_bridge::ExcalidrawController::new());
+                        excalidraw_controller.init(&element).await;
+                        controller.set(Some(excalidraw_controller));
+                    });
+                }))
+                .after_remove(move |_| {
+                    drop(task_with_controller);
+                })
+                .into_raw_el(),
+        }
+    }
+
+    pub fn task_with_controller<FUT: Future<Output = ()> + 'static>(
+        self,
+        f: impl FnOnce(Mutable<Option<SendWrapper<js_bridge::ExcalidrawController>>>) -> FUT,
+    ) -> Self {
+        self.task_with_controller
+            .set(Some(Task::start_droppable(f(self.controller.clone()))));
+        self
+    }
+}
+
+mod js_bridge {
+    use zoon::*;
+
+    // Note: Add all corresponding methods to `frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx`
+    #[wasm_bindgen(module = "/typescript/bundles/excalidraw_canvas.js")]
+    extern "C" {
+        #[derive(Clone)]
+        pub type ExcalidrawController;
+
+        #[wasm_bindgen(constructor)]
+        pub fn new() -> ExcalidrawController;
+
+        #[wasm_bindgen(method)]
+        pub async fn init(this: &ExcalidrawController, parent_element: &JsValue);
+
+        #[wasm_bindgen(method)]
+        pub fn draw_diagram_element(this: &ExcalidrawController, excalidraw_element: JsValue);
+
+        #[wasm_bindgen(method)]
+        pub fn listen_for_component_text_changes(
+            this: &ExcalidrawController,
+            component_id: &str,
+            on_change: &Closure<dyn Fn(String)>,
+        );
+
+        #[wasm_bindgen(method)]
+        pub fn set_component_text(this: &ExcalidrawController, component_id: &str, text: &str);
+    }
+}

frontend/src/header_panel.rs

@@ -1,10 +1,12 @@
-use crate::{platform, script_bridge, Filename, Layout};
+use crate::{platform, theme::*, Filename, Layout, Mode};
 use std::sync::Arc;
 use zoon::*;
+use crate::term::TERM_OPEN;
 
 pub struct HeaderPanel {
     hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
     layout: Mutable<Layout>,
+    mode: Mutable<Mode>,
     loaded_filename: Mutable<Option<Filename>>,
 }
 
@@ -12,12 +14,14 @@ impl HeaderPanel {
     pub fn new(
         hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
         layout: Mutable<Layout>,
+        mode: Mutable<Mode>,
         loaded_filename: Mutable<Option<Filename>>,
     ) -> impl Element {
         Self {
             hierarchy,
             layout,
             loaded_filename,
+            mode,
         }
         .root()
     }
@@ -32,9 +36,11 @@ impl HeaderPanel {
                     .s(Padding::new().top(5))
                     .s(Gap::both(15))
                     .item(self.load_button())
-                    .item(self.layout_switcher()),
+                    .item(self.layout_switcher())
+                    .item(self.mode_switcher())
+                    .item(self.open_terminal())
+                    .item(self.open_konata_file()),
             )
-            .item(self.command_panel())
     }
 
     #[cfg(FASTWAVE_PLATFORM = "TAURI")]
@@ -45,7 +51,7 @@ impl HeaderPanel {
         Button::new()
             .s(Padding::new().x(20).y(10))
             .s(Background::new().color_signal(
-                hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
             ))
             .s(Align::new().left())
             .s(RoundedCorners::all(15))
@@ -85,8 +91,7 @@ impl HeaderPanel {
                 Label::new()
                     .s(Padding::new().x(20).y(10))
                     .s(Background::new().color_signal(
-                        hovered_signal
-                            .map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                        hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
                     ))
                     .s(Align::new().left())
                     .s(RoundedCorners::all(15))
@@ -154,7 +159,7 @@ impl HeaderPanel {
         Button::new()
             .s(Padding::new().x(20).y(10))
             .s(Background::new().color_signal(
-                hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
             ))
             .s(RoundedCorners::all(15))
             .label_signal(layout.signal().map(|layout| match layout {
@@ -170,134 +175,65 @@ impl HeaderPanel {
             })
     }
 
-    fn command_panel(&self) -> impl Element {
-        let command_result: Mutable<Option<Result<JsValue, JsValue>>> = <_>::default();
-        Row::new()
-            .s(Align::new().top())
-            .s(Gap::both(30))
-            .s(Scrollbars::both())
-            .s(Width::fill())
-            .item(self.command_editor_panel(command_result.clone()))
-            .item(self.command_result_panel(command_result.read_only()))
-    }
-
-    fn command_editor_panel(
-        &self,
-        command_result: Mutable<Option<Result<JsValue, JsValue>>>,
-    ) -> impl Element {
-        Column::new()
-            .s(Align::new().top())
-            .s(Gap::new().y(10))
-            .s(Width::growable())
-            .item(
-                Row::new()
-                    .s(Gap::new().x(15))
-                    .s(Padding::new().x(5))
-                    .item(El::new().child("Javascript commands"))
-                    .item(El::new().s(Align::new().right()).child("Shift + Enter")),
-            )
-            .item(self.command_editor(command_result))
-    }
-
-    fn command_editor(
-        &self,
-        command_result: Mutable<Option<Result<JsValue, JsValue>>>,
-    ) -> impl Element {
-        let (script, script_signal) = Mutable::new_and_signal_cloned(String::new());
-        // @TODO perhaps replace with an element with syntax highlighter like https://github.com/WebCoder49/code-input later
-        TextArea::new()
-            .s(Background::new().color(color!("SlateBlue")))
-            .s(Padding::new().x(10).y(8))
+    fn mode_switcher(&self) -> impl Element {
+        let mode = self.mode.clone();
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        Button::new()
+            .s(Padding::new().x(20).y(10))
+            .s(Background::new().color_signal(
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
+            ))
             .s(RoundedCorners::all(15))
-            .s(Height::default().min(50))
-            .s(Width::fill().min(300))
-            .s(Font::new()
-                .tracking(1)
-                .weight(FontWeight::Medium)
-                .color(color!("White"))
-                .family([FontFamily::new("Courier New"), FontFamily::Monospace]))
-            .s(Shadows::new([Shadow::new()
-                .inner()
-                .color(color!("DarkSlateBlue"))
-                .blur(4)]))
-            // @TODO `spellcheck` and `resize` to MZ API? (together with autocomplete and others?)
-            .update_raw_el(|raw_el| {
-                raw_el
-                    .attr("spellcheck", "false")
-                    .style("resize", "vertical")
+            .label_signal(mode.signal().map(|mode| match mode {
+                Mode::Waves => "Diagrams",
+                Mode::Diagrams => "Waves",
+            }))
+            .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+            .on_press(move || {
+                mode.update(|mode| match mode {
+                    Mode::Waves => Mode::Diagrams,
+                    Mode::Diagrams => Mode::Waves,
+                })
             })
-            .placeholder(
-                Placeholder::new("FW.say_hello()").s(Font::new().color(color!("LightBlue"))),
+    }
+
+    fn open_konata_file(&self) -> impl Element {
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        Button::new()
+            .s(Padding::new().x(20).y(10))
+            .s(Background::new().color_signal(
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
+            ))
+            .s(Align::new().left())
+            .s(RoundedCorners::all(15))
+            .label(
+                El::new()
+                    .s(Font::new().no_wrap())
+                    .child("Open Konata file.."),
             )
-            .label_hidden("command editor panel")
-            .text_signal(script_signal)
-            .on_change(clone!((script, command_result) move |text| {
-                script.set_neq(text);
-                command_result.set_neq(None);
-            }))
-            .on_key_down_event_with_options(EventOptions::new().preventable(), move |event| {
-                if event.key() == &Key::Enter {
-                    let RawKeyboardEvent::KeyDown(raw_event) = event.raw_event.clone();
-                    if raw_event.shift_key() {
-                        // @TODO move `prevent_default` to MZ API (next to the `pass_to_parent` method?)
-                        raw_event.prevent_default();
-                        let result = script_bridge::strict_eval(&script.lock_ref());
-                        command_result.set(Some(result));
-                    }
-                }
+            .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+            .on_press(move || Task::start(platform::open_konata_file()))
+    }
+
+    fn open_terminal(&self) -> impl Element {
+        let (hovered, hovered_signal) = Mutable::new_and_signal(false);
+        Button::new()
+            .s(Padding::new().x(20).y(10))
+            .s(Background::new().color_signal(
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
+            ))
+            .s(Align::new().left())
+            .s(RoundedCorners::all(15))
+            .label(
+                El::new()
+                    .s(Font::new().no_wrap())
+                    .child("Open Terminal"),
+            )
+            .on_hovered_change(move |is_hovered| hovered.set_neq(is_hovered))
+            .on_press(move || {
+                let term_open = TERM_OPEN.get();
+                TERM_OPEN.set(!term_open);
+
             })
     }
-
-    fn command_result_panel(
-        &self,
-        command_result: ReadOnlyMutable<Option<Result<JsValue, JsValue>>>,
-    ) -> impl Element {
-        Column::new()
-            .s(Gap::new().y(10))
-            .s(Align::new().top())
-            .s(Scrollbars::both())
-            .s(Padding::new().x(5))
-            .s(Width::growable().max(750))
-            .item(El::new().child("Command result"))
-            .item(self.command_result_el(command_result))
-    }
-
-    fn command_result_el(
-        &self,
-        command_result: ReadOnlyMutable<Option<Result<JsValue, JsValue>>>,
-    ) -> impl Element {
-        El::new()
-            .s(Font::new()
-                .tracking(1)
-                .weight(FontWeight::Medium)
-                .color(color!("White"))
-                .family([FontFamily::new("Courier New"), FontFamily::Monospace]))
-            .s(Scrollbars::both())
-            .s(Height::default().max(100))
-            .child_signal(command_result.signal_ref(|result| {
-                fn format_complex_js_value(js_value: &JsValue) -> String {
-                    let value = format!("{js_value:?}");
-                    let value = value.strip_prefix("JsValue(").unwrap_throw();
-                    let value = value.strip_suffix(')').unwrap_throw();
-                    value.to_owned()
-                }
-                match result {
-                    Some(Ok(js_value)) => {
-                        if let Some(string_value) = js_value.as_string() {
-                            string_value
-                        } else if let Some(number_value) = js_value.as_f64() {
-                            number_value.to_string()
-                        } else if let Some(bool_value) = js_value.as_bool() {
-                            bool_value.to_string()
-                        } else {
-                            format_complex_js_value(js_value)
-                        }
-                    }
-                    Some(Err(js_value)) => {
-                        format!("ERROR: {}", format_complex_js_value(js_value))
-                    }
-                    None => "-".to_owned(),
-                }
-            }))
-    }
 }

frontend/src/main.rs

@@ -1,4 +1,6 @@
-use std::sync::Arc;
+use shared::DiagramConnectorMessage;
+use term::TERM_OPEN;
+use std::{mem, sync::Arc};
 use zoon::*;
 
 mod platform;
@@ -7,12 +9,24 @@ mod script_bridge;
 mod controls_panel;
 use controls_panel::ControlsPanel;
 
+mod diagram_panel;
+use diagram_panel::{DiagramPanel, ExcalidrawController};
+
 mod waveform_panel;
-use waveform_panel::WaveformPanel;
+use waveform_panel::{PixiController, WaveformPanel};
 
 mod header_panel;
 use header_panel::HeaderPanel;
 
+mod command_panel;
+use command_panel::CommandPanel;
+
+pub mod theme;
+use theme::*;
+
+pub mod term;
+use shared::term::{TerminalDownMsg, TerminalScreen};
+
 #[derive(Clone, Copy, Default)]
 enum Layout {
     Tree,
@@ -20,6 +34,15 @@ enum Layout {
     Columns,
 }
 
+#[derive(Clone, Copy, Default)]
+enum Mode {
+    // @TODO make default
+    // #[default]
+    Waves,
+    #[default]
+    Diagrams,
+}
+
 type Filename = String;
 
 #[derive(Default)]
@@ -27,70 +50,157 @@ struct Store {
     selected_var_refs: MutableVec<wellen::VarRef>,
     hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
     loaded_filename: Mutable<Option<Filename>>,
+    pixi_canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
+    excalidraw_canvas_controller: Mutable<Mutable<Option<SendWrapper<ExcalidrawController>>>>,
 }
 
 static STORE: Lazy<Store> = lazy::default();
 
 fn main() {
     start_app("app", root);
+
     Task::start(async {
         // https://github.com/tauri-apps/tauri/issues/5170
         Timer::sleep(100).await;
         platform::show_window().await;
     });
+
+    Task::start(async {
+        platform::listen_diagram_connectors_messages(|message| {
+            match message {
+                DiagramConnectorMessage::ListenForComponentTextChanges {
+                    diagram_connector_name,
+                    component_id,
+                } => {
+                    let closure = Closure::new({
+                        // @TODO Rcs/Arcs?
+                        let diagram_connector_name = diagram_connector_name.clone();
+                        let component_id = component_id.clone();
+                        move |text| {
+                            Task::start(platform::notify_diagram_connector_text_change(
+                                diagram_connector_name.clone(),
+                                component_id.clone(),
+                                text,
+                            ));
+                        }
+                    });
+                    STORE
+                        .excalidraw_canvas_controller
+                        .lock_ref()
+                        .lock_ref()
+                        .as_ref()
+                        .unwrap_throw()
+                        .listen_for_component_text_changes(&component_id, &closure);
+                    // @TODO don't forget
+                    mem::forget(closure);
+                }
+                DiagramConnectorMessage::SetComponentText { component_id, text } => STORE
+                    .excalidraw_canvas_controller
+                    .lock_ref()
+                    .lock_ref()
+                    .as_ref()
+                    .unwrap_throw()
+                    .set_component_text(&component_id, &text),
+            }
+        }).await;
+        platform::listen_term_update(|down_msg| {
+            term::TERMINAL_STATE.set(down_msg);
+        }).await;
+    });
 }
 
 fn root() -> impl Element {
     let hierarchy = STORE.hierarchy.clone();
     let selected_var_refs = STORE.selected_var_refs.clone();
     let layout: Mutable<Layout> = <_>::default();
+    let mode: Mutable<Mode> = <_>::default();
     let loaded_filename = STORE.loaded_filename.clone();
+    let pixi_canvas_controller = STORE.pixi_canvas_controller.clone();
+    let excalidraw_canvas_controller = STORE.excalidraw_canvas_controller.clone();
     Column::new()
         .s(Height::fill())
         .s(Scrollbars::y_and_clip_x())
-        .s(Font::new().color(color!("Lavender")))
+        .s(Font::new().color(COLOR_LAVENDER))
         .item(HeaderPanel::new(
             hierarchy.clone(),
             layout.clone(),
+            mode.clone(),
             loaded_filename.clone(),
         ))
-        .item(
-            Row::new()
-                .s(Scrollbars::y_and_clip_x())
-                .s(Gap::new().x(15))
-                .s(Height::growable().min(150))
-                .item(ControlsPanel::new(
-                    hierarchy.clone(),
-                    selected_var_refs.clone(),
-                    layout.clone(),
-                    loaded_filename.clone(),
-                ))
-                .item_signal({
-                    let hierarchy = hierarchy.clone();
-                    let selected_var_refs = selected_var_refs.clone();
-                    let loaded_filename = loaded_filename.clone();
-                    map_ref!{
-                        let layout = layout.signal(),
-                        let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
-                            (*hierarchy_is_some && matches!(layout, Layout::Tree)).then(clone!((hierarchy, selected_var_refs, loaded_filename) move || WaveformPanel::new(
+        .item_signal(mode.signal().map(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move |mode| match mode {
+            Mode::Waves => {
+                Column::new()
+                    .s(Height::fill())
+                    .s(Scrollbars::y_and_clip_x())
+                    .item(
+                        Row::new()
+                            .s(Scrollbars::y_and_clip_x())
+                            .s(Gap::new().x(15))
+                            .s(Height::growable().min(150))
+                            .item(ControlsPanel::new(
                                 hierarchy.clone(),
                                 selected_var_refs.clone(),
+                                layout.clone(),
                                 loaded_filename.clone(),
-                            )))
+                            ))
+                            .item_signal({
+                                let hierarchy = hierarchy.clone();
+                                let selected_var_refs = selected_var_refs.clone();
+                                let loaded_filename = loaded_filename.clone();
+                                let pixi_canvas_controller = pixi_canvas_controller.clone();
+                                map_ref!{
+                                    let layout = layout.signal(),
+                                    let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
+                                        (*hierarchy_is_some && matches!(layout, Layout::Tree)).then(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move || WaveformPanel::new(
+                                            hierarchy.clone(),
+                                            selected_var_refs.clone(),
+                                            loaded_filename.clone(),
+                                            pixi_canvas_controller.clone(),
+                                        )))
+                                    }
+                                }
+                            }),
+                    )
+                    .item_signal({
+                        let hierarchy = hierarchy.clone();
+                        let selected_var_refs = selected_var_refs.clone();
+                        let loaded_filename = loaded_filename.clone();
+                        let pixi_canvas_controller = pixi_canvas_controller.clone();
+                        map_ref!{
+                            let layout = layout.signal(),
+                            let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
+                                (*hierarchy_is_some && matches!(layout, Layout::Columns)).then(clone!((hierarchy, selected_var_refs, loaded_filename, pixi_canvas_controller) move || WaveformPanel::new(
+                                    hierarchy.clone(),
+                                    selected_var_refs.clone(),
+                                    loaded_filename.clone(),
+                                    pixi_canvas_controller.clone(),
+                                )))
+                            }
                         }
-                    }
-                }),
-        )
-        .item_signal(
-            map_ref!{
-                let layout = layout.signal(),
-                let hierarchy_is_some = hierarchy.signal_ref(Option::is_some) => {
-                    (*hierarchy_is_some && matches!(layout, Layout::Columns)).then(clone!((hierarchy, selected_var_refs, loaded_filename) move || WaveformPanel::new(
-                        hierarchy.clone(),
-                        selected_var_refs.clone(),
-                        loaded_filename.clone(),
-                    )))
-                }
+                    })
             }
+            Mode::Diagrams => {
+                Column::new()
+                    .s(Height::fill())
+                    .s(Scrollbars::y_and_clip_x())
+                    .item(DiagramPanel::new(excalidraw_canvas_controller.clone()))
+            }
+        })))
+        .item(CommandPanel::new())
+        .item_signal(
+            TERM_OPEN.signal_cloned().map(
+                |term_open| {
+                    match term_open {
+                        true =>
+                            El::new()
+                                .s(Height::fill().max(400).min(400))
+                                .s(Padding::all(5))
+                                .child(term::root()),
+                        false =>
+                            El::new()
+                                .child("")
+                    }
+                }
+            )
         )
 }

frontend/src/platform.rs

@@ -3,6 +3,9 @@
 
 // NOTE: `FASTWAVE_PLATFORM` is set in `Makefile.toml` tasks and then in `build.rs`
 
+use crate::STORE;
+use shared::DiagramConnectorMessage;
+
 #[cfg(FASTWAVE_PLATFORM = "TAURI")]
 mod tauri;
 #[cfg(FASTWAVE_PLATFORM = "TAURI")]
@@ -16,6 +19,18 @@ use browser as platform;
 type Filename = String;
 type JavascriptCode = String;
 
+type AddedDecodersCount = usize;
+type RemovedDecodersCount = usize;
+type DecoderPath = String;
+
+type AddedDiagramConnectorsCount = usize;
+type RemovedDiagramConnectorsCount = usize;
+type DiagramConnectorPath = String;
+type DiagramConnectorName = String;
+type ComponentId = String;
+
+use shared::term::{TerminalDownMsg, TerminalScreen};
+
 pub async fn show_window() {
     platform::show_window().await
 }
@@ -58,3 +73,65 @@ pub async fn load_signal_and_get_timeline(
 pub async fn unload_signal(signal_ref: wellen::SignalRef) {
     platform::unload_signal(signal_ref).await
 }
+
+pub async fn send_char(c : String) {
+    platform::send_char(c).await
+}
+
+pub async fn add_decoders(decoder_paths: Vec<DecoderPath>) -> AddedDecodersCount {
+    let count = platform::add_decoders(decoder_paths).await;
+    if count > 0 {
+        redraw_all_timeline_rows().await;
+    }
+    count
+}
+
+pub async fn remove_all_decoders() -> RemovedDecodersCount {
+    let count = platform::remove_all_decoders().await;
+    if count > 0 {
+        redraw_all_timeline_rows().await;
+    }
+    count
+}
+
+async fn redraw_all_timeline_rows() {
+    if let Some(controller) = STORE.pixi_canvas_controller.get_cloned().get_cloned() {
+        controller.redraw_all_rows().await
+    }
+}
+
+pub async fn add_diagram_connectors(
+    diagram_connector_paths: Vec<DecoderPath>,
+) -> AddedDecodersCount {
+    let count = platform::add_diagram_connectors(diagram_connector_paths).await;
+    count
+}
+
+pub async fn remove_all_diagram_connectors() -> RemovedDecodersCount {
+    let count = platform::remove_all_diagram_connectors().await;
+    count
+}
+
+pub async fn listen_diagram_connectors_messages(
+    on_message: impl FnMut(DiagramConnectorMessage) + 'static,
+) {
+    platform::listen_diagram_connectors_messages(on_message).await;
+}
+
+pub async fn listen_term_update(
+    on_message: impl FnMut(TerminalDownMsg) + 'static,
+) {
+    platform::listen_term_update(on_message).await;
+}
+
+pub async fn notify_diagram_connector_text_change(
+    diagram_connector: DiagramConnectorName,
+    component_id: ComponentId,
+    text: String,
+) {
+    platform::notify_diagram_connector_text_change(diagram_connector, component_id, text).await;
+}
+
+pub async fn open_konata_file() {
+    platform::open_konata_file().await;
+}

frontend/src/platform/browser.rs

@@ -1,7 +1,7 @@
 use shared::wellen_helpers;
 use std::sync::Mutex;
 use wellen::simple::Waveform;
-use zoon::*;
+use zoon::{eprintln, *};
 
 #[derive(Default)]
 struct BrowserPlatformStore {
@@ -111,7 +111,9 @@ pub(super) async fn load_signal_and_get_timeline(
         timeline_viewport_x,
         block_height,
         var_format,
-    );
+        |value| Box::pin(async { value }),
+    )
+    .await;
     timeline
 }
 
@@ -120,3 +122,52 @@ pub(super) async fn unload_signal(signal_ref: wellen::SignalRef) {
     let waveform = waveform_lock.as_mut().unwrap_throw();
     waveform.unload_signals(&[signal_ref]);
 }
+
+pub(super) async fn add_decoders(
+    _decoder_paths: Vec<super::DecoderPath>,
+) -> super::AddedDecodersCount {
+    // @TODO error message for user
+    eprintln!("Adding decoders is not supported in the browser.");
+    0
+}
+
+pub(super) async fn remove_all_decoders() -> super::RemovedDecodersCount {
+    // @TODO error message for user
+    eprintln!("Removing decoders is not supported in the browser.");
+    0
+}
+
+pub(super) async fn add_diagram_connectors(
+    diagram_connector_paths: Vec<super::DecoderPath>,
+) -> super::AddedDecodersCount {
+    // @TODO error message for user
+    eprintln!("Adding diagram connectors is not supported in the browser.");
+    0
+}
+
+pub(super) async fn remove_all_diagram_connectors() -> super::RemovedDiagramConnectorsCount {
+    // @TODO error message for user
+    eprintln!("Removing diagram connectors is not supported in the browser.");
+    0
+}
+
+pub async fn listen_diagram_connectors_messages(
+    on_message: impl FnMut(DiagramConnectorMessage) + 'static,
+) {
+    // @TODO error message for user
+    eprintln!("Removing listen for diagram connectors messages is not supported in the browser.");
+}
+
+pub async fn notify_diagram_connector_text_change(
+    diagram_connector: DiagramConnectorName,
+    component_id: ComponentId,
+    text: String,
+) {
+    // @TODO error message for user
+    eprintln!("Diagram connectors notifications are not supported in the browser.");
+}
+
+pub async fn open_konata_file() {
+    // @TODO error message for user
+    eprintln!("Opening Konata files is not supported in the browser.");
+}

frontend/src/platform/tauri.rs

@@ -1,3 +1,5 @@
+use shared::DiagramConnectorMessage;
+use shared::term::{TerminalDownMsg, TerminalScreen};
 use zoon::*;
 
 pub(super) async fn show_window() {
@@ -56,6 +58,74 @@ pub(super) async fn unload_signal(signal_ref: wellen::SignalRef) {
         .unwrap_throw()
 }
 
+pub(super) async fn send_char(c : String) {
+    tauri_glue::send_char(c)
+        .await
+        .unwrap_throw()
+}
+
+pub(super) async fn add_decoders(
+    decoder_paths: Vec<super::DecoderPath>,
+) -> super::AddedDecodersCount {
+    serde_wasm_bindgen::from_value(tauri_glue::add_decoders(decoder_paths).await.unwrap_throw())
+        .unwrap_throw()
+}
+
+pub(super) async fn remove_all_decoders() -> super::RemovedDecodersCount {
+    serde_wasm_bindgen::from_value(tauri_glue::remove_all_decoders().await.unwrap_throw())
+        .unwrap_throw()
+}
+
+pub(super) async fn add_diagram_connectors(
+    diagram_connector_paths: Vec<super::DecoderPath>,
+) -> super::AddedDiagramConnectorsCount {
+    serde_wasm_bindgen::from_value(
+        tauri_glue::add_diagram_connectors(diagram_connector_paths)
+            .await
+            .unwrap_throw(),
+    )
+    .unwrap_throw()
+}
+
+pub(super) async fn remove_all_diagram_connectors() -> super::RemovedDiagramConnectorsCount {
+    serde_wasm_bindgen::from_value(
+        tauri_glue::remove_all_diagram_connectors()
+            .await
+            .unwrap_throw(),
+    )
+    .unwrap_throw()
+}
+
+pub(super) async fn listen_diagram_connectors_messages(
+    mut on_message: impl FnMut(DiagramConnectorMessage) + 'static,
+) {
+    let on_message =
+        move |message: JsValue| on_message(serde_wasm_bindgen::from_value(message).unwrap_throw());
+    tauri_glue::listen_diagram_connectors_messages(Closure::new(on_message).into_js_value()).await
+}
+
+pub(super) async fn listen_term_update(
+    mut on_message: impl FnMut(TerminalDownMsg) + 'static,
+) {
+    let on_message =
+        move |message: JsValue| on_message(serde_wasm_bindgen::from_value(message).unwrap_throw());
+    tauri_glue::listen_term_update(Closure::new(on_message).into_js_value()).await
+}
+
+pub(super) async fn notify_diagram_connector_text_change(
+    diagram_connector: super::DiagramConnectorName,
+    component_id: super::ComponentId,
+    text: String,
+) {
+    tauri_glue::notify_diagram_connector_text_change(diagram_connector, component_id, text)
+        .await
+        .unwrap_throw();
+}
+
+pub(super) async fn open_konata_file() {
+    tauri_glue::open_konata_file().await;
+}
+
 mod tauri_glue {
     use zoon::*;
 
@@ -86,5 +156,37 @@ mod tauri_glue {
 
         #[wasm_bindgen(catch)]
         pub async fn unload_signal(signal_ref_index: usize) -> Result<(), JsValue>;
+
+        #[wasm_bindgen(catch)]
+        pub async fn send_char(c : String) -> Result<(), JsValue>;
+
+        #[wasm_bindgen(catch)]
+        pub async fn add_decoders(
+            decoder_paths: Vec<super::super::DecoderPath>,
+        ) -> Result<JsValue, JsValue>;
+
+        #[wasm_bindgen(catch)]
+        pub async fn remove_all_decoders() -> Result<JsValue, JsValue>;
+
+        #[wasm_bindgen(catch)]
+        pub async fn add_diagram_connectors(
+            diagram_connector_paths: Vec<super::super::DiagramConnectorPath>,
+        ) -> Result<JsValue, JsValue>;
+
+        #[wasm_bindgen(catch)]
+        pub async fn remove_all_diagram_connectors() -> Result<JsValue, JsValue>;
+
+        pub async fn listen_diagram_connectors_messages(on_event: JsValue);
+
+        pub async fn listen_term_update(on_event: JsValue);
+
+        #[wasm_bindgen(catch)]
+        pub async fn notify_diagram_connector_text_change(
+            diagram_connector: super::super::DiagramConnectorName,
+            component_id: super::super::ComponentId,
+            text: String,
+        ) -> Result<(), JsValue>;
+
+        pub async fn open_konata_file();
     }
 }

frontend/src/script_bridge.rs

@@ -1,15 +1,21 @@
-use crate::STORE;
+use crate::{platform, STORE};
 use wellen::GetItem;
 use zoon::*;
 
 type FullVarName = String;
 
-#[wasm_bindgen(
-    inline_js = r#"export function strict_eval(code) { "use strict"; return eval?.(`${code}`) }"#
-)]
+type AddedDecodersCount = usize;
+type RemovedDecodersCount = usize;
+type DecoderPath = String;
+
+type AddedDiagramConnectorsCount = usize;
+type RemovedDiagramConnectorsCount = usize;
+type DiagramConnectorPath = String;
+
+#[wasm_bindgen(module = "/typescript/bundles/strict_eval.js")]
 extern "C" {
     #[wasm_bindgen(catch)]
-    pub fn strict_eval(code: &str) -> Result<JsValue, JsValue>;
+    pub async fn strict_eval(code: &str) -> Result<JsValue, JsValue>;
 }
 
 #[wasm_bindgen]
@@ -67,4 +73,39 @@ impl FW {
         }
         Vec::new()
     }
+
+    /// JS: `FW.add_decoders(["../test_files/components/rust_decoder/rust_decoder.wasm"])` -> `1`
+    pub async fn add_decoders(decoder_paths: Vec<DecoderPath>) -> AddedDecodersCount {
+        platform::add_decoders(decoder_paths).await
+    }
+
+    /// JS: `FW.remove_all_decoders()` -> `5`
+    pub async fn remove_all_decoders() -> RemovedDecodersCount {
+        platform::remove_all_decoders().await
+    }
+
+    // @TODO replace argument once Excalidraw's `convertToExcalidrawElements` works: {type: "rectangle", x: 100, y: 250}
+    /// JS: `FW.draw_diagram_element({id: 'my_rectangle', type: 'rectangle', x: 500,  y: 250, strokeColor: 'black', backgroundColor: 'lightblue', fillStyle: 'solid', strokeWidth: 5, strokeStyle: 'solid', roundness: null, roughness: 0, opacity: 100, width: 100, height: 50, angle: 0, seed: 0, version: 0, versionNonce: 0, isDeleted: false, groupIds: [], frameId: null, boundElements: null, updated: 0, link: null, locked: false, customData: {}})`
+    pub async fn draw_diagram_element(excalidraw_element: JsValue) {
+        if let Some(controller) = STORE
+            .excalidraw_canvas_controller
+            .lock_ref()
+            .lock_ref()
+            .as_ref()
+        {
+            controller.draw_diagram_element(excalidraw_element)
+        }
+    }
+
+    /// JS: `FW.add_diagram_connectors(["../test_files/components/rust_diagram_connector/rust_diagram_connector.wasm"])` -> `1`
+    pub async fn add_diagram_connectors(
+        connector_paths: Vec<DiagramConnectorPath>,
+    ) -> AddedDiagramConnectorsCount {
+        platform::add_diagram_connectors(connector_paths).await
+    }
+
+    /// JS: `FW.remove_all_diagram_connectors()` -> `5`
+    pub async fn remove_all_diagram_connectors() -> RemovedDiagramConnectorsCount {
+        platform::remove_all_diagram_connectors().await
+    }
 }

frontend/src/term.rs

@@ -0,0 +1,142 @@
+use std::ops::Index;
+
+use chrono::format;
+use zoon::*;
+use zoon::{println, eprintln, *};
+use shared::term::{TerminalDownMsg, TerminalScreen, TerminalUpMsg};
+use unicode_segmentation::UnicodeSegmentation;
+
+// use tokio::time::timeout;
+pub static TERM_OPEN: Lazy<Mutable<bool>> = Lazy::new(|| {false.into()});
+
+pub const TERMINAL_COLOR: Oklch = color!("oklch(20% 0.125 262.26)");
+
+pub static  TERMINAL_STATE: Lazy<Mutable<TerminalDownMsg>> =
+    Lazy::new(|| {
+        Mutable::new(TerminalDownMsg::TermNotStarted)
+    });
+
+pub fn root() -> impl Element {
+    let terminal =
+        El::new()
+            .s(Width::fill())
+            .s(Height::fill())
+            .s(Background::new().color(TERMINAL_COLOR))
+            .s(RoundedCorners::all(7))
+            .s(Font::new().family([
+                FontFamily::new("Lucida Console"),
+                FontFamily::new("Courier"),
+                FontFamily::new("monospace")
+                ]))
+            .update_raw_el(|raw_el| {
+                raw_el.global_event_handler(|event: events::KeyDown| {
+                    send_char(
+                        (&event).key().as_str(),
+                        (&event).ctrl_key(),
+                    );
+                })
+            })
+            .child_signal(TERMINAL_STATE.signal_cloned().map(
+                |down_msg| {
+                    match down_msg {
+                        TerminalDownMsg::FullTermUpdate(term) => {
+                            make_grid_with_newlines(&term)
+                        },
+                        TerminalDownMsg::TermNotStarted => {
+                            "Term not yet started!".to_string()
+                        },
+                        TerminalDownMsg::BackendTermStartFailure(msg) => {
+                            format!("Error: BackendTermStartFailure: {}", msg)
+                        }
+                    }
+                }
+                )
+            )
+            ;
+    let root = Column::new()
+        .s(Width::fill())
+        .s(Height::fill())
+        .s(Align::new().top())
+        .item(terminal);
+    root
+}
+
+fn send_char(
+    s           : &str,
+    has_control : bool,
+    ) {
+    match process_str(s, has_control) {
+        Some(c) => {
+            let send_c = c.clone();
+            Task::start(async move {
+                crate::platform::send_char(send_c.to_string()).await;
+            });
+        }
+        None => {}
+    }
+
+}
+
+
+fn make_grid_with_newlines(term: &TerminalScreen) -> String {
+    let mut formatted = String::with_capacity(term.content.len() + (term.content.len() / term.cols as usize));
+
+    term.content.chars().enumerate().for_each(|(i, c)| {
+        formatted.push(c);
+        if (i + 1) as u16 % term.cols == 0 {
+            formatted.push('\n');
+        }
+    });
+
+    formatted
+}
+
+
+fn process_str(s: &str, has_ctrl: bool) -> Option<char> {
+    match s {
+        "Enter"         => {return Some('\n');}
+        "Escape"        => {return Some('\x1B');}
+        "Backspace"     => {return Some('\x08');}
+        "ArrowUp"       => {return Some('\x10');}
+        "ArrowDown"     => {return Some('\x0E');}
+        "ArrowLeft"     => {return Some('\x02');}
+        "ArrowRight"    => {return Some('\x06');}
+        "Control"       => {return None;}
+        "Shift"         => {return None;}
+        "Meta"          => {return None;}
+        "Alt"           => {return None;}
+        _ => {}
+    }
+
+    let mut graphemes = s.graphemes(true);
+    let first = graphemes.next();
+
+    if let Some(g) = first {
+        if g.len() == 1 {
+            if let Some(c) = g.chars().next() {
+                let c = process_for_ctrl_char(c, has_ctrl);
+                return Some(c);
+            }
+        }
+    }
+
+    None
+}
+
+// Helper function to process control characters
+
+fn is_lowercase_alpha(c: char) -> bool {
+    char_is_between_inclusive(c, 'a', 'z')
+}
+
+fn process_for_ctrl_char(c: char, has_ctrl: bool) -> char {
+    if has_ctrl {
+        (c as u8 & 0x1F) as char
+    } else {
+        c
+    }
+}
+
+fn char_is_between_inclusive(c : char, lo_char : char, hi_char : char) -> bool {
+    c >= lo_char && c <= hi_char
+}

frontend/src/theme.rs

@@ -0,0 +1,27 @@
+use zoon::*;
+
+// https://oklch.com/
+
+// pub const COLOR_BLUE_VIOLET: Rgba = color!("BlueViolet");  // oklch(53.38% 0.25 301.37)
+pub const COLOR_BLUE_VIOLET: Oklch = color!("oklch(53.38% 0.25 262.59)");
+
+// pub const COLOR_MEDIUM_SLATE_BLUE: Rgba = color!("MediumSlateBlue");   // oklch(60.45% 0.194 285.5)
+pub const COLOR_MEDIUM_SLATE_BLUE: Oklch = color!("oklch(60.45% 0.194 262.26)");
+
+// pub const COLOR_SLATE_BLUE_WITH_ALPHA: Rgba = color!("SlateBlue", 0.8);  // oklch(54.36% 0.171 285.54)
+pub const COLOR_SLATE_BLUE_WITH_ALPHA: Oklch = color!("oklch(54.36% 0.171 262.26)", 0.8);
+
+// pub const COLOR_SLATE_BLUE: Rgba = color!("SlateBlue");  // oklch(54.36% 0.171 285.54)
+pub const COLOR_SLATE_BLUE: Oklch = color!("oklch(54.36% 0.171 262.26)");
+
+// pub const COLOR_LIGHT_BLUE: Rgba = color!("LightBlue");  // oklch(85.62% 0.049 219.65)
+pub const COLOR_LIGHT_BLUE: Oklch = color!("oklch(85.62% 0.049 262.26)");
+
+// pub const COLOR_WHITE: Rgba = color!("White");  // oklch(100% 3.5594404384177905e-8 106.37411429114086)
+pub const COLOR_WHITE: Oklch = color!("oklch(100% 3.5594404384177905e-8 105.88)");
+
+// pub const COLOR_DARK_SLATE_BLUE: Rgba = color!("DarkSlateBlue");  // oklch(41.43% 0.125 286.04)
+pub const COLOR_DARK_SLATE_BLUE: Oklch = color!("oklch(41.43% 0.125 262.26)");
+
+// pub const COLOR_LAVENDER: Rgba = color!("Lavender");  // oklch(93.09% 0.027 285.86)
+pub const COLOR_LAVENDER: Oklch = color!("oklch(93.09% 0.027 262.26)");

frontend/src/waveform_panel.rs

@@ -1,10 +1,11 @@
-use crate::{platform, script_bridge, Filename};
+use crate::{platform, script_bridge, theme::*, Filename};
 use std::sync::Arc;
 use wellen::GetItem;
 use zoon::*;
 
 mod pixi_canvas;
-use pixi_canvas::{PixiCanvas, PixiController};
+use pixi_canvas::PixiCanvas;
+pub use pixi_canvas::PixiController;
 
 const ROW_HEIGHT: u32 = 40;
 const ROW_GAP: u32 = 4;
@@ -14,7 +15,7 @@ pub struct WaveformPanel {
     selected_var_refs: MutableVec<wellen::VarRef>,
     hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
     loaded_filename: Mutable<Option<Filename>>,
-    canvas_controller: Mutable<ReadOnlyMutable<Option<PixiController>>>,
+    canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
 }
 
 impl WaveformPanel {
@@ -22,12 +23,13 @@ impl WaveformPanel {
         hierarchy: Mutable<Option<Arc<wellen::Hierarchy>>>,
         selected_var_refs: MutableVec<wellen::VarRef>,
         loaded_filename: Mutable<Option<Filename>>,
+        canvas_controller: Mutable<Mutable<Option<SendWrapper<PixiController>>>>,
     ) -> impl Element {
         Self {
             selected_var_refs,
             hierarchy,
             loaded_filename,
-            canvas_controller: Mutable::new(Mutable::default().read_only()),
+            canvas_controller,
         }
         .root()
     }
@@ -85,7 +87,7 @@ impl WaveformPanel {
         Button::new()
             .s(Padding::new().x(20).y(10))
             .s(Background::new().color_signal(
-                hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
             ))
             .s(Align::new().left())
             .s(RoundedCorners::all(15))
@@ -96,7 +98,7 @@ impl WaveformPanel {
                     if let Some(javascript_code) =
                         platform::load_file_with_selected_vars(None).await
                     {
-                        match script_bridge::strict_eval(&javascript_code) {
+                        match script_bridge::strict_eval(&javascript_code).await {
                             Ok(js_value) => {
                                 zoon::println!("File with selected vars loaded: {js_value:?}")
                             }
@@ -120,8 +122,7 @@ impl WaveformPanel {
                 Label::new()
                     .s(Padding::new().x(20).y(10))
                     .s(Background::new().color_signal(
-                        hovered_signal
-                            .map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                        hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
                     ))
                     .s(Align::new().left())
                     .s(RoundedCorners::all(15))
@@ -153,7 +154,7 @@ impl WaveformPanel {
                                 if let Some(javascript_code) =
                                     platform::load_file_with_selected_vars(Some(file)).await
                                 {
-                                    match script_bridge::strict_eval(&javascript_code) {
+                                    match script_bridge::strict_eval(&javascript_code).await {
                                         Ok(js_value) => zoon::println!(
                                             "File with selected vars loaded: {js_value:?}"
                                         ),
@@ -176,7 +177,7 @@ impl WaveformPanel {
         Button::new()
             .s(Padding::new().x(20).y(10))
             .s(Background::new().color_signal(
-                hovered_signal.map_bool(|| color!("MediumSlateBlue"), || color!("SlateBlue")),
+                hovered_signal.map_bool(|| COLOR_MEDIUM_SLATE_BLUE, || COLOR_SLATE_BLUE),
             ))
             .s(RoundedCorners::all(15))
             .label("Save")
@@ -347,7 +348,7 @@ impl WaveformPanel {
             .s(Height::exact(ROW_HEIGHT))
             .s(Width::growable())
             .s(Background::new().color_signal(
-                hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)),
+                hovered_signal.map_bool(|| COLOR_SLATE_BLUE, || COLOR_SLATE_BLUE_WITH_ALPHA),
             ))
             .s(RoundedCorners::new().left(15).right(5))
             .label(
@@ -382,7 +383,7 @@ impl WaveformPanel {
             .s(Height::exact(ROW_HEIGHT))
             .s(Width::exact(70))
             .s(Background::new().color_signal(
-                hovered_signal.map_bool(|| color!("SlateBlue"), || color!("SlateBlue", 0.8)),
+                hovered_signal.map_bool(|| COLOR_SLATE_BLUE, || COLOR_SLATE_BLUE_WITH_ALPHA),
             ))
             .s(RoundedCorners::new().left(5))
             .label(

frontend/src/waveform_panel/pixi_canvas.rs

@@ -5,7 +5,7 @@ use zoon::*;
 
 pub struct PixiCanvas {
     raw_el: RawHtmlEl<web_sys::HtmlElement>,
-    controller: ReadOnlyMutable<Option<js_bridge::PixiController>>,
+    controller: Mutable<Option<SendWrapper<js_bridge::PixiController>>>,
     #[allow(dead_code)]
     width: ReadOnlyMutable<u32>,
     #[allow(dead_code)]
@@ -32,7 +32,8 @@ impl HasIds for PixiCanvas {}
 
 impl PixiCanvas {
     pub fn new(row_height: u32, row_gap: u32) -> Self {
-        let controller: Mutable<Option<js_bridge::PixiController>> = Mutable::new(None);
+        let controller: Mutable<Option<SendWrapper<js_bridge::PixiController>>> =
+            Mutable::new(None);
         let width = Mutable::new(0);
         let height = Mutable::new(0);
         let resize_task = Task::start_droppable(
@@ -77,7 +78,7 @@ impl PixiCanvas {
         ));
         // -- // --
         Self {
-            controller: controller.read_only(),
+            controller: controller.clone(),
             width: width.read_only(),
             height: height.read_only(),
             task_with_controller: task_with_controller.clone(),
@@ -105,14 +106,14 @@ impl PixiCanvas {
                 })
                 .after_insert(clone!((controller, timeline_getter) move |element| {
                     Task::start(async move {
-                        let pixi_controller = js_bridge::PixiController::new(
+                        let pixi_controller = SendWrapper::new(js_bridge::PixiController::new(
                             1.,
                             width.get(),
                             0,
                             row_height,
                             row_gap,
                             &timeline_getter
-                        );
+                        ));
                         pixi_controller.init(&element).await;
                         controller.set(Some(pixi_controller));
                     });
@@ -131,7 +132,7 @@ impl PixiCanvas {
 
     pub fn task_with_controller<FUT: Future<Output = ()> + 'static>(
         self,
-        f: impl FnOnce(ReadOnlyMutable<Option<js_bridge::PixiController>>) -> FUT,
+        f: impl FnOnce(Mutable<Option<SendWrapper<js_bridge::PixiController>>>) -> FUT,
     ) -> Self {
         self.task_with_controller
             .set(Some(Task::start_droppable(f(self.controller.clone()))));
@@ -186,6 +187,8 @@ mod js_bridge {
         #[wasm_bindgen(method)]
         pub fn destroy(this: &PixiController);
 
+        // -- FastWave-specific --
+
         #[wasm_bindgen(method)]
         pub fn get_timeline_zoom(this: &PixiController) -> f64;
 
@@ -195,8 +198,6 @@ mod js_bridge {
         #[wasm_bindgen(method)]
         pub fn get_timeline_viewport_x(this: &PixiController) -> i32;
 
-        // -- FastWave-specific --
-
         #[wasm_bindgen(method)]
         pub fn set_var_format(this: &PixiController, index: usize, var_format: JsValue);
 
@@ -224,5 +225,8 @@ mod js_bridge {
 
         #[wasm_bindgen(method)]
         pub fn clear_vars(this: &PixiController);
+
+        #[wasm_bindgen(method)]
+        pub async fn redraw_all_rows(this: &PixiController);
     }
 }

frontend/typescript/bundles/strict_eval.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export async function strict_eval(code) { 
+    return await eval(code)
+}

frontend/typescript/excalidraw_canvas/README.md

@@ -0,0 +1,25 @@
+Init
+- `npm install && cp -r locales node_modules/@excalidraw/excalidraw/types/`
+
+Watch & build (without typechecking)
+- `node_modules/.bin/esbuild excalidraw_canvas.ts --bundle --minify --outfile=../bundles/excalidraw_canvas.js --format=esm --watch`
+
+Watch & typecheck (without building)
+- `node_modules/.bin/tsc excalidraw_canvas.ts --watch -noEmit --preserveWatchOutput --target esnext --module esnext --moduleResolution bundler`
+
+Created with commands:
+- `npm i -E react react-dom @excalidraw/excalidraw`
+- `npm i -E @types/react @types/react-dom`
+- `npm i -E roughjs @excalidraw/laser-pointer jotai browser-fs-access`
+- `npm i -D esbuild typescript`
+- `locales/en.json` downloaded from `https://raw.githubusercontent.com/excalidraw/excalidraw/refs/tags/v0.17.6/src/locales/en.json`
+- `excalidraw-assets-dev` and `excalidraw-assets` from `FastWave2.0\frontend\typescript\excalidraw_canvas\node_modules\@excalidraw\excalidraw\dist` copied into `FastWave2.0\public\excalidraw`
+- Lines added to `FastWave2.0\backend\globals.js`:
+    ```js
+    // -- Excalidraw settings --
+    // @TODO replace with "true" once Preact is integrated into ExcalidrawCanvas
+    var process = { env: { IS_PREACT: "false" } };
+    // @TODO probably remove or update once Preact is integrated into ExcalidrawCanvas
+    window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = { isDisabled: true };
+    window.EXCALIDRAW_ASSET_PATH = "/_api/public/excalidraw/";
+    ```

frontend/typescript/excalidraw_canvas/excalidraw_canvas.tsx

@@ -0,0 +1,107 @@
+import { Excalidraw, MainMenu } from '@excalidraw/excalidraw'
+import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types'
+import { ExcalidrawElement } from '@excalidraw/excalidraw/types/element/types'
+// @TODO doesn't work with Excalidraw 0.17.6
+// import { ExcalidrawElementSkeleton, convertToExcalidrawElements } from '@excalidraw/excalidraw/types/data/transform'
+import * as React from 'react'
+import * as ReactDOM from 'react-dom/client'
+
+export class ExcalidrawController {
+    api: Promise<ExcalidrawImperativeAPI>
+    resolve_api: (api: ExcalidrawImperativeAPI) => void
+
+    constructor() {
+      this.resolve_api = (api) => {};
+      this.api = new Promise(resolve => {
+        this.resolve_api = (api) => resolve(api)
+      });
+    }
+
+    draw_diagram_element(excalidraw_element: ExcalidrawElement) {
+      this.api.then(api => {
+        const elements = api.getSceneElements()
+        api.updateScene({
+          elements: elements.concat(excalidraw_element)
+        })
+      });
+    }
+
+    listen_for_component_text_changes(id: string, on_change: (text: string) => void) {
+      this.api.then(api => {
+        let old_text: string | null = null; 
+        api.onChange((elements: readonly ExcalidrawElement[]) => {
+          const element = elements.find(element => element.id === id);
+          if (typeof element !== 'undefined') {
+            if (element.type === 'text') {
+              if (old_text === null) {
+                old_text = element.text;
+                on_change(old_text);
+              } else {
+                if (old_text !== element.text) {
+                  old_text = element.text;
+                  on_change(old_text);
+                }
+              }
+            }
+          }
+        })
+      })
+    }
+
+    set_component_text(id: string, text: string) {
+      this.api.then(api => {
+        let element_found = false;
+        const elements = api.getSceneElements().map(element => {
+          if (element.id === id) {
+            element_found = true;
+            return { ...element, text: text, originalText: text }
+          } else {
+            return element
+          }
+        });
+        if (element_found) {
+            api.updateScene({
+              elements
+            })
+        }
+      })
+    }
+
+    async init(parent_element: HTMLElement) {
+      const App = () => {
+        return (
+          <>
+            <div style={{ height: "100%" }}>
+              <Excalidraw 
+                theme='dark'
+                gridModeEnabled={true}
+                UIOptions={{canvasActions: {toggleTheme: true}}}
+                initialData={{appState: {
+                  // Canvas background: 3. default, blue
+                  viewBackgroundColor: "#f5faff",
+                  // Sloppiness: Artist
+                  currentItemRoughness: 0,
+                  // Font family: Code
+                  currentItemFontFamily: 3,
+                }}}
+                excalidrawAPI={(api) => this.resolve_api(api)}
+              >
+                <MainMenu>
+                  <MainMenu.DefaultItems.LoadScene />
+                  <MainMenu.DefaultItems.SaveToActiveFile />
+                  <MainMenu.DefaultItems.Export />
+                  <MainMenu.DefaultItems.SaveAsImage />
+                  <MainMenu.DefaultItems.ClearCanvas />
+                  <MainMenu.DefaultItems.ToggleTheme />
+                  <MainMenu.DefaultItems.ChangeCanvasBackground />
+                </MainMenu>
+              </Excalidraw>
+            </div>
+          </>
+        );
+      };
+      const root = ReactDOM.createRoot(parent_element);
+      root.render(React.createElement(App));
+    }
+}
+  

frontend/typescript/excalidraw_canvas/locales/en.json

@@ -0,0 +1,612 @@
+{
+    "labels": {
+      "paste": "Paste",
+      "pasteAsPlaintext": "Paste as plaintext",
+      "pasteCharts": "Paste charts",
+      "selectAll": "Select all",
+      "multiSelect": "Add element to selection",
+      "moveCanvas": "Move canvas",
+      "cut": "Cut",
+      "copy": "Copy",
+      "copyAsPng": "Copy to clipboard as PNG",
+      "copyAsSvg": "Copy to clipboard as SVG",
+      "copyText": "Copy to clipboard as text",
+      "copySource": "Copy source to clipboard",
+      "convertToCode": "Convert to code",
+      "bringForward": "Bring forward",
+      "sendToBack": "Send to back",
+      "bringToFront": "Bring to front",
+      "sendBackward": "Send backward",
+      "delete": "Delete",
+      "copyStyles": "Copy styles",
+      "pasteStyles": "Paste styles",
+      "stroke": "Stroke",
+      "changeStroke": "Change stroke color",
+      "background": "Background",
+      "changeBackground": "Change background color",
+      "fill": "Fill",
+      "strokeWidth": "Stroke width",
+      "strokeStyle": "Stroke style",
+      "strokeStyle_solid": "Solid",
+      "strokeStyle_dashed": "Dashed",
+      "strokeStyle_dotted": "Dotted",
+      "sloppiness": "Sloppiness",
+      "opacity": "Opacity",
+      "textAlign": "Text align",
+      "edges": "Edges",
+      "sharp": "Sharp",
+      "round": "Round",
+      "arrowheads": "Arrowheads",
+      "arrowhead_none": "None",
+      "arrowhead_arrow": "Arrow",
+      "arrowhead_bar": "Bar",
+      "arrowhead_circle": "Circle",
+      "arrowhead_circle_outline": "Circle (outline)",
+      "arrowhead_triangle": "Triangle",
+      "arrowhead_triangle_outline": "Triangle (outline)",
+      "arrowhead_diamond": "Diamond",
+      "arrowhead_diamond_outline": "Diamond (outline)",
+      "arrowtypes": "Arrow type",
+      "arrowtype_sharp": "Sharp arrow",
+      "arrowtype_round": "Curved arrow",
+      "arrowtype_elbowed": "Elbow arrow",
+      "fontSize": "Font size",
+      "fontFamily": "Font family",
+      "addWatermark": "Add \"Made with Excalidraw\"",
+      "handDrawn": "Hand-drawn",
+      "normal": "Normal",
+      "code": "Code",
+      "small": "Small",
+      "medium": "Medium",
+      "large": "Large",
+      "veryLarge": "Very large",
+      "solid": "Solid",
+      "hachure": "Hachure",
+      "zigzag": "Zigzag",
+      "crossHatch": "Cross-hatch",
+      "thin": "Thin",
+      "bold": "Bold",
+      "left": "Left",
+      "center": "Center",
+      "right": "Right",
+      "extraBold": "Extra bold",
+      "architect": "Architect",
+      "artist": "Artist",
+      "cartoonist": "Cartoonist",
+      "fileTitle": "File name",
+      "colorPicker": "Color picker",
+      "canvasColors": "Used on canvas",
+      "canvasBackground": "Canvas background",
+      "drawingCanvas": "Drawing canvas",
+      "clearCanvas": "Clear canvas",
+      "layers": "Layers",
+      "actions": "Actions",
+      "language": "Language",
+      "liveCollaboration": "Live collaboration...",
+      "duplicateSelection": "Duplicate",
+      "untitled": "Untitled",
+      "name": "Name",
+      "yourName": "Your name",
+      "madeWithExcalidraw": "Made with Excalidraw",
+      "group": "Group selection",
+      "ungroup": "Ungroup selection",
+      "collaborators": "Collaborators",
+      "toggleGrid": "Toggle grid",
+      "addToLibrary": "Add to library",
+      "removeFromLibrary": "Remove from library",
+      "libraryLoadingMessage": "Loading library…",
+      "libraries": "Browse libraries",
+      "loadingScene": "Loading scene…",
+      "loadScene": "Load scene from file",
+      "align": "Align",
+      "alignTop": "Align top",
+      "alignBottom": "Align bottom",
+      "alignLeft": "Align left",
+      "alignRight": "Align right",
+      "centerVertically": "Center vertically",
+      "centerHorizontally": "Center horizontally",
+      "distributeHorizontally": "Distribute horizontally",
+      "distributeVertically": "Distribute vertically",
+      "flipHorizontal": "Flip horizontal",
+      "flipVertical": "Flip vertical",
+      "viewMode": "View mode",
+      "share": "Share",
+      "showStroke": "Show stroke color picker",
+      "showBackground": "Show background color picker",
+      "showFonts": "Show font picker",
+      "toggleTheme": "Toggle light/dark theme",
+      "theme": "Theme",
+      "personalLib": "Personal Library",
+      "excalidrawLib": "Excalidraw Library",
+      "decreaseFontSize": "Decrease font size",
+      "increaseFontSize": "Increase font size",
+      "unbindText": "Unbind text",
+      "bindText": "Bind text to the container",
+      "createContainerFromText": "Wrap text in a container",
+      "link": {
+        "edit": "Edit link",
+        "editEmbed": "Edit link & embed",
+        "create": "Create link",
+        "createEmbed": "Create link & embed",
+        "label": "Link",
+        "labelEmbed": "Link & embed",
+        "empty": "No link is set"
+      },
+      "lineEditor": {
+        "edit": "Edit line",
+        "editArrow": "Edit arrow"
+      },
+      "elementLock": {
+        "lock": "Lock",
+        "unlock": "Unlock",
+        "lockAll": "Lock all",
+        "unlockAll": "Unlock all"
+      },
+      "statusPublished": "Published",
+      "sidebarLock": "Keep sidebar open",
+      "selectAllElementsInFrame": "Select all elements in frame",
+      "removeAllElementsFromFrame": "Remove all elements from frame",
+      "eyeDropper": "Pick color from canvas",
+      "textToDiagram": "Text to diagram",
+      "prompt": "Prompt",
+      "followUs": "Follow us",
+      "discordChat": "Discord chat",
+      "zoomToFitViewport": "Zoom to fit in viewport",
+      "zoomToFitSelection": "Zoom to fit selection",
+      "zoomToFit": "Zoom to fit all elements",
+      "installPWA": "Install Excalidraw locally (PWA)",
+      "autoResize": "Enable text auto-resizing"
+    },
+    "library": {
+      "noItems": "No items added yet...",
+      "hint_emptyLibrary": "Select an item on canvas to add it here, or install a library from the public repository, below.",
+      "hint_emptyPrivateLibrary": "Select an item on canvas to add it here."
+    },
+    "search": {
+      "title": "Find on canvas",
+      "noMatch": "No matches found...",
+      "singleResult": "result",
+      "multipleResults": "results",
+      "placeholder": "Find text on canvas..."
+    },
+    "buttons": {
+      "clearReset": "Reset the canvas",
+      "exportJSON": "Export to file",
+      "exportImage": "Export image...",
+      "export": "Save to...",
+      "copyToClipboard": "Copy to clipboard",
+      "copyLink": "Copy link",
+      "save": "Save to current file",
+      "saveAs": "Save as",
+      "load": "Open",
+      "getShareableLink": "Get shareable link",
+      "close": "Close",
+      "selectLanguage": "Select language",
+      "scrollBackToContent": "Scroll back to content",
+      "zoomIn": "Zoom in",
+      "zoomOut": "Zoom out",
+      "resetZoom": "Reset zoom",
+      "menu": "Menu",
+      "done": "Done",
+      "edit": "Edit",
+      "undo": "Undo",
+      "redo": "Redo",
+      "resetLibrary": "Reset library",
+      "createNewRoom": "Create new room",
+      "fullScreen": "Full screen",
+      "darkMode": "Dark mode",
+      "lightMode": "Light mode",
+      "systemMode": "System mode",
+      "zenMode": "Zen mode",
+      "objectsSnapMode": "Snap to objects",
+      "exitZenMode": "Exit zen mode",
+      "cancel": "Cancel",
+      "clear": "Clear",
+      "remove": "Remove",
+      "embed": "Toggle embedding",
+      "publishLibrary": "Publish",
+      "submit": "Submit",
+      "confirm": "Confirm",
+      "embeddableInteractionButton": "Click to interact"
+    },
+    "alerts": {
+      "clearReset": "This will clear the whole canvas. Are you sure?",
+      "couldNotCreateShareableLink": "Couldn't create shareable link.",
+      "couldNotCreateShareableLinkTooBig": "Couldn't create shareable link: the scene is too big",
+      "couldNotLoadInvalidFile": "Couldn't load invalid file",
+      "importBackendFailed": "Importing from backend failed.",
+      "cannotExportEmptyCanvas": "Cannot export empty canvas.",
+      "couldNotCopyToClipboard": "Couldn't copy to clipboard.",
+      "decryptFailed": "Couldn't decrypt data.",
+      "uploadedSecurly": "The upload has been secured with end-to-end encryption, which means that Excalidraw server and third parties can't read the content.",
+      "loadSceneOverridePrompt": "Loading external drawing will replace your existing content. Do you wish to continue?",
+      "collabStopOverridePrompt": "Stopping the session will overwrite your previous, locally stored drawing. Are you sure?\n\n(If you want to keep your local drawing, simply close the browser tab instead.)",
+      "errorAddingToLibrary": "Couldn't add item to the library",
+      "errorRemovingFromLibrary": "Couldn't remove item from the library",
+      "confirmAddLibrary": "This will add {{numShapes}} shape(s) to your library. Are you sure?",
+      "imageDoesNotContainScene": "This image does not seem to contain any scene data. Have you enabled scene embedding during export?",
+      "cannotRestoreFromImage": "Scene couldn't be restored from this image file",
+      "invalidSceneUrl": "Couldn't import scene from the supplied URL. It's either malformed, or doesn't contain valid Excalidraw JSON data.",
+      "resetLibrary": "This will clear your library. Are you sure?",
+      "removeItemsFromsLibrary": "Delete {{count}} item(s) from library?",
+      "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled.",
+      "collabOfflineWarning": "No internet connection available.\nYour changes will not be saved!"
+    },
+    "errors": {
+      "unsupportedFileType": "Unsupported file type.",
+      "imageInsertError": "Couldn't insert image. Try again later...",
+      "fileTooBig": "File is too big. Maximum allowed size is {{maxSize}}.",
+      "svgImageInsertError": "Couldn't insert SVG image. The SVG markup looks invalid.",
+      "failedToFetchImage": "Failed to fetch image.",
+      "cannotResolveCollabServer": "Couldn't connect to the collab server. Please reload the page and try again.",
+      "importLibraryError": "Couldn't load library",
+      "saveLibraryError": "Couldn't save library to storage. Please save your library to a file locally to make sure you don't lose changes.",
+      "collabSaveFailed": "Couldn't save to the backend database. If problems persist, you should save your file locally to ensure you don't lose your work.",
+      "collabSaveFailed_sizeExceeded": "Couldn't save to the backend database, the canvas seems to be too big. You should save the file locally to ensure you don't lose your work.",
+      "imageToolNotSupported": "Images are disabled.",
+      "brave_measure_text_error": {
+        "line1": "Looks like you are using Brave browser with the <bold>Aggressively Block Fingerprinting</bold> setting enabled.",
+        "line2": "This could result in breaking the <bold>Text Elements</bold> in your drawings.",
+        "line3": "We strongly recommend disabling this setting. You can follow <link>these steps</link> on how to do so.",
+        "line4": "If disabling this setting doesn't fix the display of text elements, please open an <issueLink>issue</issueLink> on our GitHub, or write us on <discordLink>Discord</discordLink>"
+      },
+      "libraryElementTypeError": {
+        "embeddable": "Embeddable elements cannot be added to the library.",
+        "iframe": "IFrame elements cannot be added to the library.",
+        "image": "Support for adding images to the library coming soon!"
+      },
+      "asyncPasteFailedOnRead": "Couldn't paste (couldn't read from system clipboard).",
+      "asyncPasteFailedOnParse": "Couldn't paste.",
+      "copyToSystemClipboardFailed": "Couldn't copy to clipboard."
+    },
+    "toolBar": {
+      "selection": "Selection",
+      "image": "Insert image",
+      "rectangle": "Rectangle",
+      "diamond": "Diamond",
+      "ellipse": "Ellipse",
+      "arrow": "Arrow",
+      "line": "Line",
+      "freedraw": "Draw",
+      "text": "Text",
+      "library": "Library",
+      "lock": "Keep selected tool active after drawing",
+      "penMode": "Pen mode - prevent touch",
+      "link": "Add / Update link for a selected shape",
+      "eraser": "Eraser",
+      "frame": "Frame tool",
+      "magicframe": "Wireframe to code",
+      "embeddable": "Web Embed",
+      "laser": "Laser pointer",
+      "hand": "Hand (panning tool)",
+      "extraTools": "More tools",
+      "mermaidToExcalidraw": "Mermaid to Excalidraw"
+    },
+    "element": {
+      "rectangle": "Rectangle",
+      "diamond": "Diamond",
+      "ellipse": "Ellipse",
+      "arrow": "Arrow",
+      "line": "Line",
+      "freedraw": "Freedraw",
+      "text": "Text",
+      "image": "Image",
+      "group": "Group",
+      "frame": "Frame",
+      "magicframe": "Wireframe to code",
+      "embeddable": "Web Embed",
+      "selection": "Selection",
+      "iframe": "IFrame"
+    },
+    "headings": {
+      "canvasActions": "Canvas actions",
+      "selectedShapeActions": "Selected shape actions",
+      "shapes": "Shapes"
+    },
+    "hints": {
+      "dismissSearch": "Escape to dismiss search",
+      "canvasPanning": "To move canvas, hold mouse wheel or spacebar while dragging, or use the hand tool",
+      "linearElement": "Click to start multiple points, drag for single line",
+      "arrowTool": "Click to start multiple points, drag for single line. Press {{arrowShortcut}} again to change arrow type.",
+      "freeDraw": "Click and drag, release when you're finished",
+      "text": "Tip: you can also add text by double-clicking anywhere with the selection tool",
+      "embeddable": "Click-drag to create a website embed",
+      "text_selected": "Double-click or press ENTER to edit text",
+      "text_editing": "Press Escape or CtrlOrCmd+ENTER to finish editing",
+      "linearElementMulti": "Click on last point or press Escape or Enter to finish",
+      "lockAngle": "You can constrain angle by holding SHIFT",
+      "resize": "You can constrain proportions by holding SHIFT while resizing,\nhold ALT to resize from the center",
+      "resizeImage": "You can resize freely by holding SHIFT,\nhold ALT to resize from the center",
+      "rotate": "You can constrain angles by holding SHIFT while rotating",
+      "lineEditor_info": "Hold CtrlOrCmd and Double-click or press CtrlOrCmd + Enter to edit points",
+      "lineEditor_pointSelected": "Press Delete to remove point(s),\nCtrlOrCmd+D to duplicate, or drag to move",
+      "lineEditor_nothingSelected": "Select a point to edit (hold SHIFT to select multiple),\nor hold Alt and click to add new points",
+      "placeImage": "Click to place the image, or click and drag to set its size manually",
+      "publishLibrary": "Publish your own library",
+      "bindTextToElement": "Press enter to add text",
+      "createFlowchart": "Hold CtrlOrCmd and Arrow key to create a flowchart",
+      "deepBoxSelect": "Hold CtrlOrCmd to deep select, and to prevent dragging",
+      "eraserRevert": "Hold Alt to revert the elements marked for deletion",
+      "firefox_clipboard_write": "This feature can likely be enabled by setting the \"dom.events.asyncClipboard.clipboardItem\" flag to \"true\". To change the browser flags in Firefox, visit the \"about:config\" page.",
+      "disableSnapping": "Hold CtrlOrCmd to disable snapping"
+    },
+    "canvasError": {
+      "cannotShowPreview": "Cannot show preview",
+      "canvasTooBig": "The canvas may be too big.",
+      "canvasTooBigTip": "Tip: try moving the farthest elements a bit closer together."
+    },
+    "errorSplash": {
+      "headingMain": "Encountered an error. Try <button>reloading the page</button>.",
+      "clearCanvasMessage": "If reloading doesn't work, try <button>clearing the canvas</button>.",
+      "clearCanvasCaveat": " This will result in loss of work ",
+      "trackedToSentry": "The error with identifier {{eventId}} was tracked on our system.",
+      "openIssueMessage": "We were very cautious not to include your scene information on the error. If your scene is not private, please consider following up on our <button>bug tracker</button>. Please include information below by copying and pasting into the GitHub issue.",
+      "sceneContent": "Scene content:"
+    },
+    "shareDialog": {
+      "or": "Or"
+    },
+    "roomDialog": {
+      "desc_intro": "Invite people to collaborate on your drawing.",
+      "desc_privacy": "Don't worry, the session is end-to-end encrypted, and fully private. Not even our server can see what you draw.",
+      "button_startSession": "Start session",
+      "button_stopSession": "Stop session",
+      "desc_inProgressIntro": "Live-collaboration session is now in progress.",
+      "desc_shareLink": "Share this link with anyone you want to collaborate with:",
+      "desc_exitSession": "Stopping the session will disconnect you from the room, but you'll be able to continue working with the scene, locally. Note that this won't affect other people, and they'll still be able to collaborate on their version.",
+      "shareTitle": "Join a live collaboration session on Excalidraw"
+    },
+    "errorDialog": {
+      "title": "Error"
+    },
+    "exportDialog": {
+      "disk_title": "Save to disk",
+      "disk_details": "Export the scene data to a file from which you can import later.",
+      "disk_button": "Save to file",
+      "link_title": "Shareable link",
+      "link_details": "Export as a read-only link.",
+      "link_button": "Export to Link",
+      "excalidrawplus_description": "Save the scene to your Excalidraw+ workspace.",
+      "excalidrawplus_button": "Export",
+      "excalidrawplus_exportError": "Couldn't export to Excalidraw+ at this moment..."
+    },
+    "helpDialog": {
+      "blog": "Read our blog",
+      "click": "click",
+      "deepSelect": "Deep select",
+      "deepBoxSelect": "Deep select within box, and prevent dragging",
+      "createFlowchart": "Create a flowchart from a generic element",
+      "navigateFlowchart": "Navigate a flowchart",
+      "curvedArrow": "Curved arrow",
+      "curvedLine": "Curved line",
+      "documentation": "Documentation",
+      "doubleClick": "double-click",
+      "drag": "drag",
+      "editor": "Editor",
+      "editLineArrowPoints": "Edit line/arrow points",
+      "editText": "Edit text / add label",
+      "github": "Found an issue? Submit",
+      "howto": "Follow our guides",
+      "or": "or",
+      "preventBinding": "Prevent arrow binding",
+      "tools": "Tools",
+      "shortcuts": "Keyboard shortcuts",
+      "textFinish": "Finish editing (text editor)",
+      "textNewLine": "Add new line (text editor)",
+      "title": "Help",
+      "view": "View",
+      "zoomToFit": "Zoom to fit all elements",
+      "zoomToSelection": "Zoom to selection",
+      "toggleElementLock": "Lock/unlock selection",
+      "movePageUpDown": "Move page up/down",
+      "movePageLeftRight": "Move page left/right"
+    },
+    "clearCanvasDialog": {
+      "title": "Clear canvas"
+    },
+    "publishDialog": {
+      "title": "Publish library",
+      "itemName": "Item name",
+      "authorName": "Author name",
+      "githubUsername": "GitHub username",
+      "twitterUsername": "Twitter username",
+      "libraryName": "Library name",
+      "libraryDesc": "Library description",
+      "website": "Website",
+      "placeholder": {
+        "authorName": "Your name or username",
+        "libraryName": "Name of your library",
+        "libraryDesc": "Description of your library to help people understand its usage",
+        "githubHandle": "GitHub handle (optional), so you can edit the library once submitted for review",
+        "twitterHandle": "Twitter username (optional), so we know who to credit when promoting over Twitter",
+        "website": "Link to your personal website or elsewhere (optional)"
+      },
+      "errors": {
+        "required": "Required",
+        "website": "Enter a valid URL"
+      },
+      "noteDescription": "Submit your library to be included in the <link>public library repository</link> for other people to use in their drawings.",
+      "noteGuidelines": "The library needs to be manually approved first. Please read the <link>guidelines</link> before submitting. You will need a GitHub account to communicate and make changes if requested, but it is not strictly required.",
+      "noteLicense": "By submitting, you agree the library will be published under the <link>MIT License</link>, which in short means anyone can use them without restrictions.",
+      "noteItems": "Each library item must have its own name so it's filterable. The following library items will be included:",
+      "atleastOneLibItem": "Please select at least one library item to get started",
+      "republishWarning": "Note: some of the selected items are marked as already published/submitted. You should only resubmit items when updating an existing library or submission."
+    },
+    "publishSuccessDialog": {
+      "title": "Library submitted",
+      "content": "Thank you {{authorName}}. Your library has been submitted for review. You can track the status <link>here</link>"
+    },
+    "confirmDialog": {
+      "resetLibrary": "Reset library",
+      "removeItemsFromLib": "Remove selected items from library"
+    },
+    "imageExportDialog": {
+      "header": "Export image",
+      "label": {
+        "withBackground": "Background",
+        "onlySelected": "Only selected",
+        "darkMode": "Dark mode",
+        "embedScene": "Embed scene",
+        "scale": "Scale",
+        "padding": "Padding"
+      },
+      "tooltip": {
+        "embedScene": "Scene data will be saved into the exported PNG/SVG file so that the scene can be restored from it.\nWill increase exported file size."
+      },
+      "title": {
+        "exportToPng": "Export to PNG",
+        "exportToSvg": "Export to SVG",
+        "copyPngToClipboard": "Copy PNG to clipboard"
+      },
+      "button": {
+        "exportToPng": "PNG",
+        "exportToSvg": "SVG",
+        "copyPngToClipboard": "Copy to clipboard"
+      }
+    },
+    "encrypted": {
+      "tooltip": "Your drawings are end-to-end encrypted so Excalidraw's servers will never see them.",
+      "link": "Blog post on end-to-end encryption in Excalidraw"
+    },
+    "stats": {
+      "angle": "Angle",
+      "shapes": "Shapes",
+      "height": "Height",
+      "scene": "Scene",
+      "selected": "Selected",
+      "storage": "Storage",
+      "fullTitle": "Canvas & Shape properties",
+      "title": "Properties",
+      "generalStats": "General",
+      "elementProperties": "Shape properties",
+      "total": "Total",
+      "version": "Version",
+      "versionCopy": "Click to copy",
+      "versionNotAvailable": "Version not available",
+      "width": "Width"
+    },
+    "toast": {
+      "addedToLibrary": "Added to library",
+      "copyStyles": "Copied styles.",
+      "copyToClipboard": "Copied to clipboard.",
+      "copyToClipboardAsPng": "Copied {{exportSelection}} to clipboard as PNG\n({{exportColorScheme}})",
+      "fileSaved": "File saved.",
+      "fileSavedToFilename": "Saved to {filename}",
+      "canvas": "canvas",
+      "selection": "selection",
+      "pasteAsSingleElement": "Use {{shortcut}} to paste as a single element,\nor paste into an existing text editor",
+      "unableToEmbed": "Embedding this url is currently not allowed. Raise an issue on GitHub to request the url whitelisted",
+      "unrecognizedLinkFormat": "The link you embedded does not match the expected format. Please try to paste the 'embed' string provided by the source site"
+    },
+    "colors": {
+      "transparent": "Transparent",
+      "black": "Black",
+      "white": "White",
+      "red": "Red",
+      "pink": "Pink",
+      "grape": "Grape",
+      "violet": "Violet",
+      "gray": "Gray",
+      "blue": "Blue",
+      "cyan": "Cyan",
+      "teal": "Teal",
+      "green": "Green",
+      "yellow": "Yellow",
+      "orange": "Orange",
+      "bronze": "Bronze"
+    },
+    "welcomeScreen": {
+      "app": {
+        "center_heading": "All your data is saved locally in your browser.",
+        "center_heading_plus": "Did you want to go to the Excalidraw+ instead?",
+        "menuHint": "Export, preferences, languages, ..."
+      },
+      "defaults": {
+        "menuHint": "Export, preferences, and more...",
+        "center_heading": "Diagrams. Made. Simple.",
+        "toolbarHint": "Pick a tool & Start drawing!",
+        "helpHint": "Shortcuts & help"
+      }
+    },
+    "colorPicker": {
+      "mostUsedCustomColors": "Most used custom colors",
+      "colors": "Colors",
+      "shades": "Shades",
+      "hexCode": "Hex code",
+      "noShades": "No shades available for this color"
+    },
+    "overwriteConfirm": {
+      "action": {
+        "exportToImage": {
+          "title": "Export as image",
+          "button": "Export as image",
+          "description": "Export the scene data as an image from which you can import later."
+        },
+        "saveToDisk": {
+          "title": "Save to disk",
+          "button": "Save to disk",
+          "description": "Export the scene data to a file from which you can import later."
+        },
+        "excalidrawPlus": {
+          "title": "Excalidraw+",
+          "button": "Export to Excalidraw+",
+          "description": "Save the scene to your Excalidraw+ workspace."
+        }
+      },
+      "modal": {
+        "loadFromFile": {
+          "title": "Load from file",
+          "button": "Load from file",
+          "description": "Loading from a file will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first using one of the options below."
+        },
+        "shareableLink": {
+          "title": "Load from link",
+          "button": "Replace my content",
+          "description": "Loading external drawing will <bold>replace your existing content</bold>.<br></br>You can back up your drawing first by using one of the options below."
+        }
+      }
+    },
+    "mermaid": {
+      "title": "Mermaid to Excalidraw",
+      "button": "Insert",
+      "description": "Currently only <flowchartLink>Flowchart</flowchartLink>,<sequenceLink> Sequence, </sequenceLink> and <classLink>Class </classLink>Diagrams are supported. The other types will be rendered as image in Excalidraw.",
+      "syntax": "Mermaid Syntax",
+      "preview": "Preview"
+    },
+    "quickSearch": {
+      "placeholder": "Quick search"
+    },
+    "fontList": {
+      "badge": {
+        "old": "old"
+      },
+      "sceneFonts": "In this scene",
+      "availableFonts": "Available fonts",
+      "empty": "No fonts found"
+    },
+    "userList": {
+      "empty": "No users found",
+      "hint": {
+        "text": "Click on user to follow",
+        "followStatus": "You're currently following this user",
+        "inCall": "User is in a voice call",
+        "micMuted": "User's microphone is muted",
+        "isSpeaking": "User is speaking"
+      }
+    },
+    "commandPalette": {
+      "title": "Command palette",
+      "shortcuts": {
+        "select": "Select",
+        "confirm": "Confirm",
+        "close": "Close"
+      },
+      "recents": "Recently used",
+      "search": {
+        "placeholder": "Search menus, commands, and discover hidden gems",
+        "noMatch": "No matching commands..."
+      },
+      "itemNotAvailable": "Command is not available...",
+      "shortcutHint": "For Command palette, use {{shortcut}}"
+    }
+  }

frontend/typescript/excalidraw_canvas/package-lock.json

@@ -0,0 +1,608 @@
+{
+  "name": "excalidraw_canvas",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "@excalidraw/excalidraw": "0.17.6",
+        "@excalidraw/laser-pointer": "1.3.1",
+        "@types/react": "18.3.11",
+        "@types/react-dom": "18.3.0",
+        "browser-fs-access": "0.35.0",
+        "jotai": "2.10.0",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
+        "roughjs": "4.6.6"
+      },
+      "devDependencies": {
+        "esbuild": "^0.24.0",
+        "typescript": "^5.6.3"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.0.tgz",
+      "integrity": "sha512-WtKdFM7ls47zkKHFVzMz8opM7LkcsIp9amDUBIAWirg70RM71WRSjdILPsY5Uv1D42ZpUfaPILDlfactHgsRkw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.0.tgz",
+      "integrity": "sha512-arAtTPo76fJ/ICkXWetLCc9EwEHKaeya4vMrReVlEIUCAUncH7M4bhMQ+M9Vf+FFOZJdTNMXNBrWwW+OXWpSew==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.0.tgz",
+      "integrity": "sha512-Vsm497xFM7tTIPYK9bNTYJyF/lsP590Qc1WxJdlB6ljCbdZKU9SY8i7+Iin4kyhV/KV5J2rOKsBQbB77Ab7L/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.0.tgz",
+      "integrity": "sha512-t8GrvnFkiIY7pa7mMgJd7p8p8qqYIz1NYiAoKc75Zyv73L3DZW++oYMSHPRarcotTKuSs6m3hTOa5CKHaS02TQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.0.tgz",
+      "integrity": "sha512-CKyDpRbK1hXwv79soeTJNHb5EiG6ct3efd/FTPdzOWdbZZfGhpbcqIpiD0+vwmpu0wTIL97ZRPZu8vUt46nBSw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.0.tgz",
+      "integrity": "sha512-rgtz6flkVkh58od4PwTRqxbKH9cOjaXCMZgWD905JOzjFKW+7EiUObfd/Kav+A6Gyud6WZk9w+xu6QLytdi2OA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-6Mtdq5nHggwfDNLAHkPlyLBpE5L6hwsuXZX8XNmHno9JuL2+bg2BX5tRkwjyfn6sKbxZTq68suOjgWqCicvPXA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.0.tgz",
+      "integrity": "sha512-D3H+xh3/zphoX8ck4S2RxKR6gHlHDXXzOf6f/9dbFt/NRBDIE33+cVa49Kil4WUjxMGW0ZIYBYtaGCa2+OsQwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.0.tgz",
+      "integrity": "sha512-gJKIi2IjRo5G6Glxb8d3DzYXlxdEj2NlkixPsqePSZMhLudqPhtZ4BUrpIuTjJYXxvF9njql+vRjB2oaC9XpBw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.0.tgz",
+      "integrity": "sha512-TDijPXTOeE3eaMkRYpcy3LarIg13dS9wWHRdwYRnzlwlA370rNdZqbcp0WTyyV/k2zSxfko52+C7jU5F9Tfj1g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.0.tgz",
+      "integrity": "sha512-K40ip1LAcA0byL05TbCQ4yJ4swvnbzHscRmUilrmP9Am7//0UjPreh4lpYzvThT2Quw66MhjG//20mrufm40mA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.0.tgz",
+      "integrity": "sha512-0mswrYP/9ai+CU0BzBfPMZ8RVm3RGAN/lmOMgW4aFUSOQBjA31UP8Mr6DDhWSuMwj7jaWOT0p0WoZ6jeHhrD7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.0.tgz",
+      "integrity": "sha512-hIKvXm0/3w/5+RDtCJeXqMZGkI2s4oMUGj3/jM0QzhgIASWrGO5/RlzAzm5nNh/awHE0A19h/CvHQe6FaBNrRA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.0.tgz",
+      "integrity": "sha512-HcZh5BNq0aC52UoocJxaKORfFODWXZxtBaaZNuN3PUX3MoDsChsZqopzi5UupRhPHSEHotoiptqikjN/B77mYQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.0.tgz",
+      "integrity": "sha512-bEh7dMn/h3QxeR2KTy1DUszQjUrIHPZKyO6aN1X4BCnhfYhuQqedHaa5MxSQA/06j3GpiIlFGSsy1c7Gf9padw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.0.tgz",
+      "integrity": "sha512-ZcQ6+qRkw1UcZGPyrCiHHkmBaj9SiCD8Oqd556HldP+QlpUIe2Wgn3ehQGVoPOvZvtHm8HPx+bH20c9pvbkX3g==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.0.tgz",
+      "integrity": "sha512-vbutsFqQ+foy3wSSbmjBXXIJ6PL3scghJoM8zCL142cGaZKAdCZHyf+Bpu/MmX9zT9Q0zFBVKb36Ma5Fzfa8xA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-hjQ0R/ulkO8fCYFsG0FZoH+pWgTTDreqpqY7UnQntnaKv95uP5iW3+dChxnx7C3trQQU40S+OgWhUVwCjVFLvg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.0.tgz",
+      "integrity": "sha512-MD9uzzkPQbYehwcN583yx3Tu5M8EIoTD+tUgKF982WYL9Pf5rKy9ltgD0eUgs8pvKnmizxjXZyLt0z6DC3rRXg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.0.tgz",
+      "integrity": "sha512-4ir0aY1NGUhIC1hdoCzr1+5b43mw99uNwVzhIq1OY3QcEwPDO3B7WNXBzaKY5Nsf1+N11i1eOfFcq+D/gOS15Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.0.tgz",
+      "integrity": "sha512-jVzdzsbM5xrotH+W5f1s+JtUy1UWgjU0Cf4wMvffTB8m6wP5/kx0KiaLHlbJO+dMgtxKV8RQ/JvtlFcdZ1zCPA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.0.tgz",
+      "integrity": "sha512-iKc8GAslzRpBytO2/aN3d2yb2z8XTVfNV0PjGlCxKo5SgWmNXx82I/Q3aG1tFfS+A2igVCY97TJ8tnYwpUWLCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.0.tgz",
+      "integrity": "sha512-vQW36KZolfIudCcTnaTpmLQ24Ha1RjygBo39/aLkM2kmjkWmZGEJ5Gn9l5/7tzXA42QGIoWbICfg6KLLkIw6yw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.0.tgz",
+      "integrity": "sha512-7IAFPrjSQIJrGsK6flwg7NFmwBoSTyF3rl7If0hNUFQU4ilTsEPL6GuMuU9BfIWVVGuRnuIidkSMC+c0Otu8IA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@excalidraw/excalidraw": {
+      "version": "0.17.6",
+      "resolved": "https://registry.npmjs.org/@excalidraw/excalidraw/-/excalidraw-0.17.6.tgz",
+      "integrity": "sha512-fyCl+zG/Z5yhHDh5Fq2ZGmphcrALmuOdtITm8gN4d8w4ntnaopTXcTfnAAaU3VleDC6LhTkoLOTG6P5kgREiIg==",
+      "peerDependencies": {
+        "react": "^17.0.2 || ^18.2.0",
+        "react-dom": "^17.0.2 || ^18.2.0"
+      }
+    },
+    "node_modules/@excalidraw/laser-pointer": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@excalidraw/laser-pointer/-/laser-pointer-1.3.1.tgz",
+      "integrity": "sha512-psA1z1N2qeAfsORdXc9JmD2y4CmDwmuMRxnNdJHZexIcPwaNEyIpNcelw+QkL9rz9tosaN9krXuKaRqYpRAR6g=="
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.13",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz",
+      "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.0",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
+      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/browser-fs-access": {
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/browser-fs-access/-/browser-fs-access-0.35.0.tgz",
+      "integrity": "sha512-sLoadumpRfsjprP8XzVjpQc0jK8yqHBx0PtUTGYj2fftT+P/t+uyDAQdMgGAPKD011in/O+YYGh7fIs0oG/viw=="
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/esbuild": {
+      "version": "0.24.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.0.tgz",
+      "integrity": "sha512-FuLPevChGDshgSicjisSooU0cemp/sGXR841D5LHMB7mTVOmsEHcAxaH3irL53+8YDIeVNQEySh4DaYU/iuPqQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.24.0",
+        "@esbuild/android-arm": "0.24.0",
+        "@esbuild/android-arm64": "0.24.0",
+        "@esbuild/android-x64": "0.24.0",
+        "@esbuild/darwin-arm64": "0.24.0",
+        "@esbuild/darwin-x64": "0.24.0",
+        "@esbuild/freebsd-arm64": "0.24.0",
+        "@esbuild/freebsd-x64": "0.24.0",
+        "@esbuild/linux-arm": "0.24.0",
+        "@esbuild/linux-arm64": "0.24.0",
+        "@esbuild/linux-ia32": "0.24.0",
+        "@esbuild/linux-loong64": "0.24.0",
+        "@esbuild/linux-mips64el": "0.24.0",
+        "@esbuild/linux-ppc64": "0.24.0",
+        "@esbuild/linux-riscv64": "0.24.0",
+        "@esbuild/linux-s390x": "0.24.0",
+        "@esbuild/linux-x64": "0.24.0",
+        "@esbuild/netbsd-x64": "0.24.0",
+        "@esbuild/openbsd-arm64": "0.24.0",
+        "@esbuild/openbsd-x64": "0.24.0",
+        "@esbuild/sunos-x64": "0.24.0",
+        "@esbuild/win32-arm64": "0.24.0",
+        "@esbuild/win32-ia32": "0.24.0",
+        "@esbuild/win32-x64": "0.24.0"
+      }
+    },
+    "node_modules/hachure-fill": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/hachure-fill/-/hachure-fill-0.5.2.tgz",
+      "integrity": "sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg=="
+    },
+    "node_modules/jotai": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.10.0.tgz",
+      "integrity": "sha512-8W4u0aRlOIwGlLQ0sqfl/c6+eExl5D8lZgAUolirZLktyaj4WnxO/8a0HEPmtriQAB6X5LMhXzZVmw02X0P0qQ==",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=17.0.0",
+        "react": ">=17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/path-data-parser": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/path-data-parser/-/path-data-parser-0.1.0.tgz",
+      "integrity": "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w=="
+    },
+    "node_modules/points-on-curve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/points-on-curve/-/points-on-curve-0.2.0.tgz",
+      "integrity": "sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A=="
+    },
+    "node_modules/points-on-path": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/points-on-path/-/points-on-path-0.2.1.tgz",
+      "integrity": "sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==",
+      "dependencies": {
+        "path-data-parser": "0.1.0",
+        "points-on-curve": "0.2.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/roughjs": {
+      "version": "4.6.6",
+      "resolved": "https://registry.npmjs.org/roughjs/-/roughjs-4.6.6.tgz",
+      "integrity": "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ==",
+      "dependencies": {
+        "hachure-fill": "^0.5.2",
+        "path-data-parser": "^0.1.0",
+        "points-on-curve": "^0.2.0",
+        "points-on-path": "^0.2.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}

frontend/typescript/excalidraw_canvas/package.json

@@ -0,0 +1,17 @@
+{
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.17.6",
+    "@excalidraw/laser-pointer": "1.3.1",
+    "@types/react": "18.3.11",
+    "@types/react-dom": "18.3.0",
+    "browser-fs-access": "0.35.0",
+    "jotai": "2.10.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "roughjs": "4.6.6"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0",
+    "typescript": "^5.6.3"
+  }
+}

frontend/typescript/pixi_canvas/README.md

@@ -2,7 +2,7 @@ Init
 - `npm install`
 
 Watch & build (without typechecking)
-- `node_modules/.bin/esbuild pixi_canvas.ts --bundle --outfile=../bundles/pixi_canvas.js --format=esm --watch`
+- `node_modules/.bin/esbuild pixi_canvas.ts --bundle --minify --outfile=../bundles/pixi_canvas.js --format=esm --watch`
 
 Watch & typecheck (without building)
 - `node_modules/.bin/tsc pixi_canvas.ts --watch -noEmit --preserveWatchOutput --target esnext --module esnext --moduleResolution bundler`

frontend/typescript/pixi_canvas/pixi_canvas.ts

@@ -1,5 +1,17 @@
 import { Application, Text, Graphics, Container, TextStyle, Sprite, Texture } from "pixi.js";
 
+// const color_dark_slate_blue = 'DarkSlateBlue'
+const color_dark_slate_blue = '#24478e'  // oklch(41.43% 0.125 262.26)'
+
+// const color_white = 'White'
+const color_white = '#ffffff'   // oklch(100% 3.5594404384177905e-8 105.88)
+
+// const color_slate_blue = 'SlateBlue'
+const color_slate_blue = '#3d7af3'  // oklch(60.45% 0.194 262.26)
+
+// const color_dark_violet_with_x = '0x550099'   // oklch(37.6% 0.201 299.56)
+const color_dark_violet_with_x = '0x002ca9'   // oklch(37.6% 0.201 263.53)
+
 // @TODO sync with Rust and `tauri_glue.ts`
 type Timeline = {
     blocks: Array<TimelineBlock>
@@ -69,7 +81,7 @@ export class PixiController {
     }
 
     async init(parent_element: HTMLElement) {
-        await this.app.init({ background: 'DarkSlateBlue', antialias: true, resizeTo: parent_element });
+        await this.app.init({ background: color_dark_slate_blue, antialias: true, resizeTo: parent_element });
         parent_element.appendChild(this.app.canvas);
     }
 
@@ -199,6 +211,10 @@ export class PixiController {
     clear_vars() {
         this.var_signal_rows.slice().reverse().forEach(row => row.destroy());
     }
+
+    request_timeline_redraw() {
+        
+    }
 }
 
 class VarSignalRow {
@@ -217,7 +233,7 @@ class VarSignalRow {
     signal_blocks_container = new Container();
     label_style = new TextStyle({
         align: "center",
-        fill: "White",
+        fill: color_white,
         fontSize: 16,
         fontFamily: '"Courier New", monospace',
     });    
@@ -254,7 +270,7 @@ class VarSignalRow {
         // row background
         this.row_container_background = new Sprite();
         this.row_container_background.texture = Texture.WHITE;
-        this.row_container_background.tint = '0x550099';
+        this.row_container_background.tint = color_dark_violet_with_x;
         this.row_container_background.height = this.row_height;
         this.row_container.addChild(this.row_container_background);
 
@@ -296,7 +312,7 @@ class VarSignalRow {
             const gap_between_blocks = 2;
             const background = new Graphics()
                 .rect(gap_between_blocks / 2, 0, timeline_block.width - gap_between_blocks, timeline_block.height)
-                .fill('SlateBlue');
+                .fill(color_slate_blue);
             signal_block.addChild(background);
 
             // label

frontend/typescript/tauri_glue/README.md

@@ -2,7 +2,7 @@ Init
 - `npm install`
 
 Watch & build (without typechecking)
--`- `node_modules/.bin/esbuild pixi_canvas.ts --bundle --outfile=../bundles/tauri_glue.js --format=esm --watch``
+- `node_modules/.bin/esbuild tauri_glue.ts --bundle --minify --outfile=../bundles/tauri_glue.js --format=esm --watch`
 
 Watch & typecheck (without building)
 - `node_modules/.bin/tsc tauri_glue.ts --watch -noEmit --preserveWatchOutput --target esnext --module esnext --moduleResolution bundler`

frontend/typescript/tauri_glue/tauri_glue.ts

@@ -1,8 +1,9 @@
 // @TODO use TS and Tauri bindgens to make this code properly typed
 
-import { core } from '@tauri-apps/api'
+import { core, event } from '@tauri-apps/api'
 
 const invoke = core.invoke;
+const listen = event.listen;
 
 type Filename = string;
 type JavascriptCode = string;
@@ -10,6 +11,16 @@ type WellenHierarchy = unknown;
 type Timeline = unknown;
 type VarFormat = unknown;
 
+type AddedDecodersCount = number;
+type RemovedDecodersCount = number;
+type DecoderPath = string;
+
+type AddedDiagramConnectorsCount = number;
+type RemovedDiagramConnectorsCount = number;
+type DiagramConnectorPath = string;
+type DiagramConnectorName = string;
+type ComponentId = string;
+
 export async function show_window(): Promise<void> {
     return await invoke("show_window");
 }
@@ -27,23 +38,59 @@ export async function get_hierarchy(): Promise<WellenHierarchy> {
 }
 
 export async function load_signal_and_get_timeline(
-    signal_ref_index: number, 
+    signal_ref_index: number,
     timeline_zoom: number,
     timeline_viewport_width: number,
-    timeline_viewport_x: number, 
+    timeline_viewport_x: number,
     block_height: number,
     var_format: VarFormat,
 ): Promise<Timeline> {
-    return await invoke("load_signal_and_get_timeline", { 
-        signal_ref_index, 
-        timeline_zoom, 
+    return await invoke("load_signal_and_get_timeline", {
+        signal_ref_index,
+        timeline_zoom,
         timeline_viewport_width,
         timeline_viewport_x,
-        block_height, 
-        var_format 
+        block_height,
+        var_format
     });
 }
 
 export async function unload_signal(signal_ref_index: number): Promise<void> {
     return await invoke("unload_signal", { signal_ref_index });
 }
+
+export async function send_char(c : string): Promise<void> {
+    return await invoke("send_char", { c });
+}
+
+export async function add_decoders(decoder_paths: Array<DecoderPath>): Promise<AddedDecodersCount> {
+    return await invoke("add_decoders", { decoder_paths });
+}
+
+export async function remove_all_decoders(): Promise<RemovedDecodersCount> {
+    return await invoke("remove_all_decoders");
+}
+
+export async function add_diagram_connectors(diagram_connector_paths: Array<DiagramConnectorPath>): Promise<AddedDiagramConnectorsCount> {
+    return await invoke("add_diagram_connectors", { diagram_connector_paths });
+}
+
+export async function remove_all_diagram_connectors(): Promise<RemovedDiagramConnectorsCount> {
+    return await invoke("remove_all_diagram_connectors");
+}
+
+export async function listen_diagram_connectors_messages(on_message: (message: any) => void) {
+    return await listen("diagram_connector_message", (message) => on_message(message.payload));
+}
+
+export async function listen_term_update(on_message: (message: any) => void) {
+    return await listen("term_content", (message) => on_message(message.payload));
+}
+
+export async function notify_diagram_connector_text_change(diagram_connector: DiagramConnectorName, component_id: ComponentId, text: string): Promise<void> {
+    return await invoke("notify_diagram_connector_text_change", { diagram_connector, component_id, text });
+}
+
+export async function open_konata_file() {
+    return await invoke("open_konata_file");
+}