diff --git a/src/renderer/config-blocks/VarGlobal.svelte b/src/renderer/config-blocks/VarGlobal.svelte
index 1f05e066..281aaf66 100644
--- a/src/renderer/config-blocks/VarGlobal.svelte
+++ b/src/renderer/config-blocks/VarGlobal.svelte
@@ -22,114 +22,51 @@
   };
 </script>
 
-<script>
-  import { createEventDispatcher, onDestroy, onMount } from "svelte";
-  import { fly } from "svelte/transition";
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
   import { GridScript } from "@intechstudio/grid-protocol";
-
-  import { parenthesis } from "./_validators.js";
-
+  import { parenthesis, Validator } from "./_validators.js";
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
-
-  import { checkVariableName } from "../validators/local_validator.mjs";
-
-  import { find_forbidden_identifiers } from "../runtime/monaco-helper";
-  let error_messsage = "";
-
-  export let config;
-  export let index;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
-  import { MoltenPushButton } from "@intechstudio/grid-uikit";
+  import { MeltCombo, MoltenPushButton } from "@intechstudio/grid-uikit";
+  import { ActionData, GridAction } from "../runtime/runtime.js";
+  import { Grid } from "../lib/_utils.js";
 
-  let sidebarWidth;
+  export let config: GridAction;
 
   const dispatch = createEventDispatcher();
 
-  /**
-   * Globals specific variables
-   * @globals []
-   */
-
-  let scriptSegments = [{ variable: "", value: "" }];
+  type ScriptSegment = Grid.VariableBlock.ScriptSegment;
 
-  let codeEditorContent = "";
-  let committedCode = "";
-  let parenthesisError = 0;
-  let variableNameError = 0;
-
-  export let commitState = 1;
+  let scriptSegments: ScriptSegment[];
+  let errorText = "";
 
   $: handleConfigChange($config);
 
