From fc19721a3a70635460b051782aa35c7a332c4d74 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Wed, 4 Sep 2024 16:33:20 +0200
Subject: [PATCH 01/42] Daily push

---
 .../main/grid-layout/GridLayout.svelte        |  2 +-
 .../configuration/Configuration.store.js      | 46 ++++++-------------
 .../configuration/configuration-actions.ts    |  4 +-
 src/renderer/runtime/runtime.store.js         | 11 +++--
 4 files changed, 23 insertions(+), 40 deletions(-)

diff --git a/src/renderer/main/grid-layout/GridLayout.svelte b/src/renderer/main/grid-layout/GridLayout.svelte
index d02f29ce1..8d0ea3ac0 100644
--- a/src/renderer/main/grid-layout/GridLayout.svelte
+++ b/src/renderer/main/grid-layout/GridLayout.svelte
@@ -122,7 +122,7 @@
           Math.abs(device.dy - (max_y > 0 ? max_y : 0)),
         ];
 
-        const obj = structuredClone(device);
+        const obj = device;
         obj.fly_x_direction = connection_right - connection_left;
         obj.fly_y_direction = connection_top - connection_bottom;
         obj.type = rt[i].id.substr(0, 4);
diff --git a/src/renderer/main/panels/configuration/Configuration.store.js b/src/renderer/main/panels/configuration/Configuration.store.js
index aff100957..82980688e 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.js
+++ b/src/renderer/main/panels/configuration/Configuration.store.js
@@ -171,19 +171,19 @@ export class ConfigList extends Array {
       }
 
       target
-        .getConfig()
-        .then((script) => {
+        .getActions()
+        .then((actions) => {
           //LOADED and SYNCED
-          const list = ConfigList.createFromActionString(script);
+          const list = ConfigList.createFromActions(actions);
           resolve(list);
         })
         .catch((e) => reject(e));
     });
   }
 
-  static createFromActionString(string) {
+  static createFromActions(actions) {
     const config = new ConfigList();
-    config.#Init(string);
+    config.#Init(actions);
     return config;
   }
 
@@ -228,34 +228,13 @@ export class ConfigList extends Array {
     });
   }
 
-  #Init(actionString) {
-    //Parse actionString
-    //TODO: do rawLuas format checking during parsing
-
-    let configList = [];
-    // get rid of new line, enter
-    actionString = actionString.replace(/[\n\r]+/g, "");
-    // get rid of more than 2 spaces
-    actionString = actionString.replace(/\s{2,10}/g, " ");
-    // remove lua opening and closing characters
-    // this function is used for both parsing full config (long complete lua) and individiual actions lua
-    if (actionString.startsWith("<?lua")) {
-      actionString = actionString.split("<?lua")[1].split("?>")[0];
-    }
-    // split by meta comments
-    configList = actionString.split(/(--\[\[@\w+(?:#|\w|\s)*\]\])/);
-
-    configList = configList.slice(1);
-    for (var i = 0; i < configList.length; i += 2) {
-      const split = configList[i]
-        .match(/--\[\[@(.*)\]\]/)
-        ?.at(1)
-        .split(/#(.*)/);
+  #Init(actions) {
+    console.log(actions);
+    for (const action of actions) {
       const obj = new ConfigObject({
-        //Extract short + name, e.g.: '--[[@gms#name]]' => 'gms'
-        short: split[0],
-        script: configList[i + 1].trim(),
-        name: split.length > 1 ? split[1] : undefined,
+        short: action.short,
+        script: action.script,
+        name: action.name,
       });
       super.push(obj);
     }
@@ -380,6 +359,7 @@ export class ConfigTarget {
   getEvent() {
     const element = this.getElement();
     const event = element.events.find((e) => e.type == this.eventType);
+    console.log(event);
     return event;
   }
 
@@ -405,7 +385,7 @@ export class ConfigTarget {
     return device;
   }
 
-  getConfig() {
+  getActions() {
     return new Promise((resolve, reject) => {
       const event = this.getEvent();
 
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 4a2a1211e..11b552c21 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -204,7 +204,7 @@ export async function discardElement({ dx, dy, page, element }) {
       eventType: eventtype,
       page: current.page,
     });
-    const list = ConfigList.createFromActionString(stored);
+    const list = ConfigList.createFromActions(stored);
     promises.push(list.sendTo({ target }));
   }
 
@@ -427,7 +427,7 @@ export function clearElement(
     const defaultConfig = events.find(
       (e: any) => e.value === eventtype
     )?.config;
-    const list = ConfigList.createFromActionString(defaultConfig);
+    const list = ConfigList.createFromActions(defaultConfig);
     promises.push(list.sendTo({ target: target }));
   }
 
diff --git a/src/renderer/runtime/runtime.store.js b/src/renderer/runtime/runtime.store.js
index 85e6bf4a9..57b3cf727 100644
--- a/src/renderer/runtime/runtime.store.js
+++ b/src/renderer/runtime/runtime.store.js
@@ -14,6 +14,7 @@ import { appSettings } from "./app-helper.store";
 import { add_datapoint } from "../serialport/message-stream.store.js";
 import { modal } from "../main/modals/modal.store";
 import { ProtectedStore } from "./smart-store.store.ts";
+import { createActionsFromString } from "./runtime";
 
 const setIntervalAsync = (fn, ms) => {
   fn().then(() => {
@@ -340,7 +341,7 @@ function create_user_input() {
 export const user_input = create_user_input();
 
 function create_runtime() {
-  const _runtime = new ProtectedStore([]);
+  const _runtime = writable([]);
 
   const findUpdateDestEvent = (_runtime, dx, dy, page, element, event) => {
     let _event = undefined;
@@ -694,9 +695,10 @@ function create_runtime() {
     _runtime.update((_runtime) => {
       let dest = findUpdateDestEvent(_runtime, dx, dy, page, element, event);
       if (dest) {
-        dest.config = actionString;
+        dest.config = createActionsFromString(actionString);
+
         if (typeof dest.stored === "undefined") {
-          dest.stored = actionString;
+          dest.stored = dest.config;
         }
       }
       return _runtime;
@@ -709,8 +711,9 @@ function create_runtime() {
 
       let dest = findUpdateDestEvent(rt, dx, dy, page, element, event);
       if (dest) {
+        const script = `<?lua ${dest.config.map((e) => e.toLua()).join("")} ?>`;
         instructions
-          .sendConfigToGrid(dx, dy, page, element, event, dest.config)
+          .sendConfigToGrid(dx, dy, page, element, event, script)
           .then((desc) => {
             resolve();
           })

From 799516fbb022ceef4fbf10d16c91cfadab211cf8 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 5 Sep 2024 11:03:29 +0200
Subject: [PATCH 02/42] Daily push

---
 .../main/user-interface/ActiveChanges.svelte  |   2 +
 src/renderer/runtime/runtime.ts               | 255 ++++++++++++++++++
 2 files changed, 257 insertions(+)
 create mode 100644 src/renderer/runtime/runtime.ts

diff --git a/src/renderer/main/user-interface/ActiveChanges.svelte b/src/renderer/main/user-interface/ActiveChanges.svelte
index 8df16e14b..d6e551417 100644
--- a/src/renderer/main/user-interface/ActiveChanges.svelte
+++ b/src/renderer/main/user-interface/ActiveChanges.svelte
@@ -145,6 +145,8 @@
       });
     }
   }
+
+  $: console.log($runtime)
 </script>
 
 <container
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
new file mode 100644
index 000000000..7772e75c4
--- /dev/null
+++ b/src/renderer/runtime/runtime.ts
@@ -0,0 +1,255 @@
+import { Architecture, ElementType } from "@intechstudio/grid-protocol";
+import {
+  writable,
+  get,
+  Writable,
+  Subscriber,
+  Unsubscriber,
+  Updater,
+} from "svelte/store";
+
+abstract class RuntimeNode<T> implements Writable<T> {
+  protected _internal: Writable<T>;
+  private _parent: RuntimeNode<any>;
+
+  subscribe(
+    run: Subscriber<T>,
+    invalidate?: (value?: T) => void
+  ): Unsubscriber {
+    return this._internal.subscribe(run, invalidate);
+  }
+
+  set(value: T) {
+    this._internal.set(value);
+    this.notifyParent();
+  }
+
+  update(updater: Updater<T>) {
+    this._internal.update(updater);
+    this.notifyParent();
+  }
+
+  constructor(parent: RuntimeNode<any>, value?: T) {
+    this._parent = parent;
+    this._internal = writable(value);
+  }
+
+  get parent(): RuntimeNode<any> {
+    return this._parent;
+  }
+
+  protected notify() {
+    //console.log("ME NOTIFIED:", this);
+    this._internal.update((s) => s);
+    this.notifyParent();
+  }
+
+  protected syncWithGrid() {
+    console.log("SYNCING");
+  }
+
+  protected notifyParent() {
+    if (!this._parent) {
+      return;
+    }
+
+    console.log("NOTIFY", this._parent);
+    this._parent.notify();
+  }
+
+  // Generalized getter
+  protected getField<K extends keyof T>(key: K): T[K] {
+    const data = get(this._internal);
+    return data[key];
+  }
+
+  // Generalized setter
+  protected setField<K extends keyof T>(key: K, value: T[K]) {
+    this.update((store) => {
+      store[key] = value;
+      return store;
+    });
+    this.notifyParent();
+  }
+}
+
+export type ActionData = {
+  short: string;
+  script: string;
+  name: string;
+};
+
+export class GridAction extends RuntimeNode<ActionData> {
+  constructor(parent: GridEvent, data?: ActionData) {
+    super(parent, data);
+  }
+
+  // Getters
+  get script() {
+    return this.getField("script");
+  }
+
+  get short() {
+    return this.getField("short");
+  }
+
+  get name() {
+    return this.getField("name");
+  }
+
+  // Setters
+  set script(value: string) {
+    this.setField("script", value);
+  }
+
+  set short(value: string) {
+    this.setField("short", value);
+  }
+
+  set name(value: string) {
+    this.setField("name", value);
+  }
+
+  toLua() {
+    const namePostfix = typeof this.name !== "undefined" ? `#${this.name}` : "";
+    return `--[[@${this.short}${namePostfix}]] ${this.script}`;
+  }
+}
+
+export type EventData = {
+  config: Array<GridAction>;
+  stored: Array<GridAction[]>;
+  type: number;
+};
+
+export class GridEvent extends RuntimeNode<ActionData> {
+  constructor(parent: GridEvent, data?: ActionData) {
+    super(parent, data);
+  }
+
+  // Getters
+
+  // Setters
+}
+
+export type ElementData = {
+  elementIndex: number;
+  events: Array<GridEvent>;
+  name: string;
+  type: ElementType;
+};
+
+export class GridElement extends RuntimeNode<ElementData> {
+  constructor(parent: GridEvent, data?: ElementData) {
+    super(parent, data);
+  }
+
+  // Getters
+
+  // Setters
+}
+
+export type PageData = {
+  pageNumber: number;
+  control_elements: Array<GridElement>;
+};
+
+export class GridPage extends RuntimeNode<PageData> {
+  constructor(parent: GridModule, data?: PageData) {
+    super(parent, data);
+  }
+
+  // Getters
+
+  // Setters
+}
+
+type FirmwareVersion = {
+  major: number | undefined;
+  minor: number | undefined;
+  patch: number | undefined;
+};
+
+type Direction = {
+  dx: number;
+  dy: number;
+};
+
+type DirectionMap = {
+  bot: Direction;
+  left: Direction;
+  right: Direction;
+  top: Direction;
+};
+
+export type ModuleData = {
+  alive: number;
+  architecture: Architecture;
+  dx: number;
+  dy: number;
+  fwMismatch: boolean;
+  fwVersion: FirmwareVersion;
+  gridX: number;
+  gridY: number;
+  id: string;
+  map: DirectionMap;
+  portstate: any;
+  rot: number;
+  type: string;
+  pages: Array<GridPage>;
+};
+
+export class GridModule extends RuntimeNode<ModuleData> {
+  constructor(parent: GridRuntime, data?: ModuleData) {
+    super(parent, data);
+  }
+
+  // Getters
+
+  // Setters
+}
+
+export class GridRuntime extends RuntimeNode<void> {
+  constructor() {
+    super(undefined, undefined);
+  }
+
+  // Getters
+
+  // Setters
+}
+
+//TODO: helper function to refactor out
+export function createActionsFromString(script: string) {
+  const result: GridAction[] = [];
+  let configList: string[] = [];
+  let actionString = script;
+  // get rid of new line, enter
+  actionString = actionString.replace(/[\n\r]+/g, "");
+  // get rid of more than 2 spaces
+  actionString = actionString.replace(/\s{2,10}/g, " ");
+  // remove lua opening and closing characters
+  // this function is used for both parsing full config (long complete lua) and individiual actions lua
+  if (actionString.startsWith("<?lua")) {
+    actionString = actionString.split("<?lua")[1].split("?>")[0];
+  }
+  // split by meta comments
+  configList = actionString.split(/(--\[\[@\w+(?:#|\w|\s)*\]\])/);
+
+  configList = configList.slice(1);
+  for (var i = 0; i < configList.length; i += 2) {
+    const split = configList[i]
+      .match(/--\[\[@(.*)\]\]/)
+      ?.at(1)
+      .split(/#(.*)/);
+    const obj = new GridAction(undefined, {
+      //Extract short + name, e.g.: '--[[@gms#name]]' => 'gms'
+      short: split[0],
+      script: configList[i + 1].trim(),
+      name: split.length > 1 ? split[1] : undefined,
+    });
+    result.push(obj);
+  }
+
+  return result;
+}

From 4b302e09d149415a4f215b470d5ff7064d2fcf0a Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 6 Sep 2024 17:38:19 +0200
Subject: [PATCH 03/42] Daily push

---
 src/renderer/config-blocks/CodeBlock.svelte   |    1 +
 src/renderer/config-blocks/GamePadAxis.svelte |    2 +-
 src/renderer/config-blocks/MidiNRPN.svelte    |    2 +-
 src/renderer/config-blocks/RawCode.svelte     |    2 +
 src/renderer/main/FirmwareCheck.svelte        |    5 +-
 src/renderer/main/MiddlePanelContainer.svelte |    7 +-
 .../main/grid-layout/GridLayout.svelte        |   19 +-
 .../grid-layout/grid-modules/Device.svelte    |    2 +-
 .../grid-modules/devices/TEK1.svelte          |    4 +-
 .../grid-modules/devices/TEK2.svelte          |    4 +-
 .../overlays/ControlNameOverlay.svelte        |    2 +-
 .../overlays/PresetLoadOverlay.svelte         |    7 +-
 .../overlays/ProfileLoadOverlay.svelte        |    2 +-
 .../underlays/ActiveChanges.svelte            |    7 +-
 .../underlays/ElementSelection.svelte         |    2 +-
 .../underlays/ModuleBorder.svelte             |    2 +-
 .../main/modals/AddVirtualModule.svelte       |    6 +-
 .../configuration/Configuration.store.js      |   16 +-
 .../panels/configuration/Configuration.svelte |   10 +-
 .../ElementSelectionPanel.svelte              |    4 +-
 .../panels/configuration/EventPanel.svelte    |  105 +-
 .../components/ActionPicker.svelte            |    2 +-
 .../configuration/components/Pages.svelte     |    2 +-
 .../configuration/components/Toolbar.svelte   |    2 +-
 .../configuration/configuration-actions.ts    |   23 +-
 .../main/panels/packages/Packages.svelte      |    2 +-
 .../panels/preferences/Preferences.svelte     |    4 +-
 .../panels/profileCloud/ProfileCloud.svelte   |   13 +-
 .../main/user-interface/ActiveChanges.svelte  |    4 +-
 .../user-interface/StickyContainer.svelte     |    9 +-
 src/renderer/runtime/engine.store.ts          |    2 +-
 src/renderer/runtime/runtime.store.js         | 1289 -----------------
 src/renderer/runtime/runtime.store.ts         |  460 ++++++
 src/renderer/runtime/runtime.ts               | 1009 ++++++++++++-
 src/renderer/serialport/instructions.ts       |    2 +-
 35 files changed, 1565 insertions(+), 1469 deletions(-)
 delete mode 100644 src/renderer/runtime/runtime.store.js
 create mode 100644 src/renderer/runtime/runtime.store.ts

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index e49d97633..71d56bd9b 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -132,6 +132,7 @@
   }
 
   function open_monaco() {
+    console.log(config);
     $monaco_store = { config: config.makeCopy(), index: index };
     $monaco_elementtype = access_tree.elementtype;
     modal.show({
diff --git a/src/renderer/config-blocks/GamePadAxis.svelte b/src/renderer/config-blocks/GamePadAxis.svelte
index ac7727e3c..7a35ddaff 100644
--- a/src/renderer/config-blocks/GamePadAxis.svelte
+++ b/src/renderer/config-blocks/GamePadAxis.svelte
@@ -57,7 +57,7 @@
   import { GridScript } from "@intechstudio/grid-protocol";
 
   import { Script } from "./_script_parsers.js";
-  import { LocalDefinitions } from "../runtime/runtime.store.js";
+  import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { configManager } from "../main/panels/configuration/Configuration.store.js";
diff --git a/src/renderer/config-blocks/MidiNRPN.svelte b/src/renderer/config-blocks/MidiNRPN.svelte
index c34ae5424..7bfc27b0e 100644
--- a/src/renderer/config-blocks/MidiNRPN.svelte
+++ b/src/renderer/config-blocks/MidiNRPN.svelte
@@ -49,7 +49,7 @@
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { configManager } from "../main/panels/configuration/Configuration.store.js";
-  import { LocalDefinitions } from "../runtime/runtime.store.js";
+  import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators.js";
 
diff --git a/src/renderer/config-blocks/RawCode.svelte b/src/renderer/config-blocks/RawCode.svelte
index 2138a89d0..519e5640d 100644
--- a/src/renderer/config-blocks/RawCode.svelte
+++ b/src/renderer/config-blocks/RawCode.svelte
@@ -93,6 +93,8 @@
       script: config.script,
     });
   }
+
+  $: console.log(config);
 </script>
 
 <code-block
diff --git a/src/renderer/main/FirmwareCheck.svelte b/src/renderer/main/FirmwareCheck.svelte
index 0baa87db5..543df8da5 100644
--- a/src/renderer/main/FirmwareCheck.svelte
+++ b/src/renderer/main/FirmwareCheck.svelte
@@ -48,10 +48,9 @@ STATE 6 | Error               | Button  -> STATE 0 (Close notification)
 
   // check for parsed modules
   $: {
-    const store = $runtime;
     let firmwareMismatchFound = false;
 
-    if (store.length === 0) {
+    if ($runtime.modules.length === 0) {
       startBootloaderCheck();
       if ($appSettings.firmwareNotificationState == 1) {
         $appSettings.firmwareNotificationState = 2;
@@ -61,7 +60,7 @@ STATE 6 | Error               | Button  -> STATE 0 (Close notification)
     }
 
     // check modules for firmware mismatch
-    store.forEach((device) => {
+    runtime.modules.forEach((device) => {
       if ($appSettings.firmwareNotificationState == 6) {
         $appSettings.firmwareNotificationState = 0;
         uploadProgressText = "";
diff --git a/src/renderer/main/MiddlePanelContainer.svelte b/src/renderer/main/MiddlePanelContainer.svelte
index c41225f20..e9ed5e405 100644
--- a/src/renderer/main/MiddlePanelContainer.svelte
+++ b/src/renderer/main/MiddlePanelContainer.svelte
@@ -71,7 +71,7 @@
   $: {
     if (
       $pendingActions.length > 0 &&
-      $runtime.length > 0 &&
+      $runtime.modules.length > 0 &&
       typeof moduleHangingTimeout === "undefined"
     ) {
       moduleHangingTimeout = setTimeout(() => {
@@ -115,13 +115,14 @@
     <div
       id="sticky-container"
       class="absolute top-full left-1/2 -translate-x-1/2"
-      class:invisible={showFixedStickyContainer || $runtime.length === 0}
+      class:invisible={showFixedStickyContainer ||
+        $runtime.modules.length === 0}
     >
       <StickyContainer />
     </div>
   </GridLayout>
 
-  {#if $runtime.length == 0 && $appSettings.firmwareNotificationState === 0}
+  {#if $runtime.modules.length == 0 && $appSettings.firmwareNotificationState === 0}
     <div
       in:fade|global={{ delay: 2000, duration: 1000 }}
       out:blur|global={{ duration: 150 }}
diff --git a/src/renderer/main/grid-layout/GridLayout.svelte b/src/renderer/main/grid-layout/GridLayout.svelte
index 8d0ea3ac0..39c747be2 100644
--- a/src/renderer/main/grid-layout/GridLayout.svelte
+++ b/src/renderer/main/grid-layout/GridLayout.svelte
@@ -4,7 +4,7 @@
   import { modal } from "./../modals/modal.store.ts";
   import { watchResize } from "svelte-watch-resize";
   import { writable } from "svelte/store";
-  import { runtime } from "../../runtime/runtime.store.js";
+  import { runtime } from "../../runtime/runtime.store";
   import { appSettings } from "../../runtime/app-helper.store.js";
   import Device from "./grid-modules/Device.svelte";
   import { fade, fly } from "svelte/transition";
@@ -79,17 +79,17 @@
 
   function getGridDimensions() {
     const rt = $runtime;
-    const min_x = Math.min(...rt.map((e) => e.dx));
-    const min_y = Math.min(...rt.map((e) => e.dy));
-    const max_x = Math.max(...rt.map((e) => e.dx));
-    const max_y = Math.max(...rt.map((e) => e.dy));
+    const min_x = Math.min(...rt.modules.map((e) => e.dx));
+    const min_y = Math.min(...rt.modules.map((e) => e.dy));
+    const max_x = Math.max(...rt.modules.map((e) => e.dx));
+    const max_y = Math.max(...rt.modules.map((e) => e.dy));
     return {
       min_x: min_x,
       min_y: min_y,
       max_x: max_x,
       max_y: max_y,
-      rows: rt.length > 0 ? Math.abs(min_y - max_y) + 1 : 0,
-      columns: rt.length > 0 ? Math.abs(min_x - max_x) + 1 : 0,
+      rows: rt.modules.length > 0 ? Math.abs(min_y - max_y) + 1 : 0,
+      columns: rt.modules.length > 0 ? Math.abs(min_x - max_x) + 1 : 0,
     };
   }
 
@@ -99,13 +99,13 @@
       const { min_x, min_y, max_y, max_x } = dim;
 
       s = [];
-      rt.forEach((device, i) => {
+      rt.modules.forEach((device, i) => {
         let connection_top = 0;
         let connection_bottom = 0;
         let connection_left = 0;
         let connection_right = 0;
 
-        rt.forEach((neighbor) => {
+        rt.modules.forEach((neighbor) => {
           if (!(device.dx == neighbor.dx && device.dy == neighbor.dy)) {
             const dxDiff = device.dx - neighbor.dx;
             const dyDiff = device.dy - neighbor.dy;
@@ -125,7 +125,6 @@
         const obj = device;
         obj.fly_x_direction = connection_right - connection_left;
         obj.fly_y_direction = connection_top - connection_bottom;
-        obj.type = rt[i].id.substr(0, 4);
         obj.gridX = x + 1;
         obj.gridY = y + 1;
         s.push(obj);
diff --git a/src/renderer/main/grid-layout/grid-modules/Device.svelte b/src/renderer/main/grid-layout/grid-modules/Device.svelte
index 9d0b2cb17..d89953ba3 100644
--- a/src/renderer/main/grid-layout/grid-modules/Device.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/Device.svelte
@@ -23,7 +23,7 @@
   import { appSettings } from "../../../runtime/app-helper.store";
   import { moduleOverlay } from "../../../runtime/moduleOverlay";
   import { selectedConfigStore } from "../../../runtime/config-helper.store";
-  import { user_input } from "../../../runtime/runtime.store.js";
+  import { user_input } from "../../../runtime/runtime.store";
   import { onMount } from "svelte";
   import ModuleSelection from "./underlays/ModuleBorder.svelte";
   import { ConfigTarget } from "../../panels/configuration/Configuration.store";
diff --git a/src/renderer/main/grid-layout/grid-modules/devices/TEK1.svelte b/src/renderer/main/grid-layout/grid-modules/devices/TEK1.svelte
index 039b1cdce..587bf6233 100644
--- a/src/renderer/main/grid-layout/grid-modules/devices/TEK1.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/devices/TEK1.svelte
@@ -5,8 +5,8 @@
   import EndlessPot from "../elements/EndlessPot.svelte";
   import Led from "../elements/Led.svelte";
 
-  import { elementPositionStore } from "../../../../runtime/runtime.store.js";
-  import { ledColorStore } from "../../../../runtime/runtime.store.js";
+  import { elementPositionStore } from "../../../../runtime/runtime.store";
+  import { ledColorStore } from "../../../../runtime/runtime.store";
 
   export let moduleWidth;
   export let id = "TEK1";
diff --git a/src/renderer/main/grid-layout/grid-modules/devices/TEK2.svelte b/src/renderer/main/grid-layout/grid-modules/devices/TEK2.svelte
index 341b71b23..e130df7de 100644
--- a/src/renderer/main/grid-layout/grid-modules/devices/TEK2.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/devices/TEK2.svelte
@@ -5,8 +5,8 @@
   import EndlessPot from "../elements/EndlessPot.svelte";
   import Led from "../elements/Led.svelte";
 
-  import { elementPositionStore } from "../../../../runtime/runtime.store.js";
-  import { ledColorStore } from "../../../../runtime/runtime.store.js";
+  import { elementPositionStore } from "../../../../runtime/runtime.store";
+  import { ledColorStore } from "../../../../runtime/runtime.store";
 
   export let moduleWidth;
   export let id = "TEK2";
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte
index 60bc16968..54ba3029c 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte
@@ -1,6 +1,6 @@
 <script>
   import { appSettings } from "../../../../runtime/app-helper.store.js";
-  import { elementNameStore } from "../../../../runtime/runtime.store.js";
+  import { elementNameStore } from "../../../../runtime/runtime.store";
 
   export let visible = false;
   export let elementNumber = undefined;
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
index a5000b408..1709ac086 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import { grid } from "@intechstudio/grid-protocol";
   import { ConfigTarget } from "./../../../panels/configuration/Configuration.store.js";
-  import { user_input } from "./../../../../runtime/runtime.store.js";
+  import { user_input } from "./../../../../runtime/runtime.store";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
   import { createEventDispatcher, onMount } from "svelte";
   import { get } from "svelte/store";
   import { appSettings } from "../../../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
+  import { GridEvent } from "../../../../runtime/runtime.js";
 
   export let device = undefined;
   export let visible = false;
@@ -88,9 +89,7 @@
 
     const events = target.events;
     //Find the event that has change
-    const changed = events.find(
-      (e) => typeof e.stored !== "undefined" && e.stored !== e.config
-    );
+    const changed = events.find((e: GridEvent) => e.hasChanges());
     isChanged = typeof changed !== "undefined";
   }
 
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
index 9a62fbadd..f3287e943 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
@@ -1,6 +1,6 @@
 <script>
   import { get } from "svelte/store";
-  import { user_input } from "./../../../../runtime/runtime.store.js";
+  import { user_input } from "./../../../../runtime/runtime.store";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
   import { appSettings } from "../../../../runtime/app-helper.store";
   import { createEventDispatcher } from "svelte";
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
index db53990c8..91c816b4b 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
@@ -1,6 +1,6 @@
 <script>
   import { ConfigTarget } from "./../../../panels/configuration/Configuration.store.js";
-  import { user_input } from "../../../../runtime/runtime.store.js";
+  import { user_input } from "../../../../runtime/runtime.store";
   import { createEventDispatcher } from "svelte";
   import { get } from "svelte/store";
 
@@ -32,11 +32,8 @@
       return;
     }
 
-    const events = target.events;
     //Find the event that has change
-    const changed = events.find(
-      (e) => typeof e.stored !== "undefined" && e.stored !== e.config
-    );
+    const changed = target.events.find((e) => e.hasChanges());
     isChanged = typeof changed !== "undefined";
   }
 </script>
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ElementSelection.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ElementSelection.svelte
index 3878d3530..7a5eb0f48 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ElementSelection.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ElementSelection.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { user_input } from "../../../../runtime/runtime.store.js";
+  import { user_input } from "../../../../runtime/runtime.store";
   import { get } from "svelte/store";
   import { createEventDispatcher } from "svelte";
 
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ModuleBorder.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ModuleBorder.svelte
index 9169f6c62..f13d4bf68 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ModuleBorder.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ModuleBorder.svelte
@@ -1,7 +1,7 @@
 <script>
   import { appSettings } from "./../../../../runtime/app-helper.store.js";
   import { createEventDispatcher } from "svelte";
-  import { user_input } from "../../../../runtime/runtime.store.js";
+  import { user_input } from "../../../../runtime/runtime.store";
   import { fade } from "svelte/transition";
   import { reduced_motion_store } from "../../../../runtime/animations";
   import { get } from "svelte/store";
diff --git a/src/renderer/main/modals/AddVirtualModule.svelte b/src/renderer/main/modals/AddVirtualModule.svelte
index e022024e8..9b561fb5e 100644
--- a/src/renderer/main/modals/AddVirtualModule.svelte
+++ b/src/renderer/main/modals/AddVirtualModule.svelte
@@ -34,8 +34,10 @@
   let selectedModule: number = -1;
 
   function handleAddClicked() {
-    const rt = get(runtime);
-    if (typeof rt.find((e) => e.dx === dx && e.dy === dy) !== "undefined") {
+    if (
+      typeof runtime.modules.find((e) => e.dx === dx && e.dy === dy) !==
+      "undefined"
+    ) {
       runtime.destroy_module(dx, dy);
     }
     runtime.addVirtualModule({
diff --git a/src/renderer/main/panels/configuration/Configuration.store.js b/src/renderer/main/panels/configuration/Configuration.store.js
index 82980688e..6d52b4418 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.js
+++ b/src/renderer/main/panels/configuration/Configuration.store.js
@@ -38,10 +38,11 @@ export function lastOpenedActionblocksRemove(short) {
 }
 
 export class ConfigObject {
-  constructor({ short, script, name = undefined }) {
+  constructor({ short, script, name = undefined, runtimeRef }) {
     this.short = short;
     this.script = script;
     this.name = name;
+    this.runtimeRef = runtimeRef;
     this.id = uuidv4();
 
     let res = getComponentInformation({ short: short });
@@ -72,14 +73,15 @@ export class ConfigObject {
   makeCopy() {
     const copy = new ConfigObject({
       short: this.short,
+      name: this.name,
       script: this.script,
+      runtimeRef: this.runtimeRef,
     });
     copy.information = this.information;
     copy.component = this.component;
     copy.selected = this.selected;
     copy.toggled = this.toggled;
     copy.id = uuidv4();
-    copy.name = this.name;
 
     // Copy any additional properties that were added later
     for (const prop in this) {
@@ -229,12 +231,12 @@ export class ConfigList extends Array {
   }
 
   #Init(actions) {
-    console.log(actions);
     for (const action of actions) {
       const obj = new ConfigObject({
         short: action.short,
         script: action.script,
         name: action.name,
+        runtimeRef: action,
       });
       super.push(obj);
     }
@@ -296,7 +298,7 @@ export class ConfigTarget {
   elementType = undefined;
 
   static create({ device: { dx: dx, dy: dy }, page, element, eventType }) {
-    const device = get(runtime).find((e) => e.dx == dx && e.dy == dy);
+    const device = runtime.modules.find((e) => e.dx == dx && e.dy == dy);
 
     if (typeof device === "undefined") {
       //console.warn(`Unknown device at (${dx},${dy})!`);
@@ -349,7 +351,7 @@ export class ConfigTarget {
 
   hasChanges() {
     for (const event of this.events) {
-      if (event.config !== event.stored) {
+      if (event.hasChanges()) {
         return true;
       }
     }
@@ -359,7 +361,6 @@ export class ConfigTarget {
   getEvent() {
     const element = this.getElement();
     const event = element.events.find((e) => e.type == this.eventType);
-    console.log(event);
     return event;
   }
 
@@ -378,8 +379,7 @@ export class ConfigTarget {
   }
 
   getDevice() {
-    const rt = get(runtime);
-    const device = rt.find(
+    const device = runtime.modules.find(
       (e) => e.dx == this.device.dx && e.dy == this.device.dy
     );
     return device;
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index dd4385682..f4996ce13 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -13,11 +13,7 @@
 
   import { lua_error_store } from "../DebugMonitor/DebugMonitor.store";
 
-  import {
-    logger,
-    runtime,
-    user_input,
-  } from "../../../runtime/runtime.store.js";
+  import { logger, runtime, user_input } from "../../../runtime/runtime.store";
 
   import {
     ConfigTarget,
@@ -401,7 +397,7 @@
           on:drag-end={handleDragEnd}
           class="flex flex-col h-full relative justify-between"
         >
-          {#if $configManager.length === 0 && $runtime.length > 0}
+          {#if $configManager.length === 0 && $runtime.modules.length > 0}
             <div class="mt-2">
               <AddAction
                 index={0}
@@ -508,7 +504,7 @@
         </div>
         <div
           class="w-full flex justify-between mb-3"
-          class:invisible={$runtime.length === 0}
+          class:invisible={$runtime.modules.length === 0}
         >
           <AddActionButton
             index={$configManager.length}
diff --git a/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte b/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
index 8d1cf3828..7ab1b1661 100644
--- a/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
+++ b/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
@@ -8,7 +8,7 @@
     elementNameStore,
     user_input,
     runtime,
-  } from "../../../runtime/runtime.store.js";
+  } from "../../../runtime/runtime.store";
 
   function showControlElementNameOverlay() {
     const show = get(moduleOverlay) !== "control-name-overlay";
@@ -61,7 +61,7 @@
 
   function renderElementList() {
     const ui = $user_input;
-    const device = $runtime.find(
+    const device = runtime.modules.find(
       (device) => device.dx === ui.dx && device.dy === ui.dy
     );
     if (typeof device === "undefined") {
diff --git a/src/renderer/main/panels/configuration/EventPanel.svelte b/src/renderer/main/panels/configuration/EventPanel.svelte
index 88943029f..759332cdb 100644
--- a/src/renderer/main/panels/configuration/EventPanel.svelte
+++ b/src/renderer/main/panels/configuration/EventPanel.svelte
@@ -1,84 +1,58 @@
-<script>
-  import { user_input, runtime } from "../../../runtime/runtime.store.js";
+<script lang="ts">
+  import { NumberToEventType } from "@intechstudio/grid-protocol";
+  import { runtime, user_input } from "../../../runtime/runtime.store";
 
-  import { createEventDispatcher } from "svelte";
   import { get } from "svelte/store";
   import { ConfigTarget } from "./Configuration.store.js";
   import { MeltRadio } from "@intechstudio/grid-uikit";
-  import { CEEAT } from "@intechstudio/grid-protocol";
+  import { GridEvent } from "../../../runtime/runtime";
 
-  const dispatch = createEventDispatcher();
+  type EventPanelOption = {
+    title: string;
+    value: number;
+  };
+  const defaultOptions: EventPanelOption[] = Array.from(Array(3).keys()).map(
+    (i) => ({ title: "", value: i } as EventPanelOption)
+  );
 
-  class Event {
-    constructor({
-      name = "",
-      type = -1,
-      selected = false,
-      dx,
-      dy,
-      element,
-      page,
-    }) {
-      this.name = name;
-      this.type = type;
-      this.selected = selected;
-      this.dx = dx;
-      this.dy = dy;
-      this.element = element;
-      this.page = page;
-    }
-  }
+  const defaultSelected = -1;
 
-  let options = [];
-  let selected = -1;
-
-  let events = [];
+  let options = defaultOptions;
+  let selected = defaultSelected;
+  let target: ConfigTarget;
 
   $: handleUserInputChange($user_input);
 
-  function handleUserInputChange(ui) {
-    const target = ConfigTarget.createFrom({ userInput: ui });
+  function handleUserInputChange(ui: any) {
+    target = ConfigTarget.createFrom({ userInput: ui });
 
     if (typeof target === "undefined") {
-      options = Array.from(Array(3).keys()).map((i) =>
-        Object({ title: undefined, value: i })
-      );
-      selected = -1;
+      options = defaultOptions;
+      selected = defaultSelected;
       return;
     }
 
-    //Get events
-    events = target.events.map((e) => {
-      const name = String(
-        Object.values(CEEAT).find((obj) => obj.value == e.type).desc
-      );
-      return new Event({
-        name: name[0].toUpperCase() + name.slice(1).toLowerCase(),
-        type: Number(e.type),
-        dx: target.device.dx,
-        dy: target.device.dy,
-        element: target.element,
-        page: target.page,
-      });
-    });
-    options = events.map((e, i) => Object({ title: e.name, value: i }));
-    selected = events.findIndex((e) => Number(target.eventType) === e.type);
+    options = target.events.map((e: GridEvent) =>
+      Object({ title: NumberToEventType(e.type), value: e.type })
+    );
+
+    selected = options.find((e) => e.value === target.eventType).value;
   }
 
   $: handleSelectEvent(selected);
 
   function handleSelectEvent(value) {
-    const event = events[value];
-    if (typeof event === "undefined") {
+    const ui = get(user_input);
+    if (value === -1) {
       return;
     }
-    const ui = get(user_input);
+
     user_input.set({
       dx: ui.dx,
       dy: ui.dy,
       pagenumber: ui.pagenumber,
       elementnumber: ui.elementnumber,
-      eventtype: event.type,
+      eventtype: selected,
     });
   }
 </script>
@@ -94,22 +68,13 @@
         {options}
       >
         <svelte:fragment slot="item" let:value>
-          {@const event = events[value]}
-          {#if typeof event !== "undefined"}
-            {@const eventData = $runtime
-              .find((e) => e.dx == event.dx && e.dy == event.dy)
-              ?.pages[event.page].control_elements.find(
-                (element) => element.elementIndex == event.element
-              )
-              ?.events.find((e) => e.type == event.type)}
-            {@const stored = eventData?.stored}
-            {@const config = eventData?.config}
-            {#if stored !== config && typeof stored !== "undefined"}
-              <unsaved-changes-marker
-                class="absolute right-0 top-0 w-4 h-4 bg-unsavedchange rounded-full translate-x-1/3 -translate-y-1/3"
-              />
-            {/if}
-          {/if}
+          {@const event = target?.events.find((e) => e.type === Number(value))}
+          {#key $runtime}
+            <unsaved-changes-marker
+              class:hidden={!event?.hasChanges()}
+              class="absolute right-0 top-0 w-4 h-4 bg-unsavedchange rounded-full translate-x-1/3 -translate-y-1/3"
+            />
+          {/key}
         </svelte:fragment>
       </MeltRadio>
     </div>
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index f89426c73..30847f171 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -1,6 +1,6 @@
 <script>
   import { SvgIcon } from "@intechstudio/grid-uikit";
-  import { LocalDefinitions } from "./../../../../runtime/runtime.store.js";
+  import { LocalDefinitions } from "./../../../../runtime/runtime.store";
   import {
     ClipboardKey,
     appClipboard,
diff --git a/src/renderer/main/panels/configuration/components/Pages.svelte b/src/renderer/main/panels/configuration/components/Pages.svelte
index 1c7835736..f61da46e0 100644
--- a/src/renderer/main/panels/configuration/components/Pages.svelte
+++ b/src/renderer/main/panels/configuration/components/Pages.svelte
@@ -3,7 +3,7 @@
     logger,
     runtime,
     user_input,
-  } from "../../../../runtime/runtime.store.js";
+  } from "../../../../runtime/runtime.store";
 
   let selectedPage = undefined;
   function handleSelectPage(page) {
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index 1cb5f9766..62c130de4 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -1,6 +1,6 @@
 <script>
   import { derived, writable } from "svelte/store";
-  import { runtime, user_input } from "./../../../../runtime/runtime.store.js";
+  import { runtime, user_input } from "./../../../../runtime/runtime.store";
   import {
     createCopyAllDisabledStore,
     createOverwriteDisabledStore,
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 11b552c21..917a7bb6f 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -1,5 +1,5 @@
-import { logger } from "./../../../runtime/runtime.store.js";
-import { runtime, user_input } from "../../../runtime/runtime.store.js";
+import { logger } from "./../../../runtime/runtime.store";
+import { runtime, user_input } from "../../../runtime/runtime.store";
 import {
   configManager,
   ConfigTarget,
@@ -14,6 +14,7 @@ import {
 } from "@intechstudio/grid-protocol";
 import { Writable, derived, get } from "svelte/store";
 import { ClipboardKey, appClipboard } from "../../../runtime/clipboard.store";
+import { createActionsFromString } from "../../../runtime/runtime";
 
 function handleError(e: any) {
   switch (e.type) {
@@ -325,6 +326,7 @@ export function mergeActionToCode(index: number, configs: ConfigObject[]) {
   const codeBlock = new ConfigObject({
     short: "cb",
     script: script,
+    runtimeRef: configs[0].runtimeRef,
   });
 
   configManager.update((s: ConfigList) => {
@@ -391,8 +393,9 @@ export function clearElement(
   pageNumber: number,
   elementNumber: number
 ) {
-  const rt = get(runtime);
-  const device: any = rt.find((e: any) => e.dx === dx && e.dy === dy);
+  const device: any = runtime.modules.find(
+    (e: any) => e.dx === dx && e.dy === dy
+  );
   const page: any = device?.pages.find((e: any) => e.pageNumber === pageNumber);
   const type = page.control_elements.find(
     (e: any) => e.elementIndex === elementNumber
@@ -424,9 +427,11 @@ export function clearElement(
       eventType: eventtype,
       page: current!.page,
     });
-    const defaultConfig = events.find(
-      (e: any) => e.value === eventtype
-    )?.config;
+    const defaultConfig = createActionsFromString(
+      undefined,
+      events.find((e: any) => e.value === eventtype)?.config
+    );
+
     const list = ConfigList.createFromActions(defaultConfig);
     promises.push(list.sendTo({ target: target }));
   }
@@ -464,7 +469,7 @@ export function createCopyAllDisabledStore(watched: Writable<ConfigTarget>) {
     ([$watched, $configManager, $runtime]) => {
       return (
         typeof $configManager.find((e) => e.selected) !== "undefined" ||
-        $runtime.length === 0
+        runtime.modules.length === 0
       );
     }
   );
@@ -482,7 +487,7 @@ export function createClearElementDisabledStore(
   watched: Writable<ConfigTarget>
 ) {
   return derived([watched, runtime], ([$watched, $runtime]) => {
-    return $runtime.length === 0;
+    return runtime.modules.length === 0;
   });
 }
 
diff --git a/src/renderer/main/panels/packages/Packages.svelte b/src/renderer/main/panels/packages/Packages.svelte
index d34876d16..06900e89f 100644
--- a/src/renderer/main/panels/packages/Packages.svelte
+++ b/src/renderer/main/panels/packages/Packages.svelte
@@ -3,7 +3,7 @@
   import { appSettings } from "../../../runtime/app-helper.store";
   import { Analytics } from "../../../runtime/analytics.js";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
-  import { logger } from "../../../runtime/runtime.store.js";
+  import { logger } from "../../../runtime/runtime.store";
 
   onMount(async () => {
     refreshPackageList();
diff --git a/src/renderer/main/panels/preferences/Preferences.svelte b/src/renderer/main/panels/preferences/Preferences.svelte
index c15fc6e10..e727ce319 100644
--- a/src/renderer/main/panels/preferences/Preferences.svelte
+++ b/src/renderer/main/panels/preferences/Preferences.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { configManager } from "./../configuration/Configuration.store.js";
-  import { logger } from "./../../../runtime/runtime.store.js";
+  import { logger } from "./../../../runtime/runtime.store";
   import { get } from "svelte/store";
   import { instructions } from "../../../serialport/instructions";
   import { appSettings } from "../../../runtime/app-helper.store";
-  import { runtime } from "../../../runtime/runtime.store.js";
+  import { runtime } from "../../../runtime/runtime.store";
 
   import {
     BlockBody,
diff --git a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
index f8720c134..11bed1cb1 100644
--- a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
+++ b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
@@ -32,10 +32,9 @@
 
   function handleRuntimeChange(rt) {
     const compatible = new Set([]);
-    for (const device of rt) {
-      const module = device.id.substring(0, 4);
-      const elements = device.pages[0].control_elements.map((e) => e.type);
-      compatible.add(module);
+    for (const module of rt.modules) {
+      const elements = module.pages[0].control_elements.map((e) => e.type);
+      compatible.add(module.type);
       elements.forEach((item) => compatible.add(item));
     }
     sendCompatibleTypes(Array.from(compatible));
@@ -61,7 +60,7 @@
       return;
     }
 
-    selectedModule = get(runtime)
+    selectedModule = runtime.modules
       .find((device) => device.dx == ui.dx && device.dy == ui.dy)
       .id.substr(0, 4);
     selectedControlElementType = target.elementType;
@@ -201,8 +200,6 @@
         .then((desc) => {
           const ui = get(user_input);
 
-          const configs = get(runtime);
-
           let name = undefined;
           let description = "Click here to add description";
           let id = uuidv4();
@@ -220,7 +217,7 @@
             localId: id,
           };
 
-          configs.forEach((d) => {
+          runtime.modules.forEach((d) => {
             if (d.dx == ui.dx && d.dy == ui.dy) {
               const page = d.pages.find((x) => x.pageNumber == ui.pagenumber);
 
diff --git a/src/renderer/main/user-interface/ActiveChanges.svelte b/src/renderer/main/user-interface/ActiveChanges.svelte
index d6e551417..e4c4c6978 100644
--- a/src/renderer/main/user-interface/ActiveChanges.svelte
+++ b/src/renderer/main/user-interface/ActiveChanges.svelte
@@ -1,7 +1,7 @@
 <script>
   import { tooltip } from "./../_actions/tooltip.ts";
   import { get } from "svelte/store";
-  import { logger } from "./../../runtime/runtime.store.js";
+  import { logger } from "./../../runtime/runtime.store";
   import { appSettings } from "../../runtime/app-helper.store";
   import { writeBuffer } from "../../runtime/engine.store.ts";
   import { configManager } from "./../panels/configuration/Configuration.store.js";
@@ -145,8 +145,6 @@
       });
     }
   }
-
-  $: console.log($runtime)
 </script>
 
 <container
diff --git a/src/renderer/main/user-interface/StickyContainer.svelte b/src/renderer/main/user-interface/StickyContainer.svelte
index 3ac37aa49..47f75b6b9 100644
--- a/src/renderer/main/user-interface/StickyContainer.svelte
+++ b/src/renderer/main/user-interface/StickyContainer.svelte
@@ -1,22 +1,23 @@
 <script lang="ts">
   import { Architecture } from "@intechstudio/grid-protocol";
-  import { user_input } from "./../../runtime/runtime.store.js";
+  import { user_input } from "./../../runtime/runtime.store";
   import { get } from "svelte/store";
   import { modal } from "./../modals/modal.store";
   import Pages from "../panels/configuration/components/Pages.svelte";
   import { selectedConfigStore } from "../../runtime/config-helper.store";
   import { moduleOverlay } from "../../runtime/moduleOverlay";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
-  import { virtual_runtime } from "../../runtime/virtual-engine";
   import AddVirtualModule from "../modals/AddVirtualModule.svelte";
-  import { runtime } from "../../runtime/runtime.store.js";
+  import { runtime } from "../../runtime/runtime.store";
 
   let selectedModule: any = undefined;
 
   $: handleSelecteModuleChange($runtime, $user_input);
 
   function handleSelecteModuleChange(rt: any, ui: any) {
-    selectedModule = rt.find((e: any) => e.dx == ui.dx && e.dy == ui.dy);
+    selectedModule = rt.modules.find(
+      (e: any) => e.dx == ui.dx && e.dy == ui.dy
+    );
   }
 
   function handleChangeModuleClicked() {
diff --git a/src/renderer/runtime/engine.store.ts b/src/renderer/runtime/engine.store.ts
index 07f3f59b3..e9e2e053d 100644
--- a/src/renderer/runtime/engine.store.ts
+++ b/src/renderer/runtime/engine.store.ts
@@ -345,7 +345,7 @@ function createWriteBuffer() {
         obj.descr.brc_parameters.DX,
         obj.descr.brc_parameters.DY,
       ];
-      const sender: any = get(runtime).find(
+      const sender: any = runtime.modules.find(
         (e: any) => e.dx === dx && e.dy === dy
       )!;
 
diff --git a/src/renderer/runtime/runtime.store.js b/src/renderer/runtime/runtime.store.js
deleted file mode 100644
index 57b3cf727..000000000
--- a/src/renderer/runtime/runtime.store.js
+++ /dev/null
@@ -1,1289 +0,0 @@
-import { writable, get } from "svelte/store";
-
-import { grid, EventType } from "@intechstudio/grid-protocol";
-import { instructions } from "../serialport/instructions";
-import { writeBuffer, sendHeartbeat } from "./engine.store";
-import { createVirtualModule } from "./virtual-engine.ts";
-import { VirtualModuleHWCFG } from "./virtual-engine.ts";
-import { virtual_runtime } from "./virtual-engine.ts";
-
-import { Analytics } from "./analytics.js";
-
-import { appSettings } from "./app-helper.store";
-
-import { add_datapoint } from "../serialport/message-stream.store.js";
-import { modal } from "../main/modals/modal.store";
-import { ProtectedStore } from "./smart-store.store.ts";
-import { createActionsFromString } from "./runtime";
-
-const setIntervalAsync = (fn, ms) => {
-  fn().then(() => {
-    setTimeout(() => setIntervalAsync(fn, ms), ms);
-  });
-};
-
-// The controller which is added to runtime first, load a default config!
-
-let selection_changed_timestamp = 0;
-
-export const elementPositionStore = writable({});
-export const elementNameStore = writable({});
-export const ledColorStore = writable({});
-
-export function update_elementPositionStore(descr) {
-  if (descr.class_parameters.EVENTTYPE == 3) {
-    // button change must not be registered
-
-    return;
-  }
-
-  let eps = get(elementPositionStore);
-
-  if (eps[descr.brc_parameters.SX] === undefined) {
-    eps[descr.brc_parameters.SX] = {};
-  }
-  if (eps[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
-    eps[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
-  }
-  if (
-    eps[descr.brc_parameters.SX][descr.brc_parameters.SY][
-      descr.class_parameters.ELEMENTNUMBER
-    ] === undefined
-  ) {
-    eps[descr.brc_parameters.SX][descr.brc_parameters.SY][
-      descr.class_parameters.ELEMENTNUMBER
-    ] = -1;
-  }
-
-  eps[descr.brc_parameters.SX][descr.brc_parameters.SY][
-    descr.class_parameters.ELEMENTNUMBER
-  ] = [descr.class_parameters.EVENTPARAM1, descr.class_parameters.EVENTPARAM2];
-
-  //console.log("Pos", descr.class_parameters.EVENTPARAM)
-
-  elementPositionStore.set(eps);
-}
-
-export function update_elementNameStore(descr) {
-  let ens = get(elementNameStore);
-
-  if (ens[descr.brc_parameters.SX] === undefined) {
-    ens[descr.brc_parameters.SX] = {};
-  }
-  if (ens[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
-    ens[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
-  }
-  if (
-    ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
-      descr.class_parameters.NUM
-    ] === undefined
-  ) {
-    ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
-      descr.class_parameters.NUM
-    ] = -1;
-  }
-
-  ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
-    descr.class_parameters.NUM
-  ] = descr.class_parameters.NAME;
-
-  elementNameStore.set(ens);
-}
-
-export function update_elementPositionStore_fromPreview(descr) {
-  let eps = get(elementPositionStore);
-
-  if (eps[descr.brc_parameters.SX] === undefined) {
-    eps[descr.brc_parameters.SX] = {};
-  }
-  if (eps[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
-    eps[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
-  }
-
-  for (let i = 1; i < descr.class_parameters.LENGTH / 4; i++) {
-    const num = parseInt(
-      "0x" +
-        String.fromCharCode(descr.raw[4 + i * 4 + 0]) +
-        String.fromCharCode(descr.raw[4 + i * 4 + 1])
-    );
-    const val = parseInt(
-      "0x" +
-        String.fromCharCode(descr.raw[4 + i * 4 + 2]) +
-        String.fromCharCode(descr.raw[4 + i * 4 + 3])
-    );
-    //console.log(num, val)
-
-    if (
-      eps[descr.brc_parameters.SX][descr.brc_parameters.SY][num] === undefined
-    ) {
-      eps[descr.brc_parameters.SX][descr.brc_parameters.SY][num] = -1;
-    }
-
-    eps[descr.brc_parameters.SX][descr.brc_parameters.SY][num] = val;
-
-    elementPositionStore.set(eps);
-  }
-}
-
-export function update_ledColorStore(descr) {
-  for (let i = 0; i < descr.class_parameters.LENGTH / 8; i++) {
-    const num = parseInt(
-      "0x" +
-        String.fromCharCode(descr.raw[8 + i * 8 + 0]) +
-        String.fromCharCode(descr.raw[8 + i * 8 + 1])
-    );
-    const red = parseInt(
-      "0x" +
-        String.fromCharCode(descr.raw[8 + i * 8 + 2]) +
-        String.fromCharCode(descr.raw[8 + i * 8 + 3])
-    );
-    const gre = parseInt(
-      "0x" +
-        String.fromCharCode(descr.raw[8 + i * 8 + 4]) +
-        String.fromCharCode(descr.raw[8 + i * 8 + 5])
-    );
-    const blu = parseInt(
-      "0x" +
-        String.fromCharCode(descr.raw[8 + i * 8 + 6]) +
-        String.fromCharCode(descr.raw[8 + i * 8 + 7])
-    );
-
-    //console.log(num, red, gre, blu)
-
-    let lcs = get(ledColorStore);
-
-    if (lcs[descr.brc_parameters.SX] === undefined) {
-      lcs[descr.brc_parameters.SX] = {};
-    }
-    if (lcs[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
-      lcs[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
-    }
-    if (
-      lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num] === undefined
-    ) {
-      lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num] = [0, 0, 0];
-    }
-
-    lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num][0] = red * 4;
-    lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num][1] = gre * 4;
-    lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num][2] = blu * 4;
-
-    ledColorStore.set(lcs);
-  }
-}
-
-//Template logger object: { type: "", message: "", classname: "" }
-export const logger = writable();
-
-function create_user_input() {
-  const defaultValues = {
-    dx: undefined,
-    dy: undefined,
-    pagenumber: undefined,
-    elementnumber: undefined,
-    eventtype: undefined,
-  };
-
-  const store = new ProtectedStore(defaultValues);
-
-  function setOverride({ dx, dy, pagenumber, elementnumber, eventtype }) {
-    for (const [key, value] of Object.entries({
-      dx,
-      dy,
-      pagenumber,
-      elementnumber,
-      eventtype,
-    })) {
-      if (typeof value === "undefined") {
-        store.set({
-          ...defaultValues,
-        });
-        return;
-      }
-      if (typeof value !== "number") {
-        throw `($user_input store): ${key} (${value}) is not the type of Number.`;
-      }
-    }
-
-    const events = getElementEventTypes(dx, dy, elementnumber);
-    const closestEvent = get_closest_event(events, eventtype);
-
-    store.set({
-      dx: dx,
-      dy: dy,
-      pagenumber: pagenumber,
-      elementnumber: elementnumber,
-      eventtype: closestEvent,
-    });
-  }
-
-  function get_closest_event(events, event) {
-    if (events.map((e) => Number(e)).includes(Number(event))) {
-      return event;
-    }
-
-    //Select closest event type if incoming device does not have the corrently selected event type
-    const closestEvent = Math.min(
-      ...events.map((e) => Number(e)).filter((e) => e > 0)
-    );
-    return closestEvent;
-  }
-
-  function process_incoming_event_from_grid(descr) {
-    // engine is disabled
-    if (get(writeBuffer).length > 0) {
-      return;
-    }
-
-    // modal block track physical interaction setting
-    if (typeof get(modal) !== "undefined") {
-      return;
-    }
-
-    // event is init, mapmode, midirx, timer
-    if (
-      descr.class_parameters.EVENTTYPE == 0 ||
-      descr.class_parameters.EVENTTYPE == 4 ||
-      descr.class_parameters.EVENTTYPE == 5 ||
-      descr.class_parameters.EVENTTYPE == 6
-    ) {
-      return;
-    }
-
-    // system element
-    if (descr.class_parameters.ELEMENTNUMBER == 255) {
-      return;
-    }
-
-    const ui = get(store);
-
-    // filter same control element had multiple interactions
-    let elementDifferent =
-      ui.elementnumber != descr.class_parameters.ELEMENTNUMBER;
-    let eventDifferent = ui.eventtype != descr.class_parameters.EVENTTYPE;
-    let sxDifferent = ui.dx != descr.brc_parameters.SX;
-    let syDifferent = ui.dy != descr.brc_parameters.SY;
-
-    if (eventDifferent || elementDifferent || sxDifferent || syDifferent) {
-      //Filtering out clashing events of control elements
-      //Example: multiple fader movenet at the same time
-      if (Date.now() < selection_changed_timestamp + 100) {
-        return;
-      }
-
-      let eventtype;
-      switch (get(appSettings).persistent.changeOnEvent) {
-        case "element": {
-          const incomingEventTypes = getElementEventTypes(
-            descr.brc_parameters.SX,
-            descr.brc_parameters.SY,
-            descr.class_parameters.ELEMENTNUMBER
-          );
-          const current = ui.eventtype;
-          eventtype = get_closest_event(incomingEventTypes, current);
-          if (!elementDifferent) {
-            return;
-          }
-          break;
-        }
-        case "none": {
-          return;
-        }
-        case "event":
-        default: {
-          eventtype = descr.class_parameters.EVENTTYPE;
-        }
-      }
-      store.set({
-        dx: descr.brc_parameters.SX,
-        dy: descr.brc_parameters.SY,
-        pagenumber: ui.pagenumber,
-        elementnumber: descr.class_parameters.ELEMENTNUMBER,
-        eventtype: eventtype,
-      });
-    }
-    selection_changed_timestamp = Date.now();
-  }
-
-  function module_destroy_handler(dx, dy) {
-    // This is used to re-init local settings panel if a module is removed which values have been displayed
-    const ui = get(store);
-    const rt = get(runtime);
-
-    if (dx == ui.dx && dy == ui.dy) {
-      if (get(runtime).length > 0) {
-        //Set user input to an EXISTING module
-        //(0,0) module is not guaranteed to exist when unplugging all modules once
-        //NOTE: Hardcoding (0,0) may break user_input
-        setOverride({
-          dx: rt[0].dx,
-          dy: rt[0].dy,
-          pagenumber: ui.pagenumber,
-          elementnumber: 0,
-          eventtype: ui.eventtype,
-        });
-      } else {
-        setOverride({
-          ...defaultValues,
-        });
-      }
-    }
-  }
-
-  return {
-    ...store,
-    set: setOverride,
-    process_incoming_event_from_grid: process_incoming_event_from_grid,
-    module_destroy_handler: module_destroy_handler,
-  };
-}
-
-export const user_input = create_user_input();
-
-function create_runtime() {
-  const _runtime = writable([]);
-
-  const findUpdateDestEvent = (_runtime, dx, dy, page, element, event) => {
-    let _event = undefined;
-    // this elementnumber check refers to uninitialized UI...
-    if (element !== -1) {
-      _runtime.forEach((device) => {
-        if (device.dx == dx && device.dy == dy) {
-          const pageIndex = device.pages.findIndex((x) => x.pageNumber == page);
-          const elementIndex = device.pages[
-            pageIndex
-          ].control_elements.findIndex((x) => x.elementIndex == element);
-          _event = device.pages[pageIndex].control_elements[
-            elementIndex
-          ].events.find((e) => e.type == event);
-        }
-      });
-    }
-    return _event;
-  };
-
-  function fetchOrLoadConfig({ dx, dy, page, element, event }) {
-    return new Promise((resolve, reject) => {
-      const _device = get(runtime).find(
-        (device) => device.dx == dx && device.dy == dy
-      );
-      const _page = _device.pages.find((e) => e.pageNumber == page);
-      const _element = _page.control_elements.find(
-        (e) => e.elementIndex == element
-      );
-      const _event = _element.events.find((e) => e.type == event);
-
-      if (typeof _event.config !== "undefined") {
-        resolve();
-      } else {
-        instructions
-          .fetchConfigFromGrid(dx, dy, page, element, event)
-          .then((descr) => {
-            const dx = descr.brc_parameters.SX;
-            const dy = descr.brc_parameters.SY;
-            const page = descr.class_parameters.PAGENUMBER;
-            const element = descr.class_parameters.ELEMENTNUMBER;
-            const event = descr.class_parameters.EVENTTYPE;
-            const actionstring = descr.class_parameters.ACTIONSTRING;
-
-            update_event_configuration(
-              dx,
-              dy,
-              page,
-              element,
-              event,
-              actionstring
-            );
-
-            resolve();
-          })
-          .catch((e) => reject(e));
-      }
-    });
-  }
-
-  function isFirmwareMismatch(currentFirmware, requiredFirmware) {
-    // Extract major, minor, and patch versions from current and required firmware
-    const {
-      major: currentMajor,
-      minor: currentMinor,
-      patch: currentPatch,
-    } = currentFirmware;
-    const {
-      major: requiredMajor,
-      minor: requiredMinor,
-      patch: requiredPatch,
-    } = requiredFirmware;
-
-    // Compare major versions
-    if (currentMajor < requiredMajor) {
-      return true; // Firmware mismatch if current major version is lower
-    } else if (currentMajor > requiredMajor) {
-      return false; // No firmware mismatch if current major version is higher
-    }
-
-    // Compare minor versions
-    if (currentMinor < requiredMinor) {
-      return true; // Firmware mismatch if current minor version is lower
-    } else if (currentMinor > requiredMinor) {
-      return false; // No firmware mismatch if current minor version is higher
-    }
-
-    // Compare patch versions
-    if (currentPatch < requiredPatch) {
-      return true; // Firmware mismatch if current patch version is lower
-    } else {
-      return false; // No firmware mismatch if current patch version is equal or higher
-    }
-  }
-
-  function incoming_heartbeat_handler(descr) {
-    try {
-      for (const device of get(_runtime)) {
-        if (device.architecture === "virtual") {
-          destroy_module(device.dx, device.dy);
-        }
-      }
-      const controller = this.create_module(
-        descr.brc_parameters,
-        descr.class_parameters,
-        false
-      );
-
-      let firstConnection = false;
-      const device = get(_runtime).find((device) => device.id == controller.id);
-      if (device) {
-        if (device.rot != controller.rot) {
-          _runtime.update((rt) => {
-            const index = rt.findIndex((device) => device.id == controller.id);
-            rt[index].rot = controller.rot;
-            return rt;
-          });
-        }
-
-        if (device.portstate != controller.portstate) {
-          _runtime.update((rt) => {
-            const index = rt.findIndex((device) => device.id == controller.id);
-            rt[index].portstate = controller.portstate;
-            return rt;
-          });
-        }
-
-        const lastDate = get(heartbeat).find(
-          (device) => device.id == controller.id
-        )?.alive;
-        if (lastDate) {
-          let newDate = Date.now();
-
-          heartbeat.update((store) => {
-            const device = store.find((device) => device.id == controller.id);
-            if (device) {
-              device.alive = newDate;
-            }
-            return store;
-          });
-
-          //console.log(newDate - lastDate)
-          if (get(appSettings).persistent.heartbeatDebugEnabled) {
-            const key1 = `Hearbeat (${controller.dx}, ${controller.dy})`;
-
-            add_datapoint(key1, newDate - lastDate);
-          }
-        }
-      }
-      // device not found, add it to runtime and get page count from grid
-      else {
-        // check if the firmware version of the newly connected device is acceptable
-        console.log("Incoming Device");
-        console.log("Architecture", controller.architecture);
-
-        const as = get(appSettings);
-        const firmware_required =
-          controller.architecture === "esp32"
-            ? as.firmware_esp32_required
-            : as.firmware_d51_required;
-        controller.fwMismatch = isFirmwareMismatch(
-          controller.fwVersion,
-          firmware_required
-        );
-
-        console.log(
-          "Mismatch: ",
-          controller.fwMismatch,
-          "Firmware Version: ",
-          controller.fwVersion
-        );
-
-        _runtime.update((devices) => {
-          return [...devices, controller];
-        });
-        heartbeat.update((devices) => {
-          return [...devices, { id: controller.id, alive: Date.now() }];
-        });
-
-        firstConnection = get(_runtime).length === 1;
-
-        Analytics.track({
-          event: "Connect Module",
-          payload: {
-            action: "Connect",
-            controller: controller,
-            moduleCount: get(runtime).length,
-          },
-          mandatory: false,
-        });
-      }
-
-      if (firstConnection) {
-        setDefaultSelectedElement();
-      }
-    } catch (error) {
-      console.warn(error);
-    }
-  }
-
-  function setDefaultSelectedElement() {
-    const rt = get(runtime);
-    user_input.set({
-      dx: rt[0].dx,
-      dy: rt[0].dy,
-      pagenumber: 0,
-      elementnumber: 0,
-      eventtype: 2,
-    });
-  }
-
-  function erase_all() {
-    _runtime.update((rt) => {
-      rt.forEach((device) => {
-        device.pages.forEach((page) => {
-          page.control_elements.forEach((events) => {
-            events.events.forEach((event) => {
-              event.config = undefined;
-              event.stored = undefined;
-            });
-          });
-        });
-      });
-      return rt;
-    });
-  }
-
-  function element_preset_load(x, y, element, preset) {
-    return new Promise((resolve, reject) => {
-      const ui = get(user_input);
-      let events = preset.configs.events;
-      const promises = [];
-      events.forEach((e) => {
-        const page = ui.pagenumber;
-        const event = e.event;
-
-        _runtime.update((_runtime) => {
-          let dest = findUpdateDestEvent(_runtime, x, y, page, element, event);
-          if (typeof dest !== "undefined") {
-            dest.config = e.config;
-            const promise = instructions.sendConfigToGrid(
-              x,
-              y,
-              page,
-              element,
-              event,
-              e.config
-            );
-
-            promises.push(promise);
-          }
-          return _runtime;
-        });
-      });
-      Promise.all(promises)
-        .then(() => {
-          resolve();
-          logger.set({
-            type: "success",
-            mode: 0,
-            classname: "elementoverwrite",
-            message: `Overwrite done!`,
-          });
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
-  function whole_page_overwrite(x, y, array) {
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "profileload",
-      message: `Profile load started...`,
-    });
-
-    return new Promise((resolve, reject) => {
-      // Reorder array to send system element first
-      const index = array.findIndex((obj) => obj.elementIndex === 255);
-
-      // Check if the object with id === 255 was found
-      if (index !== -1) {
-        // Remove the object at the found index
-        const objectToMove = array.splice(index, 1)[0];
-
-        // Add the object to the front of the array
-        array.unshift(objectToMove);
-      }
-
-      let ui = structuredClone(get(user_input));
-      const promises = [];
-      array.forEach((elem) => {
-        elem.events.forEach((ev) => {
-          ui.elementnumber = elem.controlElementNumber;
-          ui.eventtype = ev.event;
-
-          const page = ui.pagenumber;
-          const element = ui.elementnumber;
-          const event = ui.eventtype;
-
-          _runtime.update((_runtime) => {
-            let dest = findUpdateDestEvent(
-              _runtime,
-              x,
-              y,
-              page,
-              element,
-              event
-            );
-            if (dest) {
-              dest.config = ev.config.trim();
-            }
-            return _runtime;
-          });
-
-          const promise = instructions.sendConfigToGrid(
-            x,
-            y,
-            page,
-            element,
-            event,
-            ev.config
-          );
-
-          promises.push(promise);
-        });
-      });
-      Promise.all(promises)
-        .then((desc) => {
-          logger.set({
-            type: "success",
-            mode: 0,
-            classname: "profileload",
-            message: `Profile load complete!`,
-          });
-          resolve();
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
-  function update_event_configuration(
-    dx,
-    dy,
-    page,
-    element,
-    event,
-    actionString
-  ) {
-    // config
-    _runtime.update((_runtime) => {
-      let dest = findUpdateDestEvent(_runtime, dx, dy, page, element, event);
-      if (dest) {
-        dest.config = createActionsFromString(actionString);
-
-        if (typeof dest.stored === "undefined") {
-          dest.stored = dest.config;
-        }
-      }
-      return _runtime;
-    });
-  }
-
-  function send_event_configuration_to_grid(dx, dy, page, element, event) {
-    return new Promise((resolve, reject) => {
-      let rt = get(_runtime);
-
-      let dest = findUpdateDestEvent(rt, dx, dy, page, element, event);
-      if (dest) {
-        const script = `<?lua ${dest.config.map((e) => e.toLua()).join("")} ?>`;
-        instructions
-          .sendConfigToGrid(dx, dy, page, element, event, script)
-          .then((desc) => {
-            resolve();
-          })
-          .catch((e) => reject(e));
-      } else {
-        reject("DEST not found!");
-      }
-    });
-  }
-
-  // whole element copy: fetches all event configs from a control element
-  function fetch_element_configuration_from_grid(
-    dx,
-    dy,
-    pageNumber,
-    elementNumber
-  ) {
-    const rt = get(runtime);
-    const device = rt.find((device) => device.dx == dx && device.dy == dy);
-    const page = device.pages.find((x) => x.pageNumber == pageNumber);
-    const element = page.control_elements.find(
-      (x) => x.elementIndex == elementNumber
-    );
-    const events = element.events;
-
-    const promises = events.map((e) => {
-      const eventType = e.type;
-      const dest = {
-        dx: dx,
-        dy: dy,
-        page: pageNumber,
-        element: elementNumber,
-        event: eventType,
-      };
-      const promise = fetchOrLoadConfig(dest);
-      return promise;
-    });
-
-    return Promise.all(promises);
-  }
-
-  function fetch_page_configuration_from_grid({ dx, dy, page }) {
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "profilesave",
-      message: `Preparing configs...`,
-    });
-
-    const rt = get(runtime);
-
-    let device = rt.find((device) => device.dx == dx && device.dy == dy);
-
-    if (typeof device === "undefined") {
-      logger.set({
-        type: "fail",
-        mode: 0,
-        classname: "profilesave",
-        message: `No module selected`,
-      });
-
-      return Promise.reject(`No module selected`);
-    }
-
-    const pageIndex = device.pages.findIndex((x) => x.pageNumber == page);
-    const controlElements = device.pages[pageIndex].control_elements;
-
-    const fetchArray = [];
-
-    controlElements.forEach((controlElement) => {
-      controlElement.events.forEach((e) => {
-        if (typeof e.config === "undefined") {
-          // put it into the fetchArray
-          fetchArray.push({
-            event: e.type,
-            elementIndex: controlElement.elementIndex,
-          });
-        }
-      });
-    });
-
-    // clear the writeBuffer to make sure that there are no fetch operations that may interfere with the callback
-    // writeBuffer.clear();
-
-    if (fetchArray.length === 0) {
-      //nothing to do, let's do calback
-      return Promise.resolve();
-    }
-
-    const promises = fetchArray.map((e) => {
-      const promise = fetchOrLoadConfig({
-        dx: dx,
-        dy: dy,
-        page: page,
-        element: e.elementIndex,
-        event: e.event,
-      });
-      return promise;
-    });
-
-    return Promise.all(promises);
-  }
-
-  function clear_page_configuration(index) {
-    _runtime.update((_runtime) => {
-      _runtime.forEach((device) => {
-        device.pages[index].control_elements.forEach((control_element) => {
-          control_element.events.forEach((event) => {
-            event.config = undefined;
-            event.stored = undefined;
-          });
-        });
-      });
-      return _runtime;
-    });
-  }
-
-  function create_page(moduleType, pageNumber) {
-    moduleType = moduleType.substr(0, 4);
-
-    let control_elements = [];
-
-    let status = "INIT";
-
-    try {
-      const moduleElements = grid.get_module_element_list(moduleType);
-
-      for (const [index, element] of moduleElements.entries()) {
-        if (typeof element === "undefined") {
-          continue;
-        }
-        let events = [];
-        const elementEvents = grid.get_element_events(element);
-        for (const event of elementEvents) {
-          events.push({
-            type: Number(event.value),
-            config: undefined,
-            stored: undefined,
-          });
-        }
-        control_elements.push({
-          events: events,
-          elementIndex: index,
-          type: element,
-          name: "",
-        });
-      }
-
-      control_elements = control_elements.filter((x) => x); // filter null or invalid items!
-
-      return { status, pageNumber: pageNumber, control_elements };
-    } catch (error) {
-      console.warn("Error while creating page for ", moduleType, error);
-    }
-  }
-
-  function create_module(header_param, heartbeat_class_param, virtual = false) {
-    let moduleType = grid.module_type_from_hwcfg(
-      Number(heartbeat_class_param.HWCFG)
-    );
-
-    // generic check, code below if works only if all parameters are provided
-    if (
-      header_param === undefined ||
-      moduleType === undefined ||
-      heartbeat_class_param === undefined
-    ) {
-      console.log(
-        heartbeat_class_param.HWCFG,
-        "ERROR",
-        header_param,
-        moduleType,
-        heartbeat_class_param
-      );
-      throw "Error creating new module.";
-    }
-    moduleType = moduleType.substr(0, 4);
-
-    return {
-      // implement the module id rep / req
-      architecture: virtual
-        ? "virtual"
-        : grid.module_architecture_from_hwcfg(heartbeat_class_param.HWCFG),
-      portstate: heartbeat_class_param.PORTSTATE,
-      id: moduleType + "_" + "dx:" + header_param.SX + ";dy:" + header_param.SY,
-      dx: header_param.SX,
-      dy: header_param.SY,
-      rot: header_param.ROT,
-      fwVersion: {
-        major: heartbeat_class_param.VMAJOR,
-        minor: heartbeat_class_param.VMINOR,
-        patch: heartbeat_class_param.VPATCH,
-      },
-      fwMismatch: false,
-      alive: Date.now(),
-      map: {
-        top: { dx: header_param.SX, dy: header_param.SY + 1 },
-        right: { dx: header_param.SX + 1, dy: header_param.SY },
-        bot: { dx: header_param.SX, dy: header_param.SY - 1 },
-        left: { dx: header_param.SX - 1, dy: header_param.SY },
-      },
-      pages: [
-        this.create_page(moduleType, 0),
-        this.create_page(moduleType, 1),
-        this.create_page(moduleType, 2),
-        this.create_page(moduleType, 3),
-      ],
-    };
-  }
-
-  function destroy_module(dx, dy) {
-    // remove the destroyed device from runtime
-    const removed = get(_runtime).find((e) => e.dx == dx && e.dy == dy);
-
-    _runtime.update((rt) => {
-      const index = rt.findIndex((e) => e.dx === dx && e.dy === dy);
-      rt.splice(index, 1);
-      return rt;
-    });
-
-    if (get(_runtime).length === 0) {
-      appSettings.update((s) => {
-        s.gridLayoutShift = { x: 0, y: 0 };
-        return s;
-      });
-    }
-
-    user_input.module_destroy_handler(dx, dy);
-    if (removed.architecture === "virtual") {
-      virtual_runtime.destroyModule(dx, dy);
-    } else {
-      writeBuffer.module_destroy_handler(dx, dy);
-    }
-
-    // reset rendering helper stores
-
-    try {
-      elementPositionStore.update((eps) => {
-        eps[dx][dy] = undefined;
-        return eps;
-      });
-
-      elementNameStore.update((ens) => {
-        ens[dx][dy] = undefined;
-        return ens;
-      });
-
-      ledColorStore.update((lcs) => {
-        lcs[dx][dy] = undefined;
-        return lcs;
-      });
-    } catch (error) {}
-
-    Analytics.track({
-      event: "Disconnect Module",
-      payload: {
-        action: "Disconnect",
-        moduleCount: get(runtime).length,
-      },
-      mandatory: false,
-    });
-  }
-
-  function change_page(new_page_number) {
-    return new Promise((resolve, reject) => {
-      if (get(writeBuffer).length > 0) {
-        reject("Wait before all operations are finished.");
-        return;
-      }
-
-      if (unsavedChangesCount() != 0) {
-        reject("Store your changes before changin pages!");
-        return;
-      }
-
-      let ui = get(user_input);
-
-      // only update pagenumber if it differs from the runtime pagenumber
-      if (ui.pagenumber === new_page_number) {
-        resolve();
-        return;
-      }
-      // clean up the writebuffer if pagenumber changes!
-      // writeBuffer.clear();
-
-      instructions
-        .changeActivePage(new_page_number)
-        .then(() => {
-          const ui = get(user_input);
-          user_input.set({
-            dx: ui.dx,
-            dy: ui.dy,
-            pagenumber: new_page_number,
-            elementnumber: ui.elementnumber,
-            eventtype: ui.eventtype,
-          });
-          resolve();
-        })
-        .catch((e) => {
-          reject(e);
-        });
-    });
-  }
-
-  function unsavedChangesCount() {
-    let count = 0;
-    get(_runtime).forEach((e) => {
-      e.pages.forEach((e) => {
-        e.control_elements.forEach((e) => {
-          e.events.forEach((e) => {
-            if (typeof e.stored !== "undefined" && e.stored !== e.config) {
-              count += 1;
-            }
-          });
-        });
-      });
-    });
-    return count;
-  }
-
-  async function storePage(index) {
-    return new Promise((resolve, reject) => {
-      instructions
-        .sendPageStoreToGrid()
-        .then((res) => {
-          _runtime.update((store) => {
-            store.forEach((device) => {
-              device.pages
-                .find((e) => e.pageNumber == index)
-                ?.control_elements.forEach((element) => {
-                  element.events.forEach((event) => {
-                    if (event.stored !== event.config) {
-                      event.stored = event.config;
-                    }
-                  });
-                });
-            });
-            return store;
-          });
-          resolve(res);
-        })
-        .catch((e) => {
-          reject(e);
-        });
-    });
-  }
-
-  function clearPage(index) {
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "pageclear",
-      message: `Clearing configurations from page...`,
-    });
-    return new Promise((resolve, reject) => {
-      instructions
-        .sendPageClearToGrid()
-        .then(() => {
-          clear_page_configuration(index);
-          resolve();
-        })
-        .catch((e) => {
-          console.warn(e);
-          reject(e);
-        });
-    });
-  }
-
-  function discardPage(index) {
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "pagediscard",
-      message: `Discarding configurations...`,
-    });
-    return new Promise((resolve, reject) => {
-      instructions
-        .sendPageDiscardToGrid(index)
-        .then(() => {
-          clear_page_configuration(index);
-          resolve();
-        })
-        .catch((e) => {
-          console.warn(e);
-          reject(e);
-        });
-    });
-  }
-
-  function addVirtualModule({ dx, dy, type }) {
-    const module = VirtualModuleHWCFG[type];
-    const controller = this.create_module(
-      {
-        DX: dx,
-        DY: dy,
-        SX: dx,
-        SY: dy,
-      },
-      {
-        HWCFG: module.hwcfg,
-      },
-      true
-    );
-
-    createVirtualModule(dx, dy, module.type);
-
-    _runtime.update((devices) => {
-      return [...devices, controller];
-    });
-    setDefaultSelectedElement();
-  }
-
-  return {
-    subscribe: _runtime.subscribe,
-
-    element_preset_load: element_preset_load,
-    whole_page_overwrite: whole_page_overwrite,
-
-    update_event_configuration: update_event_configuration,
-    send_event_configuration_to_grid: send_event_configuration_to_grid,
-
-    fetch_element_configuration_from_grid:
-      fetch_element_configuration_from_grid,
-    fetch_page_configuration_from_grid: fetch_page_configuration_from_grid,
-
-    incoming_heartbeat_handler: incoming_heartbeat_handler,
-
-    create_page: create_page,
-    create_module: create_module,
-    destroy_module: destroy_module,
-
-    change_page: change_page,
-
-    erase: erase_all,
-    fetchOrLoadConfig: fetchOrLoadConfig,
-    unsavedChangesCount: unsavedChangesCount,
-    storePage: storePage,
-    discardPage: discardPage,
-    clearPage: clearPage,
-    addVirtualModule: addVirtualModule,
-  };
-}
-
-export const runtime = create_runtime();
-
-//Retrieves device name from coordinates of the device
-export function getDeviceName(x, y) {
-  const rt = get(runtime);
-  const currentModule = rt.find((device) => device.dx == x && device.dy == y);
-  return currentModule?.id.slice(0, 4);
-}
-
-export function getElementEventTypes(x, y, elementNumber) {
-  const rt = get(runtime);
-  const currentModule = rt.find((device) => device.dx == x && device.dy == y);
-
-  if (typeof currentModule === "undefined") {
-    console.warn(`Module does not exist on (${x}, ${y})`);
-    return undefined;
-  }
-  const element = currentModule.pages[0].control_elements.find(
-    (e) => e.elementIndex == elementNumber
-  );
-
-  if (typeof element === "undefined") {
-    console.warn(
-      `Control element ${elementNumber} does not exist on (${x}, ${y})`
-    );
-    return undefined;
-  }
-
-  return element.events.map((e) => e.type);
-}
-
-function createEngine() {
-  const _engine = writable("ENABLED");
-
-  return {
-    ..._engine,
-  };
-}
-
-export const engine = createEngine();
-
-export const heartbeat = writable([]);
-
-const heartbeat_editor_ms = 300;
-const heartbeat_grid_ms = 250;
-
-const grid_heartbeat_interval_handler = async function () {
-  let rt = get(runtime);
-
-  rt.forEach((device, i) => {
-    if (device.architecture === "virtual") {
-      return;
-    }
-
-    const alive = get(heartbeat).find((e) => e.id == device.id)?.alive;
-
-    // Allow less strict elapsedTimeLimit while writeBuffer is busy!
-    const elapsedTimeLimit =
-      get(writeBuffer).length > 0
-        ? heartbeat_grid_ms * 6
-        : heartbeat_grid_ms * 3;
-    const elapsedTime = Date.now() - alive;
-
-    if (!alive || elapsedTime > elapsedTimeLimit) {
-      // TIMEOUT! let's remove the device
-      runtime.destroy_module(device.dx, device.dy);
-      heartbeat.update((heartbeat) => {
-        return heartbeat.filter((e) => e.id !== device.id);
-      });
-    }
-  });
-};
-
-setIntervalAsync(grid_heartbeat_interval_handler, heartbeat_grid_ms);
-
-const editor_heartbeat_interval_handler = async function () {
-  let type = 255;
-
-  if (runtime.unsavedChangesCount() != 0 || typeof get(modal) !== "undefined") {
-    type = 254;
-  }
-
-  if (
-    get(runtime).length > 0 &&
-    get(runtime).filter((e) => e.architecture === "virtual").length === 0
-  ) {
-    sendHeartbeat(type);
-  } else {
-    //writeBuffer.clear();
-  }
-};
-
-setIntervalAsync(editor_heartbeat_interval_handler, heartbeat_editor_ms);
-
-export class LocalDefinitions {
-  static getFrom({ configs, index }) {
-    const config = configs[index];
-    let n = index - 1;
-    let list = [];
-    let indentation = config?.indentation;
-    while (n >= 0) {
-      if (configs[n].indentation <= indentation) {
-        list.push(configs[n]);
-        if (configs[n].indentation != indentation) {
-          indentation = configs[n].indentation;
-        }
-      }
-      --n;
-    }
-
-    let arr = [];
-    list.forEach((c) => {
-      if (c.short == "l" && c.script !== "") {
-        let _variable_array = c.script.split("=")[0];
-        _variable_array = _variable_array.split("local")[1];
-        _variable_array = _variable_array.split(",");
-        _variable_array.forEach((val, i) => {
-          arr.push({ info: `local - ${val.trim()}`, value: val.trim() });
-        });
-      }
-    });
-    return arr;
-  }
-}
-
-export async function wss_send_message(message) {
-  window.electron.websocket.transmit({ event: "message", data: message });
-}
-
-console.log("reached end of runtime");
diff --git a/src/renderer/runtime/runtime.store.ts b/src/renderer/runtime/runtime.store.ts
new file mode 100644
index 000000000..95802cafe
--- /dev/null
+++ b/src/renderer/runtime/runtime.store.ts
@@ -0,0 +1,460 @@
+import { writable, get } from "svelte/store";
+import { writeBuffer, sendHeartbeat } from "./engine.store";
+import { appSettings } from "./app-helper.store";
+import { modal } from "../main/modals/modal.store";
+import { ProtectedStore } from "./smart-store.store";
+import { GridRuntime } from "./runtime";
+
+const setIntervalAsync = (fn, ms) => {
+  fn().then(() => {
+    setTimeout(() => setIntervalAsync(fn, ms), ms);
+  });
+};
+
+// The controller which is added to runtime first, load a default config!
+
+let selection_changed_timestamp = 0;
+
+export const elementPositionStore = writable({});
+export const elementNameStore = writable({});
+export const ledColorStore = writable({});
+
+export function update_elementPositionStore(descr) {
+  if (descr.class_parameters.EVENTTYPE == 3) {
+    // button change must not be registered
+
+    return;
+  }
+
+  let eps = get(elementPositionStore);
+
+  if (eps[descr.brc_parameters.SX] === undefined) {
+    eps[descr.brc_parameters.SX] = {};
+  }
+  if (eps[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
+    eps[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
+  }
+  if (
+    eps[descr.brc_parameters.SX][descr.brc_parameters.SY][
+      descr.class_parameters.ELEMENTNUMBER
+    ] === undefined
+  ) {
+    eps[descr.brc_parameters.SX][descr.brc_parameters.SY][
+      descr.class_parameters.ELEMENTNUMBER
+    ] = -1;
+  }
+
+  eps[descr.brc_parameters.SX][descr.brc_parameters.SY][
+    descr.class_parameters.ELEMENTNUMBER
+  ] = [descr.class_parameters.EVENTPARAM1, descr.class_parameters.EVENTPARAM2];
+
+  //console.log("Pos", descr.class_parameters.EVENTPARAM)
+
+  elementPositionStore.set(eps);
+}
+
+export function update_elementNameStore(descr) {
+  let ens = get(elementNameStore);
+
+  if (ens[descr.brc_parameters.SX] === undefined) {
+    ens[descr.brc_parameters.SX] = {};
+  }
+  if (ens[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
+    ens[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
+  }
+  if (
+    ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
+      descr.class_parameters.NUM
+    ] === undefined
+  ) {
+    ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
+      descr.class_parameters.NUM
+    ] = -1;
+  }
+
+  ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
+    descr.class_parameters.NUM
+  ] = descr.class_parameters.NAME;
+
+  elementNameStore.set(ens);
+}
+
+export function update_elementPositionStore_fromPreview(descr) {
+  let eps = get(elementPositionStore);
+
+  if (eps[descr.brc_parameters.SX] === undefined) {
+    eps[descr.brc_parameters.SX] = {};
+  }
+  if (eps[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
+    eps[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
+  }
+
+  for (let i = 1; i < descr.class_parameters.LENGTH / 4; i++) {
+    const num = parseInt(
+      "0x" +
+        String.fromCharCode(descr.raw[4 + i * 4 + 0]) +
+        String.fromCharCode(descr.raw[4 + i * 4 + 1])
+    );
+    const val = parseInt(
+      "0x" +
+        String.fromCharCode(descr.raw[4 + i * 4 + 2]) +
+        String.fromCharCode(descr.raw[4 + i * 4 + 3])
+    );
+    //console.log(num, val)
+
+    if (
+      eps[descr.brc_parameters.SX][descr.brc_parameters.SY][num] === undefined
+    ) {
+      eps[descr.brc_parameters.SX][descr.brc_parameters.SY][num] = -1;
+    }
+
+    eps[descr.brc_parameters.SX][descr.brc_parameters.SY][num] = val;
+
+    elementPositionStore.set(eps);
+  }
+}
+
+export function update_ledColorStore(descr) {
+  for (let i = 0; i < descr.class_parameters.LENGTH / 8; i++) {
+    const num = parseInt(
+      "0x" +
+        String.fromCharCode(descr.raw[8 + i * 8 + 0]) +
+        String.fromCharCode(descr.raw[8 + i * 8 + 1])
+    );
+    const red = parseInt(
+      "0x" +
+        String.fromCharCode(descr.raw[8 + i * 8 + 2]) +
+        String.fromCharCode(descr.raw[8 + i * 8 + 3])
+    );
+    const gre = parseInt(
+      "0x" +
+        String.fromCharCode(descr.raw[8 + i * 8 + 4]) +
+        String.fromCharCode(descr.raw[8 + i * 8 + 5])
+    );
+    const blu = parseInt(
+      "0x" +
+        String.fromCharCode(descr.raw[8 + i * 8 + 6]) +
+        String.fromCharCode(descr.raw[8 + i * 8 + 7])
+    );
+
+    //console.log(num, red, gre, blu)
+
+    let lcs = get(ledColorStore);
+
+    if (lcs[descr.brc_parameters.SX] === undefined) {
+      lcs[descr.brc_parameters.SX] = {};
+    }
+    if (lcs[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
+      lcs[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
+    }
+    if (
+      lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num] === undefined
+    ) {
+      lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num] = [0, 0, 0];
+    }
+
+    lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num][0] = red * 4;
+    lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num][1] = gre * 4;
+    lcs[descr.brc_parameters.SX][descr.brc_parameters.SY][num][2] = blu * 4;
+
+    ledColorStore.set(lcs);
+  }
+}
+
+//Template logger object: { type: "", message: "", classname: "" }
+export const logger = writable();
+
+function create_user_input() {
+  const defaultValues = {
+    dx: undefined,
+    dy: undefined,
+    pagenumber: undefined,
+    elementnumber: undefined,
+    eventtype: undefined,
+  };
+
+  const store = new ProtectedStore(defaultValues);
+
+  function setOverride({ dx, dy, pagenumber, elementnumber, eventtype }) {
+    for (const [key, value] of Object.entries({
+      dx,
+      dy,
+      pagenumber,
+      elementnumber,
+      eventtype,
+    })) {
+      if (typeof value === "undefined") {
+        store.set({
+          ...defaultValues,
+        });
+        return;
+      }
+      if (typeof value !== "number") {
+        throw `($user_input store): ${key} (${value}) is not the type of Number.`;
+      }
+    }
+
+    const events = getElementEventTypes(dx, dy, elementnumber);
+    const closestEvent = get_closest_event(events, eventtype);
+
+    store.set({
+      dx: dx,
+      dy: dy,
+      pagenumber: pagenumber,
+      elementnumber: elementnumber,
+      eventtype: closestEvent,
+    });
+  }
+
+  function get_closest_event(events, event) {
+    if (events.map((e) => Number(e)).includes(Number(event))) {
+      return event;
+    }
+
+    //Select closest event type if incoming device does not have the corrently selected event type
+    const closestEvent = Math.min(
+      ...events.map((e) => Number(e)).filter((e) => e > 0)
+    );
+    return closestEvent;
+  }
+
+  function process_incoming_event_from_grid(descr) {
+    // engine is disabled
+    if (get(writeBuffer).length > 0) {
+      return;
+    }
+
+    // modal block track physical interaction setting
+    if (typeof get(modal) !== "undefined") {
+      return;
+    }
+
+    // event is init, mapmode, midirx, timer
+    if (
+      descr.class_parameters.EVENTTYPE == 0 ||
+      descr.class_parameters.EVENTTYPE == 4 ||
+      descr.class_parameters.EVENTTYPE == 5 ||
+      descr.class_parameters.EVENTTYPE == 6
+    ) {
+      return;
+    }
+
+    // system element
+    if (descr.class_parameters.ELEMENTNUMBER == 255) {
+      return;
+    }
+
+    const ui = get(store);
+
+    // filter same control element had multiple interactions
+    let elementDifferent =
+      ui.elementnumber != descr.class_parameters.ELEMENTNUMBER;
+    let eventDifferent = ui.eventtype != descr.class_parameters.EVENTTYPE;
+    let sxDifferent = ui.dx != descr.brc_parameters.SX;
+    let syDifferent = ui.dy != descr.brc_parameters.SY;
+
+    if (eventDifferent || elementDifferent || sxDifferent || syDifferent) {
+      //Filtering out clashing events of control elements
+      //Example: multiple fader movenet at the same time
+      if (Date.now() < selection_changed_timestamp + 100) {
+        return;
+      }
+
+      let eventtype;
+      switch (get(appSettings).persistent.changeOnEvent) {
+        case "element": {
+          const incomingEventTypes = getElementEventTypes(
+            descr.brc_parameters.SX,
+            descr.brc_parameters.SY,
+            descr.class_parameters.ELEMENTNUMBER
+          );
+          const current = ui.eventtype;
+          eventtype = get_closest_event(incomingEventTypes, current);
+          if (!elementDifferent) {
+            return;
+          }
+          break;
+        }
+        case "none": {
+          return;
+        }
+        case "event":
+        default: {
+          eventtype = descr.class_parameters.EVENTTYPE;
+        }
+      }
+      store.set({
+        dx: descr.brc_parameters.SX,
+        dy: descr.brc_parameters.SY,
+        pagenumber: ui.pagenumber,
+        elementnumber: descr.class_parameters.ELEMENTNUMBER,
+        eventtype: eventtype,
+      });
+    }
+    selection_changed_timestamp = Date.now();
+  }
+
+  function module_destroy_handler(dx, dy) {
+    // This is used to re-init local settings panel if a module is removed which values have been displayed
+    const ui = get(store);
+
+    if (dx == ui.dx && dy == ui.dy) {
+      if (runtime.modules.length > 0) {
+        //Set user input to an EXISTING module
+        //(0,0) module is not guaranteed to exist when unplugging all modules once
+        //NOTE: Hardcoding (0,0) may break user_input
+        setOverride({
+          dx: runtime.modules[0].dx,
+          dy: runtime.modules[0].dy,
+          pagenumber: ui.pagenumber,
+          elementnumber: 0,
+          eventtype: ui.eventtype,
+        });
+      } else {
+        setOverride({
+          ...defaultValues,
+        });
+      }
+    }
+  }
+
+  return {
+    ...store,
+    set: setOverride,
+    process_incoming_event_from_grid: process_incoming_event_from_grid,
+    module_destroy_handler: module_destroy_handler,
+  };
+}
+
+export const user_input = create_user_input();
+
+export const runtime = new GridRuntime();
+
+//Retrieves device name from coordinates of the device
+export function getDeviceName(x, y) {
+  const currentModule = runtime.modules.find(
+    (device) => device.dx == x && device.dy == y
+  );
+  return currentModule?.id.slice(0, 4);
+}
+
+export function getElementEventTypes(x, y, elementNumber) {
+  const currentModule = runtime.modules.find(
+    (device) => device.dx == x && device.dy == y
+  );
+
+  if (typeof currentModule === "undefined") {
+    console.warn(`Module does not exist on (${x}, ${y})`);
+    return undefined;
+  }
+  const element = currentModule.pages[0].control_elements.find(
+    (e) => e.elementIndex == elementNumber
+  );
+
+  if (typeof element === "undefined") {
+    console.warn(
+      `Control element ${elementNumber} does not exist on (${x}, ${y})`
+    );
+    return undefined;
+  }
+
+  return element.events.map((e) => e.type);
+}
+
+function createEngine() {
+  const _engine = writable("ENABLED");
+
+  return {
+    ..._engine,
+  };
+}
+
+export const engine = createEngine();
+
+export const heartbeat = writable([]);
+
+const heartbeat_editor_ms = 300;
+const heartbeat_grid_ms = 250;
+
+const grid_heartbeat_interval_handler = async function () {
+  runtime.modules.forEach((device, i) => {
+    if (device.architecture === "virtual") {
+      return;
+    }
+
+    const alive = get(heartbeat).find((e) => e.id == device.id)?.alive;
+
+    // Allow less strict elapsedTimeLimit while writeBuffer is busy!
+    const elapsedTimeLimit =
+      get(writeBuffer).length > 0
+        ? heartbeat_grid_ms * 6
+        : heartbeat_grid_ms * 3;
+    const elapsedTime = Date.now() - alive;
+
+    if (!alive || elapsedTime > elapsedTimeLimit) {
+      // TIMEOUT! let's remove the device
+      runtime.destroy_module(device.dx, device.dy);
+      heartbeat.update((heartbeat) => {
+        return heartbeat.filter((e) => e.id !== device.id);
+      });
+    }
+  });
+};
+
+setIntervalAsync(grid_heartbeat_interval_handler, heartbeat_grid_ms);
+
+const editor_heartbeat_interval_handler = async function () {
+  let type = 255;
+
+  if (runtime.unsavedChangesCount() != 0 || typeof get(modal) !== "undefined") {
+    type = 254;
+  }
+
+  if (
+    runtime.modules.length > 0 &&
+    runtime.modules.filter((e) => e.architecture === "virtual").length === 0
+  ) {
+    sendHeartbeat(type);
+  } else {
+    //writeBuffer.clear();
+  }
+};
+
+setIntervalAsync(editor_heartbeat_interval_handler, heartbeat_editor_ms);
+
+export class LocalDefinitions {
+  static getFrom({ configs, index }) {
+    const config = configs[index];
+    let n = index - 1;
+    let list = [];
+    let indentation = config?.indentation;
+    while (n >= 0) {
+      if (configs[n].indentation <= indentation) {
+        list.push(configs[n]);
+        if (configs[n].indentation != indentation) {
+          indentation = configs[n].indentation;
+        }
+      }
+      --n;
+    }
+
+    let arr = [];
+    list.forEach((c) => {
+      if (c.short == "l" && c.script !== "") {
+        let _variable_array = c.script.split("=")[0];
+        _variable_array = _variable_array.split("local")[1];
+        _variable_array = _variable_array.split(",");
+        _variable_array.forEach((val, i) => {
+          arr.push({ info: `local - ${val.trim()}`, value: val.trim() });
+        });
+      }
+    });
+    return arr;
+  }
+}
+
+export async function wss_send_message(message) {
+  window.electron.websocket.transmit({ event: "message", data: message });
+}
+
+console.log("reached end of runtime");
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 7772e75c4..074b2f7bb 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -1,4 +1,9 @@
-import { Architecture, ElementType } from "@intechstudio/grid-protocol";
+import {
+  grid,
+  Architecture,
+  ElementType,
+  ModuleType,
+} from "@intechstudio/grid-protocol";
 import {
   writable,
   get,
@@ -7,6 +12,22 @@ import {
   Unsubscriber,
   Updater,
 } from "svelte/store";
+import { instructions } from "../serialport/instructions";
+import { writeBuffer } from "./engine.store";
+import { createVirtualModule } from "./virtual-engine";
+import { VirtualModuleHWCFG } from "./virtual-engine";
+import { virtual_runtime } from "./virtual-engine";
+import { Analytics } from "./analytics.js";
+import { appSettings } from "./app-helper.store";
+import { add_datapoint } from "../serialport/message-stream.store.js";
+import {
+  elementNameStore,
+  elementPositionStore,
+  heartbeat,
+  ledColorStore,
+  logger,
+  user_input,
+} from "./runtime.store";
 
 abstract class RuntimeNode<T> implements Writable<T> {
   protected _internal: Writable<T>;
@@ -39,21 +60,15 @@ abstract class RuntimeNode<T> implements Writable<T> {
   }
 
   protected notify() {
-    //console.log("ME NOTIFIED:", this);
     this._internal.update((s) => s);
     this.notifyParent();
   }
 
-  protected syncWithGrid() {
-    console.log("SYNCING");
-  }
-
   protected notifyParent() {
     if (!this._parent) {
       return;
     }
 
-    console.log("NOTIFY", this._parent);
     this._parent.notify();
   }
 
@@ -114,54 +129,189 @@ export class GridAction extends RuntimeNode<ActionData> {
     const namePostfix = typeof this.name !== "undefined" ? `#${this.name}` : "";
     return `--[[@${this.short}${namePostfix}]] ${this.script}`;
   }
+
+  isEqual(other: GridAction) {
+    return (
+      this.name === other.name &&
+      this.script === other.script &&
+      this.short === other.short
+    );
+  }
 }
 
 export type EventData = {
-  config: Array<GridAction>;
-  stored: Array<GridAction[]>;
+  config?: Array<GridAction> | undefined;
+  stored?: Array<GridAction> | undefined;
   type: number;
 };
 
-export class GridEvent extends RuntimeNode<ActionData> {
-  constructor(parent: GridEvent, data?: ActionData) {
+export class GridEvent extends RuntimeNode<EventData> {
+  constructor(parent: GridElement, data?: EventData) {
     super(parent, data);
   }
 
   // Getters
+  get config() {
+    return this.getField("config");
+  }
+
+  get stored() {
+    return this.getField("stored");
+  }
+
+  get type() {
+    return this.getField("type");
+  }
 
   // Setters
+  set config(value: Array<GridAction>) {
+    this.setField("config", value);
+  }
+
+  set stored(value: Array<GridAction>) {
+    this.setField("stored", value);
+  }
+
+  set type(value: number) {
+    this.setField("type", value);
+  }
+
+  //Methods
+  toLua() {
+    return `<?lua ${this.config.map((e) => e.toLua()).join("")} ?>`;
+  }
+
+  hasChanges(): boolean {
+    if (this.stored === undefined) {
+      return false;
+    }
+
+    if (this.config.length !== this.stored.length) {
+      return true;
+    }
+
+    for (let i = 0; i < this.config.length; ++i) {
+      if (!this.config[i].isEqual(this.stored[i])) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  store(value: Array<GridAction>) {
+    this.stored = value.map(
+      (e) =>
+        new GridAction(this, { script: e.script, short: e.short, name: e.name })
+    );
+  }
+
+  clear() {
+    this.config = undefined;
+    this.stored = undefined;
+  }
 }
 
 export type ElementData = {
   elementIndex: number;
-  events: Array<GridEvent>;
+  events?: Array<GridEvent>;
   name: string;
   type: ElementType;
 };
 
 export class GridElement extends RuntimeNode<ElementData> {
-  constructor(parent: GridEvent, data?: ElementData) {
+  constructor(parent: GridPage, data?: ElementData) {
     super(parent, data);
+
+    this.events = [];
+    const elementEvents = grid.get_element_events(data.type);
+    for (const event of elementEvents) {
+      this.events.push(
+        new GridEvent(this, {
+          type: Number(event.value),
+          config: undefined,
+          stored: undefined,
+        })
+      );
+    }
   }
 
   // Getters
+  get elementIndex() {
+    return this.getField("elementIndex");
+  }
+
+  get events() {
+    return this.getField("events");
+  }
+
+  get name() {
+    return this.getField("name");
+  }
+
+  get type() {
+    return this.getField("type");
+  }
 
   // Setters
+  set elementIndex(value: number) {
+    this.setField("elementIndex", value);
+  }
+
+  set events(value: Array<GridEvent>) {
+    this.setField("events", value);
+  }
+
+  set name(value: string) {
+    this.setField("name", value);
+  }
+
+  set type(value: ElementType) {
+    this.setField("type", value);
+  }
 }
 
 export type PageData = {
   pageNumber: number;
-  control_elements: Array<GridElement>;
+  control_elements?: Array<GridElement>;
 };
 
 export class GridPage extends RuntimeNode<PageData> {
   constructor(parent: GridModule, data?: PageData) {
     super(parent, data);
+    this.control_elements = [];
+    const moduleElements = grid.get_module_element_list(parent.type);
+    for (const [index, element] of Object.entries(moduleElements)) {
+      if (typeof element === "undefined") {
+        continue;
+      }
+
+      this.control_elements.push(
+        new GridElement(this, {
+          elementIndex: Number(index),
+          type: element,
+          name: "",
+        })
+      );
+    }
   }
 
   // Getters
+  get pageNumber() {
+    return this.getField("pageNumber");
+  }
+
+  get control_elements() {
+    return this.getField("control_elements");
+  }
 
   // Setters
+  set pageNumber(value: number) {
+    this.setField("pageNumber", value);
+  }
+
+  set control_elements(value: Array<GridElement>) {
+    this.setField("control_elements", value);
+  }
 }
 
 type FirmwareVersion = {
@@ -189,38 +339,851 @@ export type ModuleData = {
   dy: number;
   fwMismatch: boolean;
   fwVersion: FirmwareVersion;
-  gridX: number;
-  gridY: number;
   id: string;
   map: DirectionMap;
   portstate: any;
   rot: number;
-  type: string;
-  pages: Array<GridPage>;
+  type: ModuleType;
+  pages?: Array<GridPage>;
 };
 
 export class GridModule extends RuntimeNode<ModuleData> {
   constructor(parent: GridRuntime, data?: ModuleData) {
     super(parent, data);
+    this.pages = [
+      new GridPage(this, { pageNumber: 0 }),
+      new GridPage(this, { pageNumber: 1 }),
+      new GridPage(this, { pageNumber: 2 }),
+      new GridPage(this, { pageNumber: 3 }),
+    ];
   }
 
   // Getters
+  get alive() {
+    return this.getField("alive");
+  }
+
+  get architecture() {
+    return this.getField("architecture");
+  }
+
+  get dx() {
+    return this.getField("dx");
+  }
+
+  get dy() {
+    return this.getField("dy");
+  }
+
+  get fwMismatch() {
+    return this.getField("fwMismatch");
+  }
+
+  get fwVersion() {
+    return this.getField("fwVersion");
+  }
+
+  get id() {
+    return this.getField("id");
+  }
+
+  get map() {
+    return this.getField("map");
+  }
+
+  get portstate() {
+    return this.getField("portstate");
+  }
+
+  get rot() {
+    return this.getField("rot");
+  }
+
+  get type() {
+    return this.getField("type");
+  }
+
+  get pages() {
+    return this.getField("pages");
+  }
 
   // Setters
+  set alive(value: number) {
+    this.setField("alive", value);
+  }
+
+  set architecture(value: Architecture) {
+    this.setField("architecture", value);
+  }
+
+  set dx(value: number) {
+    this.setField("dx", value);
+  }
+
+  set dy(value: number) {
+    this.setField("dy", value);
+  }
+
+  set fwMismatch(value: boolean) {
+    this.setField("fwMismatch", value);
+  }
+
+  set fwVersion(value: FirmwareVersion) {
+    this.setField("fwVersion", value);
+  }
+
+  set id(value: string) {
+    this.setField("id", value);
+  }
+
+  set map(value: DirectionMap) {
+    this.setField("map", value);
+  }
+
+  set portstate(value: any) {
+    this.setField("portstate", value);
+  }
+
+  set rot(value: number) {
+    this.setField("rot", value);
+  }
+
+  set type(value: ModuleType) {
+    this.setField("type", value);
+  }
+
+  set pages(value: Array<GridPage>) {
+    this.setField("pages", value);
+  }
 }
 
-export class GridRuntime extends RuntimeNode<void> {
+type RuntimeData = {
+  modules: Array<GridModule>;
+};
+
+export class GridRuntime extends RuntimeNode<RuntimeData> {
   constructor() {
-    super(undefined, undefined);
+    super(undefined, { modules: [] });
   }
 
-  // Getters
+  get modules() {
+    return this.getField("modules");
+  }
 
   // Setters
+  set modules(value: Array<GridModule>) {
+    this.setField("modules", value);
+  }
+
+  findUpdateDestEvent(_runtime, dx, dy, page, element, event) {
+    let _event = undefined;
+    // this elementnumber check refers to uninitialized UI...
+    if (element !== -1) {
+      _runtime.forEach((device) => {
+        if (device.dx == dx && device.dy == dy) {
+          const pageIndex = device.pages.findIndex((x) => x.pageNumber == page);
+          const elementIndex = device.pages[
+            pageIndex
+          ].control_elements.findIndex((x) => x.elementIndex == element);
+          _event = device.pages[pageIndex].control_elements[
+            elementIndex
+          ].events.find((e) => e.type == event);
+        }
+      });
+    }
+    return _event;
+  }
+
+  fetchOrLoadConfig({ dx, dy, page, element, event }): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const _device = this.modules.find(
+        (device) => device.dx == dx && device.dy == dy
+      );
+      const _page = _device.pages.find((e) => e.pageNumber == page);
+      const _element = _page.control_elements.find(
+        (e) => e.elementIndex == element
+      );
+      const _event = _element.events.find((e) => e.type == event);
+
+      if (typeof _event.config !== "undefined") {
+        resolve();
+      } else {
+        instructions
+          .fetchConfigFromGrid(dx, dy, page, element, event)
+          .then((descr) => {
+            const dx = descr.brc_parameters.SX;
+            const dy = descr.brc_parameters.SY;
+            const page = descr.class_parameters.PAGENUMBER;
+            const element = descr.class_parameters.ELEMENTNUMBER;
+            const event = descr.class_parameters.EVENTTYPE;
+            const actionstring = descr.class_parameters.ACTIONSTRING;
+
+            this.update_event_configuration(
+              dx,
+              dy,
+              page,
+              element,
+              event,
+              actionstring
+            );
+
+            resolve();
+          })
+          .catch((e) => reject(e));
+      }
+    });
+  }
+
+  isFirmwareMismatch(currentFirmware, requiredFirmware) {
+    // Extract major, minor, and patch versions from current and required firmware
+    const {
+      major: currentMajor,
+      minor: currentMinor,
+      patch: currentPatch,
+    } = currentFirmware;
+    const {
+      major: requiredMajor,
+      minor: requiredMinor,
+      patch: requiredPatch,
+    } = requiredFirmware;
+
+    // Compare major versions
+    if (currentMajor < requiredMajor) {
+      return true; // Firmware mismatch if current major version is lower
+    } else if (currentMajor > requiredMajor) {
+      return false; // No firmware mismatch if current major version is higher
+    }
+
+    // Compare minor versions
+    if (currentMinor < requiredMinor) {
+      return true; // Firmware mismatch if current minor version is lower
+    } else if (currentMinor > requiredMinor) {
+      return false; // No firmware mismatch if current minor version is higher
+    }
+
+    // Compare patch versions
+    if (currentPatch < requiredPatch) {
+      return true; // Firmware mismatch if current patch version is lower
+    } else {
+      return false; // No firmware mismatch if current patch version is equal or higher
+    }
+  }
+
+  incoming_heartbeat_handler(descr) {
+    try {
+      for (const module of this.modules) {
+        if (module.architecture === "virtual") {
+          this.destroy_module(module.dx, module.dy);
+        }
+      }
+      const controller = this.create_module(
+        descr.brc_parameters,
+        descr.class_parameters,
+        false
+      );
+
+      let firstConnection = false;
+      const module = this.modules.find((device) => device.id == controller.id);
+      if (module) {
+        if (module.rot != controller.rot) {
+          module.rot = controller.rot;
+        }
+
+        if (module.portstate != controller.portstate) {
+          module.portstate = controller.portstate;
+        }
+
+        const lastDate = get(heartbeat).find(
+          (device) => device.id == controller.id
+        )?.alive;
+        if (lastDate) {
+          let newDate = Date.now();
+
+          heartbeat.update((store) => {
+            const device = store.find((device) => device.id == controller.id);
+            if (device) {
+              device.alive = newDate;
+            }
+            return store;
+          });
+
+          //console.log(newDate - lastDate)
+          if (get(appSettings).persistent.heartbeatDebugEnabled) {
+            const key1 = `Hearbeat (${controller.dx}, ${controller.dy})`;
+
+            add_datapoint(key1, newDate - lastDate);
+          }
+        }
+      }
+      // device not found, add it to runtime and get page count from grid
+      else {
+        // check if the firmware version of the newly connected device is acceptable
+        console.log("Incoming Device");
+        console.log("Architecture", controller.architecture);
+
+        const as = get(appSettings);
+        const firmware_required =
+          controller.architecture === "esp32"
+            ? as.firmware_esp32_required
+            : as.firmware_d51_required;
+        controller.fwMismatch = this.isFirmwareMismatch(
+          controller.fwVersion,
+          firmware_required
+        );
+
+        console.log(
+          "Mismatch: ",
+          controller.fwMismatch,
+          "Firmware Version: ",
+          controller.fwVersion
+        );
+
+        this.modules = [...this.modules, controller];
+        heartbeat.update((devices) => {
+          return [...devices, { id: controller.id, alive: Date.now() }];
+        });
+
+        firstConnection = this.modules.length === 1;
+
+        Analytics.track({
+          event: "Connect Module",
+          payload: {
+            action: "Connect",
+            controller: controller,
+            moduleCount: this.modules.length,
+          },
+          mandatory: false,
+        });
+      }
+
+      if (firstConnection) {
+        this.setDefaultSelectedElement();
+      }
+    } catch (error) {
+      console.warn(error);
+    }
+  }
+
+  setDefaultSelectedElement() {
+    user_input.set({
+      dx: this.modules[0].dx,
+      dy: this.modules[0].dy,
+      pagenumber: 0,
+      elementnumber: 0,
+      eventtype: 2,
+    });
+  }
+
+  element_preset_load(x, y, element, preset): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const ui = get(user_input);
+      let events = preset.configs.events;
+      const promises = [];
+      events.forEach((e) => {
+        const page = ui.pagenumber;
+        const event = e.event;
+
+        let dest = this.findUpdateDestEvent(
+          this.modules,
+          x,
+          y,
+          page,
+          element,
+          event
+        );
+        if (typeof dest !== "undefined") {
+          dest.config = createActionsFromString(dest, e.config);
+          const promise = instructions.sendConfigToGrid(
+            x,
+            y,
+            page,
+            element,
+            event,
+            e.config
+          );
+
+          promises.push(promise);
+        }
+      });
+      Promise.all(promises)
+        .then(() => {
+          resolve();
+          logger.set({
+            type: "success",
+            mode: 0,
+            classname: "elementoverwrite",
+            message: `Overwrite done!`,
+          });
+        })
+        .catch((e) => reject(e));
+    });
+  }
+
+  whole_page_overwrite(x, y, array): Promise<void> {
+    logger.set({
+      type: "progress",
+      mode: 0,
+      classname: "profileload",
+      message: `Profile load started...`,
+    });
+
+    return new Promise((resolve, reject) => {
+      // Reorder array to send system element first
+      const index = array.findIndex((obj) => obj.elementIndex === 255);
+
+      // Check if the object with id === 255 was found
+      if (index !== -1) {
+        // Remove the object at the found index
+        const objectToMove = array.splice(index, 1)[0];
+
+        // Add the object to the front of the array
+        array.unshift(objectToMove);
+      }
+
+      let ui = structuredClone(get(user_input));
+      const promises = [];
+      array.forEach((elem) => {
+        elem.events.forEach((ev) => {
+          ui.elementnumber = elem.controlElementNumber;
+          ui.eventtype = ev.event;
+
+          const page = ui.pagenumber;
+          const element = ui.elementnumber;
+          const event = ui.eventtype;
+
+          let dest = this.findUpdateDestEvent(
+            this.modules,
+            x,
+            y,
+            page,
+            element,
+            event
+          );
+          if (dest) {
+            dest.config = createActionsFromString(dest, ev.config);
+          }
+
+          const promise = instructions.sendConfigToGrid(
+            x,
+            y,
+            page,
+            element,
+            event,
+            ev.config
+          );
+
+          promises.push(promise);
+        });
+      });
+      Promise.all(promises)
+        .then((desc) => {
+          logger.set({
+            type: "success",
+            mode: 0,
+            classname: "profileload",
+            message: `Profile load complete!`,
+          });
+          resolve();
+        })
+        .catch((e) => reject(e));
+    });
+  }
+
+  update_event_configuration(dx, dy, page, element, event, actionString) {
+    // config
+
+    let dest = this.findUpdateDestEvent(
+      this.modules,
+      dx,
+      dy,
+      page,
+      element,
+      event
+    );
+    if (dest) {
+      dest.config = createActionsFromString(dest, actionString);
+
+      if (typeof dest.stored === "undefined") {
+        dest.store(dest.config);
+      }
+    }
+  }
+
+  send_event_configuration_to_grid(
+    dx,
+    dy,
+    page,
+    element,
+    event
+  ): Promise<void> {
+    return new Promise((resolve, reject) => {
+      let dest = this.findUpdateDestEvent(
+        this.modules,
+        dx,
+        dy,
+        page,
+        element,
+        event
+      );
+      if (dest) {
+        const script = `<?lua ${dest.config.map((e) => e.toLua()).join("")} ?>`;
+        instructions
+          .sendConfigToGrid(dx, dy, page, element, event, script)
+          .then((desc) => {
+            resolve();
+          })
+          .catch((e) => reject(e));
+      } else {
+        reject("DEST not found!");
+      }
+    });
+  }
+
+  // whole element copy: fetches all event configs from a control element
+  fetch_element_configuration_from_grid(dx, dy, pageNumber, elementNumber) {
+    const device = this.modules.find(
+      (device) => device.dx == dx && device.dy == dy
+    );
+    const page = device.pages.find((x) => x.pageNumber == pageNumber);
+    const element = page.control_elements.find(
+      (x) => x.elementIndex == elementNumber
+    );
+    const events = element.events;
+
+    const promises = events.map((e) => {
+      const eventType = e.type;
+      const dest = {
+        dx: dx,
+        dy: dy,
+        page: pageNumber,
+        element: elementNumber,
+        event: eventType,
+      };
+      const promise = this.fetchOrLoadConfig(dest);
+      return promise;
+    });
+
+    return Promise.all(promises);
+  }
+
+  fetch_page_configuration_from_grid({ dx, dy, page }) {
+    logger.set({
+      type: "progress",
+      mode: 0,
+      classname: "profilesave",
+      message: `Preparing configs...`,
+    });
+
+    let device = this.modules.find(
+      (device) => device.dx == dx && device.dy == dy
+    );
+
+    if (typeof device === "undefined") {
+      logger.set({
+        type: "fail",
+        mode: 0,
+        classname: "profilesave",
+        message: `No module selected`,
+      });
+
+      return Promise.reject(`No module selected`);
+    }
+
+    const pageIndex = device.pages.findIndex((x) => x.pageNumber == page);
+    const controlElements = device.pages[pageIndex].control_elements;
+
+    const fetchArray = [];
+
+    controlElements.forEach((controlElement) => {
+      controlElement.events.forEach((e) => {
+        if (typeof e.config === "undefined") {
+          // put it into the fetchArray
+          fetchArray.push({
+            event: e.type,
+            elementIndex: controlElement.elementIndex,
+          });
+        }
+      });
+    });
+
+    // clear the writeBuffer to make sure that there are no fetch operations that may interfere with the callback
+    // writeBuffer.clear();
+
+    if (fetchArray.length === 0) {
+      //nothing to do, let's do calback
+      return Promise.resolve();
+    }
+
+    const promises = fetchArray.map((e) => {
+      const promise = this.fetchOrLoadConfig({
+        dx: dx,
+        dy: dy,
+        page: page,
+        element: e.elementIndex,
+        event: e.event,
+      });
+      return promise;
+    });
+
+    return Promise.all(promises);
+  }
+
+  clear_page_configuration(index) {
+    this.modules.forEach((module) => {
+      module.pages[index].control_elements.forEach((control_element) => {
+        control_element.events.forEach((event) => {
+          event.clear();
+        });
+      });
+    });
+  }
+
+  create_module(header_param, heartbeat_class_param, virtual = false) {
+    const moduleType = grid
+      .module_type_from_hwcfg(Number(heartbeat_class_param.HWCFG))
+      ?.substring(0, 4);
+
+    // generic check, code below if works only if all parameters are provided
+    if (
+      header_param === undefined ||
+      moduleType === undefined ||
+      heartbeat_class_param === undefined
+    ) {
+      console.log(
+        heartbeat_class_param.HWCFG,
+        "ERROR",
+        header_param,
+        moduleType,
+        heartbeat_class_param
+      );
+      throw "Error creating new module.";
+    }
+
+    return new GridModule(this, {
+      // implement the module id rep / req
+      architecture: virtual
+        ? Architecture.VIRTUAL
+        : grid.module_architecture_from_hwcfg(heartbeat_class_param.HWCFG),
+      portstate: heartbeat_class_param.PORTSTATE,
+      id: moduleType + "_" + "dx:" + header_param.SX + ";dy:" + header_param.SY,
+      dx: header_param.SX,
+      dy: header_param.SY,
+      rot: header_param.ROT,
+      fwVersion: {
+        major: heartbeat_class_param.VMAJOR,
+        minor: heartbeat_class_param.VMINOR,
+        patch: heartbeat_class_param.VPATCH,
+      },
+      type: ModuleType[moduleType as keyof typeof ModuleType],
+      fwMismatch: false,
+      alive: Date.now(),
+      map: {
+        top: { dx: header_param.SX, dy: header_param.SY + 1 },
+        right: { dx: header_param.SX + 1, dy: header_param.SY },
+        bot: { dx: header_param.SX, dy: header_param.SY - 1 },
+        left: { dx: header_param.SX - 1, dy: header_param.SY },
+      },
+    });
+  }
+
+  destroy_module(dx, dy) {
+    // remove the destroyed device from runtime
+    const removed = this.modules.find((e) => e.dx == dx && e.dy == dy);
+
+    //TODO
+    const index = this.modules.findIndex((e) => e.dx === dx && e.dy === dy);
+    this.modules.splice(index, 1);
+
+    if (this.modules.length === 0) {
+      appSettings.update((s) => {
+        s.gridLayoutShift = { x: 0, y: 0 };
+        return s;
+      });
+    }
+
+    user_input.module_destroy_handler(dx, dy);
+    if (removed.architecture === "virtual") {
+      virtual_runtime.destroyModule(dx, dy);
+    } else {
+      writeBuffer.module_destroy_handler(dx, dy);
+    }
+
+    // reset rendering helper stores
+
+    try {
+      elementPositionStore.update((eps) => {
+        eps[dx][dy] = undefined;
+        return eps;
+      });
+
+      elementNameStore.update((ens) => {
+        ens[dx][dy] = undefined;
+        return ens;
+      });
+
+      ledColorStore.update((lcs) => {
+        lcs[dx][dy] = undefined;
+        return lcs;
+      });
+    } catch (error) {}
+
+    Analytics.track({
+      event: "Disconnect Module",
+      payload: {
+        action: "Disconnect",
+        moduleCount: this.modules.length,
+      },
+      mandatory: false,
+    });
+  }
+
+  change_page(new_page_number): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (get(writeBuffer).length > 0) {
+        reject("Wait before all operations are finished.");
+        return;
+      }
+
+      if (this.unsavedChangesCount() != 0) {
+        reject("Store your changes before changin pages!");
+        return;
+      }
+
+      let ui = get(user_input);
+
+      // only update pagenumber if it differs from the runtime pagenumber
+      if (ui.pagenumber === new_page_number) {
+        resolve();
+        return;
+      }
+      // clean up the writebuffer if pagenumber changes!
+      // writeBuffer.clear();
+
+      instructions
+        .changeActivePage(new_page_number)
+        .then(() => {
+          const ui = get(user_input);
+          user_input.set({
+            dx: ui.dx,
+            dy: ui.dy,
+            pagenumber: new_page_number,
+            elementnumber: ui.elementnumber,
+            eventtype: ui.eventtype,
+          });
+          resolve();
+        })
+        .catch((e) => {
+          reject(e);
+        });
+    });
+  }
+
+  unsavedChangesCount() {
+    let count = 0;
+    this.modules.forEach((e) => {
+      e.pages.forEach((e) => {
+        e.control_elements.forEach((e) => {
+          e.events.forEach((e) => {
+            if (e.hasChanges()) {
+              count += 1;
+            }
+          });
+        });
+      });
+    });
+    return count;
+  }
+
+  async storePage(index) {
+    return new Promise((resolve, reject) => {
+      instructions
+        .sendPageStoreToGrid()
+        .then((res) => {
+          this.modules.forEach((module) => {
+            module.pages
+              .find((e) => e.pageNumber == index)
+              ?.control_elements.forEach((element) => {
+                element.events.forEach((event) => {
+                  if (event.stored !== event.config) {
+                    event.store(event.config);
+                  }
+                });
+              });
+          });
+          resolve(res);
+        })
+        .catch((e) => {
+          reject(e);
+        });
+    });
+  }
+
+  clearPage(index): Promise<void> {
+    logger.set({
+      type: "progress",
+      mode: 0,
+      classname: "pageclear",
+      message: `Clearing configurations from page...`,
+    });
+    return new Promise((resolve, reject) => {
+      instructions
+        .sendPageClearToGrid()
+        .then(() => {
+          this.clear_page_configuration(index);
+          resolve();
+        })
+        .catch((e) => {
+          console.warn(e);
+          reject(e);
+        });
+    });
+  }
+
+  discardPage(index): Promise<void> {
+    logger.set({
+      type: "progress",
+      mode: 0,
+      classname: "pagediscard",
+      message: `Discarding configurations...`,
+    });
+    return new Promise((resolve, reject) => {
+      instructions
+        .sendPageDiscardToGrid()
+        .then(() => {
+          this.clear_page_configuration(index);
+          resolve();
+        })
+        .catch((e) => {
+          console.warn(e);
+          reject(e);
+        });
+    });
+  }
+
+  addVirtualModule({ dx, dy, type }) {
+    const module = VirtualModuleHWCFG[type];
+    const controller = this.create_module(
+      {
+        DX: dx,
+        DY: dy,
+        SX: dx,
+        SY: dy,
+      },
+      {
+        HWCFG: module.hwcfg,
+      },
+      true
+    );
+
+    createVirtualModule(dx, dy, module.type);
+
+    this.modules = [...this.modules, controller];
+    this.setDefaultSelectedElement();
+  }
 }
 
 //TODO: helper function to refactor out
-export function createActionsFromString(script: string) {
+export function createActionsFromString(parent: GridEvent, script: string) {
   const result: GridAction[] = [];
   let configList: string[] = [];
   let actionString = script;
@@ -242,7 +1205,7 @@ export function createActionsFromString(script: string) {
       .match(/--\[\[@(.*)\]\]/)
       ?.at(1)
       .split(/#(.*)/);
-    const obj = new GridAction(undefined, {
+    const obj = new GridAction(parent, {
       //Extract short + name, e.g.: '--[[@gms#name]]' => 'gms'
       short: split[0],
       script: configList[i + 1].trim(),
diff --git a/src/renderer/serialport/instructions.ts b/src/renderer/serialport/instructions.ts
index f852f04e8..ab768f85b 100644
--- a/src/renderer/serialport/instructions.ts
+++ b/src/renderer/serialport/instructions.ts
@@ -9,7 +9,7 @@ import {
   InstructionClass,
   InstructionClassName,
 } from "../runtime/engine.store.ts";
-import { logger } from "../runtime/runtime.store.js";
+import { logger } from "../runtime/runtime.store";
 import { v4 as uuidv4 } from "uuid";
 
 export interface Instructions {

From 359437ff3c81dd0fb764c76b39ce2c58200b0e0c Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 6 Sep 2024 18:22:49 +0200
Subject: [PATCH 04/42] Daily push

---
 src/renderer/config-blocks/CodeBlock.svelte |  4 +-
 src/renderer/lib/_utils.js                  |  5 --
 src/renderer/main/modals/Monaco.store.js    |  2 -
 src/renderer/main/modals/Monaco.svelte      | 51 +++++++++++++++++++--
 src/renderer/runtime/runtime.ts             |  7 +++
 5 files changed, 56 insertions(+), 13 deletions(-)
 delete mode 100644 src/renderer/lib/_utils.js
 delete mode 100644 src/renderer/main/modals/Monaco.store.js

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 71d56bd9b..6b90fc073 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -48,7 +48,7 @@
 
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
-  import { monaco_store } from "../main/modals/Monaco.store";
+  import { monaco_store } from "../main/modals/monaco.store";
   import { monaco_elementtype } from "../lib/CustomMonaco";
 
   import { monaco_editor } from "$lib/CustomMonaco";
@@ -133,7 +133,7 @@
 
   function open_monaco() {
     console.log(config);
-    $monaco_store = { config: config.makeCopy(), index: index };
+    monaco_store.set({ config: config, index: index });
     $monaco_elementtype = access_tree.elementtype;
     modal.show({
       component: Monaco,
diff --git a/src/renderer/lib/_utils.js b/src/renderer/lib/_utils.js
deleted file mode 100644
index 025657cd3..000000000
--- a/src/renderer/lib/_utils.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export class Grid {
-  static round(num) {
-    return Math.round((num + Number.EPSILON) * 100) / 100;
-  }
-}
diff --git a/src/renderer/main/modals/Monaco.store.js b/src/renderer/main/modals/Monaco.store.js
deleted file mode 100644
index c320627fd..000000000
--- a/src/renderer/main/modals/Monaco.store.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import { writable } from "svelte/store";
-export const monaco_store = writable({});
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 2f0d73422..ae7810f1b 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -1,8 +1,17 @@
-<script>
+<script lang="ts">
+  import { Grid } from "./../../lib/_utils.ts";
+  import {
+    GridElement,
+    GridEvent,
+    GridPage,
+    GridModule,
+    GridAction,
+  } from "./../../runtime/runtime.ts";
+  import { ConfigObject } from "./../panels/configuration/Configuration.store.js";
   import { watchResize } from "svelte-watch-resize";
   import { MoltenInput, MoltenPushButton } from "@intechstudio/grid-uikit";
   import { onDestroy, onMount } from "svelte";
-  import { grid } from "@intechstudio/grid-protocol";
+  import { grid, NumberToEventType } from "@intechstudio/grid-protocol";
   import { modal } from "./modal.store";
   import MoltenModal from "./MoltenModal.svelte";
 
@@ -10,7 +19,7 @@
 
   import { monaco_editor } from "../../lib/CustomMonaco";
   import { committed_code_store } from "../../config-blocks/Committed_Code.store";
-  import { monaco_store } from "./Monaco.store";
+  import { monaco_store } from "./monaco.store";
 
   import { beforeUpdate, afterUpdate } from "svelte";
 
@@ -36,6 +45,7 @@
   let editedConfig = undefined;
   let editedList = undefined;
   let scriptLength = undefined;
+  let pathSnippets = [];
 
   class LengthError extends String {}
 
@@ -45,6 +55,29 @@
     editor?.updateOptions({ fontSize: fontSize });
   }
 
+  $: handleConfigChange($monaco_store.config);
+
+  function handleConfigChange(config: ConfigObject) {
+    const action = config.runtimeRef as GridAction;
+    const event = config.runtimeRef.parent as GridEvent;
+    const element = event.parent as GridElement;
+    const page = element.parent as GridPage;
+    const module = page.parent as GridModule;
+    console.log(
+      event.config.filter((e) => e.short === "cb"),
+      action
+    );
+    pathSnippets = [
+      `${module.type} (${module.dx},${module.dy})`,
+      `Page ${page.pageNumber + 1}`,
+      `Element ${element.elementIndex} (${Grid.toFirstCase(element.type)})`,
+      `${Grid.toFirstCase(NumberToEventType(event.type))} event`,
+      event.config
+        .filter((e) => e.short === "cb")
+        .findIndex((e) => e.isEqual(action)),
+    ];
+  }
+
   onMount(() => {
     //Make local copies
     editedList = $configManager.makeCopy();
@@ -270,8 +303,18 @@
 
     <div
       id="monaco-container"
-      class="{$$props.class} flex h-full w-full bg-black bg-opacity-20 border border-black"
+      class="{$$props.class} flex flex-col h-full w-full bg-black bg-opacity-20 border border-black"
     >
+      <div
+        class="flex flex-row gap-1 items-center flex-wrap bg-black bg-opacity-30 px-2 py-1 text-sm font-mono"
+      >
+        {#each pathSnippets as snippet, i}
+          <span class="text-white text-opacity-85">{snippet}</span>
+          {#if i < pathSnippets.length - 1}
+            <div class="fill-orange-700">/</div>
+          {/if}
+        {/each}
+      </div>
       <div bind:this={monaco_block} class="flex w-full h-full" />
     </div>
 
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 074b2f7bb..87a8f2066 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -28,10 +28,12 @@ import {
   logger,
   user_input,
 } from "./runtime.store";
+import { v4 as uuidv4 } from "uuid";
 
 abstract class RuntimeNode<T> implements Writable<T> {
   protected _internal: Writable<T>;
   private _parent: RuntimeNode<any>;
+  private _id: string;
 
   subscribe(
     run: Subscriber<T>,
@@ -53,12 +55,17 @@ abstract class RuntimeNode<T> implements Writable<T> {
   constructor(parent: RuntimeNode<any>, value?: T) {
     this._parent = parent;
     this._internal = writable(value);
+    this._id = uuidv4();
   }
 
   get parent(): RuntimeNode<any> {
     return this._parent;
   }
 
+  get id() {
+    return this._id;
+  }
+
   protected notify() {
     this._internal.update((s) => s);
     this.notifyParent();

From 5d07161c8ff5c8c86fa735000f9099110b4469c5 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 6 Sep 2024 18:23:00 +0200
Subject: [PATCH 05/42] Missing files

---
 src/renderer/lib/_utils.ts               | 5 +++++
 src/renderer/main/modals/monaco.store.ts | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 src/renderer/lib/_utils.ts
 create mode 100644 src/renderer/main/modals/monaco.store.ts

diff --git a/src/renderer/lib/_utils.ts b/src/renderer/lib/_utils.ts
new file mode 100644
index 000000000..2c6c15f76
--- /dev/null
+++ b/src/renderer/lib/_utils.ts
@@ -0,0 +1,5 @@
+export class Grid {
+  static toFirstCase(value: string) {
+    return value[0].toUpperCase() + value.slice(1, value.length);
+  }
+}
diff --git a/src/renderer/main/modals/monaco.store.ts b/src/renderer/main/modals/monaco.store.ts
new file mode 100644
index 000000000..6fa8cb93d
--- /dev/null
+++ b/src/renderer/main/modals/monaco.store.ts
@@ -0,0 +1,5 @@
+import { writable, type Writable } from "svelte/store";
+import { ConfigObject } from "../panels/configuration/Configuration.store";
+
+export const monaco_store: Writable<{ config: ConfigObject; index: number }> =
+  writable();

From e744bd15cf1878a4df81f28830368078f501b545 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Mon, 9 Sep 2024 19:37:47 +0200
Subject: [PATCH 06/42] Initial solution

---
 src/renderer/config-blocks/CodeBlock.svelte   |   1 -
 src/renderer/config-blocks/GamePadAxis.svelte |   2 +-
 .../config-blocks/GamePadButton.svelte        |   2 +-
 src/renderer/config-blocks/LedColor.svelte    |   2 +-
 src/renderer/config-blocks/LedPhase.svelte    |   2 +-
 src/renderer/config-blocks/MidiNRPN.svelte    |   2 +-
 .../headers/RegularActionBlockFace.svelte     |   8 +-
 .../overlays/PresetLoadOverlay.svelte         |   2 +-
 .../underlays/ActiveChanges.svelte            |   2 +-
 src/renderer/main/modals/Monaco.svelte        |  81 ++++---
 ...ration.store.js => Configuration.store.ts} | 215 +++++++++---------
 .../panels/configuration/Configuration.svelte |   5 +-
 .../panels/configuration/EventPanel.svelte    |   2 +-
 .../components/ActionPicker.svelte            |   4 +
 .../components/DynamicWrapper.svelte          |  23 +-
 .../configuration/configuration-actions.ts    | 100 +++++---
 .../panels/preferences/Preferences.svelte     |   2 +-
 .../panels/profileCloud/ProfileCloud.svelte   |   2 +-
 .../main/user-interface/ActiveChanges.svelte  |   2 +-
 src/renderer/runtime/runtime.ts               |  72 ++++--
 20 files changed, 309 insertions(+), 222 deletions(-)
 rename src/renderer/main/panels/configuration/{Configuration.store.js => Configuration.store.ts} (77%)

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 6b90fc073..fb20698ba 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -132,7 +132,6 @@
   }
 
   function open_monaco() {
-    console.log(config);
     monaco_store.set({ config: config, index: index });
     $monaco_elementtype = access_tree.elementtype;
     modal.show({
diff --git a/src/renderer/config-blocks/GamePadAxis.svelte b/src/renderer/config-blocks/GamePadAxis.svelte
index 7a35ddaff..25bba99a2 100644
--- a/src/renderer/config-blocks/GamePadAxis.svelte
+++ b/src/renderer/config-blocks/GamePadAxis.svelte
@@ -60,7 +60,7 @@
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store.js";
+  import { configManager } from "../main/panels/configuration/Configuration.store";
 
   import { Validator } from "./_validators.js";
 
diff --git a/src/renderer/config-blocks/GamePadButton.svelte b/src/renderer/config-blocks/GamePadButton.svelte
index 14c8126b5..086d12461 100644
--- a/src/renderer/config-blocks/GamePadButton.svelte
+++ b/src/renderer/config-blocks/GamePadButton.svelte
@@ -56,7 +56,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store.js";
+  import { configManager } from "../main/panels/configuration/Configuration.store";
   import { Script } from "./_script_parsers.js";
   import { Validator } from "./_validators.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
diff --git a/src/renderer/config-blocks/LedColor.svelte b/src/renderer/config-blocks/LedColor.svelte
index 5f604b200..f77643907 100644
--- a/src/renderer/config-blocks/LedColor.svelte
+++ b/src/renderer/config-blocks/LedColor.svelte
@@ -54,7 +54,7 @@ A -> B : AB-First step
   import { configManager } from "../main/panels/configuration/Configuration.store";
   import Toggle from "../main/user-interface/Toggle.svelte";
   import { get } from "svelte/store";
-  import { ConfigTarget } from "./../main/panels/configuration/Configuration.store.js";
+  import { ConfigTarget } from "./../main/panels/configuration/Configuration.store";
   import { ElementType } from "@intechstudio/grid-protocol";
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
   import { Validator } from "./_validators";
diff --git a/src/renderer/config-blocks/LedPhase.svelte b/src/renderer/config-blocks/LedPhase.svelte
index 1c4c316a9..fbcb11866 100644
--- a/src/renderer/config-blocks/LedPhase.svelte
+++ b/src/renderer/config-blocks/LedPhase.svelte
@@ -58,7 +58,7 @@
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { configManager } from "../main/panels/configuration/Configuration.store";
   import { get } from "svelte/store";
-  import { ConfigTarget } from "./../main/panels/configuration/Configuration.store.js";
+  import { ConfigTarget } from "./../main/panels/configuration/Configuration.store";
   import { ElementType } from "@intechstudio/grid-protocol";
 
   export let config;
diff --git a/src/renderer/config-blocks/MidiNRPN.svelte b/src/renderer/config-blocks/MidiNRPN.svelte
index 7bfc27b0e..a174b2732 100644
--- a/src/renderer/config-blocks/MidiNRPN.svelte
+++ b/src/renderer/config-blocks/MidiNRPN.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput, MeltCheckbox } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store.js";
+  import { configManager } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators.js";
diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index 855b2b66a..00087833b 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -60,11 +60,9 @@
     }
   }
 
-  $: if (typeof $committed_code_store !== "undefined") {
-    if ($committed_code_store.index == index) {
-      sendData($committed_code_store.name);
-      name = $committed_code_store.name;
-    }
+  $: if ($committed_code_store?.config.id === config.id) {
+    sendData($committed_code_store.name);
+    name = $committed_code_store.name;
   }
 
   let name: string;
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
index 1709ac086..2fa7bcc18 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { grid } from "@intechstudio/grid-protocol";
-  import { ConfigTarget } from "./../../../panels/configuration/Configuration.store.js";
+  import { ConfigTarget } from "./../../../panels/configuration/Configuration.store";
   import { user_input } from "./../../../../runtime/runtime.store";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
   import { createEventDispatcher, onMount } from "svelte";
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
index 91c816b4b..4b23ee72d 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ConfigTarget } from "./../../../panels/configuration/Configuration.store.js";
+  import { ConfigTarget } from "./../../../panels/configuration/Configuration.store";
   import { user_input } from "../../../../runtime/runtime.store";
   import { createEventDispatcher } from "svelte";
   import { get } from "svelte/store";
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index ae7810f1b..5f480632a 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { Grid } from "./../../lib/_utils.ts";
+  import { runtime } from "./../../runtime/runtime.store";
+  import { Grid } from "./../../lib/_utils";
   import {
     GridElement,
     GridEvent,
     GridPage,
     GridModule,
     GridAction,
-  } from "./../../runtime/runtime.ts";
-  import { ConfigObject } from "./../panels/configuration/Configuration.store.js";
+  } from "./../../runtime/runtime";
+  import { ConfigObject } from "./../panels/configuration/Configuration.store";
   import { watchResize } from "svelte-watch-resize";
   import { MoltenInput, MoltenPushButton } from "@intechstudio/grid-uikit";
   import { onDestroy, onMount } from "svelte";
@@ -38,12 +39,11 @@
   let commitEnabled = false;
   let unsavedChanges = false;
   let errorMesssage = "";
+  let commitedCode = "";
 
   let scrollDown;
   let autoscroll;
 
-  let editedConfig = undefined;
-  let editedList = undefined;
   let scriptLength = undefined;
   let pathSnippets = [];
 
@@ -55,44 +55,46 @@
     editor?.updateOptions({ fontSize: fontSize });
   }
 
-  $: handleConfigChange($monaco_store.config);
+  $: if ($runtime) {
+    handleConfigChange($monaco_store.config);
+  }
 
   function handleConfigChange(config: ConfigObject) {
     const action = config.runtimeRef as GridAction;
-    const event = config.runtimeRef.parent as GridEvent;
-    const element = event.parent as GridElement;
-    const page = element.parent as GridPage;
-    const module = page.parent as GridModule;
-    console.log(
-      event.config.filter((e) => e.short === "cb"),
-      action
-    );
-    pathSnippets = [
-      `${module.type} (${module.dx},${module.dy})`,
-      `Page ${page.pageNumber + 1}`,
-      `Element ${element.elementIndex} (${Grid.toFirstCase(element.type)})`,
-      `${Grid.toFirstCase(NumberToEventType(event.type))} event`,
-      event.config
-        .filter((e) => e.short === "cb")
-        .findIndex((e) => e.isEqual(action)),
-    ];
+
+    if (typeof action.parent !== "undefined") {
+      const event = config.runtimeRef.parent as GridEvent;
+      const element = event.parent as GridElement;
+      const page = element.parent as GridPage;
+      const module = page.parent as GridModule;
+
+      pathSnippets = [
+        `${module.type} (${module.dx},${module.dy})`,
+        `Page ${page.pageNumber + 1}`,
+        `Element ${element.elementIndex} (${Grid.toFirstCase(element.type)})`,
+        `${Grid.toFirstCase(NumberToEventType(event.type))} event`,
+        typeof action.name !== "undefined"
+          ? action.name
+          : `Block #${event.config.findIndex((e) => e === action) + 1}`,
+      ];
+    } else {
+      pathSnippets = ["Deleted Code Block"];
+    }
   }
 
   onMount(() => {
-    //Make local copies
-    editedList = $configManager.makeCopy();
-    editedConfig = editedList[$monaco_store.index];
-
     name =
-      typeof editedConfig.name !== "undefined"
-        ? editedConfig.name
-        : editedConfig.information.displayName;
+      typeof $monaco_store.config.name !== "undefined"
+        ? $monaco_store.config.name
+        : $monaco_store.config.information.displayName;
+
+    commitedCode = $monaco_store.config.script;
 
     //To be displayed in Editor
-    const code_preview = GridScript.expandScript(editedConfig.script);
+    const code_preview = GridScript.expandScript($monaco_store.config.script);
 
     //Set initial code length
-    scriptLength = editedList.toConfigScript().length;
+    scriptLength = $configManager.toConfigScript().length;
 
     //Creating and configuring the editor
     editor = monaco_editor.create(monaco_block, {
@@ -106,7 +108,7 @@
       renderLineHighlight: "none",
 
       contextmenu: false,
-      scrollBeyondLastLine: 0,
+      scrollBeyondLastLine: false,
       automaticLayout: true,
       wordWrap: "on",
       suggest: {
@@ -124,10 +126,10 @@
 
       try {
         //Throws error on syntax error
-        editedConfig.script = GridScript.compressScript(editor_code);
+        $monaco_store.config.script = GridScript.compressScript(editor_code);
 
         //Calculate length (this already includes the new value of referenceConfig)
-        scriptLength = editedList.toConfigScript().length;
+        scriptLength = $configManager.toConfigScript().length;
 
         //Check the minified config length
         if (scriptLength >= grid.getProperty("CONFIG_LENGTH")) {
@@ -172,6 +174,8 @@
         index: $monaco_store.index,
       };
 
+      commitedCode = minifiedCode;
+
       commitEnabled = false;
       unsavedChanges = false;
       errorMesssage = "";
@@ -187,6 +191,9 @@
   });
 
   function handleClose(e) {
+    if (commitedCode !== $monaco_store.config.script) {
+      $monaco_store.config.script = commitedCode;
+    }
     modal.close();
   }
 
@@ -219,12 +226,12 @@
   }
 
   function handleNameChange(value) {
-    if (value != editedConfig?.name) {
+    if (value != $monaco_store.config?.name) {
       commitEnabled = true;
     }
   }
 
-  $: if (name && name !== editedConfig.information.displayName) {
+  $: if (name && name !== $monaco_store.config.information.displayName) {
     handleNameChange(name);
   }
 
diff --git a/src/renderer/main/panels/configuration/Configuration.store.js b/src/renderer/main/panels/configuration/Configuration.store.ts
similarity index 77%
rename from src/renderer/main/panels/configuration/Configuration.store.js
rename to src/renderer/main/panels/configuration/Configuration.store.ts
index 6d52b4418..24e76ba40 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.js
+++ b/src/renderer/main/panels/configuration/Configuration.store.ts
@@ -1,11 +1,15 @@
-import { get, writable } from "svelte/store";
+import { get, writable, type Writable } from "svelte/store";
 
 import {
   runtime,
   user_input,
   getDeviceName,
 } from "../../../runtime/runtime.store";
-import { NumberToEventType } from "@intechstudio/grid-protocol";
+import {
+  ElementType,
+  EventType,
+  NumberToEventType,
+} from "@intechstudio/grid-protocol";
 
 import {
   getComponentInformation,
@@ -13,8 +17,10 @@ import {
 } from "../../../lib/_configs";
 
 import { grid, GridScript } from "@intechstudio/grid-protocol";
-import { v4 as uuidv4 } from "uuid";
 import * as ButtonStepElseIf from "../../../config-blocks/ButtonStep_ElseIf.svelte";
+import { GridAction, GridEvent } from "../../../runtime/runtime";
+import { ActionBlockInformation } from "../../../config-blocks/ActionBlockInformation";
+import { SvelteComponent } from "svelte";
 
 export let lastOpenedActionblocks = writable([]);
 
@@ -38,12 +44,26 @@ export function lastOpenedActionblocksRemove(short) {
 }
 
 export class ConfigObject {
+  private _short: string;
+  private _script: string;
+  private _name: undefined | string;
+  public runtimeRef: GridAction;
+  public id: string;
+
+  public information: ActionBlockInformation;
+  public indentation: number;
+  public step: number;
+  public header: SvelteComponent;
+  public component: SvelteComponent;
+  public selected: boolean;
+  public toggled: boolean;
+
   constructor({ short, script, name = undefined, runtimeRef }) {
-    this.short = short;
-    this.script = script;
-    this.name = name;
+    this._short = short;
+    this._script = script;
+    this._name = name;
     this.runtimeRef = runtimeRef;
-    this.id = uuidv4();
+    this.id = runtimeRef?.id;
 
     let res = getComponentInformation({ short: short });
 
@@ -61,72 +81,52 @@ export class ConfigObject {
     this.toggled = false;
   }
 
-  toRawLua() {
-    return `--[[@${this.short}${
-      typeof this.name !== "undefined" &&
-      this.name !== this.information.displayName
-        ? "#" + this.name
-        : ""
-    }]] ${this.script}`;
+  get short(): string {
+    return this._short;
   }
 
-  makeCopy() {
-    const copy = new ConfigObject({
-      short: this.short,
-      name: this.name,
-      script: this.script,
-      runtimeRef: this.runtimeRef,
-    });
-    copy.information = this.information;
-    copy.component = this.component;
-    copy.selected = this.selected;
-    copy.toggled = this.toggled;
-    copy.id = uuidv4();
-
-    // Copy any additional properties that were added later
-    for (const prop in this) {
-      if (this.hasOwnProperty(prop) && !copy.hasOwnProperty(prop)) {
-        copy[prop] = this[prop];
-      }
-    }
+  set short(value: string) {
+    this.runtimeRef.short = value;
+    this._short = value;
+  }
 
-    return copy;
+  get script(): string {
+    return this._script;
   }
 
-  //Returns true if syntax is OK
-  checkSyntax() {
-    const code =
-      this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
-    return GridScript.checkSyntax(code);
+  set script(value: string) {
+    this.runtimeRef.script = value;
+    this._script = value;
   }
 
-  getSyntaxError() {
-    try {
-      formatText(code);
-      return "OK";
-    } catch (e) {
-      return e;
-    }
+  get name(): undefined | string {
+    return this._name;
   }
-}
 
-export class ConfigList extends Array {
-  makeCopy() {
-    const copy = new ConfigList();
-    for (const config of this) {
-      copy.push(config.makeCopy());
-    }
+  set name(value: undefined | string) {
+    this.runtimeRef.name = value;
+    this._name = value;
+  }
 
-    // Copy any additional properties that were added later
-    for (const prop in this) {
-      if (this.hasOwnProperty(prop) && !copy.hasOwnProperty(prop)) {
-        copy[prop] = this[prop];
-      }
-    }
+  toRawLua() {
+    return `--[[@${this._short}${
+      typeof this._name !== "undefined" &&
+      this._name !== this.information.displayName
+        ? "#" + this._name
+        : ""
+    }]] ${this._script}`;
+  }
 
-    return copy;
+  //Returns true if syntax is OK
+  checkSyntax() {
+    const code =
+      this.information.syntaxPreprocessor?.generate(this._script) ??
+      this._script;
+    return GridScript.checkSyntax(code);
   }
+}
 
+export class ConfigList extends Array {
   static updateStep(list) {
     let stack = [];
     for (const config of list) {
@@ -143,7 +143,7 @@ export class ConfigList extends Array {
         config.step = step;
         config.script = ButtonStepElseIf.information.defaultLua.replace(
           "N",
-          step
+          String(step)
         );
       }
     }
@@ -185,18 +185,17 @@ export class ConfigList extends Array {
 
   static createFromActions(actions) {
     const config = new ConfigList();
-    config.#Init(actions);
+    config.init(actions);
     return config;
   }
 
-  sendTo({ target }) {
+  sendTo({ target }): Promise<string> {
     return new Promise((resolve, reject) => {
-      try {
-        this.checkLength();
-      } catch (e) {
-        reject(e);
+      const res = this.checkLength();
+      if (!res.value) {
+        reject(res.detail);
+        return;
       }
-      const actionString = this.toConfigScript();
 
       runtime
         .fetchOrLoadConfig({
@@ -213,7 +212,7 @@ export class ConfigList extends Array {
             target.page,
             target.element,
             target.eventType,
-            actionString
+            this.map((e) => e.runtimeRef)
           );
 
           runtime.send_event_configuration_to_grid(
@@ -230,7 +229,7 @@ export class ConfigList extends Array {
     });
   }
 
-  #Init(actions) {
+  private init(actions) {
     for (const action of actions) {
       const obj = new ConfigObject({
         short: action.short,
@@ -267,35 +266,41 @@ export class ConfigList extends Array {
     return true;
   }
 
-  //Throws error if limit is reached
+  //Returns error if limit is reached
   checkLength() {
     const script = this.toConfigScript();
     const length = script.length;
     if (length >= grid.getProperty("CONFIG_LENGTH")) {
       const target = ConfigTarget.getCurrent();
-      throw {
-        type: "lengthError",
-        device: getDeviceName(target.device.dx, target.device.dy),
-        x: target.device.dx,
-        y: target.device.dy,
-        element: { no: target.element },
-        event: {
-          no: target.eventType,
-          type: NumberToEventType(target.eventType),
+      return {
+        value: false,
+        detail: {
+          type: "lengthError",
+          device: getDeviceName(target.device.dx, target.device.dy),
+          x: target.device.dx,
+          y: target.device.dy,
+          element: { no: target.element },
+          event: {
+            no: target.eventType,
+            type: NumberToEventType(target.eventType),
+          },
+          length: length,
         },
-        length: length,
       };
+    } else {
+      return { value: true, detail: undefined };
     }
   }
 }
 
 export class ConfigTarget {
-  device = { dx: undefined, dy: undefined };
-  page = undefined;
-  element = undefined;
-  eventType = undefined;
-  events = undefined;
-  elementType = undefined;
+  public device: { dx: number; dy: number };
+  public page: number;
+  public element: number;
+  public eventType: number;
+  public events: GridEvent[];
+  public elementType: ElementType;
+  public runtimeRef: GridEvent;
 
   static create({ device: { dx: dx, dy: dy }, page, element, eventType }) {
     const device = runtime.modules.find((e) => e.dx == dx && e.dy == dy);
@@ -317,6 +322,9 @@ export class ConfigTarget {
         .control_elements.find((e) => e.elementIndex == element);
       target.events = controlElement.events;
       target.elementType = controlElement.type;
+      target.runtimeRef = target.events.find(
+        (e) => e.type === target.eventType
+      );
       return target;
     } catch (e) {
       console.warn(`Device was destroyed at (${dx},${dy})!`);
@@ -345,10 +353,6 @@ export class ConfigTarget {
     return currentTarget;
   }
 
-  watch() {
-    return new ConfigTargetWatcher(this);
-  }
-
   hasChanges() {
     for (const event of this.events) {
       if (event.hasChanges()) {
@@ -409,20 +413,18 @@ export class ConfigTarget {
   }
 }
 
-//TODO: Format this out when changing to TS
-/**
- * @type {import("svelte/store").Writable<ConfigList> & {
- *   update: (params: any) => void;
- *   set: (value: any) => void;
- *   unsubscribe: () => void;
- *   loadPreset: (any) => Promise<void>;
- *   loadProfile: (any) => Promise<void>;
- *   refresh: () => void;
- * }}
- */
+type ConfigManager = Writable<ConfigList> & {
+  update: (params: any) => void;
+  set: (value: any) => void;
+  unsubscribe: () => void;
+  loadPreset: (params: any) => Promise<void>;
+  loadProfile: (params: any) => Promise<void>;
+  refresh: () => void;
+};
+
 export const configManager = create_configuration_manager();
 
-function create_configuration_manager() {
+function create_configuration_manager(): ConfigManager {
   const internal = writable(new ConfigList());
   let unsubscribeUserInput;
   const loadAndInit = async () => {
@@ -455,7 +457,7 @@ function create_configuration_manager() {
     });
   }
 
-  function loadPreset({ x, y, element, preset }) {
+  function loadPreset({ x, y, element, preset }): Promise<void> {
     return new Promise((resolve, reject) => {
       const ui = get(user_input);
       const { dx, dy, page, elementNumber } = {
@@ -483,7 +485,7 @@ function create_configuration_manager() {
     });
   }
 
-  function loadProfile({ x, y, profile }) {
+  function loadProfile({ x, y, profile }): Promise<void> {
     return new Promise((resolve, reject) => {
       const ui = get(user_input);
       runtime
@@ -525,7 +527,7 @@ function create_configuration_manager() {
     internal.set(obj);
   }
 
-  async function refresh() {
+  async function refresh(): Promise<void> {
     return new Promise((resolve, reject) => {
       const current = ConfigTarget.getCurrent();
       ConfigList.createFromTarget(current)
@@ -543,7 +545,6 @@ function create_configuration_manager() {
     set: setOverride,
     unsubscribe: () => {
       unsubscribeUserInput();
-      internal.unsubscribe();
     },
     loadPreset: loadPreset,
     loadProfile: loadProfile,
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index f4996ce13..8f9a076f4 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -19,7 +19,7 @@
     ConfigTarget,
     configManager,
     lastOpenedActionblocksInsert,
-  } from "./Configuration.store.js";
+  } from "./Configuration.store";
 
   import { configListScrollSize } from "../../_actions/boundaries.action";
 
@@ -197,7 +197,8 @@
 
   function handleConfigInsertion(e) {
     let { index, configs } = e.detail;
-    insertAction(index, configs);
+    const parent = ConfigTarget.getCurrent();
+    insertAction(index, configs, parent.runtimeRef);
     sendCurrentConfigurationToGrid();
   }
 
diff --git a/src/renderer/main/panels/configuration/EventPanel.svelte b/src/renderer/main/panels/configuration/EventPanel.svelte
index 759332cdb..69c6fd2f3 100644
--- a/src/renderer/main/panels/configuration/EventPanel.svelte
+++ b/src/renderer/main/panels/configuration/EventPanel.svelte
@@ -3,7 +3,7 @@
   import { runtime, user_input } from "../../../runtime/runtime.store";
 
   import { get } from "svelte/store";
-  import { ConfigTarget } from "./Configuration.store.js";
+  import { ConfigTarget } from "./Configuration.store";
   import { MeltRadio } from "@intechstudio/grid-uikit";
   import { GridEvent } from "../../../runtime/runtime";
 
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index 30847f171..e9318d95a 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -301,6 +301,8 @@
       new ConfigObject({
         short: component.information.short,
         script: defaultScript,
+        runtimeRef: undefined,
+        name: undefined,
       }),
     ];
 
@@ -313,6 +315,8 @@
           new ConfigObject({
             short: obj.short,
             script: obj.script,
+            runtimeRef: undefined,
+            name: undefined,
           })
         );
       }
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 6bd1e15a9..6b6e4bee2 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { GridAction } from "./../../../../runtime/runtime.ts";
   import { getAllComponents } from "../../../../lib/_configs";
 
   import { createEventDispatcher, onMount } from "svelte";
@@ -39,16 +40,21 @@
   function replace_me(e) {
     const { short, script, name } = e.detail;
 
-    const components = getAllComponents();
-    const new_config = components.find((e) => e.information.short === short);
+    const new_config = getAllComponents().find(
+      (e) => e.information.short === short
+    );
+
+    const configScript = script ?? new_config.information.defaultLua;
 
     const obj = new ConfigObject({
       short: new_config.information.short,
-      script:
-        typeof script === "undefined"
-          ? new_config.information.defaultLua
-          : script,
+      script: configScript,
       name: name,
+      runtimeRef: new GridAction(config.runtimeRef.parent, {
+        short: new_config.information.short,
+        script: configScript,
+        name: name,
+      }),
     });
 
     dispatch("replace", {
@@ -66,6 +72,11 @@
         short: short,
         script: script,
         name: name,
+        runtimeRef: new GridAction(config.runtimeRef.parent, {
+          short,
+          script,
+          name,
+        }),
       }),
     });
   }
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 917a7bb6f..5c8126941 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -14,7 +14,12 @@ import {
 } from "@intechstudio/grid-protocol";
 import { Writable, derived, get } from "svelte/store";
 import { ClipboardKey, appClipboard } from "../../../runtime/clipboard.store";
-import { createActionsFromString } from "../../../runtime/runtime";
+import {
+  ActionData,
+  createActionsFromString,
+  GridAction,
+  GridEvent,
+} from "../../../runtime/runtime";
 
 function handleError(e: any) {
   switch (e.type) {
@@ -175,7 +180,7 @@ export async function overwriteElement({ dx, dy, page, element }) {
   });
 }
 
-export async function discardElement({ dx, dy, page, element }) {
+export async function discardElement({ dx, dy, page, element }): Promise<void> {
   logger.set({
     type: "progress",
     mode: 0,
@@ -194,7 +199,7 @@ export async function discardElement({ dx, dy, page, element }) {
     return Promise.reject();
   }
 
-  const promises: Promise<void>[] = [];
+  const promises: Promise<string>[] = [];
   for (const event of current.events ?? ([] as any[])) {
     const stored = event.stored;
     if (!stored) continue;
@@ -256,23 +261,35 @@ export function selectAction(index: number, value: boolean) {
 
 export function insertAction(
   index: number | undefined,
-  configs: ConfigObject[]
+  configs: ConfigObject[],
+  parent: GridEvent
 ) {
   if (typeof index === "undefined") {
     index = get(configManager).length;
   }
 
-  try {
-    configManager.update((s) => {
-      const list = s.makeCopy();
-      list.insert(index, ...configs);
-      list.checkLength();
-      return list;
+  configManager.update((s) => {
+    const value = configs.map((e) => {
+      const node = new GridAction(parent, {
+        short: e.short,
+        script: e.script,
+        name: e.name,
+      });
+      e.runtimeRef = node;
+      e.id = node.id;
+      return e;
     });
-  } catch (e) {
-    console.warn(e);
-    handleError(e);
-  }
+    s.insert(index, ...value);
+    const res = s.checkLength();
+    if (!res.value) {
+      for (let i = 0; i < value.length; ++i) {
+        s.remove(index);
+      }
+      console.warn(res.detail);
+      handleError(res.detail);
+    }
+    return s;
+  });
 }
 
 export function updateAction(index: number, newConfig: ConfigObject) {
@@ -326,22 +343,34 @@ export function mergeActionToCode(index: number, configs: ConfigObject[]) {
   const codeBlock = new ConfigObject({
     short: "cb",
     script: script,
-    runtimeRef: configs[0].runtimeRef,
+    runtimeRef: new GridAction(configs[0].runtimeRef.parent as GridEvent, {
+      short: "cb",
+      script: script,
+      name: undefined,
+    }),
   });
 
   configManager.update((s: ConfigList) => {
     //Insert CodeBlock into position
     s.insert(index, codeBlock);
     // Remove selected action blocks
-    s = s.filter((config) => !config.selected);
+    s = s.filter((config) => !config.selected) as ConfigList;
     return s;
   });
 }
 
 export function copyActions() {
-  const clipboard: ConfigObject[] = get(configManager)
-    .makeCopy()
-    .filter((e) => e.selected);
+  const clipboard = get(configManager)
+    .filter((e) => e.selected)
+    .map((e) => {
+      e.runtimeRef.parent = undefined;
+      return new ConfigObject({
+        short: e.short,
+        script: e.script,
+        name: e.name,
+        runtimeRef: e.runtimeRef,
+      });
+    });
   appClipboard.set({
     key: ClipboardKey.ACTION_BLOCKS,
     payload: clipboard,
@@ -359,20 +388,21 @@ export function pasteActions(index: number | undefined) {
     throw `Paste: Invalid clipboard type ${clipboard?.key}`;
   }
 
-  try {
-    configManager.update((s) => {
-      const temp = s.makeCopy();
-      temp.forEach((e) => (e.selected = false));
-      temp.insert(
-        index,
-        ...get(appClipboard)!.payload.map((e) => e.makeCopy())
-      );
-      temp.checkLength();
-      return temp;
-    });
-  } catch (e) {
-    return Promise.reject(e);
-  }
+  configManager.update((s) => {
+    const value = get(appClipboard)!.payload;
+    s.forEach((e) => (e.selected = false));
+    s.insert(index, ...value);
+    const res = s.checkLength();
+    if (!res.value) {
+      for (let i = 0; i < value.length; ++i) {
+        s.remove(index);
+      }
+      Promise.reject(res.detail);
+      return;
+    }
+
+    return s;
+  });
   return Promise.resolve();
 }
 
@@ -392,7 +422,7 @@ export function clearElement(
   dy: number,
   pageNumber: number,
   elementNumber: number
-) {
+): Promise<void> {
   const device: any = runtime.modules.find(
     (e: any) => e.dx === dx && e.dy === dy
   );
@@ -418,7 +448,7 @@ export function clearElement(
     eventType: EventTypeToNumber(EventType.SETUP),
   });
 
-  const promises: Promise<void>[] = [];
+  const promises: Promise<string>[] = [];
   for (const e of current!.events ?? ([] as any[])) {
     const eventtype = e.type;
     const target = ConfigTarget.create({
diff --git a/src/renderer/main/panels/preferences/Preferences.svelte b/src/renderer/main/panels/preferences/Preferences.svelte
index e727ce319..36f2e0958 100644
--- a/src/renderer/main/panels/preferences/Preferences.svelte
+++ b/src/renderer/main/panels/preferences/Preferences.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { configManager } from "./../configuration/Configuration.store.js";
+  import { configManager } from "./../configuration/Configuration.store";
   import { logger } from "./../../../runtime/runtime.store";
   import { get } from "svelte/store";
   import { instructions } from "../../../serialport/instructions";
diff --git a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
index 11bed1cb1..ce51fcdda 100644
--- a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
+++ b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { ConfigTarget } from "./../configuration/Configuration.store.js";
+  import { ConfigTarget } from "./../configuration/Configuration.store";
   import { onDestroy, onMount } from "svelte";
   import { v4 as uuidv4 } from "uuid";
   import { appSettings } from "../../../runtime/app-helper.store";
diff --git a/src/renderer/main/user-interface/ActiveChanges.svelte b/src/renderer/main/user-interface/ActiveChanges.svelte
index e4c4c6978..41bef41a3 100644
--- a/src/renderer/main/user-interface/ActiveChanges.svelte
+++ b/src/renderer/main/user-interface/ActiveChanges.svelte
@@ -4,7 +4,7 @@
   import { logger } from "./../../runtime/runtime.store";
   import { appSettings } from "../../runtime/app-helper.store";
   import { writeBuffer } from "../../runtime/engine.store.ts";
-  import { configManager } from "./../panels/configuration/Configuration.store.js";
+  import { configManager } from "./../panels/configuration/Configuration.store";
   import { runtime, user_input } from "../../runtime/runtime.store";
   import { moduleOverlay } from "../../runtime/moduleOverlay";
   import { Analytics } from "../../runtime/analytics.js";
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 87a8f2066..14ef2e224 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -58,10 +58,18 @@ abstract class RuntimeNode<T> implements Writable<T> {
     this._id = uuidv4();
   }
 
+  get data() {
+    return get(this._internal);
+  }
+
   get parent(): RuntimeNode<any> {
     return this._parent;
   }
 
+  set parent(value: RuntimeNode<any>) {
+    this._parent = value;
+  }
+
   get id() {
     return this._id;
   }
@@ -171,15 +179,15 @@ export class GridEvent extends RuntimeNode<EventData> {
   }
 
   // Setters
-  set config(value: Array<GridAction>) {
+  private set config(value: Array<GridAction>) {
     this.setField("config", value);
   }
 
-  set stored(value: Array<GridAction>) {
+  private set stored(value: Array<GridAction>) {
     this.setField("stored", value);
   }
 
-  set type(value: number) {
+  private set type(value: number) {
     this.setField("type", value);
   }
 
@@ -260,15 +268,15 @@ export class GridElement extends RuntimeNode<ElementData> {
   }
 
   // Setters
-  set elementIndex(value: number) {
+  private set elementIndex(value: number) {
     this.setField("elementIndex", value);
   }
 
-  set events(value: Array<GridEvent>) {
+  private set events(value: Array<GridEvent>) {
     this.setField("events", value);
   }
 
-  set name(value: string) {
+  private set name(value: string) {
     this.setField("name", value);
   }
 
@@ -312,11 +320,11 @@ export class GridPage extends RuntimeNode<PageData> {
   }
 
   // Setters
-  set pageNumber(value: number) {
+  private set pageNumber(value: number) {
     this.setField("pageNumber", value);
   }
 
-  set control_elements(value: Array<GridElement>) {
+  private set control_elements(value: Array<GridElement>) {
     this.setField("control_elements", value);
   }
 }
@@ -482,17 +490,24 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     this.setField("modules", value);
   }
 
-  findUpdateDestEvent(_runtime, dx, dy, page, element, event) {
+  findUpdateDestEvent(
+    modules: GridModule[],
+    dx: number,
+    dy: number,
+    page: number,
+    element: number,
+    event: number
+  ) {
     let _event = undefined;
     // this elementnumber check refers to uninitialized UI...
     if (element !== -1) {
-      _runtime.forEach((device) => {
-        if (device.dx == dx && device.dy == dy) {
-          const pageIndex = device.pages.findIndex((x) => x.pageNumber == page);
-          const elementIndex = device.pages[
+      modules.forEach((module) => {
+        if (module.dx == dx && module.dy == dy) {
+          const pageIndex = module.pages.findIndex((x) => x.pageNumber == page);
+          const elementIndex = module.pages[
             pageIndex
           ].control_elements.findIndex((x) => x.elementIndex == element);
-          _event = device.pages[pageIndex].control_elements[
+          _event = module.pages[pageIndex].control_elements[
             elementIndex
           ].events.find((e) => e.type == event);
         }
@@ -523,7 +538,20 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
             const page = descr.class_parameters.PAGENUMBER;
             const element = descr.class_parameters.ELEMENTNUMBER;
             const event = descr.class_parameters.EVENTTYPE;
-            const actionstring = descr.class_parameters.ACTIONSTRING;
+
+            let dest = this.findUpdateDestEvent(
+              this.modules,
+              dx,
+              dy,
+              page,
+              element,
+              event
+            );
+
+            const actions = createActionsFromString(
+              dest,
+              descr.class_parameters.ACTIONSTRING
+            );
 
             this.update_event_configuration(
               dx,
@@ -531,7 +559,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
               page,
               element,
               event,
-              actionstring
+              actions
             );
 
             resolve();
@@ -796,7 +824,14 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  update_event_configuration(dx, dy, page, element, event, actionString) {
+  update_event_configuration(
+    dx: number,
+    dy: number,
+    page: number,
+    element: number,
+    event: number,
+    actions: GridAction[]
+  ) {
     // config
 
     let dest = this.findUpdateDestEvent(
@@ -808,7 +843,8 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
       event
     );
     if (dest) {
-      dest.config = createActionsFromString(dest, actionString);
+      actions.forEach((e) => (e.parent = dest));
+      dest.config = actions;
 
       if (typeof dest.stored === "undefined") {
         dest.store(dest.config);

From 00f90913faff11f86a3a7d1fe396c78e89e3e395 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 10 Sep 2024 17:08:35 +0200
Subject: [PATCH 07/42] Fixed bug of unnecessary runtime update

---
 src/renderer/config-blocks/ElementName.svelte |  3 +-
 .../overlays/ControlNameOverlay.svelte        | 33 ++-----
 .../ElementSelectionPanel.svelte              | 86 ++++++++-----------
 .../configuration/configuration-actions.ts    |  1 +
 src/renderer/runtime/moduleOverlay.ts         |  2 +-
 src/renderer/runtime/runtime.store.ts         | 48 ++++-------
 src/renderer/runtime/runtime.ts               | 73 ++++++----------
 .../serialport/message-stream.store.js        |  4 +-
 8 files changed, 93 insertions(+), 157 deletions(-)

diff --git a/src/renderer/config-blocks/ElementName.svelte b/src/renderer/config-blocks/ElementName.svelte
index 59dbadbb9..9b46736f7 100644
--- a/src/renderer/config-blocks/ElementName.svelte
+++ b/src/renderer/config-blocks/ElementName.svelte
@@ -43,6 +43,7 @@
   let scriptValue = ""; // local script part
 
   $: if (config.script && !loaded) {
+    console.log(config.script);
     const matches = config.script.match(/'([^']*)'/);
     scriptValue = matches[1];
     loaded = true;
@@ -57,7 +58,7 @@
   });
 
   function sendData(e) {
-    dispatch("output", { short: "sn", script: `self:gen("${e}")` });
+    dispatch("output", { short: "sn", script: `self:gen('${e}')` });
   }
 
   const validator = (e) => {
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte
index 54ba3029c..ac55dfbca 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/ControlNameOverlay.svelte
@@ -1,40 +1,25 @@
-<script>
+<script lang="ts">
+  import { GridModule, GridElement } from "./../../../../runtime/runtime";
   import { appSettings } from "../../../../runtime/app-helper.store.js";
-  import { elementNameStore } from "../../../../runtime/runtime.store";
 
   export let visible = false;
   export let elementNumber = undefined;
-  export let device = undefined;
+  export let device: GridModule = undefined;
 
-  let elementSettings;
-
-  $: {
-    elementSettings = device?.pages[0].control_elements;
-  }
-
-  $: {
-    try {
-      let dx = device?.dx;
-      let dy = device?.dy;
-
-      const obj = $elementNameStore[dx][dy];
-
-      Object.keys(obj).forEach((key) => {
-        elementSettings[key].name = obj[key];
-      });
-    } catch (error) {}
-  }
+  const element: GridElement = device?.pages[0].control_elements.find(
+    (e) => e.elementIndex === elementNumber
+  );
 </script>
 
 {#if visible && elementNumber !== 255}
   <container class="pointer-events-auto">
-    <div class="flex w-full h-full items-center p-1 bg-overlay">
+    <div class="flex w-full h-full items-center text-center p-1 bg-overlay">
       <p
-        class="max-w-md mx-auto md:break-words md:whitespace-normal truncate text-white"
+        class="max-w-md mx-auto break-words whitespace-normal truncate text-white"
         style="transform: rotate({-$appSettings.persistent.moduleRotation +
           device?.rot * 90}deg);"
       >
-        {elementSettings[elementNumber]?.name}
+        {typeof $element.name === "undefined" ? "" : $element.name}
       </p>
     </div>
   </container>
diff --git a/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte b/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
index 7ab1b1661..90f58a808 100644
--- a/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
+++ b/src/renderer/main/panels/configuration/ElementSelectionPanel.svelte
@@ -1,38 +1,24 @@
-<script>
+<script lang="ts">
   import { get } from "svelte/store";
   import { MeltSelect } from "@intechstudio/grid-uikit";
   import Toggle from "../../user-interface/Toggle.svelte";
-  import { moduleOverlay } from "../../../runtime/moduleOverlay";
-  import TooltipQuestion from "../../user-interface/tooltip/TooltipQuestion.svelte";
   import {
-    elementNameStore,
-    user_input,
-    runtime,
-  } from "../../../runtime/runtime.store";
+    ModuleOverlayType,
+    moduleOverlay,
+  } from "../../../runtime/moduleOverlay";
+  import TooltipQuestion from "../../user-interface/tooltip/TooltipQuestion.svelte";
+  import { user_input, runtime } from "../../../runtime/runtime.store";
+  import { GridPage, PageData } from "../../../runtime/runtime";
 
   function showControlElementNameOverlay() {
-    const show = get(moduleOverlay) !== "control-name-overlay";
+    const show = get(moduleOverlay) !== ModuleOverlayType.CONTROL_NAME;
     if (show) {
-      moduleOverlay.show("control-name-overlay");
+      moduleOverlay.show(ModuleOverlayType.CONTROL_NAME);
     } else {
       moduleOverlay.close();
     }
   }
 
-  function getElementName(value) {
-    try {
-      const { dx, dy } = $user_input;
-      const obj = $elementNameStore[dx][dy];
-      if (obj[value] === "") {
-        return undefined;
-      }
-
-      return obj[value];
-    } catch (e) {
-      return undefined;
-    }
-  }
-
   let selectedElementNumber = -1;
   let options = [{ title: "No Device", value: -1 }];
 
@@ -53,51 +39,47 @@
     });
   }
 
-  $: {
-    if ($user_input || $elementNameStore) {
-      renderElementList();
-    }
-  }
+  $: handleUserInputChange($user_input);
 
-  function renderElementList() {
-    const ui = $user_input;
-    const device = runtime.modules.find(
-      (device) => device.dx === ui.dx && device.dy === ui.dy
-    );
-    if (typeof device === "undefined") {
+  let page: GridPage;
+
+  $: handlePageChange($page);
+
+  function handlePageChange(page: PageData) {
+    if (typeof page === "undefined") {
       options = [{ title: "No Device", value: -1 }];
       selectedElementNumber = -1;
       return;
     }
-    const control_elements = device.pages.find(
-      (page) => page.pageNumber === ui.pagenumber
-    )?.control_elements;
-    options = control_elements.map((element) => {
-      const stringName = getElementName(element.elementIndex);
+
+    const elements = page.control_elements;
+    options = elements.map((e) => {
+      const stringName = e.name;
       if (typeof stringName !== "undefined") {
         return {
           title:
             stringName +
-            ` (${
-              element.type[0].toUpperCase() +
-              element.type.slice(1).toLowerCase()
-            })`,
-          value: element.elementIndex,
+            ` (${e.type[0].toUpperCase() + e.type.slice(1).toLowerCase()})`,
+          value: e.elementIndex,
         };
       } else {
         return {
           title: `Element ${
-            element.elementIndex < 255
-              ? element.elementIndex
-              : control_elements.length - 1
-          } (${
-            element.type[0].toUpperCase() + element.type.slice(1).toLowerCase()
-          })`,
-          value: element.elementIndex,
+            e.elementIndex < 255 ? e.elementIndex : elements.length - 1
+          } (${e.type[0].toUpperCase() + e.type.slice(1).toLowerCase()})`,
+          value: e.elementIndex,
         };
       }
     });
-    selectedElementNumber = ui.elementnumber;
+    selectedElementNumber = get(user_input).elementnumber;
+  }
+
+  function handleUserInputChange(ui: any) {
+    const device = runtime.modules.find(
+      (device) => device.dx === ui.dx && device.dy === ui.dy
+    );
+
+    page = device?.pages.find((page) => page.pageNumber === ui.pagenumber);
   }
 </script>
 
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 5c8126941..20f2798ee 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -298,6 +298,7 @@ export function updateAction(index: number, newConfig: ConfigObject) {
   const cm = get(configManager);
   const tempScript = cm[index].script;
   const tempName = cm[index].name;
+
   try {
     configManager.update((s: ConfigList) => {
       const config = s[index];
diff --git a/src/renderer/runtime/moduleOverlay.ts b/src/renderer/runtime/moduleOverlay.ts
index 1fb686853..306ea7597 100644
--- a/src/renderer/runtime/moduleOverlay.ts
+++ b/src/renderer/runtime/moduleOverlay.ts
@@ -1,6 +1,6 @@
 import { writable, Writable } from "svelte/store";
 
-enum ModuleOverlayType {
+export enum ModuleOverlayType {
   CONFIGURATION_LOAD = "configuration-load-overlay",
   CONTROL_NAME = "control-name-overlay",
 }
diff --git a/src/renderer/runtime/runtime.store.ts b/src/renderer/runtime/runtime.store.ts
index 95802cafe..7c9328704 100644
--- a/src/renderer/runtime/runtime.store.ts
+++ b/src/renderer/runtime/runtime.store.ts
@@ -16,7 +16,6 @@ const setIntervalAsync = (fn, ms) => {
 let selection_changed_timestamp = 0;
 
 export const elementPositionStore = writable({});
-export const elementNameStore = writable({});
 export const ledColorStore = writable({});
 
 export function update_elementPositionStore(descr) {
@@ -53,30 +52,22 @@ export function update_elementPositionStore(descr) {
   elementPositionStore.set(eps);
 }
 
-export function update_elementNameStore(descr) {
-  let ens = get(elementNameStore);
-
-  if (ens[descr.brc_parameters.SX] === undefined) {
-    ens[descr.brc_parameters.SX] = {};
-  }
-  if (ens[descr.brc_parameters.SX][descr.brc_parameters.SY] === undefined) {
-    ens[descr.brc_parameters.SX][descr.brc_parameters.SY] = {};
-  }
-  if (
-    ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
-      descr.class_parameters.NUM
-    ] === undefined
-  ) {
-    ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
-      descr.class_parameters.NUM
-    ] = -1;
-  }
-
-  ens[descr.brc_parameters.SX][descr.brc_parameters.SY][
-    descr.class_parameters.NUM
-  ] = descr.class_parameters.NAME;
-
-  elementNameStore.set(ens);
+export function update_element_name(descr) {
+  const [dx, dy, element, name] = [
+    Number(descr.brc_parameters.SX),
+    Number(descr.brc_parameters.SY),
+    Number(descr.class_parameters.NUM),
+    String(descr.class_parameters.NAME),
+  ];
+
+  console.log(dx, dy, element, name);
+  runtime.modules
+    .find((e) => e.dx === dx && e.dy === dy)
+    .pages.forEach(
+      (e) =>
+        (e.control_elements.find((e) => e.elementIndex === element).name =
+          name.length > 0 ? name : undefined)
+    );
 }
 
 export function update_elementPositionStore_fromPreview(descr) {
@@ -371,8 +362,6 @@ function createEngine() {
 
 export const engine = createEngine();
 
-export const heartbeat = writable([]);
-
 const heartbeat_editor_ms = 300;
 const heartbeat_grid_ms = 250;
 
@@ -382,7 +371,7 @@ const grid_heartbeat_interval_handler = async function () {
       return;
     }
 
-    const alive = get(heartbeat).find((e) => e.id == device.id)?.alive;
+    const alive = device.alive;
 
     // Allow less strict elapsedTimeLimit while writeBuffer is busy!
     const elapsedTimeLimit =
@@ -394,9 +383,6 @@ const grid_heartbeat_interval_handler = async function () {
     if (!alive || elapsedTime > elapsedTimeLimit) {
       // TIMEOUT! let's remove the device
       runtime.destroy_module(device.dx, device.dy);
-      heartbeat.update((heartbeat) => {
-        return heartbeat.filter((e) => e.id !== device.id);
-      });
     }
   });
 };
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 14ef2e224..67b95ea0c 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -21,9 +21,7 @@ import { Analytics } from "./analytics.js";
 import { appSettings } from "./app-helper.store";
 import { add_datapoint } from "../serialport/message-stream.store.js";
 import {
-  elementNameStore,
   elementPositionStore,
-  heartbeat,
   ledColorStore,
   logger,
   user_input,
@@ -35,19 +33,19 @@ abstract class RuntimeNode<T> implements Writable<T> {
   private _parent: RuntimeNode<any>;
   private _id: string;
 
-  subscribe(
+  public subscribe(
     run: Subscriber<T>,
     invalidate?: (value?: T) => void
   ): Unsubscriber {
     return this._internal.subscribe(run, invalidate);
   }
 
-  set(value: T) {
+  public set(value: T) {
     this._internal.set(value);
     this.notifyParent();
   }
 
-  update(updater: Updater<T>) {
+  public update(updater: Updater<T>) {
     this._internal.update(updater);
     this.notifyParent();
   }
@@ -229,7 +227,7 @@ export class GridEvent extends RuntimeNode<EventData> {
 export type ElementData = {
   elementIndex: number;
   events?: Array<GridEvent>;
-  name: string;
+  name: string | undefined;
   type: ElementType;
 };
 
@@ -276,7 +274,7 @@ export class GridElement extends RuntimeNode<ElementData> {
     this.setField("events", value);
   }
 
-  private set name(value: string) {
+  set name(value: string) {
     this.setField("name", value);
   }
 
@@ -304,7 +302,7 @@ export class GridPage extends RuntimeNode<PageData> {
         new GridElement(this, {
           elementIndex: Number(index),
           type: element,
-          name: "",
+          name: undefined,
         })
       );
     }
@@ -424,7 +422,8 @@ export class GridModule extends RuntimeNode<ModuleData> {
 
   // Setters
   set alive(value: number) {
-    this.setField("alive", value);
+    get(this._internal).alive = value;
+    //this.setField("alive", value);
   }
 
   set architecture(value: Architecture) {
@@ -611,47 +610,36 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
           this.destroy_module(module.dx, module.dy);
         }
       }
-      const controller = this.create_module(
-        descr.brc_parameters,
-        descr.class_parameters,
-        false
-      );
+
+      const [sx, sy] = [descr.brc_parameters.SX, descr.brc_parameters.SY];
 
       let firstConnection = false;
-      const module = this.modules.find((device) => device.id == controller.id);
+      const module = this.modules.find((e) => e.dx == sx && e.dy == sy);
       if (module) {
-        if (module.rot != controller.rot) {
-          module.rot = controller.rot;
+        if (module.rot != descr.brc_parameters.ROT) {
+          module.rot = descr.brc_parameters.ROT;
         }
 
-        if (module.portstate != controller.portstate) {
-          module.portstate = controller.portstate;
+        if (module.portstate != descr.class_parameters.PORTSTATE) {
+          module.portstate = descr.class_parameters.PORTSTATE;
         }
 
-        const lastDate = get(heartbeat).find(
-          (device) => device.id == controller.id
-        )?.alive;
-        if (lastDate) {
-          let newDate = Date.now();
-
-          heartbeat.update((store) => {
-            const device = store.find((device) => device.id == controller.id);
-            if (device) {
-              device.alive = newDate;
-            }
-            return store;
-          });
+        const lastDate = module.alive;
+        const newDate = Date.now();
+        module.alive = newDate;
 
-          //console.log(newDate - lastDate)
-          if (get(appSettings).persistent.heartbeatDebugEnabled) {
-            const key1 = `Hearbeat (${controller.dx}, ${controller.dy})`;
-
-            add_datapoint(key1, newDate - lastDate);
-          }
+        if (get(appSettings).persistent.heartbeatDebugEnabled) {
+          const key1 = `Hearbeat (${module.dx}, ${module.dy})`;
+          add_datapoint(key1, newDate - lastDate);
         }
       }
       // device not found, add it to runtime and get page count from grid
       else {
+        const controller = this.create_module(
+          descr.brc_parameters,
+          descr.class_parameters,
+          false
+        );
         // check if the firmware version of the newly connected device is acceptable
         console.log("Incoming Device");
         console.log("Architecture", controller.architecture);
@@ -674,9 +662,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
         );
 
         this.modules = [...this.modules, controller];
-        heartbeat.update((devices) => {
-          return [...devices, { id: controller.id, alive: Date.now() }];
-        });
+        controller.alive = Date.now();
 
         firstConnection = this.modules.length === 1;
 
@@ -1059,11 +1045,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
         return eps;
       });
 
-      elementNameStore.update((ens) => {
-        ens[dx][dy] = undefined;
-        return ens;
-      });
-
       ledColorStore.update((lcs) => {
         lcs[dx][dy] = undefined;
         return lcs;
diff --git a/src/renderer/serialport/message-stream.store.js b/src/renderer/serialport/message-stream.store.js
index 5e0d4b288..3988ab4d3 100644
--- a/src/renderer/serialport/message-stream.store.js
+++ b/src/renderer/serialport/message-stream.store.js
@@ -6,7 +6,7 @@ import {
   runtime,
   user_input,
   wss_send_message,
-  update_elementNameStore,
+  update_element_name,
   update_elementPositionStore,
   update_elementPositionStore_fromPreview,
   update_ledColorStore,
@@ -183,7 +183,7 @@ function createMessageStream() {
         class_descr.class_name === "ELEMENTNAME" &&
         class_descr.class_instr === "EXECUTE"
       ) {
-        update_elementNameStore(class_descr);
+        update_element_name(class_descr);
       }
 
       if (

From 1bcc1ff2f47bf2163d272e342de4dbb5cf0c739c Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Wed, 11 Sep 2024 15:33:28 +0200
Subject: [PATCH 08/42] Daily push

---
 src/renderer/config-blocks/CodeBlock.svelte   |   9 +-
 .../underlays/ActiveChanges.svelte            |   1 +
 src/renderer/main/modals/Monaco.svelte        | 101 ++++++++++--------
 src/renderer/main/modals/modal.store.ts       |   7 +-
 src/renderer/main/modals/monaco.store.ts      |   5 +-
 .../panels/configuration/EventPanel.svelte    |   8 +-
 .../configuration/configuration-actions.ts    |  18 +++-
 src/renderer/runtime/runtime.store.ts         |   1 -
 src/renderer/runtime/runtime.ts               |  62 ++++++-----
 9 files changed, 124 insertions(+), 88 deletions(-)

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index fb20698ba..6026546a0 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -42,7 +42,7 @@
 <script>
   import { GridScript } from "@intechstudio/grid-protocol";
 
-  import { createEventDispatcher, onMount, onDestroy } from "svelte";
+  import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
 
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
 
@@ -55,6 +55,7 @@
   import { committed_code_store } from "./Committed_Code.store";
   import { modal } from "../main/modals/modal.store";
   import Monaco from "../main/modals/Monaco.svelte";
+  import { get } from "svelte/store";
 
   const dispatch = createEventDispatcher();
 
@@ -131,7 +132,11 @@
     }
   }
 
-  function open_monaco() {
+  async function open_monaco() {
+    if (config.runtimeRef.id !== get(monaco_store)?.config.runtimeRef.id) {
+      modal.close();
+      await tick();
+    }
     monaco_store.set({ config: config, index: index });
     $monaco_elementtype = access_tree.elementtype;
     modal.show({
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
index 4b23ee72d..9535441a7 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
@@ -17,6 +17,7 @@
   $: handleDeviceChange(device);
 
   function handleDeviceChange(obj) {
+    console.log(obj);
     const { dx, dy } = obj;
     const ui = get(user_input);
 
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 5f480632a..29bcb5176 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { runtime } from "./../../runtime/runtime.store";
   import { Grid } from "./../../lib/_utils";
   import {
     GridElement,
@@ -7,11 +6,11 @@
     GridPage,
     GridModule,
     GridAction,
+    ActionData,
   } from "./../../runtime/runtime";
-  import { ConfigObject } from "./../panels/configuration/Configuration.store";
   import { watchResize } from "svelte-watch-resize";
   import { MoltenInput, MoltenPushButton } from "@intechstudio/grid-uikit";
-  import { onDestroy, onMount } from "svelte";
+  import { onDestroy } from "svelte";
   import { grid, NumberToEventType } from "@intechstudio/grid-protocol";
   import { modal } from "./modal.store";
   import MoltenModal from "./MoltenModal.svelte";
@@ -20,9 +19,9 @@
 
   import { monaco_editor } from "../../lib/CustomMonaco";
   import { committed_code_store } from "../../config-blocks/Committed_Code.store";
-  import { monaco_store } from "./monaco.store";
+  import { monaco_store, type MonacoValue } from "./monaco.store";
 
-  import { beforeUpdate, afterUpdate } from "svelte";
+  import { beforeUpdate, afterUpdate, onMount } from "svelte";
 
   import { GridScript } from "@intechstudio/grid-protocol";
   import { configManager } from "../panels/configuration/Configuration.store";
@@ -37,7 +36,6 @@
   let editor;
 
   let commitEnabled = false;
-  let unsavedChanges = false;
   let errorMesssage = "";
   let commitedCode = "";
 
@@ -46,6 +44,7 @@
 
   let scriptLength = undefined;
   let pathSnippets = [];
+  let editedAction: GridAction;
 
   class LengthError extends String {}
 
@@ -55,43 +54,49 @@
     editor?.updateOptions({ fontSize: fontSize });
   }
 
-  $: if ($runtime) {
-    handleConfigChange($monaco_store.config);
+  $: if ($editedAction) {
+    handleConfigChange($editedAction);
   }
 
-  function handleConfigChange(config: ConfigObject) {
-    const action = config.runtimeRef as GridAction;
-
-    if (typeof action.parent !== "undefined") {
-      const event = config.runtimeRef.parent as GridEvent;
-      const element = event.parent as GridElement;
-      const page = element.parent as GridPage;
-      const module = page.parent as GridModule;
-
-      pathSnippets = [
-        `${module.type} (${module.dx},${module.dy})`,
-        `Page ${page.pageNumber + 1}`,
-        `Element ${element.elementIndex} (${Grid.toFirstCase(element.type)})`,
-        `${Grid.toFirstCase(NumberToEventType(event.type))} event`,
-        typeof action.name !== "undefined"
-          ? action.name
-          : `Block #${event.config.findIndex((e) => e === action) + 1}`,
-      ];
-    } else {
+  function isDeleted(action: ActionData) {
+    const event = action?.parent as GridEvent;
+    return typeof event === "undefined";
+  }
+
+  function handleConfigChange(action: ActionData) {
+    if (isDeleted(action)) {
       pathSnippets = ["Deleted Code Block"];
+      return;
     }
+
+    const event = action.parent as GridEvent;
+    const element = event.parent as GridElement;
+    const page = element.parent as GridPage;
+    const module = page.parent as GridModule;
+
+    pathSnippets = [
+      `${module.type} (${module.dx},${module.dy})`,
+      `Page ${page.pageNumber + 1}`,
+      `Element ${element.elementIndex} (${Grid.toFirstCase(element.type)})`,
+      `${Grid.toFirstCase(NumberToEventType(event.type))} event`,
+      typeof action.name !== "undefined"
+        ? action.name
+        : `Block #${event.config.findIndex((e) => e.id === action.id) + 1}`,
+    ];
   }
 
   onMount(() => {
+    const store = $monaco_store;
+    editedAction = store.config.runtimeRef;
     name =
-      typeof $monaco_store.config.name !== "undefined"
-        ? $monaco_store.config.name
-        : $monaco_store.config.information.displayName;
+      typeof store.config.name !== "undefined"
+        ? store.config.name
+        : store.config.information.displayName;
 
-    commitedCode = $monaco_store.config.script;
+    commitedCode = store.config.script;
 
     //To be displayed in Editor
-    const code_preview = GridScript.expandScript($monaco_store.config.script);
+    const code_preview = GridScript.expandScript(store.config.script);
 
     //Set initial code length
     scriptLength = $configManager.toConfigScript().length;
@@ -122,7 +127,6 @@
 
     editor.onDidChangeModelContent(() => {
       const editor_code = editor.getValue();
-      unsavedChanges = true;
 
       try {
         //Throws error on syntax error
@@ -138,7 +142,7 @@
 
         //Everything is ok if no error was thrown previously
         errorMesssage = "";
-        commitEnabled = true;
+        commitEnabled = $monaco_store.config.script !== commitedCode;
 
         //Syntax or Length Error
       } catch (e) {
@@ -177,7 +181,6 @@
       commitedCode = minifiedCode;
 
       commitEnabled = false;
-      unsavedChanges = false;
       errorMesssage = "";
     } catch (e) {
       console.warn(e);
@@ -271,7 +274,7 @@
           </button>
         </div>
         <div class="opacity-70">
-          <span
+          <span class:invisible={isDeleted($editedAction)}
             >{`Character Count: ${
               typeof scriptLength === "undefined" ? "?" : scriptLength
             }/${grid.getProperty("CONFIG_LENGTH") - 1} (max)`}</span
@@ -283,22 +286,26 @@
         class="flex flex-row flex-grow flex-wrap justify-end items-center h-full gap-2"
       >
         <div class="flex flex-col">
-          <div
-            class="text-right text-sm {unsavedChanges
-              ? 'text-yellow-600'
-              : 'text-green-500'} "
-          >
-            {unsavedChanges ? "Unsaved changes!" : "Synced with Grid!"}
-          </div>
-          <div class="text-right text-sm text-error">
-            {errorMesssage}
-          </div>
+          {#if isDeleted($editedAction)}
+            <div class="text-right text-sm text-white">Deleted Action</div>
+          {:else}
+            <div
+              class="text-right text-sm {commitEnabled
+                ? 'text-yellow-600'
+                : 'text-green-500'} "
+            >
+              {commitEnabled ? "Unsaved changes!" : "Synced with Grid!"}
+            </div>
+            <div class="text-right text-sm text-error">
+              {errorMesssage}
+            </div>
+          {/if}
         </div>
 
         <div class="flex flex-row flex-wrap gap-2 justify-end">
           <MoltenPushButton
             click={handleCommit}
-            disabled={!commitEnabled}
+            disabled={!commitEnabled || isDeleted(editedAction)}
             text="Commit"
             style="accept"
           />
diff --git a/src/renderer/main/modals/modal.store.ts b/src/renderer/main/modals/modal.store.ts
index 052770fa5..b9f1ba80b 100644
--- a/src/renderer/main/modals/modal.store.ts
+++ b/src/renderer/main/modals/modal.store.ts
@@ -28,6 +28,10 @@ const defaultOptions: ModalOptions = {
 function createModalStore() {
   const store = writable<ModalStoreValue | undefined>(undefined);
 
+  function close(): void {
+    store.set(undefined);
+  }
+
   function show({
     component,
     options = defaultOptions,
@@ -43,9 +47,6 @@ function createModalStore() {
       args: args,
     } as ModalStoreValue);
   }
-  function close(): void {
-    store.set(undefined);
-  }
 
   return {
     subscribe: store.subscribe,
diff --git a/src/renderer/main/modals/monaco.store.ts b/src/renderer/main/modals/monaco.store.ts
index 6fa8cb93d..224ed3764 100644
--- a/src/renderer/main/modals/monaco.store.ts
+++ b/src/renderer/main/modals/monaco.store.ts
@@ -1,5 +1,6 @@
 import { writable, type Writable } from "svelte/store";
 import { ConfigObject } from "../panels/configuration/Configuration.store";
 
-export const monaco_store: Writable<{ config: ConfigObject; index: number }> =
-  writable();
+export type MonacoValue = { config: ConfigObject; index: number } | undefined;
+
+export const monaco_store: Writable<MonacoValue> = writable();
diff --git a/src/renderer/main/panels/configuration/EventPanel.svelte b/src/renderer/main/panels/configuration/EventPanel.svelte
index 69c6fd2f3..3c4f62032 100644
--- a/src/renderer/main/panels/configuration/EventPanel.svelte
+++ b/src/renderer/main/panels/configuration/EventPanel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Grid } from "./../../../lib/_utils.ts";
   import { NumberToEventType } from "@intechstudio/grid-protocol";
   import { runtime, user_input } from "../../../runtime/runtime.store";
 
@@ -12,7 +13,7 @@
     value: number;
   };
   const defaultOptions: EventPanelOption[] = Array.from(Array(3).keys()).map(
-    (i) => ({ title: "", value: i } as EventPanelOption)
+    (i) => ({ title: undefined, value: i } as EventPanelOption)
   );
 
   const defaultSelected = -1;
@@ -33,7 +34,10 @@
     }
 
     options = target.events.map((e: GridEvent) =>
-      Object({ title: NumberToEventType(e.type), value: e.type })
+      Object({
+        title: Grid.toFirstCase(NumberToEventType(e.type)),
+        value: e.type,
+      })
     );
 
     selected = options.find((e) => e.value === target.eventType).value;
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 20f2798ee..d72616613 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -364,12 +364,15 @@ export function copyActions() {
   const clipboard = get(configManager)
     .filter((e) => e.selected)
     .map((e) => {
-      e.runtimeRef.parent = undefined;
       return new ConfigObject({
         short: e.short,
         script: e.script,
         name: e.name,
-        runtimeRef: e.runtimeRef,
+        runtimeRef: new GridAction(undefined, {
+          short: e.short,
+          script: e.script,
+          name: e.name,
+        }),
       });
     });
   appClipboard.set({
@@ -408,9 +411,14 @@ export function pasteActions(index: number | undefined) {
 }
 
 export function removeActions() {
-  configManager.update((s: ConfigList) =>
-    s.filter((config) => !config.selected)
-  );
+  configManager.update((s: ConfigList) => {
+    s.forEach((config) => {
+      if (config.selected) {
+        config.runtimeRef.parent = undefined;
+      }
+    });
+    return s.filter((config) => !config.selected);
+  });
 }
 
 export function cutActions() {
diff --git a/src/renderer/runtime/runtime.store.ts b/src/renderer/runtime/runtime.store.ts
index 7c9328704..a54f47d28 100644
--- a/src/renderer/runtime/runtime.store.ts
+++ b/src/renderer/runtime/runtime.store.ts
@@ -60,7 +60,6 @@ export function update_element_name(descr) {
     String(descr.class_parameters.NAME),
   ];
 
-  console.log(dx, dy, element, name);
   runtime.modules
     .find((e) => e.dx === dx && e.dy === dy)
     .pages.forEach(
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 67b95ea0c..96eabca45 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -28,10 +28,14 @@ import {
 } from "./runtime.store";
 import { v4 as uuidv4 } from "uuid";
 
-abstract class RuntimeNode<T> implements Writable<T> {
+type UUID = string;
+interface NodeData {
+  id?: UUID;
+  parent?: RuntimeNode<any>;
+}
+
+abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
   protected _internal: Writable<T>;
-  private _parent: RuntimeNode<any>;
-  private _id: string;
 
   public subscribe(
     run: Subscriber<T>,
@@ -51,9 +55,10 @@ abstract class RuntimeNode<T> implements Writable<T> {
   }
 
   constructor(parent: RuntimeNode<any>, value?: T) {
-    this._parent = parent;
+    value.parent = parent;
+    value.id = uuidv4();
+
     this._internal = writable(value);
-    this._id = uuidv4();
   }
 
   get data() {
@@ -61,28 +66,31 @@ abstract class RuntimeNode<T> implements Writable<T> {
   }
 
   get parent(): RuntimeNode<any> {
-    return this._parent;
+    return this.getField("parent");
   }
 
   set parent(value: RuntimeNode<any>) {
-    this._parent = value;
+    this.setField("parent", value);
   }
 
   get id() {
-    return this._id;
+    return this.getField("id");
   }
 
   protected notify() {
     this._internal.update((s) => s);
+    console.log("NOTIFIED", this.data);
     this.notifyParent();
   }
 
   protected notifyParent() {
-    if (!this._parent) {
+    console.log("NOTIFY PARENT");
+    if (!this.parent) {
+      console.log("NO PARENT");
       return;
     }
 
-    this._parent.notify();
+    this.parent.notify();
   }
 
   // Generalized getter
@@ -101,11 +109,11 @@ abstract class RuntimeNode<T> implements Writable<T> {
   }
 }
 
-export type ActionData = {
+export interface ActionData extends NodeData {
   short: string;
   script: string;
   name: string;
-};
+}
 
 export class GridAction extends RuntimeNode<ActionData> {
   constructor(parent: GridEvent, data?: ActionData) {
@@ -152,11 +160,11 @@ export class GridAction extends RuntimeNode<ActionData> {
   }
 }
 
-export type EventData = {
+export interface EventData extends NodeData {
   config?: Array<GridAction> | undefined;
   stored?: Array<GridAction> | undefined;
   type: number;
-};
+}
 
 export class GridEvent extends RuntimeNode<EventData> {
   constructor(parent: GridElement, data?: EventData) {
@@ -203,11 +211,14 @@ export class GridEvent extends RuntimeNode<EventData> {
       return true;
     }
 
+    //console.log(this.config, this.stored);
     for (let i = 0; i < this.config.length; ++i) {
       if (!this.config[i].isEqual(this.stored[i])) {
+        //console.log("no eq");
         return true;
       }
     }
+    //console.log("default");
     return false;
   }
 
@@ -224,12 +235,12 @@ export class GridEvent extends RuntimeNode<EventData> {
   }
 }
 
-export type ElementData = {
+export interface ElementData extends NodeData {
   elementIndex: number;
   events?: Array<GridEvent>;
   name: string | undefined;
   type: ElementType;
-};
+}
 
 export class GridElement extends RuntimeNode<ElementData> {
   constructor(parent: GridPage, data?: ElementData) {
@@ -283,10 +294,10 @@ export class GridElement extends RuntimeNode<ElementData> {
   }
 }
 
-export type PageData = {
+export interface PageData extends NodeData {
   pageNumber: number;
   control_elements?: Array<GridElement>;
-};
+}
 
 export class GridPage extends RuntimeNode<PageData> {
   constructor(parent: GridModule, data?: PageData) {
@@ -345,7 +356,7 @@ type DirectionMap = {
   top: Direction;
 };
 
-export type ModuleData = {
+export interface ModuleData extends NodeData {
   alive: number;
   architecture: Architecture;
   dx: number;
@@ -358,7 +369,7 @@ export type ModuleData = {
   rot: number;
   type: ModuleType;
   pages?: Array<GridPage>;
-};
+}
 
 export class GridModule extends RuntimeNode<ModuleData> {
   constructor(parent: GridRuntime, data?: ModuleData) {
@@ -471,9 +482,9 @@ export class GridModule extends RuntimeNode<ModuleData> {
   }
 }
 
-type RuntimeData = {
+export interface RuntimeData extends NodeData {
   modules: Array<GridModule>;
-};
+}
 
 export class GridRuntime extends RuntimeNode<RuntimeData> {
   constructor() {
@@ -834,6 +845,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
 
       if (typeof dest.stored === "undefined") {
         dest.store(dest.config);
+        console.log(dest.stored, "STORE FIRST");
       }
     }
   }
@@ -1016,12 +1028,10 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
   }
 
   destroy_module(dx, dy) {
+    console.log("DESTORY", dx, dy);
     // remove the destroyed device from runtime
     const removed = this.modules.find((e) => e.dx == dx && e.dy == dy);
-
-    //TODO
-    const index = this.modules.findIndex((e) => e.dx === dx && e.dy === dy);
-    this.modules.splice(index, 1);
+    this.modules = this.modules.filter((e) => e.dx !== dx && e.dy !== dy);
 
     if (this.modules.length === 0) {
       appSettings.update((s) => {

From a43695bddecfc9a8146baf98c1547fc7a084c049 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 12 Sep 2024 14:38:21 +0200
Subject: [PATCH 09/42] Reworked code commit logic, simplified

---
 src/renderer/config-blocks/CodeBlock.svelte   | 12 ------
 .../config-blocks/Committed_Code.store.js     |  3 --
 .../headers/RegularActionBlockFace.svelte     |  8 +---
 src/renderer/main/modals/Monaco.svelte        | 39 +++++++++++--------
 4 files changed, 23 insertions(+), 39 deletions(-)
 delete mode 100644 src/renderer/config-blocks/Committed_Code.store.js

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 6026546a0..744f15948 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -52,7 +52,6 @@
   import { monaco_elementtype } from "../lib/CustomMonaco";
 
   import { monaco_editor } from "$lib/CustomMonaco";
-  import { committed_code_store } from "./Committed_Code.store";
   import { modal } from "../main/modals/modal.store";
   import Monaco from "../main/modals/Monaco.svelte";
   import { get } from "svelte/store";
@@ -121,17 +120,6 @@
     }
   }
 
-  $: if (typeof $committed_code_store !== "undefined") {
-    if ($committed_code_store.index == index) {
-      dispatch("output", {
-        short: "cb",
-        script: $committed_code_store.script,
-        name: $committed_code_store.name,
-      });
-      $committed_code_store = {};
-    }
-  }
-
   async function open_monaco() {
     if (config.runtimeRef.id !== get(monaco_store)?.config.runtimeRef.id) {
       modal.close();
diff --git a/src/renderer/config-blocks/Committed_Code.store.js b/src/renderer/config-blocks/Committed_Code.store.js
deleted file mode 100644
index 483ba5237..000000000
--- a/src/renderer/config-blocks/Committed_Code.store.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { writable } from "svelte/store";
-
-export const committed_code_store = writable(undefined);
diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index 00087833b..c75a63e4c 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { appSettings } from "./../../runtime/app-helper.store.js";
-  import { committed_code_store } from "./../Committed_Code.store.js";
-  import { ConfigObject } from "./../../main/panels/configuration/Configuration.store.ts";
+  import { ConfigObject } from "./../../main/panels/configuration/Configuration.store";
   import LineEditor from "./../../main/user-interface/LineEditor.svelte";
   import { createEventDispatcher } from "svelte";
   import { config_drag } from "../../main/_actions/move.action";
@@ -60,11 +59,6 @@
     }
   }
 
-  $: if ($committed_code_store?.config.id === config.id) {
-    sendData($committed_code_store.name);
-    name = $committed_code_store.name;
-  }
-
   let name: string;
   let isEdit = false;
   let nameChange = false;
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 29bcb5176..8045853bd 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -18,13 +18,16 @@
   import { debug_monitor_store } from "../panels/DebugMonitor/DebugMonitor.store";
 
   import { monaco_editor } from "../../lib/CustomMonaco";
-  import { committed_code_store } from "../../config-blocks/Committed_Code.store";
-  import { monaco_store, type MonacoValue } from "./monaco.store";
+  import { monaco_store } from "./monaco.store";
 
   import { beforeUpdate, afterUpdate, onMount } from "svelte";
 
   import { GridScript } from "@intechstudio/grid-protocol";
-  import { configManager } from "../panels/configuration/Configuration.store";
+  import {
+    configManager,
+    ConfigTarget,
+    ConfigList,
+  } from "../panels/configuration/Configuration.store";
   import { appSettings } from "../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { clickOutside } from "../_actions/click-outside.action";
@@ -167,24 +170,26 @@
       scrollDown.scrollTo(0, scrollDown.scrollHeight);
   });
 
-  function handleCommit() {
-    try {
-      const editor_code = editor.getValue();
-      const minifiedCode = GridScript.compressScript(editor_code);
-
-      $committed_code_store = {
-        script: minifiedCode,
-        name: name,
-        index: $monaco_store.index,
-      };
+  async function handleCommit() {
+    const action = $monaco_store.config.runtimeRef;
+    const event = action.parent as GridEvent;
+    const element = event.parent as GridElement;
+    const page = element.parent as GridPage;
+    const module = page.parent as GridModule;
 
-      commitedCode = minifiedCode;
+    const target = ConfigTarget.create({
+      device: { dx: module.dx, dy: module.dy },
+      page: page.pageNumber,
+      element: element.elementIndex,
+      eventType: event.type,
+    });
 
+    ConfigList.createFromTarget(target).then((list: ConfigList) => {
+      list.sendTo({ target });
+      commitedCode = $monaco_store.config.script;
       commitEnabled = false;
       errorMesssage = "";
-    } catch (e) {
-      console.warn(e);
-    }
+    });
   }
 
   onDestroy(() => {

From 2d96f3bff0c20f9b15f5e4f0076cefdb29448578 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 12 Sep 2024 16:37:08 +0200
Subject: [PATCH 10/42] Fixed name change for action blocks

---
 src/renderer/config-blocks/CodeBlock.svelte   | 26 +++---
 .../headers/RegularActionBlockFace.svelte     | 10 ++-
 src/renderer/main/modals/Monaco.svelte        | 81 +++++++++++--------
 3 files changed, 67 insertions(+), 50 deletions(-)

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 744f15948..95e629147 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -39,7 +39,8 @@
   };
 </script>
 
-<script>
+<script lang="ts">
+  import { GridAction } from "./../runtime/runtime";
   import { GridScript } from "@intechstudio/grid-protocol";
 
   import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
@@ -55,14 +56,16 @@
   import { modal } from "../main/modals/modal.store";
   import Monaco from "../main/modals/Monaco.svelte";
   import { get } from "svelte/store";
+  import { ConfigObject } from "../main/panels/configuration/Configuration.store";
 
   const dispatch = createEventDispatcher();
 
-  export let config;
+  export let config: ConfigObject;
   export let access_tree;
-  export let index;
+  export let index: number;
 
-  let codePreview;
+  let action: GridAction;
+  let codePreview: HTMLElement;
 
   const lualogo_foreground = "#808080";
   const lualogo_background = "#212a2c";
@@ -99,7 +102,7 @@
     });
   });
 
-  function displayConfigScript(script) {
+  function displayConfigScript(script: string) {
     codePreview.innerHTML = GridScript.expandScript(script);
     monaco_editor.colorizeElement(codePreview, {
       theme: "my-theme",
@@ -108,20 +111,15 @@
   }
 
   onMount(() => {
-    codePreview.addEventListener("wheel", (evt) => {
-      //evt.preventDefault();
-      //codePreview.scrollLeft += evt.deltaY;
-    });
+    action = config.runtimeRef;
   });
 
-  $: {
-    if (codePreview) {
-      displayConfigScript(config.script);
-    }
+  $: if (typeof $action !== "undefined") {
+    displayConfigScript(config.script);
   }
 
   async function open_monaco() {
-    if (config.runtimeRef.id !== get(monaco_store)?.config.runtimeRef.id) {
+    if (action.id !== get(monaco_store)?.config.runtimeRef.id) {
       modal.close();
       await tick();
     }
diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index c75a63e4c..f59bb55d6 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -6,6 +6,7 @@
   import { config_drag } from "../../main/_actions/move.action";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { onMount } from "svelte";
+  import { GridAction } from "../../runtime/runtime.js";
 
   const dispatch = createEventDispatcher();
 
@@ -13,6 +14,8 @@
   export let config: ConfigObject = undefined;
   export let index;
 
+  let action: GridAction;
+
   function handleClick(e) {
     dispatch("toggle");
   }
@@ -34,9 +37,10 @@
   }
 
   onMount(() => {
+    action = config.runtimeRef;
     name =
-      typeof config.name !== "undefined"
-        ? config.name
+      typeof action.name !== "undefined"
+        ? action.name
         : config.information.displayName;
   });
 
@@ -83,7 +87,7 @@
       <LineEditor {access_tree} value={name} on:change={handleNameChange} />
     </div>
   {:else}
-    <span>{name}</span>
+    <span>{$action?.name}</span>
   {/if}
 
   {#if $appSettings.persistent.editableBlockNames}
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 8045853bd..acebee4a1 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -48,6 +48,7 @@
   let scriptLength = undefined;
   let pathSnippets = [];
   let editedAction: GridAction;
+  let editorCode: string;
 
   class LengthError extends String {}
 
@@ -58,7 +59,7 @@
   }
 
   $: if ($editedAction) {
-    handleConfigChange($editedAction);
+    handleActionChange($editedAction);
   }
 
   function isDeleted(action: ActionData) {
@@ -66,7 +67,7 @@
     return typeof event === "undefined";
   }
 
-  function handleConfigChange(action: ActionData) {
+  function handleActionChange(action: ActionData) {
     if (isDeleted(action)) {
       pathSnippets = ["Deleted Code Block"];
       return;
@@ -77,6 +78,11 @@
     const page = element.parent as GridPage;
     const module = page.parent as GridModule;
 
+    name =
+      typeof action.name !== "undefined"
+        ? action.name
+        : $monaco_store.config.information.displayName;
+
     pathSnippets = [
       `${module.type} (${module.dx},${module.dy})`,
       `Page ${page.pageNumber + 1}`,
@@ -91,12 +97,8 @@
   onMount(() => {
     const store = $monaco_store;
     editedAction = store.config.runtimeRef;
-    name =
-      typeof store.config.name !== "undefined"
-        ? store.config.name
-        : store.config.information.displayName;
-
-    commitedCode = store.config.script;
+    editorCode = store.config.script;
+    commitedCode = editorCode;
 
     //To be displayed in Editor
     const code_preview = GridScript.expandScript(store.config.script);
@@ -128,35 +130,45 @@
       },
     });
 
-    editor.onDidChangeModelContent(() => {
-      const editor_code = editor.getValue();
+    editor.onDidChangeModelContent(handleContentChange);
+  });
 
-      try {
-        //Throws error on syntax error
-        $monaco_store.config.script = GridScript.compressScript(editor_code);
+  function handleContentChange() {
+    if (typeof editor === "undefined") {
+      return;
+    }
 
-        //Calculate length (this already includes the new value of referenceConfig)
-        scriptLength = $configManager.toConfigScript().length;
+    editorCode = editor.getValue();
 
-        //Check the minified config length
-        if (scriptLength >= grid.getProperty("CONFIG_LENGTH")) {
-          throw new LengthError("Config limit reached.");
-        }
+    try {
+      //Throws error on syntax error
+      editorCode = GridScript.compressScript(editorCode);
 
-        //Everything is ok if no error was thrown previously
-        errorMesssage = "";
-        commitEnabled = $monaco_store.config.script !== commitedCode;
+      //Calculate length (this already includes the new value of referenceConfig)
+      scriptLength =
+        $configManager.toConfigScript().length +
+        (name !== $monaco_store.config.information.displayName
+          ? name.length
+          : 0);
 
-        //Syntax or Length Error
-      } catch (e) {
-        if (!(e instanceof LengthError)) {
-          scriptLength = undefined;
-        }
-        commitEnabled = false;
-        errorMesssage = e;
+      //Check the minified config length
+      if (scriptLength >= grid.getProperty("CONFIG_LENGTH")) {
+        throw new LengthError("Config limit reached.");
       }
-    });
-  });
+
+      //Everything is ok if no error was thrown previously
+      errorMesssage = "";
+      commitEnabled = true;
+
+      //Syntax or Length Error
+    } catch (e) {
+      if (!(e instanceof LengthError)) {
+        scriptLength = undefined;
+      }
+      commitEnabled = false;
+      errorMesssage = e;
+    }
+  }
 
   beforeUpdate(() => {
     autoscroll =
@@ -171,6 +183,9 @@
   });
 
   async function handleCommit() {
+    $monaco_store.config.script = editorCode;
+    $monaco_store.config.name = name;
+
     const action = $monaco_store.config.runtimeRef;
     const event = action.parent as GridEvent;
     const element = event.parent as GridElement;
@@ -235,11 +250,11 @@
 
   function handleNameChange(value) {
     if (value != $monaco_store.config?.name) {
-      commitEnabled = true;
+      handleContentChange();
     }
   }
 
-  $: if (name && name !== $monaco_store.config.information.displayName) {
+  $: if (name !== $monaco_store.config.information.displayName) {
     handleNameChange(name);
   }
 

From 5241756e0d1b782781eb70958864c610ab575431 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 12 Sep 2024 16:42:15 +0200
Subject: [PATCH 11/42] Fixed minor name change issue

---
 .../config-blocks/headers/RegularActionBlockFace.svelte     | 6 +++++-
 src/renderer/runtime/runtime.ts                             | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index f59bb55d6..0734aeb80 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -87,7 +87,11 @@
       <LineEditor {access_tree} value={name} on:change={handleNameChange} />
     </div>
   {:else}
-    <span>{$action?.name}</span>
+    <span
+      >{typeof $action?.name === "undefined"
+        ? config.information.displayName
+        : $action.name}</span
+    >
   {/if}
 
   {#if $appSettings.persistent.editableBlockNames}
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index aa5ea84dc..66b66ca79 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -109,7 +109,7 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
 export interface ActionData extends NodeData {
   short: string;
   script: string;
-  name: string;
+  name: string | undefined;
 }
 
 export class GridAction extends RuntimeNode<ActionData> {
@@ -148,6 +148,7 @@ export class GridAction extends RuntimeNode<ActionData> {
     return `--[[@${this.short}${namePostfix}]] ${this.script}`;
   }
 
+  //Refactor this out
   isEqual(other: GridAction) {
     return (
       this.name === other.name &&

From 9df1c662cc73ea25b06481414ae73118607e8106 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 12 Sep 2024 17:46:11 +0200
Subject: [PATCH 12/42] Fixed playwright tests

---
 src/renderer/main/modals/Monaco.svelte        | 50 +++++++++---------
 .../panels/DebugMonitor/DebugMonitor.svelte   |  1 +
 .../configuration/Configuration.store.ts      |  2 +-
 .../panels/configuration/Configuration.svelte |  2 +-
 .../configuration/configuration-actions.ts    | 51 ++++++++++---------
 src/renderer/runtime/runtime.ts               | 14 ++---
 6 files changed, 65 insertions(+), 55 deletions(-)

diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index acebee4a1..6f80f7d38 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -40,7 +40,8 @@
 
   let commitEnabled = false;
   let errorMesssage = "";
-  let commitedCode = "";
+  let commitedCode: string;
+  let commitedName: string | undefined;
 
   let scrollDown;
   let autoscroll;
@@ -50,6 +51,10 @@
   let editedAction: GridAction;
   let editorCode: string;
 
+  let name;
+  let isEditName = false;
+  let nameInput;
+
   class LengthError extends String {}
 
   $: handleFontSizechange($appSettings.persistent.fontSize);
@@ -97,18 +102,14 @@
   onMount(() => {
     const store = $monaco_store;
     editedAction = store.config.runtimeRef;
-    editorCode = store.config.script;
-    commitedCode = editorCode;
-
-    //To be displayed in Editor
-    const code_preview = GridScript.expandScript(store.config.script);
-
-    //Set initial code length
-    scriptLength = $configManager.toConfigScript().length;
+    commitedCode = editedAction.script;
+    commitedName = editedAction.name;
+    scriptLength = (editedAction.parent as GridEvent).toLua().length;
+    console.log((editedAction.parent as GridEvent).toLua());
 
     //Creating and configuring the editor
     editor = monaco_editor.create(monaco_block, {
-      value: code_preview,
+      value: GridScript.expandScript(editedAction.script),
       language: "intech_lua",
       theme: "my-theme",
       fontSize: $appSettings.persistent.fontSize,
@@ -138,18 +139,14 @@
       return;
     }
 
-    editorCode = editor.getValue();
-
     try {
       //Throws error on syntax error
-      editorCode = GridScript.compressScript(editorCode);
+      const compressed = GridScript.compressScript(editor.getValue());
+      editedAction.script = compressed;
+      editedAction.name = name;
 
       //Calculate length (this already includes the new value of referenceConfig)
-      scriptLength =
-        $configManager.toConfigScript().length +
-        (name !== $monaco_store.config.information.displayName
-          ? name.length
-          : 0);
+      scriptLength = (editedAction.parent as GridEvent).toLua().length;
 
       //Check the minified config length
       if (scriptLength >= grid.getProperty("CONFIG_LENGTH")) {
@@ -168,6 +165,9 @@
       commitEnabled = false;
       errorMesssage = e;
     }
+
+    editedAction.script = commitedCode;
+    editedAction.name = commitedName;
   }
 
   beforeUpdate(() => {
@@ -183,7 +183,7 @@
   });
 
   async function handleCommit() {
-    $monaco_store.config.script = editorCode;
+    $monaco_store.config.script = GridScript.compressScript(editor.getValue());
     $monaco_store.config.name = name;
 
     const action = $monaco_store.config.runtimeRef;
@@ -200,8 +200,11 @@
     });
 
     ConfigList.createFromTarget(target).then((list: ConfigList) => {
-      list.sendTo({ target });
+      list.sendTo({ target }).catch((e) => {
+        console.log(e);
+      });
       commitedCode = $monaco_store.config.script;
+      name = $monaco_store.config.name;
       commitEnabled = false;
       errorMesssage = "";
     });
@@ -217,6 +220,9 @@
     if (commitedCode !== $monaco_store.config.script) {
       $monaco_store.config.script = commitedCode;
     }
+    if (commitedName !== $monaco_store.config.name) {
+      $monaco_store.config.name = commitedName;
+    }
     modal.close();
   }
 
@@ -257,10 +263,6 @@
   $: if (name !== $monaco_store.config.information.displayName) {
     handleNameChange(name);
   }
-
-  let name;
-  let isEditName = false;
-  let nameInput;
 </script>
 
 <div id="modal-copy-placeholder" />
diff --git a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
index 3512f1721..464fb44f0 100644
--- a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
+++ b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
@@ -32,6 +32,7 @@
   }
 
   $: {
+    console.log($configManager.toConfigScript());
     configScriptLength.set($configManager.toConfigScript().length);
     syntaxError.set($configManager.checkSyntax());
   }
diff --git a/src/renderer/main/panels/configuration/Configuration.store.ts b/src/renderer/main/panels/configuration/Configuration.store.ts
index 24e76ba40..cd961cb1b 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.ts
+++ b/src/renderer/main/panels/configuration/Configuration.store.ts
@@ -20,7 +20,7 @@ import { grid, GridScript } from "@intechstudio/grid-protocol";
 import * as ButtonStepElseIf from "../../../config-blocks/ButtonStep_ElseIf.svelte";
 import { GridAction, GridEvent } from "../../../runtime/runtime";
 import { ActionBlockInformation } from "../../../config-blocks/ActionBlockInformation";
-import { SvelteComponent } from "svelte";
+import { SvelteComponent, tick } from "svelte";
 
 export let lastOpenedActionblocks = writable([]);
 
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 8f9a076f4..f475fc713 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -436,7 +436,7 @@
                   on:drop-target-change={handleDropTargetChange}
                 />
               {/if}
-              {#each $configManager as config, index (config.id)}
+              {#each $configManager as config, index (config)}
                 <anim-block
                   animate:flip={{ duration: 300, easing: eases.backOut }}
                   in:fade|global={{ delay: 0 }}
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index d72616613..03f3ee7e8 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -15,7 +15,6 @@ import {
 import { Writable, derived, get } from "svelte/store";
 import { ClipboardKey, appClipboard } from "../../../runtime/clipboard.store";
 import {
-  ActionData,
   createActionsFromString,
   GridAction,
   GridEvent,
@@ -305,7 +304,11 @@ export function updateAction(index: number, newConfig: ConfigObject) {
       config.short = short;
       config.script = script;
       config.name = name;
-      s.checkLength();
+      const res = s.checkLength();
+      if (!res.value) {
+        throw "Length error";
+      }
+
       return s;
     });
   } catch (e) {
@@ -381,33 +384,35 @@ export function copyActions() {
   });
 }
 
-export function pasteActions(index: number | undefined) {
-  if (typeof index === "undefined") {
-    index = get(configManager).length;
-  }
+export function pasteActions(index: number | undefined): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (typeof index === "undefined") {
+      index = get(configManager).length;
+    }
 
-  const clipboard = get(appClipboard);
+    const clipboard = get(appClipboard);
 
-  if (clipboard?.key !== ClipboardKey.ACTION_BLOCKS) {
-    throw `Paste: Invalid clipboard type ${clipboard?.key}`;
-  }
+    if (clipboard?.key !== ClipboardKey.ACTION_BLOCKS) {
+      reject(`Paste: Invalid clipboard type ${clipboard?.key}`);
+    }
 
-  configManager.update((s) => {
-    const value = get(appClipboard)!.payload;
-    s.forEach((e) => (e.selected = false));
-    s.insert(index, ...value);
-    const res = s.checkLength();
-    if (!res.value) {
-      for (let i = 0; i < value.length; ++i) {
-        s.remove(index);
+    let error = false;
+    configManager.update((s) => {
+      const value = get(appClipboard)!.payload;
+      s.forEach((e) => (e.selected = false));
+      s.insert(index, ...value);
+      const res = s.checkLength();
+      if (!res.value) {
+        error = true;
+        for (let i = 0; i < value.length; ++i) {
+          s.remove(index);
+        }
       }
-      Promise.reject(res.detail);
-      return;
-    }
 
-    return s;
+      return s;
+    });
+    error ? reject("Paste failed") : resolve();
   });
-  return Promise.resolve();
 }
 
 export function removeActions() {
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 66b66ca79..55746f368 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -14,9 +14,7 @@ import {
 } from "svelte/store";
 import { instructions } from "../serialport/instructions";
 import { writeBuffer } from "./engine.store";
-import { createVirtualModule } from "./virtual-engine";
-import { VirtualModuleHWCFG } from "./virtual-engine";
-import { virtual_runtime } from "./virtual-engine";
+import { createVirtualModule, virtual_runtime } from "./virtual-engine";
 import { Analytics } from "./analytics.js";
 import { appSettings } from "./app-helper.store";
 import { add_datapoint } from "../serialport/message-stream.store.js";
@@ -144,8 +142,9 @@ export class GridAction extends RuntimeNode<ActionData> {
   }
 
   toLua() {
-    const namePostfix = typeof this.name !== "undefined" ? `#${this.name}` : "";
-    return `--[[@${this.short}${namePostfix}]] ${this.script}`;
+    return `--[[@${this.short}${
+      typeof this.name !== "undefined" ? `#${this.name}` : ""
+    }]] ${this.script}`;
   }
 
   //Refactor this out
@@ -197,7 +196,10 @@ export class GridEvent extends RuntimeNode<EventData> {
 
   //Methods
   toLua() {
-    return `<?lua ${this.config.map((e) => e.toLua()).join("")} ?>`;
+    return `<?lua ${this.config
+      .map((e) => e.toLua())
+      .join("")
+      .replace(/(\r\n|\n|\r)/gm, "")} ?>`;
   }
 
   hasChanges(): boolean {

From c235481105ce8a6dfabb037a46f9347f7dfc8108 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 12 Sep 2024 17:59:43 +0200
Subject: [PATCH 13/42] Refactored access_tree out

---
 src/renderer/config-blocks/ButtonPressRelease_If.svelte  | 4 +---
 src/renderer/config-blocks/CodeBlock.svelte              | 7 ++++---
 src/renderer/config-blocks/Condition_End.svelte          | 2 --
 src/renderer/config-blocks/EncoderLeftRight_If.svelte    | 4 +---
 src/renderer/config-blocks/EncoderPushRot_If.svelte      | 4 +---
 src/renderer/config-blocks/Function_End.svelte           | 2 --
 src/renderer/config-blocks/Loop_End.svelte               | 2 --
 src/renderer/config-blocks/RawCode.svelte                | 1 -
 src/renderer/config-blocks/VarGlobal.svelte              | 3 +--
 src/renderer/config-blocks/VarLocals.svelte              | 3 +--
 src/renderer/config-blocks/VarSelf.svelte                | 3 +--
 src/renderer/config-blocks/headers/ButtonStepFace.svelte | 1 -
 src/renderer/config-blocks/headers/CompositeFace.svelte  | 1 -
 .../config-blocks/headers/ConditionElseIfFace.svelte     | 4 +---
 .../config-blocks/headers/ConditionIfFace.svelte         | 4 +---
 src/renderer/config-blocks/headers/ForLoopHeader.svelte  | 4 ++--
 .../config-blocks/headers/FunctionStartFace.svelte       | 4 +---
 src/renderer/config-blocks/headers/MidiFace.svelte       | 1 -
 .../config-blocks/headers/MidiFourteenBitFace.svelte     | 1 -
 src/renderer/config-blocks/headers/MidiSysExFace.svelte  | 1 -
 .../config-blocks/headers/RegularActionBlockFace.svelte  | 7 +++++--
 .../main/panels/configuration/Configuration.svelte       | 3 +--
 .../configuration/components/DynamicWrapper.svelte       | 5 ++---
 src/renderer/main/user-interface/LineEditor.svelte       | 9 ++++++---
 24 files changed, 29 insertions(+), 51 deletions(-)

diff --git a/src/renderer/config-blocks/ButtonPressRelease_If.svelte b/src/renderer/config-blocks/ButtonPressRelease_If.svelte
index c8400d842..b2d97f47f 100644
--- a/src/renderer/config-blocks/ButtonPressRelease_If.svelte
+++ b/src/renderer/config-blocks/ButtonPressRelease_If.svelte
@@ -114,8 +114,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
 
   let sidebarWidth;
@@ -157,7 +155,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      {access_tree}
+      action={config.runtimeRef}
       {sidebarWidth}
       value={scriptSegment}
     />
diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 95e629147..4a4b508e7 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -40,7 +40,7 @@
 </script>
 
 <script lang="ts">
-  import { GridAction } from "./../runtime/runtime";
+  import { GridAction, GridEvent, GridElement } from "./../runtime/runtime";
   import { GridScript } from "@intechstudio/grid-protocol";
 
   import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
@@ -61,7 +61,6 @@
   const dispatch = createEventDispatcher();
 
   export let config: ConfigObject;
-  export let access_tree;
   export let index: number;
 
   let action: GridAction;
@@ -124,7 +123,9 @@
       await tick();
     }
     monaco_store.set({ config: config, index: index });
-    $monaco_elementtype = access_tree.elementtype;
+    const event = action.parent as GridEvent;
+    const element = event.parent as GridElement;
+    $monaco_elementtype = element.type;
     modal.show({
       component: Monaco,
       options: { snap: "middle", disableClickOutside: true },
diff --git a/src/renderer/config-blocks/Condition_End.svelte b/src/renderer/config-blocks/Condition_End.svelte
index 27b7ab3a4..b7e85d676 100644
--- a/src/renderer/config-blocks/Condition_End.svelte
+++ b/src/renderer/config-blocks/Condition_End.svelte
@@ -35,8 +35,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
-  export let access_tree;
-
   const dispatch = createEventDispatcher();
 </script>
 
diff --git a/src/renderer/config-blocks/EncoderLeftRight_If.svelte b/src/renderer/config-blocks/EncoderLeftRight_If.svelte
index 75f1a2688..5737e19e6 100644
--- a/src/renderer/config-blocks/EncoderLeftRight_If.svelte
+++ b/src/renderer/config-blocks/EncoderLeftRight_If.svelte
@@ -70,8 +70,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
 
   let sidebarWidth;
@@ -113,7 +111,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      {access_tree}
+      action={config.runtimeRef}
       {sidebarWidth}
       value={scriptSegment}
     />
diff --git a/src/renderer/config-blocks/EncoderPushRot_If.svelte b/src/renderer/config-blocks/EncoderPushRot_If.svelte
index f94a4faf4..61ce012ff 100644
--- a/src/renderer/config-blocks/EncoderPushRot_If.svelte
+++ b/src/renderer/config-blocks/EncoderPushRot_If.svelte
@@ -53,8 +53,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
 
   let sidebarWidth;
@@ -96,7 +94,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      {access_tree}
+      action={config.runtimeRef}
       {sidebarWidth}
       value={scriptSegment}
     />
diff --git a/src/renderer/config-blocks/Function_End.svelte b/src/renderer/config-blocks/Function_End.svelte
index 072af2604..e06a665b9 100644
--- a/src/renderer/config-blocks/Function_End.svelte
+++ b/src/renderer/config-blocks/Function_End.svelte
@@ -35,8 +35,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
-  export let access_tree;
-
   const dispatch = createEventDispatcher();
 </script>
 
diff --git a/src/renderer/config-blocks/Loop_End.svelte b/src/renderer/config-blocks/Loop_End.svelte
index 3064cb2d3..0d34b628b 100644
--- a/src/renderer/config-blocks/Loop_End.svelte
+++ b/src/renderer/config-blocks/Loop_End.svelte
@@ -35,8 +35,6 @@
 <script>
   import { createEventDispatcher } from "svelte";
 
-  export let access_tree;
-
   const dispatch = createEventDispatcher();
 
   function sendData() {
diff --git a/src/renderer/config-blocks/RawCode.svelte b/src/renderer/config-blocks/RawCode.svelte
index 2138a89d0..4c28e1d35 100644
--- a/src/renderer/config-blocks/RawCode.svelte
+++ b/src/renderer/config-blocks/RawCode.svelte
@@ -47,7 +47,6 @@
   const dispatch = createEventDispatcher();
 
   export let config;
-  export let access_tree;
   export let index;
 
   let compBlock = undefined;
diff --git a/src/renderer/config-blocks/VarGlobal.svelte b/src/renderer/config-blocks/VarGlobal.svelte
index aeb287765..6ab84b4de 100644
--- a/src/renderer/config-blocks/VarGlobal.svelte
+++ b/src/renderer/config-blocks/VarGlobal.svelte
@@ -38,7 +38,6 @@
 
   export let config;
   export let index;
-  export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
@@ -254,7 +253,7 @@
                 on:output={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
-                {access_tree}
+                action={config.runtimeRef}
                 {sidebarWidth}
                 value={script.value}
               />
diff --git a/src/renderer/config-blocks/VarLocals.svelte b/src/renderer/config-blocks/VarLocals.svelte
index 77bd6519e..8d1604d31 100644
--- a/src/renderer/config-blocks/VarLocals.svelte
+++ b/src/renderer/config-blocks/VarLocals.svelte
@@ -38,7 +38,6 @@
 
   export let config;
   export let index;
-  export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
@@ -257,7 +256,7 @@
                 on:output={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
-                {access_tree}
+                action={config.runtimeRef}
                 {sidebarWidth}
                 value={script.value}
               />
diff --git a/src/renderer/config-blocks/VarSelf.svelte b/src/renderer/config-blocks/VarSelf.svelte
index db4fa8aa6..689779e77 100644
--- a/src/renderer/config-blocks/VarSelf.svelte
+++ b/src/renderer/config-blocks/VarSelf.svelte
@@ -38,7 +38,6 @@
 
   export let config;
   export let index;
-  export let access_tree;
 
   import LineEditor from "../main/user-interface/LineEditor.svelte";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
@@ -258,7 +257,7 @@
                 on:output={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
-                {access_tree}
+                action={config.runtimeRef}
                 {sidebarWidth}
                 value={script.value}
               />
diff --git a/src/renderer/config-blocks/headers/ButtonStepFace.svelte b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
index c16a9ad02..6baa18e08 100644
--- a/src/renderer/config-blocks/headers/ButtonStepFace.svelte
+++ b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
@@ -5,7 +5,6 @@
 
   const dispatch = createEventDispatcher();
 
-  export let access_tree;
   export let config: ConfigObject;
   export let index;
 
diff --git a/src/renderer/config-blocks/headers/CompositeFace.svelte b/src/renderer/config-blocks/headers/CompositeFace.svelte
index 1f0f79398..a8a169983 100644
--- a/src/renderer/config-blocks/headers/CompositeFace.svelte
+++ b/src/renderer/config-blocks/headers/CompositeFace.svelte
@@ -2,7 +2,6 @@
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
 
-  export let access_tree;
   export let config = undefined;
 
   function handleClick(e) {
diff --git a/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte b/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
index e0ea2041d..0b0207933 100644
--- a/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
+++ b/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
@@ -8,8 +8,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../../main/user-interface/LineEditor.svelte";
 
   import { windowSize } from "../../runtime/window-size";
@@ -55,7 +53,7 @@
         on:change={(e) => {
           sendData(e.detail.script);
         }}
-        {access_tree}
+        action={config.runtimeRef}
         {sidebarWidth}
         value={scriptSegment}
       />
diff --git a/src/renderer/config-blocks/headers/ConditionIfFace.svelte b/src/renderer/config-blocks/headers/ConditionIfFace.svelte
index 2cfbc0f39..5b1183e73 100644
--- a/src/renderer/config-blocks/headers/ConditionIfFace.svelte
+++ b/src/renderer/config-blocks/headers/ConditionIfFace.svelte
@@ -6,8 +6,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../../main/user-interface/LineEditor.svelte";
 
   const dispatch = createEventDispatcher();
@@ -51,7 +49,7 @@
         on:change={(e) => {
           sendData(e.detail.script);
         }}
-        {access_tree}
+        action={config.runtimeRef}
         value={scriptSegment}
       />
     </div>
diff --git a/src/renderer/config-blocks/headers/ForLoopHeader.svelte b/src/renderer/config-blocks/headers/ForLoopHeader.svelte
index 46cea3f53..04cb4ccec 100644
--- a/src/renderer/config-blocks/headers/ForLoopHeader.svelte
+++ b/src/renderer/config-blocks/headers/ForLoopHeader.svelte
@@ -9,7 +9,7 @@
   import SendFeedback from "../../main/user-interface/SendFeedback.svelte";
 
   export let index;
-  export let access_tree;
+
   export let config = undefined;
 
   let data = [
@@ -110,7 +110,7 @@
       {#key displayValue}
         <LineEditor
           on:change={handleDisplayValueChange}
-          {access_tree}
+          action={config.runtimeRef}
           bind:value={displayValue}
         />
       {/key}
diff --git a/src/renderer/config-blocks/headers/FunctionStartFace.svelte b/src/renderer/config-blocks/headers/FunctionStartFace.svelte
index b830e083b..74806fbcf 100644
--- a/src/renderer/config-blocks/headers/FunctionStartFace.svelte
+++ b/src/renderer/config-blocks/headers/FunctionStartFace.svelte
@@ -6,8 +6,6 @@
   export let config;
   export let index;
 
-  export let access_tree;
-
   import LineEditor from "../../main/user-interface/LineEditor.svelte";
 
   const dispatch = createEventDispatcher();
@@ -49,7 +47,7 @@
         on:change={(e) => {
           sendData(e.detail.script);
         }}
-        {access_tree}
+        action={config.runtimeRef}
         value={scriptSegment}
       />
     </div>
diff --git a/src/renderer/config-blocks/headers/MidiFace.svelte b/src/renderer/config-blocks/headers/MidiFace.svelte
index 477a53ecd..5cfa996f0 100644
--- a/src/renderer/config-blocks/headers/MidiFace.svelte
+++ b/src/renderer/config-blocks/headers/MidiFace.svelte
@@ -5,7 +5,6 @@
 
   const dispatch = createEventDispatcher();
 
-  export let access_tree;
   export let config = undefined;
 
   let scriptSegments = [];
diff --git a/src/renderer/config-blocks/headers/MidiFourteenBitFace.svelte b/src/renderer/config-blocks/headers/MidiFourteenBitFace.svelte
index 8f7307400..b8d39ab66 100644
--- a/src/renderer/config-blocks/headers/MidiFourteenBitFace.svelte
+++ b/src/renderer/config-blocks/headers/MidiFourteenBitFace.svelte
@@ -4,7 +4,6 @@
 
   const dispatch = createEventDispatcher();
 
-  export let access_tree;
   export let config = undefined;
 
   let scriptSegments = ["", "", ""];
diff --git a/src/renderer/config-blocks/headers/MidiSysExFace.svelte b/src/renderer/config-blocks/headers/MidiSysExFace.svelte
index ebb708598..51ac3bb4a 100644
--- a/src/renderer/config-blocks/headers/MidiSysExFace.svelte
+++ b/src/renderer/config-blocks/headers/MidiSysExFace.svelte
@@ -4,7 +4,6 @@
 
   const dispatch = createEventDispatcher();
 
-  export let access_tree;
   export let config = undefined;
 
   const whatsInParenthesis = /\(([^)]+)\)/;
diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index 0734aeb80..ddb4a8a2a 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -10,7 +10,6 @@
 
   const dispatch = createEventDispatcher();
 
-  export let access_tree;
   export let config: ConfigObject = undefined;
   export let index;
 
@@ -84,7 +83,11 @@
       class="bg-primary font-normal my-auto rounded flex items-center flex-grow h-full"
       on:click|stopPropagation
     >
-      <LineEditor {access_tree} value={name} on:change={handleNameChange} />
+      <LineEditor
+        action={config.runtimeRef}
+        value={name}
+        on:change={handleNameChange}
+      />
     </div>
   {:else}
     <span
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index f475fc713..19a7c69a4 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -58,7 +58,6 @@
   /////     VARIABLES, LIFECYCLE FUNCTIONS AND TYPE DEFINITIONS       //////////
   //////////////////////////////////////////////////////////////////////////////
 
-  let access_tree = {};
   let scrollHeight = "100%";
   let draggedIndexes = [];
   let autoScroll;
@@ -450,7 +449,7 @@
                     <DynamicWrapper
                       {index}
                       {config}
-                      {access_tree}
+                      action={config.runtimeRef}
                       on:update={handleConfigUpdate}
                       on:replace={handleReplace}
                       on:select={() => {
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index e9b58152a..03aa03513 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -27,7 +27,6 @@
     }
   });
 
-  export let access_tree;
   export let index = undefined;
   export let config;
 
@@ -178,7 +177,7 @@
               class="h-full w-full px-2"
               {index}
               {config}
-              {access_tree}
+              action={config.runtimeRef}
               {syntaxError}
               on:replace={replace_me}
               on:validator={handleValidator}
@@ -193,7 +192,7 @@
             this={config.header}
             {config}
             {index}
-            {access_tree}
+            action={config.runtimeRef}
             on:toggle={handleToggle}
             on:output={handleOutput}
           />
diff --git a/src/renderer/main/user-interface/LineEditor.svelte b/src/renderer/main/user-interface/LineEditor.svelte
index 2a0fde9aa..f5f44d40e 100644
--- a/src/renderer/main/user-interface/LineEditor.svelte
+++ b/src/renderer/main/user-interface/LineEditor.svelte
@@ -1,4 +1,5 @@
-<script>
+<script lang="ts">
+  import { GridAction, GridEvent, GridElement } from "./../../runtime/runtime";
   import { appSettings } from "../../runtime/app-helper.store";
   import {
     beforeUpdate,
@@ -14,7 +15,7 @@
   const dispatch = createEventDispatcher();
 
   export let value;
-  export let access_tree;
+  export let action: GridAction;
   export let disabled = false;
 
   let monaco_block;
@@ -44,7 +45,9 @@
   }
 
   onMount(() => {
-    $monaco_elementtype = access_tree.elementtype;
+    const event = action.parent as GridEvent;
+    const element = event.parent as GridElement;
+    $monaco_elementtype = element.type;
     value_buffer = value;
 
     editor = monaco_editor.create(monaco_block, {

From fc4aeda38fc90e451b5d329f15bb095824c946c9 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 13 Sep 2024 16:11:49 +0200
Subject: [PATCH 14/42] Fixed monaco character count and commit mechanism

---
 src/renderer/main/modals/Monaco.svelte                    | 7 +++++--
 src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte | 1 -
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 6f80f7d38..732b47d29 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -49,7 +49,6 @@
   let scriptLength = undefined;
   let pathSnippets = [];
   let editedAction: GridAction;
-  let editorCode: string;
 
   let name;
   let isEditName = false;
@@ -143,7 +142,10 @@
       //Throws error on syntax error
       const compressed = GridScript.compressScript(editor.getValue());
       editedAction.script = compressed;
-      editedAction.name = name;
+      editedAction.name =
+        name !== $monaco_store.config?.information.displayName
+          ? name
+          : undefined;
 
       //Calculate length (this already includes the new value of referenceConfig)
       scriptLength = (editedAction.parent as GridEvent).toLua().length;
@@ -207,6 +209,7 @@
       name = $monaco_store.config.name;
       commitEnabled = false;
       errorMesssage = "";
+      configManager.refresh();
     });
   }
 
diff --git a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
index 464fb44f0..3512f1721 100644
--- a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
+++ b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
@@ -32,7 +32,6 @@
   }
 
   $: {
-    console.log($configManager.toConfigScript());
     configScriptLength.set($configManager.toConfigScript().length);
     syntaxError.set($configManager.checkSyntax());
   }

From 09fe0ee60b822c6ebfe140c5998654be1d02783d Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Wed, 18 Sep 2024 13:47:15 +0200
Subject: [PATCH 15/42] QA fixes

---
 src/renderer/main/modals/Monaco.svelte        |  9 ++++--
 .../configuration/Configuration.store.ts      | 31 +++++++------------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 732b47d29..0f1eef144 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -87,6 +87,10 @@
         ? action.name
         : $monaco_store.config.information.displayName;
 
+    if (commitedName !== action.name) {
+      commitedName = action.name;
+    }
+
     pathSnippets = [
       `${module.type} (${module.dx},${module.dy})`,
       `Page ${page.pageNumber + 1}`,
@@ -104,7 +108,6 @@
     commitedCode = editedAction.script;
     commitedName = editedAction.name;
     scriptLength = (editedAction.parent as GridEvent).toLua().length;
-    console.log((editedAction.parent as GridEvent).toLua());
 
     //Creating and configuring the editor
     editor = monaco_editor.create(monaco_block, {
@@ -186,7 +189,8 @@
 
   async function handleCommit() {
     $monaco_store.config.script = GridScript.compressScript(editor.getValue());
-    $monaco_store.config.name = name;
+    $monaco_store.config.name =
+      name !== $monaco_store.config?.information.displayName ? name : undefined;
 
     const action = $monaco_store.config.runtimeRef;
     const event = action.parent as GridEvent;
@@ -209,7 +213,6 @@
       name = $monaco_store.config.name;
       commitEnabled = false;
       errorMesssage = "";
-      configManager.refresh();
     });
   }
 
diff --git a/src/renderer/main/panels/configuration/Configuration.store.ts b/src/renderer/main/panels/configuration/Configuration.store.ts
index cd961cb1b..8bc730dec 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.ts
+++ b/src/renderer/main/panels/configuration/Configuration.store.ts
@@ -44,9 +44,6 @@ export function lastOpenedActionblocksRemove(short) {
 }
 
 export class ConfigObject {
-  private _short: string;
-  private _script: string;
-  private _name: undefined | string;
   public runtimeRef: GridAction;
   public id: string;
 
@@ -59,10 +56,10 @@ export class ConfigObject {
   public toggled: boolean;
 
   constructor({ short, script, name = undefined, runtimeRef }) {
-    this._short = short;
-    this._script = script;
-    this._name = name;
     this.runtimeRef = runtimeRef;
+    this.short = short;
+    this.script = script;
+    this.name = name;
     this.id = runtimeRef?.id;
 
     let res = getComponentInformation({ short: short });
@@ -82,46 +79,42 @@ export class ConfigObject {
   }
 
   get short(): string {
-    return this._short;
+    return this.runtimeRef.short;
   }
 
   set short(value: string) {
     this.runtimeRef.short = value;
-    this._short = value;
   }
 
   get script(): string {
-    return this._script;
+    return this.runtimeRef.script;
   }
 
   set script(value: string) {
     this.runtimeRef.script = value;
-    this._script = value;
   }
 
   get name(): undefined | string {
-    return this._name;
+    return this.runtimeRef.name;
   }
 
   set name(value: undefined | string) {
     this.runtimeRef.name = value;
-    this._name = value;
   }
 
   toRawLua() {
-    return `--[[@${this._short}${
-      typeof this._name !== "undefined" &&
-      this._name !== this.information.displayName
-        ? "#" + this._name
+    return `--[[@${this.short}${
+      typeof this.name !== "undefined" &&
+      this.name !== this.information.displayName
+        ? "#" + this.name
         : ""
-    }]] ${this._script}`;
+    }]] ${this.script}`;
   }
 
   //Returns true if syntax is OK
   checkSyntax() {
     const code =
-      this.information.syntaxPreprocessor?.generate(this._script) ??
-      this._script;
+      this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
     return GridScript.checkSyntax(code);
   }
 }

From ceec9fb5cd343fc35f756e4aa83db5c6ba572aa0 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 19 Sep 2024 14:51:20 +0200
Subject: [PATCH 16/42] Fixed action block addition

---
 .../configuration/components/ActionPicker.svelte      | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index e9318d95a..91ba3c4b0 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { GridAction } from "./../../../../runtime/runtime.ts";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { LocalDefinitions } from "./../../../../runtime/runtime.store";
   import {
@@ -301,7 +302,10 @@
       new ConfigObject({
         short: component.information.short,
         script: defaultScript,
-        runtimeRef: undefined,
+        runtimeRef: new GridAction(undefined, {
+          short: component.information.short,
+          script: defaultScript,
+        }),
         name: undefined,
       }),
     ];
@@ -315,7 +319,10 @@
           new ConfigObject({
             short: obj.short,
             script: obj.script,
-            runtimeRef: undefined,
+            runtimeRef: new GridAction(undefined, {
+              short: obj.short,
+              script: obj.script,
+            }),
             name: undefined,
           })
         );

From b8f82a69c22cf1de9fdc387636ff7b30566b7868 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Wed, 25 Sep 2024 12:29:26 +0200
Subject: [PATCH 17/42] Daily push

---
 src/renderer/config-blocks/CodeBlock.svelte   |  14 +-
 .../headers/ButtonStepFace.svelte             |  38 +-
 .../headers/RegularActionBlockFace.svelte     |  22 +-
 src/renderer/main/_actions/shortcut.action.ts |   2 +-
 src/renderer/main/modals/Monaco.svelte        |  36 +-
 src/renderer/main/modals/monaco.store.ts      |   4 +-
 .../configuration/Configuration.store.ts      | 492 +-------------
 .../panels/configuration/EventPanel.svelte    |  22 +-
 .../components/ActionPicker.svelte            |  42 +-
 .../components/DynamicWrapper.svelte          |  72 +--
 .../configuration/components/Toolbar.svelte   |  47 +-
 .../configuration/configuration-actions.ts    |  39 +-
 .../panels/profileCloud/ProfileCloud.svelte   |  43 +-
 src/renderer/runtime/runtime.store.ts         |  12 +-
 src/renderer/runtime/runtime.ts               | 603 ++++++++++--------
 15 files changed, 527 insertions(+), 961 deletions(-)

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 4a4b508e7..5d914e526 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -56,14 +56,12 @@
   import { modal } from "../main/modals/modal.store";
   import Monaco from "../main/modals/Monaco.svelte";
   import { get } from "svelte/store";
-  import { ConfigObject } from "../main/panels/configuration/Configuration.store";
 
   const dispatch = createEventDispatcher();
 
-  export let config: ConfigObject;
+  export let config: GridAction;
   export let index: number;
 
-  let action: GridAction;
   let codePreview: HTMLElement;
 
   const lualogo_foreground = "#808080";
@@ -109,21 +107,17 @@
     });
   }
 
-  onMount(() => {
-    action = config.runtimeRef;
-  });
-
-  $: if (typeof $action !== "undefined") {
+  $: if (typeof $config !== "undefined") {
     displayConfigScript(config.script);
   }
 
   async function open_monaco() {
-    if (action.id !== get(monaco_store)?.config.runtimeRef.id) {
+    if (config.id !== get(monaco_store)?.config.runtimeRef.id) {
       modal.close();
       await tick();
     }
     monaco_store.set({ config: config, index: index });
-    const event = action.parent as GridEvent;
+    const event = config.parent as GridEvent;
     const element = event.parent as GridElement;
     $monaco_elementtype = element.type;
     modal.show({
diff --git a/src/renderer/config-blocks/headers/ButtonStepFace.svelte b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
index 6baa18e08..d8fe24cf9 100644
--- a/src/renderer/config-blocks/headers/ButtonStepFace.svelte
+++ b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
@@ -1,16 +1,45 @@
 <script lang="ts">
-  import { ConfigObject } from "../../main/panels/configuration/Configuration.store";
+  import { EventData, GridAction, GridEvent } from "./../../runtime/runtime";
   import { createEventDispatcher } from "svelte";
   import { toWords } from "number-to-words";
+  import * as ButtonStepElseIf from "../ButtonStep_ElseIf.svelte";
 
   const dispatch = createEventDispatcher();
 
-  export let config: ConfigObject;
-  export let index;
+  export let config: GridAction;
+
+  let step = 0;
+  const event = config.parent as GridEvent;
 
   function handleClick(e) {
     dispatch("toggle");
   }
+
+  $: {
+    handleEventDataChange($event);
+  }
+
+  function handleEventDataChange(event: EventData) {
+    step = 0;
+    let stack = [];
+    for (const action of event.config) {
+      if (action.short === "bst0") {
+        stack.push(0);
+      }
+
+      if (action.short === "bste") {
+        stack.pop();
+      }
+
+      if (action.short === "bstn") {
+        step = ++stack[stack.length - 1];
+        config.script = ButtonStepElseIf.information.defaultLua.replace(
+          "N",
+          String(step)
+        );
+      }
+    }
+  }
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -27,8 +56,7 @@
   {#if config.information.short === "bstn"}
     <span
       >{`Step ${
-        toWords(config.step)[0].toUpperCase() +
-        toWords(config.step).slice(1).toLowerCase()
+        toWords(step)[0].toUpperCase() + toWords(step).slice(1).toLowerCase()
       }`}</span
     >
   {:else}
diff --git a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
index ddb4a8a2a..f9b13006e 100644
--- a/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
+++ b/src/renderer/config-blocks/headers/RegularActionBlockFace.svelte
@@ -1,20 +1,17 @@
 <script lang="ts">
   import { appSettings } from "./../../runtime/app-helper.store.js";
-  import { ConfigObject } from "./../../main/panels/configuration/Configuration.store";
   import LineEditor from "./../../main/user-interface/LineEditor.svelte";
   import { createEventDispatcher } from "svelte";
   import { config_drag } from "../../main/_actions/move.action";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { onMount } from "svelte";
-  import { GridAction } from "../../runtime/runtime.js";
+  import { GridAction } from "../../runtime/runtime";
 
   const dispatch = createEventDispatcher();
 
-  export let config: ConfigObject = undefined;
+  export let config: GridAction;
   export let index;
 
-  let action: GridAction;
-
   function handleClick(e) {
     dispatch("toggle");
   }
@@ -36,10 +33,9 @@
   }
 
   onMount(() => {
-    action = config.runtimeRef;
     name =
-      typeof action.name !== "undefined"
-        ? action.name
+      typeof config.name !== "undefined"
+        ? config.name
         : config.information.displayName;
   });
 
@@ -83,17 +79,13 @@
       class="bg-primary font-normal my-auto rounded flex items-center flex-grow h-full"
       on:click|stopPropagation
     >
-      <LineEditor
-        action={config.runtimeRef}
-        value={name}
-        on:change={handleNameChange}
-      />
+      <LineEditor action={config} value={name} on:change={handleNameChange} />
     </div>
   {:else}
     <span
-      >{typeof $action?.name === "undefined"
+      >{typeof $config?.name === "undefined"
         ? config.information.displayName
-        : $action.name}</span
+        : $config.name}</span
     >
   {/if}
 
diff --git a/src/renderer/main/_actions/shortcut.action.ts b/src/renderer/main/_actions/shortcut.action.ts
index d281b4710..6606cee11 100644
--- a/src/renderer/main/_actions/shortcut.action.ts
+++ b/src/renderer/main/_actions/shortcut.action.ts
@@ -2,7 +2,7 @@ export interface ShortcutParameter {
   alt?: boolean;
   shift?: boolean;
   control?: boolean;
-  callback: (...args: any) => void;
+  callback?: (...args: any) => void;
   code: string;
 }
 
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 0f1eef144..3fdc27822 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -23,11 +23,6 @@
   import { beforeUpdate, afterUpdate, onMount } from "svelte";
 
   import { GridScript } from "@intechstudio/grid-protocol";
-  import {
-    configManager,
-    ConfigTarget,
-    ConfigList,
-  } from "../panels/configuration/Configuration.store";
   import { appSettings } from "../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { clickOutside } from "../_actions/click-outside.action";
@@ -104,7 +99,7 @@
 
   onMount(() => {
     const store = $monaco_store;
-    editedAction = store.config.runtimeRef;
+    editedAction = store.config;
     commitedCode = editedAction.script;
     commitedName = editedAction.name;
     scriptLength = (editedAction.parent as GridEvent).toLua().length;
@@ -188,32 +183,11 @@
   });
 
   async function handleCommit() {
-    $monaco_store.config.script = GridScript.compressScript(editor.getValue());
-    $monaco_store.config.name =
+    const action = $monaco_store.config;
+    action.script = GridScript.compressScript(editor.getValue());
+    action.name =
       name !== $monaco_store.config?.information.displayName ? name : undefined;
-
-    const action = $monaco_store.config.runtimeRef;
-    const event = action.parent as GridEvent;
-    const element = event.parent as GridElement;
-    const page = element.parent as GridPage;
-    const module = page.parent as GridModule;
-
-    const target = ConfigTarget.create({
-      device: { dx: module.dx, dy: module.dy },
-      page: page.pageNumber,
-      element: element.elementIndex,
-      eventType: event.type,
-    });
-
-    ConfigList.createFromTarget(target).then((list: ConfigList) => {
-      list.sendTo({ target }).catch((e) => {
-        console.log(e);
-      });
-      commitedCode = $monaco_store.config.script;
-      name = $monaco_store.config.name;
-      commitEnabled = false;
-      errorMesssage = "";
-    });
+    action.sendToGrid();
   }
 
   onDestroy(() => {
diff --git a/src/renderer/main/modals/monaco.store.ts b/src/renderer/main/modals/monaco.store.ts
index 224ed3764..1acf2ffbc 100644
--- a/src/renderer/main/modals/monaco.store.ts
+++ b/src/renderer/main/modals/monaco.store.ts
@@ -1,6 +1,6 @@
 import { writable, type Writable } from "svelte/store";
-import { ConfigObject } from "../panels/configuration/Configuration.store";
+import { GridAction } from "../../runtime/runtime";
 
-export type MonacoValue = { config: ConfigObject; index: number } | undefined;
+export type MonacoValue = { config: GridAction; index: number } | undefined;
 
 export const monaco_store: Writable<MonacoValue> = writable();
diff --git a/src/renderer/main/panels/configuration/Configuration.store.ts b/src/renderer/main/panels/configuration/Configuration.store.ts
index 8bc730dec..32f6bf427 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.ts
+++ b/src/renderer/main/panels/configuration/Configuration.store.ts
@@ -3,24 +3,10 @@ import { get, writable, type Writable } from "svelte/store";
 import {
   runtime,
   user_input,
-  getDeviceName,
+  UserInputValue,
 } from "../../../runtime/runtime.store";
-import {
-  ElementType,
-  EventType,
-  NumberToEventType,
-} from "@intechstudio/grid-protocol";
-
-import {
-  getComponentInformation,
-  init_config_block_library,
-} from "../../../lib/_configs";
-
-import { grid, GridScript } from "@intechstudio/grid-protocol";
-import * as ButtonStepElseIf from "../../../config-blocks/ButtonStep_ElseIf.svelte";
-import { GridAction, GridEvent } from "../../../runtime/runtime";
-import { ActionBlockInformation } from "../../../config-blocks/ActionBlockInformation";
-import { SvelteComponent, tick } from "svelte";
+import { init_config_block_library } from "../../../lib/_configs";
+import { GridAction } from "../../../runtime/runtime";
 
 export let lastOpenedActionblocks = writable([]);
 
@@ -43,403 +29,40 @@ export function lastOpenedActionblocksRemove(short) {
   lastOpenedActionblocks.set(currentList.filter((e) => e !== short));
 }
 
-export class ConfigObject {
-  public runtimeRef: GridAction;
-  public id: string;
-
-  public information: ActionBlockInformation;
-  public indentation: number;
-  public step: number;
-  public header: SvelteComponent;
-  public component: SvelteComponent;
-  public selected: boolean;
-  public toggled: boolean;
-
-  constructor({ short, script, name = undefined, runtimeRef }) {
-    this.runtimeRef = runtimeRef;
-    this.short = short;
-    this.script = script;
-    this.name = name;
-    this.id = runtimeRef?.id;
-
-    let res = getComponentInformation({ short: short });
-
-    //Backward compatibility
-    if (typeof res === "undefined") {
-      res = getComponentInformation({ short: "raw" });
-    }
-
-    this.information = res.information;
-    this.indentation = 0;
-    this.step = 0;
-    this.header = res.header;
-    this.component = res.component;
-    this.selected = false;
-    this.toggled = false;
-  }
-
-  get short(): string {
-    return this.runtimeRef.short;
-  }
-
-  set short(value: string) {
-    this.runtimeRef.short = value;
-  }
-
-  get script(): string {
-    return this.runtimeRef.script;
-  }
-
-  set script(value: string) {
-    this.runtimeRef.script = value;
-  }
-
-  get name(): undefined | string {
-    return this.runtimeRef.name;
-  }
-
-  set name(value: undefined | string) {
-    this.runtimeRef.name = value;
-  }
-
-  toRawLua() {
-    return `--[[@${this.short}${
-      typeof this.name !== "undefined" &&
-      this.name !== this.information.displayName
-        ? "#" + this.name
-        : ""
-    }]] ${this.script}`;
-  }
-
-  //Returns true if syntax is OK
-  checkSyntax() {
-    const code =
-      this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
-    return GridScript.checkSyntax(code);
-  }
-}
-
-export class ConfigList extends Array {
-  static updateStep(list) {
-    let stack = [];
-    for (const config of list) {
-      if (config.short === "bst0") {
-        stack.push(0);
-      }
-
-      if (config.short === "bste") {
-        stack.pop();
-      }
-
-      if (config.short === "bstn") {
-        const step = ++stack[stack.length - 1];
-        config.step = step;
-        config.script = ButtonStepElseIf.information.defaultLua.replace(
-          "N",
-          String(step)
-        );
-      }
-    }
-  }
-
-  static updateIndentation(list) {
-    let indentation = 0;
-    for (let i = 0; i < list.length; i++) {
-      let config = list[i];
-      if (config.information.type === "composite_open") {
-        config.indentation = indentation++;
-      } else if (config.information.type === "composite_close") {
-        config.indentation = --indentation;
-      } else if (config.information.type === "composite_part") {
-        config.indentation = indentation - 1;
-      } else {
-        config.indentation = indentation;
-      }
-    }
-  }
-
-  static createFromTarget(target) {
-    return new Promise((resolve, reject) => {
-      if (typeof target === "undefined") {
-        reject("ConfigTarget is undefined");
-        return;
-      }
-
-      target
-        .getActions()
-        .then((actions) => {
-          //LOADED and SYNCED
-          const list = ConfigList.createFromActions(actions);
-          resolve(list);
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
-  static createFromActions(actions) {
-    const config = new ConfigList();
-    config.init(actions);
-    return config;
-  }
-
-  sendTo({ target }): Promise<string> {
-    return new Promise((resolve, reject) => {
-      const res = this.checkLength();
-      if (!res.value) {
-        reject(res.detail);
-        return;
-      }
-
-      runtime
-        .fetchOrLoadConfig({
-          dx: target.device.dx,
-          dy: target.device.dy,
-          page: target.page,
-          element: target.element,
-          event: target.eventType,
-        })
-        .then((desc) => {
-          runtime.update_event_configuration(
-            target.device.dx,
-            target.device.dy,
-            target.page,
-            target.element,
-            target.eventType,
-            this.map((e) => e.runtimeRef)
-          );
-
-          runtime.send_event_configuration_to_grid(
-            target.device.dx,
-            target.device.dy,
-            target.page,
-            target.element,
-            target.eventType
-          );
-
-          resolve("Event sent to grid.");
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
-  private init(actions) {
-    for (const action of actions) {
-      const obj = new ConfigObject({
-        short: action.short,
-        script: action.script,
-        name: action.name,
-        runtimeRef: action,
-      });
-      super.push(obj);
-    }
-  }
-
-  toConfigScript() {
-    let lua = "";
-    super.forEach((e) => (lua += e.toRawLua()));
-    lua = "<?lua " + lua.replace(/(\r\n|\n|\r)/gm, "") + " ?>";
-    return lua;
-  }
-
-  insert(atPosition, ...configs) {
-    super.splice(atPosition, 0, ...configs);
-  }
-
-  remove(atPosition) {
-    super.splice(atPosition, 1);
-  }
-
-  //Returns true if config syntax is OK
-  checkSyntax() {
-    for (const e of this) {
-      if (!e.checkSyntax()) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  //Returns error if limit is reached
-  checkLength() {
-    const script = this.toConfigScript();
-    const length = script.length;
-    if (length >= grid.getProperty("CONFIG_LENGTH")) {
-      const target = ConfigTarget.getCurrent();
-      return {
-        value: false,
-        detail: {
-          type: "lengthError",
-          device: getDeviceName(target.device.dx, target.device.dy),
-          x: target.device.dx,
-          y: target.device.dy,
-          element: { no: target.element },
-          event: {
-            no: target.eventType,
-            type: NumberToEventType(target.eventType),
-          },
-          length: length,
-        },
-      };
-    } else {
-      return { value: true, detail: undefined };
-    }
-  }
-}
-
-export class ConfigTarget {
-  public device: { dx: number; dy: number };
-  public page: number;
-  public element: number;
-  public eventType: number;
-  public events: GridEvent[];
-  public elementType: ElementType;
-  public runtimeRef: GridEvent;
-
-  static create({ device: { dx: dx, dy: dy }, page, element, eventType }) {
-    const device = runtime.modules.find((e) => e.dx == dx && e.dy == dy);
-
-    if (typeof device === "undefined") {
-      //console.warn(`Unknown device at (${dx},${dy})!`);
-      return undefined;
-    }
-
-    try {
-      const target = new ConfigTarget();
-      target.device = { dx: dx, dy: dy };
-      target.page = page;
-      target.element = element;
-      target.eventType = eventType;
-
-      const controlElement = device.pages
-        .at(page)
-        .control_elements.find((e) => e.elementIndex == element);
-      target.events = controlElement.events;
-      target.elementType = controlElement.type;
-      target.runtimeRef = target.events.find(
-        (e) => e.type === target.eventType
-      );
-      return target;
-    } catch (e) {
-      console.warn(`Device was destroyed at (${dx},${dy})!`);
-      return undefined;
-    }
-  }
-
-  static createFrom({ userInput }) {
-    return ConfigTarget.create({
-      device: { dx: userInput.dx, dy: userInput.dy },
-      page: userInput.pagenumber,
-      element: userInput.elementnumber,
-      eventType: userInput.eventtype,
-    });
-  }
-
-  static getCurrent() {
-    const ui = get(user_input);
-    const currentTarget = ConfigTarget.create({
-      device: { dx: ui.dx, dy: ui.dy },
-      page: ui.pagenumber,
-      element: ui.elementnumber,
-      eventType: ui.eventtype,
-    });
-
-    return currentTarget;
-  }
-
-  hasChanges() {
-    for (const event of this.events) {
-      if (event.hasChanges()) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  getEvent() {
-    const element = this.getElement();
-    const event = element.events.find((e) => e.type == this.eventType);
-    return event;
-  }
-
-  getElement() {
-    const page = this.getPage();
-    const element = page.control_elements.find(
-      (element) => element.elementIndex == this.element
-    );
-    return element;
-  }
-
-  getPage() {
-    const device = this.getDevice();
-    const page = device.pages[this.page];
-    return page;
-  }
-
-  getDevice() {
-    const device = runtime.modules.find(
-      (e) => e.dx == this.device.dx && e.dy == this.device.dy
-    );
-    return device;
-  }
-
-  getActions() {
-    return new Promise((resolve, reject) => {
-      const event = this.getEvent();
-
-      if (typeof event.config === "undefined") {
-        runtime
-          .fetchOrLoadConfig({
-            dx: this.device.dx,
-            dy: this.device.dy,
-            page: this.page,
-            element: this.element,
-            event: this.eventType,
-          })
-          .then(() => {
-            resolve(this.getEvent().config);
-          })
-          .catch((e) => reject(e));
-      } else {
-        resolve(event.config);
-      }
-    });
-  }
-}
-
-type ConfigManager = Writable<ConfigList> & {
-  update: (params: any) => void;
-  set: (value: any) => void;
-  unsubscribe: () => void;
-  loadPreset: (params: any) => Promise<void>;
-  loadProfile: (params: any) => Promise<void>;
+type ConfigManager = Writable<GridAction[]> & {
   refresh: () => void;
 };
 
 export const configManager = create_configuration_manager();
 
 function create_configuration_manager(): ConfigManager {
-  const internal = writable(new ConfigList());
-  let unsubscribeUserInput;
+  const internal = writable([]);
   const loadAndInit = async () => {
     await init_config_block_library();
-    unsubscribeUserInput = user_input.subscribe((ui) => {
+    user_input.subscribe((ui) => {
       createConfigListFrom(ui)
         .then((list) => {
-          setOverride(list);
+          internal.set(list);
         })
         .catch((e) => {
           console.warn(e);
-          setOverride(new ConfigList());
+          internal.set([]);
         });
     });
   };
 
   loadAndInit();
 
-  function createConfigListFrom(ui) {
+  function createConfigListFrom(ui: UserInputValue): Promise<GridAction[]> {
     return new Promise((resolve, reject) => {
-      const target = ConfigTarget.createFrom({ userInput: ui });
-      ConfigList.createFromTarget(target)
+      const event = runtime
+        .getModule(ui.dx, ui.dy)
+        .getPage(ui.pagenumber)
+        .getElement(ui.elementnumber)
+        .getEvent(ui.eventtype);
+
+      event
+        .load()
         .then((list) => {
           resolve(list);
         })
@@ -450,80 +73,10 @@ function create_configuration_manager(): ConfigManager {
     });
   }
 
-  function loadPreset({ x, y, element, preset }): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const ui = get(user_input);
-      const { dx, dy, page, elementNumber } = {
-        dx: x,
-        dy: y,
-        page: ui.pagenumber,
-        elementNumber: element,
-      };
-      runtime
-        .fetch_element_configuration_from_grid(dx, dy, page, elementNumber)
-        .then((desc) => {
-          runtime.element_preset_load(x, y, element, preset).then(() => {
-            const ui = get(user_input);
-            if (ui.dx === x && ui.dy === y && ui.elementnumber === element) {
-              createConfigListFrom(ui).then((list) => {
-                setOverride(list);
-                resolve();
-              });
-            }
-          });
-        })
-        .catch((e) => {
-          reject(e);
-        });
-    });
-  }
-
-  function loadProfile({ x, y, profile }): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const ui = get(user_input);
-      runtime
-        .fetch_page_configuration_from_grid({
-          dx: x,
-          dy: y,
-          page: ui.pagenumber,
-        })
-        .then((desc) => {
-          runtime
-            .whole_page_overwrite(x, y, profile)
-            .then(() => {
-              createConfigListFrom(ui).then((list) => {
-                setOverride(list);
-                resolve();
-              });
-            })
-            .catch((e) => reject(e));
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
-  function handleDataChange(list) {
-    ConfigList.updateIndentation(list);
-    ConfigList.updateStep(list);
-  }
-
-  function updateOverride(func) {
-    internal.update((store) => {
-      store = func(store);
-      handleDataChange(store);
-      return store;
-    });
-  }
-
-  function setOverride(obj) {
-    handleDataChange(obj);
-    internal.set(obj);
-  }
-
   async function refresh(): Promise<void> {
     return new Promise((resolve, reject) => {
-      const current = ConfigTarget.getCurrent();
-      ConfigList.createFromTarget(current)
+      const ui = get(user_input);
+      createConfigListFrom(ui)
         .then((list) => {
           configManager.set(list);
           resolve();
@@ -534,13 +87,6 @@ function create_configuration_manager(): ConfigManager {
 
   return {
     ...internal,
-    update: updateOverride,
-    set: setOverride,
-    unsubscribe: () => {
-      unsubscribeUserInput();
-    },
-    loadPreset: loadPreset,
-    loadProfile: loadProfile,
     refresh: refresh,
   };
 }
diff --git a/src/renderer/main/panels/configuration/EventPanel.svelte b/src/renderer/main/panels/configuration/EventPanel.svelte
index 3c4f62032..3b3cd65a3 100644
--- a/src/renderer/main/panels/configuration/EventPanel.svelte
+++ b/src/renderer/main/panels/configuration/EventPanel.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-  import { Grid } from "./../../../lib/_utils.ts";
+  import { Grid } from "./../../../lib/_utils";
   import { NumberToEventType } from "@intechstudio/grid-protocol";
-  import { runtime, user_input } from "../../../runtime/runtime.store";
+  import {
+    runtime,
+    user_input,
+    type UserInputValue,
+  } from "../../../runtime/runtime.store";
 
   import { get } from "svelte/store";
-  import { ConfigTarget } from "./Configuration.store";
   import { MeltRadio } from "@intechstudio/grid-uikit";
-  import { GridEvent } from "../../../runtime/runtime";
+  import { GridEvent, GridElement } from "../../../runtime/runtime";
 
   type EventPanelOption = {
     title: string;
@@ -20,12 +23,15 @@
 
   let options = defaultOptions;
   let selected = defaultSelected;
-  let target: ConfigTarget;
+  let target: GridElement;
 
   $: handleUserInputChange($user_input);
 
-  function handleUserInputChange(ui: any) {
-    target = ConfigTarget.createFrom({ userInput: ui });
+  function handleUserInputChange(ui: UserInputValue) {
+    target = runtime
+      .getModule(ui.dx, ui.dy)
+      .getPage(ui.pagenumber)
+      .getElement(ui.elementnumber);
 
     if (typeof target === "undefined") {
       options = defaultOptions;
@@ -40,7 +46,7 @@
       })
     );
 
-    selected = options.find((e) => e.value === target.eventType).value;
+    selected = options.find((e) => e.value === ui.eventtype).value;
   }
 
   $: handleSelectEvent(selected);
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index 91ba3c4b0..f917c8117 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -1,11 +1,13 @@
-<script>
-  import { GridAction } from "./../../../../runtime/runtime.ts";
+<script lang="ts">
+  import { get } from "svelte/store";
+  import { user_input, runtime } from "./../../../../runtime/runtime.store";
+  import { GridAction } from "./../../../../runtime/runtime";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { LocalDefinitions } from "./../../../../runtime/runtime.store";
   import {
     ClipboardKey,
     appClipboard,
-  } from "./../../../../runtime/clipboard.store.ts";
+  } from "./../../../../runtime/clipboard.store";
   import Popover from "svelte-easy-popover";
   import { createEventDispatcher } from "svelte";
 
@@ -14,11 +16,7 @@
   import { Analytics } from "../../../../runtime/analytics.js";
 
   import { getAllComponents } from "../../../../lib/_configs";
-  import {
-    ConfigObject,
-    ConfigTarget,
-    configManager,
-  } from "../Configuration.store";
+  import { configManager } from "../Configuration.store";
 
   import { lastOpenedActionblocksInsert } from "../Configuration.store";
   import { NumberToEventType } from "@intechstudio/grid-protocol";
@@ -82,12 +80,18 @@
   //////////////////////////////////////////////////////////////////////////////
 
   function getAvailableOptions(configs) {
-    const target = ConfigTarget.getCurrent();
+    const ui = get(user_input);
+    const target = runtime
+      .getModule(ui.dx, ui.dy)
+      .getPage(ui.pagenumber)
+      .getElement(ui.elementnumber)
+      .getEvent(ui.eventtype);
+
     if (typeof configs === "undefined" || typeof target === "undefined") {
       throw "Unexpected Error";
     }
 
-    let comp = getAllComponents();
+    let comp: any = getAllComponents();
 
     if (comp === undefined) {
       return;
@@ -182,7 +186,7 @@
     }
 
     //Filter out element type specific components
-    const eventString = NumberToEventType(target.eventType);
+    const eventString = NumberToEventType(target.type);
 
     if (eventString !== "encoder") {
       comp = comp.filter(
@@ -264,10 +268,10 @@
   }
 
   function handleClickOutside(e) {
-    handleClose(e);
+    handleClose();
   }
 
-  function handleClose(e) {
+  function handleClose() {
     dispatch("close");
   }
 
@@ -299,13 +303,9 @@
     defaultScript = replaceToLocalDefinition(defaultScript, "glg()", "gre");
     defaultScript = replaceToLocalDefinition(defaultScript, "glb()", "blu");
     const configs = [
-      new ConfigObject({
+      new GridAction(undefined, {
         short: component.information.short,
         script: defaultScript,
-        runtimeRef: new GridAction(undefined, {
-          short: component.information.short,
-          script: defaultScript,
-        }),
         name: undefined,
       }),
     ];
@@ -316,13 +316,9 @@
     if (typeof compositeLua !== "undefined") {
       for (const obj of compositeLua) {
         configs.push(
-          new ConfigObject({
+          new GridAction(undefined, {
             short: obj.short,
             script: obj.script,
-            runtimeRef: new GridAction(undefined, {
-              short: obj.short,
-              script: obj.script,
-            }),
             name: undefined,
           })
         );
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 03aa03513..94ab12c75 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -1,9 +1,6 @@
-<script>
-  import { GridAction } from "./../../../../runtime/runtime.ts";
-  import { getAllComponents } from "../../../../lib/_configs";
-
-  import { createEventDispatcher, onMount } from "svelte";
-  import { ConfigObject } from "../Configuration.store";
+<script lang="ts">
+  import { GridAction, GridEvent } from "./../../../../runtime/runtime";
+  import { createEventDispatcher, onMount, type SvelteComponent } from "svelte";
 
   import {
     lastOpenedActionblocks,
@@ -12,6 +9,7 @@
   } from "../Configuration.store";
 
   import { configIndexToId } from "../../../_actions/move.action";
+  import { getComponentInformation } from "../../../../lib/_configs";
 
   let toggled = false;
 
@@ -28,9 +26,10 @@
   });
 
   export let index = undefined;
-  export let config;
+  export let config: GridAction;
 
-  $: syntaxError = !config.checkSyntax();
+  let header: typeof SvelteComponent;
+  let component: typeof SvelteComponent;
 
   let syntaxError = false;
   let validationError = false;
@@ -38,48 +37,31 @@
 
   const dispatch = createEventDispatcher();
 
-  function replace_me(e) {
-    const { short, script, name } = e.detail;
-
-    const new_config = getAllComponents().find(
-      (e) => e.information.short === short
-    );
+  onMount(() => {
+    const result = getComponentInformation({ short: config.short });
+    header = result.header;
+    component = result.component;
+  });
 
-    const configScript = script ?? new_config.information.defaultLua;
+  $: syntaxError = !config.checkSyntax();
 
-    const obj = new ConfigObject({
-      short: new_config.information.short,
-      script: configScript,
+  function replace_me(e: any) {
+    const { short, script, name } = e.detail;
+    const parent = config.parent as GridEvent;
+    const action = new GridAction(undefined, {
+      short: short,
+      script: GridAction.getInformation(short), // Default Script
       name: name,
-      runtimeRef: new GridAction(config.runtimeRef.parent, {
-        short: new_config.information.short,
-        script: configScript,
-        name: name,
-      }),
-    });
-
-    dispatch("replace", {
-      index: index,
-      config: obj,
     });
+    parent.replace(config.id, action);
     toggled = true;
   }
 
   function handleOutput(e) {
     const { short, script, name } = e.detail;
-    dispatch("update", {
-      index: index,
-      config: new ConfigObject({
-        short: short,
-        script: script,
-        name: name,
-        runtimeRef: new GridAction(config.runtimeRef.parent, {
-          short,
-          script,
-          name,
-        }),
-      }),
-    });
+    config.short = short;
+    config.script = script;
+    config.name = name;
   }
 
   function handleValidator(e) {
@@ -169,15 +151,14 @@
         class:bg-opacity-30={toggled}
       >
         <!-- Content of block -->
-        {#if (toggled && config.information.toggleable) || typeof config.header === "undefined"}
+        {#if (toggled && config.information.toggleable) || typeof header === "undefined"}
           <!-- Body of the Action block when toggled -->
           <div class="bg-secondary bg-opacity-30 h-full w-full">
             <svelte:component
-              this={config.component}
+              this={component}
               class="h-full w-full px-2"
               {index}
               {config}
-              action={config.runtimeRef}
               {syntaxError}
               on:replace={replace_me}
               on:validator={handleValidator}
@@ -189,10 +170,9 @@
           <!-- Header of the Action block when untoggled -->
 
           <svelte:component
-            this={config.header}
+            this={header}
             {config}
             {index}
-            action={config.runtimeRef}
             on:toggle={handleToggle}
             on:output={handleOutput}
           />
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index 62c130de4..c585aba7f 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -1,5 +1,7 @@
-<script>
-  import { derived, writable } from "svelte/store";
+<script lang="ts">
+  import { GridEvent, GridElement } from "./../../../../runtime/runtime";
+  import { UserInputValue } from "./../../../../runtime/runtime.store";
+  import { derived } from "svelte/store";
   import { runtime, user_input } from "./../../../../runtime/runtime.store";
   import {
     createCopyAllDisabledStore,
@@ -12,11 +14,11 @@
     createPasteDisabledStore,
     createRemoveDisabledStore,
   } from "../configuration-actions";
-  import { shortcut } from "./../../../_actions/shortcut.action.ts";
+  import { shortcut } from "./../../../_actions/shortcut.action";
   import MoltenToolbarButton from "../../../user-interface/MoltenToolbarButton.svelte";
   import Options from "./Options.svelte";
   import { createEventDispatcher } from "svelte";
-  import { ConfigTarget, configManager } from "../Configuration.store";
+  import { configManager } from "../Configuration.store";
 
   const dispatch = createEventDispatcher();
 
@@ -94,26 +96,27 @@
     dispatch("clear-element");
   }
 
-  const target = writable();
-  $: {
-    if ($runtime) {
-      target.set(
-        ConfigTarget.createFrom({
-          userInput: $user_input,
-        })
-      );
-    }
+  let event: GridEvent;
+  let element: GridElement;
+  $: handleUserInputChange($user_input);
+
+  function handleUserInputChange(ui: UserInputValue) {
+    element = runtime
+      .getModule(ui.dx, ui.dy)
+      .getPage(ui.pagenumber)
+      .getElement(ui.elementnumber);
+    event = element.getEvent(ui.eventtype);
   }
 
-  const copyElementDisabled = createCopyAllDisabledStore(target);
-  const overwriteElementDisabled = createOverwriteDisabledStore(target);
-  const discardElementDisabled = createDiscardElementDisabledStore(target);
-  const clearElementDisabled = createClearElementDisabledStore(target);
-  const copyDisabled = createCopyDisabledStore(target);
-  const pasteDisabled = createPasteDisabledStore(target);
-  const cutDisabled = createCutDisabledStore(target);
-  const mergeActionToCodeDisabled = createMergeDisabledStore(target);
-  const removeDisabled = createRemoveDisabledStore(target);
+  const copyElementDisabled = createCopyAllDisabledStore(event);
+  const overwriteElementDisabled = createOverwriteDisabledStore(event);
+  const discardElementDisabled = createDiscardElementDisabledStore(event);
+  const clearElementDisabled = createClearElementDisabledStore(event);
+  const copyDisabled = createCopyDisabledStore(event);
+  const pasteDisabled = createPasteDisabledStore(event);
+  const cutDisabled = createCutDisabledStore(event);
+  const mergeActionToCodeDisabled = createMergeDisabledStore(event);
+  const removeDisabled = createRemoveDisabledStore(event);
 
   const selectAllChecked = derived([configManager], ([$configManager]) => {
     return (
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 03f3ee7e8..e5a711d7e 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -1,11 +1,6 @@
 import { logger } from "./../../../runtime/runtime.store";
 import { runtime, user_input } from "../../../runtime/runtime.store";
-import {
-  configManager,
-  ConfigTarget,
-  ConfigList,
-  ConfigObject,
-} from "../../panels/configuration/Configuration.store";
+import { configManager } from "../../panels/configuration/Configuration.store";
 import {
   EventType,
   EventTypeToNumber,
@@ -42,33 +37,6 @@ function handleError(e: any) {
   }
 }
 
-export async function loadPreset({ dx, dy, page, element, preset }) {
-  configManager
-    .loadPreset({
-      x: dx,
-      y: dy,
-      element: element,
-      preset: preset,
-    })
-    .catch((error) => {
-      console.warn(error);
-      Promise.reject(error);
-    });
-}
-
-export async function loadProfile({ dx, dy, page, profile }) {
-  configManager
-    .loadProfile({
-      x: dx,
-      y: dy,
-      profile: profile,
-    })
-    .catch((error) => {
-      console.warn(error);
-      Promise.reject(error);
-    });
-}
-
 export async function copyElement({ dx, dy, page, element }) {
   logger.set({
     type: "progress",
@@ -79,7 +47,10 @@ export async function copyElement({ dx, dy, page, element }) {
 
   //Fetching all unloaded elements configuration
   return runtime
-    .fetch_element_configuration_from_grid(dx, dy, page, element)
+    .getModule(dx, dy)
+    .getPage(page)
+    .getElement(element)
+    .load()
     .then(async (desc) => {
       const current = ConfigTarget.create({
         device: {
diff --git a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
index b5c346c22..be9fdf8a8 100644
--- a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
+++ b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
@@ -1,9 +1,12 @@
-<script>
-  import { ConfigTarget } from "./../configuration/Configuration.store";
+<script lang="ts">
+  import { GridElement } from "./../../../runtime/runtime";
   import { onDestroy, onMount } from "svelte";
   import { v4 as uuidv4 } from "uuid";
   import { appSettings } from "../../../runtime/app-helper.store";
-  import { moduleOverlay } from "../../../runtime/moduleOverlay";
+  import {
+    moduleOverlay,
+    ModuleOverlayType,
+  } from "../../../runtime/moduleOverlay";
 
   import { Analytics } from "../../../runtime/analytics.js";
 
@@ -55,7 +58,12 @@
   $: handleUserInputChange($user_input);
 
   function handleUserInputChange(ui) {
-    const target = ConfigTarget.createFrom({ userInput: ui });
+    const target = runtime
+      .getModule(ui.dx, ui.dy)
+      .getPage(ui.pagenumber)
+      .getElement(ui.elementnumber)
+      .getEvent(ui.eventtype);
+
     if (typeof target === "undefined") {
       return;
     }
@@ -63,7 +71,7 @@
     selectedModuleType = runtime.modules.find(
       (device) => device.dx == ui.dx && device.dy == ui.dy
     ).type;
-    selectedControlElementType = target.elementType;
+    selectedControlElementType = target.type;
     sendSelectedComponentInfos(selectedModuleType, selectedControlElementType);
   }
 
@@ -171,9 +179,9 @@
   async function handleProvideSelectedConfigForEditor(event) {
     selectedConfigStore.set(event.data.config);
     if (typeof get(selectedConfigStore) !== "undefined") {
-      moduleOverlay.show("configuration-load-overlay");
+      moduleOverlay.show(ModuleOverlayType.CONFIGURATION_LOAD);
     } else {
-      if (get(moduleOverlay) === "configuration-load-overlay") {
+      if (get(moduleOverlay) === ModuleOverlayType.CONFIGURATION_LOAD) {
         moduleOverlay.close();
       }
     }
@@ -192,19 +200,17 @@
 
       const ui = get(user_input);
       runtime
-        .fetch_page_configuration_from_grid({
-          dx: ui.dx,
-          dy: ui.dy,
-          page: ui.pagenumber,
-        })
-        .then((desc) => {
+        .getModule(ui.dx, ui.dy)
+        .getPage(ui.pagenumber)
+        .load()
+        .then(() => {
           const ui = get(user_input);
 
           let name = undefined;
           let description = "Click here to add description";
           let id = uuidv4();
 
-          let config = {
+          let config: any = {
             name: name,
             id: id,
             description: description,
@@ -239,10 +245,13 @@
                   (elemet) => elemet.elementIndex === ui.elementnumber
                 );
 
-                const current = ConfigTarget.createFrom({ userInput: ui });
-                const type = current.getElement().type;
+                const current = runtime
+                  .getModule(ui.dx, ui.dy)
+                  .getPage(ui.pagenumber)
+                  .getElement(ui.elementnumber)
+                  .getEvent(ui.eventtype);
 
-                config.type = type;
+                config.type = (current.parent as GridElement).type;
                 config.configs = {
                   events: element.events.map((ev) => {
                     return {
diff --git a/src/renderer/runtime/runtime.store.ts b/src/renderer/runtime/runtime.store.ts
index 9e44580a4..509df2ce0 100644
--- a/src/renderer/runtime/runtime.store.ts
+++ b/src/renderer/runtime/runtime.store.ts
@@ -1,4 +1,4 @@
-import { writable, get } from "svelte/store";
+import { writable, get, type Writable } from "svelte/store";
 import { writeBuffer, sendHeartbeat } from "./engine.store";
 import { appSettings } from "./app-helper.store";
 import { modal } from "../main/modals/modal.store";
@@ -155,7 +155,7 @@ export function update_ledColorStore(descr) {
 export const logger = writable();
 
 function create_user_input() {
-  const defaultValues = {
+  const defaultValues: UserInputValue = {
     dx: undefined,
     dy: undefined,
     pagenumber: undefined,
@@ -317,6 +317,14 @@ function create_user_input() {
   };
 }
 
+export type UserInputValue = {
+  dx: number;
+  dy: number;
+  pagenumber: number;
+  elementnumber: number;
+  eventtype: number;
+};
+
 export const user_input = create_user_input();
 
 export const runtime = new GridRuntime();
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 55746f368..d3406bb68 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -3,6 +3,8 @@ import {
   Architecture,
   ElementType,
   ModuleType,
+  GridScript,
+  EventType,
 } from "@intechstudio/grid-protocol";
 import {
   writable,
@@ -25,13 +27,25 @@ import {
   user_input,
 } from "./runtime.store";
 import { v4 as uuidv4 } from "uuid";
+import { getComponentInformation } from "../lib/_configs";
 
 type UUID = string;
+type LuaScript = string;
 interface NodeData {
   id?: UUID;
   parent?: RuntimeNode<any>;
 }
 
+type ProfileData = any;
+type PresetData = any;
+type ProfileLoadResult = any;
+type PresetLoadResult = any;
+
+export type SendToGridResult = {
+  value: boolean;
+  text: string;
+};
+
 abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
   protected _internal: Writable<T>;
 
@@ -96,10 +110,19 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
 
   // Generalized setter
   protected setField<K extends keyof T>(key: K, value: T[K]) {
+    const currentValue = this.getField(key);
+
+    // Do nothing if the value has not changed
+    if (currentValue === value) {
+      return;
+    }
+
+    // Proceed with the update if the value has changed
     this.update((store) => {
       store[key] = value;
       return store;
     });
+
     this.notifyParent();
   }
 }
@@ -115,7 +138,79 @@ export class GridAction extends RuntimeNode<ActionData> {
     super(parent, data);
   }
 
+  static parse(script: LuaScript) {
+    const result: GridAction[] = [];
+    let configList: string[] = [];
+    let actionString = script;
+    // get rid of new line, enter
+    actionString = actionString.replace(/[\n\r]+/g, "");
+    // get rid of more than 2 spaces
+    actionString = actionString.replace(/\s{2,10}/g, " ");
+    // remove lua opening and closing characters
+    // this function is used for both parsing full config (long complete lua) and individiual actions lua
+    if (actionString.startsWith("<?lua")) {
+      actionString = actionString.split("<?lua")[1].split("?>")[0];
+    }
+    // split by meta comments
+    configList = actionString.split(/(--\[\[@\w+(?:#|\w|\s)*\]\])/);
+
+    configList = configList.slice(1);
+    for (var i = 0; i < configList.length; i += 2) {
+      const split = configList[i]
+        .match(/--\[\[@(.*)\]\]/)
+        ?.at(1)
+        .split(/#(.*)/);
+      const obj = new GridAction(undefined, {
+        //Extract short + name, e.g.: '--[[@gms#name]]' => 'gms'
+        short: split[0],
+        script: configList[i + 1].trim(),
+        name: split.length > 1 ? split[1] : undefined,
+      });
+      result.push(obj);
+    }
+
+    return result;
+  }
+
+  get indentation() {
+    let indentation = 0;
+    const event = this.parent as GridEvent;
+    for (let i = 0; i < event.config.length; i++) {
+      let action = event.config[i];
+
+      if (action.id === this.id) {
+        if (action.information.type === "composite_part") {
+          return indentation - 1;
+        } else {
+          return indentation;
+        }
+      }
+
+      if (action.information.type === "composite_open") {
+        indentation++;
+      } else if (action.information.type === "composite_close") {
+        --indentation;
+      }
+    }
+  }
+
+  static getInformation(short: string) {
+    const result = getComponentInformation({ short: short });
+    return result.information;
+  }
+
   // Getters
+  get information() {
+    let result = GridAction.getInformation(this.short);
+
+    //Backward compatibility
+    if (typeof result === "undefined") {
+      result = GridAction.getInformation("raw");
+    }
+
+    return result;
+  }
+
   get script() {
     return this.getField("script");
   }
@@ -147,6 +242,18 @@ export class GridAction extends RuntimeNode<ActionData> {
     }]] ${this.script}`;
   }
 
+  sendToGrid(): Promise<SendToGridResult> {
+    const event = this.parent as GridEvent;
+    return event.sendToGrid();
+  }
+
+  //Returns true if syntax is OK
+  checkSyntax() {
+    const code =
+      this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
+    return GridScript.checkSyntax(code);
+  }
+
   //Refactor this out
   isEqual(other: GridAction) {
     return (
@@ -168,9 +275,139 @@ export class GridEvent extends RuntimeNode<EventData> {
     super(parent, data);
   }
 
+  replace(id: UUID, action: GridAction) {
+    const index = this.config.findIndex((e) => e.id === id);
+    try {
+      this.remove(id);
+      this.add(index, action);
+    } catch (e) {
+      `Replace failed! Reason: ${e}`;
+    }
+  }
+
+  remove(id: UUID) {
+    const actions = this.config;
+    const index = actions.findIndex((e) => e.id === id);
+    if (index === -1) {
+      throw `Remove failed! Action with id of ${id} is not found.`;
+    }
+
+    this.config[index].parent = undefined;
+    this.config = actions.splice(index, 1);
+  }
+
+  add(index: number, action: GridAction) {
+    const actions = this.config;
+
+    if (index < 0 || index > actions.length) {
+      throw `Add failed! Invalid index: ${index}.`;
+    }
+
+    actions.splice(index, 0, action);
+    this.config = actions;
+  }
+
+  push(...action: GridAction[]) {
+    const actions = this.config;
+    actions.push(...action);
+    this.config = actions;
+  }
+
+  getAction(index: number) {
+    const actions = this.config;
+    return actions.at(index);
+  }
+
+  sendToGrid(): Promise<SendToGridResult> {
+    return new Promise((resolve, reject) => {
+      if (!this.checkLength()) {
+        reject("Length Error");
+        return;
+      }
+
+      if (!this.loaded) {
+        resolve({ value: true, text: "Nothing to sync, not loaded yet." });
+      }
+
+      const element = this.parent as GridElement;
+      const page = element.parent as GridPage;
+      const module = page.parent as GridModule;
+
+      instructions
+        .sendConfigToGrid(
+          module.dx,
+          module.dy,
+          page.pageNumber,
+          element.elementIndex,
+          this.type,
+          this.toLua()
+        )
+        .then(() => {
+          resolve({ value: true, text: "OK" });
+        })
+        .catch((e) => reject(e));
+    });
+  }
+
+  //Returns TRUE if config syntax is OK
+  checkSyntax() {
+    for (const action of this.config) {
+      if (!action.checkSyntax()) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  //Returns TRUE if inside limit
+  checkLength() {
+    const script = this.toLua();
+    return script.length < grid.getProperty("CONFIG_LENGTH");
+  }
+
+  get loaded() {
+    return typeof this.config !== "undefined";
+  }
+
+  async load(): Promise<GridAction[]> {
+    return new Promise((resolve, reject) => {
+      if (this.loaded) {
+        return resolve(this.config);
+      }
+
+      const element = this.parent as GridElement;
+      const page = element.parent as GridPage;
+      const module = page.parent as GridModule;
+
+      instructions
+        .fetchConfigFromGrid(
+          module.dx,
+          module.dy,
+          page.pageNumber,
+          element.elementIndex,
+          this.type
+        )
+        .then((descr) => {
+          const actions = GridAction.parse(descr.class_parameters.ACTIONSTRING);
+          this.clear();
+          this.push(...actions);
+          resolve(actions);
+        })
+        .catch((e) => reject(e));
+    });
+  }
+
   // Getters
   get config() {
-    return this.getField("config");
+    return new Promise((resolve) => {
+      if (this.loaded) {
+        resolve(this.getField("config"));
+      } else {
+        this.load().then((actions) => {
+          resolve(actions);
+        });
+      }
+    });
   }
 
   get stored() {
@@ -228,7 +465,9 @@ export class GridEvent extends RuntimeNode<EventData> {
   }
 
   clear() {
+    this.config.forEach((e) => (e.parent = undefined));
     this.config = undefined;
+    this.stored.forEach((e) => (e.parent = undefined));
     this.stored = undefined;
   }
 }
@@ -257,6 +496,32 @@ export class GridElement extends RuntimeNode<ElementData> {
     }
   }
 
+  loadPreset(preset: PresetData): Promise<PresetLoadResult> {
+    return new Promise((resolve, reject) => {
+      this.load().then(() => {
+        //PRESET LOAD
+        resolve("OK");
+      });
+    });
+  }
+
+  getEvent(type: number) {
+    const events = this.events;
+    return events.find((event) => event.type === type);
+  }
+
+  async load() {
+    const promises: Array<Promise<void>> = [];
+    for (const event of this.events) {
+      promises.push(
+        new Promise((resolve) => {
+          event.load().then(() => resolve());
+        })
+      );
+    }
+    Promise.all(promises);
+  }
+
   // Getters
   get elementIndex() {
     return this.getField("elementIndex");
@@ -317,6 +582,46 @@ export class GridPage extends RuntimeNode<PageData> {
     }
   }
 
+  loadProfile(profile: ProfileData): Promise<ProfileLoadResult> {
+    return new Promise((resolve, reject) => {
+      const ui = get(user_input);
+      this.load().then(() => {
+        const elements = profile.elements;
+        // Reorder array to send system element first
+        const index = elements.findIndex((obj) => obj.elementIndex === 255);
+
+        // Check if the object with id === 255 was found
+        if (index !== -1) {
+          // Remove the object at the found index
+          const objectToMove = elements.splice(index, 1)[0];
+
+          // Add the object to the front of the array
+          elements.unshift(objectToMove);
+        }
+
+        //PROFILE LOAD
+        resolve("OK");
+      });
+    });
+  }
+
+  getElement(index: number) {
+    const elements = this.control_elements;
+    return elements.find((element) => element.elementIndex === index);
+  }
+
+  async load() {
+    const promises: Array<Promise<void>> = [];
+    for (const element of this.control_elements) {
+      promises.push(
+        new Promise((resolve) => {
+          element.load().then(() => resolve());
+        })
+      );
+    }
+    Promise.all(promises);
+  }
+
   // Getters
   get pageNumber() {
     return this.getField("pageNumber");
@@ -380,6 +685,23 @@ export class GridModule extends RuntimeNode<ModuleData> {
     ];
   }
 
+  getPage(index: number) {
+    const pages = this.pages;
+    return pages.find((page) => page.pageNumber === index);
+  }
+
+  async load() {
+    const promises: Array<Promise<void>> = [];
+    for (const page of this.pages) {
+      promises.push(
+        new Promise((resolve) => {
+          page.load().then(() => resolve());
+        })
+      );
+    }
+    Promise.all(promises);
+  }
+
   // Getters
   get alive() {
     return this.getField("alive");
@@ -489,6 +811,11 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     super(undefined, { modules: [] });
   }
 
+  getModule(dx: number, dy: number) {
+    const modules = this.modules;
+    return modules.find((module) => module.dx === dx && module.dy === dy);
+  }
+
   get modules() {
     return this.getField("modules");
   }
@@ -556,10 +883,11 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
               event
             );
 
-            const actions = createActionsFromString(
-              dest,
+            const actions = GridAction.parse(
               descr.class_parameters.ACTIONSTRING
             );
+            dest.clear();
+            dest.push(...actions);
 
             this.update_event_configuration(
               dx,
@@ -704,121 +1032,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  element_preset_load(x, y, element, preset): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const ui = get(user_input);
-      let events = preset.configs.events;
-      const promises = [];
-      events.forEach((e) => {
-        const page = ui.pagenumber;
-        const event = e.event;
-
-        let dest = this.findUpdateDestEvent(
-          this.modules,
-          x,
-          y,
-          page,
-          element,
-          event
-        );
-        if (typeof dest !== "undefined") {
-          dest.config = createActionsFromString(dest, e.config);
-          const promise = instructions.sendConfigToGrid(
-            x,
-            y,
-            page,
-            element,
-            event,
-            e.config
-          );
-
-          promises.push(promise);
-        }
-      });
-      Promise.all(promises)
-        .then(() => {
-          resolve();
-          logger.set({
-            type: "success",
-            mode: 0,
-            classname: "elementoverwrite",
-            message: `Overwrite done!`,
-          });
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
-  whole_page_overwrite(x, y, array): Promise<void> {
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "profileload",
-      message: `Profile load started...`,
-    });
-
-    return new Promise((resolve, reject) => {
-      // Reorder array to send system element first
-      const index = array.findIndex((obj) => obj.elementIndex === 255);
-
-      // Check if the object with id === 255 was found
-      if (index !== -1) {
-        // Remove the object at the found index
-        const objectToMove = array.splice(index, 1)[0];
-
-        // Add the object to the front of the array
-        array.unshift(objectToMove);
-      }
-
-      let ui = structuredClone(get(user_input));
-      const promises = [];
-      array.forEach((elem) => {
-        elem.events.forEach((ev) => {
-          ui.elementnumber = elem.controlElementNumber;
-          ui.eventtype = ev.event;
-
-          const page = ui.pagenumber;
-          const element = ui.elementnumber;
-          const event = ui.eventtype;
-
-          let dest = this.findUpdateDestEvent(
-            this.modules,
-            x,
-            y,
-            page,
-            element,
-            event
-          );
-          if (dest) {
-            dest.config = createActionsFromString(dest, ev.config);
-          }
-
-          const promise = instructions.sendConfigToGrid(
-            x,
-            y,
-            page,
-            element,
-            event,
-            ev.config
-          );
-
-          promises.push(promise);
-        });
-      });
-      Promise.all(promises)
-        .then((desc) => {
-          logger.set({
-            type: "success",
-            mode: 0,
-            classname: "profileload",
-            message: `Profile load complete!`,
-          });
-          resolve();
-        })
-        .catch((e) => reject(e));
-    });
-  }
-
   update_event_configuration(
     dx: number,
     dy: number,
@@ -847,125 +1060,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     }
   }
 
-  send_event_configuration_to_grid(
-    dx,
-    dy,
-    page,
-    element,
-    event
-  ): Promise<void> {
-    return new Promise((resolve, reject) => {
-      let dest = this.findUpdateDestEvent(
-        this.modules,
-        dx,
-        dy,
-        page,
-        element,
-        event
-      );
-      if (dest) {
-        const script = `<?lua ${dest.config.map((e) => e.toLua()).join("")} ?>`;
-        instructions
-          .sendConfigToGrid(dx, dy, page, element, event, script)
-          .then((desc) => {
-            resolve();
-          })
-          .catch((e) => reject(e));
-      } else {
-        reject("DEST not found!");
-      }
-    });
-  }
-
-  // whole element copy: fetches all event configs from a control element
-  fetch_element_configuration_from_grid(dx, dy, pageNumber, elementNumber) {
-    const device = this.modules.find(
-      (device) => device.dx == dx && device.dy == dy
-    );
-    const page = device.pages.find((x) => x.pageNumber == pageNumber);
-    const element = page.control_elements.find(
-      (x) => x.elementIndex == elementNumber
-    );
-    const events = element.events;
-
-    const promises = events.map((e) => {
-      const eventType = e.type;
-      const dest = {
-        dx: dx,
-        dy: dy,
-        page: pageNumber,
-        element: elementNumber,
-        event: eventType,
-      };
-      const promise = this.fetchOrLoadConfig(dest);
-      return promise;
-    });
-
-    return Promise.all(promises);
-  }
-
-  fetch_page_configuration_from_grid({ dx, dy, page }) {
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "profilesave",
-      message: `Preparing configs...`,
-    });
-
-    let device = this.modules.find(
-      (device) => device.dx == dx && device.dy == dy
-    );
-
-    if (typeof device === "undefined") {
-      logger.set({
-        type: "fail",
-        mode: 0,
-        classname: "profilesave",
-        message: `No module selected`,
-      });
-
-      return Promise.reject(`No module selected`);
-    }
-
-    const pageIndex = device.pages.findIndex((x) => x.pageNumber == page);
-    const controlElements = device.pages[pageIndex].control_elements;
-
-    const fetchArray = [];
-
-    controlElements.forEach((controlElement) => {
-      controlElement.events.forEach((e) => {
-        if (typeof e.config === "undefined") {
-          // put it into the fetchArray
-          fetchArray.push({
-            event: e.type,
-            elementIndex: controlElement.elementIndex,
-          });
-        }
-      });
-    });
-
-    // clear the writeBuffer to make sure that there are no fetch operations that may interfere with the callback
-    // writeBuffer.clear();
-
-    if (fetchArray.length === 0) {
-      //nothing to do, let's do calback
-      return Promise.resolve();
-    }
-
-    const promises = fetchArray.map((e) => {
-      const promise = this.fetchOrLoadConfig({
-        dx: dx,
-        dy: dy,
-        page: page,
-        element: e.elementIndex,
-        event: e.event,
-      });
-      return promise;
-    });
-
-    return Promise.all(promises);
-  }
-
   clear_page_configuration(index) {
     this.modules.forEach((module) => {
       module.pages[index].control_elements.forEach((control_element) => {
@@ -1212,38 +1306,3 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     this.setDefaultSelectedElement();
   }
 }
-
-//TODO: helper function to refactor out
-export function createActionsFromString(parent: GridEvent, script: string) {
-  const result: GridAction[] = [];
-  let configList: string[] = [];
-  let actionString = script;
-  // get rid of new line, enter
-  actionString = actionString.replace(/[\n\r]+/g, "");
-  // get rid of more than 2 spaces
-  actionString = actionString.replace(/\s{2,10}/g, " ");
-  // remove lua opening and closing characters
-  // this function is used for both parsing full config (long complete lua) and individiual actions lua
-  if (actionString.startsWith("<?lua")) {
-    actionString = actionString.split("<?lua")[1].split("?>")[0];
-  }
-  // split by meta comments
-  configList = actionString.split(/(--\[\[@\w+(?:#|\w|\s)*\]\])/);
-
-  configList = configList.slice(1);
-  for (var i = 0; i < configList.length; i += 2) {
-    const split = configList[i]
-      .match(/--\[\[@(.*)\]\]/)
-      ?.at(1)
-      .split(/#(.*)/);
-    const obj = new GridAction(parent, {
-      //Extract short + name, e.g.: '--[[@gms#name]]' => 'gms'
-      short: split[0],
-      script: configList[i + 1].trim(),
-      name: split.length > 1 ? split[1] : undefined,
-    });
-    result.push(obj);
-  }
-
-  return result;
-}

From 14d73627bf0ef55a714e409ae7be6cbb9090c9b1 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Wed, 25 Sep 2024 20:46:48 +0200
Subject: [PATCH 18/42] Daily push

---
 src/renderer/App.svelte                       |   5 +-
 src/renderer/config-blocks/LedColor.svelte    |  13 +-
 src/renderer/config-blocks/LedPhase.svelte    |  17 +-
 .../headers/ButtonStepFace.svelte             |   7 +-
 src/renderer/lib/_configs.js                  |   1 -
 src/renderer/main.js                          |  20 +-
 .../grid-layout/grid-modules/Device.svelte    |  70 ++---
 .../overlays/PresetLoadOverlay.svelte         |  18 +-
 .../overlays/ProfileLoadOverlay.svelte        |   7 +-
 .../underlays/ActiveChanges.svelte            |  49 +---
 .../configuration/Configuration.store.ts      |  49 ++--
 .../panels/configuration/Configuration.svelte |  15 +-
 .../panels/configuration/EventPanel.svelte    |   5 +-
 .../components/ActionPicker.svelte            |  12 +-
 .../configuration/components/Toolbar.svelte   |  63 ++--
 .../configuration/configuration-actions.ts    | 151 ++--------
 .../panels/profileCloud/ProfileCloud.svelte   |  27 +-
 src/renderer/runtime/runtime.ts               | 277 ++++++------------
 src/renderer/serialport/instructions.ts       |   2 +-
 19 files changed, 291 insertions(+), 517 deletions(-)

diff --git a/src/renderer/App.svelte b/src/renderer/App.svelte
index 8776dad3b..436b88ac2 100644
--- a/src/renderer/App.svelte
+++ b/src/renderer/App.svelte
@@ -233,11 +233,14 @@
     }
   }
 
+  let loaded = false;
+
   //Disable Context Menu
-  onMount(() => {
+  onMount(async () => {
     document.addEventListener("contextmenu", function (event) {
       event.preventDefault();
     });
+    loaded = true;
   });
 
   onDestroy(() => {
diff --git a/src/renderer/config-blocks/LedColor.svelte b/src/renderer/config-blocks/LedColor.svelte
index f77643907..1490238b0 100644
--- a/src/renderer/config-blocks/LedColor.svelte
+++ b/src/renderer/config-blocks/LedColor.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" context="module">
+  import { runtime } from "./../runtime/runtime.store";
   import type { ActionBlockInformation } from "./ActionBlockInformation.ts";
   // Component for the untoggled "header" of the component
   import RegularActionBlockFace from "./headers/RegularActionBlockFace.svelte";
@@ -54,7 +55,6 @@ A -> B : AB-First step
   import { configManager } from "../main/panels/configuration/Configuration.store";
   import Toggle from "../main/user-interface/Toggle.svelte";
   import { get } from "svelte/store";
-  import { ConfigTarget } from "./../main/panels/configuration/Configuration.store";
   import { ElementType } from "@intechstudio/grid-protocol";
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
   import { Validator } from "./_validators";
@@ -98,7 +98,6 @@ A -> B : AB-First step
   // config.script cannot be undefined
   $: if (config.script && !loaded) {
     const _segments = Script.toSegments({
-      human: config.human,
       short: config.short,
       script: config.script,
     });
@@ -134,7 +133,6 @@ A -> B : AB-First step
     const _temp_segments = [...scriptSegments, beautyMode];
 
     const script = Script.toScript({
-      human: config.human,
       short: config.short,
       array: _temp_segments,
     });
@@ -164,8 +162,13 @@ A -> B : AB-First step
     suggestions = _suggestions.map((s, i) => {
       if (i === 1) {
         const ui = get(user_input);
-        const target = ConfigTarget.createFrom({ userInput: ui });
-        switch (target.elementType) {
+        const target = runtime.findElement(
+          ui.dx,
+          ui.dy,
+          ui.pagenumber,
+          ui.elementnumber
+        );
+        switch (target.type) {
           case ElementType.BUTTON:
             return [
               { value: "1", info: "Button layer" },
diff --git a/src/renderer/config-blocks/LedPhase.svelte b/src/renderer/config-blocks/LedPhase.svelte
index fbcb11866..c72f43c9d 100644
--- a/src/renderer/config-blocks/LedPhase.svelte
+++ b/src/renderer/config-blocks/LedPhase.svelte
@@ -52,13 +52,16 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { Script } from "./_script_parsers.js";
-  import { LocalDefinitions, user_input } from "../runtime/runtime.store";
+  import {
+    LocalDefinitions,
+    runtime,
+    user_input,
+  } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { configManager } from "../main/panels/configuration/Configuration.store";
   import { get } from "svelte/store";
-  import { ConfigTarget } from "./../main/panels/configuration/Configuration.store";
   import { ElementType } from "@intechstudio/grid-protocol";
 
   export let config;
@@ -104,7 +107,6 @@
     scriptSegments[index] = e;
     // important to set the function name = human readable for now
     const script = Script.toScript({
-      human: config.human,
       short: config.short,
       array: scriptSegments,
     });
@@ -140,8 +142,13 @@
     suggestions = _suggestions.map((s, i) => {
       if (i === 1) {
         const ui = get(user_input);
-        const target = ConfigTarget.createFrom({ userInput: ui });
-        switch (target.elementType) {
+        const target = runtime.findElement(
+          ui.dx,
+          ui.dy,
+          ui.pagenumber,
+          ui.elementnumber
+        );
+        switch (target.type) {
           case ElementType.BUTTON:
             return [
               { value: "1", info: "Button layer" },
diff --git a/src/renderer/config-blocks/headers/ButtonStepFace.svelte b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
index d8fe24cf9..a45e78374 100644
--- a/src/renderer/config-blocks/headers/ButtonStepFace.svelte
+++ b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
@@ -2,7 +2,6 @@
   import { EventData, GridAction, GridEvent } from "./../../runtime/runtime";
   import { createEventDispatcher } from "svelte";
   import { toWords } from "number-to-words";
-  import * as ButtonStepElseIf from "../ButtonStep_ElseIf.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -33,10 +32,8 @@
 
       if (action.short === "bstn") {
         step = ++stack[stack.length - 1];
-        config.script = ButtonStepElseIf.information.defaultLua.replace(
-          "N",
-          String(step)
-        );
+        const defaultScript = config.information.defaultLua;
+        config.script = defaultScript.replace("N", String(step));
       }
     }
   }
diff --git a/src/renderer/lib/_configs.js b/src/renderer/lib/_configs.js
index a580adb9d..92b6d2231 100644
--- a/src/renderer/lib/_configs.js
+++ b/src/renderer/lib/_configs.js
@@ -21,7 +21,6 @@ export async function init_config_block_library() {
 
 export function getComponentInformation({ short }) {
   const comps = getAllComponents();
-
   return comps?.find((c) => c.information.short == short);
 }
 
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 83bc6ab06..a4c34cada 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -1,7 +1,21 @@
 import App from "./App.svelte";
+import { init_config_block_library } from "./lib/_configs";
 
-const app = new App({
-  target: document.body,
-});
+let app;
+
+async function initApp() {
+  try {
+    // Wait for the configuration to load before initializing the app
+    await init_config_block_library();
+
+    // Initialize the Svelte app after the configuration is ready
+    app = new App({
+      target: document.body,
+    });
+  } catch (err) {}
+}
+
+// Call the function to initialize the app
+initApp();
 
 export default app;
diff --git a/src/renderer/main/grid-layout/grid-modules/Device.svelte b/src/renderer/main/grid-layout/grid-modules/Device.svelte
index 2ea2644a9..dd57d6e11 100644
--- a/src/renderer/main/grid-layout/grid-modules/Device.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/Device.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { runtime, user_input } from "./../../../runtime/runtime.store.ts";
   import { Analytics } from "./../../../runtime/analytics.js";
   import { contextMenu, contextTarget } from "@intechstudio/grid-uikit";
   import XX16 from "./devices/XX16.svelte";
@@ -20,26 +21,15 @@
   import { appSettings } from "../../../runtime/app-helper.store";
   import { moduleOverlay } from "../../../runtime/moduleOverlay";
   import { selectedConfigStore } from "../../../runtime/config-helper.store";
-  import { user_input } from "../../../runtime/runtime.store";
   import { onMount } from "svelte";
   import ModuleSelection from "./underlays/ModuleBorder.svelte";
-  import { ConfigTarget } from "../../panels/configuration/Configuration.store";
-  import { EventType, EventTypeToNumber } from "@intechstudio/grid-protocol";
-  import { get, writable } from "svelte/store";
+  import { get } from "svelte/store";
   import {
-    loadPreset,
-    loadProfile,
     overwriteElement,
     copyElement,
     discardElement,
     clearElement,
   } from "../../../main/panels/configuration/configuration-actions";
-  import {
-    createCopyAllDisabledStore,
-    createOverwriteDisabledStore,
-    createDiscardElementDisabledStore,
-    createClearElementDisabledStore,
-  } from "../../panels/configuration/configuration-actions";
 
   export let device = undefined;
   export let width = 225;
@@ -89,12 +79,13 @@
     });
 
     const { sender, elementNumber } = e.detail;
-    loadPreset({
-      dx: device.dx,
-      dy: device.dy,
-      element: elementNumber,
-      preset: $selectedConfigStore,
-    })
+    runtime
+      .loadPreset({
+        dx: device.dx,
+        dy: device.dy,
+        element: elementNumber,
+        preset: $selectedConfigStore,
+      })
       .then(() => {
         Analytics.track({
           event: "Preset Load Success",
@@ -124,17 +115,18 @@
     const { sender, device } = e.detail;
 
     Analytics.track({
-      event: "Profile Load Start",
+      event: "Pro file Load Start",
       payload: {},
       mandatory: false,
     });
 
-    loadProfile({
-      dx: device.dx,
-      dy: device.dy,
-      page: 0,
-      profile: $selectedConfigStore.configs,
-    })
+    runtime
+      .loadProfile({
+        dx: device.dx,
+        dy: device.dy,
+        page: 0,
+        profile: $selectedConfigStore.configs,
+      })
       .then(() => {
         sender.dispatchEvent(
           new CustomEvent("profile-load", {
@@ -262,47 +254,37 @@
       let:isLeftCut
       let:isRightCut
     >
-      {@const target = writable(
-        ConfigTarget.create({
-          device: {
-            dx: device.dx,
-            dy: device.dy,
-          },
-          page: get(user_input).pagenumber,
-          element: elementNumber,
-          eventType: EventTypeToNumber(EventType.SETUP),
-        })
+      {@const target = runtime.findElement(
+        device.dx,
+        device.dy,
+        $user_input.pagenumber,
+        elementNumber
       )}
-      {@const overwriteElementDisabled = createOverwriteDisabledStore(target)}
-      {@const copyElementDisabled = createCopyAllDisabledStore(target)}
-      {@const discardElementDisabled =
-        createDiscardElementDisabledStore(target)}
-      {@const clearElementDisabled = createClearElementDisabledStore(target)}
       <button
         use:contextTarget={{
           items: [
             {
               text: [`Copy Element`, `(${modifier[0]} + C)`],
               handler: () => handleCopyElement(elementNumber),
-              isDisabled: () => get(copyElementDisabled),
+              isDisabled: () => false,
               iconPath: "copy_all",
             },
             {
               text: [`Overwrite Element`, `(${modifier[0]} + V)`],
               handler: () => handleOverwriteElement(elementNumber),
-              isDisabled: () => get(overwriteElementDisabled),
+              isDisabled: () => false,
               iconPath: "paste_all",
             },
             {
               text: [`Discard Element Changes`, `(${modifier[0]} + Shift + D)`],
               handler: () => handleDiscardElement(elementNumber),
-              isDisabled: () => get(discardElementDisabled),
+              isDisabled: () => false,
               iconPath: "clear_from_device_01",
             },
             {
               text: [`Clear Element`, `(Shift + Delete)`],
               handler: handleClearElement,
-              isDisabled: () => get(clearElementDisabled),
+              isDisabled: () => false,
               iconPath: "clear_element",
             },
           ],
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
index 2fa7bcc18..8517fd5dd 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+  import { runtime } from "./../../../../runtime/runtime.store.ts";
   import { grid } from "@intechstudio/grid-protocol";
-  import { ConfigTarget } from "./../../../panels/configuration/Configuration.store";
   import { user_input } from "./../../../../runtime/runtime.store";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
   import { createEventDispatcher, onMount } from "svelte";
@@ -54,9 +54,11 @@
       return;
     }
 
-    const { dx, dy } = ConfigTarget.getCurrent().device;
+    const ui = get(user_input);
+    const target = runtime.findModule(ui.dx, ui.dy);
+    const { dx, dy } = target;
+
     if (dx !== device.dx || dy !== device.dy) {
-      const ui = get(user_input);
       user_input.set({
         dx: device.dx,
         dy: device.dy,
@@ -75,21 +77,15 @@
     const { dx, dy } = obj;
     const ui = get(user_input);
 
-    const target = ConfigTarget.create({
-      device: { dx: dx, dy: dy },
-      page: ui.pagenumber,
-      element: elementNumber,
-      eventType: 0,
-    });
+    const target = runtime.findElement(dx, dy, ui.pagenumber, elementNumber);
 
     if (typeof target === "undefined") {
       isChanged = false;
       return;
     }
 
-    const events = target.events;
     //Find the event that has change
-    const changed = events.find((e: GridEvent) => e.hasChanges());
+    const changed = target.hasChanges();
     isChanged = typeof changed !== "undefined";
   }
 
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
index f3287e943..fd5358859 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
@@ -5,7 +5,6 @@
   import { appSettings } from "../../../../runtime/app-helper.store";
   import { createEventDispatcher } from "svelte";
   import { SvgIcon } from "@intechstudio/grid-uikit";
-  import { ConfigTarget } from "../../../panels/configuration/Configuration.store";
 
   export let device = undefined;
   export let visible = false;
@@ -37,9 +36,11 @@
       return;
     }
 
-    const { dx, dy } = ConfigTarget.getCurrent().device;
+    const ui = get(user_input);
+    const target = runtime.findModule(ui.dx, ui.dy);
+
+    const { dx, dy } = target;
     if (dx !== device.dx || dy !== device.dy) {
-      const ui = get(user_input);
       user_input.set({
         dx: device.dx,
         dy: device.dy,
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
index 4b23ee72d..814f81bbb 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
@@ -1,41 +1,22 @@
-<script>
-  import { ConfigTarget } from "./../../../panels/configuration/Configuration.store";
-  import { user_input } from "../../../../runtime/runtime.store";
+<script lang="ts">
+  import { GridModule, GridElement } from "./../../../../runtime/runtime";
+  import { user_input, runtime } from "../../../../runtime/runtime.store";
   import { createEventDispatcher } from "svelte";
-  import { get } from "svelte/store";
 
-  export let elementNumber;
-  export let isLeftCut;
-  export let isRightCut;
-  export let device;
-  export let visible = false;
+  export let elementNumber: number;
+  export let isLeftCut: boolean;
+  export let isRightCut: boolean;
+  export let device: GridModule;
+  export let visible: boolean = false;
 
   const dispatch = createEventDispatcher();
 
-  let isChanged = false;
-
-  $: handleDeviceChange(device);
-
-  function handleDeviceChange(obj) {
-    const { dx, dy } = obj;
-    const ui = get(user_input);
-
-    const target = ConfigTarget.create({
-      device: { dx: dx, dy: dy },
-      page: ui.pagenumber,
-      element: elementNumber,
-      eventType: 0,
-    });
-
-    if (typeof target === "undefined") {
-      isChanged = false;
-      return;
-    }
-
-    //Find the event that has change
-    const changed = target.events.find((e) => e.hasChanges());
-    isChanged = typeof changed !== "undefined";
-  }
+  const element: GridElement = runtime.findElement(
+    device.dx,
+    device.dy,
+    $user_input.pagenumber,
+    elementNumber
+  );
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -43,7 +24,7 @@
 {#if visible}
   <div
     class="changeable-element
-    {isChanged ? 'changed-element' : ''}
+    {element.hasChanges() ? 'changed-element' : ''}
       {isRightCut ? 'corner-cut-r' : ''}
       {isLeftCut ? 'corner-cut-l' : ''}"
     style="   {elementNumber == 255
diff --git a/src/renderer/main/panels/configuration/Configuration.store.ts b/src/renderer/main/panels/configuration/Configuration.store.ts
index 32f6bf427..71a623a44 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.ts
+++ b/src/renderer/main/panels/configuration/Configuration.store.ts
@@ -5,7 +5,6 @@ import {
   user_input,
   UserInputValue,
 } from "../../../runtime/runtime.store";
-import { init_config_block_library } from "../../../lib/_configs";
 import { GridAction } from "../../../runtime/runtime";
 
 export let lastOpenedActionblocks = writable([]);
@@ -37,39 +36,31 @@ export const configManager = create_configuration_manager();
 
 function create_configuration_manager(): ConfigManager {
   const internal = writable([]);
-  const loadAndInit = async () => {
-    await init_config_block_library();
-    user_input.subscribe((ui) => {
-      createConfigListFrom(ui)
-        .then((list) => {
-          internal.set(list);
-        })
-        .catch((e) => {
-          console.warn(e);
-          internal.set([]);
-        });
-    });
-  };
 
-  loadAndInit();
+  user_input.subscribe((ui) => {
+    createConfigListFrom(ui)
+      .then((list) => {
+        internal.set(list);
+      })
+      .catch((e) => {
+        console.warn(e);
+        internal.set([]);
+      });
+  });
 
   function createConfigListFrom(ui: UserInputValue): Promise<GridAction[]> {
     return new Promise((resolve, reject) => {
-      const event = runtime
-        .getModule(ui.dx, ui.dy)
-        .getPage(ui.pagenumber)
-        .getElement(ui.elementnumber)
-        .getEvent(ui.eventtype);
+      const event = runtime.findEvent(
+        ui.dx,
+        ui.dy,
+        ui.pagenumber,
+        ui.elementnumber,
+        ui.eventtype
+      );
 
-      event
-        .load()
-        .then((list) => {
-          resolve(list);
-        })
-        .catch((e) => {
-          console.log(e);
-          reject(e);
-        });
+      event.load().then((list) => {
+        resolve(list);
+      });
     });
   }
 
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 19a7c69a4..5b84f653d 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -16,7 +16,6 @@
   import { logger, runtime, user_input } from "../../../runtime/runtime.store";
 
   import {
-    ConfigTarget,
     configManager,
     lastOpenedActionblocksInsert,
   } from "./Configuration.store";
@@ -83,9 +82,15 @@
   //////////////////////////////////////////////////////////////////////////////
 
   function sendCurrentConfigurationToGrid() {
-    $configManager
-      .sendTo({ target: ConfigTarget.createFrom({ userInput: $user_input }) })
-      .catch((e) => handleError(e));
+    const ui = get(user_input);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
+    target.sendToGrid();
   }
 
   //////////////////////////////////////////////////////////////////////////////
@@ -196,7 +201,6 @@
 
   function handleConfigInsertion(e) {
     let { index, configs } = e.detail;
-    const parent = ConfigTarget.getCurrent();
     insertAction(index, configs, parent.runtimeRef);
     sendCurrentConfigurationToGrid();
   }
@@ -206,7 +210,6 @@
     updateAction(index, config);
     sendCurrentConfigurationToGrid();
 
-    const target = ConfigTarget.getCurrent();
     if (typeof target === "undefined") {
       return;
     }
diff --git a/src/renderer/main/panels/configuration/EventPanel.svelte b/src/renderer/main/panels/configuration/EventPanel.svelte
index 3b3cd65a3..f279717c5 100644
--- a/src/renderer/main/panels/configuration/EventPanel.svelte
+++ b/src/renderer/main/panels/configuration/EventPanel.svelte
@@ -28,10 +28,7 @@
   $: handleUserInputChange($user_input);
 
   function handleUserInputChange(ui: UserInputValue) {
-    target = runtime
-      .getModule(ui.dx, ui.dy)
-      .getPage(ui.pagenumber)
-      .getElement(ui.elementnumber);
+    target = runtime.findElement(ui.dx, ui.dy, ui.pagenumber, ui.elementnumber);
 
     if (typeof target === "undefined") {
       options = defaultOptions;
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index f917c8117..e532775e2 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -81,11 +81,13 @@
 
   function getAvailableOptions(configs) {
     const ui = get(user_input);
-    const target = runtime
-      .getModule(ui.dx, ui.dy)
-      .getPage(ui.pagenumber)
-      .getElement(ui.elementnumber)
-      .getEvent(ui.eventtype);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
 
     if (typeof configs === "undefined" || typeof target === "undefined") {
       throw "Unexpected Error";
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index c585aba7f..f102c8917 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -1,19 +1,12 @@
 <script lang="ts">
+  import {
+    appClipboard,
+    ClipboardKey,
+  } from "./../../../../runtime/clipboard.store";
   import { GridEvent, GridElement } from "./../../../../runtime/runtime";
   import { UserInputValue } from "./../../../../runtime/runtime.store";
   import { derived } from "svelte/store";
   import { runtime, user_input } from "./../../../../runtime/runtime.store";
-  import {
-    createCopyAllDisabledStore,
-    createOverwriteDisabledStore,
-    createDiscardElementDisabledStore,
-    createClearElementDisabledStore,
-    createMergeDisabledStore,
-    createCutDisabledStore,
-    createCopyDisabledStore,
-    createPasteDisabledStore,
-    createRemoveDisabledStore,
-  } from "../configuration-actions";
   import { shortcut } from "./../../../_actions/shortcut.action";
   import MoltenToolbarButton from "../../../user-interface/MoltenToolbarButton.svelte";
   import Options from "./Options.svelte";
@@ -98,26 +91,25 @@
 
   let event: GridEvent;
   let element: GridElement;
+
   $: handleUserInputChange($user_input);
 
   function handleUserInputChange(ui: UserInputValue) {
-    element = runtime
-      .getModule(ui.dx, ui.dy)
-      .getPage(ui.pagenumber)
-      .getElement(ui.elementnumber);
-    event = element.getEvent(ui.eventtype);
+    element = runtime.findElement(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber
+    );
+    event = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
   }
 
-  const copyElementDisabled = createCopyAllDisabledStore(event);
-  const overwriteElementDisabled = createOverwriteDisabledStore(event);
-  const discardElementDisabled = createDiscardElementDisabledStore(event);
-  const clearElementDisabled = createClearElementDisabledStore(event);
-  const copyDisabled = createCopyDisabledStore(event);
-  const pasteDisabled = createPasteDisabledStore(event);
-  const cutDisabled = createCutDisabledStore(event);
-  const mergeActionToCodeDisabled = createMergeDisabledStore(event);
-  const removeDisabled = createRemoveDisabledStore(event);
-
   const selectAllChecked = derived([configManager], ([$configManager]) => {
     return (
       typeof $configManager.find((e) => !e.selected) === "undefined" &&
@@ -152,7 +144,7 @@
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyC" }}
         iconPath={"copy_all"}
-        disabled={$copyElementDisabled}
+        disabled={$runtime.modules.length === 0 || false}
         color={"#03cb00"}
       />
 
@@ -163,7 +155,8 @@
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyV" }}
         iconPath={"paste_all"}
-        disabled={$overwriteElementDisabled}
+        disabled={$appClipboard?.key !== ClipboardKey.ELEMENT ||
+          !element?.isCompatible($appClipboard?.payload.elementType)}
         color={"#006cb7"}
       />
 
@@ -181,7 +174,7 @@
           code: "KeyD",
         }}
         iconPath={"clear_from_device_01"}
-        disabled={$discardElementDisabled}
+        disabled={!element?.hasChanges()}
         color={"#ff2323"}
       />
 
@@ -195,7 +188,7 @@
           code: "Delete",
         }}
         iconPath={"clear_element"}
-        disabled={$clearElementDisabled}
+        disabled={$runtime.modules.length === 0}
         color={"#A020F0"}
       />
     </div>
@@ -206,7 +199,7 @@
           setToolbarHoverText(`Copy Action(s)`, `(${modifier[0]} + C)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyC" }}
-        disabled={$copyDisabled}
+        disabled={false}
         iconPath={"copy"}
         color={"#03cb00"}
       />
@@ -217,7 +210,7 @@
           setToolbarHoverText(`Paste Action(s)`, `(${modifier[0]} + V)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyV" }}
-        disabled={$pasteDisabled}
+        disabled={$appClipboard?.key !== ClipboardKey.ACTION_BLOCKS}
         iconPath={"paste"}
         color={"#006cb7"}
       />
@@ -228,7 +221,7 @@
           setToolbarHoverText(`Cut Action(s)`, `(${modifier[0]} + X)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyX" }}
-        disabled={$cutDisabled}
+        disabled={false}
         iconPath={"cut"}
         color={"#ff6100"}
       />
@@ -246,7 +239,7 @@
           shift: true,
           code: "KeyM",
         }}
-        disabled={$mergeActionToCodeDisabled}
+        disabled={false}
         iconPath={"merge_as_code"}
         color={"#ffcc33"}
       />
@@ -259,7 +252,7 @@
         shortcut={{
           code: "Delete",
         }}
-        disabled={$removeDisabled}
+        disabled={false}
         iconPath={"remove"}
         color={"#ff2323"}
       />
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index e5a711d7e..8a5b2df7d 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -1,43 +1,9 @@
-import { logger } from "./../../../runtime/runtime.store";
-import { runtime, user_input } from "../../../runtime/runtime.store";
-import { configManager } from "../../panels/configuration/Configuration.store";
-import {
-  EventType,
-  EventTypeToNumber,
-  grid,
-  GridScript,
-} from "@intechstudio/grid-protocol";
-import { Writable, derived, get } from "svelte/store";
-import { ClipboardKey, appClipboard } from "../../../runtime/clipboard.store";
-import {
-  createActionsFromString,
-  GridAction,
-  GridEvent,
-} from "../../../runtime/runtime";
-
-function handleError(e: any) {
-  switch (e.type) {
-    case "lengthError":
-      logger.set({
-        type: "fail",
-        mode: 0,
-        classname: "luanotok",
-        message: `${e.device}: Modifications can not be synced with grid, 
-        maximum character limit reached. Shorten your code or delete action blocks.`,
-      });
-      break;
-    case "syntaxError":
-      logger.set({
-        type: "fail",
-        mode: 0,
-        classname: "luanotok",
-        message: `${e.device}: Syntax error on ${e.element.no} ${e.event.type} event.`,
-      });
-      break;
-  }
-}
+import { GridAction, GridEvent } from "../../../runtime/runtime";
+
+type ConfigObject = any;
 
 export async function copyElement({ dx, dy, page, element }) {
+  /*
   logger.set({
     type: "progress",
     mode: 0,
@@ -96,9 +62,11 @@ export async function copyElement({ dx, dy, page, element }) {
       console.warn(error);
       Promise.reject(error);
     });
+    */
 }
 
 export async function overwriteElement({ dx, dy, page, element }) {
+  /*
   const clipboard = get(appClipboard);
   if (clipboard?.key !== ClipboardKey.ELEMENT) {
     throw `Overwrite Element: Invalid clipboard type ${clipboard?.key}`;
@@ -148,9 +116,11 @@ export async function overwriteElement({ dx, dy, page, element }) {
       configManager.set(list);
     });
   });
+  */
 }
 
-export async function discardElement({ dx, dy, page, element }): Promise<void> {
+export async function discardElement({ dx, dy, page, element }) {
+  /*
   logger.set({
     type: "progress",
     mode: 0,
@@ -209,9 +179,11 @@ export async function discardElement({ dx, dy, page, element }): Promise<void> {
       console.warn(error);
       return Promise.reject(error);
     });
+    */
 }
 
 export function selectAction(index: number, value: boolean) {
+  /*
   configManager.update((s: ConfigList) => {
     const stack: any[] = [];
     let n = index;
@@ -227,6 +199,7 @@ export function selectAction(index: number, value: boolean) {
     } while (stack.length > 0);
     return s;
   });
+  */
 }
 
 export function insertAction(
@@ -234,6 +207,7 @@ export function insertAction(
   configs: ConfigObject[],
   parent: GridEvent
 ) {
+  /*
   if (typeof index === "undefined") {
     index = get(configManager).length;
   }
@@ -260,9 +234,11 @@ export function insertAction(
     }
     return s;
   });
+  */
 }
 
 export function updateAction(index: number, newConfig: ConfigObject) {
+  /*
   const { short, script, name } = newConfig;
 
   const cm = get(configManager);
@@ -297,9 +273,11 @@ export function updateAction(index: number, newConfig: ConfigObject) {
       message: `Update failed! Config limit reached, shorten your code, or delete actions!`,
     });
   }
+  */
 }
 
 export function mergeActionToCode(index: number, configs: ConfigObject[]) {
+  /*
   //Merge scripts
   const script = configs.map((e) => e.script).join(" ");
 
@@ -332,9 +310,11 @@ export function mergeActionToCode(index: number, configs: ConfigObject[]) {
     s = s.filter((config) => !config.selected) as ConfigList;
     return s;
   });
+  */
 }
 
 export function copyActions() {
+  /*
   const clipboard = get(configManager)
     .filter((e) => e.selected)
     .map((e) => {
@@ -353,9 +333,11 @@ export function copyActions() {
     key: ClipboardKey.ACTION_BLOCKS,
     payload: clipboard,
   });
+  */
 }
 
-export function pasteActions(index: number | undefined): Promise<void> {
+export function pasteActions(index: number | undefined) {
+  /*
   return new Promise((resolve, reject) => {
     if (typeof index === "undefined") {
       index = get(configManager).length;
@@ -384,9 +366,11 @@ export function pasteActions(index: number | undefined): Promise<void> {
     });
     error ? reject("Paste failed") : resolve();
   });
+  */
 }
 
 export function removeActions() {
+  /*
   configManager.update((s: ConfigList) => {
     s.forEach((config) => {
       if (config.selected) {
@@ -395,11 +379,14 @@ export function removeActions() {
     });
     return s.filter((config) => !config.selected);
   });
+  */
 }
 
 export function cutActions() {
+  /*
   copyActions();
   removeActions();
+  */
 }
 
 export function clearElement(
@@ -407,7 +394,8 @@ export function clearElement(
   dy: number,
   pageNumber: number,
   elementNumber: number
-): Promise<void> {
+) {
+  /*
   const device: any = runtime.modules.find(
     (e: any) => e.dx === dx && e.dy === dy
   );
@@ -454,84 +442,5 @@ export function clearElement(
   return Promise.all(promises).then(() => {
     configManager.refresh();
   });
-}
-
-//////////////////////////////////
-/// State management functions ///
-//////////////////////////////////
-
-export function createOverwriteDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived([watched, appClipboard], ([$watched, $appClipboard]) => {
-    if (
-      typeof $watched === "undefined" ||
-      typeof $appClipboard === "undefined" ||
-      $appClipboard.key === ClipboardKey.ACTION_BLOCKS
-    ) {
-      return true;
-    }
-
-    const compatible = grid.is_element_compatible_with(
-      $appClipboard.payload.elementType,
-      $watched.elementType
-    );
-    return !compatible;
-  });
-}
-
-export function createCopyAllDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived(
-    [watched, configManager, runtime],
-    ([$watched, $configManager, $runtime]) => {
-      return (
-        typeof $configManager.find((e) => e.selected) !== "undefined" ||
-        runtime.modules.length === 0
-      );
-    }
-  );
-}
-
-export function createDiscardElementDisabledStore(
-  watched: Writable<ConfigTarget>
-) {
-  return derived([watched, configManager], ([$watched, $configManager]) => {
-    return !$watched?.hasChanges() ?? true;
-  });
-}
-
-export function createClearElementDisabledStore(
-  watched: Writable<ConfigTarget>
-) {
-  return derived([watched, runtime], ([$watched, $runtime]) => {
-    return runtime.modules.length === 0;
-  });
-}
-
-export function createCopyDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived([watched, configManager], ([$watched, $configManager]) => {
-    return typeof $configManager.find((e) => e.selected) === "undefined";
-  });
-}
-
-export function createPasteDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived([watched, appClipboard], ([$watched, $appClipboard]) => {
-    return $appClipboard?.key !== ClipboardKey.ACTION_BLOCKS;
-  });
-}
-
-export function createCutDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived([watched, configManager], ([$watched, $configManager]) => {
-    return typeof $configManager.find((e) => e.selected) === "undefined";
-  });
-}
-
-export function createMergeDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived([watched, configManager], ([$watched, $configManager]) => {
-    return typeof $configManager.find((e) => e.selected) === "undefined";
-  });
-}
-
-export function createRemoveDisabledStore(watched: Writable<ConfigTarget>) {
-  return derived([watched, configManager], ([$watched, $configManager]) => {
-    return typeof $configManager.find((e) => e.selected) === "undefined";
-  });
+  */
 }
diff --git a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
index be9fdf8a8..dee82c3c2 100644
--- a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
+++ b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
@@ -58,11 +58,13 @@
   $: handleUserInputChange($user_input);
 
   function handleUserInputChange(ui) {
-    const target = runtime
-      .getModule(ui.dx, ui.dy)
-      .getPage(ui.pagenumber)
-      .getElement(ui.elementnumber)
-      .getEvent(ui.eventtype);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
 
     if (typeof target === "undefined") {
       return;
@@ -200,8 +202,7 @@
 
       const ui = get(user_input);
       runtime
-        .getModule(ui.dx, ui.dy)
-        .getPage(ui.pagenumber)
+        .findPage(ui.dx, ui.dy, ui.pagenumber)
         .load()
         .then(() => {
           const ui = get(user_input);
@@ -245,11 +246,13 @@
                   (elemet) => elemet.elementIndex === ui.elementnumber
                 );
 
-                const current = runtime
-                  .getModule(ui.dx, ui.dy)
-                  .getPage(ui.pagenumber)
-                  .getElement(ui.elementnumber)
-                  .getEvent(ui.eventtype);
+                const current = runtime.findEvent(
+                  ui.dx,
+                  ui.dy,
+                  ui.pagenumber,
+                  ui.elementnumber,
+                  ui.eventtype
+                );
 
                 config.type = (current.parent as GridElement).type;
                 config.configs = {
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index d3406bb68..8e8b1edff 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -253,39 +253,35 @@ export class GridAction extends RuntimeNode<ActionData> {
       this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
     return GridScript.checkSyntax(code);
   }
-
-  //Refactor this out
-  isEqual(other: GridAction) {
-    return (
-      this.name === other.name &&
-      this.script === other.script &&
-      this.short === other.short
-    );
-  }
 }
 
 export interface EventData extends NodeData {
-  config?: Array<GridAction> | undefined;
-  stored?: Array<GridAction> | undefined;
+  config?: Array<GridAction>;
   type: number;
 }
 
 export class GridEvent extends RuntimeNode<EventData> {
+  private stored: LuaScript | undefined;
+  private loaded: boolean;
+
   constructor(parent: GridElement, data?: EventData) {
     super(parent, data);
+    this.stored = undefined;
+    this.config = data.config ?? [];
+    this.loaded = false;
   }
 
-  replace(id: UUID, action: GridAction) {
+  public replace(id: UUID, action: GridAction) {
     const index = this.config.findIndex((e) => e.id === id);
     try {
       this.remove(id);
-      this.add(index, action);
+      this.insert(index, action);
     } catch (e) {
       `Replace failed! Reason: ${e}`;
     }
   }
 
-  remove(id: UUID) {
+  public remove(id: UUID) {
     const actions = this.config;
     const index = actions.findIndex((e) => e.id === id);
     if (index === -1) {
@@ -296,36 +292,38 @@ export class GridEvent extends RuntimeNode<EventData> {
     this.config = actions.splice(index, 1);
   }
 
-  add(index: number, action: GridAction) {
+  public insert(index: number, action: GridAction) {
     const actions = this.config;
 
     if (index < 0 || index > actions.length) {
       throw `Add failed! Invalid index: ${index}.`;
     }
 
+    action.parent = this;
     actions.splice(index, 0, action);
     this.config = actions;
   }
 
-  push(...action: GridAction[]) {
+  public push(...action: GridAction[]) {
     const actions = this.config;
+    action.forEach((e) => (e.parent = this));
     actions.push(...action);
     this.config = actions;
   }
 
-  getAction(index: number) {
+  public actionAt(index: number) {
     const actions = this.config;
     return actions.at(index);
   }
 
-  sendToGrid(): Promise<SendToGridResult> {
+  public sendToGrid(): Promise<SendToGridResult> {
     return new Promise((resolve, reject) => {
       if (!this.checkLength()) {
         reject("Length Error");
         return;
       }
 
-      if (!this.loaded) {
+      if (!this.isLoaded()) {
         resolve({ value: true, text: "Nothing to sync, not loaded yet." });
       }
 
@@ -349,8 +347,7 @@ export class GridEvent extends RuntimeNode<EventData> {
     });
   }
 
-  //Returns TRUE if config syntax is OK
-  checkSyntax() {
+  public checkSyntax() {
     for (const action of this.config) {
       if (!action.checkSyntax()) {
         return false;
@@ -359,19 +356,18 @@ export class GridEvent extends RuntimeNode<EventData> {
     return true;
   }
 
-  //Returns TRUE if inside limit
-  checkLength() {
+  public checkLength() {
     const script = this.toLua();
     return script.length < grid.getProperty("CONFIG_LENGTH");
   }
 
-  get loaded() {
-    return typeof this.config !== "undefined";
+  public isLoaded() {
+    return this.loaded;
   }
 
-  async load(): Promise<GridAction[]> {
+  public async load(): Promise<GridAction[]> {
     return new Promise((resolve, reject) => {
-      if (this.loaded) {
+      if (this.isLoaded()) {
         return resolve(this.config);
       }
 
@@ -388,87 +384,66 @@ export class GridEvent extends RuntimeNode<EventData> {
           this.type
         )
         .then((descr) => {
-          const actions = GridAction.parse(descr.class_parameters.ACTIONSTRING);
+          const script = descr.class_parameters.ACTIONSTRING;
+          const actions = GridAction.parse(script);
           this.clear();
+          this.config = [];
           this.push(...actions);
+          this.store();
+          this.loaded = true;
           resolve(actions);
         })
         .catch((e) => reject(e));
     });
   }
 
-  // Getters
-  get config() {
-    return new Promise((resolve) => {
-      if (this.loaded) {
-        resolve(this.getField("config"));
-      } else {
-        this.load().then((actions) => {
-          resolve(actions);
-        });
-      }
-    });
-  }
-
-  get stored() {
-    return this.getField("stored");
-  }
-
-  get type() {
-    return this.getField("type");
-  }
-
-  // Setters
-  private set config(value: Array<GridAction>) {
-    this.setField("config", value);
-  }
-
-  private set stored(value: Array<GridAction>) {
-    this.setField("stored", value);
-  }
-
-  private set type(value: number) {
-    this.setField("type", value);
-  }
-
-  //Methods
-  toLua() {
+  public toLua() {
     return `<?lua ${this.config
       .map((e) => e.toLua())
       .join("")
       .replace(/(\r\n|\n|\r)/gm, "")} ?>`;
   }
 
-  hasChanges(): boolean {
-    if (this.stored === undefined) {
+  public hasChanges(): boolean {
+    if (this.isStored()) {
       return false;
     }
+    return this.stored !== this.toLua();
+  }
 
-    if (this.config.length !== this.stored.length) {
+  public isStored() {
+    if (!this.isLoaded()) {
       return true;
     }
 
-    for (let i = 0; i < this.config.length; ++i) {
-      if (!this.config[i].isEqual(this.stored[i])) {
-        return true;
-      }
-    }
-
-    return false;
+    return this.stored === this.toLua();
   }
 
-  store(value: Array<GridAction>) {
-    this.stored = value.map(
-      (e) =>
-        new GridAction(this, { script: e.script, short: e.short, name: e.name })
-    );
+  public store() {
+    this.stored = this.toLua();
   }
 
-  clear() {
-    this.config.forEach((e) => (e.parent = undefined));
+  public clear() {
+    this.config?.forEach((e) => (e.parent = undefined));
     this.config = undefined;
-    this.stored.forEach((e) => (e.parent = undefined));
-    this.stored = undefined;
+  }
+
+  // Getters
+  public get config() {
+    return this.getField("config");
+  }
+
+  public get type() {
+    return this.getField("type");
+  }
+
+  // Setters
+  private set config(value: Array<GridAction>) {
+    this.setField("config", value);
+  }
+
+  private set type(value: number) {
+    this.setField("type", value);
   }
 }
 
@@ -490,12 +465,19 @@ export class GridElement extends RuntimeNode<ElementData> {
         new GridEvent(this, {
           type: Number(event.value),
           config: undefined,
-          stored: undefined,
         })
       );
     }
   }
 
+  public hasChanges() {
+    return this.events.some((e) => e.hasChanges());
+  }
+
+  isCompatible(type: ElementType) {
+    return grid.is_element_compatible_with(type, this.type);
+  }
+
   loadPreset(preset: PresetData): Promise<PresetLoadResult> {
     return new Promise((resolve, reject) => {
       this.load().then(() => {
@@ -505,7 +487,7 @@ export class GridElement extends RuntimeNode<ElementData> {
     });
   }
 
-  getEvent(type: number) {
+  findEvent(type: number) {
     const events = this.events;
     return events.find((event) => event.type === type);
   }
@@ -605,7 +587,7 @@ export class GridPage extends RuntimeNode<PageData> {
     });
   }
 
-  getElement(index: number) {
+  findElement(index: number) {
     const elements = this.control_elements;
     return elements.find((element) => element.elementIndex === index);
   }
@@ -685,7 +667,7 @@ export class GridModule extends RuntimeNode<ModuleData> {
     ];
   }
 
-  getPage(index: number) {
+  findPage(index: number) {
     const pages = this.pages;
     return pages.find((page) => page.pageNumber === index);
   }
@@ -811,11 +793,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     super(undefined, { modules: [] });
   }
 
-  getModule(dx: number, dy: number) {
-    const modules = this.modules;
-    return modules.find((module) => module.dx === dx && module.dy === dy);
-  }
-
   get modules() {
     return this.getField("modules");
   }
@@ -825,84 +802,30 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     this.setField("modules", value);
   }
 
-  findUpdateDestEvent(
-    modules: GridModule[],
+  findEvent(
     dx: number,
     dy: number,
     page: number,
     element: number,
     event: number
   ) {
-    let _event = undefined;
-    // this elementnumber check refers to uninitialized UI...
-    if (element !== -1) {
-      modules.forEach((module) => {
-        if (module.dx == dx && module.dy == dy) {
-          const pageIndex = module.pages.findIndex((x) => x.pageNumber == page);
-          const elementIndex = module.pages[
-            pageIndex
-          ].control_elements.findIndex((x) => x.elementIndex == element);
-          _event = module.pages[pageIndex].control_elements[
-            elementIndex
-          ].events.find((e) => e.type == event);
-        }
-      });
-    }
-    return _event;
+    return this.findModule(dx, dy)
+      ?.findPage(page)
+      ?.findElement(element)
+      ?.findEvent(event);
   }
 
-  fetchOrLoadConfig({ dx, dy, page, element, event }): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const _device = this.modules.find(
-        (device) => device.dx == dx && device.dy == dy
-      );
-      const _page = _device.pages.find((e) => e.pageNumber == page);
-      const _element = _page.control_elements.find(
-        (e) => e.elementIndex == element
-      );
-      const _event = _element.events.find((e) => e.type == event);
+  findElement(dx: number, dy: number, page: number, element: number) {
+    return this.findModule(dx, dy)?.findPage(page)?.findElement(element);
+  }
 
-      if (typeof _event.config !== "undefined") {
-        resolve();
-      } else {
-        instructions
-          .fetchConfigFromGrid(dx, dy, page, element, event)
-          .then((descr) => {
-            const dx = descr.brc_parameters.SX;
-            const dy = descr.brc_parameters.SY;
-            const page = descr.class_parameters.PAGENUMBER;
-            const element = descr.class_parameters.ELEMENTNUMBER;
-            const event = descr.class_parameters.EVENTTYPE;
-
-            let dest = this.findUpdateDestEvent(
-              this.modules,
-              dx,
-              dy,
-              page,
-              element,
-              event
-            );
-
-            const actions = GridAction.parse(
-              descr.class_parameters.ACTIONSTRING
-            );
-            dest.clear();
-            dest.push(...actions);
-
-            this.update_event_configuration(
-              dx,
-              dy,
-              page,
-              element,
-              event,
-              actions
-            );
-
-            resolve();
-          })
-          .catch((e) => reject(e));
-      }
-    });
+  findPage(dx: number, dy: number, page: number) {
+    return this.findModule(dx, dy)?.findPage(page);
+  }
+
+  findModule(dx: number, dy: number) {
+    const modules = this.modules;
+    return modules.find((module) => module.dx === dx && module.dy === dy);
   }
 
   isFirmwareMismatch(currentFirmware, requiredFirmware) {
@@ -1032,34 +955,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  update_event_configuration(
-    dx: number,
-    dy: number,
-    page: number,
-    element: number,
-    event: number,
-    actions: GridAction[]
-  ) {
-    // config
-
-    let dest = this.findUpdateDestEvent(
-      this.modules,
-      dx,
-      dy,
-      page,
-      element,
-      event
-    );
-    if (dest) {
-      actions.forEach((e) => (e.parent = dest));
-      dest.config = actions;
-
-      if (typeof dest.stored === "undefined") {
-        dest.store(dest.config);
-      }
-    }
-  }
-
   clear_page_configuration(index) {
     this.modules.forEach((module) => {
       module.pages[index].control_elements.forEach((control_element) => {
@@ -1229,9 +1124,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
               .find((e) => e.pageNumber == index)
               ?.control_elements.forEach((element) => {
                 element.events.forEach((event) => {
-                  if (event.stored !== event.config) {
-                    event.store(event.config);
-                  }
+                  event.store();
                 });
               });
           });
diff --git a/src/renderer/serialport/instructions.ts b/src/renderer/serialport/instructions.ts
index ab768f85b..a8b08b0e2 100644
--- a/src/renderer/serialport/instructions.ts
+++ b/src/renderer/serialport/instructions.ts
@@ -8,7 +8,7 @@ import {
   BufferElement,
   InstructionClass,
   InstructionClassName,
-} from "../runtime/engine.store.ts";
+} from "../runtime/engine.store";
 import { logger } from "../runtime/runtime.store";
 import { v4 as uuidv4 } from "uuid";
 

From 192c672ba2ad1fbc49fa26cb29aad1090ce7e436 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 26 Sep 2024 19:59:39 +0200
Subject: [PATCH 19/42] Daily push

---
 src/renderer/config-blocks/GamePadAxis.svelte |   8 +-
 .../config-blocks/GamePadButton.svelte        |   8 +-
 .../config-blocks/LedAnimationStart.svelte    |   8 +-
 .../config-blocks/LedAnimationStop.svelte     |   8 +-
 src/renderer/config-blocks/LedColor.svelte    |   8 +-
 src/renderer/config-blocks/LedPhase.svelte    |   8 +-
 src/renderer/config-blocks/Lookup.svelte      |   8 +-
 src/renderer/config-blocks/Midi.svelte        |   8 +-
 .../config-blocks/MidiFourteenBit.svelte      |   8 +-
 src/renderer/config-blocks/MidiNRPN.svelte    |   8 +-
 src/renderer/config-blocks/MouseButton.svelte |   8 +-
 src/renderer/config-blocks/MouseMove.svelte   |   8 +-
 src/renderer/config-blocks/TimerSource.svelte |   8 +-
 src/renderer/config-blocks/TimerStart.svelte  |   8 +-
 src/renderer/config-blocks/TimerStop.svelte   |   8 +-
 src/renderer/main/modals/Export.svelte        |   6 +-
 .../panels/DebugMonitor/DebugMonitor.svelte   |   6 +-
 .../panels/MidiMonitor/MidiMonitor.svelte     |   6 +-
 .../configuration/Configuration.store.ts      | 105 +++++-----
 .../panels/configuration/Configuration.svelte | 190 ++++++++++--------
 .../components/ActionPicker.svelte            |   8 +-
 .../components/DynamicWrapper.svelte          |  82 ++++----
 .../configuration/components/Options.svelte   |   6 +-
 .../configuration/components/Toolbar.svelte   |  63 ++----
 .../configuration/configuration-actions.ts    | 144 +++++++------
 .../panels/preferences/Preferences.svelte     |   4 +-
 .../main/user-interface/ActiveChanges.svelte  |   6 +-
 src/renderer/runtime/runtime.ts               |  36 ++--
 28 files changed, 397 insertions(+), 385 deletions(-)

diff --git a/src/renderer/config-blocks/GamePadAxis.svelte b/src/renderer/config-blocks/GamePadAxis.svelte
index 25bba99a2..165ea2931 100644
--- a/src/renderer/config-blocks/GamePadAxis.svelte
+++ b/src/renderer/config-blocks/GamePadAxis.svelte
@@ -60,7 +60,7 @@
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
 
   import { Validator } from "./_validators.js";
 
@@ -119,10 +119,10 @@
     [],
   ];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/GamePadButton.svelte b/src/renderer/config-blocks/GamePadButton.svelte
index 086d12461..4c8a55f34 100644
--- a/src/renderer/config-blocks/GamePadButton.svelte
+++ b/src/renderer/config-blocks/GamePadButton.svelte
@@ -56,7 +56,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { Script } from "./_script_parsers.js";
   import { Validator } from "./_validators.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
@@ -147,10 +147,10 @@
     ],
   ];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/LedAnimationStart.svelte b/src/renderer/config-blocks/LedAnimationStart.svelte
index f5a2f4525..9fe5fd3ec 100644
--- a/src/renderer/config-blocks/LedAnimationStart.svelte
+++ b/src/renderer/config-blocks/LedAnimationStart.svelte
@@ -57,7 +57,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
 
   export let config;
   export let humanScript;
@@ -148,10 +148,10 @@
 
   let suggestions = [];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
 
diff --git a/src/renderer/config-blocks/LedAnimationStop.svelte b/src/renderer/config-blocks/LedAnimationStop.svelte
index 7ad6a02fa..617dbd4f4 100644
--- a/src/renderer/config-blocks/LedAnimationStop.svelte
+++ b/src/renderer/config-blocks/LedAnimationStop.svelte
@@ -57,7 +57,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
 
   export let config;
   export let humanScript;
@@ -148,10 +148,10 @@
 
   let suggestions = [];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s) => [...s, ...localDefinitions]);
diff --git a/src/renderer/config-blocks/LedColor.svelte b/src/renderer/config-blocks/LedColor.svelte
index 1490238b0..92627680d 100644
--- a/src/renderer/config-blocks/LedColor.svelte
+++ b/src/renderer/config-blocks/LedColor.svelte
@@ -52,7 +52,7 @@ A -> B : AB-First step
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import Toggle from "../main/user-interface/Toggle.svelte";
   import { get } from "svelte/store";
   import { ElementType } from "@intechstudio/grid-protocol";
@@ -149,14 +149,14 @@ A -> B : AB-First step
 
   let suggestions = [];
 
-  $: if ($configManager) {
+  $: if ($config_panel_blocks) {
     updateSuggestions();
   }
 
   function updateSuggestions() {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/LedPhase.svelte b/src/renderer/config-blocks/LedPhase.svelte
index c72f43c9d..99d9a70f3 100644
--- a/src/renderer/config-blocks/LedPhase.svelte
+++ b/src/renderer/config-blocks/LedPhase.svelte
@@ -60,7 +60,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { get } from "svelte/store";
   import { ElementType } from "@intechstudio/grid-protocol";
 
@@ -129,14 +129,14 @@
 
   let suggestions = [];
 
-  $: if ($configManager) {
+  $: if ($config_panel_blocks) {
     updateSuggestions();
   }
 
   function updateSuggestions() {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/Lookup.svelte b/src/renderer/config-blocks/Lookup.svelte
index 5ffb41cdb..443eec928 100644
--- a/src/renderer/config-blocks/Lookup.svelte
+++ b/src/renderer/config-blocks/Lookup.svelte
@@ -39,7 +39,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators";
@@ -67,10 +67,10 @@
   }
 
   let suggestions = [];
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = localDefinitions;
diff --git a/src/renderer/config-blocks/Midi.svelte b/src/renderer/config-blocks/Midi.svelte
index bc2c4d064..8063fda25 100644
--- a/src/renderer/config-blocks/Midi.svelte
+++ b/src/renderer/config-blocks/Midi.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { Script } from "./_script_parsers.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
@@ -655,7 +655,7 @@
 
   let suggestions = [];
 
-  $: if ($configManager) {
+  $: if ($config_panel_blocks) {
     renderSuggestions();
   }
 
@@ -683,9 +683,9 @@
       suggestions = _suggestions;
     }
 
-    const index = $configManager.findIndex((e) => e.id === config.id);
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = suggestions.map((s) => [...localDefinitions, ...s]);
diff --git a/src/renderer/config-blocks/MidiFourteenBit.svelte b/src/renderer/config-blocks/MidiFourteenBit.svelte
index d6d69adbf..624ffac93 100644
--- a/src/renderer/config-blocks/MidiFourteenBit.svelte
+++ b/src/renderer/config-blocks/MidiFourteenBit.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators";
@@ -673,9 +673,9 @@
   let suggestions = [];
 
   function renderSuggestions() {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
 
@@ -684,7 +684,7 @@
     suggestions[2] = [...localDefinitions];
   }
 
-  $: if ($configManager) {
+  $: if ($config_panel_blocks) {
     renderSuggestions();
   }
   const tabs = [
diff --git a/src/renderer/config-blocks/MidiNRPN.svelte b/src/renderer/config-blocks/MidiNRPN.svelte
index a174b2732..bc1a53217 100644
--- a/src/renderer/config-blocks/MidiNRPN.svelte
+++ b/src/renderer/config-blocks/MidiNRPN.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput, MeltCheckbox } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators.js";
@@ -170,9 +170,9 @@
   let suggestions = [];
 
   function renderSuggestions() {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
 
@@ -182,7 +182,7 @@
     suggestions[3] = [...localDefinitions];
   }
 
-  $: if ($configManager) {
+  $: if ($config_panel_blocks) {
     renderSuggestions();
   }
 
diff --git a/src/renderer/config-blocks/MouseButton.svelte b/src/renderer/config-blocks/MouseButton.svelte
index 4dbb1bdbe..913432f09 100644
--- a/src/renderer/config-blocks/MouseButton.svelte
+++ b/src/renderer/config-blocks/MouseButton.svelte
@@ -37,7 +37,7 @@
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { LocalDefinitions } from "../runtime/runtime.store";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { Script } from "./_script_parsers.js";
   import { Validator } from "./_validators";
 
@@ -97,10 +97,10 @@
     ],
   ];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/MouseMove.svelte b/src/renderer/config-blocks/MouseMove.svelte
index 3aa0fbdc5..0a54f38ed 100644
--- a/src/renderer/config-blocks/MouseMove.svelte
+++ b/src/renderer/config-blocks/MouseMove.svelte
@@ -40,7 +40,7 @@
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
 
   import { Validator } from "./_validators";
 
@@ -96,10 +96,10 @@
     [],
   ];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/TimerSource.svelte b/src/renderer/config-blocks/TimerSource.svelte
index f7735a596..f5dcad68f 100644
--- a/src/renderer/config-blocks/TimerSource.svelte
+++ b/src/renderer/config-blocks/TimerSource.svelte
@@ -39,7 +39,7 @@
   import { Script } from "./_script_parsers.js";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
   import { Validator } from "./_validators";
 
@@ -90,10 +90,10 @@
 
   let suggestions;
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/TimerStart.svelte b/src/renderer/config-blocks/TimerStart.svelte
index c1bb93586..159274cb1 100644
--- a/src/renderer/config-blocks/TimerStart.svelte
+++ b/src/renderer/config-blocks/TimerStart.svelte
@@ -39,7 +39,7 @@
   import { Script } from "./_script_parsers.js";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
   import { Validator } from "./_validators";
 
@@ -83,10 +83,10 @@
 
   const _suggestions = [[], []];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/config-blocks/TimerStop.svelte b/src/renderer/config-blocks/TimerStop.svelte
index b3652dd53..d16a1152d 100644
--- a/src/renderer/config-blocks/TimerStop.svelte
+++ b/src/renderer/config-blocks/TimerStop.svelte
@@ -36,7 +36,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { configManager } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
   import { LocalDefinitions } from "../runtime/runtime.store";
   import { Validator } from "./_validators";
 
@@ -71,10 +71,10 @@
 
   const _suggestions = [[]];
 
-  $: if ($configManager) {
-    const index = $configManager.findIndex((e) => e.id === config.id);
+  $: if ($config_panel_blocks) {
+    const index = $config_panel_blocks.findIndex((e) => e.id === config.id);
     const localDefinitions = LocalDefinitions.getFrom({
-      configs: $configManager,
+      configs: $config_panel_blocks,
       index: index,
     });
     suggestions = _suggestions.map((s, i) => {
diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
index f7b63168e..b519c143d 100644
--- a/src/renderer/main/modals/Export.svelte
+++ b/src/renderer/main/modals/Export.svelte
@@ -1,13 +1,13 @@
 <script>
   import { modal } from "./modal.store";
-  import { configManager } from "../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../panels/configuration/Configuration.store";
   import MoltenModal from "./MoltenModal.svelte";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
   import MoltenPopup from "../panels/preferences/MoltenPopup.svelte";
 
   function handleCopy() {
     const _tempSpan = document.createElement("input");
-    _tempSpan.value = $configManager.toConfigScript();
+    _tempSpan.value = $config_panel_blocks.toConfigScript();
     _tempSpan.id = "temp-clip";
     document.getElementById("modal-copy-placeholder").append(_tempSpan);
     const _temp = document.querySelector("#temp-clip");
@@ -48,7 +48,7 @@
     </div>
 
     <textarea
-      value={$configManager.toConfigScript()}
+      value={$config_panel_blocks.toConfigScript()}
       class="bg-secondary min-h-200 font-mono w-full p-1 my-1 rounded"
     />
 
diff --git a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
index 3512f1721..b7c593053 100644
--- a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
+++ b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
@@ -16,7 +16,7 @@
   import PolyLineGraph from "../../user-interface/PolyLineGraph.svelte";
   import { incoming_messages } from "../../../serialport/message-stream.store";
   import { Pane, Splitpanes } from "svelte-splitpanes";
-  import { configManager } from "../../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../../panels/configuration/Configuration.store";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   const configScriptLength = writable(0);
@@ -32,8 +32,8 @@
   }
 
   $: {
-    configScriptLength.set($configManager.toConfigScript().length);
-    syntaxError.set($configManager.checkSyntax());
+    configScriptLength.set($config_panel_blocks.toConfigScript().length);
+    syntaxError.set($config_panel_blocks.checkSyntax());
   }
 
   let frozen = false;
diff --git a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
index c3f033d3d..57582f73e 100644
--- a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
+++ b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
@@ -11,7 +11,7 @@
   } from "./MidiMonitor.store";
   import { grid } from "@intechstudio/grid-protocol";
   import { SvgIcon } from "@intechstudio/grid-uikit";
-  import { configManager } from "../../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../../panels/configuration/Configuration.store";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   // ok but slow nice
@@ -20,8 +20,8 @@
   const syntaxError = writable(false);
 
   $: {
-    configScriptLength.set($configManager.toConfigScript().length);
-    syntaxError.set($configManager.checkSyntax());
+    configScriptLength.set($config_panel_blocks.toConfigScript().length);
+    syntaxError.set($config_panel_blocks.checkSyntax());
   }
   const createDebouncedStore = (initialValue, debounceTime) => {
     let timeoutId;
diff --git a/src/renderer/main/panels/configuration/Configuration.store.ts b/src/renderer/main/panels/configuration/Configuration.store.ts
index 71a623a44..e5fac1acb 100644
--- a/src/renderer/main/panels/configuration/Configuration.store.ts
+++ b/src/renderer/main/panels/configuration/Configuration.store.ts
@@ -1,11 +1,13 @@
-import { get, writable, type Writable } from "svelte/store";
-
 import {
-  runtime,
-  user_input,
-  UserInputValue,
-} from "../../../runtime/runtime.store";
-import { GridAction } from "../../../runtime/runtime";
+  derived,
+  get,
+  type Writable,
+  writable,
+  type Readable,
+} from "svelte/store";
+
+import { runtime, user_input } from "../../../runtime/runtime.store";
+import { GridAction, GridEvent } from "../../../runtime/runtime";
 
 export let lastOpenedActionblocks = writable([]);
 
@@ -28,56 +30,59 @@ export function lastOpenedActionblocksRemove(short) {
   lastOpenedActionblocks.set(currentList.filter((e) => e !== short));
 }
 
-type ConfigManager = Writable<GridAction[]> & {
-  refresh: () => void;
+export type ActionBlock = {
+  action: GridAction;
+  selected: boolean;
 };
 
-export const configManager = create_configuration_manager();
+// Derive a readable store from user_input
+export const user_input_event: Readable<GridEvent | undefined> = derived(
+  [user_input, runtime],
+  ([$user_input, $runtime], set) => {
+    const event = runtime.findEvent(
+      $user_input.dx,
+      $user_input.dy,
+      $user_input.pagenumber,
+      $user_input.elementnumber,
+      $user_input.eventtype
+    );
 
-function create_configuration_manager(): ConfigManager {
-  const internal = writable([]);
+    if (typeof event === "undefined") {
+      set(undefined);
+      return;
+    }
 
-  user_input.subscribe((ui) => {
-    createConfigListFrom(ui)
-      .then((list) => {
-        internal.set(list);
+    // Load the event and set it
+    event
+      .load()
+      .then(() => {
+        set(event);
       })
-      .catch((e) => {
-        console.warn(e);
-        internal.set([]);
-      });
-  });
-
-  function createConfigListFrom(ui: UserInputValue): Promise<GridAction[]> {
-    return new Promise((resolve, reject) => {
-      const event = runtime.findEvent(
-        ui.dx,
-        ui.dy,
-        ui.pagenumber,
-        ui.elementnumber,
-        ui.eventtype
-      );
-
-      event.load().then((list) => {
-        resolve(list);
+      .catch((err) => {
+        console.error("Failed to load event:", err);
+        set(undefined); // Handle loading error by setting undefined
       });
-    });
   }
+);
 
-  async function refresh(): Promise<void> {
-    return new Promise((resolve, reject) => {
-      const ui = get(user_input);
-      createConfigListFrom(ui)
-        .then((list) => {
-          configManager.set(list);
-          resolve();
-        })
-        .catch((e) => reject(e));
-    });
-  }
+// Create a writable store for ActionBlock[]
+export const config_panel_blocks: Writable<ActionBlock[]> = create_store();
+
+function create_store() {
+  const internal: Writable<ActionBlock[]> = writable([]);
+
+  // Subscribe to user_input_event changes
+  user_input_event.subscribe((event) => {
+    console.log("Event updated:", event);
+
+    const value =
+      event?.config.map((e) => {
+        return { action: e, selected: false } as ActionBlock;
+      }) || []; // Fallback to an empty array if event is undefined
+
+    // Update the internal writable store
+    internal.set(value);
+  });
 
-  return {
-    ...internal,
-    refresh: refresh,
-  };
+  return internal;
 }
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 5b84f653d..1ac6ceb41 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -1,6 +1,7 @@
-<script>
+<script lang="ts">
+  import { PasteActionsResult } from "./configuration-actions";
   import { appSettings } from "./../../../runtime/app-helper.store.js";
-  import { get } from "svelte/store";
+  import { get, type Writable } from "svelte/store";
   import ElementSelectionPanel from "./ElementSelectionPanel.svelte";
 
   import { Analytics } from "../../../runtime/analytics.js";
@@ -16,8 +17,10 @@
   import { logger, runtime, user_input } from "../../../runtime/runtime.store";
 
   import {
-    configManager,
+    config_panel_blocks,
+    user_input_event,
     lastOpenedActionblocksInsert,
+    ActionBlock,
   } from "./Configuration.store";
 
   import { configListScrollSize } from "../../_actions/boundaries.action";
@@ -39,7 +42,6 @@
   import AddActionButton from "./components/AddActionButton.svelte";
   import { NumberToEventType } from "@intechstudio/grid-protocol";
   import {
-    selectAction,
     insertAction,
     updateAction,
     mergeActionToCode,
@@ -119,6 +121,7 @@
   }
 
   function handleDrop(e) {
+    /*
     if (typeof dropIndex === "undefined") {
       return;
     }
@@ -133,7 +136,7 @@
       return;
     }
 
-    configManager.update((s) => {
+    config_panel_blocks.update((s) => {
       //Collect dragged configs and mark them for deletion
       const temp = [];
       draggedIndexes.forEach((i) => {
@@ -150,6 +153,7 @@
     });
 
     sendCurrentConfigurationToGrid();
+    */
   }
 
   function handleDragStart(e) {
@@ -194,19 +198,36 @@
     }
   }
 
-  function handleSelectionChange(e) {
-    const { index, value } = e.detail;
-    selectAction(index, value);
+  function handleSelectionChange(block: ActionBlock) {
+    config_panel_blocks.update((s) => {
+      const stack: ActionBlock[] = [];
+      let n = s.findIndex((e) => e.action.id === block.action.id);
+      const value = block.selected;
+      do {
+        const current = s[n];
+        if (current.action.information.type === "composite_open") {
+          stack.push(current);
+        } else if (current.action.information.type === "composite_close") {
+          stack.pop();
+        }
+        current.selected = value;
+        ++n;
+      } while (stack.length > 0);
+      return s;
+    });
   }
 
   function handleConfigInsertion(e) {
     let { index, configs } = e.detail;
+    /*
     insertAction(index, configs, parent.runtimeRef);
     sendCurrentConfigurationToGrid();
+    */
   }
 
   function handleConfigUpdate(e) {
     const { index, config } = e.detail;
+    /*
     updateAction(index, config);
     sendCurrentConfigurationToGrid();
 
@@ -224,6 +245,7 @@
       },
       mandatory: false,
     });
+    */
   }
 
   function handleConvertToCodeBlock(e) {
@@ -232,37 +254,6 @@
     sendCurrentConfigurationToGrid();
   }
 
-  function handleCopy(e) {
-    copyActions();
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Copy" },
-      mandatory: false,
-    });
-  }
-
-  function handlePaste(e) {
-    let { index } = e.detail;
-    pasteActions(index)
-      .then(() => {
-        sendCurrentConfigurationToGrid();
-      })
-      .catch((e) => {
-        logger.set({
-          type: "fail",
-          mode: 0,
-          classname: "config-limit-reached",
-          message: `Paste failed! Config limit reached, shorten your code, or delete actions!`,
-        });
-      });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Paste" },
-      mandatory: false,
-    });
-  }
-
   function handleRemove(e) {
     removeActions();
     sendCurrentConfigurationToGrid();
@@ -285,7 +276,7 @@
 
   function handleReplace(e) {
     const { index, config } = e.detail;
-    configManager.update((s) => {
+    config_panel_blocks.update((s) => {
       s[index] = config;
       lastOpenedActionblocksInsert(config.short);
       return s;
@@ -343,13 +334,35 @@
     });
   }
 
-  function handleSelectActionBlock(index) {
-    const configs = get(configManager);
-    const config = configs[index];
-    selectAction(index, !config.selected);
+  function handleCopy() {
+    const blocks = get(config_panel_blocks);
+    const selected = blocks.filter((e) => e.selected).map((e) => e.action);
+    copyActions(selected);
+  }
+
+  function handlePaste() {
+    const ui = get(user_input);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
+
+    pasteActions(target).catch((e) => {
+      const error = e as PasteActionsResult;
+      logger.set({
+        type: "fail",
+        mode: 0,
+        classname: "config-limit-reached",
+        message: `Paste failed! ${error.text}`,
+      });
+    });
   }
 
   function handleClearElement() {
+    /*
     const ui = get(user_input);
     clearElement(ui.dx, ui.dy, ui.pagenumber, ui.elementnumber).catch((e) => {
       console.warn(e);
@@ -360,6 +373,19 @@
       payload: { click: "Clear Element" },
       mandatory: false,
     });
+    */
+  }
+
+  function handleSelectAll() {
+    config_panel_blocks.update((s) => {
+      if (s.every((e) => e.selected)) {
+        s.forEach((e) => (e.selected = false));
+        return s;
+      }
+
+      s.forEach((e) => (e.selected = true));
+      return s;
+    });
   }
 </script>
 
@@ -388,19 +414,20 @@
             on:overwrite-all={handleOverwriteElement}
             on:discard={handleDiscardElement}
             on:clear-element={handleClearElement}
+            on:select-all={handleSelectAll}
           />
         </div>
 
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
-          use:changeOrder={(this, { configs: $configManager })}
+          use:changeOrder={(this, { configs: $config_panel_blocks })}
           on:drag-start={handleDragStart}
           on:drag-target={handleDragTargetChange}
           on:drop={handleDrop}
           on:drag-end={handleDragEnd}
           class="flex flex-col h-full relative justify-between"
         >
-          {#if $configManager.length === 0 && $runtime.modules.length > 0}
+          {#if $config_panel_blocks.length === 0 && $runtime.modules.length > 0}
             <div class="mt-2">
               <AddAction
                 index={0}
@@ -413,7 +440,6 @@
             <config-list
               id="cfg-list"
               style="height:{scrollHeight}"
-              use:configListScrollSize={$configManager}
               on:height={(e) => {
                 scrollHeight = e.detail;
               }}
@@ -438,7 +464,7 @@
                   on:drop-target-change={handleDropTargetChange}
                 />
               {/if}
-              {#each $configManager as config, index (config)}
+              {#each $config_panel_blocks as block, index (block.action.id)}
                 <anim-block
                   animate:flip={{ duration: 300, easing: eases.backOut }}
                   in:fade|global={{ delay: 0 }}
@@ -446,60 +472,56 @@
                   <div class="flex flex-row justify-between relative">
                     <div
                       class="w-full bg-white absolute h-full opacity-10 pointer-events-none z-10"
-                      class:hidden={!config.selected}
+                      class:hidden={!block.selected}
                     />
 
                     <DynamicWrapper
                       {index}
-                      {config}
-                      action={config.runtimeRef}
+                      data={block}
                       on:update={handleConfigUpdate}
                       on:replace={handleReplace}
                       on:select={() => {
-                        handleSelectActionBlock(index);
+                        handleSelectionChange(block);
                       }}
                     />
 
                     <div class="z-20 flex items-center mx-2">
                       <Options
-                        {index}
-                        bind:selected={config.selected}
-                        disabled={!config.information.selectable}
-                        on:selection-change={handleSelectionChange}
+                        bind:selected={block.selected}
+                        disabled={!block.action.information.selectable}
+                        on:select={() => handleSelectionChange(block)}
                       />
                     </div>
                   </div>
-                  {#key index}
-                    {#if typeof $config_drag === "undefined"}
-                      {#if ["composite_close", "single"].includes(config.information.type) || ["single"].includes($configManager[index + 1]?.information.type) || !$appSettings.persistent.actionHelperText || typeof config.information.helperText === "undefined"}
-                        <AddActionLine
+                  {#if typeof $config_drag === "undefined"}
+                    {#if ["composite_close", "single"].includes(block.action.information.type) || ["single"].includes($config_panel_blocks[index + 1]?.action.information.type) || !$appSettings.persistent.actionHelperText || typeof block.action.information.helperText === "undefined"}
+                      <AddActionLine
+                        index={index + 1}
+                        on:paste={handlePaste}
+                        on:new-config={handleConfigInsertion}
+                      />
+                    {:else}
+                      <div class="mr-6">
+                        <AddAction
+                          text={block.action.information.helperText}
                           index={index + 1}
                           on:paste={handlePaste}
                           on:new-config={handleConfigInsertion}
                         />
-                      {:else}
-                        <div class="mr-6">
-                          <AddAction
-                            text={config.information.helperText}
-                            index={index + 1}
-                            on:paste={handlePaste}
-                            on:new-config={handleConfigInsertion}
-                          />
-                        </div>
-                      {/if}
-                    {:else}
-                      <DropZone
-                        index={index + 1}
-                        thresholdTop={10}
-                        thresholdBottom={10}
-                        class={index + 1 == $configManager.length
-                          ? "h-full"
-                          : ""}
-                        drag_target={draggedIndexes}
-                        on:drop-target-change={handleDropTargetChange}
-                      />
+                      </div>
                     {/if}
-                  {/key}
+                  {:else}
+                    <DropZone
+                      index={index + 1}
+                      thresholdTop={10}
+                      thresholdBottom={10}
+                      class={index + 1 == $config_panel_blocks.length
+                        ? "h-full"
+                        : ""}
+                      drag_target={draggedIndexes}
+                      on:drop-target-change={handleDropTargetChange}
+                    />
+                  {/if}
                 </anim-block>
               {/each}
             </config-list>
@@ -510,8 +532,8 @@
           class:invisible={$runtime.modules.length === 0}
         >
           <AddActionButton
-            index={$configManager.length}
-            on:paste={handlePaste}
+            index={$config_panel_blocks.length}
+            on:pasteconfig_panel}
             on:new-config={handleConfigInsertion}
           />
           <ExportConfigs />
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index e532775e2..5c3a6ed25 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -16,7 +16,7 @@
   import { Analytics } from "../../../../runtime/analytics.js";
 
   import { getAllComponents } from "../../../../lib/_configs";
-  import { configManager } from "../Configuration.store";
+  import { config_panel_blocks } from "../Configuration.store";
 
   import { lastOpenedActionblocksInsert } from "../Configuration.store";
   import { NumberToEventType } from "@intechstudio/grid-protocol";
@@ -67,7 +67,7 @@
 
   $: {
     try {
-      options = getAvailableOptions($configManager);
+      options = getAvailableOptions($config_panel_blocks);
     } catch (e) {
       handleClose();
     }
@@ -280,8 +280,8 @@
   function replaceToLocalDefinition(script, segment, localDefinition) {
     if (script.includes(segment)) {
       const localDefinitions = LocalDefinitions.getFrom({
-        configs: $configManager,
-        index: Math.min(index, $configManager.length - 1),
+        configs: $config_panel_blocks,
+        index: Math.min(index, $config_panel_blocks.length - 1),
       });
       const defaultLocal = localDefinitions.find(
         (e) => e.value === localDefinition
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 94ab12c75..936b6181d 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -1,67 +1,61 @@
 <script lang="ts">
+  import { ActionBlock } from "./../Configuration.store";
   import { GridAction, GridEvent } from "./../../../../runtime/runtime";
   import { createEventDispatcher, onMount, type SvelteComponent } from "svelte";
-
   import {
     lastOpenedActionblocks,
     lastOpenedActionblocksInsert,
     lastOpenedActionblocksRemove,
   } from "../Configuration.store";
-
   import { configIndexToId } from "../../../_actions/move.action";
   import { getComponentInformation } from "../../../../lib/_configs";
 
+  const dispatch = createEventDispatcher();
+
+  export let index = undefined;
+  export let data: ActionBlock;
+
+  let action: GridAction = data.action;
+  let header: typeof SvelteComponent;
+  let component: typeof SvelteComponent;
+  let validationError = false;
+  let ctrlIsDown = false;
   let toggled = false;
 
   onMount(() => {
-    if (config.information.toggleable !== false) {
+    if (action.information.toggleable !== false) {
       toggled =
         -1 !==
         $lastOpenedActionblocks.findIndex((e) => {
-          return e == config.short;
+          return e == action.short;
         });
     } else {
       toggled = true;
     }
-  });
 
-  export let index = undefined;
-  export let config: GridAction;
-
-  let header: typeof SvelteComponent;
-  let component: typeof SvelteComponent;
-
-  let syntaxError = false;
-  let validationError = false;
-  let ctrlIsDown = false;
-
-  const dispatch = createEventDispatcher();
-
-  onMount(() => {
-    const result = getComponentInformation({ short: config.short });
+    const result = getComponentInformation({ short: action.short });
     header = result.header;
     component = result.component;
   });
 
-  $: syntaxError = !config.checkSyntax();
-
   function replace_me(e: any) {
     const { short, script, name } = e.detail;
-    const parent = config.parent as GridEvent;
-    const action = new GridAction(undefined, {
+    const oldAction = action;
+    const parent = oldAction.parent as GridEvent;
+    const newAction = new GridAction(undefined, {
       short: short,
       script: GridAction.getInformation(short), // Default Script
       name: name,
     });
-    parent.replace(config.id, action);
+    parent.replace(oldAction, newAction);
     toggled = true;
   }
 
   function handleOutput(e) {
     const { short, script, name } = e.detail;
-    config.short = short;
-    config.script = script;
-    config.name = name;
+    action.short = short;
+    action.script = script;
+    action.name = name;
   }
 
   function handleValidator(e) {
@@ -70,16 +64,16 @@
   }
 
   function handleToggle(e) {
-    if (config.information.toggleable == false) {
+    if (action.information.toggleable == false) {
       return;
     }
 
     toggled = !toggled;
 
     if (toggled) {
-      lastOpenedActionblocksInsert(config.short);
+      lastOpenedActionblocksInsert(action.short);
     } else {
-      lastOpenedActionblocksRemove(config.short);
+      lastOpenedActionblocksRemove(action.short);
     }
   }
 
@@ -109,7 +103,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <wrapper class="flex flex-grow outline-none" class:cursor-pointer={ctrlIsDown}>
-  {#each Array(config.indentation >= 0 ? config.indentation : 0) as n}
+  {#each Array(action.indentation) as _}
     <div style="width: 15px" class="flex items-center mx-1">
       <div class="w-3 h-3 rounded-full bg-secondary" />
     </div>
@@ -117,29 +111,29 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <carousel
-    class="group/bg-color flex flex-grow h-auto min-h-[32px] border {syntaxError
+    class="group/bg-color flex flex-grow h-auto min-h-[32px] border {!action.checkSyntax()
       ? 'border-error'
       : 'border-transparent'}"
     id={configIndexToId(index)}
-    class:rounded-tr-xl={config.information.rounding === "top"}
-    class:rounded-br-xl={config.information.rounding === "bottom"}
-    config-name={config.information.name}
-    config-type={config.information.type}
+    class:rounded-tr-xl={action.information.rounding === "top"}
+    class:rounded-br-xl={action.information.rounding === "bottom"}
+    config-name={action.information.name}
+    config-type={action.information.type}
     config-id={index}
-    movable={config.information.movable}
+    movable={action.information.movable}
     on:click|self={handleCarouselClicked}
   >
     <!-- Face of the config block, with disabled pointer events (Except for input fields) -->
     <!-- TODO: Make marking when the block has unsaved changes  -->
     <div class="w-full flex flex-row pointer-events-none">
       <!-- Icon -->
-      {#if config.information.hideIcon !== true}
+      {#if action.information.hideIcon !== true}
         <div
-          style="background-color:{config.information.color}"
+          style="background-color:{action.information.color}"
           class="flex items-center p-2 w-min text-center"
         >
           <div class="w-6 h-6 whitespace-nowrap">
-            {@html config.information.blockIcon}
+            {@html action.information.blockIcon}
           </div>
         </div>
       {/if}
@@ -151,15 +145,15 @@
         class:bg-opacity-30={toggled}
       >
         <!-- Content of block -->
-        {#if (toggled && config.information.toggleable) || typeof header === "undefined"}
+        {#if (toggled && action.information.toggleable) || typeof header === "undefined"}
           <!-- Body of the Action block when toggled -->
           <div class="bg-secondary bg-opacity-30 h-full w-full">
             <svelte:component
               this={component}
               class="h-full w-full px-2"
               {index}
-              {config}
-              {syntaxError}
+              config={action}
+              syntaxError={!action.checkSyntax()}
               on:replace={replace_me}
               on:validator={handleValidator}
               on:output={handleOutput}
@@ -171,7 +165,7 @@
 
           <svelte:component
             this={header}
-            {config}
+            config={action}
             {index}
             on:toggle={handleToggle}
             on:output={handleOutput}
diff --git a/src/renderer/main/panels/configuration/components/Options.svelte b/src/renderer/main/panels/configuration/components/Options.svelte
index 4f1b52dac..02e432a5c 100644
--- a/src/renderer/main/panels/configuration/components/Options.svelte
+++ b/src/renderer/main/panels/configuration/components/Options.svelte
@@ -7,16 +7,14 @@
   export let selected = false;
   export let halfSelected = false;
   export let disabled = false;
-  export let index = undefined;
 
   function handleClick(e) {
     if (disabled) {
       return;
     }
     selected = !selected;
-    dispatch("selection-change", {
+    dispatch("select", {
       value: selected,
-      index: index,
     });
   }
 </script>
@@ -30,9 +28,9 @@
   class:bg-secondary={selected}
   class:border-opacity-30={!selected}
   class:hover:border-opacity-100={!selected && !disabled}
-  class:cursor-default={disabled}
   class:bg-error={disabled}
   class:bg-opacity-10={disabled}
+  {disabled}
 >
   {#if selected}
     <SvgIcon iconPath={"tick"} />
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index f102c8917..462f1d5a6 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -1,25 +1,21 @@
 <script lang="ts">
+  import { createEventDispatcher } from "svelte";
   import {
     appClipboard,
     ClipboardKey,
   } from "./../../../../runtime/clipboard.store";
   import { GridEvent, GridElement } from "./../../../../runtime/runtime";
   import { UserInputValue } from "./../../../../runtime/runtime.store";
-  import { derived } from "svelte/store";
   import { runtime, user_input } from "./../../../../runtime/runtime.store";
   import { shortcut } from "./../../../_actions/shortcut.action";
   import MoltenToolbarButton from "../../../user-interface/MoltenToolbarButton.svelte";
   import Options from "./Options.svelte";
-  import { createEventDispatcher } from "svelte";
-  import { configManager } from "../Configuration.store";
+  import { config_panel_blocks } from "../Configuration.store";
 
   const dispatch = createEventDispatcher();
 
   function handleConvertToCodeBlockClicked(e) {
-    dispatch("convert-to-code-block", {
-      configs: $configManager.filter((e) => e.selected),
-      index: $configManager.findIndex((e) => e.selected), //First selected
-    });
+    dispatch("convert-to-code-block");
   }
 
   function handleCutClicked(e) {
@@ -38,23 +34,8 @@
     dispatch("remove");
   }
 
-  function handleSelectAllClicked(e) {
-    const allSelected =
-      typeof $configManager.find((e) => e.selected == false) === "undefined";
-    configManager.update((s) => {
-      s.forEach((e) => {
-        if (typeof $configManager.find((e) => e.selected) !== "undefined") {
-          if (allSelected) {
-            e.selected = false;
-          } else {
-            e.selected = true;
-          }
-        } else {
-          e.selected = true;
-        }
-      });
-      return s;
-    });
+  function handleSelectAllClicked() {
+    dispatch("select-all");
   }
 
   function handleCopyAll(e) {
@@ -69,6 +50,10 @@
     dispatch("discard");
   }
 
+  function handleClearElement() {
+    dispatch("clear-element");
+  }
+
   let selectedAction = undefined;
 
   function setToolbarHoverText(buttonText, hotkeyText) {
@@ -85,10 +70,6 @@
       ? ["Cmd ⌘", "Alt ⌥"]
       : ["Ctrl", "Alt"];
 
-  function handleClearElement() {
-    dispatch("clear-element");
-  }
-
   let event: GridEvent;
   let element: GridElement;
 
@@ -109,13 +90,6 @@
       ui.eventtype
     );
   }
-
-  const selectAllChecked = derived([configManager], ([$configManager]) => {
-    return (
-      typeof $configManager.find((e) => !e.selected) === "undefined" &&
-      $configManager.length > 0
-    );
-  });
 </script>
 
 <app-action-multi-select
@@ -144,7 +118,8 @@
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyC" }}
         iconPath={"copy_all"}
-        disabled={$runtime.modules.length === 0 || false}
+        disabled={$runtime.modules.length === 0 ||
+          $config_panel_blocks.some((e) => e.selected)}
         color={"#03cb00"}
       />
 
@@ -199,7 +174,7 @@
           setToolbarHoverText(`Copy Action(s)`, `(${modifier[0]} + C)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyC" }}
-        disabled={false}
+        disabled={!$config_panel_blocks.some((e) => e.selected)}
         iconPath={"copy"}
         color={"#03cb00"}
       />
@@ -221,7 +196,7 @@
           setToolbarHoverText(`Cut Action(s)`, `(${modifier[0]} + X)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyX" }}
-        disabled={false}
+        disabled={!$config_panel_blocks.some((e) => e.selected)}
         iconPath={"cut"}
         color={"#ff6100"}
       />
@@ -239,7 +214,7 @@
           shift: true,
           code: "KeyM",
         }}
-        disabled={false}
+        disabled={!$config_panel_blocks.some((e) => e.selected)}
         iconPath={"merge_as_code"}
         color={"#ffcc33"}
       />
@@ -252,7 +227,7 @@
         shortcut={{
           code: "Delete",
         }}
-        disabled={false}
+        disabled={!$config_panel_blocks.some((e) => e.selected)}
         iconPath={"remove"}
         color={"#ff2323"}
       />
@@ -270,10 +245,10 @@
     on:mouseleave={handleToolbarButtonBlur}
   >
     <Options
-      selected={$selectAllChecked}
-      halfSelected={typeof $configManager.find((e) => e.selected) !==
-        "undefined"}
-      on:selection-change={handleSelectAllClicked}
+      selected={$config_panel_blocks.every((e) => e.selected)}
+      halfSelected={$config_panel_blocks.some((e) => e.selected)}
+      disabled={$config_panel_blocks.length === 0}
+      on:select={handleSelectAllClicked}
     />
   </button>
 </app-action-multi-select>
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 8a5b2df7d..7b8e3957c 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -1,4 +1,7 @@
-import { GridAction, GridEvent } from "../../../runtime/runtime";
+import { get } from "svelte/store";
+import { Analytics } from "../../../runtime/analytics";
+import { appClipboard, ClipboardKey } from "../../../runtime/clipboard.store";
+import { ActionData, GridAction, GridEvent } from "../../../runtime/runtime";
 
 type ConfigObject = any;
 
@@ -182,26 +185,6 @@ export async function discardElement({ dx, dy, page, element }) {
     */
 }
 
-export function selectAction(index: number, value: boolean) {
-  /*
-  configManager.update((s: ConfigList) => {
-    const stack: any[] = [];
-    let n = index;
-    do {
-      const config = s[n];
-      if (config.information.type === "composite_open") {
-        stack.push(config);
-      } else if (config.information.type === "composite_close") {
-        stack.pop();
-      }
-      config.selected = value;
-      ++n;
-    } while (stack.length > 0);
-    return s;
-  });
-  */
-}
-
 export function insertAction(
   index: number | undefined,
   configs: ConfigObject[],
@@ -313,60 +296,93 @@ export function mergeActionToCode(index: number, configs: ConfigObject[]) {
   */
 }
 
-export function copyActions() {
-  /*
-  const clipboard = get(configManager)
-    .filter((e) => e.selected)
-    .map((e) => {
-      return new ConfigObject({
-        short: e.short,
-        script: e.script,
-        name: e.name,
-        runtimeRef: new GridAction(undefined, {
-          short: e.short,
-          script: e.script,
-          name: e.name,
-        }),
-      });
-    });
+enum ActionType {
+  COPY = 0,
+  PASTE = 1,
+}
+
+export interface ActionResult {
+  value: boolean;
+  text: string;
+  type: ActionType;
+}
+
+export interface CopyActionsResult extends ActionResult {}
+export interface PasteActionsResult extends ActionResult {}
+
+export async function copyActions(
+  actions: GridAction[]
+): Promise<CopyActionsResult> {
+  Analytics.track({
+    event: "Config Action",
+    payload: { click: "Copy" },
+    mandatory: false,
+  });
+
   appClipboard.set({
     key: ClipboardKey.ACTION_BLOCKS,
-    payload: clipboard,
+    payload: actions.map((e) => e.data),
   });
-  */
+
+  return Promise.resolve({ value: true, text: "OK", type: ActionType.COPY });
 }
 
-export function pasteActions(index: number | undefined) {
-  /*
-  return new Promise((resolve, reject) => {
-    if (typeof index === "undefined") {
-      index = get(configManager).length;
-    }
+export async function pasteActions(
+  target: GridEvent,
+  index?: number
+): Promise<PasteActionsResult> {
+  Analytics.track({
+    event: "Config Action",
+    payload: { click: "Paste" },
+    mandatory: false,
+  });
+  if (typeof index === "undefined") {
+    index = target.config.length;
+  }
 
-    const clipboard = get(appClipboard);
+  const clipboard = get(appClipboard);
 
-    if (clipboard?.key !== ClipboardKey.ACTION_BLOCKS) {
-      reject(`Paste: Invalid clipboard type ${clipboard?.key}`);
-    }
+  if (typeof clipboard === "undefined") {
+    return Promise.reject({
+      value: false,
+      text: `Nothing to paste, clipboard is empty`,
+      type: ActionType.PASTE,
+    });
+  }
 
-    let error = false;
-    configManager.update((s) => {
-      const value = get(appClipboard)!.payload;
-      s.forEach((e) => (e.selected = false));
-      s.insert(index, ...value);
-      const res = s.checkLength();
-      if (!res.value) {
-        error = true;
-        for (let i = 0; i < value.length; ++i) {
-          s.remove(index);
-        }
-      }
+  if (clipboard?.key !== ClipboardKey.ACTION_BLOCKS) {
+    return Promise.reject({
+      value: false,
+      text: `Invalid clipboard type ${clipboard?.key}`,
+      type: ActionType.PASTE,
+    });
+  }
 
-      return s;
+  if (!target.isLoaded()) {
+    await target.load();
+  }
+
+  const actions = get(appClipboard).payload.map((e: ActionData) => {
+    return new GridAction(undefined, {
+      short: e.short,
+      script: e.script,
+      name: e.name,
     });
-    error ? reject("Paste failed") : resolve();
   });
-  */
+
+  target.insert(index, ...actions);
+  if (!target.checkLength()) {
+    actions.forEach((e: GridAction) => {
+      target.remove(e);
+    });
+    return Promise.reject({
+      value: false,
+      text: `Config limit reached, shorten your code, or delete actions!`,
+      type: ActionType.PASTE,
+    });
+  }
+
+  return Promise.resolve({ value: true, text: "OK", type: ActionType.PASTE });
 }
 
 export function removeActions() {
diff --git a/src/renderer/main/panels/preferences/Preferences.svelte b/src/renderer/main/panels/preferences/Preferences.svelte
index 5726d4ccd..7f9c3709f 100644
--- a/src/renderer/main/panels/preferences/Preferences.svelte
+++ b/src/renderer/main/panels/preferences/Preferences.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { configManager } from "./../configuration/Configuration.store";
+  import { config_panel_blocks } from "./../configuration/Configuration.store";
   import { logger } from "./../../../runtime/runtime.store";
   import { get } from "svelte/store";
   import { instructions } from "../../../serialport/instructions";
@@ -311,7 +311,7 @@
             .sendNVMEraseToGrid()
             .then((res) => {
               runtime.erase();
-              configManager.refresh().then(() => {
+              config_panel_blocks.refresh().then(() => {
                 logger.set({
                   type: "success",
                   mode: 0,
diff --git a/src/renderer/main/user-interface/ActiveChanges.svelte b/src/renderer/main/user-interface/ActiveChanges.svelte
index 41bef41a3..9b6863a9a 100644
--- a/src/renderer/main/user-interface/ActiveChanges.svelte
+++ b/src/renderer/main/user-interface/ActiveChanges.svelte
@@ -4,7 +4,7 @@
   import { logger } from "./../../runtime/runtime.store";
   import { appSettings } from "../../runtime/app-helper.store";
   import { writeBuffer } from "../../runtime/engine.store.ts";
-  import { configManager } from "./../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "./../panels/configuration/Configuration.store";
   import { runtime, user_input } from "../../runtime/runtime.store";
   import { moduleOverlay } from "../../runtime/moduleOverlay";
   import { Analytics } from "../../runtime/analytics.js";
@@ -70,7 +70,7 @@
       .clearPage(ui.pagenumber)
       .then(() => {
         clearOverlays();
-        configManager
+        config_panel_blocks
           .refresh()
           .then(() => {
             logger.set({
@@ -111,7 +111,7 @@
         .discardPage(ui.pagenumber)
         .then(() => {
           clearOverlays();
-          configManager
+          config_panel_blocks
             .refresh()
             .then(() => {
               logger.set({
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 8e8b1edff..e6e51fb4d 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -91,7 +91,6 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
 
   protected notify() {
     this._internal.update((s) => s);
-    this.notifyParent();
   }
 
   protected notifyParent() {
@@ -100,6 +99,7 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
     }
 
     this.parent.notify();
+    this.parent.notifyParent();
   }
 
   // Generalized getter
@@ -175,7 +175,7 @@ export class GridAction extends RuntimeNode<ActionData> {
   get indentation() {
     let indentation = 0;
     const event = this.parent as GridEvent;
-    for (let i = 0; i < event.config.length; i++) {
+    for (let i = 0; i < event.config.length; ++i) {
       let action = event.config[i];
 
       if (action.id === this.id) {
@@ -187,7 +187,7 @@ export class GridAction extends RuntimeNode<ActionData> {
       }
 
       if (action.information.type === "composite_open") {
-        indentation++;
+        ++indentation;
       } else if (action.information.type === "composite_close") {
         --indentation;
       }
@@ -271,37 +271,39 @@ export class GridEvent extends RuntimeNode<EventData> {
     this.loaded = false;
   }
 
-  public replace(id: UUID, action: GridAction) {
-    const index = this.config.findIndex((e) => e.id === id);
+  public replace(a: GridAction, b: GridAction) {
+    const index = this.config.findIndex((e) => e.id === a.id);
     try {
-      this.remove(id);
-      this.insert(index, action);
+      this.remove(a);
+      this.insert(index, b);
     } catch (e) {
       `Replace failed! Reason: ${e}`;
     }
   }
 
-  public remove(id: UUID) {
+  public remove(a: GridAction) {
     const actions = this.config;
-    const index = actions.findIndex((e) => e.id === id);
+    const index = actions.findIndex((e) => e.id === a.id);
     if (index === -1) {
-      throw `Remove failed! Action with id of ${id} is not found.`;
+      throw `Remove failed! Action with id of ${a.id} is not found.`;
     }
 
     this.config[index].parent = undefined;
     this.config = actions.splice(index, 1);
   }
 
-  public insert(index: number, action: GridAction) {
-    const actions = this.config;
-
-    if (index < 0 || index > actions.length) {
+  public insert(index: number, ...actions: GridAction[]) {
+    if (index < 0 || index > this.config.length) {
       throw `Add failed! Invalid index: ${index}.`;
     }
 
-    action.parent = this;
-    actions.splice(index, 0, action);
-    this.config = actions;
+    actions.forEach((e) => (e.parent = this));
+    this.config = [
+      ...this.config.slice(0, index),
+      ...actions,
+      ...this.config.slice(index),
+    ];
+    console.log(this.config);
   }
 
   public push(...action: GridAction[]) {

From 130bc6c006566cebffa7dbdf0852ef683b23fd7c Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 27 Sep 2024 15:55:12 +0200
Subject: [PATCH 20/42] Daily push

---
 .../panels/configuration/Configuration.svelte | 36 ++++-----
 .../configuration/components/Toolbar.svelte   |  2 +-
 .../configuration/configuration-actions.ts    | 77 +++++++++----------
 src/renderer/runtime/runtime.ts               | 14 ++--
 4 files changed, 61 insertions(+), 68 deletions(-)

diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 1ac6ceb41..a87bf4990 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -44,7 +44,7 @@
   import {
     insertAction,
     updateAction,
-    mergeActionToCode,
+    mergeActionsToCode,
     copyActions,
     pasteActions,
     removeActions,
@@ -248,30 +248,22 @@
     */
   }
 
-  function handleConvertToCodeBlock(e) {
-    const { index, configs } = e.detail;
-    mergeActionToCode(index, configs);
-    sendCurrentConfigurationToGrid();
+  function handleConvertToCodeBlock() {
+    const blocks = get(config_panel_blocks);
+    const selected = blocks.filter((e) => e.selected).map((e) => e.action);
+    mergeActionsToCode(...selected);
   }
 
-  function handleRemove(e) {
-    removeActions();
-    sendCurrentConfigurationToGrid();
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Remove" },
-      mandatory: false,
-    });
+  function handleRemove() {
+    const blocks = get(config_panel_blocks);
+    const selected = blocks.filter((e) => e.selected).map((e) => e.action);
+    removeActions(...selected);
   }
 
-  function handleCut(e) {
-    cutActions();
-    sendCurrentConfigurationToGrid();
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Cut" },
-      mandatory: false,
-    });
+  function handleCut() {
+    const blocks = get(config_panel_blocks);
+    const selected = blocks.filter((e) => e.selected).map((e) => e.action);
+    cutActions(...selected);
   }
 
   function handleReplace(e) {
@@ -337,7 +329,7 @@
   function handleCopy() {
     const blocks = get(config_panel_blocks);
     const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    copyActions(selected);
+    copyActions(...selected);
   }
 
   function handlePaste() {
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index 462f1d5a6..d36b73fe2 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -27,7 +27,7 @@
   }
 
   function handlePasteClicked(e) {
-    dispatch("paste", { index: undefined });
+    dispatch("paste");
   }
 
   function handleRemoveClicked(e) {
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 7b8e3957c..bdba74fba 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -2,6 +2,9 @@ import { get } from "svelte/store";
 import { Analytics } from "../../../runtime/analytics";
 import { appClipboard, ClipboardKey } from "../../../runtime/clipboard.store";
 import { ActionData, GridAction, GridEvent } from "../../../runtime/runtime";
+import { GridScript } from "@intechstudio/grid-protocol";
+import * as CodeBlock from "../../../config-blocks/CodeBlock.svelte";
+import { logger } from "../../../runtime/runtime.store";
 
 type ConfigObject = any;
 
@@ -259,13 +262,15 @@ export function updateAction(index: number, newConfig: ConfigObject) {
   */
 }
 
-export function mergeActionToCode(index: number, configs: ConfigObject[]) {
-  /*
-  //Merge scripts
-  const script = configs.map((e) => e.script).join(" ");
+export function mergeActionsToCode(...actions: GridAction[]) {
+  const codeBlock = new GridAction(undefined, {
+    short: CodeBlock.information.short,
+    script: actions.map((action) => action.toLua()).join("\n"),
+    name: undefined,
+  });
 
   //Check syntax
-  if (GridScript.checkSyntax(script) === false) {
+  if (!codeBlock.checkSyntax()) {
     logger.set({
       type: "fail",
       mode: 0,
@@ -275,25 +280,15 @@ export function mergeActionToCode(index: number, configs: ConfigObject[]) {
     return;
   }
 
-  //Create new CodeBlock with merged code
-  const codeBlock = new ConfigObject({
-    short: "cb",
-    script: script,
-    runtimeRef: new GridAction(configs[0].runtimeRef.parent as GridEvent, {
-      short: "cb",
-      script: script,
-      name: undefined,
-    }),
-  });
+  const parentIds = actions.map((e) => e.id);
+  const target = actions.shift();
+  for (const action of actions) {
+    const parent = action.parent as GridEvent;
+    parent.remove(action);
+  }
 
-  configManager.update((s: ConfigList) => {
-    //Insert CodeBlock into position
-    s.insert(index, codeBlock);
-    // Remove selected action blocks
-    s = s.filter((config) => !config.selected) as ConfigList;
-    return s;
-  });
-  */
+  (target.parent as GridEvent).replace(target, codeBlock);
+  console.log(target.parent as GridEvent);
 }
 
 enum ActionType {
@@ -311,7 +306,7 @@ export interface CopyActionsResult extends ActionResult {}
 export interface PasteActionsResult extends ActionResult {}
 
 export async function copyActions(
-  actions: GridAction[]
+  ...actions: GridAction[]
 ): Promise<CopyActionsResult> {
   Analytics.track({
     event: "Config Action",
@@ -385,24 +380,28 @@ export async function pasteActions(
   return Promise.resolve({ value: true, text: "OK", type: ActionType.PASTE });
 }
 
-export function removeActions() {
-  /*
-  configManager.update((s: ConfigList) => {
-    s.forEach((config) => {
-      if (config.selected) {
-        config.runtimeRef.parent = undefined;
-      }
-    });
-    return s.filter((config) => !config.selected);
+export function removeActions(...actions: GridAction[]) {
+  Analytics.track({
+    event: "Config Action",
+    payload: { click: "Remove" },
+    mandatory: false,
   });
-  */
+
+  for (const action of actions) {
+    const parent = action.parent as GridEvent;
+    parent.remove(action);
+  }
 }
 
-export function cutActions() {
-  /*
-  copyActions();
-  removeActions();
-  */
+export function cutActions(...actions: GridAction[]) {
+  Analytics.track({
+    event: "Config Action",
+    payload: { click: "Cut" },
+    mandatory: false,
+  });
+
+  copyActions(...actions);
+  removeActions(...actions);
 }
 
 export function clearElement(
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index e6e51fb4d..2f78bdf7d 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -281,15 +281,17 @@ export class GridEvent extends RuntimeNode<EventData> {
     }
   }
 
-  public remove(a: GridAction) {
-    const actions = this.config;
-    const index = actions.findIndex((e) => e.id === a.id);
+  public remove(action: GridAction) {
+    const index = this.config.findIndex((e) => e.id === action.id);
     if (index === -1) {
-      throw `Remove failed! Action with id of ${a.id} is not found.`;
+      throw `Remove failed! Action with id of ${action.id} is not found.`;
     }
 
-    this.config[index].parent = undefined;
-    this.config = actions.splice(index, 1);
+    action.parent = undefined;
+    this.config = [
+      ...this.config.slice(0, index),
+      ...this.config.slice(index + 1),
+    ];
   }
 
   public insert(index: number, ...actions: GridAction[]) {

From 7d115175aa7fef691caf24cab7d5e51d1eb93ad9 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 27 Sep 2024 17:22:44 +0200
Subject: [PATCH 21/42] Daily push

---
 src/renderer/config-blocks/CodeBlock.svelte   | 17 ++--
 src/renderer/main/modals/Export.svelte        |  5 +-
 src/renderer/main/modals/Monaco.svelte        | 97 +++++++++----------
 src/renderer/main/modals/monaco.store.ts      |  6 --
 .../configuration/configuration-actions.ts    | 30 +++---
 5 files changed, 71 insertions(+), 84 deletions(-)
 delete mode 100644 src/renderer/main/modals/monaco.store.ts

diff --git a/src/renderer/config-blocks/CodeBlock.svelte b/src/renderer/config-blocks/CodeBlock.svelte
index 5d914e526..9dc3f41b9 100644
--- a/src/renderer/config-blocks/CodeBlock.svelte
+++ b/src/renderer/config-blocks/CodeBlock.svelte
@@ -49,7 +49,6 @@
 
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
-  import { monaco_store } from "../main/modals/monaco.store";
   import { monaco_elementtype } from "../lib/CustomMonaco";
 
   import { monaco_editor } from "$lib/CustomMonaco";
@@ -107,22 +106,22 @@
     });
   }
 
-  $: if (typeof $config !== "undefined") {
-    displayConfigScript(config.script);
+  $: if (codePreview) {
+    displayConfigScript($config.script);
   }
 
+  onMount(() => {
+    displayConfigScript(config.script);
+  });
+
   async function open_monaco() {
-    if (config.id !== get(monaco_store)?.config.runtimeRef.id) {
-      modal.close();
-      await tick();
-    }
-    monaco_store.set({ config: config, index: index });
     const event = config.parent as GridEvent;
     const element = event.parent as GridElement;
-    $monaco_elementtype = element.type;
+    monaco_elementtype.set(element.type);
     modal.show({
       component: Monaco,
       options: { snap: "middle", disableClickOutside: true },
+      args: { monaco_action: config },
     });
   }
 </script>
diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
index b519c143d..023781af5 100644
--- a/src/renderer/main/modals/Export.svelte
+++ b/src/renderer/main/modals/Export.svelte
@@ -1,4 +1,5 @@
-<script>
+<script lang="ts">
+  import { user_input_event } from "./../panels/configuration/Configuration.store.ts";
   import { modal } from "./modal.store";
   import { config_panel_blocks } from "../panels/configuration/Configuration.store";
   import MoltenModal from "./MoltenModal.svelte";
@@ -48,7 +49,7 @@
     </div>
 
     <textarea
-      value={$config_panel_blocks.toConfigScript()}
+      value={$user_input_event.toLua()}
       class="bg-secondary min-h-200 font-mono w-full p-1 my-1 rounded"
     />
 
diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 3fdc27822..7cb3485fd 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { get } from "svelte/store";
+  import { ActionData } from "./../../runtime/runtime.ts";
   import { Grid } from "./../../lib/_utils";
   import {
     GridElement,
@@ -11,22 +13,25 @@
   import { watchResize } from "svelte-watch-resize";
   import { MoltenInput, MoltenPushButton } from "@intechstudio/grid-uikit";
   import { onDestroy } from "svelte";
-  import { grid, NumberToEventType } from "@intechstudio/grid-protocol";
+  import {
+    grid,
+    NumberToEventType,
+    GridScript,
+  } from "@intechstudio/grid-protocol";
   import { modal } from "./modal.store";
   import MoltenModal from "./MoltenModal.svelte";
 
   import { debug_monitor_store } from "../panels/DebugMonitor/DebugMonitor.store";
 
   import { monaco_editor } from "../../lib/CustomMonaco";
-  import { monaco_store } from "./monaco.store";
 
   import { beforeUpdate, afterUpdate, onMount } from "svelte";
-
-  import { GridScript } from "@intechstudio/grid-protocol";
   import { appSettings } from "../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { clickOutside } from "../_actions/click-outside.action";
 
+  export let monaco_action: GridAction;
+
   let monaco_block;
 
   let monaco_disposables = [];
@@ -35,15 +40,14 @@
 
   let commitEnabled = false;
   let errorMesssage = "";
-  let commitedCode: string;
-  let commitedName: string | undefined;
+
+  let commited: ActionData = { script: "", name: "" };
 
   let scrollDown;
   let autoscroll;
 
   let scriptLength = undefined;
   let pathSnippets = [];
-  let editedAction: GridAction;
 
   let name;
   let isEditName = false;
@@ -57,9 +61,7 @@
     editor?.updateOptions({ fontSize: fontSize });
   }
 
-  $: if ($editedAction) {
-    handleActionChange($editedAction);
-  }
+  $: handleActionChange($monaco_action);
 
   function isDeleted(action: ActionData) {
     const event = action?.parent as GridEvent;
@@ -67,6 +69,10 @@
   }
 
   function handleActionChange(action: ActionData) {
+    if (typeof action === "undefined") {
+      return;
+    }
+
     if (isDeleted(action)) {
       pathSnippets = ["Deleted Code Block"];
       return;
@@ -80,11 +86,8 @@
     name =
       typeof action.name !== "undefined"
         ? action.name
-        : $monaco_store.config.information.displayName;
-
-    if (commitedName !== action.name) {
-      commitedName = action.name;
-    }
+        : $monaco_action.information.displayName;
+    monaco_action;
 
     pathSnippets = [
       `${module.type} (${module.dx},${module.dy})`,
@@ -98,15 +101,15 @@
   }
 
   onMount(() => {
-    const store = $monaco_store;
-    editedAction = store.config;
-    commitedCode = editedAction.script;
-    commitedName = editedAction.name;
-    scriptLength = (editedAction.parent as GridEvent).toLua().length;
+    monaco_action = get(modal).args;
+    console.log(monaco_action, get(modal));
+    commited.name = monaco_action.name;
+    commited.script = monaco_action.script;
+    scriptLength = (monaco_action.parent as GridEvent).toLua().length;
 
     //Creating and configuring the editor
     editor = monaco_editor.create(monaco_block, {
-      value: GridScript.expandScript(editedAction.script),
+      value: GridScript.expandScript(monaco_action.script),
       language: "intech_lua",
       theme: "my-theme",
       fontSize: $appSettings.persistent.fontSize,
@@ -132,21 +135,15 @@
   });
 
   function handleContentChange() {
-    if (typeof editor === "undefined") {
-      return;
-    }
-
     try {
       //Throws error on syntax error
       const compressed = GridScript.compressScript(editor.getValue());
-      editedAction.script = compressed;
-      editedAction.name =
-        name !== $monaco_store.config?.information.displayName
-          ? name
-          : undefined;
+      $monaco_action.script = compressed;
+      $monaco_action.name =
+        name !== $monaco_action?.information.displayName ? name : undefined;
 
       //Calculate length (this already includes the new value of referenceConfig)
-      scriptLength = (editedAction.parent as GridEvent).toLua().length;
+      scriptLength = ($monaco_action.parent as GridEvent).toLua().length;
 
       //Check the minified config length
       if (scriptLength >= grid.getProperty("CONFIG_LENGTH")) {
@@ -166,8 +163,9 @@
       errorMesssage = e;
     }
 
-    editedAction.script = commitedCode;
-    editedAction.name = commitedName;
+    //Restore to commited
+    $monaco_action.name = commited.name;
+    $monaco_action.script = commited.script;
   }
 
   beforeUpdate(() => {
@@ -183,11 +181,12 @@
   });
 
   async function handleCommit() {
-    const action = $monaco_store.config;
-    action.script = GridScript.compressScript(editor.getValue());
-    action.name =
-      name !== $monaco_store.config?.information.displayName ? name : undefined;
-    action.sendToGrid();
+    $monaco_action.script = GridScript.compressScript(editor.getValue());
+    $monaco_action.name =
+      name !== $monaco_action?.information.displayName ? name : undefined;
+    commited.name = $monaco_action.name;
+    commited.script = $monaco_action.script;
+    commitEnabled = false;
   }
 
   onDestroy(() => {
@@ -197,12 +196,6 @@
   });
 
   function handleClose(e) {
-    if (commitedCode !== $monaco_store.config.script) {
-      $monaco_store.config.script = commitedCode;
-    }
-    if (commitedName !== $monaco_store.config.name) {
-      $monaco_store.config.name = commitedName;
-    }
     modal.close();
   }
 
@@ -235,14 +228,16 @@
   }
 
   function handleNameChange(value) {
-    if (value != $monaco_store.config?.name) {
+    if (value === monaco_action?.information.displayName) {
+      return;
+    }
+
+    if (value !== monaco_action?.name) {
       handleContentChange();
     }
   }
 
-  $: if (name !== $monaco_store.config.information.displayName) {
-    handleNameChange(name);
-  }
+  $: handleNameChange(name);
 </script>
 
 <div id="modal-copy-placeholder" />
@@ -276,7 +271,7 @@
           </button>
         </div>
         <div class="opacity-70">
-          <span class:invisible={isDeleted($editedAction)}
+          <span class:invisible={isDeleted($monaco_action)}
             >{`Character Count: ${
               typeof scriptLength === "undefined" ? "?" : scriptLength
             }/${grid.getProperty("CONFIG_LENGTH") - 1} (max)`}</span
@@ -288,7 +283,7 @@
         class="flex flex-row flex-grow flex-wrap justify-end items-center h-full gap-2"
       >
         <div class="flex flex-col">
-          {#if isDeleted($editedAction)}
+          {#if isDeleted($monaco_action)}
             <div class="text-right text-sm text-white">Deleted Action</div>
           {:else}
             <div
@@ -307,7 +302,7 @@
         <div class="flex flex-row flex-wrap gap-2 justify-end">
           <MoltenPushButton
             click={handleCommit}
-            disabled={!commitEnabled || isDeleted(editedAction)}
+            disabled={!commitEnabled || isDeleted($monaco_action)}
             text="Commit"
             style="accept"
           />
diff --git a/src/renderer/main/modals/monaco.store.ts b/src/renderer/main/modals/monaco.store.ts
deleted file mode 100644
index 1acf2ffbc..000000000
--- a/src/renderer/main/modals/monaco.store.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { writable, type Writable } from "svelte/store";
-import { GridAction } from "../../runtime/runtime";
-
-export type MonacoValue = { config: GridAction; index: number } | undefined;
-
-export const monaco_store: Writable<MonacoValue> = writable();
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index bdba74fba..004a9bc73 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -7,6 +7,19 @@ import * as CodeBlock from "../../../config-blocks/CodeBlock.svelte";
 import { logger } from "../../../runtime/runtime.store";
 
 type ConfigObject = any;
+enum ActionType {
+  COPY = 0,
+  PASTE = 1,
+}
+
+export interface ActionResult {
+  value: boolean;
+  text: string;
+  type: ActionType;
+}
+
+export interface CopyActionsResult extends ActionResult {}
+export interface PasteActionsResult extends ActionResult {}
 
 export async function copyElement({ dx, dy, page, element }) {
   /*
@@ -265,7 +278,7 @@ export function updateAction(index: number, newConfig: ConfigObject) {
 export function mergeActionsToCode(...actions: GridAction[]) {
   const codeBlock = new GridAction(undefined, {
     short: CodeBlock.information.short,
-    script: actions.map((action) => action.toLua()).join("\n"),
+    script: actions.map((action) => action.script).join("\n"),
     name: undefined,
   });
 
@@ -288,23 +301,8 @@ export function mergeActionsToCode(...actions: GridAction[]) {
   }
 
   (target.parent as GridEvent).replace(target, codeBlock);
-  console.log(target.parent as GridEvent);
 }
 
-enum ActionType {
-  COPY = 0,
-  PASTE = 1,
-}
-
-export interface ActionResult {
-  value: boolean;
-  text: string;
-  type: ActionType;
-}
-
-export interface CopyActionsResult extends ActionResult {}
-export interface PasteActionsResult extends ActionResult {}
-
 export async function copyActions(
   ...actions: GridAction[]
 ): Promise<CopyActionsResult> {

From 9f7872fa58c0f29bf647caa887efe7979bb8df3f Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Mon, 30 Sep 2024 15:02:54 +0200
Subject: [PATCH 22/42] Daily push

---
 .../panels/configuration/Configuration.svelte |  20 +-
 .../configuration/components/Toolbar.svelte   |   2 +-
 .../configuration/configuration-actions.ts    |  93 ++++----
 src/renderer/runtime/runtime.ts               | 199 ++++++++++++------
 4 files changed, 180 insertions(+), 134 deletions(-)

diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index a87bf4990..705b229f1 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { runtime } from "./../../../runtime/runtime.store.ts";
   import { PasteActionsResult } from "./configuration-actions";
   import { appSettings } from "./../../../runtime/app-helper.store.js";
   import { get, type Writable } from "svelte/store";
@@ -296,18 +297,13 @@
 
   function handleDiscardElement() {
     const ui = get(user_input);
-    discardElement({
-      dx: ui.dx,
-      dy: ui.dy,
-      page: ui.pagenumber,
-      element: ui.elementnumber,
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Whole Element Discard" },
-      mandatory: false,
-    });
+    const element = runtime.findElement(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber
+    );
+    discardElement(element);
   }
 
   function handleCopyElement() {
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index d36b73fe2..484ef1f20 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -149,7 +149,7 @@
           code: "KeyD",
         }}
         iconPath={"clear_from_device_01"}
-        disabled={!element?.hasChanges()}
+        disabled={typeof $element === "undefined" || !$element.hasChanges()}
         color={"#ff2323"}
       />
 
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
index 004a9bc73..d1529bf3a 100644
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ b/src/renderer/main/panels/configuration/configuration-actions.ts
@@ -1,7 +1,13 @@
 import { get } from "svelte/store";
 import { Analytics } from "../../../runtime/analytics";
 import { appClipboard, ClipboardKey } from "../../../runtime/clipboard.store";
-import { ActionData, GridAction, GridEvent } from "../../../runtime/runtime";
+import {
+  ActionData,
+  GridAction,
+  GridElement,
+  GridEvent,
+  SendToGridResult,
+} from "../../../runtime/runtime";
 import { GridScript } from "@intechstudio/grid-protocol";
 import * as CodeBlock from "../../../config-blocks/CodeBlock.svelte";
 import { logger } from "../../../runtime/runtime.store";
@@ -10,6 +16,8 @@ type ConfigObject = any;
 enum ActionType {
   COPY = 0,
   PASTE = 1,
+  CUT = 2,
+  DISCARD = 3,
 }
 
 export interface ActionResult {
@@ -20,6 +28,7 @@ export interface ActionResult {
 
 export interface CopyActionsResult extends ActionResult {}
 export interface PasteActionsResult extends ActionResult {}
+export interface DiscardElementResult extends ActionResult {}
 
 export async function copyElement({ dx, dy, page, element }) {
   /*
@@ -138,8 +147,15 @@ export async function overwriteElement({ dx, dy, page, element }) {
   */
 }
 
-export async function discardElement({ dx, dy, page, element }) {
-  /*
+export async function discardElement(
+  element: GridElement
+): Promise<DiscardElementResult> {
+  Analytics.track({
+    event: "Config Action",
+    payload: { click: "Whole Element Discard" },
+    mandatory: false,
+  });
+
   logger.set({
     type: "progress",
     mode: 0,
@@ -147,58 +163,33 @@ export async function discardElement({ dx, dy, page, element }) {
     message: `Discarding element configuration...`,
   });
 
-  const current = ConfigTarget.create({
-    device: { dx, dy },
-    page,
-    element,
-    eventType: EventTypeToNumber(EventType.SETUP),
-  });
-  if (!current) {
-    console.warn("Target is undefined");
-    return Promise.reject();
-  }
+  const promises: Promise<SendToGridResult>[] = [];
+  for (const event of element.events) {
+    if (event.isStored()) continue;
 
-  const promises: Promise<string>[] = [];
-  for (const event of current.events ?? ([] as any[])) {
-    const stored = event.stored;
-    if (!stored) continue;
-    const eventtype = event.type;
-    const target = ConfigTarget.create({
-      device: current.device,
-      element: current.element,
-      eventType: eventtype,
-      page: current.page,
-    });
-    const list = ConfigList.createFromActions(stored);
-    promises.push(list.sendTo({ target }));
+    const stored = GridAction.parse(event.stored);
+    event.clear();
+    event.push(...stored);
+    const promise = event.sendToGrid();
+    promises.push(promise);
   }
 
-  return Promise.all(promises)
-    .then(async () => {
-      const ui = get(user_input); // assuming user_input is accessible
-      user_input.set({
-        dx,
-        dy,
-        pagenumber: page,
-        elementnumber: element,
-        eventtype: ui.eventtype,
-      });
-      const displayed = ConfigTarget.createFrom({ userInput: ui });
-      const list = await ConfigList.createFromTarget(displayed);
-      configManager.set(list);
-
-      logger.set({
-        type: "progress",
-        mode: 0,
-        classname: "elementdiscard",
-        message: `Configuration on Element ${element} is discarded!`,
-      });
-    })
-    .catch((error) => {
-      console.warn(error);
-      return Promise.reject(error);
+  try {
+    await Promise.all(promises);
+    logger.set({
+      type: "progress",
+      mode: 0,
+      classname: "elementdiscard",
+      message: `Configuration on Element ${element.elementIndex} is discarded!`,
     });
-    */
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: ActionType.DISCARD,
+    });
+  } catch (e) {
+    return Promise.reject({ value: false, text: e });
+  }
 }
 
 export function insertAction(
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 2f78bdf7d..b14a3b645 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -31,7 +31,7 @@ import { getComponentInformation } from "../lib/_configs";
 
 type UUID = string;
 type LuaScript = string;
-interface NodeData {
+class NodeData {
   id?: UUID;
   parent?: RuntimeNode<any>;
 }
@@ -127,7 +127,7 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
   }
 }
 
-export interface ActionData extends NodeData {
+export class ActionData extends NodeData {
   short: string;
   script: string;
   name: string | undefined;
@@ -255,20 +255,74 @@ export class GridAction extends RuntimeNode<ActionData> {
   }
 }
 
-export interface EventData extends NodeData {
-  config?: Array<GridAction>;
-  type: number;
+export class EventData extends NodeData {
+  public config: Array<GridAction>;
+  public type: number;
+  public stored: LuaScript;
+  public loaded: boolean;
+
+  constructor(type: number) {
+    super();
+    this.type = type;
+    this.config = undefined;
+    this.loaded = false;
+    this.stored = undefined;
+  }
+
+  public hasChanges(): boolean {
+    if (this.isStored()) {
+      return false;
+    }
+    return this.stored !== this.toLua();
+  }
+
+  public toLua(): string {
+    return `<?lua ${this.config
+      .map((e) => e.toLua())
+      .join("")
+      .replace(/(\r\n|\n|\r)/gm, "")} ?>`;
+  }
+
+  public isStored() {
+    if (!this.isLoaded()) {
+      return true;
+    }
+
+    return this.stored === this.toLua();
+  }
+
+  public store() {
+    this.stored = this.toLua();
+  }
+
+  public clear() {
+    this.config?.forEach((e) => (e.parent = undefined));
+    this.config = [];
+  }
+
+  public checkSyntax() {
+    for (const action of this.config) {
+      if (!action.checkSyntax()) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  public checkLength() {
+    const script = this.toLua();
+    return script.length < grid.getProperty("CONFIG_LENGTH");
+  }
+
+  public isLoaded() {
+    return this.loaded;
+  }
 }
 
 export class GridEvent extends RuntimeNode<EventData> {
-  private stored: LuaScript | undefined;
-  private loaded: boolean;
-
   constructor(parent: GridElement, data?: EventData) {
     super(parent, data);
-    this.stored = undefined;
     this.config = data.config ?? [];
-    this.loaded = false;
   }
 
   public replace(a: GridAction, b: GridAction) {
@@ -352,21 +406,35 @@ export class GridEvent extends RuntimeNode<EventData> {
   }
 
   public checkSyntax() {
-    for (const action of this.config) {
-      if (!action.checkSyntax()) {
-        return false;
-      }
-    }
-    return true;
+    return this.data.checkSyntax();
   }
 
   public checkLength() {
-    const script = this.toLua();
-    return script.length < grid.getProperty("CONFIG_LENGTH");
+    return this.data.checkLength();
   }
 
   public isLoaded() {
-    return this.loaded;
+    return this.data.isLoaded();
+  }
+
+  public toLua() {
+    return this.data.toLua();
+  }
+
+  public hasChanges() {
+    return this.data.hasChanges();
+  }
+
+  public isStored() {
+    return this.data.isStored();
+  }
+
+  public store() {
+    this.data.store();
+  }
+
+  public clear() {
+    this.data.clear();
   }
 
   public async load(): Promise<GridAction[]> {
@@ -394,44 +462,13 @@ export class GridEvent extends RuntimeNode<EventData> {
           this.config = [];
           this.push(...actions);
           this.store();
-          this.loaded = true;
+          this.data.loaded = true;
           resolve(actions);
         })
         .catch((e) => reject(e));
     });
   }
 
-  public toLua() {
-    return `<?lua ${this.config
-      .map((e) => e.toLua())
-      .join("")
-      .replace(/(\r\n|\n|\r)/gm, "")} ?>`;
-  }
-
-  public hasChanges(): boolean {
-    if (this.isStored()) {
-      return false;
-    }
-    return this.stored !== this.toLua();
-  }
-
-  public isStored() {
-    if (!this.isLoaded()) {
-      return true;
-    }
-
-    return this.stored === this.toLua();
-  }
-
-  public store() {
-    this.stored = this.toLua();
-  }
-
-  public clear() {
-    this.config?.forEach((e) => (e.parent = undefined));
-    this.config = undefined;
-  }
-
   // Getters
   public get config() {
     return this.getField("config");
@@ -441,6 +478,14 @@ export class GridEvent extends RuntimeNode<EventData> {
     return this.getField("type");
   }
 
+  public get stored() {
+    return this.getField("stored");
+  }
+
+  public get loaded() {
+    return this.getField("loaded");
+  }
+
   // Setters
   private set config(value: Array<GridAction>) {
     this.setField("config", value);
@@ -449,13 +494,36 @@ export class GridEvent extends RuntimeNode<EventData> {
   private set type(value: number) {
     this.setField("type", value);
   }
+
+  private set stored(value: string) {
+    this.setField("stored", value);
+  }
+
+  private set loaded(value: boolean) {
+    this.setField("loaded", value);
+  }
 }
 
-export interface ElementData extends NodeData {
-  elementIndex: number;
-  events?: Array<GridEvent>;
-  name: string | undefined;
-  type: ElementType;
+export class ElementData extends NodeData {
+  public elementIndex: number;
+  public events: Array<GridEvent>;
+  public name: string | undefined;
+  public type: ElementType;
+
+  constructor(elementIndex: number, type: ElementType, name?: string) {
+    super();
+    this.elementIndex = elementIndex;
+    this.type = type;
+    this.name = name;
+  }
+
+  public hasChanges() {
+    return this.events.some((e) => e.hasChanges());
+  }
+
+  public isCompatible(type: ElementType) {
+    return grid.is_element_compatible_with(type, this.type);
+  }
 }
 
 export class GridElement extends RuntimeNode<ElementData> {
@@ -465,21 +533,16 @@ export class GridElement extends RuntimeNode<ElementData> {
     this.events = [];
     const elementEvents = grid.get_element_events(data.type);
     for (const event of elementEvents) {
-      this.events.push(
-        new GridEvent(this, {
-          type: Number(event.value),
-          config: undefined,
-        })
-      );
+      this.events.push(new GridEvent(this, new EventData(Number(event.value))));
     }
   }
 
   public hasChanges() {
-    return this.events.some((e) => e.hasChanges());
+    return this.data.hasChanges();
   }
 
-  isCompatible(type: ElementType) {
-    return grid.is_element_compatible_with(type, this.type);
+  public isCompatible(type: ElementType) {
+    return this.data.isCompatible(type);
   }
 
   loadPreset(preset: PresetData): Promise<PresetLoadResult> {
@@ -559,11 +622,7 @@ export class GridPage extends RuntimeNode<PageData> {
       }
 
       this.control_elements.push(
-        new GridElement(this, {
-          elementIndex: Number(index),
-          type: element,
-          name: undefined,
-        })
+        new GridElement(this, new ElementData(Number(index), element))
       );
     }
   }

From 42d77e6a532ff58c4bf415cc073437c3f6af2788 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 3 Oct 2024 00:16:24 +0200
Subject: [PATCH 23/42] Daily push2

---
 src/renderer/config-blocks/GamePadAxis.svelte |   2 +-
 .../config-blocks/GamePadButton.svelte        |   2 +-
 .../config-blocks/LedAnimationStart.svelte    |   2 +-
 .../config-blocks/LedAnimationStop.svelte     |   2 +-
 src/renderer/config-blocks/LedColor.svelte    |   2 +-
 src/renderer/config-blocks/LedPhase.svelte    |   2 +-
 src/renderer/config-blocks/Lookup.svelte      |   2 +-
 src/renderer/config-blocks/Midi.svelte        |   2 +-
 .../config-blocks/MidiFourteenBit.svelte      |   2 +-
 src/renderer/config-blocks/MidiNRPN.svelte    |   2 +-
 src/renderer/config-blocks/MouseButton.svelte |   2 +-
 src/renderer/config-blocks/MouseMove.svelte   |   2 +-
 src/renderer/config-blocks/TimerSource.svelte |   2 +-
 src/renderer/config-blocks/TimerStart.svelte  |   2 +-
 src/renderer/config-blocks/TimerStop.svelte   |   2 +-
 .../grid-layout/grid-modules/Device.svelte    |  64 +--
 src/renderer/main/modals/Export.svelte        |   4 +-
 .../panels/DebugMonitor/DebugMonitor.svelte   |   2 +-
 .../panels/MidiMonitor/MidiMonitor.svelte     |   2 +-
 .../panels/configuration/Configuration.svelte | 238 +++------
 ...onfiguration.store.ts => Configuration.ts} |   0
 .../components/ActionPicker.svelte            |   4 +-
 .../components/DynamicWrapper.svelte          |  60 ++-
 .../configuration/components/Toolbar.svelte   |   2 +-
 .../configuration/configuration-actions.ts    | 450 ----------------
 .../panels/preferences/Preferences.svelte     |   2 +-
 .../main/user-interface/ActiveChanges.svelte  |   2 +-
 src/renderer/runtime/clipboard.store.ts       |  92 +++-
 src/renderer/runtime/operations.ts            | 274 ++++++++++
 src/renderer/runtime/runtime.ts               | 502 +++++++++++++++---
 30 files changed, 933 insertions(+), 795 deletions(-)
 rename src/renderer/main/panels/configuration/{Configuration.store.ts => Configuration.ts} (100%)
 delete mode 100644 src/renderer/main/panels/configuration/configuration-actions.ts
 create mode 100644 src/renderer/runtime/operations.ts

diff --git a/src/renderer/config-blocks/GamePadAxis.svelte b/src/renderer/config-blocks/GamePadAxis.svelte
index 165ea2931..6e094db3d 100644
--- a/src/renderer/config-blocks/GamePadAxis.svelte
+++ b/src/renderer/config-blocks/GamePadAxis.svelte
@@ -60,7 +60,7 @@
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
   import { Validator } from "./_validators.js";
 
diff --git a/src/renderer/config-blocks/GamePadButton.svelte b/src/renderer/config-blocks/GamePadButton.svelte
index 4c8a55f34..a55da48bf 100644
--- a/src/renderer/config-blocks/GamePadButton.svelte
+++ b/src/renderer/config-blocks/GamePadButton.svelte
@@ -56,7 +56,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { Script } from "./_script_parsers.js";
   import { Validator } from "./_validators.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
diff --git a/src/renderer/config-blocks/LedAnimationStart.svelte b/src/renderer/config-blocks/LedAnimationStart.svelte
index 9fe5fd3ec..df5ca51ba 100644
--- a/src/renderer/config-blocks/LedAnimationStart.svelte
+++ b/src/renderer/config-blocks/LedAnimationStart.svelte
@@ -57,7 +57,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
   export let config;
   export let humanScript;
diff --git a/src/renderer/config-blocks/LedAnimationStop.svelte b/src/renderer/config-blocks/LedAnimationStop.svelte
index 617dbd4f4..d2330b471 100644
--- a/src/renderer/config-blocks/LedAnimationStop.svelte
+++ b/src/renderer/config-blocks/LedAnimationStop.svelte
@@ -57,7 +57,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
   export let config;
   export let humanScript;
diff --git a/src/renderer/config-blocks/LedColor.svelte b/src/renderer/config-blocks/LedColor.svelte
index 92627680d..2cc208101 100644
--- a/src/renderer/config-blocks/LedColor.svelte
+++ b/src/renderer/config-blocks/LedColor.svelte
@@ -52,7 +52,7 @@ A -> B : AB-First step
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import Toggle from "../main/user-interface/Toggle.svelte";
   import { get } from "svelte/store";
   import { ElementType } from "@intechstudio/grid-protocol";
diff --git a/src/renderer/config-blocks/LedPhase.svelte b/src/renderer/config-blocks/LedPhase.svelte
index 99d9a70f3..548aa5910 100644
--- a/src/renderer/config-blocks/LedPhase.svelte
+++ b/src/renderer/config-blocks/LedPhase.svelte
@@ -60,7 +60,7 @@
 
   import { Validator } from "./_validators";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { get } from "svelte/store";
   import { ElementType } from "@intechstudio/grid-protocol";
 
diff --git a/src/renderer/config-blocks/Lookup.svelte b/src/renderer/config-blocks/Lookup.svelte
index 443eec928..729e89eec 100644
--- a/src/renderer/config-blocks/Lookup.svelte
+++ b/src/renderer/config-blocks/Lookup.svelte
@@ -39,7 +39,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators";
diff --git a/src/renderer/config-blocks/Midi.svelte b/src/renderer/config-blocks/Midi.svelte
index 8063fda25..9842948dc 100644
--- a/src/renderer/config-blocks/Midi.svelte
+++ b/src/renderer/config-blocks/Midi.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { Script } from "./_script_parsers.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
diff --git a/src/renderer/config-blocks/MidiFourteenBit.svelte b/src/renderer/config-blocks/MidiFourteenBit.svelte
index 624ffac93..a9cb93996 100644
--- a/src/renderer/config-blocks/MidiFourteenBit.svelte
+++ b/src/renderer/config-blocks/MidiFourteenBit.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators";
diff --git a/src/renderer/config-blocks/MidiNRPN.svelte b/src/renderer/config-blocks/MidiNRPN.svelte
index bc1a53217..6fa945fc9 100644
--- a/src/renderer/config-blocks/MidiNRPN.svelte
+++ b/src/renderer/config-blocks/MidiNRPN.svelte
@@ -48,7 +48,7 @@
   import { AtomicInput, MeltCheckbox } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { Validator } from "./_validators.js";
diff --git a/src/renderer/config-blocks/MouseButton.svelte b/src/renderer/config-blocks/MouseButton.svelte
index 913432f09..91b42caaa 100644
--- a/src/renderer/config-blocks/MouseButton.svelte
+++ b/src/renderer/config-blocks/MouseButton.svelte
@@ -37,7 +37,7 @@
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
   import { LocalDefinitions } from "../runtime/runtime.store";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { Script } from "./_script_parsers.js";
   import { Validator } from "./_validators";
 
diff --git a/src/renderer/config-blocks/MouseMove.svelte b/src/renderer/config-blocks/MouseMove.svelte
index 0a54f38ed..f38f0ffd5 100644
--- a/src/renderer/config-blocks/MouseMove.svelte
+++ b/src/renderer/config-blocks/MouseMove.svelte
@@ -40,7 +40,7 @@
   import { LocalDefinitions } from "../runtime/runtime.store";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
   import { Validator } from "./_validators";
 
diff --git a/src/renderer/config-blocks/TimerSource.svelte b/src/renderer/config-blocks/TimerSource.svelte
index f5dcad68f..a1ade3a79 100644
--- a/src/renderer/config-blocks/TimerSource.svelte
+++ b/src/renderer/config-blocks/TimerSource.svelte
@@ -39,7 +39,7 @@
   import { Script } from "./_script_parsers.js";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { LocalDefinitions } from "../runtime/runtime.store";
   import { Validator } from "./_validators";
 
diff --git a/src/renderer/config-blocks/TimerStart.svelte b/src/renderer/config-blocks/TimerStart.svelte
index 159274cb1..3c4341d70 100644
--- a/src/renderer/config-blocks/TimerStart.svelte
+++ b/src/renderer/config-blocks/TimerStart.svelte
@@ -39,7 +39,7 @@
   import { Script } from "./_script_parsers.js";
 
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { LocalDefinitions } from "../runtime/runtime.store";
   import { Validator } from "./_validators";
 
diff --git a/src/renderer/config-blocks/TimerStop.svelte b/src/renderer/config-blocks/TimerStop.svelte
index d16a1152d..729f409b3 100644
--- a/src/renderer/config-blocks/TimerStop.svelte
+++ b/src/renderer/config-blocks/TimerStop.svelte
@@ -36,7 +36,7 @@
   import { AtomicInput } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { AtomicSuggestions } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../main/panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../main/panels/configuration/Configuration";
   import { LocalDefinitions } from "../runtime/runtime.store";
   import { Validator } from "./_validators";
 
diff --git a/src/renderer/main/grid-layout/grid-modules/Device.svelte b/src/renderer/main/grid-layout/grid-modules/Device.svelte
index dd57d6e11..ce19f1a92 100644
--- a/src/renderer/main/grid-layout/grid-modules/Device.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/Device.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { runtime, user_input } from "./../../../runtime/runtime.store.ts";
   import { Analytics } from "./../../../runtime/analytics.js";
   import { contextMenu, contextTarget } from "@intechstudio/grid-uikit";
@@ -29,7 +29,7 @@
     copyElement,
     discardElement,
     clearElement,
-  } from "../../../main/panels/configuration/configuration-actions";
+  } from "../../../main/panels/configuration/Configuration";
 
   export let device = undefined;
   export let width = 225;
@@ -153,64 +153,20 @@
       });
   }
 
-  function handleOverwriteElement(elementNumber) {
-    overwriteElement({
-      dx: device.dx,
-      dy: device.dy,
-      page: get(user_input).pagenumber,
-      element: elementNumber,
-    }).catch((e) => {
-      console.warn(e);
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Whole Element Overwrite" },
-      mandatory: false,
-    });
+  function handleOverwriteElement(index: number) {
+    //TODO OPERATION
   }
 
-  function handleDiscardElement(elementNumber) {
-    discardElement({
-      dx: device.dx,
-      dy: device.dy,
-      page: get(user_input).pagenumber,
-      element: elementNumber,
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Whole Element Discard" },
-      mandatory: false,
-    });
+  function handleDiscardElement(index: number) {
+    //TODO OPERATION
   }
 
-  function handleCopyElement(elementNumber) {
-    copyElement({
-      dx: device.dx,
-      dy: device.dy,
-      page: get(user_input).pagenumber,
-      element: elementNumber,
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Whole Element Copy" },
-      mandatory: false,
-    });
+  function handleCopyElement(index: number) {
+    //TODO OPERATION
   }
 
-  function handleClearElement() {
-    const ui = get(user_input);
-    clearElement(ui.dx, ui.dy, ui.pagenumber, ui.elementnumber).catch((e) => {
-      console.warn(e);
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Clear Element" },
-      mandatory: false,
-    });
+  function handleClearElement(index: number) {
+    //TODO OPERATION
   }
 
   const modifier =
diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
index 023781af5..8b0612e0e 100644
--- a/src/renderer/main/modals/Export.svelte
+++ b/src/renderer/main/modals/Export.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { user_input_event } from "./../panels/configuration/Configuration.store.ts";
+  import { user_input_event } from "./../panels/configuration/Configuration";
   import { modal } from "./modal.store";
-  import { config_panel_blocks } from "../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../panels/configuration/Configuration";
   import MoltenModal from "./MoltenModal.svelte";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
   import MoltenPopup from "../panels/preferences/MoltenPopup.svelte";
diff --git a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
index b7c593053..49ef3c743 100644
--- a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
+++ b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
@@ -16,7 +16,7 @@
   import PolyLineGraph from "../../user-interface/PolyLineGraph.svelte";
   import { incoming_messages } from "../../../serialport/message-stream.store";
   import { Pane, Splitpanes } from "svelte-splitpanes";
-  import { config_panel_blocks } from "../../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../../panels/configuration/Configuration";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   const configScriptLength = writable(0);
diff --git a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
index 57582f73e..8bf340970 100644
--- a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
+++ b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
@@ -11,7 +11,7 @@
   } from "./MidiMonitor.store";
   import { grid } from "@intechstudio/grid-protocol";
   import { SvgIcon } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "../../panels/configuration/Configuration";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   // ok but slow nice
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 705b229f1..b156999d6 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -1,38 +1,25 @@
 <script lang="ts">
-  import { runtime } from "./../../../runtime/runtime.store.ts";
-  import { PasteActionsResult } from "./configuration-actions";
+  import { PasteActionsResult } from "./Configuration";
   import { appSettings } from "./../../../runtime/app-helper.store.js";
-  import { get, type Writable } from "svelte/store";
+  import { get } from "svelte/store";
   import ElementSelectionPanel from "./ElementSelectionPanel.svelte";
-
   import { Analytics } from "../../../runtime/analytics.js";
-
   import { fly, fade } from "svelte/transition";
   import { flip } from "svelte/animate";
   import * as eases from "svelte/easing";
-
   import EventPanel from "./EventPanel.svelte";
-
   import { lua_error_store } from "../DebugMonitor/DebugMonitor.store";
-
   import { logger, runtime, user_input } from "../../../runtime/runtime.store";
-
   import {
     config_panel_blocks,
     user_input_event,
     lastOpenedActionblocksInsert,
     ActionBlock,
-  } from "./Configuration.store";
-
-  import { configListScrollSize } from "../../_actions/boundaries.action";
-
+  } from "./Configuration";
   import Toolbar from "./components/Toolbar.svelte";
   import DropZone from "./components/DropZone.svelte";
   import DynamicWrapper from "./components/DynamicWrapper.svelte";
-  import Options from "./components/Options.svelte";
-
   import ExportConfigs from "./components/ExportConfigs.svelte";
-
   import {
     changeOrder,
     config_drag,
@@ -41,10 +28,8 @@
   import AddActionLine from "./components/AddActionLine.svelte";
   import AddAction from "./components/AddAction.svelte";
   import AddActionButton from "./components/AddActionButton.svelte";
-  import { NumberToEventType } from "@intechstudio/grid-protocol";
   import {
     insertAction,
-    updateAction,
     mergeActionsToCode,
     copyActions,
     pasteActions,
@@ -54,7 +39,7 @@
     overwriteElement,
     copyElement,
     clearElement,
-  } from "./configuration-actions";
+  } from "../../../runtime/operation";
 
   //////////////////////////////////////////////////////////////////////////////
   /////     VARIABLES, LIFECYCLE FUNCTIONS AND TYPE DEFINITIONS       //////////
@@ -80,22 +65,6 @@
 
   $: isSystemEventSelected = $user_input.elementnumber == 255;
 
-  //////////////////////////////////////////////////////////////////////////////
-  /////////////////       FUNCTION DEFINITIONS        //////////////////////////
-  //////////////////////////////////////////////////////////////////////////////
-
-  function sendCurrentConfigurationToGrid() {
-    const ui = get(user_input);
-    const target = runtime.findEvent(
-      ui.dx,
-      ui.dy,
-      ui.pagenumber,
-      ui.elementnumber,
-      ui.eventtype
-    );
-    target.sendToGrid();
-  }
-
   //////////////////////////////////////////////////////////////////////////////
   /////////////////           EVENT HANDLERS          //////////////////////////
   //////////////////////////////////////////////////////////////////////////////
@@ -199,127 +168,81 @@
     }
   }
 
-  function handleSelectionChange(block: ActionBlock) {
-    config_panel_blocks.update((s) => {
-      const stack: ActionBlock[] = [];
-      let n = s.findIndex((e) => e.action.id === block.action.id);
-      const value = block.selected;
-      do {
-        const current = s[n];
-        if (current.action.information.type === "composite_open") {
-          stack.push(current);
-        } else if (current.action.information.type === "composite_close") {
-          stack.pop();
-        }
-        current.selected = value;
-        ++n;
-      } while (stack.length > 0);
-      return s;
-    });
-  }
-
   function handleConfigInsertion(e) {
     let { index, configs } = e.detail;
-    /*
-    insertAction(index, configs, parent.runtimeRef);
-    sendCurrentConfigurationToGrid();
-    */
-  }
-
-  function handleConfigUpdate(e) {
-    const { index, config } = e.detail;
-    /*
-    updateAction(index, config);
-    sendCurrentConfigurationToGrid();
-
-    if (typeof target === "undefined") {
-      return;
-    }
-
-    Analytics.track({
-      event: "Config Action",
-      payload: {
-        click: "Update",
-        elementType: target.elementType,
-        eventType: NumberToEventType(target.eventType),
-        short: config.short,
-      },
-      mandatory: false,
-    });
-    */
+    const ui = get(user_input);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
+    insertAction();
   }
 
   function handleConvertToCodeBlock() {
+    const ui = get(user_input);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
     const blocks = get(config_panel_blocks);
     const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    mergeActionsToCode(...selected);
+    mergeActionsToCode(target, ...selected);
   }
 
   function handleRemove() {
+    const ui = get(user_input);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
     const blocks = get(config_panel_blocks);
     const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    removeActions(...selected);
+    removeActions(target, ...selected);
   }
 
   function handleCut() {
+    const ui = get(user_input);
+    const target = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
     const blocks = get(config_panel_blocks);
     const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    cutActions(...selected);
-  }
-
-  function handleReplace(e) {
-    const { index, config } = e.detail;
-    config_panel_blocks.update((s) => {
-      s[index] = config;
-      lastOpenedActionblocksInsert(config.short);
-      return s;
-    });
-    sendCurrentConfigurationToGrid();
+    cutActions(target, ...selected);
   }
 
   function handleOverwriteElement() {
     const ui = get(user_input);
-    overwriteElement({
-      dx: ui.dx,
-      dy: ui.dy,
-      page: ui.pagenumber,
-      element: ui.elementnumber,
-    }).catch((e) => {
-      console.warn(e);
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Whole Element Overwrite" },
-      mandatory: false,
-    });
-  }
-
-  function handleDiscardElement() {
-    const ui = get(user_input);
-    const element = runtime.findElement(
+    const target = runtime.findElement(
       ui.dx,
       ui.dy,
       ui.pagenumber,
       ui.elementnumber
     );
-    discardElement(element);
+    overwriteElement(target);
   }
 
   function handleCopyElement() {
     const ui = get(user_input);
-    copyElement({
-      dx: ui.dx,
-      dy: ui.dy,
-      page: ui.pagenumber,
-      element: ui.elementnumber,
-    });
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Whole Element Copy" },
-      mandatory: false,
-    });
+    const target = runtime.findElement(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber
+    );
+    copyElement(target);
   }
 
   function handleCopy() {
@@ -338,30 +261,30 @@
       ui.eventtype
     );
 
-    pasteActions(target).catch((e) => {
-      const error = e as PasteActionsResult;
-      logger.set({
-        type: "fail",
-        mode: 0,
-        classname: "config-limit-reached",
-        message: `Paste failed! ${error.text}`,
-      });
-    });
+    pasteActions(target);
   }
 
   function handleClearElement() {
-    /*
     const ui = get(user_input);
-    clearElement(ui.dx, ui.dy, ui.pagenumber, ui.elementnumber).catch((e) => {
-      console.warn(e);
-    });
+    const target = runtime.findElement(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber
+    );
 
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Clear Element" },
-      mandatory: false,
-    });
-    */
+    clearElement(target);
+  }
+
+  function handleDiscardElement() {
+    const ui = get(user_input);
+    const element = runtime.findElement(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber
+    );
+    discardElement(element);
   }
 
   function handleSelectAll() {
@@ -457,30 +380,7 @@
                   animate:flip={{ duration: 300, easing: eases.backOut }}
                   in:fade|global={{ delay: 0 }}
                 >
-                  <div class="flex flex-row justify-between relative">
-                    <div
-                      class="w-full bg-white absolute h-full opacity-10 pointer-events-none z-10"
-                      class:hidden={!block.selected}
-                    />
-
-                    <DynamicWrapper
-                      {index}
-                      data={block}
-                      on:update={handleConfigUpdate}
-                      on:replace={handleReplace}
-                      on:select={() => {
-                        handleSelectionChange(block);
-                      }}
-                    />
-
-                    <div class="z-20 flex items-center mx-2">
-                      <Options
-                        bind:selected={block.selected}
-                        disabled={!block.action.information.selectable}
-                        on:select={() => handleSelectionChange(block)}
-                      />
-                    </div>
-                  </div>
+                  <DynamicWrapper {index} data={block} />
                   {#if typeof $config_drag === "undefined"}
                     {#if ["composite_close", "single"].includes(block.action.information.type) || ["single"].includes($config_panel_blocks[index + 1]?.action.information.type) || !$appSettings.persistent.actionHelperText || typeof block.action.information.helperText === "undefined"}
                       <AddActionLine
diff --git a/src/renderer/main/panels/configuration/Configuration.store.ts b/src/renderer/main/panels/configuration/Configuration.ts
similarity index 100%
rename from src/renderer/main/panels/configuration/Configuration.store.ts
rename to src/renderer/main/panels/configuration/Configuration.ts
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index 5c3a6ed25..cf5e8f33f 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -16,9 +16,9 @@
   import { Analytics } from "../../../../runtime/analytics.js";
 
   import { getAllComponents } from "../../../../lib/_configs";
-  import { config_panel_blocks } from "../Configuration.store";
+  import { config_panel_blocks } from "../Configuration";
 
-  import { lastOpenedActionblocksInsert } from "../Configuration.store";
+  import { lastOpenedActionblocksInsert } from "../Configuration";
   import { NumberToEventType } from "@intechstudio/grid-protocol";
 
   import { onMount, onDestroy } from "svelte";
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 936b6181d..68375d645 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -1,14 +1,24 @@
 <script lang="ts">
-  import { ActionBlock } from "./../Configuration.store";
-  import { GridAction, GridEvent } from "./../../../../runtime/runtime";
+  import { config_panel_blocks } from "./../Configuration";
+  import Options from "./Options.svelte";
+  import { Analytics } from "./../../../../runtime/analytics.js";
+  import { ActionBlock } from "./../Configuration";
+  import {
+    GridAction,
+    ActionData,
+    GridEvent,
+    GridElement,
+  } from "./../../../../runtime/runtime";
   import { createEventDispatcher, onMount, type SvelteComponent } from "svelte";
   import {
     lastOpenedActionblocks,
     lastOpenedActionblocksInsert,
     lastOpenedActionblocksRemove,
-  } from "../Configuration.store";
+  } from "../Configuration";
   import { configIndexToId } from "../../../_actions/move.action";
   import { getComponentInformation } from "../../../../lib/_configs";
+  import { updateAction } from "../Configuration";
+  import { logger } from "../../../../runtime/runtime.store.js";
 
   const dispatch = createEventDispatcher();
 
@@ -51,11 +61,19 @@
     toggled = true;
   }
 
+  function handleReplace(e) {
+    const { index, config } = e.detail;
+    config_panel_blocks.update((s) => {
+      s[index] = config;
+      lastOpenedActionblocksInsert(config.short);
+      return s;
+    });
+    //TODO OPERATION
+  }
+
   function handleOutput(e) {
     const { short, script, name } = e.detail;
-    action.short = short;
-    action.script = script;
-    action.name = name;
+    //TODO OPERATION
   }
 
   function handleValidator(e) {
@@ -96,6 +114,25 @@
       ctrlIsDown = false;
     }
   }
+
+  function handleSelectionChange() {
+    config_panel_blocks.update((s) => {
+      const stack: ActionBlock[] = [];
+      let n = s.findIndex((e) => e.action.id === data.action.id);
+      const value = data.selected;
+      do {
+        const current = s[n];
+        if (current.action.information.type === "composite_open") {
+          stack.push(current);
+        } else if (current.action.information.type === "composite_close") {
+          stack.pop();
+        }
+        current.selected = value;
+        ++n;
+      } while (stack.length > 0);
+      return s;
+    });
+  }
 </script>
 
 <svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} />
@@ -113,7 +150,7 @@
   <carousel
     class="group/bg-color flex flex-grow h-auto min-h-[32px] border {!action.checkSyntax()
       ? 'border-error'
-      : 'border-transparent'}"
+      : 'border-transparent'} bri"
     id={configIndexToId(index)}
     class:rounded-tr-xl={action.information.rounding === "top"}
     class:rounded-br-xl={action.information.rounding === "bottom"}
@@ -121,6 +158,7 @@
     config-type={action.information.type}
     config-id={index}
     movable={action.information.movable}
+    class:brightness-125={data.selected}
     on:click|self={handleCarouselClicked}
   >
     <!-- Face of the config block, with disabled pointer events (Except for input fields) -->
@@ -174,6 +212,14 @@
       </div>
     </div>
   </carousel>
+
+  <div class="z-20 flex items-center mx-2">
+    <Options
+      bind:selected={data.selected}
+      disabled={!data.action.information.selectable}
+      on:select={handleSelectionChange}
+    />
+  </div>
 </wrapper>
 
 <style global>
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index 484ef1f20..cbbf4c5b8 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -10,7 +10,7 @@
   import { shortcut } from "./../../../_actions/shortcut.action";
   import MoltenToolbarButton from "../../../user-interface/MoltenToolbarButton.svelte";
   import Options from "./Options.svelte";
-  import { config_panel_blocks } from "../Configuration.store";
+  import { config_panel_blocks } from "../Configuration";
 
   const dispatch = createEventDispatcher();
 
diff --git a/src/renderer/main/panels/configuration/configuration-actions.ts b/src/renderer/main/panels/configuration/configuration-actions.ts
deleted file mode 100644
index d1529bf3a..000000000
--- a/src/renderer/main/panels/configuration/configuration-actions.ts
+++ /dev/null
@@ -1,450 +0,0 @@
-import { get } from "svelte/store";
-import { Analytics } from "../../../runtime/analytics";
-import { appClipboard, ClipboardKey } from "../../../runtime/clipboard.store";
-import {
-  ActionData,
-  GridAction,
-  GridElement,
-  GridEvent,
-  SendToGridResult,
-} from "../../../runtime/runtime";
-import { GridScript } from "@intechstudio/grid-protocol";
-import * as CodeBlock from "../../../config-blocks/CodeBlock.svelte";
-import { logger } from "../../../runtime/runtime.store";
-
-type ConfigObject = any;
-enum ActionType {
-  COPY = 0,
-  PASTE = 1,
-  CUT = 2,
-  DISCARD = 3,
-}
-
-export interface ActionResult {
-  value: boolean;
-  text: string;
-  type: ActionType;
-}
-
-export interface CopyActionsResult extends ActionResult {}
-export interface PasteActionsResult extends ActionResult {}
-export interface DiscardElementResult extends ActionResult {}
-
-export async function copyElement({ dx, dy, page, element }) {
-  /*
-  logger.set({
-    type: "progress",
-    mode: 0,
-    classname: "elementcopy",
-    message: `Copy events from element...`,
-  });
-
-  //Fetching all unloaded elements configuration
-  return runtime
-    .getModule(dx, dy)
-    .getPage(page)
-    .getElement(element)
-    .load()
-    .then(async (desc) => {
-      const current = ConfigTarget.create({
-        device: {
-          dx: dx,
-          dy: dy,
-        },
-        page: page,
-        element: element,
-        eventType: EventTypeToNumber(EventType.SETUP),
-      });
-
-      if (typeof current === "undefined") {
-        return Promise.reject("Target is undefined");
-      }
-
-      const data: any[] = [];
-      for (const event of current!.events ?? ([] as any[])) {
-        const target = ConfigTarget.create({
-          device: current.device,
-          element: current.element,
-          eventType: event.type,
-          page: current.page,
-        });
-        const list = await ConfigList.createFromTarget(target);
-        data.push({ eventType: target!.eventType, configs: list });
-      }
-
-      appClipboard.set({
-        key: ClipboardKey.ELEMENT,
-        payload: {
-          elementType: current.elementType,
-          data: data,
-        },
-      });
-      logger.set({
-        type: "success",
-        mode: 0,
-        classname: "elementcopy",
-        message: `Events are copied!`,
-      });
-    })
-    .catch((error) => {
-      console.warn(error);
-      Promise.reject(error);
-    });
-    */
-}
-
-export async function overwriteElement({ dx, dy, page, element }) {
-  /*
-  const clipboard = get(appClipboard);
-  if (clipboard?.key !== ClipboardKey.ELEMENT) {
-    throw `Overwrite Element: Invalid clipboard type ${clipboard?.key}`;
-  }
-
-  const current = ConfigTarget.create({
-    device: {
-      dx: dx,
-      dy: dy,
-    },
-    page: page,
-    element: element,
-    eventType: EventTypeToNumber(EventType.SETUP),
-  });
-
-  const promises: Promise<void>[] = [];
-  for (const e of current!.events ?? ([] as any[])) {
-    const eventtype = e.type;
-    const target = ConfigTarget.create({
-      device: current!.device,
-      element: current!.element,
-      eventType: eventtype,
-      page: current!.page,
-    });
-
-    const list = clipboard!.payload.data.find(
-      (e: any) => e.eventType === eventtype
-    )?.configs;
-    if (typeof list === "undefined") {
-      continue;
-    }
-    promises.push(list.sendTo({ target: target }));
-  }
-  return Promise.all(promises).then(() => {
-    const ui = get(user_input);
-    user_input.set({
-      dx: dx,
-      dy: dy,
-      pagenumber: page,
-      elementnumber: element,
-      eventtype: ui.eventtype,
-    });
-    const displayed = ConfigTarget.createFrom({
-      userInput: ui,
-    });
-    ConfigList.createFromTarget(displayed).then((list) => {
-      configManager.set(list);
-    });
-  });
-  */
-}
-
-export async function discardElement(
-  element: GridElement
-): Promise<DiscardElementResult> {
-  Analytics.track({
-    event: "Config Action",
-    payload: { click: "Whole Element Discard" },
-    mandatory: false,
-  });
-
-  logger.set({
-    type: "progress",
-    mode: 0,
-    classname: "elementdiscard",
-    message: `Discarding element configuration...`,
-  });
-
-  const promises: Promise<SendToGridResult>[] = [];
-  for (const event of element.events) {
-    if (event.isStored()) continue;
-
-    const stored = GridAction.parse(event.stored);
-    event.clear();
-    event.push(...stored);
-    const promise = event.sendToGrid();
-    promises.push(promise);
-  }
-
-  try {
-    await Promise.all(promises);
-    logger.set({
-      type: "progress",
-      mode: 0,
-      classname: "elementdiscard",
-      message: `Configuration on Element ${element.elementIndex} is discarded!`,
-    });
-    return Promise.resolve({
-      value: true,
-      text: "OK",
-      type: ActionType.DISCARD,
-    });
-  } catch (e) {
-    return Promise.reject({ value: false, text: e });
-  }
-}
-
-export function insertAction(
-  index: number | undefined,
-  configs: ConfigObject[],
-  parent: GridEvent
-) {
-  /*
-  if (typeof index === "undefined") {
-    index = get(configManager).length;
-  }
-
-  configManager.update((s) => {
-    const value = configs.map((e) => {
-      const node = new GridAction(parent, {
-        short: e.short,
-        script: e.script,
-        name: e.name,
-      });
-      e.runtimeRef = node;
-      e.id = node.id;
-      return e;
-    });
-    s.insert(index, ...value);
-    const res = s.checkLength();
-    if (!res.value) {
-      for (let i = 0; i < value.length; ++i) {
-        s.remove(index);
-      }
-      console.warn(res.detail);
-      handleError(res.detail);
-    }
-    return s;
-  });
-  */
-}
-
-export function updateAction(index: number, newConfig: ConfigObject) {
-  /*
-  const { short, script, name } = newConfig;
-
-  const cm = get(configManager);
-  const tempScript = cm[index].script;
-  const tempName = cm[index].name;
-
-  try {
-    configManager.update((s: ConfigList) => {
-      const config = s[index];
-      config.short = short;
-      config.script = script;
-      config.name = name;
-      const res = s.checkLength();
-      if (!res.value) {
-        throw "Length error";
-      }
-
-      return s;
-    });
-  } catch (e) {
-    configManager.update((s: ConfigList) => {
-      const config = s[index];
-      config.script = tempScript;
-      config.name = tempName;
-      return s;
-    });
-    configManager.refresh();
-    logger.set({
-      type: "fail",
-      mode: 0,
-      classname: "config-limit-reached",
-      message: `Update failed! Config limit reached, shorten your code, or delete actions!`,
-    });
-  }
-  */
-}
-
-export function mergeActionsToCode(...actions: GridAction[]) {
-  const codeBlock = new GridAction(undefined, {
-    short: CodeBlock.information.short,
-    script: actions.map((action) => action.script).join("\n"),
-    name: undefined,
-  });
-
-  //Check syntax
-  if (!codeBlock.checkSyntax()) {
-    logger.set({
-      type: "fail",
-      mode: 0,
-      classname: "luanotok",
-      message: `Cannot merge actionblocks with syntax error!`,
-    });
-    return;
-  }
-
-  const parentIds = actions.map((e) => e.id);
-  const target = actions.shift();
-  for (const action of actions) {
-    const parent = action.parent as GridEvent;
-    parent.remove(action);
-  }
-
-  (target.parent as GridEvent).replace(target, codeBlock);
-}
-
-export async function copyActions(
-  ...actions: GridAction[]
-): Promise<CopyActionsResult> {
-  Analytics.track({
-    event: "Config Action",
-    payload: { click: "Copy" },
-    mandatory: false,
-  });
-
-  appClipboard.set({
-    key: ClipboardKey.ACTION_BLOCKS,
-    payload: actions.map((e) => e.data),
-  });
-
-  return Promise.resolve({ value: true, text: "OK", type: ActionType.COPY });
-}
-
-export async function pasteActions(
-  target: GridEvent,
-  index?: number
-): Promise<PasteActionsResult> {
-  Analytics.track({
-    event: "Config Action",
-    payload: { click: "Paste" },
-    mandatory: false,
-  });
-  if (typeof index === "undefined") {
-    index = target.config.length;
-  }
-
-  const clipboard = get(appClipboard);
-
-  if (typeof clipboard === "undefined") {
-    return Promise.reject({
-      value: false,
-      text: `Nothing to paste, clipboard is empty`,
-      type: ActionType.PASTE,
-    });
-  }
-
-  if (clipboard?.key !== ClipboardKey.ACTION_BLOCKS) {
-    return Promise.reject({
-      value: false,
-      text: `Invalid clipboard type ${clipboard?.key}`,
-      type: ActionType.PASTE,
-    });
-  }
-
-  if (!target.isLoaded()) {
-    await target.load();
-  }
-
-  const actions = get(appClipboard).payload.map((e: ActionData) => {
-    return new GridAction(undefined, {
-      short: e.short,
-      script: e.script,
-      name: e.name,
-    });
-  });
-
-  target.insert(index, ...actions);
-  if (!target.checkLength()) {
-    actions.forEach((e: GridAction) => {
-      target.remove(e);
-    });
-    return Promise.reject({
-      value: false,
-      text: `Config limit reached, shorten your code, or delete actions!`,
-      type: ActionType.PASTE,
-    });
-  }
-
-  return Promise.resolve({ value: true, text: "OK", type: ActionType.PASTE });
-}
-
-export function removeActions(...actions: GridAction[]) {
-  Analytics.track({
-    event: "Config Action",
-    payload: { click: "Remove" },
-    mandatory: false,
-  });
-
-  for (const action of actions) {
-    const parent = action.parent as GridEvent;
-    parent.remove(action);
-  }
-}
-
-export function cutActions(...actions: GridAction[]) {
-  Analytics.track({
-    event: "Config Action",
-    payload: { click: "Cut" },
-    mandatory: false,
-  });
-
-  copyActions(...actions);
-  removeActions(...actions);
-}
-
-export function clearElement(
-  dx: number,
-  dy: number,
-  pageNumber: number,
-  elementNumber: number
-) {
-  /*
-  const device: any = runtime.modules.find(
-    (e: any) => e.dx === dx && e.dy === dy
-  );
-  const page: any = device?.pages.find((e: any) => e.pageNumber === pageNumber);
-  const type = page.control_elements.find(
-    (e: any) => e.elementIndex === elementNumber
-  ).type;
-  const events = grid.get_element_events(type).map((e) => {
-    return {
-      value: Number(e.value),
-      config: e.defaultConfig,
-      stored: e.defaultConfig,
-    };
-  });
-
-  const current = ConfigTarget.create({
-    device: {
-      dx: dx,
-      dy: dy,
-    },
-    page: pageNumber,
-    element: elementNumber,
-    eventType: EventTypeToNumber(EventType.SETUP),
-  });
-
-  const promises: Promise<string>[] = [];
-  for (const e of current!.events ?? ([] as any[])) {
-    const eventtype = e.type;
-    const target = ConfigTarget.create({
-      device: current!.device,
-      element: current!.element,
-      eventType: eventtype,
-      page: current!.page,
-    });
-    const defaultConfig = createActionsFromString(
-      undefined,
-      events.find((e: any) => e.value === eventtype)?.config
-    );
-
-    const list = ConfigList.createFromActions(defaultConfig);
-    promises.push(list.sendTo({ target: target }));
-  }
-
-  return Promise.all(promises).then(() => {
-    configManager.refresh();
-  });
-  */
-}
diff --git a/src/renderer/main/panels/preferences/Preferences.svelte b/src/renderer/main/panels/preferences/Preferences.svelte
index 7f9c3709f..447e9f758 100644
--- a/src/renderer/main/panels/preferences/Preferences.svelte
+++ b/src/renderer/main/panels/preferences/Preferences.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { config_panel_blocks } from "./../configuration/Configuration.store";
+  import { config_panel_blocks } from "./../configuration/Configuration";
   import { logger } from "./../../../runtime/runtime.store";
   import { get } from "svelte/store";
   import { instructions } from "../../../serialport/instructions";
diff --git a/src/renderer/main/user-interface/ActiveChanges.svelte b/src/renderer/main/user-interface/ActiveChanges.svelte
index 9b6863a9a..fdbf9c390 100644
--- a/src/renderer/main/user-interface/ActiveChanges.svelte
+++ b/src/renderer/main/user-interface/ActiveChanges.svelte
@@ -4,7 +4,7 @@
   import { logger } from "./../../runtime/runtime.store";
   import { appSettings } from "../../runtime/app-helper.store";
   import { writeBuffer } from "../../runtime/engine.store.ts";
-  import { config_panel_blocks } from "./../panels/configuration/Configuration.store";
+  import { config_panel_blocks } from "./../panels/configuration/Configuration";
   import { runtime, user_input } from "../../runtime/runtime.store";
   import { moduleOverlay } from "../../runtime/moduleOverlay";
   import { Analytics } from "../../runtime/analytics.js";
diff --git a/src/renderer/runtime/clipboard.store.ts b/src/renderer/runtime/clipboard.store.ts
index d87ea3421..c2b8ddc1f 100644
--- a/src/renderer/runtime/clipboard.store.ts
+++ b/src/renderer/runtime/clipboard.store.ts
@@ -1,4 +1,13 @@
-import { writable, Writable } from "svelte/store";
+import {
+  writable,
+  type Readable,
+  type Writable,
+  Subscriber,
+  Unsubscriber,
+  Updater,
+} from "svelte/store";
+import { ActionData, ElementData, GridAction, GridElement } from "./runtime";
+import { logger } from "./runtime.store";
 
 export enum ClipboardKey {
   ELEMENT,
@@ -7,8 +16,83 @@ export enum ClipboardKey {
 
 export interface ClipboardData {
   key: ClipboardKey;
-  payload: any;
+  payload: ActionData[] | ElementData;
 }
 
-export const appClipboard: Writable<ClipboardData | undefined> =
-  writable(undefined);
+export enum ClipboardOperationType {
+  COPY_ACTIONS,
+  COPY_ELEMENT,
+}
+
+export interface ClipboardOperationResult {
+  value: boolean;
+  text: string;
+  type: ClipboardOperationType;
+}
+
+export interface CopyActionsResult extends ClipboardOperationResult {}
+export interface CopyElementResult extends ClipboardOperationResult {}
+
+export class ApplicationClipboard implements Readable<ClipboardData> {
+  protected _internal: Writable<ClipboardData>;
+  constructor(value: ClipboardData) {
+    this.set(value);
+  }
+
+  public subscribe(
+    run: Subscriber<ClipboardData>,
+    invalidate?: (value?: ClipboardData) => void
+  ): Unsubscriber {
+    return this._internal.subscribe(run, invalidate);
+  }
+
+  private set(value: ClipboardData) {
+    this._internal.set(value);
+  }
+
+  private update(updater: Updater<ClipboardData>) {
+    this._internal.update(updater);
+  }
+
+  public async copyElement(element: GridElement): Promise<CopyElementResult> {
+    try {
+      if (!element.isLoaded()) {
+        await element.load();
+      }
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: "Clipboard: Error during loading element!",
+        type: ClipboardOperationType.COPY_ELEMENT,
+      });
+    }
+
+    this.set({
+      key: ClipboardKey.ELEMENT,
+      payload: element.data,
+    });
+
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: ClipboardOperationType.COPY_ELEMENT,
+    });
+  }
+
+  public async copyActions(
+    ...actions: GridAction[]
+  ): Promise<CopyActionsResult> {
+    appClipboard.set({
+      key: ClipboardKey.ACTION_BLOCKS,
+      payload: actions.map((e) => e.data),
+    });
+
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: ClipboardOperationType.COPY_ACTIONS,
+    });
+  }
+}
+
+export const appClipboard = new ApplicationClipboard(undefined);
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
new file mode 100644
index 000000000..912eab146
--- /dev/null
+++ b/src/renderer/runtime/operations.ts
@@ -0,0 +1,274 @@
+import { Analytics } from "./analytics";
+import { appClipboard, ClipboardKey } from "./clipboard.store";
+import { logger } from "./runtime.store";
+import {
+  GridOperationResult,
+  ElementData,
+  ActionData,
+  GridAction,
+  GridElement,
+  GridEvent,
+  SendToGridResult,
+} from "./runtime";
+import { get } from "svelte/store";
+
+function handleError(e: GridOperationResult) {
+  console.warn(`Operation error: ${e.text}`);
+}
+
+//Clipboard handlers
+export async function copyElement(element: GridElement) {
+  logger.set({
+    type: "progress",
+    mode: 0,
+    classname: "elementcopy",
+    message: `Copying events from element...`,
+  });
+
+  appClipboard
+    .copyElement(element)
+    .then((result) => {
+      logger.set({
+        type: "success",
+        mode: 0,
+        classname: "elementcopy",
+        message: `Events have been copied to clipbard!`,
+      });
+    })
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Whole Element Copy" },
+        mandatory: false,
+      });
+    });
+}
+
+export async function copyActions(...actions: GridAction[]) {
+  appClipboard
+    .copyActions(...actions)
+    .then((result) => {
+      logger.set({
+        type: "progress",
+        mode: 0,
+        classname: "actionscopy",
+        message: `Actions have been copied to clipbard!`,
+      });
+    })
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Copy" },
+        mandatory: false,
+      });
+    });
+}
+
+//GridElement handlers
+
+export async function overwriteElement(target: GridElement) {
+  const clipboard = get(appClipboard);
+
+  if (typeof clipboard === "undefined") {
+    return;
+  }
+
+  if (clipboard?.key !== ClipboardKey.ELEMENT) {
+    return;
+  }
+
+  target
+    .overwrite(clipboard.payload as ElementData)
+    .then((result) => {})
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Whole Element Overwrite" },
+        mandatory: false,
+      });
+    });
+}
+
+export async function discardElement(target: GridElement) {
+  logger.set({
+    type: "progress",
+    mode: 0,
+    classname: "elementdiscard",
+    message: `Discarding element configuration...`,
+  });
+
+  target
+    .discardChanges()
+    .then((result) => {
+      logger.set({
+        type: "progress",
+        mode: 0,
+        classname: "elementdiscard",
+        message: `Configuration on Element ${target.elementIndex} is discarded!`,
+      });
+    })
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Whole Element Discard" },
+        mandatory: false,
+      });
+    });
+}
+
+export async function clearElement(target: GridElement) {
+  logger.set({
+    type: "progress",
+    mode: 0,
+    classname: "elementclear",
+    message: `Clearing element configuration...`,
+  });
+
+  target
+    .resetDefault()
+    .then((result) => {
+      logger.set({
+        type: "progress",
+        mode: 0,
+        classname: "elementclear",
+        message: `Configuration on Element ${target.elementIndex} was reset to default!`,
+      });
+    })
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Clear Element" },
+        mandatory: false,
+      });
+    });
+}
+
+//GridAction handlers
+
+export async function updateAction(target: GridAction, data: ActionData) {
+  target
+    .overwride(data)
+    .then((result) => {})
+    .catch(handleError)
+    .finally(() => {
+      const event = target.parent as GridEvent;
+      const element = event.parent as GridElement;
+      Analytics.track({
+        event: "Config Action",
+        payload: {
+          click: "Update",
+          elementType: element.type,
+          eventType: event.type,
+          short: target.short,
+        },
+        mandatory: false,
+      });
+    });
+}
+
+//GridEvent handlers
+
+export async function mergeActionsToCode(
+  target: GridEvent,
+  ...actions: GridAction[]
+) {
+  target
+    .merge(...actions)
+    .then((result) => {})
+    .catch(handleError);
+}
+
+export async function pasteActions(target: GridEvent, index?: number) {
+  target
+    .pasteFromClipboard(index)
+    .then((result) => {})
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Paste" },
+        mandatory: false,
+      });
+    });
+}
+
+export async function removeActions(
+  target: GridEvent,
+  ...actions: GridAction[]
+) {
+  target
+    .remove(...actions)
+    .then((result) => {})
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Remove" },
+        mandatory: false,
+      });
+    });
+}
+
+export async function cutActions(target: GridEvent, ...actions: GridAction[]) {
+  appClipboard
+    .copyActions(...actions)
+    .then(() => {
+      target.remove(...actions);
+    })
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Config Action",
+        payload: { click: "Cut" },
+        mandatory: false,
+      });
+    });
+}
+
+export async function addActions(
+  target: GridEvent,
+  index?: number,
+  ...actions: GridAction[]
+) {
+  const actionMethod =
+    typeof index === "undefined"
+      ? target.push
+      : target.insert.bind(target, index);
+
+  actionMethod(...actions)
+    .catch(handleError)
+    .finally(() => {
+      for (const action of actions) {
+        Analytics.track({
+          event: "Config Action",
+          payload: {
+            click: "Add Action",
+            actionBlock: action.information.name,
+          },
+          mandatory: false,
+        });
+      }
+    });
+}
+
+export async function replaceActions(
+  target: GridEvent,
+  a: GridAction,
+  b: GridAction
+) {
+  target
+    .replace(a, b)
+    .catch(handleError)
+    .finally(() => {
+      Analytics.track({
+        event: "Replace Action",
+        payload: { click: "Replace" },
+        mandatory: false,
+      });
+    });
+}
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index b14a3b645..df48f11d9 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -28,6 +28,8 @@ import {
 } from "./runtime.store";
 import { v4 as uuidv4 } from "uuid";
 import { getComponentInformation } from "../lib/_configs";
+import * as CodeBlock from "../config-blocks/CodeBlock.svelte";
+import { appClipboard, ClipboardKey } from "./clipboard.store";
 
 type UUID = string;
 type LuaScript = string;
@@ -38,13 +40,45 @@ class NodeData {
 
 type ProfileData = any;
 type PresetData = any;
-type ProfileLoadResult = any;
-type PresetLoadResult = any;
 
-export type SendToGridResult = {
+export enum GridOperationType {
+  PASTE_ACTION,
+  CUT_ACTION,
+  DISCARD_ELEMENT,
+  UPDATE_ACTION,
+  OVERWRITE_ELEMENT,
+  REMOVE_ACTION,
+  MERGE_ACTIONS_TO_CODE,
+  RESET_ELEMENT,
+  SEND_EVENT_TO_GRID,
+  LOAD_PRESET,
+  LOAD_PROFILE,
+  OVERWRITE_EVENT,
+  INSERT_ACTIONS,
+  REPLACE_ACTION,
+}
+
+export interface GridOperationResult {
   value: boolean;
   text: string;
-};
+  type: GridOperationType;
+}
+
+export interface CopyActionsResult extends GridOperationResult {}
+export interface PasteActionsResult extends GridOperationResult {}
+export interface DiscardElementResult extends GridOperationResult {}
+export interface OverwriteElementResult extends GridOperationResult {}
+export interface UpdateActionResult extends GridOperationResult {}
+export interface MergeActionsToCodeResult extends GridOperationResult {}
+export interface RemoveActionsResult extends GridOperationResult {}
+export interface CutActionsResult extends GridOperationResult {}
+export interface ResetElementResult extends GridOperationResult {}
+export interface SendToGridResult extends GridOperationResult {}
+export interface PresetLoadResult extends GridOperationResult {}
+export interface ProfileLoadResult extends GridOperationResult {}
+export interface OverwriteEventResult extends GridOperationResult {}
+export interface InsertActionsResult extends GridOperationResult {}
+export interface ReplaceActionsResult extends GridOperationResult {}
 
 abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
   protected _internal: Writable<T>;
@@ -69,26 +103,34 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
   constructor(parent: RuntimeNode<any>, value?: T) {
     value.parent = parent;
     value.id = uuidv4();
-
     this._internal = writable(value);
   }
 
-  get data() {
+  public get data() {
     return get(this._internal);
   }
 
-  get parent(): RuntimeNode<any> {
+  protected set data(value: T) {
+    this._internal.set(value);
+    this.notifyParent();
+  }
+
+  public get parent(): RuntimeNode<any> {
     return this.getField("parent");
   }
 
-  set parent(value: RuntimeNode<any>) {
+  protected set parent(value: RuntimeNode<any>) {
     this.setField("parent", value);
   }
 
-  get id() {
+  public get id() {
     return this.getField("id");
   }
 
+  protected set id(value: UUID) {
+    this.setField("id", value);
+  }
+
   protected notify() {
     this._internal.update((s) => s);
   }
@@ -128,9 +170,37 @@ abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
 }
 
 export class ActionData extends NodeData {
-  short: string;
-  script: string;
-  name: string | undefined;
+  public short: string;
+  public script: string;
+  public name?: string;
+
+  constructor(short: string, script: string, name?: string) {
+    super();
+    this.short = short;
+    this.script = script;
+    this.name = name;
+  }
+
+  public toLua() {
+    return `--[[@${this.short}${
+      typeof this.name !== "undefined" ? `#${this.name}` : ""
+    }]] ${this.script}`;
+  }
+
+  public checkSyntax() {
+    const code =
+      this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
+    return GridScript.checkSyntax(code);
+  }
+
+  public get information() {
+    let result = GridAction.getInformation(this.short);
+    //Backward compatibility
+    if (typeof result === "undefined") {
+      result = GridAction.getInformation("raw");
+    }
+    return result;
+  }
 }
 
 export class GridAction extends RuntimeNode<ActionData> {
@@ -160,19 +230,51 @@ export class GridAction extends RuntimeNode<ActionData> {
         .match(/--\[\[@(.*)\]\]/)
         ?.at(1)
         .split(/#(.*)/);
-      const obj = new GridAction(undefined, {
+
+      const data = new ActionData(
         //Extract short + name, e.g.: '--[[@gms#name]]' => 'gms'
-        short: split[0],
-        script: configList[i + 1].trim(),
-        name: split.length > 1 ? split[1] : undefined,
-      });
+        split[0],
+        configList[i + 1].trim(),
+        split.length > 1 ? split[1] : undefined
+      );
+      const obj = new GridAction(undefined, data);
       result.push(obj);
     }
 
     return result;
   }
 
-  get indentation() {
+  static getInformation(short: string) {
+    const result = getComponentInformation({ short: short });
+    return result.information;
+  }
+
+  public toLua() {
+    return this.data.toLua();
+  }
+
+  public checkSyntax() {
+    return this.data.checkSyntax();
+  }
+
+  public sendToGrid(): Promise<SendToGridResult> {
+    const event = this.parent as GridEvent;
+    return event.sendToGrid();
+  }
+
+  public async overwride(data: ActionData): Promise<UpdateActionResult> {
+    this.script = data.script;
+    this.short = data.short;
+    this.name = data.name;
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: GridOperationType.UPDATE_ACTION,
+    });
+  }
+
+  // Getters
+  public get indentation() {
     let indentation = 0;
     const event = this.parent as GridEvent;
     for (let i = 0; i < event.config.length; ++i) {
@@ -194,65 +296,34 @@ export class GridAction extends RuntimeNode<ActionData> {
     }
   }
 
-  static getInformation(short: string) {
-    const result = getComponentInformation({ short: short });
-    return result.information;
+  public get information() {
+    return this.getField("information");
   }
 
-  // Getters
-  get information() {
-    let result = GridAction.getInformation(this.short);
-
-    //Backward compatibility
-    if (typeof result === "undefined") {
-      result = GridAction.getInformation("raw");
-    }
-
-    return result;
-  }
-
-  get script() {
+  public get script() {
     return this.getField("script");
   }
 
-  get short() {
+  public get short() {
     return this.getField("short");
   }
 
-  get name() {
+  public get name() {
     return this.getField("name");
   }
 
   // Setters
-  set script(value: string) {
+  private set script(value: string) {
     this.setField("script", value);
   }
 
-  set short(value: string) {
+  private set short(value: string) {
     this.setField("short", value);
   }
 
-  set name(value: string) {
+  private set name(value: string) {
     this.setField("name", value);
   }
-
-  toLua() {
-    return `--[[@${this.short}${
-      typeof this.name !== "undefined" ? `#${this.name}` : ""
-    }]] ${this.script}`;
-  }
-
-  sendToGrid(): Promise<SendToGridResult> {
-    const event = this.parent as GridEvent;
-    return event.sendToGrid();
-  }
-
-  //Returns true if syntax is OK
-  checkSyntax() {
-    const code =
-      this.information.syntaxPreprocessor?.generate(this.script) ?? this.script;
-    return GridScript.checkSyntax(code);
-  }
 }
 
 export class EventData extends NodeData {
@@ -264,7 +335,7 @@ export class EventData extends NodeData {
   constructor(type: number) {
     super();
     this.type = type;
-    this.config = undefined;
+    this.config = [];
     this.loaded = false;
     this.stored = undefined;
   }
@@ -296,7 +367,9 @@ export class EventData extends NodeData {
   }
 
   public clear() {
-    this.config?.forEach((e) => (e.parent = undefined));
+    for (const action of this.config) {
+      (action as any).parent = undefined;
+    }
     this.config = [];
   }
 
@@ -322,56 +395,146 @@ export class EventData extends NodeData {
 export class GridEvent extends RuntimeNode<EventData> {
   constructor(parent: GridElement, data?: EventData) {
     super(parent, data);
-    this.config = data.config ?? [];
   }
 
-  public replace(a: GridAction, b: GridAction) {
+  public replace(a: GridAction, b: GridAction): Promise<ReplaceActionsResult> {
     const index = this.config.findIndex((e) => e.id === a.id);
     try {
       this.remove(a);
       this.insert(index, b);
+      return Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.REPLACE_ACTION,
+      });
     } catch (e) {
-      `Replace failed! Reason: ${e}`;
+      this.insert(index, a); //Fallback to original value
+      return Promise.reject({
+        value: false,
+        text: `Replace failed! Reason: ${e}`,
+        type: GridOperationType.REPLACE_ACTION,
+      });
     }
   }
 
-  public remove(action: GridAction) {
-    const index = this.config.findIndex((e) => e.id === action.id);
-    if (index === -1) {
-      throw `Remove failed! Action with id of ${action.id} is not found.`;
+  public remove(...actions: GridAction[]): Promise<RemoveActionsResult> {
+    for (const action of actions) {
+      const index = this.config.findIndex((e) => e.id === action.id);
+      if (index === -1) {
+        return Promise.reject({
+          value: false,
+          text: `Remove failed! Action with id of ${action.id} is not found.`,
+          type: GridOperationType.REMOVE_ACTION,
+        });
+      }
     }
 
-    action.parent = undefined;
-    this.config = [
-      ...this.config.slice(0, index),
-      ...this.config.slice(index + 1),
-    ];
+    for (const action of actions) {
+      (action as any).parent = undefined;
+      const index = this.config.findIndex((e) => e.id === action.id);
+
+      this.config = [
+        ...this.config.slice(0, index),
+        ...this.config.slice(index + 1),
+      ];
+    }
+
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: GridOperationType.REMOVE_ACTION,
+    });
   }
 
-  public insert(index: number, ...actions: GridAction[]) {
+  public insert(
+    index: number,
+    ...actions: GridAction[]
+  ): Promise<InsertActionsResult> {
     if (index < 0 || index > this.config.length) {
-      throw `Add failed! Invalid index: ${index}.`;
+      return Promise.reject({
+        value: false,
+        text: `Add failed! Invalid index: ${index}.`,
+        type: GridOperationType.INSERT_ACTIONS,
+      });
     }
 
-    actions.forEach((e) => (e.parent = this));
-    this.config = [
-      ...this.config.slice(0, index),
-      ...actions,
-      ...this.config.slice(index),
-    ];
-    console.log(this.config);
+    try {
+      this.config = [
+        ...this.config.slice(0, index),
+        ...actions,
+        ...this.config.slice(index),
+      ];
+      actions.forEach((e) => ((e as any).parent = this));
+      return Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.INSERT_ACTIONS,
+      });
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: `Insert failed! Reason: ${e}`,
+        type: GridOperationType.INSERT_ACTIONS,
+      });
+    }
   }
 
-  public push(...action: GridAction[]) {
-    const actions = this.config;
-    action.forEach((e) => (e.parent = this));
-    actions.push(...action);
-    this.config = actions;
+  public async pasteFromClipboard(index?: number): Promise<PasteActionsResult> {
+    const clipboard = get(appClipboard);
+
+    if (typeof clipboard === "undefined") {
+      return Promise.reject({
+        value: false,
+        text: `Nothing to paste, clipboard is empty`,
+        type: GridOperationType.PASTE_ACTION,
+      });
+    }
+
+    if (clipboard?.key !== ClipboardKey.ACTION_BLOCKS) {
+      return Promise.reject({
+        value: false,
+        text: `Invalid clipboard type ${clipboard?.key}`,
+        type: GridOperationType.PASTE_ACTION,
+      });
+    }
+
+    if (!this.isLoaded()) {
+      await this.load();
+    }
+
+    if (typeof index === "undefined") {
+      index = this.config.length;
+    }
+
+    const actions = (get(appClipboard).payload as GridAction[]).map(
+      (e: ActionData) => {
+        const data = new ActionData(e.short, e.script, e.name);
+        return new GridAction(undefined, data);
+      }
+    );
+
+    try {
+      this.insert(index, ...actions);
+      return Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.PASTE_ACTION,
+      });
+    } catch (e) {
+      Promise.reject({
+        value: false,
+        text: "Config limit reached",
+        type: GridOperationType.PASTE_ACTION,
+      });
+    }
+  }
+
+  public push(...actions: GridAction[]): Promise<InsertActionsResult> {
+    return this.insert(this.config.length, ...actions);
   }
 
   public actionAt(index: number) {
-    const actions = this.config;
-    return actions.at(index);
+    return this.config.at(index);
   }
 
   public sendToGrid(): Promise<SendToGridResult> {
@@ -437,6 +600,84 @@ export class GridEvent extends RuntimeNode<EventData> {
     this.data.clear();
   }
 
+  public async merge(
+    ...actions: GridAction[]
+  ): Promise<MergeActionsToCodeResult> {
+    if (!actions.every((e) => this.config.includes(e))) {
+      return Promise.reject({
+        value: false,
+        text: "Detached action!",
+        type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+      });
+    }
+
+    //Sort to be merged actions by their index
+    actions.sort(
+      (a, b) =>
+        this.config.findIndex((e) => e.id === a.id) -
+        this.config.findIndex((e) => e.id === b.id)
+    );
+
+    const codeBlock = new GridAction(
+      undefined,
+      new ActionData(
+        CodeBlock.information.short,
+        actions.map((action) => action.script).join("\n")
+      )
+    );
+
+    if (!codeBlock.checkSyntax()) {
+      return Promise.reject({
+        value: false,
+        text: "Action(s) with syntax error(s) can not be merged!",
+        type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+      });
+    }
+
+    const index = this.config.findIndex((e) => e.id === actions[0].id);
+    this.insert(index, codeBlock);
+    actions.forEach((e) => this.remove(e));
+
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+    });
+  }
+
+  public async overwrite(data: EventData): Promise<OverwriteEventResult> {
+    if (this.type !== data.type) {
+      return Promise.reject({
+        value: false,
+        text: `Incompatible event types of ${data.type} and ${this.type}!`,
+        type: GridOperationType.OVERWRITE_EVENT,
+      });
+    }
+
+    try {
+      await this.load();
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: "Error loading event!",
+        type: GridOperationType.OVERWRITE_EVENT,
+      });
+    }
+
+    this.clear();
+    const copy = data.config.map(
+      (e) =>
+        new GridAction(undefined, new ActionData(e.short, e.script, e.name))
+    );
+    this.push(...copy);
+
+    return Promise.resolve({
+      value: false,
+      text: "OK",
+      type: GridOperationType.OVERWRITE_ELEMENT,
+    });
+  }
+
   public async load(): Promise<GridAction[]> {
     return new Promise((resolve, reject) => {
       if (this.isLoaded()) {
@@ -488,7 +729,15 @@ export class GridEvent extends RuntimeNode<EventData> {
 
   // Setters
   private set config(value: Array<GridAction>) {
+    const temp = this.config;
     this.setField("config", value);
+    if (!this.checkLength()) {
+      value.forEach((e: GridAction) => {
+        this.remove(e);
+      });
+      this.setField("config", temp);
+      throw "Config limit reached! Event value was reset.";
+    }
   }
 
   private set type(value: number) {
@@ -537,6 +786,64 @@ export class GridElement extends RuntimeNode<ElementData> {
     }
   }
 
+  public async discardChanges(): Promise<DiscardElementResult> {
+    const promises: Promise<SendToGridResult>[] = [];
+    for (const event of this.events) {
+      if (event.isStored()) continue;
+      const stored = GridAction.parse(event.stored);
+      event.clear();
+      event.push(...stored);
+      const promise = event.sendToGrid();
+      promises.push(promise);
+    }
+
+    try {
+      await Promise.all(promises);
+      return Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.DISCARD_ELEMENT,
+      });
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: e,
+        type: GridOperationType.DISCARD_ELEMENT,
+      });
+    }
+  }
+
+  public async overwrite(data: ElementData): Promise<OverwriteElementResult> {
+    if (this.type !== data.type) {
+      return Promise.reject({
+        value: false,
+        text: `Incompatible element types of ${data.type} and ${this.type}!`,
+        type: GridOperationType.OVERWRITE_ELEMENT,
+      });
+    }
+
+    try {
+      await this.load();
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: "Error loading element!",
+        type: GridOperationType.OVERWRITE_ELEMENT,
+      });
+    }
+
+    for (const event of this.events) {
+      const newEvent = data.events.find((e) => e.type === event.type);
+      event.overwrite(newEvent);
+    }
+
+    return Promise.resolve({
+      value: false,
+      text: "OK",
+      type: GridOperationType.OVERWRITE_ELEMENT,
+    });
+  }
+
   public hasChanges() {
     return this.data.hasChanges();
   }
@@ -559,6 +866,27 @@ export class GridElement extends RuntimeNode<ElementData> {
     return events.find((event) => event.type === type);
   }
 
+  public resetDefault(): Promise<ResetElementResult> {
+    const temp = grid
+      .get_element_events(this.type)
+      .map((e) => Object({ type: e.value, default: e.defaultConfig }));
+    for (const event of this.events) {
+      const defaultScript = temp.find((e) => e.type === event.type);
+      const defaultActions = GridAction.parse(defaultScript);
+      event.clear();
+      event.push(...defaultActions);
+    }
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: GridOperationType.RESET_ELEMENT,
+    });
+  }
+
+  public isLoaded() {
+    return this.events.every((e) => e.isLoaded());
+  }
+
   async load() {
     const promises: Array<Promise<void>> = [];
     for (const event of this.events) {

From 6dd252c5b0b55f7160c56b5894d06cdc9fd5c07a Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Thu, 3 Oct 2024 01:07:00 +0200
Subject: [PATCH 24/42] Daily push

---
 .../panels/configuration/Configuration.svelte | 72 +++++++++----------
 .../components/ActionPicker.svelte            | 30 ++------
 .../components/DynamicWrapper.svelte          |  8 ++-
 .../configuration/components/Toolbar.svelte   |  2 +-
 src/renderer/runtime/clipboard.store.ts       |  6 +-
 src/renderer/runtime/operations.ts            |  2 +-
 src/renderer/runtime/runtime.ts               | 22 ++----
 7 files changed, 55 insertions(+), 87 deletions(-)

diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index b156999d6..4a9de8607 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { config_panel_blocks } from "./Configuration.ts";
   import { PasteActionsResult } from "./Configuration";
   import { appSettings } from "./../../../runtime/app-helper.store.js";
   import { get } from "svelte/store";
@@ -29,7 +30,6 @@
   import AddAction from "./components/AddAction.svelte";
   import AddActionButton from "./components/AddActionButton.svelte";
   import {
-    insertAction,
     mergeActionsToCode,
     copyActions,
     pasteActions,
@@ -39,7 +39,8 @@
     overwriteElement,
     copyElement,
     clearElement,
-  } from "../../../runtime/operation";
+    addActions,
+  } from "../../../runtime/operations";
 
   //////////////////////////////////////////////////////////////////////////////
   /////     VARIABLES, LIFECYCLE FUNCTIONS AND TYPE DEFINITIONS       //////////
@@ -91,7 +92,6 @@
   }
 
   function handleDrop(e) {
-    /*
     if (typeof dropIndex === "undefined") {
       return;
     }
@@ -106,24 +106,21 @@
       return;
     }
 
-    config_panel_blocks.update((s) => {
-      //Collect dragged configs and mark them for deletion
-      const temp = [];
-      draggedIndexes.forEach((i) => {
-        temp.push(s[i]);
-        s[i] = undefined;
-      });
-
-      //Insert dragged configs at position
-      s.insert(targetIndex, ...temp);
-
-      //Remove marked configs
-      s = s.filter((e) => typeof e !== "undefined");
-      return s;
+    //get(config_panel_blocks).map(e => e.action)
+    return;
+    draggedIndexes.forEach((i) => {
+      temp.push(s[i]);
+      s[i] = undefined;
     });
 
+    //Insert dragged configs at position
+    s.insert(targetIndex, ...temp);
+
+    //Remove marked configs
+    s = s.filter((e) => typeof e !== "undefined");
+    return s;
+
     sendCurrentConfigurationToGrid();
-    */
   }
 
   function handleDragStart(e) {
@@ -168,8 +165,7 @@
     }
   }
 
-  function handleConfigInsertion(e) {
-    let { index, configs } = e.detail;
+  function handleConvertToCodeBlock() {
     const ui = get(user_input);
     const target = runtime.findEvent(
       ui.dx,
@@ -178,10 +174,12 @@
       ui.elementnumber,
       ui.eventtype
     );
-    insertAction();
+    const blocks = get(config_panel_blocks);
+    const selected = blocks.filter((e) => e.selected).map((e) => e.action);
+    mergeActionsToCode(target, ...selected);
   }
 
-  function handleConvertToCodeBlock() {
+  function handleRemove() {
     const ui = get(user_input);
     const target = runtime.findEvent(
       ui.dx,
@@ -192,10 +190,10 @@
     );
     const blocks = get(config_panel_blocks);
     const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    mergeActionsToCode(target, ...selected);
+    removeActions(target, ...selected);
   }
 
-  function handleRemove() {
+  function handleCut() {
     const ui = get(user_input);
     const target = runtime.findEvent(
       ui.dx,
@@ -206,10 +204,11 @@
     );
     const blocks = get(config_panel_blocks);
     const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    removeActions(target, ...selected);
+    cutActions(target, ...selected);
   }
 
-  function handleCut() {
+  function handleAddConfig(e: CustomEvent) {
+    const { configs, index } = e.detail;
     const ui = get(user_input);
     const target = runtime.findEvent(
       ui.dx,
@@ -218,9 +217,7 @@
       ui.elementnumber,
       ui.eventtype
     );
-    const blocks = get(config_panel_blocks);
-    const selected = blocks.filter((e) => e.selected).map((e) => e.action);
-    cutActions(target, ...selected);
+    addActions(target, index, ...configs);
   }
 
   function handleOverwriteElement() {
@@ -251,7 +248,8 @@
     copyActions(...selected);
   }
 
-  function handlePaste() {
+  function handlePaste(e: CustomEvent) {
+    const { index } = e?.detail ?? { index: undefined };
     const ui = get(user_input);
     const target = runtime.findEvent(
       ui.dx,
@@ -261,7 +259,7 @@
       ui.eventtype
     );
 
-    pasteActions(target);
+    pasteActions(target, index);
   }
 
   function handleClearElement() {
@@ -343,8 +341,6 @@
               <AddAction
                 index={0}
                 text={"There are no actions configured on this event."}
-                on:paste={handlePaste}
-                on:new-config={handleConfigInsertion}
               />
             </div>
           {:else}
@@ -364,7 +360,7 @@
                 <AddActionLine
                   index={0}
                   on:paste={handlePaste}
-                  on:new-config={handleConfigInsertion}
+                  on:new-config={handleAddConfig}
                 />
               {:else}
                 <DropZone
@@ -386,7 +382,7 @@
                       <AddActionLine
                         index={index + 1}
                         on:paste={handlePaste}
-                        on:new-config={handleConfigInsertion}
+                        on:new-config={handleAddConfig}
                       />
                     {:else}
                       <div class="mr-6">
@@ -394,7 +390,7 @@
                           text={block.action.information.helperText}
                           index={index + 1}
                           on:paste={handlePaste}
-                          on:new-config={handleConfigInsertion}
+                          on:new-config={handleAddConfig}
                         />
                       </div>
                     {/if}
@@ -421,8 +417,8 @@
         >
           <AddActionButton
             index={$config_panel_blocks.length}
-            on:pasteconfig_panel}
-            on:new-config={handleConfigInsertion}
+            on:paste={handlePaste}
+            on:new-config={handleAddConfig}
           />
           <ExportConfigs />
         </div>
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index cf5e8f33f..802e53565 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { ActionData } from "./../../../../runtime/runtime.ts";
   import { get } from "svelte/store";
   import { user_input, runtime } from "./../../../../runtime/runtime.store";
   import { GridAction } from "./../../../../runtime/runtime";
@@ -256,12 +257,6 @@
       },
     });
     referenceElement.dispatchEvent(event);
-
-    Analytics.track({
-      event: "Config Action",
-      payload: { click: "Paste" },
-      mandatory: false,
-    });
   }
 
   function handleReferenceElementClick(e) {
@@ -305,11 +300,10 @@
     defaultScript = replaceToLocalDefinition(defaultScript, "glg()", "gre");
     defaultScript = replaceToLocalDefinition(defaultScript, "glb()", "blu");
     const configs = [
-      new GridAction(undefined, {
-        short: component.information.short,
-        script: defaultScript,
-        name: undefined,
-      }),
+      new GridAction(
+        undefined,
+        new ActionData(component.information.short, defaultScript)
+      ),
     ];
 
     lastOpenedActionblocksInsert(configs[0].short);
@@ -318,11 +312,7 @@
     if (typeof compositeLua !== "undefined") {
       for (const obj of compositeLua) {
         configs.push(
-          new GridAction(undefined, {
-            short: obj.short,
-            script: obj.script,
-            name: undefined,
-          })
+          new GridAction(undefined, new ActionData(obj.short, obj.script))
         );
       }
     }
@@ -335,14 +325,6 @@
     });
     referenceElement.dispatchEvent(event);
 
-    Analytics.track({
-      event: "Config Action",
-      payload: {
-        click: "Add Action",
-        actionBlock: component.information.name,
-      },
-      mandatory: false,
-    });
     handleClose();
   }
 
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 68375d645..c24ba9fdb 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { ActionData } from "./../../../../runtime/runtime.ts";
   import { config_panel_blocks } from "./../Configuration";
   import Options from "./Options.svelte";
   import { Analytics } from "./../../../../runtime/analytics.js";
@@ -17,7 +18,10 @@
   } from "../Configuration";
   import { configIndexToId } from "../../../_actions/move.action";
   import { getComponentInformation } from "../../../../lib/_configs";
-  import { updateAction } from "../Configuration";
+  import {
+    updateAction,
+    replaceAction,
+  } from "./../../../../runtime/operations";
   import { logger } from "../../../../runtime/runtime.store.js";
 
   const dispatch = createEventDispatcher();
@@ -73,7 +77,7 @@
 
   function handleOutput(e) {
     const { short, script, name } = e.detail;
-    //TODO OPERATION
+    updateAction(data.action, new ActionData(short, script, name));
   }
 
   function handleValidator(e) {
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index cbbf4c5b8..180ccaf5b 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -131,7 +131,7 @@
         shortcut={{ control: true, code: "KeyV" }}
         iconPath={"paste_all"}
         disabled={$appClipboard?.key !== ClipboardKey.ELEMENT ||
-          !element?.isCompatible($appClipboard?.payload.elementType)}
+          !$element?.isCompatible($appClipboard?.payload.type)}
         color={"#006cb7"}
       />
 
diff --git a/src/renderer/runtime/clipboard.store.ts b/src/renderer/runtime/clipboard.store.ts
index c2b8ddc1f..50a0d219c 100644
--- a/src/renderer/runtime/clipboard.store.ts
+++ b/src/renderer/runtime/clipboard.store.ts
@@ -34,8 +34,8 @@ export interface CopyActionsResult extends ClipboardOperationResult {}
 export interface CopyElementResult extends ClipboardOperationResult {}
 
 export class ApplicationClipboard implements Readable<ClipboardData> {
-  protected _internal: Writable<ClipboardData>;
-  constructor(value: ClipboardData) {
+  protected _internal: Writable<ClipboardData> = writable();
+  constructor(value?: ClipboardData) {
     this.set(value);
   }
 
@@ -95,4 +95,4 @@ export class ApplicationClipboard implements Readable<ClipboardData> {
   }
 }
 
-export const appClipboard = new ApplicationClipboard(undefined);
+export const appClipboard = new ApplicationClipboard();
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index 912eab146..340083fc8 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -256,7 +256,7 @@ export async function addActions(
     });
 }
 
-export async function replaceActions(
+export async function replaceAction(
   target: GridEvent,
   a: GridAction,
   b: GridAction
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index df48f11d9..809be61f9 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -871,7 +871,7 @@ export class GridElement extends RuntimeNode<ElementData> {
       .get_element_events(this.type)
       .map((e) => Object({ type: e.value, default: e.defaultConfig }));
     for (const event of this.events) {
-      const defaultScript = temp.find((e) => e.type === event.type);
+      const defaultScript = temp.find((e) => e.type === event.type).default;
       const defaultActions = GridAction.parse(defaultScript);
       event.clear();
       event.push(...defaultActions);
@@ -887,14 +887,10 @@ export class GridElement extends RuntimeNode<ElementData> {
     return this.events.every((e) => e.isLoaded());
   }
 
-  async load() {
-    const promises: Array<Promise<void>> = [];
+  public async load() {
+    const promises: Array<Promise<GridAction[]>> = [];
     for (const event of this.events) {
-      promises.push(
-        new Promise((resolve) => {
-          event.load().then(() => resolve());
-        })
-      );
+      promises.push(event.load());
     }
     Promise.all(promises);
   }
@@ -1039,7 +1035,6 @@ export interface ModuleData extends NodeData {
   dy: number;
   fwMismatch: boolean;
   fwVersion: FirmwareVersion;
-  id: string;
   map: DirectionMap;
   portstate: any;
   rot: number;
@@ -1100,10 +1095,6 @@ export class GridModule extends RuntimeNode<ModuleData> {
     return this.getField("fwVersion");
   }
 
-  get id() {
-    return this.getField("id");
-  }
-
   get map() {
     return this.getField("map");
   }
@@ -1150,10 +1141,6 @@ export class GridModule extends RuntimeNode<ModuleData> {
     this.setField("fwVersion", value);
   }
 
-  set id(value: string) {
-    this.setField("id", value);
-  }
-
   set map(value: DirectionMap) {
     this.setField("map", value);
   }
@@ -1383,7 +1370,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
         ? Architecture.VIRTUAL
         : grid.module_architecture_from_hwcfg(heartbeat_class_param.HWCFG),
       portstate: heartbeat_class_param.PORTSTATE,
-      id: moduleType + "_" + "dx:" + header_param.SX + ";dy:" + header_param.SY,
       dx: header_param.SX,
       dy: header_param.SY,
       rot: header_param.ROT,

From 27d634e67a15e9e068367e0fc39647786a29916f Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 4 Oct 2024 13:30:40 +0200
Subject: [PATCH 25/42] Daily push

---
 .../grid-layout/grid-modules/Device.svelte    | 142 +----
 .../overlays/PresetLoadOverlay.svelte         |  86 +--
 .../overlays/ProfileLoadOverlay.svelte        | 101 ++--
 .../underlays/ActiveChanges.svelte            |   2 +-
 .../panels/configuration/Configuration.ts     |  56 +-
 .../components/DynamicWrapper.svelte          |  29 +-
 .../configuration/components/Toolbar.svelte   |  36 +-
 .../panels/preferences/Preferences.svelte     |  14 +-
 .../main/user-interface/ActiveChanges.svelte  |  40 +-
 src/renderer/runtime/operations.ts            |  88 ++-
 src/renderer/runtime/runtime.store.ts         |  13 +-
 src/renderer/runtime/runtime.ts               | 552 +++++++++++-------
 12 files changed, 635 insertions(+), 524 deletions(-)

diff --git a/src/renderer/main/grid-layout/grid-modules/Device.svelte b/src/renderer/main/grid-layout/grid-modules/Device.svelte
index ce19f1a92..58e685b0d 100644
--- a/src/renderer/main/grid-layout/grid-modules/Device.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/Device.svelte
@@ -1,6 +1,16 @@
-<script lang="ts">
-  import { runtime, user_input } from "./../../../runtime/runtime.store.ts";
-  import { Analytics } from "./../../../runtime/analytics.js";
+<script>
+  import { appClipboard } from "./../../../runtime/clipboard.store.ts";
+  import { runtime, user_input } from "./../../../runtime/runtime.store";
+  import {
+    overwriteElement,
+    copyElement,
+    discardElement,
+    clearElement,
+    isCopyElementEnabled,
+    isOverwriteElementEnabled,
+    isDiscardElementEnabled,
+    isClearElementEnabled,
+  } from "./../../../runtime/operations";
   import { contextMenu, contextTarget } from "@intechstudio/grid-uikit";
   import XX16 from "./devices/XX16.svelte";
   import PBF4 from "./devices/PBF4.svelte";
@@ -24,16 +34,9 @@
   import { onMount } from "svelte";
   import ModuleSelection from "./underlays/ModuleBorder.svelte";
   import { get } from "svelte/store";
-  import {
-    overwriteElement,
-    copyElement,
-    discardElement,
-    clearElement,
-  } from "../../../main/panels/configuration/Configuration";
 
   export let device = undefined;
   export let width = 225;
-
   let component = undefined;
 
   onMount(() => {
@@ -71,102 +74,20 @@
     });
   }
 
-  function handlePresetLoad(e) {
-    Analytics.track({
-      event: "Preset Load Start",
-      payload: {},
-      mandatory: false,
-    });
-
-    const { sender, elementNumber } = e.detail;
-    runtime
-      .loadPreset({
-        dx: device.dx,
-        dy: device.dy,
-        element: elementNumber,
-        preset: $selectedConfigStore,
-      })
-      .then(() => {
-        Analytics.track({
-          event: "Preset Load Success",
-          payload: {},
-          mandatory: false,
-        });
-        sender.dispatchEvent(
-          new CustomEvent("preset-load", {
-            detail: {
-              success: true,
-            },
-          })
-        );
-      })
-      .catch((e) => {
-        sender.dispatchEvent(
-          new CustomEvent("preset-load", {
-            detail: {
-              success: false,
-            },
-          })
-        );
-      });
-  }
-
-  function handleProfileLoad(e) {
-    const { sender, device } = e.detail;
-
-    Analytics.track({
-      event: "Pro file Load Start",
-      payload: {},
-      mandatory: false,
-    });
-
-    runtime
-      .loadProfile({
-        dx: device.dx,
-        dy: device.dy,
-        page: 0,
-        profile: $selectedConfigStore.configs,
-      })
-      .then(() => {
-        sender.dispatchEvent(
-          new CustomEvent("profile-load", {
-            detail: {
-              success: true,
-            },
-          })
-        );
-
-        Analytics.track({
-          event: "Profile Load Success",
-          payload: {},
-          mandatory: false,
-        });
-      })
-      .catch((error) => {
-        sender.dispatchEvent(
-          new CustomEvent("profile-load", {
-            detail: {
-              success: false,
-            },
-          })
-        );
-      });
-  }
-
-  function handleOverwriteElement(index: number) {
-    //TODO OPERATION
+  function handleOverwriteElement(element) {
+    overwriteElement(element);
   }
 
-  function handleDiscardElement(index: number) {
-    //TODO OPERATION
+  function handleDiscardElement(element) {
+    discardElement(element);
   }
 
-  function handleCopyElement(index: number) {
-    //TODO OPERATION
+  function handleCopyElement(element) {
+    copyElement(element);
   }
 
-  function handleClearElement(index: number) {
-    //TODO OPERATION
+  function handleClearElement(element) {
+    clearElement(element);
   }
 
   const modifier =
@@ -210,7 +131,7 @@
       let:isLeftCut
       let:isRightCut
     >
-      {@const target = runtime.findElement(
+      {@const element = runtime.findElement(
         device.dx,
         device.dy,
         $user_input.pagenumber,
@@ -221,26 +142,27 @@
           items: [
             {
               text: [`Copy Element`, `(${modifier[0]} + C)`],
-              handler: () => handleCopyElement(elementNumber),
-              isDisabled: () => false,
+              handler: () => handleCopyElement(element),
+              isDisabled: () => $isCopyElementEnabled === false,
               iconPath: "copy_all",
             },
             {
               text: [`Overwrite Element`, `(${modifier[0]} + V)`],
-              handler: () => handleOverwriteElement(elementNumber),
-              isDisabled: () => false,
+              handler: () => handleOverwriteElement(element),
+              isDisabled: () =>
+                !isOverwriteElementEnabled(get(element), get(appClipboard)),
               iconPath: "paste_all",
             },
             {
               text: [`Discard Element Changes`, `(${modifier[0]} + Shift + D)`],
-              handler: () => handleDiscardElement(elementNumber),
-              isDisabled: () => false,
+              handler: () => handleDiscardElement(element),
+              isDisabled: () => !isDiscardElementEnabled(get(element)),
               iconPath: "clear_from_device_01",
             },
             {
               text: [`Clear Element`, `(Shift + Delete)`],
-              handler: handleClearElement,
-              isDisabled: () => false,
+              handler: () => handleClearElement(element),
+              isDisabled: () => !isClearElementEnabled(get(element)),
               iconPath: "clear_element",
             },
           ],
@@ -296,7 +218,6 @@
           {isRightCut}
           visible={$moduleOverlay === "configuration-load-overlay" &&
             $selectedConfigStore?.configType === "preset"}
-          on:click={handlePresetLoad}
         />
       </div>
       <ControlNameOverlay
@@ -312,7 +233,6 @@
         {device}
         visible={$moduleOverlay === "configuration-load-overlay" &&
           $selectedConfigStore?.configType === "profile"}
-        on:click={handleProfileLoad}
       />
     </svelte:fragment>
   </svelte:component>
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
index 8517fd5dd..716d92726 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-  import { runtime } from "./../../../../runtime/runtime.store.ts";
+  import { GridPresetData } from "./../../../../runtime/runtime.ts";
   import { grid } from "@intechstudio/grid-protocol";
-  import { user_input } from "./../../../../runtime/runtime.store";
+  import { user_input, runtime } from "./../../../../runtime/runtime.store";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
-  import { createEventDispatcher, onMount } from "svelte";
   import { get } from "svelte/store";
   import { appSettings } from "../../../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
-  import { GridEvent } from "../../../../runtime/runtime.js";
+  import { Analytics } from "../../../../runtime/analytics.js";
 
   export let device = undefined;
   export let visible = false;
@@ -15,19 +14,16 @@
   export let isRightCut = undefined;
   export let isLeftCut = undefined;
 
-  const dispatch = createEventDispatcher();
-
   let type = undefined;
   let loaded = false;
-  let container;
 
-  enum State {
+  enum Compatibility {
     INCOMPATIBLE,
     COMPATIBLE,
     MATCHING,
   }
 
-  let state = State.INCOMPATIBLE;
+  let compatible = Compatibility.INCOMPATIBLE;
 
   $: {
     if (elementNumber === 255) {
@@ -40,33 +36,44 @@
     }
   }
 
-  function handleClick(e) {
-    dispatch("click", {
-      sender: container,
-      elementNumber: elementNumber,
-    });
-  }
-
   function handlePresetLoad(e) {
-    const { success } = e.detail;
-    loaded = success;
-    if (!success) {
-      return;
-    }
+    Analytics.track({
+      event: "Preset Load Start",
+      payload: {},
+      mandatory: false,
+    });
 
     const ui = get(user_input);
-    const target = runtime.findModule(ui.dx, ui.dy);
-    const { dx, dy } = target;
+    const element = runtime.findElement(
+      device.dx,
+      device.dy,
+      ui.pagenumber,
+      elementNumber
+    );
+    const preset = GridPresetData.createFromCloudData($selectedConfigStore);
+    element
+      .loadPreset(preset)
+      .then(() => {
+        loaded = true;
+        Analytics.track({
+          event: "Preset Load Success",
+          payload: {},
+          mandatory: false,
+        });
 
-    if (dx !== device.dx || dy !== device.dy) {
-      user_input.set({
-        dx: device.dx,
-        dy: device.dy,
-        pagenumber: ui.pagenumber,
-        elementnumber: ui.elementnumber,
-        eventtype: ui.eventtype,
+        if (ui.dx !== device.dx || ui.dy !== device.dy) {
+          user_input.set({
+            dx: device.dx,
+            dy: device.dy,
+            pagenumber: ui.pagenumber,
+            elementnumber: elementNumber,
+            eventtype: ui.eventtype,
+          });
+        }
+      })
+      .catch((e) => {
+        loaded = false;
       });
-    }
   }
 
   let isChanged = false;
@@ -106,20 +113,20 @@
     );
 
     if (leftSideCompatible && rightSideCompatible) {
-      state = State.MATCHING;
+      compatible = Compatibility.MATCHING;
     } else if (rightSideCompatible) {
-      state = State.COMPATIBLE;
+      compatible = Compatibility.COMPATIBLE;
     } else {
-      state = State.INCOMPATIBLE;
+      compatible = Compatibility.INCOMPATIBLE;
     }
   }
 
   $: handleSelectedConfigChange($selectedConfigStore);
 </script>
 
-<container bind:this={container} on:preset-load={handlePresetLoad}>
+<container>
   {#if visible}
-    {#if state === State.COMPATIBLE || state === State.MATCHING}
+    {#if compatible === Compatibility.COMPATIBLE || compatible === Compatibility.MATCHING}
       <div
         class="w-full h-full relative overflow-hidden"
         class:loaded-element={loaded && !isChanged}
@@ -137,8 +144,9 @@
         >
           {#if !loaded}
             <button
-              on:click={handleClick}
-              class="rounded pointer-events-auto {state === State.MATCHING
+              on:click={handlePresetLoad}
+              class="rounded pointer-events-auto {compatible ===
+              Compatibility.MATCHING
                 ? 'matching-icon'
                 : 'compatible-icon'} bg-opacity-75 p-1"
               class:icon-corner-cut-r={isRightCut}
@@ -146,7 +154,7 @@
               class:scale-50={elementNumber == 255}
             >
               <SvgIcon
-                fill={state === State.MATCHING ? "#FFF" : "#000"}
+                fill={compatible === Compatibility.MATCHING ? "#FFF" : "#000"}
                 iconPath={loaded ? "tick" : "download"}
               />
             </button>
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
index fd5358859..8b123ea07 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
@@ -1,58 +1,67 @@
-<script>
+<script lang="ts">
+  import { Analytics } from "./../../../../runtime/analytics.js";
   import { get } from "svelte/store";
-  import { user_input } from "./../../../../runtime/runtime.store";
+  import { user_input, runtime } from "./../../../../runtime/runtime.store";
   import { selectedConfigStore } from "../../../../runtime/config-helper.store";
   import { appSettings } from "../../../../runtime/app-helper.store";
-  import { createEventDispatcher } from "svelte";
   import { SvgIcon } from "@intechstudio/grid-uikit";
+  import { GridProfileData } from "../../../../runtime/runtime.js";
 
   export let device = undefined;
   export let visible = false;
 
-  let loadedState = 0;
-  let container;
-
-  const dispatch = createEventDispatcher();
-
-  function handleLoadClicked(e) {
-    loadedState = 1;
-    dispatch("click", {
-      sender: container,
-      device: { dx: device.dx, dy: device.dy },
-    });
+  enum LoadState {
+    READY,
+    BUSY,
+    LOADED,
   }
 
+  let state = LoadState.READY;
+
   $: {
     if ($selectedConfigStore) {
-      loadedState = 0;
+      state = LoadState.READY;
     }
   }
 
   function handleProfileLoad(e) {
-    const { success } = e.detail;
-    loadedState = success ? 2 : 0;
+    Analytics.track({
+      event: "Pro file Load Start",
+      payload: {},
+      mandatory: false,
+    });
 
-    if (!success) {
-      return;
-    }
+    state = LoadState.BUSY;
 
     const ui = get(user_input);
-    const target = runtime.findModule(ui.dx, ui.dy);
-
-    const { dx, dy } = target;
-    if (dx !== device.dx || dy !== device.dy) {
-      user_input.set({
-        dx: device.dx,
-        dy: device.dy,
-        pagenumber: ui.pagenumber,
-        elementnumber: ui.elementnumber,
-        eventtype: ui.eventtype,
+    const page = runtime.findPage(device.dx, device.dy, ui.pagenumber);
+    const profile = GridProfileData.createFromCloudData($selectedConfigStore);
+    page
+      .loadProfile(profile)
+      .then(() => {
+        Analytics.track({
+          event: "Profile Load Success",
+          payload: {},
+          mandatory: false,
+        });
+        state = LoadState.LOADED;
+        if (ui.dx !== device.dx || ui.dy !== device.dy) {
+          user_input.set({
+            dx: device.dx,
+            dy: device.dy,
+            pagenumber: ui.pagenumber,
+            elementnumber: ui.elementnumber,
+            eventtype: ui.eventtype,
+          });
+        }
+      })
+      .catch((error) => {
+        state = LoadState.READY;
       });
-    }
   }
 </script>
 
-<container bind:this={container} on:profile-load={handleProfileLoad}>
+<container>
   {#if visible}
     <div
       class="text-white w-full flex flex-col
@@ -62,31 +71,23 @@
     >
       {#if device?.type === $selectedConfigStore?.type}
         <div class="w-fit relative">
-          {#key loadedState || $selectedConfigStore}
+          {#key state || $selectedConfigStore}
             <button
-              on:click={handleLoadClicked}
-              disabled={loadedState === 1}
-              class="flex flex-row px-4 py-2 rounded {loadedState == 2
+              on:click={handleProfileLoad}
+              disabled={state === 1}
+              class="flex flex-row px-4 py-2 rounded {state == 2
                 ? 'loaded-element'
                 : 'element'}"
             >
-              {#if loadedState === 0}
+              {#if state === 0}
                 <span class="text-white mr-2">Load Profile</span>
-                <SvgIcon
-                  fill="#FFF"
-                  iconPath={"download"}
-                  displayMode={"static"}
-                />
-              {:else if loadedState === 1}
+                <SvgIcon fill="#FFF" iconPath={"download"} />
+              {:else if state === 1}
                 <span class="text-white mr-2">Loading...</span>
-                <SvgIcon
-                  fill="#FFF"
-                  iconPath={"download"}
-                  displayMode={"static"}
-                />
-              {:else if loadedState === 2}
+                <SvgIcon fill="#FFF" iconPath={"download"} />
+              {:else if state === 2}
                 <span class="text-white">Loaded!</span>
-                <SvgIcon fill="#FFF" iconPath={"tick"} displayMode={"static"} />
+                <SvgIcon fill="#FFF" iconPath={"tick"} />
               {/if}
             </button>
           {/key}
diff --git a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
index 814f81bbb..ba5b55df4 100644
--- a/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/underlays/ActiveChanges.svelte
@@ -24,7 +24,7 @@
 {#if visible}
   <div
     class="changeable-element
-    {element.hasChanges() ? 'changed-element' : ''}
+    {$element.hasChanges() ? 'changed-element' : ''}
       {isRightCut ? 'corner-cut-r' : ''}
       {isLeftCut ? 'corner-cut-l' : ''}"
     style="   {elementNumber == 255
diff --git a/src/renderer/main/panels/configuration/Configuration.ts b/src/renderer/main/panels/configuration/Configuration.ts
index e5fac1acb..094edd268 100644
--- a/src/renderer/main/panels/configuration/Configuration.ts
+++ b/src/renderer/main/panels/configuration/Configuration.ts
@@ -37,8 +37,8 @@ export type ActionBlock = {
 
 // Derive a readable store from user_input
 export const user_input_event: Readable<GridEvent | undefined> = derived(
-  [user_input, runtime],
-  ([$user_input, $runtime], set) => {
+  user_input,
+  ($user_input, set) => {
     const event = runtime.findEvent(
       $user_input.dx,
       $user_input.dy,
@@ -48,7 +48,11 @@ export const user_input_event: Readable<GridEvent | undefined> = derived(
     );
 
     if (typeof event === "undefined") {
-      set(undefined);
+      return;
+    }
+
+    if (event.isLoaded()) {
+      set(event);
       return;
     }
 
@@ -62,6 +66,7 @@ export const user_input_event: Readable<GridEvent | undefined> = derived(
         console.error("Failed to load event:", err);
         set(undefined); // Handle loading error by setting undefined
       });
+    return;
   }
 );
 
@@ -70,18 +75,41 @@ export const config_panel_blocks: Writable<ActionBlock[]> = create_store();
 
 function create_store() {
   const internal: Writable<ActionBlock[]> = writable([]);
+  let unsubscribeInner: (() => void) | null = null; // To track the inner store subscription
+
+  // Subscribe to the outer store (user_input_event)
+  user_input_event.subscribe((eventStore) => {
+    // Unsubscribe from the previous inner store if it exists
+    if (unsubscribeInner) {
+      unsubscribeInner();
+      unsubscribeInner = null;
+    }
 
-  // Subscribe to user_input_event changes
-  user_input_event.subscribe((event) => {
-    console.log("Event updated:", event);
-
-    const value =
-      event?.config.map((e) => {
-        return { action: e, selected: false } as ActionBlock;
-      }) || []; // Fallback to an empty array if event is undefined
-
-    // Update the internal writable store
-    internal.set(value);
+    // Check if eventStore is defined (which is a store itself)
+    if (eventStore) {
+      // Subscribe to the value of the inner store (eventStore)
+      unsubscribeInner = eventStore.subscribe((event) => {
+        if (!event) {
+          internal.set([]); // Set to empty array if event is undefined
+          return;
+        }
+
+        // Map event's config to ActionBlock[]
+        const value = event.config.map(
+          (e) =>
+            ({
+              action: e,
+              selected: false,
+            } as ActionBlock)
+        );
+
+        // Update the internal writable store with the new value
+        internal.set(value);
+      });
+    } else {
+      // If no inner store exists, reset the blocks
+      internal.set([]);
+    }
   });
 
   return internal;
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index c24ba9fdb..948189893 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { ActionData } from "./../../../../runtime/runtime.ts";
   import { config_panel_blocks } from "./../Configuration";
   import Options from "./Options.svelte";
-  import { Analytics } from "./../../../../runtime/analytics.js";
   import { ActionBlock } from "./../Configuration";
   import {
     GridAction,
@@ -22,7 +20,6 @@
     updateAction,
     replaceAction,
   } from "./../../../../runtime/operations";
-  import { logger } from "../../../../runtime/runtime.store.js";
 
   const dispatch = createEventDispatcher();
 
@@ -52,27 +49,17 @@
     component = result.component;
   });
 
-  function replace_me(e: any) {
+  function handleReplace(e: any) {
     const { short, script, name } = e.detail;
     const oldAction = action;
     const parent = oldAction.parent as GridEvent;
-    const newAction = new GridAction(undefined, {
-      short: short,
-      script: GridAction.getInformation(short), // Default Script
-      name: name,
-    });
-    parent.replace(oldAction, newAction);
+    const newAction = new GridAction(
+      undefined,
+      new ActionData(short, GridAction.getInformation(short).defaultLua)
+    );
+    replaceAction(parent, oldAction, newAction);
     toggled = true;
-  }
-
-  function handleReplace(e) {
-    const { index, config } = e.detail;
-    config_panel_blocks.update((s) => {
-      s[index] = config;
-      lastOpenedActionblocksInsert(config.short);
-      return s;
-    });
-    //TODO OPERATION
+    lastOpenedActionblocksInsert(newAction.short);
   }
 
   function handleOutput(e) {
@@ -196,7 +183,7 @@
               {index}
               config={action}
               syntaxError={!action.checkSyntax()}
-              on:replace={replace_me}
+              on:replace={handleReplace}
               on:validator={handleValidator}
               on:output={handleOutput}
               on:toggle={handleToggle}
diff --git a/src/renderer/main/panels/configuration/components/Toolbar.svelte b/src/renderer/main/panels/configuration/components/Toolbar.svelte
index 180ccaf5b..cdcf5a0b6 100644
--- a/src/renderer/main/panels/configuration/components/Toolbar.svelte
+++ b/src/renderer/main/panels/configuration/components/Toolbar.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
   import {
-    appClipboard,
-    ClipboardKey,
-  } from "./../../../../runtime/clipboard.store";
+    isClearElementEnabled,
+    isCopyElementEnabled,
+    isDiscardElementEnabled,
+    isOverwriteElementEnabled,
+    isCopyActionsEnabled,
+    isPasteActionsEnabled,
+    isCutActionsEnabled,
+    isMergeActionsEnabled,
+    isRemoveActionsEnabled,
+  } from "./../../../../runtime/operations";
+  import { createEventDispatcher } from "svelte";
+  import { appClipboard } from "./../../../../runtime/clipboard.store";
   import { GridEvent, GridElement } from "./../../../../runtime/runtime";
   import { UserInputValue } from "./../../../../runtime/runtime.store";
   import { runtime, user_input } from "./../../../../runtime/runtime.store";
@@ -118,8 +126,7 @@
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyC" }}
         iconPath={"copy_all"}
-        disabled={$runtime.modules.length === 0 ||
-          $config_panel_blocks.some((e) => e.selected)}
+        disabled={$isCopyElementEnabled === false}
         color={"#03cb00"}
       />
 
@@ -130,8 +137,7 @@
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyV" }}
         iconPath={"paste_all"}
-        disabled={$appClipboard?.key !== ClipboardKey.ELEMENT ||
-          !$element?.isCompatible($appClipboard?.payload.type)}
+        disabled={!isOverwriteElementEnabled($element, $appClipboard)}
         color={"#006cb7"}
       />
 
@@ -149,7 +155,7 @@
           code: "KeyD",
         }}
         iconPath={"clear_from_device_01"}
-        disabled={typeof $element === "undefined" || !$element.hasChanges()}
+        disabled={!isDiscardElementEnabled($element)}
         color={"#ff2323"}
       />
 
@@ -163,7 +169,7 @@
           code: "Delete",
         }}
         iconPath={"clear_element"}
-        disabled={$runtime.modules.length === 0}
+        disabled={!isClearElementEnabled($element)}
         color={"#A020F0"}
       />
     </div>
@@ -174,7 +180,7 @@
           setToolbarHoverText(`Copy Action(s)`, `(${modifier[0]} + C)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyC" }}
-        disabled={!$config_panel_blocks.some((e) => e.selected)}
+        disabled={$isCopyActionsEnabled === false}
         iconPath={"copy"}
         color={"#03cb00"}
       />
@@ -185,7 +191,7 @@
           setToolbarHoverText(`Paste Action(s)`, `(${modifier[0]} + V)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyV" }}
-        disabled={$appClipboard?.key !== ClipboardKey.ACTION_BLOCKS}
+        disabled={$isPasteActionsEnabled === false}
         iconPath={"paste"}
         color={"#006cb7"}
       />
@@ -196,7 +202,7 @@
           setToolbarHoverText(`Cut Action(s)`, `(${modifier[0]} + X)`)}
         on:mouseleave={handleToolbarButtonBlur}
         shortcut={{ control: true, code: "KeyX" }}
-        disabled={!$config_panel_blocks.some((e) => e.selected)}
+        disabled={$isCutActionsEnabled === false}
         iconPath={"cut"}
         color={"#ff6100"}
       />
@@ -214,7 +220,7 @@
           shift: true,
           code: "KeyM",
         }}
-        disabled={!$config_panel_blocks.some((e) => e.selected)}
+        disabled={$isMergeActionsEnabled === false}
         iconPath={"merge_as_code"}
         color={"#ffcc33"}
       />
@@ -227,7 +233,7 @@
         shortcut={{
           code: "Delete",
         }}
-        disabled={!$config_panel_blocks.some((e) => e.selected)}
+        disabled={$isRemoveActionsEnabled === false}
         iconPath={"remove"}
         color={"#ff2323"}
       />
diff --git a/src/renderer/main/panels/preferences/Preferences.svelte b/src/renderer/main/panels/preferences/Preferences.svelte
index 447e9f758..4582c4daf 100644
--- a/src/renderer/main/panels/preferences/Preferences.svelte
+++ b/src/renderer/main/panels/preferences/Preferences.svelte
@@ -310,14 +310,12 @@
           instructions
             .sendNVMEraseToGrid()
             .then((res) => {
-              runtime.erase();
-              config_panel_blocks.refresh().then(() => {
-                logger.set({
-                  type: "success",
-                  mode: 0,
-                  classname: "nvmerase",
-                  message: `Erase complete!`,
-                });
+              //TODO
+              logger.set({
+                type: "success",
+                mode: 0,
+                classname: "nvmerase",
+                message: `Erase complete!`,
               });
             })
             .catch((e) => {
diff --git a/src/renderer/main/user-interface/ActiveChanges.svelte b/src/renderer/main/user-interface/ActiveChanges.svelte
index fdbf9c390..cb2e4159f 100644
--- a/src/renderer/main/user-interface/ActiveChanges.svelte
+++ b/src/renderer/main/user-interface/ActiveChanges.svelte
@@ -70,20 +70,12 @@
       .clearPage(ui.pagenumber)
       .then(() => {
         clearOverlays();
-        config_panel_blocks
-          .refresh()
-          .then(() => {
-            logger.set({
-              type: "success",
-              mode: 0,
-              classname: "pageclear",
-              message: `Page clear complete!`,
-            });
-          })
-          .catch((e) => {
-            console.warn(e);
-            //TODO: make feedback for fail
-          });
+        logger.set({
+          type: "success",
+          mode: 0,
+          classname: "pageclear",
+          message: `Page clear complete!`,
+        });
       })
       .catch((e) => {
         console.warn(e);
@@ -111,20 +103,12 @@
         .discardPage(ui.pagenumber)
         .then(() => {
           clearOverlays();
-          config_panel_blocks
-            .refresh()
-            .then(() => {
-              logger.set({
-                type: "success",
-                mode: 0,
-                classname: "pagediscard",
-                message: `Discard complete!`,
-              });
-            })
-            .catch((e) => {
-              console.warn(e);
-              //TODO: make feedback for fail
-            });
+          logger.set({
+            type: "success",
+            mode: 0,
+            classname: "pagediscard",
+            message: `Discard complete!`,
+          });
         })
         .catch((e) => {
           console.warn(e);
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index 340083fc8..dbd8d3ce6 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -1,6 +1,6 @@
 import { Analytics } from "./analytics";
-import { appClipboard, ClipboardKey } from "./clipboard.store";
-import { logger } from "./runtime.store";
+import { appClipboard, ClipboardData, ClipboardKey } from "./clipboard.store";
+import { logger, runtime } from "./runtime.store";
 import {
   GridOperationResult,
   ElementData,
@@ -10,13 +10,24 @@ import {
   GridEvent,
   SendToGridResult,
 } from "./runtime";
-import { get } from "svelte/store";
+import { get, derived } from "svelte/store";
+import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
 function handleError(e: GridOperationResult) {
   console.warn(`Operation error: ${e.text}`);
 }
 
 //Clipboard handlers
+export const isCopyElementEnabled = derived(
+  config_panel_blocks,
+  ($config_panel_blocks) => {
+    return (
+      !$config_panel_blocks.some((e) => e.selected) &&
+      runtime.modules.length > 0
+    );
+  }
+);
+
 export async function copyElement(element: GridElement) {
   logger.set({
     type: "progress",
@@ -45,6 +56,13 @@ export async function copyElement(element: GridElement) {
     });
 }
 
+export const isCopyActionsEnabled = derived(
+  config_panel_blocks,
+  ($config_panel_blocks) => {
+    return $config_panel_blocks.some((e) => e.selected);
+  }
+);
+
 export async function copyActions(...actions: GridAction[]) {
   appClipboard
     .copyActions(...actions)
@@ -67,6 +85,19 @@ export async function copyActions(...actions: GridAction[]) {
 }
 
 //GridElement handlers
+export function isOverwriteElementEnabled(
+  data: ElementData,
+  clipboard: ClipboardData
+) {
+  if (typeof clipboard === "undefined" || typeof data === "undefined") {
+    return false;
+  }
+
+  return (
+    clipboard.key === ClipboardKey.ELEMENT &&
+    data.isCompatible((clipboard.payload as ElementData).type)
+  );
+}
 
 export async function overwriteElement(target: GridElement) {
   const clipboard = get(appClipboard);
@@ -84,6 +115,7 @@ export async function overwriteElement(target: GridElement) {
     .then((result) => {})
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Whole Element Overwrite" },
@@ -92,6 +124,14 @@ export async function overwriteElement(target: GridElement) {
     });
 }
 
+export function isDiscardElementEnabled(data: ElementData) {
+  if (typeof data === "undefined") {
+    return false;
+  }
+
+  return data.hasChanges();
+}
+
 export async function discardElement(target: GridElement) {
   logger.set({
     type: "progress",
@@ -112,6 +152,7 @@ export async function discardElement(target: GridElement) {
     })
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Whole Element Discard" },
@@ -120,6 +161,10 @@ export async function discardElement(target: GridElement) {
     });
 }
 
+export function isClearElementEnabled(data: ElementData) {
+  return typeof data !== "undefined";
+}
+
 export async function clearElement(target: GridElement) {
   logger.set({
     type: "progress",
@@ -140,6 +185,7 @@ export async function clearElement(target: GridElement) {
     })
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Clear Element" },
@@ -156,6 +202,7 @@ export async function updateAction(target: GridAction, data: ActionData) {
     .then((result) => {})
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       const event = target.parent as GridEvent;
       const element = event.parent as GridElement;
       Analytics.track({
@@ -173,6 +220,13 @@ export async function updateAction(target: GridAction, data: ActionData) {
 
 //GridEvent handlers
 
+export const isMergeActionsEnabled = derived(
+  config_panel_blocks,
+  ($config_panel_blocks) => {
+    return $config_panel_blocks.some((e) => e.selected);
+  }
+);
+
 export async function mergeActionsToCode(
   target: GridEvent,
   ...actions: GridAction[]
@@ -180,15 +234,23 @@ export async function mergeActionsToCode(
   target
     .merge(...actions)
     .then((result) => {})
-    .catch(handleError);
+    .catch(handleError)
+    .finally(() => {
+      target.sendToGrid();
+    });
 }
 
+export const isPasteActionsEnabled = derived(appClipboard, ($appClipboard) => {
+  return $appClipboard?.key === ClipboardKey.ACTION_BLOCKS;
+});
+
 export async function pasteActions(target: GridEvent, index?: number) {
   target
     .pasteFromClipboard(index)
     .then((result) => {})
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Paste" },
@@ -197,6 +259,13 @@ export async function pasteActions(target: GridEvent, index?: number) {
     });
 }
 
+export const isRemoveActionsEnabled = derived(
+  config_panel_blocks,
+  ($config_panel_blocks) => {
+    return $config_panel_blocks.some((e) => e.selected);
+  }
+);
+
 export async function removeActions(
   target: GridEvent,
   ...actions: GridAction[]
@@ -206,6 +275,7 @@ export async function removeActions(
     .then((result) => {})
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Remove" },
@@ -214,6 +284,13 @@ export async function removeActions(
     });
 }
 
+export const isCutActionsEnabled = derived(
+  config_panel_blocks,
+  ($config_panel_blocks) => {
+    return $config_panel_blocks.some((e) => e.selected);
+  }
+);
+
 export async function cutActions(target: GridEvent, ...actions: GridAction[]) {
   appClipboard
     .copyActions(...actions)
@@ -222,6 +299,7 @@ export async function cutActions(target: GridEvent, ...actions: GridAction[]) {
     })
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Cut" },
@@ -243,6 +321,7 @@ export async function addActions(
   actionMethod(...actions)
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       for (const action of actions) {
         Analytics.track({
           event: "Config Action",
@@ -265,6 +344,7 @@ export async function replaceAction(
     .replace(a, b)
     .catch(handleError)
     .finally(() => {
+      target.sendToGrid();
       Analytics.track({
         event: "Replace Action",
         payload: { click: "Replace" },
diff --git a/src/renderer/runtime/runtime.store.ts b/src/renderer/runtime/runtime.store.ts
index 509df2ce0..791ca927c 100644
--- a/src/renderer/runtime/runtime.store.ts
+++ b/src/renderer/runtime/runtime.store.ts
@@ -3,7 +3,7 @@ import { writeBuffer, sendHeartbeat } from "./engine.store";
 import { appSettings } from "./app-helper.store";
 import { modal } from "../main/modals/modal.store";
 import { ProtectedStore } from "./smart-store.store";
-import { GridRuntime } from "./runtime";
+import { GridRuntime, aliveModules } from "./runtime";
 
 const setIntervalAsync = (fn, ms) => {
   fn().then(() => {
@@ -374,25 +374,26 @@ const heartbeat_editor_ms = 300;
 const heartbeat_grid_ms = 250;
 
 const grid_heartbeat_interval_handler = async function () {
-  runtime.modules.forEach((device, i) => {
+  for (const device of runtime.modules) {
     if (device.architecture === "virtual") {
       return;
     }
 
-    const alive = device.alive;
+    const last =
+      get(aliveModules).find((e) => e.id === device.id)?.last ?? Date.now();
 
     // Allow less strict elapsedTimeLimit while writeBuffer is busy!
     const elapsedTimeLimit =
       get(writeBuffer).length > 0
         ? heartbeat_grid_ms * 6
         : heartbeat_grid_ms * 3;
-    const elapsedTime = Date.now() - alive;
+    const elapsedTime = Date.now() - last;
 
-    if (!alive || elapsedTime > elapsedTimeLimit) {
+    if (!last || elapsedTime > elapsedTimeLimit) {
       // TIMEOUT! let's remove the device
       runtime.destroy_module(device.dx, device.dy);
     }
-  });
+  }
 };
 
 setIntervalAsync(grid_heartbeat_interval_handler, heartbeat_grid_ms);
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 809be61f9..d6d03e969 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -33,13 +33,55 @@ import { appClipboard, ClipboardKey } from "./clipboard.store";
 
 type UUID = string;
 type LuaScript = string;
+type RawEventData = any;
 class NodeData {
   id?: UUID;
   parent?: RuntimeNode<any>;
 }
 
-type ProfileData = any;
-type PresetData = any;
+export const aliveModules: Writable<Array<{ id: UUID; last: number }>> =
+  writable([]);
+
+export class GridProfileData {
+  public presets: GridPresetData[] = [];
+
+  static createFromCloudData(cloudProfile: any) {
+    const data = cloudProfile.configs;
+    const profile = new GridProfileData();
+    for (const [index, type] of Object.entries(
+      grid.get_module_element_list(cloudProfile.type)
+    )) {
+      if (typeof type === "undefined") {
+        continue;
+      }
+
+      const events = data.find(
+        (e: any) => e.controlElementNumber === Number(index)
+      ).events;
+      const preset = new GridPresetData(type, Number(index), events);
+      profile.presets.push(preset);
+    }
+    return profile;
+  }
+}
+export class GridPresetData {
+  public element: GridElement;
+
+  constructor(type: ElementType, index: number, array: RawEventData[]) {
+    const element = new GridElement(undefined, new ElementData(index, type));
+    for (const data of array) {
+      const type = Number(data.event);
+      const event = element.findEvent(type);
+      const actions = GridAction.parse(data.config);
+      event.push(...actions);
+    }
+    this.element = element;
+  }
+
+  static createFromCloudData(cloudPreset: any) {
+    return new GridPresetData(cloudPreset.type, -1, cloudPreset.configs.events);
+  }
+}
 
 export enum GridOperationType {
   PASTE_ACTION,
@@ -64,7 +106,6 @@ export interface GridOperationResult {
   type: GridOperationType;
 }
 
-export interface CopyActionsResult extends GridOperationResult {}
 export interface PasteActionsResult extends GridOperationResult {}
 export interface DiscardElementResult extends GridOperationResult {}
 export interface OverwriteElementResult extends GridOperationResult {}
@@ -370,7 +411,10 @@ export class EventData extends NodeData {
     for (const action of this.config) {
       (action as any).parent = undefined;
     }
+
     this.config = [];
+    //this.loaded = false;
+    //this.stored = undefined;
   }
 
   public checkSyntax() {
@@ -537,35 +581,49 @@ export class GridEvent extends RuntimeNode<EventData> {
     return this.config.at(index);
   }
 
-  public sendToGrid(): Promise<SendToGridResult> {
-    return new Promise((resolve, reject) => {
-      if (!this.checkLength()) {
-        reject("Length Error");
-        return;
-      }
+  public async sendToGrid(): Promise<SendToGridResult> {
+    if (!this.checkLength()) {
+      Promise.reject({
+        value: false,
+        text: "Length Error",
+        type: GridOperationType.SEND_EVENT_TO_GRID,
+      });
+      return;
+    }
 
-      if (!this.isLoaded()) {
-        resolve({ value: true, text: "Nothing to sync, not loaded yet." });
-      }
+    if (!this.isLoaded()) {
+      Promise.resolve({
+        value: true,
+        text: "Nothing to sync, not loaded yet.",
+        type: GridOperationType.SEND_EVENT_TO_GRID,
+      });
+    }
 
-      const element = this.parent as GridElement;
-      const page = element.parent as GridPage;
-      const module = page.parent as GridModule;
+    const element = this.parent as GridElement;
+    const page = element.parent as GridPage;
+    const module = page.parent as GridModule;
 
-      instructions
-        .sendConfigToGrid(
-          module.dx,
-          module.dy,
-          page.pageNumber,
-          element.elementIndex,
-          this.type,
-          this.toLua()
-        )
-        .then(() => {
-          resolve({ value: true, text: "OK" });
-        })
-        .catch((e) => reject(e));
-    });
+    try {
+      await instructions.sendConfigToGrid(
+        module.dx,
+        module.dy,
+        page.pageNumber,
+        element.elementIndex,
+        this.type,
+        this.toLua()
+      );
+      Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.SEND_EVENT_TO_GRID,
+      });
+    } catch (e) {
+      Promise.reject({
+        value: false,
+        text: e,
+        type: GridOperationType.SEND_EVENT_TO_GRID,
+      });
+    }
   }
 
   public checkSyntax() {
@@ -678,36 +736,34 @@ export class GridEvent extends RuntimeNode<EventData> {
     });
   }
 
-  public async load(): Promise<GridAction[]> {
-    return new Promise((resolve, reject) => {
-      if (this.isLoaded()) {
-        return resolve(this.config);
-      }
-
-      const element = this.parent as GridElement;
-      const page = element.parent as GridPage;
-      const module = page.parent as GridModule;
+  public async load(): Promise<void> {
+    if (this.isLoaded()) {
+      return Promise.resolve();
+    }
 
-      instructions
-        .fetchConfigFromGrid(
-          module.dx,
-          module.dy,
-          page.pageNumber,
-          element.elementIndex,
-          this.type
-        )
-        .then((descr) => {
-          const script = descr.class_parameters.ACTIONSTRING;
-          const actions = GridAction.parse(script);
-          this.clear();
-          this.config = [];
-          this.push(...actions);
-          this.store();
-          this.data.loaded = true;
-          resolve(actions);
-        })
-        .catch((e) => reject(e));
-    });
+    const element = this.parent as GridElement;
+    const page = element.parent as GridPage;
+    const module = page.parent as GridModule;
+
+    instructions
+      .fetchConfigFromGrid(
+        module.dx,
+        module.dy,
+        page.pageNumber,
+        element.elementIndex,
+        this.type
+      )
+      .then((descr) => {
+        const script = descr.class_parameters.ACTIONSTRING;
+        const actions = GridAction.parse(script);
+        this.push(...actions);
+        this.store();
+        this.loaded = true;
+        return Promise.resolve();
+      })
+      .catch((e) => {
+        return Promise.reject(e);
+      });
   }
 
   // Getters
@@ -813,6 +869,15 @@ export class GridElement extends RuntimeNode<ElementData> {
     }
   }
 
+  public async sendToGrid(): Promise<SendToGridResult[]> {
+    const promises: Promise<SendToGridResult>[] = [];
+    for (const event of this.events) {
+      const promise = event.sendToGrid();
+      promises.push(promise);
+    }
+    return Promise.all(promises);
+  }
+
   public async overwrite(data: ElementData): Promise<OverwriteElementResult> {
     if (this.type !== data.type) {
       return Promise.reject({
@@ -852,13 +917,21 @@ export class GridElement extends RuntimeNode<ElementData> {
     return this.data.isCompatible(type);
   }
 
-  loadPreset(preset: PresetData): Promise<PresetLoadResult> {
-    return new Promise((resolve, reject) => {
-      this.load().then(() => {
-        //PRESET LOAD
-        resolve("OK");
+  public async loadPreset(preset: GridPresetData): Promise<PresetLoadResult> {
+    try {
+      await this.overwrite(preset.element.data);
+      return Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.LOAD_PRESET,
       });
-    });
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: "e",
+        type: GridOperationType.LOAD_PRESET,
+      });
+    }
   }
 
   findEvent(type: number) {
@@ -883,6 +956,18 @@ export class GridElement extends RuntimeNode<ElementData> {
     });
   }
 
+  public clear() {
+    for (const event of this.events) {
+      event.clear();
+    }
+  }
+
+  public store() {
+    for (const event of this.events) {
+      event.store();
+    }
+  }
+
   public isLoaded() {
     return this.events.every((e) => e.isLoaded());
   }
@@ -936,10 +1021,10 @@ export interface PageData extends NodeData {
 }
 
 export class GridPage extends RuntimeNode<PageData> {
-  constructor(parent: GridModule, data?: PageData) {
+  constructor(parent: GridModule, type: ModuleType, data?: PageData) {
     super(parent, data);
     this.control_elements = [];
-    const moduleElements = grid.get_module_element_list(parent.type);
+    const moduleElements = grid.get_module_element_list(type);
     for (const [index, element] of Object.entries(moduleElements)) {
       if (typeof element === "undefined") {
         continue;
@@ -951,26 +1036,33 @@ export class GridPage extends RuntimeNode<PageData> {
     }
   }
 
-  loadProfile(profile: ProfileData): Promise<ProfileLoadResult> {
-    return new Promise((resolve, reject) => {
-      const ui = get(user_input);
-      this.load().then(() => {
-        const elements = profile.elements;
-        // Reorder array to send system element first
-        const index = elements.findIndex((obj) => obj.elementIndex === 255);
-
-        // Check if the object with id === 255 was found
-        if (index !== -1) {
-          // Remove the object at the found index
-          const objectToMove = elements.splice(index, 1)[0];
-
-          // Add the object to the front of the array
-          elements.unshift(objectToMove);
-        }
+  public async loadProfile(
+    profile: GridProfileData
+  ): Promise<ProfileLoadResult> {
+    await this.load();
 
-        //PROFILE LOAD
-        resolve("OK");
-      });
+    const presets = profile.presets;
+    // Reorder array to send system element first
+    const index = presets.findIndex((obj) => obj.element.elementIndex === 255);
+
+    // Check if the object with id === 255 was found
+    if (index !== -1) {
+      // Remove the object at the found index
+      const objectToMove = presets.splice(index, 1)[0];
+
+      // Add the object to the front of the array
+      presets.unshift(objectToMove);
+    }
+
+    //PROFILE LOAD
+    for (const preset of presets) {
+      const element = this.findElement(preset.element.elementIndex);
+      element.loadPreset(preset);
+    }
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: GridOperationType.LOAD_PROFILE,
     });
   }
 
@@ -979,7 +1071,19 @@ export class GridPage extends RuntimeNode<PageData> {
     return elements.find((element) => element.elementIndex === index);
   }
 
-  async load() {
+  public clear() {
+    for (const element of this.control_elements) {
+      element.clear();
+    }
+  }
+
+  public store() {
+    for (const element of this.control_elements) {
+      element.store();
+    }
+  }
+
+  public async load() {
     const promises: Array<Promise<void>> = [];
     for (const element of this.control_elements) {
       promises.push(
@@ -1029,7 +1133,6 @@ type DirectionMap = {
 };
 
 export interface ModuleData extends NodeData {
-  alive: number;
   architecture: Architecture;
   dx: number;
   dy: number;
@@ -1046,10 +1149,10 @@ export class GridModule extends RuntimeNode<ModuleData> {
   constructor(parent: GridRuntime, data?: ModuleData) {
     super(parent, data);
     this.pages = [
-      new GridPage(this, { pageNumber: 0 }),
-      new GridPage(this, { pageNumber: 1 }),
-      new GridPage(this, { pageNumber: 2 }),
-      new GridPage(this, { pageNumber: 3 }),
+      new GridPage(this, this.type, { pageNumber: 0 }),
+      new GridPage(this, this.type, { pageNumber: 1 }),
+      new GridPage(this, this.type, { pageNumber: 2 }),
+      new GridPage(this, this.type, { pageNumber: 3 }),
     ];
   }
 
@@ -1071,10 +1174,6 @@ export class GridModule extends RuntimeNode<ModuleData> {
   }
 
   // Getters
-  get alive() {
-    return this.getField("alive");
-  }
-
   get architecture() {
     return this.getField("architecture");
   }
@@ -1116,11 +1215,6 @@ export class GridModule extends RuntimeNode<ModuleData> {
   }
 
   // Setters
-  set alive(value: number) {
-    get(this._internal).alive = value;
-    //this.setField("alive", value);
-  }
-
   set architecture(value: Architecture) {
     this.setField("architecture", value);
   }
@@ -1252,7 +1346,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
       const [sx, sy] = [descr.brc_parameters.SX, descr.brc_parameters.SY];
 
       let firstConnection = false;
-      const module = this.modules.find((e) => e.dx == sx && e.dy == sy);
+      const module = this.findModule(sx, sy);
       if (module) {
         if (module.rot != descr.brc_parameters.ROT) {
           module.rot = descr.brc_parameters.ROT;
@@ -1262,14 +1356,18 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
           module.portstate = descr.class_parameters.PORTSTATE;
         }
 
-        const lastDate = module.alive;
-        const newDate = Date.now();
-        module.alive = newDate;
-
-        if (get(appSettings).persistent.heartbeatDebugEnabled) {
-          const key1 = `Hearbeat (${module.dx}, ${module.dy})`;
-          add_datapoint(key1, newDate - lastDate);
-        }
+        aliveModules.update((s) => {
+          const index = s.findIndex((e) => e.id === module.id);
+          const lastDate = s[index].last;
+          const newDate = Date.now();
+          s[index].last = newDate;
+
+          if (get(appSettings).persistent.heartbeatDebugEnabled) {
+            const key1 = `Hearbeat (${module.dx}, ${module.dy})`;
+            add_datapoint(key1, newDate - lastDate);
+          }
+          return s;
+        });
       }
       // device not found, add it to runtime and get page count from grid
       else {
@@ -1300,7 +1398,10 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
         );
 
         this.modules = [...this.modules, controller];
-        controller.alive = Date.now();
+        aliveModules.update((s) => {
+          s.push({ id: controller.id, last: Date.now() });
+          return s;
+        });
 
         firstConnection = this.modules.length === 1;
 
@@ -1333,108 +1434,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  clear_page_configuration(index) {
-    this.modules.forEach((module) => {
-      module.pages[index].control_elements.forEach((control_element) => {
-        control_element.events.forEach((event) => {
-          event.clear();
-        });
-      });
-    });
-  }
-
-  create_module(header_param, heartbeat_class_param, virtual = false) {
-    const moduleType = grid
-      .module_type_from_hwcfg(Number(heartbeat_class_param.HWCFG))
-      ?.substring(0, 4);
-
-    // generic check, code below if works only if all parameters are provided
-    if (
-      header_param === undefined ||
-      moduleType === undefined ||
-      heartbeat_class_param === undefined
-    ) {
-      console.log(
-        heartbeat_class_param.HWCFG,
-        "ERROR",
-        header_param,
-        moduleType,
-        heartbeat_class_param
-      );
-      throw "Error creating new module.";
-    }
-
-    return new GridModule(this, {
-      // implement the module id rep / req
-      architecture: virtual
-        ? Architecture.VIRTUAL
-        : grid.module_architecture_from_hwcfg(heartbeat_class_param.HWCFG),
-      portstate: heartbeat_class_param.PORTSTATE,
-      dx: header_param.SX,
-      dy: header_param.SY,
-      rot: header_param.ROT,
-      fwVersion: {
-        major: heartbeat_class_param.VMAJOR,
-        minor: heartbeat_class_param.VMINOR,
-        patch: heartbeat_class_param.VPATCH,
-      },
-      type: ModuleType[moduleType as keyof typeof ModuleType],
-      fwMismatch: false,
-      alive: Date.now(),
-      map: {
-        top: { dx: header_param.SX, dy: header_param.SY + 1 },
-        right: { dx: header_param.SX + 1, dy: header_param.SY },
-        bot: { dx: header_param.SX, dy: header_param.SY - 1 },
-        left: { dx: header_param.SX - 1, dy: header_param.SY },
-      },
-    });
-  }
-
-  destroy_module(dx, dy) {
-    console.log("DESTORY", dx, dy);
-    // remove the destroyed device from runtime
-    const removed = this.modules.find((e) => e.dx == dx && e.dy == dy);
-    this.modules = this.modules.filter((e) => e.dx !== dx && e.dy !== dy);
-
-    if (this.modules.length === 0) {
-      appSettings.update((s) => {
-        s.gridLayoutShift = { x: 0, y: 0 };
-        return s;
-      });
-    }
-
-    user_input.module_destroy_handler(dx, dy);
-    if (removed.architecture === "virtual") {
-      virtual_runtime.destroyModule(dx, dy);
-    } else {
-      writeBuffer.module_destroy_handler(dx, dy);
-    }
-
-    // reset rendering helper stores
-
-    try {
-      elementPositionStore.update((eps) => {
-        eps[dx][dy] = undefined;
-        return eps;
-      });
-
-      ledColorStore.update((lcs) => {
-        lcs[dx][dy] = undefined;
-        return lcs;
-      });
-    } catch (error) {}
-
-    Analytics.track({
-      event: "Disconnect Module",
-      payload: {
-        action: "Disconnect",
-        moduleCount: this.modules.length,
-      },
-      mandatory: false,
-    });
-  }
-
-  change_page(new_page_number): Promise<void> {
+  public async change_page(new_page_number): Promise<void> {
     return new Promise((resolve, reject) => {
       if (get(writeBuffer).length > 0) {
         reject("Wait before all operations are finished.");
@@ -1475,7 +1475,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  unsavedChangesCount() {
+  public unsavedChangesCount() {
     let count = 0;
     this.modules.forEach((e) => {
       e.pages.forEach((e) => {
@@ -1491,20 +1491,15 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     return count;
   }
 
-  async storePage(index) {
+  public async storePage(index: number) {
     return new Promise((resolve, reject) => {
       instructions
         .sendPageStoreToGrid()
         .then((res) => {
-          this.modules.forEach((module) => {
-            module.pages
-              .find((e) => e.pageNumber == index)
-              ?.control_elements.forEach((element) => {
-                element.events.forEach((event) => {
-                  event.store();
-                });
-              });
-          });
+          for (const module of this.modules) {
+            const page = module.findPage(index);
+            page.store();
+          }
           resolve(res);
         })
         .catch((e) => {
@@ -1513,7 +1508,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  clearPage(index): Promise<void> {
+  public async clearPage(index: number): Promise<void> {
     logger.set({
       type: "progress",
       mode: 0,
@@ -1524,7 +1519,10 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
       instructions
         .sendPageClearToGrid()
         .then(() => {
-          this.clear_page_configuration(index);
+          for (const module of this.modules) {
+            const page = module.findPage(index);
+            page.clear();
+          }
           resolve();
         })
         .catch((e) => {
@@ -1534,7 +1532,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     });
   }
 
-  discardPage(index): Promise<void> {
+  public async discardPage(index: number): Promise<void> {
     logger.set({
       type: "progress",
       mode: 0,
@@ -1545,7 +1543,10 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
       instructions
         .sendPageDiscardToGrid()
         .then(() => {
-          this.clear_page_configuration(index);
+          for (const module of this.modules) {
+            const page = module.findPage(index);
+            page.clear();
+          }
           resolve();
         })
         .catch((e) => {
@@ -1575,4 +1576,101 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     this.modules = [...this.modules, controller];
     this.setDefaultSelectedElement();
   }
+
+  create_module(header_param, heartbeat_class_param, virtual = false) {
+    const moduleType = grid
+      .module_type_from_hwcfg(Number(heartbeat_class_param.HWCFG))
+      ?.substring(0, 4);
+
+    // generic check, code below if works only if all parameters are provided
+    if (
+      header_param === undefined ||
+      moduleType === undefined ||
+      heartbeat_class_param === undefined
+    ) {
+      console.log(
+        heartbeat_class_param.HWCFG,
+        "ERROR",
+        header_param,
+        moduleType,
+        heartbeat_class_param
+      );
+      throw "Error creating new module.";
+    }
+
+    return new GridModule(this, {
+      // implement the module id rep / req
+      architecture: virtual
+        ? Architecture.VIRTUAL
+        : grid.module_architecture_from_hwcfg(heartbeat_class_param.HWCFG),
+      portstate: heartbeat_class_param.PORTSTATE,
+      dx: header_param.SX,
+      dy: header_param.SY,
+      rot: header_param.ROT,
+      fwVersion: {
+        major: heartbeat_class_param.VMAJOR,
+        minor: heartbeat_class_param.VMINOR,
+        patch: heartbeat_class_param.VPATCH,
+      },
+      type: ModuleType[moduleType as keyof typeof ModuleType],
+      fwMismatch: false,
+      alive: Date.now(),
+      map: {
+        top: { dx: header_param.SX, dy: header_param.SY + 1 },
+        right: { dx: header_param.SX + 1, dy: header_param.SY },
+        bot: { dx: header_param.SX, dy: header_param.SY - 1 },
+        left: { dx: header_param.SX - 1, dy: header_param.SY },
+      },
+    });
+  }
+
+  destroy_module(dx, dy) {
+    console.log("DESTORY", dx, dy);
+    // remove the destroyed device from runtime
+    const removed = this.modules.find((e) => e.dx == dx && e.dy == dy);
+    this.modules = this.modules.filter((e) => e.dx !== dx && e.dy !== dy);
+
+    aliveModules.update((s) => {
+      const index = s.findIndex((e) => e.id === removed.id);
+      s.splice(index, 1);
+      return s;
+    });
+
+    if (this.modules.length === 0) {
+      appSettings.update((s) => {
+        s.gridLayoutShift = { x: 0, y: 0 };
+        return s;
+      });
+    }
+
+    user_input.module_destroy_handler(dx, dy);
+    if (removed.architecture === "virtual") {
+      virtual_runtime.destroyModule(dx, dy);
+    } else {
+      writeBuffer.module_destroy_handler(dx, dy);
+    }
+
+    // reset rendering helper stores
+
+    try {
+      elementPositionStore.update((eps) => {
+        eps[dx][dy] = undefined;
+        return eps;
+      });
+
+      ledColorStore.update((lcs) => {
+        lcs[dx][dy] = undefined;
+        return lcs;
+      });
+    } catch (error) {}
+
+    Analytics.track({
+      event: "Disconnect Module",
+      payload: {
+        action: "Disconnect",
+        moduleCount: this.modules.length,
+      },
+      mandatory: false,
+    });
+  }
 }

From ea1f5e6bd5b6b01535946d3e2830cbc5af3637b0 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Mon, 7 Oct 2024 17:24:29 +0200
Subject: [PATCH 26/42] Daily push

---
 src/renderer/main/modals/Export.svelte        |   5 +-
 .../panels/DebugMonitor/DebugMonitor.svelte   |  23 ++-
 .../panels/MidiMonitor/MidiMonitor.svelte     |  21 +--
 .../panels/configuration/Configuration.svelte |  34 ++--
 src/renderer/runtime/operations.ts            |   1 +
 src/renderer/runtime/runtime.store.ts         |   2 +
 src/renderer/runtime/runtime.ts               | 145 +++++++++++-------
 src/renderer/serialport/instructions.ts       |   1 +
 8 files changed, 127 insertions(+), 105 deletions(-)

diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
index 8b0612e0e..b5d2607d1 100644
--- a/src/renderer/main/modals/Export.svelte
+++ b/src/renderer/main/modals/Export.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
+  import { get } from "svelte/store";
   import { user_input_event } from "./../panels/configuration/Configuration";
   import { modal } from "./modal.store";
-  import { config_panel_blocks } from "../panels/configuration/Configuration";
   import MoltenModal from "./MoltenModal.svelte";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
   import MoltenPopup from "../panels/preferences/MoltenPopup.svelte";
 
   function handleCopy() {
     const _tempSpan = document.createElement("input");
-    _tempSpan.value = $config_panel_blocks.toConfigScript();
+    _tempSpan.value = get(user_input_event).toLua();
+
     _tempSpan.id = "temp-clip";
     document.getElementById("modal-copy-placeholder").append(_tempSpan);
     const _temp = document.querySelector("#temp-clip");
diff --git a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
index 49ef3c743..a74911481 100644
--- a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
+++ b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { modal } from "./../../modals/modal.store";
   import Export from "./../../modals/Export.svelte";
   import {
@@ -16,11 +16,11 @@
   import PolyLineGraph from "../../user-interface/PolyLineGraph.svelte";
   import { incoming_messages } from "../../../serialport/message-stream.store";
   import { Pane, Splitpanes } from "svelte-splitpanes";
-  import { config_panel_blocks } from "../../panels/configuration/Configuration";
+  import { user_input_event } from "../../panels/configuration/Configuration";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
-  const configScriptLength = writable(0);
-  const syntaxError = writable(false);
+  const configScriptLength: number = $user_input_event?.toLua().length ?? 0;
+  const syntaxError: boolean = $user_input_event?.checkSyntax() === false;
   const incoming_messages_stores = writable([]);
 
   $: if (typeof $incoming_messages !== "undefined") {
@@ -31,11 +31,6 @@
     incoming_messages_stores.set(messages.map((e) => readable(e)));
   }
 
-  $: {
-    configScriptLength.set($config_panel_blocks.toConfigScript().length);
-    syntaxError.set($config_panel_blocks.checkSyntax());
-  }
-
   let frozen = false;
 
   function freezeDebugtext() {
@@ -153,16 +148,16 @@
 
   <div class="grid grid-cols-[auto_1fr] w-full">
     <div class="flex flex-col">
-      <div class="text-white">Syntax: {$syntaxError}</div>
+      <div class="text-white">Syntax: {syntaxError}</div>
       <div class="flex flex-row">
         <div class="pr-2 text-white">Char Count:</div>
         <div class="text-white">
           <span
-            class:text-error={$configScriptLength >=
+            class:text-error={configScriptLength >=
               grid.getProperty("CONFIG_LENGTH")}
-            class:text-yellow-400={$configScriptLength >
+            class:text-yellow-400={configScriptLength >
               (grid.getProperty("CONFIG_LENGTH") / 3) * 2}
-            >{$configScriptLength}
+            >{configScriptLength}
           </span>
         </div>
       </div>
@@ -202,7 +197,7 @@
   <Splitpanes
     theme="modern-theme"
     class="w-full overflow-hidden"
-    horizontal="true"
+    horizontal={true}
   >
     <Pane class="overflow-hidden bg-primary">
       {#if $debug_monitor_store.length != 0}
diff --git a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
index 8bf340970..ca744e64e 100644
--- a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
+++ b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
@@ -1,4 +1,5 @@
-<script>
+<script lang="ts">
+  import { user_input_event } from "./../configuration/Configuration";
   import Toggle from "../../user-interface/Toggle.svelte";
   import { Pane, Splitpanes } from "svelte-splitpanes";
   import { get, writable } from "svelte/store";
@@ -11,18 +12,11 @@
   } from "./MidiMonitor.store";
   import { grid } from "@intechstudio/grid-protocol";
   import { SvgIcon } from "@intechstudio/grid-uikit";
-  import { config_panel_blocks } from "../../panels/configuration/Configuration";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   // ok but slow nice
+  const configScriptLength: number = $user_input_event?.toLua().length ?? 0;
 
-  const configScriptLength = writable("");
-  const syntaxError = writable(false);
-
-  $: {
-    configScriptLength.set($config_panel_blocks.toConfigScript().length);
-    syntaxError.set($config_panel_blocks.checkSyntax());
-  }
   const createDebouncedStore = (initialValue, debounceTime) => {
     let timeoutId;
     const { subscribe, set } = writable(initialValue);
@@ -246,7 +240,7 @@
 
   <div class="overflow-hidden flex flex-col h-full">
     <Splitpanes
-      horizontal="true"
+      horizontal={true}
       theme="modern-theme"
       pushOtherPanes={false}
       class="h-full w-full"
@@ -347,15 +341,14 @@
               <div class="flex flex-row">
                 <div class="pr-2">Char Count:</div>
                 <div
-                  class={$configScriptLength >=
-                  grid.getProperty("CONFIG_LENGTH")
+                  class={configScriptLength >= grid.getProperty("CONFIG_LENGTH")
                     ? "text-error"
-                    : $configScriptLength >=
+                    : configScriptLength >=
                       (grid.getProperty("CONFIG_LENGTH") / 3) * 2
                     ? "text-yellow-400"
                     : "text-white"}
                 >
-                  {$configScriptLength}
+                  {configScriptLength}
                 </div>
               </div>
             </div>
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 4a9de8607..8367fa93a 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -96,31 +96,31 @@
       return;
     }
 
-    const targetIndex = dropIndex;
-    dropIndex = undefined;
+    const targetIndex =
+      draggedIndexes[0] > dropIndex ? dropIndex : dropIndex - 1;
 
     //Check for incorrect dropzones
     const firstIndex = draggedIndexes.at(0);
     const lastIndex = draggedIndexes.at(-1);
-    if (targetIndex >= firstIndex && targetIndex <= lastIndex + 1) {
+    if (dropIndex >= firstIndex && dropIndex <= lastIndex + 1) {
       return;
     }
 
-    //get(config_panel_blocks).map(e => e.action)
-    return;
-    draggedIndexes.forEach((i) => {
-      temp.push(s[i]);
-      s[i] = undefined;
-    });
-
-    //Insert dragged configs at position
-    s.insert(targetIndex, ...temp);
-
-    //Remove marked configs
-    s = s.filter((e) => typeof e !== "undefined");
-    return s;
+    const ui = get(user_input);
+    const event = runtime.findEvent(
+      ui.dx,
+      ui.dy,
+      ui.pagenumber,
+      ui.elementnumber,
+      ui.eventtype
+    );
 
-    sendCurrentConfigurationToGrid();
+    const blocks = get(config_panel_blocks).map((e) => e.action);
+    let n = 0;
+    for (const index of draggedIndexes) {
+      event.swap(blocks[targetIndex + n], blocks[index]);
+      ++n;
+    }
   }
 
   function handleDragStart(e) {
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index dbd8d3ce6..ceb14e790 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -275,6 +275,7 @@ export async function removeActions(
     .then((result) => {})
     .catch(handleError)
     .finally(() => {
+      console.log(target);
       target.sendToGrid();
       Analytics.track({
         event: "Config Action",
diff --git a/src/renderer/runtime/runtime.store.ts b/src/renderer/runtime/runtime.store.ts
index 791ca927c..4e46a19a7 100644
--- a/src/renderer/runtime/runtime.store.ts
+++ b/src/renderer/runtime/runtime.store.ts
@@ -401,9 +401,11 @@ setIntervalAsync(grid_heartbeat_interval_handler, heartbeat_grid_ms);
 const editor_heartbeat_interval_handler = async function () {
   let type = 255;
 
+  /*
   if (runtime.unsavedChangesCount() != 0 || typeof get(modal) !== "undefined") {
     type = 254;
   }
+    */
 
   if (
     runtime.modules.length > 0 &&
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index d6d03e969..f71418cd0 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -378,13 +378,14 @@ export class EventData extends NodeData {
     this.type = type;
     this.config = [];
     this.loaded = false;
-    this.stored = undefined;
+    this.stored = "";
   }
 
   public hasChanges(): boolean {
-    if (this.isStored()) {
+    if (!this.isLoaded()) {
       return false;
     }
+
     return this.stored !== this.toLua();
   }
 
@@ -399,24 +400,9 @@ export class EventData extends NodeData {
     if (!this.isLoaded()) {
       return true;
     }
-
     return this.stored === this.toLua();
   }
 
-  public store() {
-    this.stored = this.toLua();
-  }
-
-  public clear() {
-    for (const action of this.config) {
-      (action as any).parent = undefined;
-    }
-
-    this.config = [];
-    //this.loaded = false;
-    //this.stored = undefined;
-  }
-
   public checkSyntax() {
     for (const action of this.config) {
       if (!action.checkSyntax()) {
@@ -427,8 +413,10 @@ export class EventData extends NodeData {
   }
 
   public checkLength() {
-    const script = this.toLua();
-    return script.length < grid.getProperty("CONFIG_LENGTH");
+    if (!this.isLoaded()) {
+      return true;
+    }
+    return this.toLua().length < grid.getProperty("CONFIG_LENGTH");
   }
 
   public isLoaded() {
@@ -461,6 +449,22 @@ export class GridEvent extends RuntimeNode<EventData> {
     }
   }
 
+  public swap(a: GridAction, b: GridAction) {
+    const indexA = this.config.findIndex((e) => e.id === a.id);
+    const indexB = this.config.findIndex((e) => e.id === b.id);
+
+    if (indexA === -1 || indexB === -1) {
+      console.error("One or both items not found in config");
+      return;
+    }
+
+    const newConfig = [...this.config];
+    newConfig[indexA] = b;
+    newConfig[indexB] = a;
+
+    this.config = newConfig;
+  }
+
   public remove(...actions: GridAction[]): Promise<RemoveActionsResult> {
     for (const action of actions) {
       const index = this.config.findIndex((e) => e.id === action.id);
@@ -604,13 +608,14 @@ export class GridEvent extends RuntimeNode<EventData> {
     const module = page.parent as GridModule;
 
     try {
+      const script = this.toLua();
       await instructions.sendConfigToGrid(
         module.dx,
         module.dy,
         page.pageNumber,
         element.elementIndex,
         this.type,
-        this.toLua()
+        script
       );
       Promise.resolve({
         value: true,
@@ -651,11 +656,20 @@ export class GridEvent extends RuntimeNode<EventData> {
   }
 
   public store() {
-    this.data.store();
+    this.stored = this.toLua();
   }
 
   public clear() {
-    this.data.clear();
+    for (const action of this.config) {
+      (action as any).parent = undefined;
+    }
+    this.config = [];
+  }
+
+  public unload() {
+    this.clear();
+    this.loaded = false;
+    this.stored = "";
   }
 
   public async merge(
@@ -745,25 +759,26 @@ export class GridEvent extends RuntimeNode<EventData> {
     const page = element.parent as GridPage;
     const module = page.parent as GridModule;
 
-    instructions
-      .fetchConfigFromGrid(
+    try {
+      const descr = await instructions.fetchConfigFromGrid(
         module.dx,
         module.dy,
         page.pageNumber,
         element.elementIndex,
         this.type
-      )
-      .then((descr) => {
-        const script = descr.class_parameters.ACTIONSTRING;
-        const actions = GridAction.parse(script);
-        this.push(...actions);
-        this.store();
-        this.loaded = true;
-        return Promise.resolve();
-      })
-      .catch((e) => {
-        return Promise.reject(e);
-      });
+      );
+
+      const script = descr.class_parameters.ACTIONSTRING;
+      const actions = GridAction.parse(script);
+      this.push(...actions);
+      this.store();
+      this.loaded = true;
+
+      console.log("EVENT LOADED");
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
   }
 
   // Getters
@@ -843,23 +858,14 @@ export class GridElement extends RuntimeNode<ElementData> {
   }
 
   public async discardChanges(): Promise<DiscardElementResult> {
-    const promises: Promise<SendToGridResult>[] = [];
-    for (const event of this.events) {
-      if (event.isStored()) continue;
-      const stored = GridAction.parse(event.stored);
-      event.clear();
-      event.push(...stored);
-      const promise = event.sendToGrid();
-      promises.push(promise);
-    }
-
     try {
-      await Promise.all(promises);
-      return Promise.resolve({
-        value: true,
-        text: "OK",
-        type: GridOperationType.DISCARD_ELEMENT,
-      });
+      for (const event of this.events) {
+        if (!event.hasChanges()) continue;
+        const stored = GridAction.parse(event.stored);
+        event.clear();
+        event.push(...stored);
+        await event.sendToGrid();
+      }
     } catch (e) {
       return Promise.reject({
         value: false,
@@ -867,6 +873,13 @@ export class GridElement extends RuntimeNode<ElementData> {
         type: GridOperationType.DISCARD_ELEMENT,
       });
     }
+
+    return Promise.resolve({
+      value: true,
+      text: "OK",
+      type: GridOperationType.DISCARD_ELEMENT,
+    });
+    y;
   }
 
   public async sendToGrid(): Promise<SendToGridResult[]> {
@@ -920,6 +933,7 @@ export class GridElement extends RuntimeNode<ElementData> {
   public async loadPreset(preset: GridPresetData): Promise<PresetLoadResult> {
     try {
       await this.overwrite(preset.element.data);
+      this.sendToGrid();
       return Promise.resolve({
         value: true,
         text: "OK",
@@ -972,12 +986,21 @@ export class GridElement extends RuntimeNode<ElementData> {
     return this.events.every((e) => e.isLoaded());
   }
 
-  public async load() {
-    const promises: Array<Promise<GridAction[]>> = [];
+  public unload() {
     for (const event of this.events) {
-      promises.push(event.load());
+      event.unload();
+    }
+  }
+
+  public async load(): Promise<void> {
+    try {
+      for (const event of this.events) {
+        await event.load();
+      }
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
     }
-    Promise.all(promises);
   }
 
   // Getters
@@ -1083,6 +1106,12 @@ export class GridPage extends RuntimeNode<PageData> {
     }
   }
 
+  public unload() {
+    for (const element of this.control_elements) {
+      element.unload();
+    }
+  }
+
   public async load() {
     const promises: Array<Promise<void>> = [];
     for (const element of this.control_elements) {
@@ -1521,7 +1550,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
         .then(() => {
           for (const module of this.modules) {
             const page = module.findPage(index);
-            page.clear();
+            page.unload();
           }
           resolve();
         })
@@ -1545,7 +1574,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
         .then(() => {
           for (const module of this.modules) {
             const page = module.findPage(index);
-            page.clear();
+            page.unload();
           }
           resolve();
         })
diff --git a/src/renderer/serialport/instructions.ts b/src/renderer/serialport/instructions.ts
index a8b08b0e2..53f1ba742 100644
--- a/src/renderer/serialport/instructions.ts
+++ b/src/renderer/serialport/instructions.ts
@@ -126,6 +126,7 @@ export class GridInstructions implements Instructions {
       });
     }
 
+    console.log(config);
     let buffer_element: BufferElement = {
       id: uuidv4(),
       descr: {

From 7733f02f1b9e3ffb970234966783953b290059a9 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Mon, 7 Oct 2024 18:57:42 +0200
Subject: [PATCH 27/42] Daily push

---
 .../panels/configuration/EventPanel.svelte    |  6 +--
 src/renderer/runtime/runtime.ts               | 37 +++++++++++++++++--
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/renderer/main/panels/configuration/EventPanel.svelte b/src/renderer/main/panels/configuration/EventPanel.svelte
index f279717c5..3b47b2838 100644
--- a/src/renderer/main/panels/configuration/EventPanel.svelte
+++ b/src/renderer/main/panels/configuration/EventPanel.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Grid } from "./../../../lib/_utils";
-  import { NumberToEventType } from "@intechstudio/grid-protocol";
+  import { EventType, NumberToEventType } from "@intechstudio/grid-protocol";
   import {
     runtime,
     user_input,
@@ -48,9 +48,9 @@
 
   $: handleSelectEvent(selected);
 
-  function handleSelectEvent(value) {
+  function handleSelectEvent(value: any) {
     const ui = get(user_input);
-    if (value === -1) {
+    if (value === -1 || ui.eventtype === value) {
       return;
     }
 
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index f71418cd0..7ecda8d3b 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -249,6 +249,10 @@ export class GridAction extends RuntimeNode<ActionData> {
     super(parent, data);
   }
 
+  public destroy() {
+    this.parent = undefined;
+  }
+
   static parse(script: LuaScript) {
     const result: GridAction[] = [];
     let configList: string[] = [];
@@ -429,6 +433,13 @@ export class GridEvent extends RuntimeNode<EventData> {
     super(parent, data);
   }
 
+  public destroy() {
+    for (const action of this.config) {
+      action.destroy();
+    }
+    this.config = [];
+  }
+
   public replace(a: GridAction, b: GridAction): Promise<ReplaceActionsResult> {
     const index = this.config.findIndex((e) => e.id === a.id);
     try {
@@ -478,8 +489,8 @@ export class GridEvent extends RuntimeNode<EventData> {
     }
 
     for (const action of actions) {
-      (action as any).parent = undefined;
       const index = this.config.findIndex((e) => e.id === action.id);
+      action.destroy();
 
       this.config = [
         ...this.config.slice(0, index),
@@ -661,9 +672,8 @@ export class GridEvent extends RuntimeNode<EventData> {
 
   public clear() {
     for (const action of this.config) {
-      (action as any).parent = undefined;
+      this.remove(action);
     }
-    this.config = [];
   }
 
   public unload() {
@@ -770,6 +780,7 @@ export class GridEvent extends RuntimeNode<EventData> {
 
       const script = descr.class_parameters.ACTIONSTRING;
       const actions = GridAction.parse(script);
+      console.log(actions);
       this.push(...actions);
       this.store();
       this.loaded = true;
@@ -857,6 +868,12 @@ export class GridElement extends RuntimeNode<ElementData> {
     }
   }
 
+  public destroy() {
+    for (const event of this.events) {
+      event.destroy();
+    }
+  }
+
   public async discardChanges(): Promise<DiscardElementResult> {
     try {
       for (const event of this.events) {
@@ -1059,6 +1076,12 @@ export class GridPage extends RuntimeNode<PageData> {
     }
   }
 
+  public destroy() {
+    for (const element of this.control_elements) {
+      element.destroy();
+    }
+  }
+
   public async loadProfile(
     profile: GridProfileData
   ): Promise<ProfileLoadResult> {
@@ -1185,6 +1208,12 @@ export class GridModule extends RuntimeNode<ModuleData> {
     ];
   }
 
+  public destroy() {
+    for (const page of this.pages) {
+      page.destroy();
+    }
+  }
+
   findPage(index: number) {
     const pages = this.pages;
     return pages.find((page) => page.pageNumber === index);
@@ -1643,7 +1672,6 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
       },
       type: ModuleType[moduleType as keyof typeof ModuleType],
       fwMismatch: false,
-      alive: Date.now(),
       map: {
         top: { dx: header_param.SX, dy: header_param.SY + 1 },
         right: { dx: header_param.SX + 1, dy: header_param.SY },
@@ -1658,6 +1686,7 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
     // remove the destroyed device from runtime
     const removed = this.modules.find((e) => e.dx == dx && e.dy == dy);
     this.modules = this.modules.filter((e) => e.dx !== dx && e.dy !== dy);
+    removed.destroy();
 
     aliveModules.update((s) => {
       const index = s.findIndex((e) => e.id === removed.id);

From ef582933d640d8edbb39f389bb69145890322f2d Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Mon, 7 Oct 2024 22:22:43 +0200
Subject: [PATCH 28/42] Daily push

---
 .../ButtonPressRelease_If.svelte              |  2 +-
 .../config-blocks/EncoderLeftRight_If.svelte  |  2 +-
 .../config-blocks/EncoderPushRot_If.svelte    |  2 +-
 src/renderer/config-blocks/VarGlobal.svelte   |  2 +-
 src/renderer/config-blocks/VarLocals.svelte   |  2 +-
 src/renderer/config-blocks/VarSelf.svelte     |  2 +-
 .../headers/ConditionElseIfFace.svelte        |  2 +-
 .../headers/ConditionIfFace.svelte            |  2 +-
 .../headers/ForLoopHeader.svelte              |  2 +-
 .../headers/FunctionStartFace.svelte          |  2 +-
 .../panels/configuration/Configuration.svelte | 37 +++++++-------
 .../components/ActionPicker.svelte            |  2 +-
 .../components/DynamicWrapper.svelte          |  6 +--
 src/renderer/runtime/runtime.ts               | 49 +++++++++++--------
 14 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/src/renderer/config-blocks/ButtonPressRelease_If.svelte b/src/renderer/config-blocks/ButtonPressRelease_If.svelte
index b2d97f47f..8fc88f3cc 100644
--- a/src/renderer/config-blocks/ButtonPressRelease_If.svelte
+++ b/src/renderer/config-blocks/ButtonPressRelease_If.svelte
@@ -155,7 +155,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      action={config.runtimeRef}
+      action={config}
       {sidebarWidth}
       value={scriptSegment}
     />
diff --git a/src/renderer/config-blocks/EncoderLeftRight_If.svelte b/src/renderer/config-blocks/EncoderLeftRight_If.svelte
index 5737e19e6..b80d62141 100644
--- a/src/renderer/config-blocks/EncoderLeftRight_If.svelte
+++ b/src/renderer/config-blocks/EncoderLeftRight_If.svelte
@@ -111,7 +111,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      action={config.runtimeRef}
+      action={config}
       {sidebarWidth}
       value={scriptSegment}
     />
diff --git a/src/renderer/config-blocks/EncoderPushRot_If.svelte b/src/renderer/config-blocks/EncoderPushRot_If.svelte
index 61ce012ff..f3141de65 100644
--- a/src/renderer/config-blocks/EncoderPushRot_If.svelte
+++ b/src/renderer/config-blocks/EncoderPushRot_If.svelte
@@ -94,7 +94,7 @@
       on:output={(e) => {
         sendData(e.detail.script);
       }}
-      action={config.runtimeRef}
+      action={config}
       {sidebarWidth}
       value={scriptSegment}
     />
diff --git a/src/renderer/config-blocks/VarGlobal.svelte b/src/renderer/config-blocks/VarGlobal.svelte
index 6ab84b4de..9c3b3a867 100644
--- a/src/renderer/config-blocks/VarGlobal.svelte
+++ b/src/renderer/config-blocks/VarGlobal.svelte
@@ -253,7 +253,7 @@
                 on:output={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
-                action={config.runtimeRef}
+                action={config}
                 {sidebarWidth}
                 value={script.value}
               />
diff --git a/src/renderer/config-blocks/VarLocals.svelte b/src/renderer/config-blocks/VarLocals.svelte
index 8d1604d31..51f20cfeb 100644
--- a/src/renderer/config-blocks/VarLocals.svelte
+++ b/src/renderer/config-blocks/VarLocals.svelte
@@ -256,7 +256,7 @@
                 on:output={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
-                action={config.runtimeRef}
+                action={config}
                 {sidebarWidth}
                 value={script.value}
               />
diff --git a/src/renderer/config-blocks/VarSelf.svelte b/src/renderer/config-blocks/VarSelf.svelte
index 689779e77..8483f6591 100644
--- a/src/renderer/config-blocks/VarSelf.svelte
+++ b/src/renderer/config-blocks/VarSelf.svelte
@@ -257,7 +257,7 @@
                 on:output={(e) => {
                   saveChangesOnInput(e.detail.script, i, "value");
                 }}
-                action={config.runtimeRef}
+                action={config}
                 {sidebarWidth}
                 value={script.value}
               />
diff --git a/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte b/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
index 0b0207933..fbfc0c30b 100644
--- a/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
+++ b/src/renderer/config-blocks/headers/ConditionElseIfFace.svelte
@@ -53,7 +53,7 @@
         on:change={(e) => {
           sendData(e.detail.script);
         }}
-        action={config.runtimeRef}
+        action={config}
         {sidebarWidth}
         value={scriptSegment}
       />
diff --git a/src/renderer/config-blocks/headers/ConditionIfFace.svelte b/src/renderer/config-blocks/headers/ConditionIfFace.svelte
index 5b1183e73..17c066d52 100644
--- a/src/renderer/config-blocks/headers/ConditionIfFace.svelte
+++ b/src/renderer/config-blocks/headers/ConditionIfFace.svelte
@@ -49,7 +49,7 @@
         on:change={(e) => {
           sendData(e.detail.script);
         }}
-        action={config.runtimeRef}
+        action={config}
         value={scriptSegment}
       />
     </div>
diff --git a/src/renderer/config-blocks/headers/ForLoopHeader.svelte b/src/renderer/config-blocks/headers/ForLoopHeader.svelte
index 04cb4ccec..d81feb941 100644
--- a/src/renderer/config-blocks/headers/ForLoopHeader.svelte
+++ b/src/renderer/config-blocks/headers/ForLoopHeader.svelte
@@ -110,7 +110,7 @@
       {#key displayValue}
         <LineEditor
           on:change={handleDisplayValueChange}
-          action={config.runtimeRef}
+          action={config}
           bind:value={displayValue}
         />
       {/key}
diff --git a/src/renderer/config-blocks/headers/FunctionStartFace.svelte b/src/renderer/config-blocks/headers/FunctionStartFace.svelte
index 74806fbcf..f8e22d52b 100644
--- a/src/renderer/config-blocks/headers/FunctionStartFace.svelte
+++ b/src/renderer/config-blocks/headers/FunctionStartFace.svelte
@@ -47,7 +47,7 @@
         on:change={(e) => {
           sendData(e.detail.script);
         }}
-        action={config.runtimeRef}
+        action={config}
         value={scriptSegment}
       />
     </div>
diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 8367fa93a..93bd23031 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -47,7 +47,7 @@
   //////////////////////////////////////////////////////////////////////////////
 
   let scrollHeight = "100%";
-  let draggedIndexes = [];
+  let draggedIndexes: number[] = [];
   let autoScroll;
   let dropIndex = undefined;
   let isSystemEventSelected = false;
@@ -96,8 +96,7 @@
       return;
     }
 
-    const targetIndex =
-      draggedIndexes[0] > dropIndex ? dropIndex : dropIndex - 1;
+    const offset = Math.min(...draggedIndexes) > dropIndex ? 0 : -1;
 
     //Check for incorrect dropzones
     const firstIndex = draggedIndexes.at(0);
@@ -115,12 +114,15 @@
       ui.eventtype
     );
 
-    const blocks = get(config_panel_blocks).map((e) => e.action);
-    let n = 0;
-    for (const index of draggedIndexes) {
-      event.swap(blocks[targetIndex + n], blocks[index]);
-      ++n;
-    }
+    const blocks = get(config_panel_blocks)
+      .map((e) => e.action)
+      .filter((e, n) => draggedIndexes.includes(n));
+
+    const trueDropIndex =
+      dropIndex - (offset === -1 ? blocks.length - 1 : 0) + offset;
+
+    event.remove(...blocks);
+    event.insert(trueDropIndex, ...blocks);
   }
 
   function handleDragStart(e) {
@@ -329,7 +331,8 @@
 
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
-          use:changeOrder={(this, { configs: $config_panel_blocks })}
+          use:changeOrder={(this,
+          { configs: $config_panel_blocks.map((e) => e.action) })}
           on:drag-start={handleDragStart}
           on:drag-target={handleDragTargetChange}
           on:drop={handleDrop}
@@ -378,13 +381,7 @@
                 >
                   <DynamicWrapper {index} data={block} />
                   {#if typeof $config_drag === "undefined"}
-                    {#if ["composite_close", "single"].includes(block.action.information.type) || ["single"].includes($config_panel_blocks[index + 1]?.action.information.type) || !$appSettings.persistent.actionHelperText || typeof block.action.information.helperText === "undefined"}
-                      <AddActionLine
-                        index={index + 1}
-                        on:paste={handlePaste}
-                        on:new-config={handleAddConfig}
-                      />
-                    {:else}
+                    {#if typeof block.action.information.helperText !== "undefined" && ["composite_part", "composite_open"].includes(block.action.information.type) && $config_panel_blocks[index + 1]?.action.indentation === block.action.indentation && $appSettings.persistent.actionHelperText}
                       <div class="mr-6">
                         <AddAction
                           text={block.action.information.helperText}
@@ -393,6 +390,12 @@
                           on:new-config={handleAddConfig}
                         />
                       </div>
+                    {:else}
+                      <AddActionLine
+                        index={index + 1}
+                        on:paste={handlePaste}
+                        on:new-config={handleAddConfig}
+                      />
                     {/if}
                   {:else}
                     <DropZone
diff --git a/src/renderer/main/panels/configuration/components/ActionPicker.svelte b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
index 802e53565..575c6535e 100644
--- a/src/renderer/main/panels/configuration/components/ActionPicker.svelte
+++ b/src/renderer/main/panels/configuration/components/ActionPicker.svelte
@@ -68,7 +68,7 @@
 
   $: {
     try {
-      options = getAvailableOptions($config_panel_blocks);
+      options = getAvailableOptions($config_panel_blocks.map((e) => e.action));
     } catch (e) {
       handleClose();
     }
diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 948189893..562ec3ee3 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -131,7 +131,7 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <wrapper class="flex flex-grow outline-none" class:cursor-pointer={ctrlIsDown}>
-  {#each Array(action.indentation) as _}
+  {#each Array($action.indentation) as _}
     <div style="width: 15px" class="flex items-center mx-1">
       <div class="w-3 h-3 rounded-full bg-secondary" />
     </div>
@@ -139,7 +139,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <carousel
-    class="group/bg-color flex flex-grow h-auto min-h-[32px] border {!action.checkSyntax()
+    class="group/bg-color flex flex-grow h-auto min-h-[32px] border {!$action.checkSyntax()
       ? 'border-error'
       : 'border-transparent'} bri"
     id={configIndexToId(index)}
@@ -182,7 +182,7 @@
               class="h-full w-full px-2"
               {index}
               config={action}
-              syntaxError={!action.checkSyntax()}
+              syntaxError={!$action.checkSyntax()}
               on:replace={handleReplace}
               on:validator={handleValidator}
               on:output={handleOutput}
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 7ecda8d3b..93ff9e945 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -242,6 +242,32 @@ export class ActionData extends NodeData {
     }
     return result;
   }
+
+  public get indentation() {
+    let indentation = 0;
+    const event = this.parent as GridEvent;
+    for (let i = 0; i < event.config.length; ++i) {
+      let action = event.config[i];
+
+      if (action.id === this.id) {
+        if (
+          ["composite_part", "composite_close"].includes(
+            action.information.type
+          )
+        ) {
+          return indentation - 1;
+        } else {
+          return indentation;
+        }
+      }
+
+      if (action.information.type === "composite_open") {
+        ++indentation;
+      } else if (action.information.type === "composite_close") {
+        --indentation;
+      }
+    }
+  }
 }
 
 export class GridAction extends RuntimeNode<ActionData> {
@@ -320,25 +346,7 @@ export class GridAction extends RuntimeNode<ActionData> {
 
   // Getters
   public get indentation() {
-    let indentation = 0;
-    const event = this.parent as GridEvent;
-    for (let i = 0; i < event.config.length; ++i) {
-      let action = event.config[i];
-
-      if (action.id === this.id) {
-        if (action.information.type === "composite_part") {
-          return indentation - 1;
-        } else {
-          return indentation;
-        }
-      }
-
-      if (action.information.type === "composite_open") {
-        ++indentation;
-      } else if (action.information.type === "composite_close") {
-        --indentation;
-      }
-    }
+    return this.data.indentation;
   }
 
   public get information() {
@@ -490,12 +498,11 @@ export class GridEvent extends RuntimeNode<EventData> {
 
     for (const action of actions) {
       const index = this.config.findIndex((e) => e.id === action.id);
-      action.destroy();
-
       this.config = [
         ...this.config.slice(0, index),
         ...this.config.slice(index + 1),
       ];
+      action.destroy();
     }
 
     return Promise.resolve({

From 56ba5bc416c65dc755db5c3c97da319c3b4808a1 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 8 Oct 2024 15:21:20 +0200
Subject: [PATCH 29/42] Daily push

---
 src/renderer/main/modals/Export.svelte             |  6 ++++--
 .../main/panels/DebugMonitor/DebugMonitor.svelte   | 10 ++++++++--
 .../main/panels/MidiMonitor/MidiMonitor.svelte     |  9 +++++++--
 src/renderer/runtime/operations.ts                 | 14 ++++++++++++++
 src/renderer/serialport/instructions.ts            |  1 -
 5 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/renderer/main/modals/Export.svelte b/src/renderer/main/modals/Export.svelte
index b5d2607d1..84cc8bda7 100644
--- a/src/renderer/main/modals/Export.svelte
+++ b/src/renderer/main/modals/Export.svelte
@@ -6,9 +6,11 @@
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
   import MoltenPopup from "../panels/preferences/MoltenPopup.svelte";
 
+  let event = $user_input_event;
+
   function handleCopy() {
     const _tempSpan = document.createElement("input");
-    _tempSpan.value = get(user_input_event).toLua();
+    _tempSpan.value = get(event).toLua();
 
     _tempSpan.id = "temp-clip";
     document.getElementById("modal-copy-placeholder").append(_tempSpan);
@@ -50,7 +52,7 @@
     </div>
 
     <textarea
-      value={$user_input_event.toLua()}
+      value={$event.toLua()}
       class="bg-secondary min-h-200 font-mono w-full p-1 my-1 rounded"
     />
 
diff --git a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
index a74911481..ac148372f 100644
--- a/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
+++ b/src/renderer/main/panels/DebugMonitor/DebugMonitor.svelte
@@ -19,10 +19,16 @@
   import { user_input_event } from "../../panels/configuration/Configuration";
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
-  const configScriptLength: number = $user_input_event?.toLua().length ?? 0;
-  const syntaxError: boolean = $user_input_event?.checkSyntax() === false;
+  let event = $user_input_event;
+  let configScriptLength = 0;
+  let syntaxError = false;
   const incoming_messages_stores = writable([]);
 
+  $: {
+    configScriptLength = $event?.toLua().length ?? 0;
+    syntaxError = $event?.checkSyntax() === false;
+  }
+
   $: if (typeof $incoming_messages !== "undefined") {
     handleIncomingMessage($incoming_messages);
   }
diff --git a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
index ca744e64e..4e5368c9d 100644
--- a/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
+++ b/src/renderer/main/panels/MidiMonitor/MidiMonitor.svelte
@@ -2,7 +2,7 @@
   import { user_input_event } from "./../configuration/Configuration";
   import Toggle from "../../user-interface/Toggle.svelte";
   import { Pane, Splitpanes } from "svelte-splitpanes";
-  import { get, writable } from "svelte/store";
+  import { derived, get, writable } from "svelte/store";
   import { debug_monitor_store } from "../DebugMonitor/DebugMonitor.store";
   import {
     midi_monitor_store,
@@ -15,7 +15,12 @@
   import { MoltenPushButton } from "@intechstudio/grid-uikit";
 
   // ok but slow nice
-  const configScriptLength: number = $user_input_event?.toLua().length ?? 0;
+  let event = $user_input_event;
+  let configScriptLength = 0;
+
+  $: {
+    configScriptLength = $event?.toLua().length ?? 0;
+  }
 
   const createDebouncedStore = (initialValue, debounceTime) => {
     let timeoutId;
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index ceb14e790..cf21d916c 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -9,12 +9,26 @@ import {
   GridElement,
   GridEvent,
   SendToGridResult,
+  GridOperationType,
+  InsertActionsResult,
 } from "./runtime";
 import { get, derived } from "svelte/store";
 import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
 function handleError(e: GridOperationResult) {
   console.warn(`Operation error: ${e.text}`);
+  switch (e.type) {
+    case GridOperationType.INSERT_ACTIONS: {
+      const error = e as InsertActionsResult;
+
+      logger.set({
+        type: "progress",
+        mode: 0,
+        classname: "elementdiscard",
+        message: `Modifications can not`,
+      });
+    }
+  }
 }
 
 //Clipboard handlers
diff --git a/src/renderer/serialport/instructions.ts b/src/renderer/serialport/instructions.ts
index 53f1ba742..a8b08b0e2 100644
--- a/src/renderer/serialport/instructions.ts
+++ b/src/renderer/serialport/instructions.ts
@@ -126,7 +126,6 @@ export class GridInstructions implements Instructions {
       });
     }
 
-    console.log(config);
     let buffer_element: BufferElement = {
       id: uuidv4(),
       descr: {

From 5a113a8b601da1505e6f726c00b9d8152e30d5ad Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 8 Oct 2024 16:39:11 +0200
Subject: [PATCH 30/42] Fixed config limit error handling

---
 .../headers/ButtonStepFace.svelte             |  25 +++-
 src/renderer/runtime/operations.ts            |  24 +++-
 src/renderer/runtime/runtime.ts               | 124 ++++++++++++++----
 3 files changed, 136 insertions(+), 37 deletions(-)

diff --git a/src/renderer/config-blocks/headers/ButtonStepFace.svelte b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
index a45e78374..e68cac2ef 100644
--- a/src/renderer/config-blocks/headers/ButtonStepFace.svelte
+++ b/src/renderer/config-blocks/headers/ButtonStepFace.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { EventData, GridAction, GridEvent } from "./../../runtime/runtime";
+  import {
+    EventData,
+    GridAction,
+    GridEvent,
+    ActionData,
+  } from "./../../runtime/runtime";
   import { createEventDispatcher } from "svelte";
   import { toWords } from "number-to-words";
 
@@ -14,9 +19,7 @@
     dispatch("toggle");
   }
 
-  $: {
-    handleEventDataChange($event);
-  }
+  $: handleEventDataChange($event);
 
   function handleEventDataChange(event: EventData) {
     step = 0;
@@ -32,8 +35,18 @@
 
       if (action.short === "bstn") {
         step = ++stack[stack.length - 1];
-        const defaultScript = config.information.defaultLua;
-        config.script = defaultScript.replace("N", String(step));
+        if (action.id === config.id) {
+          const defaultScript = config.information.defaultLua;
+          const newScript = defaultScript.replace("N", String(step));
+          const oldScript = config.script;
+          if (newScript !== oldScript) {
+            config.updateData(
+              new ActionData(config.short, newScript, config.name)
+            );
+            config.sendToGrid();
+          }
+          return;
+        }
       }
     }
   }
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index cf21d916c..4ebaef9cd 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -16,19 +16,33 @@ import { get, derived } from "svelte/store";
 import { config_panel_blocks } from "../main/panels/configuration/Configuration";
 
 function handleError(e: GridOperationResult) {
+  //TODO: Better error handling
   console.warn(`Operation error: ${e.text}`);
   switch (e.type) {
+    case GridOperationType.MERGE_ACTIONS_TO_CODE:
+    case GridOperationType.PASTE_ACTION:
+    case GridOperationType.REPLACE_ACTION:
+    case GridOperationType.UPDATE_ACTION:
     case GridOperationType.INSERT_ACTIONS: {
       const error = e as InsertActionsResult;
-
       logger.set({
-        type: "progress",
+        type: "fail",
         mode: 0,
-        classname: "elementdiscard",
-        message: `Modifications can not`,
+        classname: "luanotok",
+        message: `${error.info.module.type}: ${e.text}`,
       });
+      break;
     }
   }
+
+  /*
+  logger.set({
+    type: "fail",
+    mode: 0,
+    classname: "luanotok",
+    message: `${e.device}: Syntax error on ${e.element.no} ${e.event.type} event.`,
+  });
+  */
 }
 
 //Clipboard handlers
@@ -212,7 +226,7 @@ export async function clearElement(target: GridElement) {
 
 export async function updateAction(target: GridAction, data: ActionData) {
   target
-    .overwride(data)
+    .updateData(data)
     .then((result) => {})
     .catch(handleError)
     .finally(() => {
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 93ff9e945..357369025 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -5,6 +5,7 @@ import {
   ModuleType,
   GridScript,
   EventType,
+  NumberToEventType,
 } from "@intechstudio/grid-protocol";
 import {
   writable,
@@ -30,6 +31,8 @@ import { v4 as uuidv4 } from "uuid";
 import { getComponentInformation } from "../lib/_configs";
 import * as CodeBlock from "../config-blocks/CodeBlock.svelte";
 import { appClipboard, ClipboardKey } from "./clipboard.store";
+import { ActionBlockInformation } from "../config-blocks/ActionBlockInformation";
+import { Runtime } from "./string-table";
 
 type UUID = string;
 type LuaScript = string;
@@ -106,11 +109,17 @@ export interface GridOperationResult {
   type: GridOperationType;
 }
 
-export interface PasteActionsResult extends GridOperationResult {}
+export interface PasteActionsResult extends GridOperationResult {
+  info: EventInfo;
+}
 export interface DiscardElementResult extends GridOperationResult {}
 export interface OverwriteElementResult extends GridOperationResult {}
-export interface UpdateActionResult extends GridOperationResult {}
-export interface MergeActionsToCodeResult extends GridOperationResult {}
+export interface UpdateActionResult extends GridOperationResult {
+  info: EventInfo;
+}
+export interface MergeActionsToCodeResult extends GridOperationResult {
+  info: EventInfo;
+}
 export interface RemoveActionsResult extends GridOperationResult {}
 export interface CutActionsResult extends GridOperationResult {}
 export interface ResetElementResult extends GridOperationResult {}
@@ -118,8 +127,12 @@ export interface SendToGridResult extends GridOperationResult {}
 export interface PresetLoadResult extends GridOperationResult {}
 export interface ProfileLoadResult extends GridOperationResult {}
 export interface OverwriteEventResult extends GridOperationResult {}
-export interface InsertActionsResult extends GridOperationResult {}
-export interface ReplaceActionsResult extends GridOperationResult {}
+export interface InsertActionsResult extends GridOperationResult {
+  info: EventInfo;
+}
+export interface ReplaceActionsResult extends GridOperationResult {
+  info: EventInfo;
+}
 
 abstract class RuntimeNode<T extends NodeData> implements Writable<T> {
   protected _internal: Writable<T>;
@@ -315,9 +328,9 @@ export class GridAction extends RuntimeNode<ActionData> {
     return result;
   }
 
-  static getInformation(short: string) {
+  static getInformation(short: string): ActionBlockInformation {
     const result = getComponentInformation({ short: short });
-    return result.information;
+    return result.information as ActionBlockInformation;
   }
 
   public toLua() {
@@ -333,15 +346,32 @@ export class GridAction extends RuntimeNode<ActionData> {
     return event.sendToGrid();
   }
 
-  public async overwride(data: ActionData): Promise<UpdateActionResult> {
+  public async updateData(data: ActionData): Promise<UpdateActionResult> {
+    const temp = this.data;
+    const parent = this.parent as GridEvent;
+
     this.script = data.script;
     this.short = data.short;
     this.name = data.name;
-    return Promise.resolve({
-      value: true,
-      text: "OK",
-      type: GridOperationType.UPDATE_ACTION,
-    });
+
+    if (parent.checkLength()) {
+      return Promise.resolve({
+        value: true,
+        text: "OK",
+        type: GridOperationType.UPDATE_ACTION,
+        info: (this.parent as GridEvent)?.getInfo(),
+      });
+    } else {
+      this.script = temp.script;
+      this.short = temp.short;
+      this.name = temp.name;
+      return Promise.reject({
+        value: false,
+        text: Runtime.ErrorText.LENGTH_ERROR,
+        type: GridOperationType.UPDATE_ACTION,
+        info: (this.parent as GridEvent)?.getInfo(),
+      });
+    }
   }
 
   // Getters
@@ -379,6 +409,13 @@ export class GridAction extends RuntimeNode<ActionData> {
   }
 }
 
+export type EventInfo = {
+  event: { name: string };
+  element: { type: string; index: number };
+  page: number;
+  module: { type: string; dx: number; dy: number };
+};
+
 export class EventData extends NodeData {
   public config: Array<GridAction>;
   public type: number;
@@ -434,6 +471,18 @@ export class EventData extends NodeData {
   public isLoaded() {
     return this.loaded;
   }
+
+  public getInfo(): EventInfo {
+    const element = this.parent as GridElement;
+    const page = element.parent as GridPage;
+    const module = page.parent as GridModule;
+    return {
+      event: { name: NumberToEventType(this.type) },
+      element: { type: element.type, index: element.elementIndex },
+      page: page.pageNumber,
+      module: { type: module.type, dx: module.dx, dy: module.dy },
+    };
+  }
 }
 
 export class GridEvent extends RuntimeNode<EventData> {
@@ -448,6 +497,10 @@ export class GridEvent extends RuntimeNode<EventData> {
     this.config = [];
   }
 
+  public getInfo() {
+    return this.data.getInfo();
+  }
+
   public replace(a: GridAction, b: GridAction): Promise<ReplaceActionsResult> {
     const index = this.config.findIndex((e) => e.id === a.id);
     try {
@@ -457,13 +510,15 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: true,
         text: "OK",
         type: GridOperationType.REPLACE_ACTION,
+        info: this.getInfo(),
       });
     } catch (e) {
       this.insert(index, a); //Fallback to original value
       return Promise.reject({
         value: false,
-        text: `Replace failed! Reason: ${e}`,
+        text: Runtime.ErrorText.LENGTH_ERROR,
         type: GridOperationType.REPLACE_ACTION,
+        info: this.getInfo(),
       });
     }
   }
@@ -521,6 +576,7 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: false,
         text: `Add failed! Invalid index: ${index}.`,
         type: GridOperationType.INSERT_ACTIONS,
+        info: this.getInfo(),
       });
     }
 
@@ -535,12 +591,14 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: true,
         text: "OK",
         type: GridOperationType.INSERT_ACTIONS,
+        info: this.getInfo(),
       });
     } catch (e) {
       return Promise.reject({
         value: false,
-        text: `Insert failed! Reason: ${e}`,
+        text: Runtime.ErrorText.LENGTH_ERROR,
         type: GridOperationType.INSERT_ACTIONS,
+        info: this.getInfo(),
       });
     }
   }
@@ -553,6 +611,7 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: false,
         text: `Nothing to paste, clipboard is empty`,
         type: GridOperationType.PASTE_ACTION,
+        info: this.getInfo(),
       });
     }
 
@@ -561,6 +620,7 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: false,
         text: `Invalid clipboard type ${clipboard?.key}`,
         type: GridOperationType.PASTE_ACTION,
+        info: this.getInfo(),
       });
     }
 
@@ -585,12 +645,14 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: true,
         text: "OK",
         type: GridOperationType.PASTE_ACTION,
+        info: this.getInfo(),
       });
     } catch (e) {
       Promise.reject({
         value: false,
-        text: "Config limit reached",
+        text: Runtime.ErrorText.LENGTH_ERROR,
         type: GridOperationType.PASTE_ACTION,
+        info: this.getInfo(),
       });
     }
   }
@@ -697,6 +759,7 @@ export class GridEvent extends RuntimeNode<EventData> {
         value: false,
         text: "Detached action!",
         type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+        info: this.getInfo(),
       });
     }
 
@@ -718,19 +781,30 @@ export class GridEvent extends RuntimeNode<EventData> {
     if (!codeBlock.checkSyntax()) {
       return Promise.reject({
         value: false,
-        text: "Action(s) with syntax error(s) can not be merged!",
+        text: Runtime.ErrorText.SYNTAX_ERROR,
         type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+        info: this.getInfo(),
       });
     }
 
-    const index = this.config.findIndex((e) => e.id === actions[0].id);
-    this.insert(index, codeBlock);
-    actions.forEach((e) => this.remove(e));
+    try {
+      const index = this.config.findIndex((e) => e.id === actions[0].id);
+      this.insert(index, codeBlock);
+      actions.forEach((e) => this.remove(e));
+    } catch (e) {
+      return Promise.reject({
+        value: false,
+        text: Runtime.ErrorText.LENGTH_ERROR,
+        type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+        info: this.getInfo(),
+      });
+    }
 
     return Promise.resolve({
       value: true,
       text: "OK",
       type: GridOperationType.MERGE_ACTIONS_TO_CODE,
+      info: this.getInfo(),
     });
   }
 
@@ -787,7 +861,6 @@ export class GridEvent extends RuntimeNode<EventData> {
 
       const script = descr.class_parameters.ACTIONSTRING;
       const actions = GridAction.parse(script);
-      console.log(actions);
       this.push(...actions);
       this.store();
       this.loaded = true;
@@ -821,9 +894,6 @@ export class GridEvent extends RuntimeNode<EventData> {
     const temp = this.config;
     this.setField("config", value);
     if (!this.checkLength()) {
-      value.forEach((e: GridAction) => {
-        this.remove(e);
-      });
       this.setField("config", temp);
       throw "Config limit reached! Event value was reset.";
     }
@@ -903,7 +973,6 @@ export class GridElement extends RuntimeNode<ElementData> {
       text: "OK",
       type: GridOperationType.DISCARD_ELEMENT,
     });
-    y;
   }
 
   public async sendToGrid(): Promise<SendToGridResult[]> {
@@ -1622,7 +1691,10 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
   }
 
   addVirtualModule({ dx, dy, type }) {
-    const moduleInfo = grid.module_hwcfgs().findLast((e) => e.type === type);
+    const moduleInfo = grid
+      .module_hwcfgs()
+      .reverse()
+      .find((e) => e.type === type);
     const controller = this.create_module(
       {
         DX: dx,

From c4ab163a16c1243f32e5953272c32278d8f7f091 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 8 Oct 2024 16:45:43 +0200
Subject: [PATCH 31/42] Missing files

---
 src/renderer/runtime/string-table.ts | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 src/renderer/runtime/string-table.ts

diff --git a/src/renderer/runtime/string-table.ts b/src/renderer/runtime/string-table.ts
new file mode 100644
index 000000000..08e6149d4
--- /dev/null
+++ b/src/renderer/runtime/string-table.ts
@@ -0,0 +1,7 @@
+export namespace Runtime {
+  export enum ErrorText {
+    LENGTH_ERROR = `Modifications can not be synced with grid, 
+        maximum character limit reached. Shorten your code or delete action blocks.`,
+    SYNTAX_ERROR = `Action(s) with syntax error(s) can not be merged!`,
+  }
+}

From 3e4ddbfdc06efb7eec1516ffc87be50733ed6cca Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 8 Oct 2024 17:26:16 +0200
Subject: [PATCH 32/42] Fixed playwright test

---
 src/renderer/main/modals/Monaco.svelte |  3 +--
 src/renderer/runtime/runtime.ts        | 24 +++++++++++++-----------
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/renderer/main/modals/Monaco.svelte b/src/renderer/main/modals/Monaco.svelte
index 7cb3485fd..1a54393b2 100644
--- a/src/renderer/main/modals/Monaco.svelte
+++ b/src/renderer/main/modals/Monaco.svelte
@@ -101,8 +101,7 @@
   }
 
   onMount(() => {
-    monaco_action = get(modal).args;
-    console.log(monaco_action, get(modal));
+    monaco_action = get(modal).args.monaco_action;
     commited.name = monaco_action.name;
     commited.script = monaco_action.script;
     scriptLength = (monaco_action.parent as GridEvent).toLua().length;
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index 357369025..ce0abe137 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -501,11 +501,14 @@ export class GridEvent extends RuntimeNode<EventData> {
     return this.data.getInfo();
   }
 
-  public replace(a: GridAction, b: GridAction): Promise<ReplaceActionsResult> {
+  public async replace(
+    a: GridAction,
+    b: GridAction
+  ): Promise<ReplaceActionsResult> {
     const index = this.config.findIndex((e) => e.id === a.id);
     try {
       this.remove(a);
-      this.insert(index, b);
+      await this.insert(index, b);
       return Promise.resolve({
         value: true,
         text: "OK",
@@ -513,7 +516,7 @@ export class GridEvent extends RuntimeNode<EventData> {
         info: this.getInfo(),
       });
     } catch (e) {
-      this.insert(index, a); //Fallback to original value
+      await this.insert(index, a); //Fallback to original value
       return Promise.reject({
         value: false,
         text: Runtime.ErrorText.LENGTH_ERROR,
@@ -640,7 +643,7 @@ export class GridEvent extends RuntimeNode<EventData> {
     );
 
     try {
-      this.insert(index, ...actions);
+      await this.insert(index, ...actions);
       return Promise.resolve({
         value: true,
         text: "OK",
@@ -648,7 +651,7 @@ export class GridEvent extends RuntimeNode<EventData> {
         info: this.getInfo(),
       });
     } catch (e) {
-      Promise.reject({
+      return Promise.reject({
         value: false,
         text: Runtime.ErrorText.LENGTH_ERROR,
         type: GridOperationType.PASTE_ACTION,
@@ -667,16 +670,15 @@ export class GridEvent extends RuntimeNode<EventData> {
 
   public async sendToGrid(): Promise<SendToGridResult> {
     if (!this.checkLength()) {
-      Promise.reject({
+      return Promise.reject({
         value: false,
         text: "Length Error",
         type: GridOperationType.SEND_EVENT_TO_GRID,
       });
-      return;
     }
 
     if (!this.isLoaded()) {
-      Promise.resolve({
+      return Promise.resolve({
         value: true,
         text: "Nothing to sync, not loaded yet.",
         type: GridOperationType.SEND_EVENT_TO_GRID,
@@ -697,13 +699,13 @@ export class GridEvent extends RuntimeNode<EventData> {
         this.type,
         script
       );
-      Promise.resolve({
+      return Promise.resolve({
         value: true,
         text: "OK",
         type: GridOperationType.SEND_EVENT_TO_GRID,
       });
     } catch (e) {
-      Promise.reject({
+      return Promise.reject({
         value: false,
         text: e,
         type: GridOperationType.SEND_EVENT_TO_GRID,
@@ -789,7 +791,7 @@ export class GridEvent extends RuntimeNode<EventData> {
 
     try {
       const index = this.config.findIndex((e) => e.id === actions[0].id);
-      this.insert(index, codeBlock);
+      await this.insert(index, codeBlock);
       actions.forEach((e) => this.remove(e));
     } catch (e) {
       return Promise.reject({

From 0697a7d7c2f562fef5f94cfd49bec925cd7600cb Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 8 Oct 2024 18:24:35 +0200
Subject: [PATCH 33/42] Fixed playwright comment restore test

---
 .../components/DynamicWrapper.svelte          | 62 ++++++++++---------
 src/renderer/runtime/operations.ts            | 43 +++++++------
 src/renderer/runtime/runtime.ts               | 14 +++--
 3 files changed, 67 insertions(+), 52 deletions(-)

diff --git a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
index 562ec3ee3..71edf62dc 100644
--- a/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
+++ b/src/renderer/main/panels/configuration/components/DynamicWrapper.svelte
@@ -143,12 +143,12 @@
       ? 'border-error'
       : 'border-transparent'} bri"
     id={configIndexToId(index)}
-    class:rounded-tr-xl={action.information.rounding === "top"}
-    class:rounded-br-xl={action.information.rounding === "bottom"}
-    config-name={action.information.name}
-    config-type={action.information.type}
+    class:rounded-tr-xl={$action.information.rounding === "top"}
+    class:rounded-br-xl={$action.information.rounding === "bottom"}
+    config-name={$action.information.name}
+    config-type={$action.information.type}
     config-id={index}
-    movable={action.information.movable}
+    movable={$action.information.movable}
     class:brightness-125={data.selected}
     on:click|self={handleCarouselClicked}
   >
@@ -156,13 +156,13 @@
     <!-- TODO: Make marking when the block has unsaved changes  -->
     <div class="w-full flex flex-row pointer-events-none">
       <!-- Icon -->
-      {#if action.information.hideIcon !== true}
+      {#if $action.information.hideIcon !== true}
         <div
-          style="background-color:{action.information.color}"
+          style="background-color:{$action.information.color}"
           class="flex items-center p-2 w-min text-center"
         >
           <div class="w-6 h-6 whitespace-nowrap">
-            {@html action.information.blockIcon}
+            {@html $action.information.blockIcon}
           </div>
         </div>
       {/if}
@@ -174,32 +174,34 @@
         class:bg-opacity-30={toggled}
       >
         <!-- Content of block -->
-        {#if (toggled && action.information.toggleable) || typeof header === "undefined"}
-          <!-- Body of the Action block when toggled -->
-          <div class="bg-secondary bg-opacity-30 h-full w-full">
+        {#key $action}
+          {#if (toggled && $action.information.toggleable) || typeof header === "undefined"}
+            <!-- Body of the Action block when toggled -->
+            <div class="bg-secondary bg-opacity-30 h-full w-full">
+              <svelte:component
+                this={component}
+                class="h-full w-full px-2"
+                {index}
+                config={action}
+                syntaxError={!$action.checkSyntax()}
+                on:replace={handleReplace}
+                on:validator={handleValidator}
+                on:output={handleOutput}
+                on:toggle={handleToggle}
+              />
+            </div>
+          {:else}
+            <!-- Header of the Action block when untoggled -->
+
             <svelte:component
-              this={component}
-              class="h-full w-full px-2"
-              {index}
+              this={header}
               config={action}
-              syntaxError={!$action.checkSyntax()}
-              on:replace={handleReplace}
-              on:validator={handleValidator}
-              on:output={handleOutput}
+              {index}
               on:toggle={handleToggle}
+              on:output={handleOutput}
             />
-          </div>
-        {:else}
-          <!-- Header of the Action block when untoggled -->
-
-          <svelte:component
-            this={header}
-            config={action}
-            {index}
-            on:toggle={handleToggle}
-            on:output={handleOutput}
-          />
-        {/if}
+          {/if}
+        {/key}
       </div>
     </div>
   </carousel>
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index 4ebaef9cd..7de5afda5 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -140,10 +140,11 @@ export async function overwriteElement(target: GridElement) {
 
   target
     .overwrite(clipboard.payload as ElementData)
-    .then((result) => {})
+    .then((result) => {
+      target.sendToGrid();
+    })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Whole Element Overwrite" },
@@ -171,6 +172,7 @@ export async function discardElement(target: GridElement) {
   target
     .discardChanges()
     .then((result) => {
+      target.sendToGrid();
       logger.set({
         type: "progress",
         mode: 0,
@@ -180,7 +182,6 @@ export async function discardElement(target: GridElement) {
     })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Whole Element Discard" },
@@ -204,6 +205,7 @@ export async function clearElement(target: GridElement) {
   target
     .resetDefault()
     .then((result) => {
+      target.sendToGrid();
       logger.set({
         type: "progress",
         mode: 0,
@@ -213,7 +215,6 @@ export async function clearElement(target: GridElement) {
     })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Clear Element" },
@@ -227,10 +228,11 @@ export async function clearElement(target: GridElement) {
 export async function updateAction(target: GridAction, data: ActionData) {
   target
     .updateData(data)
-    .then((result) => {})
+    .then((result) => {
+      target.sendToGrid();
+    })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       const event = target.parent as GridEvent;
       const element = event.parent as GridElement;
       Analytics.track({
@@ -261,11 +263,11 @@ export async function mergeActionsToCode(
 ) {
   target
     .merge(...actions)
-    .then((result) => {})
-    .catch(handleError)
-    .finally(() => {
+    .then((result) => {
       target.sendToGrid();
-    });
+    })
+    .catch(handleError)
+    .finally(() => {});
 }
 
 export const isPasteActionsEnabled = derived(appClipboard, ($appClipboard) => {
@@ -275,10 +277,11 @@ export const isPasteActionsEnabled = derived(appClipboard, ($appClipboard) => {
 export async function pasteActions(target: GridEvent, index?: number) {
   target
     .pasteFromClipboard(index)
-    .then((result) => {})
+    .then((result) => {
+      target.sendToGrid();
+    })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Paste" },
@@ -300,11 +303,11 @@ export async function removeActions(
 ) {
   target
     .remove(...actions)
-    .then((result) => {})
+    .then((result) => {
+      target.sendToGrid();
+    })
     .catch(handleError)
     .finally(() => {
-      console.log(target);
-      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Remove" },
@@ -325,10 +328,10 @@ export async function cutActions(target: GridEvent, ...actions: GridAction[]) {
     .copyActions(...actions)
     .then(() => {
       target.remove(...actions);
+      target.sendToGrid();
     })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       Analytics.track({
         event: "Config Action",
         payload: { click: "Cut" },
@@ -348,9 +351,11 @@ export async function addActions(
       : target.insert.bind(target, index);
 
   actionMethod(...actions)
+    .then((result) => {
+      target.sendToGrid();
+    })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       for (const action of actions) {
         Analytics.track({
           event: "Config Action",
@@ -371,9 +376,11 @@ export async function replaceAction(
 ) {
   target
     .replace(a, b)
+    .then((result) => {
+      target.sendToGrid();
+    })
     .catch(handleError)
     .finally(() => {
-      target.sendToGrid();
       Analytics.track({
         event: "Replace Action",
         payload: { click: "Replace" },
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index ce0abe137..c5d5c6208 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -347,7 +347,11 @@ export class GridAction extends RuntimeNode<ActionData> {
   }
 
   public async updateData(data: ActionData): Promise<UpdateActionResult> {
-    const temp = this.data;
+    const old = {
+      short: this.data.short,
+      script: this.data.script,
+      name: this.data.name,
+    };
     const parent = this.parent as GridEvent;
 
     this.script = data.script;
@@ -362,9 +366,11 @@ export class GridAction extends RuntimeNode<ActionData> {
         info: (this.parent as GridEvent)?.getInfo(),
       });
     } else {
-      this.script = temp.script;
-      this.short = temp.short;
-      this.name = temp.name;
+      this.script = old.script;
+      this.short = old.short;
+      this.name = old.name;
+      this.notify(); //TODO: Refactor this out
+      this.notifyParent(); //TODO: Refactor this out
       return Promise.reject({
         value: false,
         text: Runtime.ErrorText.LENGTH_ERROR,

From 2be802c52953d92d8a8091ff56d2dab61510b77c Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Tue, 8 Oct 2024 18:35:09 +0200
Subject: [PATCH 34/42] Fixed playwright test

---
 playwright-tests/pages/modulePage.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/playwright-tests/pages/modulePage.js b/playwright-tests/pages/modulePage.js
index 0ace47984..e6e269e95 100644
--- a/playwright-tests/pages/modulePage.js
+++ b/playwright-tests/pages/modulePage.js
@@ -85,9 +85,7 @@ export class ModulePage {
       name: "✔️ Events are copied! (Click",
     });
 
-    this.characterLimitPasteToast = page.getByRole("button", {
-      name: "❌ Paste failed! Config limit",
-    });
+    this.characterLimitPasteToast = page.getByText("Modifications can not");
     this.characterLimitAddToast = page.getByText("Modifications can not");
     this.storeButton = page.getByRole("button", { name: "Store" });
   }

From cb455333b039028765bd59af6da983b6da2b9f61 Mon Sep 17 00:00:00 2001
From: gergelybartha <gergely.bartha95@gmail.com>
Date: Thu, 10 Oct 2024 11:31:47 +0200
Subject: [PATCH 35/42] gb Empty action block bug test

---
 playwright-tests/pages/configPage.js            | 4 ++++
 playwright-tests/tests/actionsOperation.spec.js | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/playwright-tests/pages/configPage.js b/playwright-tests/pages/configPage.js
index 0aeb98a5c..ec2fbdd15 100644
--- a/playwright-tests/pages/configPage.js
+++ b/playwright-tests/pages/configPage.js
@@ -83,6 +83,10 @@ export class ConfigPage {
     await this.addActionBlockButton.click();
   }
 
+  async openActionsOnEmptyElement() {
+    await this.noActionAddActionButton.click();
+  }
+
   async addActionBlock(category, blockName) {
     await this.blocks[category][blockName]["block"].click();
   }
diff --git a/playwright-tests/tests/actionsOperation.spec.js b/playwright-tests/tests/actionsOperation.spec.js
index 8ef42a797..98bc5009f 100644
--- a/playwright-tests/tests/actionsOperation.spec.js
+++ b/playwright-tests/tests/actionsOperation.spec.js
@@ -21,6 +21,15 @@ test.describe("Action Block Operations", () => {
     await connectModulePage.openVirtualModules();
     await connectModulePage.addModule("EN16");
   });
+
+  test("Add Action Block to empty element", async ({ page }) => {
+    await configPage.removeAllActions();
+    await configPage.openActionsOnEmptyElement();
+    await configPage.addActionBlock("midi", "MIDI");
+    const blockElement = configPage.blocks["midi"]["MIDI"]["block"];
+    await expect(blockElement).toBeVisible();
+  });
+
   test("Copy and Paste", async ({ page }) => {
     const expectedComment = "action operation";
     await configPage.removeAllActions();

From 33474811f50f29333c99ae2192665ec8ee28bc8f Mon Sep 17 00:00:00 2001
From: gergelybartha <gergely.bartha95@gmail.com>
Date: Thu, 10 Oct 2024 12:43:46 +0200
Subject: [PATCH 36/42] gb discard and clear config auto fetch test

---
 playwright-tests/pages/modulePage.js         | 15 +++++++++++++++
 playwright-tests/tests/virtualModule.spec.js | 16 ++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/playwright-tests/pages/modulePage.js b/playwright-tests/pages/modulePage.js
index e6e269e95..dcf51bf8d 100644
--- a/playwright-tests/pages/modulePage.js
+++ b/playwright-tests/pages/modulePage.js
@@ -88,12 +88,27 @@ export class ModulePage {
     this.characterLimitPasteToast = page.getByText("Modifications can not");
     this.characterLimitAddToast = page.getByText("Modifications can not");
     this.storeButton = page.getByRole("button", { name: "Store" });
+    this.clearButton = page.getByRole("button", { name: "Clear" });
+    this.confirmClearButton = page.getByRole("button", {
+      name: "Confirm",
+      exact: true,
+    });
+    this.discardAllButton = page.getByRole("button", { name: "Discard All" });
   }
 
   async storeConfig() {
     await this.storeButton.click();
   }
 
+  async clearConfig() {
+    await this.clearButton.click();
+    await this.confirmClearButton.click();
+  }
+
+  async discardConfig() {
+    await this.discardAllButton.click();
+  }
+
   async changeModule() {
     await this.changeModuleButton.click();
   }
diff --git a/playwright-tests/tests/virtualModule.spec.js b/playwright-tests/tests/virtualModule.spec.js
index f79ac72fa..9d51e89e6 100644
--- a/playwright-tests/tests/virtualModule.spec.js
+++ b/playwright-tests/tests/virtualModule.spec.js
@@ -2,14 +2,17 @@ import { test, expect } from "@playwright/test";
 import { ConnectModulePage } from "../pages/connectModulePage";
 import { ModulePage } from "../pages/modulePage";
 import { PAGE_PATH, mockNavigatorSerial } from "../utility";
+import { ConfigPage } from "../pages/configPage";
 
 let connectModulePage;
 let modulePage;
+let configPage;
 
 test.beforeEach(async ({ page }) => {
   await mockNavigatorSerial(page);
   connectModulePage = new ConnectModulePage(page);
   modulePage = new ModulePage(page);
+  configPage = new ConfigPage(page);
   await page.goto(PAGE_PATH);
   await connectModulePage.openVirtualModules();
 });
@@ -68,3 +71,16 @@ test.describe("Add extra module", () => {
     });
   }
 });
+
+test("Clear module fetching config automatically", async ({ page }) => {
+  await connectModulePage.addModule("EF44");
+  await modulePage.clearConfig();
+  await expect(page.locator("#cfg-2")).toBeVisible();
+});
+
+test("Discard module fetching config automatically", async () => {
+  await connectModulePage.addModule("EF44");
+  await configPage.removeAllActions();
+  await modulePage.discardConfig();
+  await expect(page.locator("#cfg-2")).toBeVisible();
+});

From 543389d95dcca7e565a769bda1c42a679c0bc358 Mon Sep 17 00:00:00 2001
From: gergelybartha <gergely.bartha95@gmail.com>
Date: Thu, 10 Oct 2024 12:47:08 +0200
Subject: [PATCH 37/42] gb simple copy and overwrite test

---
 playwright-tests/tests/actionsOperation.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/playwright-tests/tests/actionsOperation.spec.js b/playwright-tests/tests/actionsOperation.spec.js
index 98bc5009f..86c589c5b 100644
--- a/playwright-tests/tests/actionsOperation.spec.js
+++ b/playwright-tests/tests/actionsOperation.spec.js
@@ -115,6 +115,12 @@ test.describe("Element Actions", () => {
     );
   });
 
+  test("Overwrite element", async ({ page }) => {
+    await configPage.copyElement();
+    await configPage.overwriteElement();
+    await expect(page.locator("#cfg-2")).toBeVisible(); //default last action block is visible
+  });
+
   test("Discard with Event change", async ({ page }) => {
     const notVisibleComment = "Not Exist";
     await configPage.removeAllActions();

From 9ec247739ec7854713835ad914a81b3274bffa17 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 11 Oct 2024 18:28:46 +0200
Subject: [PATCH 38/42] Fixed QA issues

---
 .../overlays/PresetLoadOverlay.svelte         |  25 +--
 .../overlays/ProfileLoadOverlay.svelte        |  30 +--
 .../panels/profileCloud/ProfileCloud.svelte   | 174 ++++++++----------
 src/renderer/runtime/operations.ts            |  84 ++++++++-
 src/renderer/runtime/runtime.ts               |  37 ++--
 src/renderer/runtime/string-table.ts          |   6 +
 6 files changed, 202 insertions(+), 154 deletions(-)

diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
index 716d92726..efafb11fd 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/PresetLoadOverlay.svelte
@@ -7,6 +7,7 @@
   import { appSettings } from "../../../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { Analytics } from "../../../../runtime/analytics.js";
+  import { loadPreset } from "../../../../runtime/operations";
 
   export let device = undefined;
   export let visible = false;
@@ -37,12 +38,6 @@
   }
 
   function handlePresetLoad(e) {
-    Analytics.track({
-      event: "Preset Load Start",
-      payload: {},
-      mandatory: false,
-    });
-
     const ui = get(user_input);
     const element = runtime.findElement(
       device.dx,
@@ -51,25 +46,9 @@
       elementNumber
     );
     const preset = GridPresetData.createFromCloudData($selectedConfigStore);
-    element
-      .loadPreset(preset)
+    loadPreset(preset, element)
       .then(() => {
         loaded = true;
-        Analytics.track({
-          event: "Preset Load Success",
-          payload: {},
-          mandatory: false,
-        });
-
-        if (ui.dx !== device.dx || ui.dy !== device.dy) {
-          user_input.set({
-            dx: device.dx,
-            dy: device.dy,
-            pagenumber: ui.pagenumber,
-            elementnumber: elementNumber,
-            eventtype: ui.eventtype,
-          });
-        }
       })
       .catch((e) => {
         loaded = false;
diff --git a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
index 8b123ea07..9d0a9380d 100644
--- a/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
+++ b/src/renderer/main/grid-layout/grid-modules/overlays/ProfileLoadOverlay.svelte
@@ -6,6 +6,7 @@
   import { appSettings } from "../../../../runtime/app-helper.store";
   import { SvgIcon } from "@intechstudio/grid-uikit";
   import { GridProfileData } from "../../../../runtime/runtime.js";
+  import { loadProfile } from "../../../../runtime/operations";
 
   export let device = undefined;
   export let visible = false;
@@ -25,37 +26,16 @@
   }
 
   function handleProfileLoad(e) {
-    Analytics.track({
-      event: "Pro file Load Start",
-      payload: {},
-      mandatory: false,
-    });
-
-    state = LoadState.BUSY;
-
     const ui = get(user_input);
     const page = runtime.findPage(device.dx, device.dy, ui.pagenumber);
     const profile = GridProfileData.createFromCloudData($selectedConfigStore);
-    page
-      .loadProfile(profile)
+
+    state = LoadState.BUSY;
+    loadProfile(profile, page)
       .then(() => {
-        Analytics.track({
-          event: "Profile Load Success",
-          payload: {},
-          mandatory: false,
-        });
         state = LoadState.LOADED;
-        if (ui.dx !== device.dx || ui.dy !== device.dy) {
-          user_input.set({
-            dx: device.dx,
-            dy: device.dy,
-            pagenumber: ui.pagenumber,
-            elementnumber: ui.elementnumber,
-            eventtype: ui.eventtype,
-          });
-        }
       })
-      .catch((error) => {
+      .catch((e) => {
         state = LoadState.READY;
       });
   }
diff --git a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
index dee82c3c2..9f754e9db 100644
--- a/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
+++ b/src/renderer/main/panels/profileCloud/ProfileCloud.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+  import { GridModule } from "./../../../runtime/runtime.ts";
+  import { ProfileCloud } from "./../../../runtime/string-table";
+  import { RuntimeData } from "./../../../runtime/runtime";
+  import { user_input } from "./../../../runtime/runtime.store";
   import { GridElement } from "./../../../runtime/runtime";
   import { onDestroy, onMount } from "svelte";
   import { v4 as uuidv4 } from "uuid";
@@ -33,12 +37,13 @@
 
   $: handleRuntimeChange($runtime);
 
-  function handleRuntimeChange(rt) {
+  function handleRuntimeChange(rt: RuntimeData) {
     const compatible = new Set([]);
+    const ui = get(user_input);
     for (const module of rt.modules) {
-      const elements = module.pages[0].control_elements.map((e) => e.type);
+      const elements = module.findPage(ui.pagenumber).control_elements;
       compatible.add(module.type);
-      elements.forEach((item) => compatible.add(item));
+      elements.forEach((e) => compatible.add(e.type));
     }
     sendCompatibleTypes(Array.from(compatible));
   }
@@ -58,23 +63,19 @@
   $: handleUserInputChange($user_input);
 
   function handleUserInputChange(ui) {
-    const target = runtime.findEvent(
+    const module = runtime.findModule(ui.dx, ui.dy);
+    const element = runtime.findElement(
       ui.dx,
       ui.dy,
       ui.pagenumber,
-      ui.elementnumber,
-      ui.eventtype
+      ui.elementnumber
     );
 
-    if (typeof target === "undefined") {
+    if (typeof module === "undefined" || typeof element === "undefined") {
       return;
     }
 
-    selectedModuleType = runtime.modules.find(
-      (device) => device.dx == ui.dx && device.dy == ui.dy
-    ).type;
-    selectedControlElementType = target.type;
-    sendSelectedComponentInfos(selectedModuleType, selectedControlElementType);
+    sendSelectedComponentInfos(module.type, element.type);
   }
 
   let selectedModuleType = undefined;
@@ -86,7 +87,6 @@
       channel.onmessage = (event) =>
         func(event)
           .then((res) => {
-            console.log(func.name);
             channel.postMessage({ ok: true, data: res });
           })
           .catch((err) => {
@@ -196,88 +196,76 @@
     return await window.electron.configs.deleteConfig(path, "configs", config);
   }
 
-  async function handleGetCurrentConfigurationFromEditor(event) {
-    return new Promise((resolve) => {
-      const configType = event.data.configType;
-
-      const ui = get(user_input);
-      runtime
-        .findPage(ui.dx, ui.dy, ui.pagenumber)
-        .load()
-        .then(() => {
-          const ui = get(user_input);
-
-          let name = undefined;
-          let description = "Click here to add description";
-          let id = uuidv4();
-
-          let config: any = {
-            name: name,
-            id: id,
-            description: description,
-            configType: configType, // differentiator from different JSON files!
-            version: {
-              major: $appSettings.version.major,
-              minor: $appSettings.version.minor,
-              patch: $appSettings.version.patch,
-            },
-            localId: id,
-          };
+  async function handleGetCurrentConfigurationFromEditor(event): Promise<any> {
+    if (runtime.modules.length === 0) {
+      logger.set({
+        type: "fail",
+        mode: 0,
+        classname: "profileclouderror",
+        message: ProfileCloud.ErrorText.NO_DEVICE,
+      });
+      return Promise.reject(ProfileCloud.ErrorText.NO_DEVICE);
+    }
 
-          runtime.modules.forEach((d) => {
-            if (d.dx == ui.dx && d.dy == ui.dy) {
-              const page = d.pages.find((x) => x.pageNumber == ui.pagenumber);
-
-              if (configType === "profile") {
-                config.type = selectedModuleType;
-                config.configs = page.control_elements.map((element) => {
-                  return {
-                    controlElementNumber: element.elementIndex,
-                    events: element.events.map((ev) => {
-                      return {
-                        event: ev.type,
-                        config: ev.config,
-                      };
-                    }),
-                  };
-                });
-              } else if (configType === "preset") {
-                const element = page.control_elements.find(
-                  (elemet) => elemet.elementIndex === ui.elementnumber
-                );
-
-                const current = runtime.findEvent(
-                  ui.dx,
-                  ui.dy,
-                  ui.pagenumber,
-                  ui.elementnumber,
-                  ui.eventtype
-                );
-
-                config.type = (current.parent as GridElement).type;
-                config.configs = {
-                  events: element.events.map((ev) => {
-                    return {
-                      event: ev.type,
-                      config: ev.config,
-                    };
-                  }),
-                };
-              }
-            }
-          });
-          config.name = `New ${config.type} config`;
-          resolve(config);
-        })
-        .catch((e) => {
-          logger.set({
-            type: "fail",
-            mode: 0,
-            classname: "profileclouderror",
-            message: e,
-          });
+    const ui = get(user_input);
+    const configType = event.data.configType;
+    const id = uuidv4();
+
+    let config: any = {
+      name: undefined,
+      id: id,
+      description: "Click here to add description",
+      configType: configType, // differentiator from different JSON files!
+      version: {
+        major: $appSettings.version.major,
+        minor: $appSettings.version.minor,
+        patch: $appSettings.version.patch,
+      },
+      localId: id,
+    };
+
+    switch (configType) {
+      case "profile": {
+        const page = runtime.findPage(ui.dx, ui.dy, ui.pagenumber);
+        await page.load();
+        config.type = (page.parent as GridModule).type;
+        config.configs = page.control_elements.map((element) => {
+          return {
+            controlElementNumber: element.elementIndex,
+            events: element.events.map((ev) => {
+              return {
+                event: ev.type,
+                config: ev.toLua(),
+              };
+            }),
+          };
         });
-    });
+        break;
+      }
+      case "preset": {
+        const element = runtime.findElement(
+          ui.dx,
+          ui.dy,
+          ui.pagenumber,
+          ui.elementnumber
+        );
+        await element.load();
+
+        config.type = element.type;
+        config.configs = {
+          events: element.events.map((ev) => {
+            return {
+              event: ev.type,
+              config: ev.toLua(),
+            };
+          }),
+        };
+        break;
+      }
+    }
+
+    config.name = `New ${config.type} config`;
+    return Promise.resolve(config);
   }
 
   let profileCloudIsMounted = false;
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index 7de5afda5..421c79da1 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -1,6 +1,6 @@
 import { Analytics } from "./analytics";
 import { appClipboard, ClipboardData, ClipboardKey } from "./clipboard.store";
-import { logger, runtime } from "./runtime.store";
+import { logger, runtime, user_input } from "./runtime.store";
 import {
   GridOperationResult,
   ElementData,
@@ -11,6 +11,10 @@ import {
   SendToGridResult,
   GridOperationType,
   InsertActionsResult,
+  GridPage,
+  GridProfileData,
+  GridModule,
+  GridPresetData,
 } from "./runtime";
 import { get, derived } from "svelte/store";
 import { config_panel_blocks } from "../main/panels/configuration/Configuration";
@@ -388,3 +392,81 @@ export async function replaceAction(
       });
     });
 }
+
+export async function loadProfile(
+  profile: GridProfileData,
+  target: GridPage
+): Promise<void> {
+  Analytics.track({
+    event: "Pro file Load Start",
+    payload: {},
+    mandatory: false,
+  });
+
+  target
+    .loadProfile(profile)
+    .then(() => {
+      const ui = get(user_input);
+      const module = target.parent as GridModule;
+      if (ui.dx !== module.dx || ui.dy !== module.dy) {
+        user_input.set({
+          dx: module.dx,
+          dy: module.dy,
+          pagenumber: target.pageNumber,
+          elementnumber: ui.elementnumber,
+          eventtype: ui.eventtype,
+        });
+      }
+      return Promise.resolve();
+    })
+    .catch((e) => {
+      handleError(e);
+      return Promise.reject(e);
+    })
+    .finally(() => {
+      Analytics.track({
+        event: "Profile Load Success",
+        payload: {},
+        mandatory: false,
+      });
+    });
+}
+
+export async function loadPreset(
+  preset: GridPresetData,
+  target: GridElement
+): Promise<void> {
+  Analytics.track({
+    event: "Preset Load Start",
+    payload: {},
+    mandatory: false,
+  });
+
+  target
+    .loadPreset(preset)
+    .then(() => {
+      const ui = get(user_input);
+      const page = target.parent as GridPage;
+      const module = page.parent as GridModule;
+      if (ui.dx !== module.dx || ui.dy !== module.dy) {
+        user_input.set({
+          dx: module.dx,
+          dy: module.dy,
+          pagenumber: page.pageNumber,
+          elementnumber: target.elementIndex,
+          eventtype: ui.eventtype,
+        });
+      }
+    })
+    .catch((e) => {
+      handleError(e);
+      return Promise.reject(e);
+    })
+    .finally(() => {
+      Analytics.track({
+        event: "Preset Load Success",
+        payload: {},
+        mandatory: false,
+      });
+    });
+}
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index c5d5c6208..aa9460e05 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -480,13 +480,13 @@ export class EventData extends NodeData {
 
   public getInfo(): EventInfo {
     const element = this.parent as GridElement;
-    const page = element.parent as GridPage;
-    const module = page.parent as GridModule;
+    const page = element?.parent as GridPage;
+    const module = page?.parent as GridModule;
     return {
       event: { name: NumberToEventType(this.type) },
-      element: { type: element.type, index: element.elementIndex },
-      page: page.pageNumber,
-      module: { type: module.type, dx: module.dx, dy: module.dy },
+      element: { type: element?.type, index: element?.elementIndex },
+      page: page?.pageNumber,
+      module: { type: module?.type, dx: module?.dx, dy: module?.dy },
     };
   }
 }
@@ -1222,13 +1222,9 @@ export class GridPage extends RuntimeNode<PageData> {
   public async load() {
     const promises: Array<Promise<void>> = [];
     for (const element of this.control_elements) {
-      promises.push(
-        new Promise((resolve) => {
-          element.load().then(() => resolve());
-        })
-      );
+      promises.push(element.load());
     }
-    Promise.all(promises);
+    return Promise.all(promises);
   }
 
   // Getters
@@ -1665,7 +1661,15 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
             const page = module.findPage(index);
             page.unload();
           }
-          resolve();
+          const ui = get(user_input);
+          const event = this.findEvent(
+            ui.dx,
+            ui.dy,
+            ui.pagenumber,
+            ui.elementnumber,
+            ui.eventtype
+          );
+          event.load().then(() => resolve());
         })
         .catch((e) => {
           console.warn(e);
@@ -1688,6 +1692,15 @@ export class GridRuntime extends RuntimeNode<RuntimeData> {
           for (const module of this.modules) {
             const page = module.findPage(index);
             page.unload();
+            const ui = get(user_input);
+            const event = this.findEvent(
+              ui.dx,
+              ui.dy,
+              ui.pagenumber,
+              ui.elementnumber,
+              ui.eventtype
+            );
+            event.load().then(() => resolve());
           }
           resolve();
         })
diff --git a/src/renderer/runtime/string-table.ts b/src/renderer/runtime/string-table.ts
index 08e6149d4..7b635a775 100644
--- a/src/renderer/runtime/string-table.ts
+++ b/src/renderer/runtime/string-table.ts
@@ -5,3 +5,9 @@ export namespace Runtime {
     SYNTAX_ERROR = `Action(s) with syntax error(s) can not be merged!`,
   }
 }
+
+export namespace ProfileCloud {
+  export enum ErrorText {
+    NO_DEVICE = `No device is connected.`,
+  }
+}

From 757dc42abe704dec41ca197a035f78def066cb19 Mon Sep 17 00:00:00 2001
From: elsoazemelet <elsoazemelet@gmail.com>
Date: Fri, 11 Oct 2024 18:51:01 +0200
Subject: [PATCH 39/42] Fixed QA issues

---
 src/renderer/main/panels/configuration/Configuration.svelte | 2 ++
 src/renderer/runtime/operations.ts                          | 2 ++
 src/renderer/runtime/runtime.ts                             | 3 ++-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/renderer/main/panels/configuration/Configuration.svelte b/src/renderer/main/panels/configuration/Configuration.svelte
index 93bd23031..fce1c7467 100644
--- a/src/renderer/main/panels/configuration/Configuration.svelte
+++ b/src/renderer/main/panels/configuration/Configuration.svelte
@@ -344,6 +344,8 @@
               <AddAction
                 index={0}
                 text={"There are no actions configured on this event."}
+                on:paste={handlePaste}
+                on:new-config={handleAddConfig}
               />
             </div>
           {:else}
diff --git a/src/renderer/runtime/operations.ts b/src/renderer/runtime/operations.ts
index 421c79da1..02526ee4f 100644
--- a/src/renderer/runtime/operations.ts
+++ b/src/renderer/runtime/operations.ts
@@ -142,6 +142,8 @@ export async function overwriteElement(target: GridElement) {
     return;
   }
 
+  console.log(clipboard.payload);
+
   target
     .overwrite(clipboard.payload as ElementData)
     .then((result) => {
diff --git a/src/renderer/runtime/runtime.ts b/src/renderer/runtime/runtime.ts
index aa9460e05..1545e7664 100644
--- a/src/renderer/runtime/runtime.ts
+++ b/src/renderer/runtime/runtime.ts
@@ -835,11 +835,12 @@ export class GridEvent extends RuntimeNode<EventData> {
       });
     }
 
-    this.clear();
     const copy = data.config.map(
       (e) =>
         new GridAction(undefined, new ActionData(e.short, e.script, e.name))
     );
+
+    this.clear();
     this.push(...copy);
 
     return Promise.resolve({

From c89488224362a794c329742289c51fc2cbee9f7c Mon Sep 17 00:00:00 2001
From: gergelybartha <gergely.bartha95@gmail.com>
Date: Mon, 14 Oct 2024 10:41:41 +0200
Subject: [PATCH 40/42] gb fix discard test

---
 playwright-tests/tests/virtualModule.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright-tests/tests/virtualModule.spec.js b/playwright-tests/tests/virtualModule.spec.js
index 9d51e89e6..fa36d73e5 100644
--- a/playwright-tests/tests/virtualModule.spec.js
+++ b/playwright-tests/tests/virtualModule.spec.js
@@ -78,7 +78,7 @@ test("Clear module fetching config automatically", async ({ page }) => {
   await expect(page.locator("#cfg-2")).toBeVisible();
 });
 
-test("Discard module fetching config automatically", async () => {
+test("Discard module fetching config automatically", async ({ page }) => {
   await connectModulePage.addModule("EF44");
   await configPage.removeAllActions();
   await modulePage.discardConfig();

From 656060bde6a274cffc20e79d9435888e76750aa5 Mon Sep 17 00:00:00 2001
From: gergelybartha <gergely.bartha95@gmail.com>
Date: Mon, 14 Oct 2024 11:10:01 +0200
Subject: [PATCH 41/42] gb fix action block empty element

---
 playwright-tests/tests/actionsOperation.spec.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/playwright-tests/tests/actionsOperation.spec.js b/playwright-tests/tests/actionsOperation.spec.js
index baf5494f3..5ba47440e 100644
--- a/playwright-tests/tests/actionsOperation.spec.js
+++ b/playwright-tests/tests/actionsOperation.spec.js
@@ -22,12 +22,13 @@ test.describe("Action Block Operations", () => {
     await connectModulePage.addModule("EN16");
   });
 
-  test("Add Action Block to empty element", async ({ page }) => {
+  test("Add Action Block to empty element", async () => {
     await configPage.removeAllActions();
     await configPage.openActionsOnEmptyElement();
-    await configPage.addActionBlock("midi", "MIDI");
-    const blockElement = configPage.blocks["midi"]["MIDI"]["block"];
-    await expect(blockElement).toBeVisible();
+    await configPage.addActionBlock("led", "Color");
+    await expect(
+      configPage.blocks["led"]["Color"]["elements"]["Blue"]
+    ).toBeVisible();
   });
 
   test("Copy and Paste", async ({ page }) => {

From d626eb654ac9018c848878f6f32a824d498fbf5e Mon Sep 17 00:00:00 2001
From: gergelybartha <gergely.bartha95@gmail.com>
Date: Mon, 14 Oct 2024 11:21:38 +0200
Subject: [PATCH 42/42] gb fix nrpn

---
 playwright-tests/tests/blocksTests.spec.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/playwright-tests/tests/blocksTests.spec.js b/playwright-tests/tests/blocksTests.spec.js
index aa4b8d785..8d71d2bc0 100644
--- a/playwright-tests/tests/blocksTests.spec.js
+++ b/playwright-tests/tests/blocksTests.spec.js
@@ -87,6 +87,7 @@ test.describe("NRPN converting", () => {
     await configPage.openAndAddActionBlock("midi", "MIDI NRPN");
     await configPage.writeActionBlockField("midi", "MIDI NRPN", "MSB", "1+2");
     await configPage.writeActionBlockField("midi", "MIDI NRPN", "LSB", "3");
+    await configPage.writeActionBlockField("midi", "MIDI NRPN", "LSB", "3");
     await configPage.selectElementEvent("Button");
     const actualValue = await configPage.getActionBlockFieldValue(
       "midi",
@@ -132,6 +133,12 @@ test.describe("NRPN converting", () => {
       "MSB",
       "x//128"
     );
+    await configPage.writeActionBlockField(
+      "midi",
+      "MIDI NRPN",
+      "LSB",
+      "x//128"
+    );
     await configPage.writeActionBlockField("midi", "MIDI NRPN", "LSB", "x%128");
     await configPage.selectElementEvent("Button");
     const actualValue = await configPage.getActionBlockFieldValue(