From 8fefbe241988746695478411224364f30d4253c4 Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Sat, 20 Dec 2025 11:24:19 +0530
Subject: [PATCH] feat: Introduce BlockEditor component for managing simulation
 block styles and properties.

---
 .../components/block/BlockEditor.tsx          | 12 ++++---
 .../components/element/ElementDesign.tsx      | 32 +++++++++++++------
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
index 3ed46df..ae6b47c 100644
--- a/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
+++ b/app/src/components/SimulationDashboard/components/block/BlockEditor.tsx
@@ -241,7 +241,6 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
                             <input
                                 type="color"
                                 value={rgbaToHex(getCurrentBlockStyleValue(currentBlock, "backgroundColor"))}
-                                // onChange={(e) => setColor(e.target.value)}
                                 onChange={(e) => handleBackgroundColorChange(currentBlock, selectedBlock, updateBlockStyle, e.target.value)}
                             />
 
@@ -251,12 +250,17 @@ const BlockEditor: React.FC<BlockEditorProps> = ({
                     <InputRange
                         label={"Opacity"}
                         min={0}
-                        max={8}
+                        max={100}
                         value={Math.round(getAlphaFromRgba(getCurrentBlockStyleValue(currentBlock, "backgroundColor")) * 100)}
-                        // onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
+                        onChange={(value: number) => handleBackgroundAlphaChange(currentBlock, selectedBlock, updateBlockStyle, Number(value))}
+                    />
+                    <InputRange
+                        label={"Blur"}
+                        min={0}
+                        max={30}
+                        value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")}
                         onChange={(value: number) => handleBlurAmountChange(selectedBlock, updateBlockStyle, Number(value))}
                     />
-                    <InputRange label={"Blur"} min={0} max={8} value={parseInt(getCurrentBlockStyleValue(currentBlock, "backdropFilter")?.match(/\d+/)?.[0] || "10")} />
                 </div>
             </div>
         </div>
diff --git a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
index 21a0379..c57aa69 100644
--- a/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
+++ b/app/src/components/SimulationDashboard/components/element/ElementDesign.tsx
@@ -161,15 +161,6 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                         placeholder={"Layer"}
                         onChange={(newValue: string) => updateElementZIndex(selectedBlock, selectedElement, Number(newValue))}
                     />
-
-                    <InputRange
-                        label={"Blur"}
-                        min={0}
-                        max={40}
-                        value={parseInt(getCurrentElementStyleValue(currentElement, "backdropFilter")?.match(/\d+/)?.[0] || "0")}
-                        onChange={(value: number) => updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` })}
-                    />
-
                     <InputRange
                         label={"Radius"}
                         min={0}
@@ -235,7 +226,7 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
             </div>
 
             <div className="design-section element-color">
-                <div className="section-header">Element Color</div>
+                <div className="section-header">Background</div>
                 <div className="data-picker">
                     <div className="label">Color</div>
                     <div className="left">
@@ -253,6 +244,27 @@ const ElementDesign: React.FC<ElementDesignProps> = ({
                         <div className="colorValue">{rgbaToHex(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(50,50,50,1)")}</div>
                     </div>
                 </div>
+                <InputRange
+                    label={"Opacity"}
+                    min={0}
+                    max={100}
+                    value={Math.round(getAlphaFromRgba(getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(0,0,0,1)") * 100)}
+                    onChange={(value: number) => {
+                        const currentBg = getCurrentElementStyleValue(currentElement, "backgroundColor") || "rgba(0,0,0,1)";
+                        const currentHex = rgbaToHex(currentBg);
+                        const newBg = hexToRgba(currentHex, Number(value) / 100);
+                        updateElementStyle(selectedBlock, selectedElement, { backgroundColor: newBg });
+                    }}
+                />
+                <InputRange
+                    label={"Blur"}
+                    min={0}
+                    max={30}
+                    value={parseInt(getCurrentElementStyleValue(currentElement, "backdropFilter")?.match(/\d+/)?.[0] || "0")}
+                    onChange={(value: number) => {
+                        updateElementStyle(selectedBlock, selectedElement, { backdropFilter: `blur(${Number(value)}px)` });
+                    }}
+                />
             </div>
             <div className="footer">Swap with Another Element</div>
         </div>