-  function handleConfigChange(config) {
-    scriptSegments = globalsToConfig({ script: config.script });
+  function handleConfigChange(config: ActionData) {
+    // this works differently from normal _utils...
+    scriptSegments = globalsToConfig(config.script);
+    updateErrorText();
   }
 
-  function saveChangesOnInput(e, i, k) {
-    scriptSegments[i][k] = e;
-
-    codeEditorContent = globalArrayToScript(scriptSegments);
-
-    let variableNameValidity = [];
-    scriptSegments.forEach((s) => {
-      variableNameValidity.push(checkVariableName(s.variable));
-    });
-
-    if (variableNameValidity.includes(false)) {
-      variableNameError = 1;
-    } else {
-      variableNameError = 0;
-    }
-
-    if (parenthesis(codeEditorContent)) {
-      parenthesisError = 0;
-    } else {
-      parenthesisError = 1;
-    }
+  function updateErrorText() {
+    errorText = Grid.VariableBlock.getError(scriptSegments).text;
   }
 
-  function humanizeGlobals(segments) {
+  function humanizeGlobals(segments: ScriptSegment[]): ScriptSegment[] {
     return segments.map((elem) => {
       elem.value = GridScript.humanize(elem.value);
       return elem;
     });
   }
 
-  let rerenderList = 0;
-
   function sendData() {
-    error_messsage = "";
-
-    let outputCode = codeEditorContent;
-
-    let forbiddenList = find_forbidden_identifiers(outputCode);
-
-    if (forbiddenList.length > 0) {
-      const uniqueForbiddenList = [...new Set(forbiddenList)];
-      const readable = uniqueForbiddenList.toString().replaceAll(",", ", ");
-      error_messsage =
-        "Reserved identifiers [" + readable + "] cannot be used!";
-      return;
-    }
-
-    if (parenthesis(outputCode)) {
-      committedCode = outputCode;
-      outputCode = GridScript.shortify(outputCode);
-      dispatch("update-action", { short: "g", script: outputCode });
-      dispatch("sync");
-      commitState = 0;
-    }
-
-    rerenderList++;
-  }
-
-  $: {
-    if (codeEditorContent.trim() == committedCode.trim()) {
-      commitState = 0;
-    } else {
-      commitState = 1;
-    }
+    const script = globalArrayToScript(scriptSegments);
+    updateErrorText();
+    dispatch("update-action", {
+      short: "g",
+      script: GridScript.shortify(script),
+    });
   }
 
   function globalArrayToScript(arr) {
@@ -141,11 +78,11 @@
     return script;
   }
 
-  function globalsToConfig({ script }) {
+  function globalsToConfig(script: string) {
     if (parenthesis(script)) {
       // this had to be moved out of globals function, as array refresh was killed by $ with scriptSegments..
-      let _variable_array = script.split("=")[0];
-      let _value_array = script.split("=")[1];
+
+      const _value_array = script.split("=")[1];
 
       let slice_pos = [];
       let _part = "";
@@ -163,7 +100,7 @@
         }
       });
 
-      _variable_array = _variable_array.split(",");
+      const _variable_array = script.split("=")[0].split(",");
 
       let arr = [];
 
@@ -181,126 +118,90 @@
   }
 
   function addGlobalVariable() {
-    scriptSegments = [...scriptSegments, { variable: "", value: "" }];
-    codeEditorContent = globalArrayToScript(scriptSegments);
+    scriptSegments.push({ variable: "", value: "" });
+    sendData();
   }
 
-  function removeGlobalVariable(i) {
+  function removeGlobalVariable(i: number) {
     scriptSegments.splice(i, 1);
-    scriptSegments = [...scriptSegments];
-    codeEditorContent = globalArrayToScript(scriptSegments);
     sendData();
   }
-
-  onMount(() => {});
 </script>
 
-<svelte:window bind:innerWidth={sidebarWidth} />
-
-<config-global-definitions
-  class="{$$props.class} flex flex-col w-full p-2 pointer-events-auto"
->
-  <div class="flex justify-between items-center my-2 px-2">
-    {#if variableNameError}
-      <div class="text-sm text-red-500">Variable name error!</div>
-    {/if}
-    {#if error_messsage !== ""}
-      <div class="text-sm text-red-500">{error_messsage}</div>
-    {/if}
-    {#key commitState}
-      <div
-        in:fly|global={{ x: -5, duration: 200 }}
-        class="{commitState ? 'text-yellow-600' : 'text-green-500'} text-sm"
+<container>
+  <div class="flex flex-col gap-2 w-full px-2 py-4 pointer-events-auto">
+    <div class="flex flex-col">
+      <span class="text-white text-sm">Global Variables:</span>
+      <span class="text-sm text-error" class:hidden={errorText === "OK"}
+        >Error: {errorText}</span
       >
-        {commitState ? "Unsaved changes!" : "Synced with Grid!"}
-      </div>
-    {/key}
-    {#if parenthesisError}
-      <div class="text-sm text-red-500">Parenthesis must be closed!</div>
-    {/if}
-    <MoltenPushButton
-      click={sendData}
-      disabled={Boolean(!commitState || parenthesisError || variableNameError)}
-      text={"Commit"}
-      style={"accept"}
-    />
-  </div>
-
-  <div class="w-full flex flex-col p-2">
-    {#each scriptSegments as script, i (i)}
-      <div class="w-full h-full flex global-defs py-2">
-        <div class="w-2/12 pr-1">
-          <input
-            class="py-1 pl-1 w-full h-full mr-2 bg-secondary text-white"
-            placeholder="variable name"
-            value={script.variable}
+    </div>
+
+    <div class="flex flex-col gap-2">
+      {#each scriptSegments as script, i}
+        <div class="grid grid-cols-[25%_1fr_auto] gap-2 items-center">
+          <MeltCombo
+            title={" "}
+            bind:value={script.variable}
+            validator={(e) => {
+              return new Validator(e).NotEmpty().Result();
+            }}
+            on:validator={(e) => {
+              const data = e.detail;
+              dispatch("validator", data);
+            }}
             on:input={(e) => {
-              saveChangesOnInput(e.target.value, i, "variable");
+              sendData();
+            }}
+            on:change={() => {
+              dispatch("sync");
             }}
           />
-        </div>
-        <div class="w-9/12 pl-1">
-          <div class="w-full h-full bg-secondary">
-            {#key rerenderList}
-              <LineEditor
-                on:input={(e) => {
-                  saveChangesOnInput(e.detail.script, i, "value");
-                }}
-                action={config}
-                {sidebarWidth}
-                value={script.value}
-              />
-            {/key}
-          </div>
-        </div>
-        <div class="w-1/12 pl-1 flex items-center justify-center">
-          {#if i !== 0}
-            <button
-              on:click={() => {
-                removeGlobalVariable(i);
+
+          <div class="border border-black flex items-center flex-grow h-full">
+            <LineEditor
+              on:input={(e) => {
+                script.value = e.detail.script ?? "";
+                sendData();
               }}
-              class="flex items-center group cursor-pointer pl-1"
+              on:change={() => dispatch("sync")}
+              action={config}
+              value={script.value}
+            />
+          </div>
+
+          <button
+            class:invisible={i === 0}
+            on:click={() => {
+              removeGlobalVariable(i);
+            }}
+            class="flex group cursor-pointer"
+          >
+            <svg
+              class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
+              viewBox="0 0 29 29"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
-                viewBox="0 0 29 29"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
-                />
-                <path
-                  d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
-                />
-              </svg>
-            </button>
-          {:else}
-            <div class=" flex invisible items-center group cursor-pointer pl-1">
-              <div class="w-5 h-5 p-1">x</div>
-            </div>
-          {/if}
+              <path
+                d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
+              />
+              <path
+                d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
+              />
+            </svg>
+          </button>
         </div>
-      </div>
-    {/each}
-  </div>
-
-  <div class="w-full flex group p-2">
-    <button
-      on:click={() => {
-        addGlobalVariable();
-      }}
-      class="group-hover:border-pick cursor-pointer group-hover:bg-select-saturate-10 border-secondary transition-colors duration-300 w-full border-l-4 text-white pl-4 py-0.5"
-    >
-      Add global variable...
-    </button>
-  </div>
+      {/each}
+    </div>
 
-  <SendFeedback feedback_context="Globals" class="mt-2 text-sm text-gray-500" />
-</config-global-definitions>
+    <div class="self-center">
+      <MoltenPushButton
+        click={addGlobalVariable}
+        text={"Add New Global Variable"}
+      />
+    </div>
 
-<style>
-  .global-defs:first-child {
-    padding-top: 0;
-  }
-</style>
+    <SendFeedback feedback_context="Globals" class="text-sm text-gray-500" />
+  </div>
+</container>
diff --git a/src/renderer/config-blocks/VarLocals.svelte b/src/renderer/config-blocks/VarLocals.svelte
index e4a82674..741ede1a 100644
--- a/src/renderer/config-blocks/VarLocals.svelte
+++ b/src/renderer/config-blocks/VarLocals.svelte
@@ -39,6 +39,7 @@
   type ScriptSegment = Grid.VariableBlock.ScriptSegment;
 
   let scriptSegments: ScriptSegment[];
+  let errorText = "";
 
   $: handleConfigChange($config);
 
@@ -62,9 +63,13 @@
     sendData();
   }
 
-  let errorText = "";
+  function humanizeLocals(segments: ScriptSegment[]): ScriptSegment[] {
+    return segments.map((elem) => {
+      elem.value = GridScript.humanize(elem.value);
+      return elem;
+    });
+  }
 
-  // Commit button
   function sendData() {
     const script = localArrayToScript(scriptSegments);
     updateErrorText();
@@ -84,13 +89,6 @@
     return script;
   }
 
-  function humanizeLocals(segments: ScriptSegment[]): ScriptSegment[] {
-    return segments.map((elem) => {
-      elem.value = GridScript.humanize(elem.value);
-      return elem;
-    });
-  }
-
   function localsToConfig(script: string): ScriptSegment[] {
     if (parenthesis(script)) {
       // this had to be moved out of locals function, as array refresh was killed by $ with scriptSegments..
@@ -130,79 +128,80 @@
   }
 </script>
 
-<config-local-definitions
-  class="flex flex-col gap-2 w-full px-2 py-4 pointer-events-auto"
->
-  <div class="flex flex-col">
-    <span class="text-white text-sm">Local Variables:</span>
-    <span class="text-sm text-error" class:hidden={errorText === "OK"}
-      >Error: {errorText}</span
-    >
-  </div>
-
-  <div class="flex flex-col gap-2">
-    {#each scriptSegments as script, i}
-      <div class="grid grid-cols-[25%_1fr_auto] gap-2 items-center">
-        <MeltCombo
-          title={" "}
-          bind:value={script.variable}
-          validator={(e) => {
-            return new Validator(e).NotEmpty().Result();
-          }}
-          on:validator={(e) => {
-            const data = e.detail;
-            dispatch("validator", data);
-          }}
-          on:input={(e) => {
-            sendData();
-          }}
-          on:change={() => {
-            dispatch("sync");
-          }}
-        />
-
-        <div class="border border-black flex items-center flex-grow h-full">
-          <LineEditor
+<container>
+  <div class="flex flex-col gap-2 w-full px-2 py-4 pointer-events-auto">
+    <div class="flex flex-col">
+      <span class="text-white text-sm">Local Variables:</span>
+      <span class="text-sm text-error" class:hidden={errorText === "OK"}
+        >Error: {errorText}</span
+      >
+    </div>
+
+    <div class="flex flex-col gap-2">
+      {#each scriptSegments as script, i}
+        <div class="grid grid-cols-[25%_1fr_auto] gap-2 items-center">
+          <MeltCombo
+            title={" "}
+            bind:value={script.variable}
+            validator={(e) => {
+              return new Validator(e).NotEmpty().Result();
+            }}
+            on:validator={(e) => {
+              const data = e.detail;
+              dispatch("validator", data);
+            }}
             on:input={(e) => {
-              script.value = e.detail.script ?? "";
               sendData();
             }}
-            on:change={() => dispatch("sync")}
-            action={config}
-            value={script.value}
+            on:change={() => {
+              dispatch("sync");
+            }}
           />
-        </div>
 
-        <button
-          class:invisible={i === 0}
-          on:click={() => {
-            removeLocalVariable(i);
-          }}
-          class="flex group cursor-pointer"
-        >
-          <svg
-            class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
-            viewBox="0 0 29 29"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
+          <div class="border border-black flex items-center flex-grow h-full">
+            <LineEditor
+              on:input={(e) => {
+                script.value = e.detail.script ?? "";
+                sendData();
+              }}
+              on:change={() => dispatch("sync")}
+              action={config}
+              value={script.value}
             />
-            <path
-              d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
-            />
-          </svg>
-        </button>
-      </div>
-    {/each}
-  </div>
+          </div>
 
-  <MoltenPushButton
-    click={addLocalVariable}
-    text={"Add New Local"}
-    snap={"full"}
-  />
+          <button
+            class:invisible={i === 0}
+            on:click={() => {
+              removeLocalVariable(i);
+            }}
+            class="flex group cursor-pointer"
+          >
+            <svg
+              class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
+              viewBox="0 0 29 29"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
+              />
+              <path
+                d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
+              />
+            </svg>
+          </button>
+        </div>
+      {/each}
+    </div>
+
+    <div class="self-center">
+      <MoltenPushButton
+        click={addLocalVariable}
+        text={"Add New Local Variable"}
+      />
+    </div>
 
-  <SendFeedback feedback_context="Locals" class="text-sm text-gray-500" />
-</config-local-definitions>
+    <SendFeedback feedback_context="Locals" class="text-sm text-gray-500" />
+  </div>
+</container>
diff --git a/src/renderer/config-blocks/VarSelf.svelte b/src/renderer/config-blocks/VarSelf.svelte
index 04f20072..f9926482 100644
--- a/src/renderer/config-blocks/VarSelf.svelte
+++ b/src/renderer/config-blocks/VarSelf.svelte
@@ -22,115 +22,61 @@
   };
 </script>
 
-<script>
-  import { createEventDispatcher, onDestroy, onMount } from "svelte";
-  import { fly } from "svelte/transition";
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
   import { GridScript } from "@intechstudio/grid-protocol";
-
-  import { parenthesis } from "./_validators.js";
-
+  import { parenthesis, Validator } from "./_validators.js";
   import SendFeedback from "../main/user-interface/SendFeedback.svelte";
-
-  import { checkVariableName } from "../validators/local_validator.mjs";
-
-  import { find_forbidden_identifiers } from "../runtime/monaco-helper";
-  let error_messsage = "";
-
-  export let config;
-  export let index;
-
   import LineEditor from "../main/user-interface/LineEditor.svelte";
-  import { MoltenPushButton } from "@intechstudio/grid-uikit";
+  import { MeltCombo, MoltenPushButton } from "@intechstudio/grid-uikit";
+  import { ActionData, GridAction } from "../runtime/runtime.js";
+  import { Grid } from "../lib/_utils.js";
 
-  let sidebarWidth;
+  export let config: GridAction;
 
   const dispatch = createEventDispatcher();
 
-  /**
-   * Selfs specific variables
-   * @selfs []
-   */
-
-  let scriptSegments = [{ variable: "", value: "" }];
-
-  let codeEditorContent = "";
-  let committedCode = "";
-  let parenthesisError = 0;
-  let variableNameError = 0;
+  type ScriptSegment = Grid.VariableBlock.ScriptSegment;
 
-  export let commitState = 1;
+  let scriptSegments: ScriptSegment[];
+  let errorText = "";
 
   $: handleConfigChange($config);
 
-  function handleConfigChange(config) {
+  function handleConfigChange(config: ActionData) {
     // this works differently from normal _utils...
-    scriptSegments = selfsToConfig({ script: config.script });
+    scriptSegments = selfsToConfig(config.script);
+    updateErrorText();
   }
 
-  function saveChangesOnInput(e, i, k) {
-    scriptSegments[i][k] = e;
-
-    codeEditorContent = selfArrayToScript(scriptSegments);
-
-    let variableNameValidity = [];
-    scriptSegments.forEach((s) => {
-      variableNameValidity.push(checkVariableName(s.variable));
-    });
+  function updateErrorText() {
+    errorText = Grid.VariableBlock.getError(scriptSegments).text;
+  }
 
-    if (variableNameValidity.includes(false)) {
-      variableNameError = 1;
-    } else {
-      variableNameError = 0;
-    }
+  function addSelfVariable() {
+    scriptSegments.push({ variable: "", value: "" });
+    sendData();
+  }
 
-    if (parenthesis(codeEditorContent)) {
-      parenthesisError = 0;
-    } else {
-      parenthesisError = 1;
-    }
+  function removeSelfVariable(i: number) {
+    scriptSegments.splice(i, 1);
+    sendData();
   }
 
-  function humanizeSelfs(segments) {
+  function humanizeSelfs(segments: ScriptSegment[]): ScriptSegment[] {
     return segments.map((elem) => {
       elem.value = GridScript.humanize(elem.value);
       return elem;
     });
   }
 
-  let rerenderList = 0;
-
   function sendData() {
-    error_messsage = "";
-
-    let outputCode = codeEditorContent;
-
-    let forbiddenList = find_forbidden_identifiers(outputCode);
-
-    if (forbiddenList.length > 0) {
-      const uniqueForbiddenList = [...new Set(forbiddenList)];
-      const readable = uniqueForbiddenList.toString().replaceAll(",", ", ");
-      error_messsage =
-        "Reserved identifiers [" + readable + "] cannot be used!";
-      return;
-    }
-
-    if (parenthesis(outputCode)) {
-      committedCode = outputCode;
-      outputCode = GridScript.shortify(outputCode);
-      dispatch("update-action", { short: "s", script: outputCode });
-      dispatch("sync");
-      commitState = 0;
-    }
-
-    rerenderList++;
-  }
-
-  $: {
-    if (codeEditorContent.trim() == committedCode.trim()) {
-      commitState = 0;
-    } else {
-      commitState = 1;
-    }
+    const script = selfArrayToScript(scriptSegments);
+    updateErrorText();
+    dispatch("update-action", {
+      short: "s",
+      script: GridScript.shortify(script),
+    });
   }
 
   function selfArrayToScript(arr) {
@@ -142,11 +88,10 @@
     return script;
   }
 
-  function selfsToConfig({ script }) {
+  function selfsToConfig(script: string) {
     if (parenthesis(script)) {
       // this had to be moved out of selfs function, as array refresh was killed by $ with scriptSegments..
-      let _variable_array = script.split("=")[0];
-      let _value_array = script.split("=")[1];
+      const _value_array = script.split("=")[1];
 
       let slice_pos = [];
       let _part = "";
@@ -164,11 +109,12 @@
         }
       });
 
-      _variable_array = _variable_array.split(",");
-
-      _variable_array = _variable_array.map((e) => {
-        return e.split(".")[1];
-      });
+      const _variable_array = script
+        .split("=")[0]
+        .split(",")
+        .map((e) => {
+          return e.split(".")[1];
+        });
 
       let arr = [];
 
@@ -184,128 +130,82 @@
       return arr;
     }
   }
-
-  function addSelfVariable() {
-    scriptSegments = [...scriptSegments, { variable: "", value: "" }];
-    codeEditorContent = selfArrayToScript(scriptSegments);
-  }
-
-  function removeSelfVariable(i) {
-    scriptSegments.splice(i, 1);
-    scriptSegments = [...scriptSegments];
-    codeEditorContent = selfArrayToScript(scriptSegments);
-    sendData();
-  }
-
-  onMount(() => {});
 </script>
 
-<svelte:window bind:innerWidth={sidebarWidth} />
-
-<config-self-definitions
-  class="{$$props.class} flex flex-col w-full p-2 pointer-events-auto"
->
-  <div class="flex justify-between items-center my-2 px-2">
-    {#if variableNameError}
-      <div class="text-sm text-red-500">Variable name error!</div>
-    {/if}
-    {#if error_messsage !== ""}
-      <div class="text-sm text-red-500">{error_messsage}</div>
-    {/if}
-    {#key commitState}
-      <div
-        in:fly|global={{ x: -5, duration: 200 }}
-        class="{commitState ? 'text-yellow-600' : 'text-green-500'} text-sm"
+<container>
+  <div class="flex flex-col gap-2 w-full px-2 py-4 pointer-events-auto">
+    <div class="flex flex-col">
+      <span class="text-white text-sm">Self Variables:</span>
+      <span class="text-sm text-error" class:hidden={errorText === "OK"}
+        >Error: {errorText}</span
       >
-        {commitState ? "Unsaved changes!" : "Synced with Grid!"}
-      </div>
-    {/key}
-    {#if parenthesisError}
-      <div class="text-sm text-red-500">Parenthesis must be closed!</div>
-    {/if}
-    <MoltenPushButton
-      click={sendData}
-      disabled={Boolean(!commitState || parenthesisError || variableNameError)}
-      text={"Commit"}
-      style={"accept"}
-    />
-  </div>
-
-  <div class="w-full flex flex-col p-2">
-    {#each scriptSegments as script, i (i)}
-      <div class="w-full h-full flex self-defs py-2">
-        <div class="w-2/12 pr-1">
-          <input
-            class="py-1 pl-1 w-full h-full mr-2 bg-secondary text-white"
-            placeholder="variable name"
-            value={script.variable}
+    </div>
+
+    <div class="flex flex-col gap-2">
+      {#each scriptSegments as script, i}
+        <div class="grid grid-cols-[25%_1fr_auto] gap-2 items-center">
+          <MeltCombo
+            title={" "}
+            bind:value={script.variable}
+            validator={(e) => {
+              return new Validator(e).NotEmpty().Result();
+            }}
+            on:validator={(e) => {
+              const data = e.detail;
+              dispatch("validator", data);
+            }}
             on:input={(e) => {
-              saveChangesOnInput(e.target.value, i, "variable");
+              sendData();
+            }}
+            on:change={() => {
+              dispatch("sync");
             }}
           />
-        </div>
-        <div class="w-9/12 pl-1">
-          <div class="w-full h-full bg-secondary">
-            {#key rerenderList}
-              <LineEditor
-                on:input={(e) => {
-                  saveChangesOnInput(e.detail.script, i, "value");
-                }}
-                action={config}
-                {sidebarWidth}
-                value={script.value}
-              />
-            {/key}
-          </div>
-        </div>
-        <div class="w-1/12 pl-1 flex items-center justify-center">
-          {#if i !== 0}
-            <button
-              on:click={() => {
-                removeSelfVariable(i);
+
+          <div class="border border-black flex items-center flex-grow h-full">
+            <LineEditor
+              on:input={(e) => {
+                script.value = e.detail.script ?? "";
+                sendData();
               }}
-              class="flex items-center group cursor-pointer pl-1"
+              on:change={() => dispatch("sync")}
+              action={config}
+              value={script.value}
+            />
+          </div>
+
+          <button
+            class:invisible={i === 0}
+            on:click={() => {
+              removeSelfVariable(i);
+            }}
+            class="flex group cursor-pointer"
+          >
+            <svg
+              class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
+              viewBox="0 0 29 29"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <svg
-                class="w-5 h-5 p-1 fill-current group-hover:text-white text-gray-500"
-                viewBox="0 0 29 29"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
-                />
-                <path
-                  d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
-                />
-              </svg>
-            </button>
-          {:else}
-            <div class=" flex invisible items-center group cursor-pointer pl-1">
-              <div class="w-5 h-5 p-1">x</div>
-            </div>
-          {/if}
+              <path
+                d="M2.37506 0.142151L28.4264 26.1935L26.1934 28.4264L0.142091 2.37512L2.37506 0.142151Z"
+              />
+              <path
+                d="M28.4264 2.37512L2.37506 28.4264L0.14209 26.1935L26.1934 0.142151L28.4264 2.37512Z"
+              />
+            </svg>
+          </button>
         </div>
-      </div>
-    {/each}
-  </div>
+      {/each}
+    </div>
 
-  <div class="w-full flex group p-2">
-    <button
-      on:click={() => {
-        addSelfVariable();
-      }}
-      class="group-hover:border-pick cursor-pointer group-hover:bg-select-saturate-10 border-secondary transition-colors duration-300 w-full border-l-4 text-white pl-4 py-0.5"
-    >
-      Add self variable...
-    </button>
-  </div>
+    <div class="self-center">
+      <MoltenPushButton
+        click={addSelfVariable}
+        text={"Add New Self Variable"}
+      />
+    </div>
 
-  <SendFeedback feedback_context="Selfs" class="mt-2 text-sm text-gray-500" />
-</config-self-definitions>
-
-<style>
-  .self-defs:first-child {
-    padding-top: 0;
-  }
-</style>
+    <SendFeedback feedback_context="Selfs" class="text-sm text-gray-500" />
+  </div>
+</container>