diff --git a/playwright-tests/data/actionBlockElements.json b/playwright-tests/data/actionBlockElements.json
index 90f2fb645..5fb755de5 100644
--- a/playwright-tests/data/actionBlockElements.json
+++ b/playwright-tests/data/actionBlockElements.json
@@ -11,17 +11,8 @@
   "led": {
     "Start Animation": ["ledNumber", "Layer", "Phase", "Rate", "Shape"],
     "Stop Animation": ["ledNumber", "Layer"],
-    "Color": [
-      "ledNumber",
-      "Layer",
-      "Red",
-      "Green",
-      "Blue",
-      "Canva",
-      "Random",
-      "Beauty"
-    ],
-    "Intensity": ["LED Number", "Layer", "Intensity"]
+    "Simple Color": ["ledNumber", "Layer", "Red", "Green", "Blue"],
+    "Simple Intensity": ["Element", "Layer", "Intensity"]
   },
   "midi": {
     "MIDI": ["Channel", "Command", "Parameter1", "Parameter2"],
diff --git a/playwright-tests/data/actionBlockLocators.js b/playwright-tests/data/actionBlockLocators.js
index bc99d060a..a17278a27 100644
--- a/playwright-tests/data/actionBlockLocators.js
+++ b/playwright-tests/data/actionBlockLocators.js
@@ -65,23 +65,20 @@ export const blocks = (page) => ({
         Layer: page.getByLabel("Layer"),
       },
     },
-    Color: {
-      block: page.locator("#action-menu").getByText("Color", { exact: true }),
+    "Simple Color": {
+      block: page.locator("#action-menu").getByText("Simple Color"),
       elements: {
-        ledNumber: page.getByLabel("LED Number"),
+        ledNumber: page.getByLabel("Element"),
         Layer: page.getByLabel("Layer"),
         Red: page.getByLabel("Red"),
         Green: page.getByLabel("Green"),
         Blue: page.getByLabel("Blue"),
-        Canva: page.getByTestId("rgb-color-picker-canvas"),
-        Random: page.getByTestId("random-color-generator"),
-        Beauty: page.locator("#cfg-0").getByRole("checkbox"),
       },
     },
-    Intensity: {
-      block: page.locator("#action-menu").getByText("Intensity"),
+    "Simple Intensity": {
+      block: page.locator("#action-menu").getByText("Simple Intensity"),
       elements: {
-        "LED Number": page.getByLabel("LED Number"),
+        Element: page.getByLabel("Element"),
         Layer: page.getByLabel("Layer"),
         Intensity: page.getByLabel("Intensity"),
       },
diff --git a/playwright-tests/data/actionBlocks.json b/playwright-tests/data/actionBlocks.json
index f073a2149..c6538124a 100644
--- a/playwright-tests/data/actionBlocks.json
+++ b/playwright-tests/data/actionBlocks.json
@@ -1,7 +1,12 @@
 {
   "Function": ["Function"],
   "variables": ["Lookup", "Global", "Locals", "Self"],
-  "led": ["Start Animation", "Stop Animation", "Color", "Intensity"],
+  "led": [
+    "Start Animation",
+    "Stop Animation",
+    "Simple Color",
+    "Simple Intensity"
+  ],
   "midi": ["MIDI", "MIDI 14", "SysEX", "MIDI NRPN"],
   "hid": [
     "GamePad Axis",
diff --git a/playwright-tests/tests/actionBlockExistence.spec.js b/playwright-tests/tests/actionBlockExistence.spec.js
index 40d4dfcbf..e89e756e9 100644
--- a/playwright-tests/tests/actionBlockExistence.spec.js
+++ b/playwright-tests/tests/actionBlockExistence.spec.js
@@ -142,7 +142,7 @@ test.describe("Interactable input field", () => {
           const fieldCount = await inputFields.count();
           const monacoCount = await monacoFields.count();
 
-          const expectedValue = "123";
+          const expectedValue = "test";
 
           // Loop through monaco fields and interact with them
           for (let i = 0; i < monacoCount; i++) {
@@ -153,7 +153,7 @@ test.describe("Interactable input field", () => {
             await keyboardActions.selectAll();
             await keyboardActions.type(expectedValue);
             const value = await monacoField.innerText();
-            expect(value).toMatch("123");
+            expect(value).toMatch("test");
           }
 
           // Loop through input fields and interact with them
diff --git a/playwright-tests/tests/actionsOperation.spec.js b/playwright-tests/tests/actionsOperation.spec.js
index 0ab7e6ce2..3b5bd5977 100644
--- a/playwright-tests/tests/actionsOperation.spec.js
+++ b/playwright-tests/tests/actionsOperation.spec.js
@@ -26,9 +26,9 @@ test.describe("Action Block Operations", () => {
 
   test("Add Action Block to empty element", async () => {
     await configPage.openActionsOnEmptyElement();
-    await configPage.addActionBlock("led", "Color");
+    await configPage.addActionBlock("led", "Simple Color");
     await expect(
-      configPage.blocks["led"]["Color"]["elements"]["Blue"],
+      configPage.blocks["led"]["Simple Color"]["elements"]["Blue"],
     ).toBeVisible();
   });
 
diff --git a/src/renderer/config-blocks/LedColor.svelte b/src/renderer/config-blocks/LedColor.svelte
deleted file mode 100644
index 32c555796..000000000
--- a/src/renderer/config-blocks/LedColor.svelte
+++ /dev/null
@@ -1,284 +0,0 @@
-<script lang="ts" context="module">
-  import type { ActionBlockInformation } from "./ActionBlockInformation.ts";
-  // Component for the untoggled "header" of the component
-  import RegularActionBlockFace from "./headers/RegularActionBlockFace.svelte";
-  export const header = RegularActionBlockFace;
-
-  export const information: ActionBlockInformation = {
-    short: "glc",
-    name: "LedColor",
-    category: "led",
-    rendering: "standard",
-    color: "#726E60",
-    displayName: "Color",
-    defaultLua: "glc(self:ind(),1,glr(),glg(),glb())",
-    icon: `
-    <svg width="100%" height="100%" viewBox="0 0 404 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 202C0 90.4501 90.4501 0 202 0C312.408 0 404 79.7737 404 180.666C404 245.069 351.736 297.333 287.333 297.333H249.68C237.496 297.333 227.68 307.149 227.68 319.333C227.68 325.01 229.708 330 233.104 333.86C239.962 341.32 244 351.165 244 362C244 385.23 225.23 404 202 404C90.4501 404 0 313.55 0 202ZM202 20C101.496 20 20 101.496 20 202C20 302.504 101.496 384 202 384C214.184 384 224 374.184 224 362C224 356.238 221.884 351.185 218.338 347.349L218.267 347.273L218.198 347.195C211.603 339.757 207.68 330.052 207.68 319.333C207.68 296.103 226.45 277.333 249.68 277.333H287.333C340.69 277.333 384 234.023 384 180.666C384 92.9723 303.646 20 202 20ZM148.667 62.667C136.483 62.667 126.667 72.4828 126.667 84.667C126.667 96.8512 136.483 106.667 148.667 106.667C160.85 106.667 170.667 96.851 170.667 84.667C170.667 72.4828 160.851 62.667 148.667 62.667ZM106.667 84.667C106.667 61.4371 125.437 42.667 148.667 42.667C171.897 42.667 190.667 61.4372 190.667 84.667C190.667 107.897 171.896 126.667 148.667 126.667C125.437 126.667 106.667 107.897 106.667 84.667ZM255.333 62.667C243.149 62.667 233.333 72.4828 233.333 84.667C233.333 96.8512 243.149 106.667 255.333 106.667C267.517 106.667 277.333 96.8512 277.333 84.667C277.333 72.4829 267.517 62.667 255.333 62.667ZM213.333 84.667C213.333 61.4372 232.103 42.667 255.333 42.667C278.563 42.667 297.333 61.4371 297.333 84.667C297.333 107.897 278.563 126.667 255.333 126.667C232.103 126.667 213.333 107.897 213.333 84.667ZM84.667 148C72.4828 148 62.667 157.816 62.667 170C62.667 182.184 72.4828 192 84.667 192C96.8504 192 106.667 182.184 106.667 170C106.667 157.816 96.8512 148 84.667 148ZM42.667 170C42.667 146.77 61.4372 128 84.667 128C107.897 128 126.667 146.77 126.667 170C126.667 193.23 107.896 212 84.667 212C61.4372 212 42.667 193.23 42.667 170ZM319.333 148C307.149 148 297.333 157.816 297.333 170C297.333 182.184 307.149 192 319.333 192C331.517 192 341.333 182.184 341.333 170C341.333 157.816 331.517 148 319.333 148ZM277.333 170C277.333 146.77 296.103 128 319.333 128C342.563 128 361.333 146.77 361.333 170C361.333 193.23 342.563 212 319.333 212C296.103 212 277.333 193.23 277.333 170Z" fill="black"/>
-    </svg>`,
-    blockIcon: `
-    <svg width="100%" height="100%" viewBox="0 0 404 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M0 202C0 90.4501 90.4501 0 202 0C312.408 0 404 79.7737 404 180.666C404 245.069 351.736 297.333 287.333 297.333H249.68C237.496 297.333 227.68 307.149 227.68 319.333C227.68 325.01 229.708 330 233.104 333.86C239.962 341.32 244 351.165 244 362C244 385.23 225.23 404 202 404C90.4501 404 0 313.55 0 202ZM202 20C101.496 20 20 101.496 20 202C20 302.504 101.496 384 202 384C214.184 384 224 374.184 224 362C224 356.238 221.884 351.185 218.338 347.349L218.267 347.273L218.198 347.195C211.603 339.757 207.68 330.052 207.68 319.333C207.68 296.103 226.45 277.333 249.68 277.333H287.333C340.69 277.333 384 234.023 384 180.666C384 92.9723 303.646 20 202 20ZM148.667 62.667C136.483 62.667 126.667 72.4828 126.667 84.667C126.667 96.8512 136.483 106.667 148.667 106.667C160.85 106.667 170.667 96.851 170.667 84.667C170.667 72.4828 160.851 62.667 148.667 62.667ZM106.667 84.667C106.667 61.4371 125.437 42.667 148.667 42.667C171.897 42.667 190.667 61.4372 190.667 84.667C190.667 107.897 171.896 126.667 148.667 126.667C125.437 126.667 106.667 107.897 106.667 84.667ZM255.333 62.667C243.149 62.667 233.333 72.4828 233.333 84.667C233.333 96.8512 243.149 106.667 255.333 106.667C267.517 106.667 277.333 96.8512 277.333 84.667C277.333 72.4829 267.517 62.667 255.333 62.667ZM213.333 84.667C213.333 61.4372 232.103 42.667 255.333 42.667C278.563 42.667 297.333 61.4371 297.333 84.667C297.333 107.897 278.563 126.667 255.333 126.667C232.103 126.667 213.333 107.897 213.333 84.667ZM84.667 148C72.4828 148 62.667 157.816 62.667 170C62.667 182.184 72.4828 192 84.667 192C96.8504 192 106.667 182.184 106.667 170C106.667 157.816 96.8512 148 84.667 148ZM42.667 170C42.667 146.77 61.4372 128 84.667 128C107.897 128 126.667 146.77 126.667 170C126.667 193.23 107.896 212 84.667 212C61.4372 212 42.667 193.23 42.667 170ZM319.333 148C307.149 148 297.333 157.816 297.333 170C297.333 182.184 307.149 192 319.333 192C331.517 192 341.333 182.184 341.333 170C341.333 157.816 331.517 148 319.333 148ZM277.333 170C277.333 146.77 296.103 128 319.333 128C342.563 128 361.333 146.77 361.333 170C361.333 193.23 342.563 212 319.333 212C296.103 212 277.333 193.23 277.333 170Z" fill="black"/>
-    </svg>`,
-    selectable: true,
-    movable: true,
-    hideIcon: false,
-    type: "single",
-    toggleable: true,
-    editName: true,
-    version: "2.0",
-  };
-</script>
-
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  import {
-    MeltCombo,
-    MeltSelect,
-    Toggle,
-    SliderColorPicker,
-    SquareColorPicker,
-    Color,
-  } from "@intechstudio/grid-uikit";
-  import { GridScript } from "@intechstudio/grid-protocol";
-  import SendFeedback from "../main/user-interface/SendFeedback.svelte";
-  import { Validator } from "./validators";
-  import { Script } from "./_script_parsers.js";
-  import { LocalDefinitions } from "../runtime/runtime.store";
-  import {
-    ActionData,
-    GridAction,
-    GridElement,
-    GridEvent,
-  } from "./../runtime/runtime";
-  import { Grid } from "../lib/_utils.js";
-  import RandomColorGenerator from "../main/user-interface/RandomColorGenerator.svelte";
-
-  export let action: GridAction;
-
-  let event = action.parent as GridEvent;
-  const dispatch = createEventDispatcher();
-
-  const parameterNames = ["LED Number", "Layer", "Red", "Green", "Blue"];
-  const validators = [
-    {
-      value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
-    {
-      value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
-    {
-      value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
-    {
-      value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
-    {
-      value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
-  ];
-
-  let scriptSegments = [];
-
-  let beautyMode = 0;
-  let beautify = true;
-
-  const defaultColor = new Color.RGB(255, 255, 255).toHSL();
-  let color: Color.HSL = defaultColor;
-
-  $: if (!$action.invalid) {
-    handleActionChange($action);
-  }
-
-  function parseRGB(r: any, g: any, b: any): Color.RGB | undefined {
-    if (![r, g, b].map((e) => parseInt(e)).every((e) => Number.isFinite(e))) {
-      return undefined;
-    }
-
-    return new Color.RGB(parseInt(r), parseInt(g), parseInt(b));
-  }
-
-  function handleActionChange(data: ActionData) {
-    const _segments = Script.toSegments({
-      short: data.short,
-      script: data.script,
-    });
-
-    // handle legacy and new beautify command
-    if (_segments.length == 6) {
-      beautify = +_segments[5] == 1 ? false : true; // check on number instead of string!
-      scriptSegments = _segments.slice(0, -1);
-    } else {
-      scriptSegments = _segments;
-      beautify = true;
-    }
-
-    color =
-      parseRGB(
-        scriptSegments[2],
-        scriptSegments[3],
-        scriptSegments[4],
-      )?.toHSL() ?? defaultColor;
-  }
-
-  function changeBeautify() {
-    beautyMode = beautify ? 0 : 1;
-    sendData(undefined, undefined);
-    dispatch("sync");
-  }
-
-  function sendData(e, index) {
-    if (e !== undefined && index !== undefined) {
-      scriptSegments[index] = e;
-    }
-    const script = Script.toScript({
-      short: action.short,
-      array: [...scriptSegments, beautyMode],
-    });
-
-    dispatch("update-action", {
-      short: action.short,
-      script: script,
-      validationError: validators.some((e) => e.value === false),
-    });
-  }
-
-  const _suggestions = [
-    [],
-    [
-      { value: "1", info: "layer 1" },
-      { value: "2", info: "layer 2" },
-    ],
-    [],
-    [],
-    [],
-  ];
-
-  let suggestions = [];
-
-  $: if ($event) {
-    updateSuggestions();
-  }
-
-  function updateSuggestions() {
-    const actions = $event.config;
-    const index = actions.findIndex((e) => e.id === action.id);
-    const localDefinitions = LocalDefinitions.getFrom({
-      configs: actions,
-      index: index,
-    });
-    suggestions = _suggestions.map((s, i) => {
-      if (i === 1) {
-        const target = event.parent as GridElement;
-        return Grid.Protocol.getLayerSuggestions(target.type);
-      } else {
-        return [...localDefinitions, ...s];
-      }
-    });
-  }
-
-  function updateColor(e: any) {
-    const color: Color.RGB = e.detail.color.toRGB();
-    scriptSegments[2] = color.r;
-    scriptSegments[3] = color.g;
-    scriptSegments[4] = color.b;
-
-    sendData();
-  }
-
-  enum ColorPickerModel {
-    RGB,
-    HSL,
-  }
-
-  const colorPickerComponent = new Map([
-    [ColorPickerModel.RGB, SquareColorPicker],
-    [ColorPickerModel.HSL, SliderColorPicker],
-  ]);
-
-  const options = [
-    { title: "RGB", value: ColorPickerModel.RGB },
-    { title: "HSL", value: ColorPickerModel.HSL },
-  ];
-  let selected = ColorPickerModel.RGB;
-</script>
-
-<config-led-color class="flex flex-col gap-2 w-full p-2 pointer-events-auto">
-  <div class="w-full grid grid-flow-col auto-cols-fr gap-2">
-    {#each [0, 1] as i}
-      <MeltCombo
-        title={parameterNames[i]}
-        value={scriptSegments[i]}
-        validator={validators[i].func}
-        suggestions={suggestions[i]}
-        on:input={(e) => {
-          const { value, validationError } = e.detail;
-          scriptSegments[i] = value;
-          validators[i].value = !validationError;
-          sendData(value, i);
-        }}
-        on:change={() => dispatch("sync")}
-        postProcessor={GridScript.shortify}
-        preProcessor={GridScript.humanize}
-      />
-    {/each}
-  </div>
-
-  <div class="text-white">
-    <MeltSelect bind:target={selected} {options} disabled={false} />
-  </div>
-  <div class="grid grid-cols-[1fr_auto] gap-2 items-center h-24">
-    <svelte:component
-      this={colorPickerComponent.get(selected)}
-      {color}
-      on:input={updateColor}
-      on:change={() => dispatch("sync")}
-    />
-    <RandomColorGenerator
-      {color}
-      on:generate={(e) => {
-        updateColor(e);
-        dispatch("sync");
-      }}
-    />
-  </div>
-
-  <div class="w-full grid grid-flow-col auto-cols-fr gap-2">
-    {#each [2, 3, 4] as i}
-      <MeltCombo
-        title={parameterNames[i]}
-        value={scriptSegments[i]}
-        suggestions={suggestions[i]}
-        validator={validators[i].func}
-        on:input={(e) => {
-          const { value, validationError } = e.detail;
-          scriptSegments[i];
-          validators[i].value = !validationError;
-          sendData(value, i);
-        }}
-        on:change={() => dispatch("sync")}
-        postProcessor={GridScript.shortify}
-        preProcessor={GridScript.humanize}
-      />
-    {/each}
-  </div>
-
-  <Toggle bind:value={beautify} on:change={changeBeautify} title="Beautify" />
-
-  <SendFeedback feedback_context="LedColor" />
-</config-led-color>
diff --git a/src/renderer/config-blocks/LedPhase.svelte b/src/renderer/config-blocks/SimpleIntensity.svelte
similarity index 65%
rename from src/renderer/config-blocks/LedPhase.svelte
rename to src/renderer/config-blocks/SimpleIntensity.svelte
index 4dfd80603..9bb905b4b 100644
--- a/src/renderer/config-blocks/LedPhase.svelte
+++ b/src/renderer/config-blocks/SimpleIntensity.svelte
@@ -1,17 +1,16 @@
 <script lang="ts" context="module">
   import type { ActionBlockInformation } from "./ActionBlockInformation.ts";
-  // Component for the untoggled "header" of the component
   import RegularActionBlockFace from "./headers/RegularActionBlockFace.svelte";
   export const header = RegularActionBlockFace;
 
   export const information: ActionBlockInformation = {
-    short: "glp",
-    name: "LedPhase",
+    short: "sglp",
+    name: "SimpleIntensity",
     rendering: "standard",
     category: "led",
-    displayName: "Intensity",
+    displayName: "Simple Intensity",
     color: "#726E60",
-    defaultLua: "glp(self:ind(),1,127)",
+    defaultLua: "self:glp(-1,-1)",
     icon: `
     <svg width="100%" height="100%" viewBox="0 0 303 303" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M204.8 97.6C191.2 84 172 75.2 151.2 75.2C130.4 75.2 111.2 83.6 97.6 97.6C84 111.2 75.2 130.4 75.2 151.2C75.2 172 84 191.2 97.6 204.8C111.2 218.4 130.4 227.2 151.2 227.2C172 227.2 191.2 218.8 204.8 204.8C218.4 191.2 227.2 172 227.2 151.2C227.2 130.4 218.8 111.2 204.8 97.6ZM190.4 190.4C180.4 200.4 166.4 206.4 151.2 206.4C136 206.4 122 200.4 112 190.4C102 180.4 96 166.4 96 151.2C96 136 102 122 112 112C122 102 136 96 151.2 96C166.4 96 180.4 102 190.4 112C200.4 122 206.4 136 206.4 151.2C206.4 166.4 200.4 180.4 190.4 190.4Z" fill="black"/>
@@ -50,112 +49,103 @@
 
 <script lang="ts">
   import { onMount, createEventDispatcher } from "svelte";
-  import { MeltCombo } from "@intechstudio/grid-uikit";
+  import { BlockRow, MeltCombo } from "@intechstudio/grid-uikit";
   import { GridScript } from "@intechstudio/grid-protocol";
   import { Script } from "./_script_parsers.js";
   import { LocalDefinitions } from "../runtime/runtime.store";
-
   import { Validator } from "./validators";
   import {
-    ActionData,
     GridAction,
     GridElement,
     GridEvent,
+    GridPage,
   } from "./../runtime/runtime";
   import { Grid } from "../lib/_utils.js";
+  import { appSettings } from "../runtime/app-helper.store";
 
   export let action: GridAction;
 
-  let event = action.parent as GridEvent;
-
   const dispatch = createEventDispatcher();
 
-  const parameterNames = ["LED Number", "Layer", "Intensity"];
+  let event = action.parent as GridEvent;
+  let element = "self";
+  let layer = "-1";
+  let intensity = "-1";
 
   const validators = [
     {
       value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
+      func: (e: string) => new Validator(e).isLuaValue().Result(),
+    }, // element
     {
       value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
+      func: (e: string) => new Validator(e).isLuaValue().Result(),
+    }, // layer
     {
       value: true,
-      func: (e: string) => {
-        return new Validator(e).isLuaValue().Result();
-      },
-    },
+      func: (e: string) => new Validator(e).isLuaValue().Result(),
+    }, // intensity
   ];
 
-  let scriptSegments = [];
+  let elementSuggestions = [];
+  let layerSuggestions = [];
+  let intensitySuggestions = [];
+
+  function buildScript() {
+    return Script.toScript({
+      short: `${element}:glp`,
+      array: [layer, intensity],
+    });
+  }
 
-  // config.script cannot be undefined
   $: if (!$action.invalid) {
-    handleActionChange($action);
+    if (action.script !== buildScript()) handleActionChange(action);
   }
 
-  function handleActionChange(data: ActionData) {
-    scriptSegments = Script.toSegments({
-      short: data.short,
-      script: data.script,
-    });
+  function handleActionChange(action: GridAction) {
+    const colonIdx = action.script.indexOf(":glp(");
+    if (colonIdx === -1) return;
+    element = action.script.substring(0, colonIdx);
+    const glpPart = action.script.substring(colonIdx + 1);
+    const segments = Script.toSegments({ short: "glp", script: glpPart });
+    layer = segments[0];
+    intensity = segments[1];
   }
 
-  function sendData(e, index) {
-    scriptSegments[index] = e;
-    // important to set the function name = human readable for now
-    const script = Script.toScript({
-      short: action.short,
-      array: scriptSegments,
-    });
+  function sendData() {
+    const script = buildScript();
     dispatch("update-action", {
       short: action.short,
-      script: script,
-      validationError: validators.some((e) => e.value === false),
+      script,
+      validationError: validators.some((v) => v.value === false),
     });
   }
 
-  const defaultLayerSuggestion = [
-    { value: "1", info: "layer 1" },
-    { value: "2", info: "layer 2" },
-  ];
-
-  const _suggestions = [
-    // led number
-    [],
-    // layer
-    defaultLayerSuggestion,
-    // intensity or value
-    [],
-  ];
-
-  let suggestions = [];
-
   $: if ($event) {
     updateSuggestions();
   }
 
   function updateSuggestions() {
+    const gridElement = event.parent as GridElement;
+    const page = gridElement.parent as GridPage;
+
+    elementSuggestions = [
+      { value: "self", info: "Self (Default)" },
+      ...page.control_elements.map((e) => ({
+        value: `element[${e.elementIndex}]`,
+        info: e.getHumanName(),
+      })),
+    ];
+
+    layerSuggestions = Grid.Protocol.getLayerSuggestions(gridElement.type);
+
     const actions = $event.config;
     const index = actions.findIndex((e) => e.id === action.id);
     const localDefinitions = LocalDefinitions.getFrom({
       configs: actions,
-      index: index,
-    });
-    suggestions = _suggestions.map((s, i) => {
-      if (i === 1) {
-        const target = event.parent as GridElement;
-        return Grid.Protocol.getLayerSuggestions(target.type);
-      } else {
-        return [...localDefinitions, ...s];
-      }
+      index,
     });
+    intensitySuggestions = [{ value: "-1", info: "Auto" }, ...localDefinitions];
   }
 
   onMount(() => {
@@ -163,24 +153,56 @@
   });
 </script>
 
-<config-led-phase class="flex flex-col w-full p-2 pointer-events-auto">
-  <div class="w-full grid grid-flow-col auto-cols-fr gap-2">
-    {#each scriptSegments as script, i}
+<config-simple-intensity
+  class="flex flex-col gap-2 w-full p-2 pointer-events-auto"
+>
+  {#if $appSettings.persistent.userLevelMinimalist == false}
+    <BlockRow>
+      <MeltCombo
+        title={"Element"}
+        value={element}
+        validator={validators[0].func}
+        suggestions={elementSuggestions}
+        on:input={(e) => {
+          const { value, validationError } = e.detail;
+          element = value;
+          validators[0].value = !validationError;
+          sendData();
+        }}
+        on:change={() => dispatch("sync")}
+        postProcessor={GridScript.shortify}
+        preProcessor={GridScript.humanize}
+      />
       <MeltCombo
-        title={parameterNames[i]}
-        value={script}
-        suggestions={suggestions[i]}
-        validator={validators[i].func}
+        title={"Layer"}
+        value={layer}
+        validator={validators[1].func}
+        suggestions={layerSuggestions}
         on:input={(e) => {
           const { value, validationError } = e.detail;
-          script = value;
-          validators[i].value = !validationError;
-          sendData(value, i);
+          layer = value;
+          validators[1].value = !validationError;
+          sendData();
         }}
         on:change={() => dispatch("sync")}
         postProcessor={GridScript.shortify}
         preProcessor={GridScript.humanize}
       />
-    {/each}
-  </div>
-</config-led-phase>
+    </BlockRow>
+  {/if}
+  <MeltCombo
+    title={"Intensity"}
+    value={intensity}
+    validator={validators[2].func}
+    suggestions={intensitySuggestions}
+    on:input={(e) => {
+      const { value, validationError } = e.detail;
+      intensity = value;
+      validators[2].value = !validationError;
+      sendData();
+    }}
+    on:change={() => dispatch("sync")}
+    postProcessor={GridScript.shortify}
+    preProcessor={GridScript.humanize}
+  />
+</config-simple-intensity>